码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2014-09-19 10:05:05      阅读:234      评论:0      收藏:0      [点我收藏+]

标签:style   blog   color   io   使用   ar   strong   2014   div   

除了上一篇学习到的主体结构元素之外,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>

 

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

标签:style   blog   color   io   使用   ar   strong   2014   div   

原文地址:http://www.cnblogs.com/goupb/p/3979688.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!