HTML5 新增的的非主体结构元素

HTML5 新增的的非主体结构元素包括header元素、footer元素、address元素、hgroup元素。

header元素：header元素是一种具有引导和导航作用的结构元素，通常用来放置整个页面或页面内的一个内容区块的标题，但是也可以包含其他内容，如：数据表格、搜索表单、或者相关的logo。它可以出现多次。

<!DOCTYPE html>
<html>
<head lang="en">
    <title>header元素</title>
    <meta charset="utf-8">
</head>
<body>
    <header>
        <h1>页面标题</h1>
    </header>
    <article>
        <header>
            <h1>hello</h1>
        </header>
    </article>
    <br/>

    <header>
        <h1>天气预报</h1>
        <a href="http://www.weather.com.cn/weather/101271401.shtml">详情页</a>
        <nav>
            <ul>
                <li><a href="#">北京</a></li>
                <li><a href="#">上海</a></li>
                <li><a href="#">广州</a></li>
            </ul>
        </nav>
    </header>

</body>
</html>

footer元素：footer元素可以作为其上层父级内容区块或是一个根区块的脚注。footer通常包括其相关区块的脚注信息，如作者、相关阅读链接及版权信息等。

<!DOCTYPE html>
<html>
<head lang="en">
    <title>footer元素</title>
    <meta charset="utf-8">
</head>
<body>
    <footer>
        <ul>
            <li><a href="#">版权信息</a></li>
            <li><a href="#">站点地图</a></li>
            <li><a href="#">联系方式</a></li>
        </ul>
    </footer>

    <article>
        <footer>
            这是文章的底部
        </footer>
    </article>

    <section>
        <footer>
            这也是文章的底部
        </footer>
    </section>
</body>
</html>

address元素：address元素用来在文档中呈现联系地址，包括文档作者或文档维护者的名字、网站链接、电子邮箱、真实地址、电话号码等。address应该不只用来呈现电子邮箱或者真实地址，还可以用来展示跟文档相关的联系人的所有联系信息。

<!DOCTYPE html>
<html>
<head lang="en">
    <title>address元素</title>
    <meta charset="utf-8">
</head>
<body>
    <address>
        <a href="#">周六</a>
        <a href="#">王五</a>
    </address>

    <footer>
        <div>
            <address>
                <a href="#">小王</a>
                这里可以是地址
            </address>
        </div>
    </footer>
</body>
</html>

hgroup元素：hgroup元素是将标题及子标题进行分组的元素。hgroup元素通常会将h1~h6元素进行分组，比如一个内容区块的标题及其子元素算一组。标题过多的时候，使用hgroup将其包裹。

<!DOCTYPE html>
<html>
<head lang="en">
    <title>hgroup元素</title>
    <meta charset="utf-8">
</head>
<body>

    <article>
        <header>
            <hgroup>
                <h1>这是主标题</h1>
                <h4>这是子标题</h4>
            </hgroup>
            <p><time datetime="2016-04-30">2016-04-30</time></p>
        </header>
        <div>这是文章内容</div>
        <footer>这是文章底部</footer>
    </article>

</body>
</html>

H5网页编排示例：

<!DOCTYPE html>
<html>
<head lang="en">
    <title>H5网页编排示例</title>
    <meta charset="utf-8">
</head>
<body>
    <header>
        <h1>网页标题</h1>
        <nav>
            <ul>
                <li><a href="#">首页</a></li>
                <li><a href="#">帮助</a></li>
            </ul>
        </nav>
    </header>
    <article>
        <hgroup>
            <h1>这是主标题</h1>
            <h3>这是子标题</h3>
            <p>文章正文</p>
        </hgroup>
        <section>
            <div>
                <article>
                    <h1>评论标题</h1>
                    <p>评论正文</p>
                </article>
            </div>
        </section>
    </article>
    <footer>
        <small>版权声明</small>
    </footer>
</body>
</html>

 

posted @ 2016-04-30 19:10  Bob-yu  阅读(401)  评论(0)  编辑  收藏  举报