第三章 HTML 5的结构-《HTML5+CSS3权威指南》

这章还是蛮重要的,主要是讲解了结构元素和使用结构元素合理编排页面总体布局。

HTML5中新增加了主体结构函数和非主体结构函数。

主体结构函数

Article元素

Articel元素代表文档、页面或应用程序中独立的、完整的、可以独自被外部引用的内容。这话太虚了,但是好像还只能这么说比较合理。用我的理解就是一个单独的页面(我理解单独的页面是只有一个主题,页面上不包括与这个主题不相关的内容)。书上用最典型的博客或报刊的文章页面为例子。那么article元素就包括文章或者说是博文的内容,作者,版权,发布时间,留言,回复等等,我们常见博客的内容。但是如果文章页面上还包括网站导航,那么这个就不因该在article元素里面。

<article>
  <header>
    <h1>什么是开源中国?</h1>
    <p>发布时间:<time pubdate="pubdate">2011/12/06</time></p>
  </header>
    <p>正文内容....OSCHINA是英文Open Source China的缩写...</p>
  <footer>
     <p><small>版权公开,请随便使用</small></p>
  </footer>
</article>

上面的例子是一篇介绍OSCHINA的文章,可以看出来,文章的所有信息都在article元素里面。

那比如我要实现博文留言或者回复有会出现<header>and<foooter>元素的内容,如果用一个article就会很乱呀?,是不是就不能使用article元素了?当然可以使用了,因为article是可以嵌套article的。事例1(回复留言演示article )

/*可以在文章同作用域里加article元素*/  
<article>
<header>
    <h1>什么是开源中国?</h1>
    <p>发布时间:<time pubdate="pubdate">2011/12/06</time></p>
  </header>
    <p>正文内容....OSCHINA是英文Open Source China的缩写...</p>
  <footer>
     <p><small>版权公开,请随便使用</small></p>
  </footer><section>
   <article>
     <header>
       <h3>发言人:andy.zhou</h3>
       <p><time pubdate date="2011/12/06T14:24-08:00">1小时前</time></p>
     </header>
      <p>I love you OSCHINA。在这里我最喜欢的是小编辑                       的笑话!</p>
   </article>
<article>
     <header>
       <h3>发言人:红薯</h3>
       <p><time pubdate date="2011/12/06T13:15-08:00">2小时前</time></p>
     </header>
      <p>开会拉!</p>
   </article><section>
</article>

section元素

在上面的代码里面是不是看到了在嵌套article元素的时候使用到了section元素了。那么section元素是干什么用的了?其实section元素是用于分块的。一个section里面一般是包括标题和内容的。千万别把section和div混淆了哦,section不是普通的容器元素,可以在section里面使用DIV,明白了吧!

<section>
  <article>
    <h2>中国</h2>
    <p>一个神奇的国度!</p>
  </article>
  <article>
    <h2>美国</h2>
    <p>一个疯癫的国度!</p>
  </article>
  <article>
    <h2>日本</h2>
    <p>一个严谨的国度!</p>
  </article>
</section>
/*这个可以实现列表的效果*/


<article>
  <h1>中国房价为什么居高不下?</h1><p>税高是主要原因。高风险的产业本来就应该有比较高的回报,但是这么的房地商......</p>
  <section>
    <h2>我不同意上述的观点</h2>
      <p>原因是.....</p>
   </section>
   <section>
    <h2>我同意上述的观点</h2>
      <p>原因是.....</p>
   </section>
</article>

可能在每弄清楚元素应该使用那些范围的时候会有些乱,没关系你在仔细梳理一下她们的作用,就会知道的啦!

Nav元素

这个元素从字面的意思也就不难想象是干什么的啦!当然是导航有关的啦,那于导航有什么关系了?记住她是页面或者是内容的导航连接组。既然页面和内容的导航连接组,就说明什么了?就是说在同一个页面可以有N个nav元素的并存。注意的是页面的页脚的连接不建议使用nav元素,因为footer比她更合适。

<body>
 <h1>HTML5+CSS3权威指南</h1>
 <nav>
   <ul><li>首页</li><li>HTML 5</li></ul>
 </nav>
  <article>
    <header>
       <h1>Html5和Css3历史</h1>
       <nav>
         <ul>
             <li><a href="#html5">HTML5</a></li>
             <li><a href="#css3">CSS3</a></li>
        </ul>
       </nav>
    </header>
    <section id ="html5">
      <h1>HTML 5历史</h1>
      <p>讲述HTML 5历史...</p>
    </section>
    <section id ="css3">
      <h1>CSS 3历史</h1>
      <p>讲述Css3历史....</p>
    </section>
  </article>
 <footer><p><a href="javascript:void(0)">联系站长</a><small>版权免费,欢迎使用</small></p></footer>
</body>

aside元素

aside元素表示当前页面或文章附属信息部分,可以包含当前页面或主体内容的引用、侧边栏、广告、导航等等。最常见是样子就是类似文言文的某个字或词的注释。用法

<body>
   <h1>页面验证表单验证</h1>
   <article>
      <h1>页面验证表单验证方法有哪些?</h1>
       <p>页面表单验证可以使用javascript控制也可以使用正则表达....</p>
     <h1>javascript解释</h1>
        <aside>
          <dl>
            <dt>javascript</dt>
            <dd>javascript是脚本语言...</dd>
          <dl>
        </aside>
     </article>
</body>

time元素与微格式

time元素是用来展示时间的元素。time允许带时差,可以自定义日期格式。

<time datetime="2011-12-06">2011年12月06日</time><!--标准-->
<time datetime="2011-12-06T12:00+09:00">2011年12月06日12点是我的生日</time><!--时差,本地编码就不需要了(日期和时间之间用T,T表示时间)-->

pubdate元素

还记不记得上面什么地方使用了pubdate元素了?pubdate元素表示发布时间,用于网页或者文章。上面有代码,所以就不贴代码了!

非主体结构函数

header元素

header元素眼熟吧!表示标题应该放置的地方。这个比较简单,就不多说了。

hgroup元素

h group,看清楚了吧,h 标题,group组。标题分组。

<article>
  <header>
     <hgroup>
        <h1>主标题</h1>
        <h2>子标题</h2>
     </hgroup>
  </header>
    <p>正文....<p>
</artilce>

footer元素

页脚,这个上面代码多次用到。注意一点的是,不要把footer的职责让给了section哦!

address元素

地址元素。里面因该包括文档的作者及其信息,如blogs地址,邮箱....

<footer>
  <div>
    <address>
       <a title="andy.zhou的OSChina博客" href="http://my.oschina.com/tow">Andy.zhou</a>
    </address>
  <div>
</footer>

好了,这章就到这了。这只是告诉你有什么标签,可以做什么用。但是这些标签用到恰到好处还需要很长一段路的磨练。

posted @ 2011-12-06 15:59  游子善心  阅读(2)  评论(0编辑  收藏  举报  来源