HTML5的结构学习(2) --- 新增的非主体结构元素

时间：2024-11-18 13:34:43

除了上一篇学习到的主体结构元素之外，html5还增加了一些表示逻辑结构和附加信息的非主体结构元素：

1.header

解释：一种具有引导和导航作用的结构元素。

用途：通常用来放置整个页面或者页面内某一内容区块的标题部分。如标题名称、logo图片等。

  <header><h1>大标题</h1></header>
  <article>
    <header><h1>文章内容标题</h1></header>
    <p>正文内容</p>
  </article>

在html5中一个header元素至少要包含一个heading元素（h1~h5）或者新增的hgroup元素。

   <header>
    <hgroup>
        <h1>Paper的博客</h1>
        <a href="xxx">
        xxx
        </a>
        <a href="#">[订阅]</a>
        <a href="#">[手机订阅]</a>
    </hgroup>
    <nav>
        <ul>
            <li>首页</li>
            <li>博文目录</li>
            <li>图片</li>
            <li>关于我</li>
        </ul>
    </nav>
  </header>

2.hgroup

解释：是将标题和其子标题分组的元素

用途：包含一组标题

    <article>
    <header>
        <hgroup>
            <h1>主标题</h1>
            <h2>子标题</h2>
        </hgroup>
        <p>
                     <time datetime="2014/09/19">
                           2014年9月19日
                     </time>
               </p>
    </header>
    <p>正文内容</p>
  </article>

注意：文章只有一个标题时不需要使用hgroup

3.footer

解释：作为上层父级区块或者根区块的一个注脚

用途：一般用来包括作者或者链接的相关信息，网站版权等等注脚信息。

  <footer>
    <ul>
        <li>版权信息</li>
        <li>站点地图</li>
        <li>联系方式</li>
    </ul>
  </footer>

注意：footer元素同时也可以存在于section和article区块中，用来表示section区块或者article内容的注脚信息。

4.address

解释：用来在文档中呈现联系信息

用途：用来表示文档作者的名字、网站链接、邮件地址和电话号码等。

比如说网站中的友情链接：

  <aside>
    <address>
        <a href="xxx">同志a</a>
        <a href="xxx">同志b</a>
        <a href="xxx">同志c</a>
    </address>
  </aside>

相关文章