前端开发H5文档结构元素

java写微信端的前端开发
前端开发 和java
前端开发还是java难

HTML5定义了一组新的语义化标签来描述元素的内容,新增的语言标签有利于简化页面设计,更有利于搜索引擎对页面的检索和抓取。
1.<article> 用于表示文档,页面或应用程序中独立的,完整的,可以独自被外部引用的内容,该内容可以是一篇文章,一篇短文,一个帖子,一个评论等。
2.<header> 用于定义文章的页眉信息,其中包含多个标题(<h1>~<h6>),导航部分(<nav>)和普通内容(<p><span>)等部分。
3.<hgroup> 用于网页和区段(section)的标题进行组合,当<header>标签中包含多个标题时,可以考虑使用<hgroup>标签将标题组成一组。
4.<nav> 用于定义页面中的各种导航。
5.<section> 对文章的内容进行分块,例如章节,页眉,页脚或文档中的其他部分。
6.<aside> 用于定义当前页面或当前文章的附属信息,包括当前页面或当前文章的相关引用,侧边栏,广告以及导航等有别于主体内容的部分。
7.<footer> 定义脚注部分·,包括文章的版权信息,作者授权等信息。html 代码

<!DOCTYPE html
    PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
    <meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
    <title>影视介绍</title>
    <link type=”text/css” rel=”stylesheet” href=”HTML5Structure.css” />
    <style type=”text/css”>
        .demo {
            background: url(头部.jpg) no-repeat;
            height: 110px;
            width: 1400px;
            border: 1px solid #999;
            /*指定图像边框的宽度,实线,颜色*/
            background-size: 100% 100%;
        }
    </style>
</head>
<body style=”style:#CCCCCC”>
    <aticle id=”main”>
        <header>
            <div class=”demo”>
                <h1>&nbsp;&nbsp;热门<strong>影视</strong></h1>
            </div>
        </header>
        <nav>
            <ul>
                <li>首页</li>
                <li>影视</li>
                <li>喜剧</li>
            </ul>
        </nav>
        <aside>
            <h3>演员表</h3>
            <section>
                <table>
                    <tr>
                        <th>角色</th>
                        <th>演员</th>
                    </tr>
                    <tr>
                        <td>阿米尔</td>
                        <td>马哈维亚</td>
                    </tr>
                    <tr>
                        <td>萨卡诗-泰瓦</td>
                        <td>Daya Kaur</td>
                    </tr>
                    <tr>
                        <td>吉塔</td>
                        <td>法堤玛</td>
                    </tr>
                    <tr>
                        <td>巴比塔</td>
                        <td>桑亚</td>
                    </tr>
                </table>
            </section>
        </aside>
        <section>
            <header>
                <hgroup>
                    <h1>摔跤吧,爸爸!</h1>
                    <h3>2016年12月23日,电影在印度开机</h3>
            </header>
        </section>
        <section class=”leftPic”>
            <img src=”海报.jpg” width=”300″ /></section>
        <article class=”movieDetail”>
            <span>基本信息</span>
            <hr />
            <p>《摔跤吧!爸爸》是由尼特什·提瓦瑞执导、阿米尔·汗领衔主演的印度传记片。</p>
            <p>马哈维亚·辛格·珀尕(阿米尔·汗饰)曾是印度国家摔跤冠军,因生活所迫放弃摔跤。他希望让儿子可以帮他完成梦想——赢得世界级金牌。结果生了四个女儿本以为梦想就此破碎的辛格却意外发现女儿身上的惊人天赋,看到冠军希望的他决定不能让女儿的天赋浪费,像其他女孩一样只能洗衣做饭过一生,再三考虑之后,与妻子约定一年时间按照摔跤手的标准训练两个女儿:换掉裙子
                、剪掉了长发,让她们练习摔跤,并赢得一个又一个冠军,最终赢来了成为榜样激励千千万万女性的机会……</p>
            <p>影片于2016年12月23日在印度上映,2017年05月05日在中国大陆上映 。</p>
        </article>
        <article class=”movieDetail”>
            <span>影片评价</span>
            <hr />
            <p>《摔跤吧!爸爸》是一部充满人文关怀的电影。(人民网评)</p>
            <p>《摔跤吧!爸爸》由于女权色彩及时效性,使很多观众产生了共鸣。(闽南网评)</p>
            <p>《摔跤吧!爸爸》是一部女性为自己争取命运自主权并赢得尊严的励志喜剧电影 。(电影网评)</p>
            <p>《摔跤吧!爸爸》根据真人真事改编,讲述曾经的摔跤冠军辛格培养几个女儿成为女子摔跤冠军,打破印度传统的励志故事。影片对于女性意识的关注,在”直男癌”问题严重的宝莱坞可谓是另辟蹊径,达到了不俗的社会轰动效应,直接催生出傲人的票房成绩。(网易评价)
            </p>
        </article>
        <section class=“lastPic”>
            <img src=”a.jpg” width=”150″ height=”150″ />
            <img src=”b.jpg” width=”150″ height=”150″ />
            <img src=”c.jpg” width=”150″ height=”150″ />
            <img src=”d.jpg” width=”150″ height=”150″ />
            <img src=”e.jpg” width=”150″ height=”150″ />
            <img src=”f.jpg” width=”150″ height=”150″ />
        </section>
        <div class=”clearFloat”></div>
        <footer>
            Copyright 2015-2020 热门影视推荐版权所有 咨询电话 400-658-325-1022
        </footer>
        </article>
</body>
</html>

css 代码

@charset “utf-8″</p>
<p>#main {
    margin: 0 auto;
    width: 970px;
}
nav {
    background-color: #999;
    width: 100%;
    height: 30px;
}
nav ul {
    list-style-type: none;
    padding-top: 8px;
}
nav ul li {
    float: left;
    margin-right: 20px;
}
.leftPic {
    float: left;
    margin-right: 10px;
}
.lastPic {
    margin: 25px;
}
footer {
    position: absolute;
    top: 700px;
    background-color: #999;
    height: 20px;
    width: 100%;
    text-align: center;
    font-size: 12px;
    padding-top: 12px;
}
.clearFloat {
    clear: both;
}
.movieDetail span {
    font-size: 24px;
    font-family: 黑体;
}
.movieDetail p {
    text-indent: 25px;
}
aside {
    position: absolute;
    background-color: #dda;
    border: 1px solid black;
    width: 180px;
    right: 10px;
    top: 135px;
    text-align: center;
    padding-left: 10px;
}
javasha前端开发资料
前端开发与java的区别
前端开发学java
» 本文来自:前端开发者 » 《前端开发H5文档结构元素》
» 本文链接地址:https://www.rokub.com/8155.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!