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

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

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

主体结构函数

Article元素

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

?
1
2
3
4
5
6
7
8
9
10
<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 ）

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
/*可以在文章同作用域里加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，明白了吧！

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<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比她更合适。

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<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元素表示当前页面或文章附属信息部分，可以包含当前页面或主体内容的引用、侧边栏、广告、导航等等。最常见是样子就是类似文言文的某个字或词的注释。用法

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<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允许带时差，可以自定义日期格式。

?
1
2
<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组。标题分组。

?
1
2
3
4
5
6
7
8
9
<article>
  <header>
     <hgroup>
        <h1>主标题</h1>
        <h2>子标题</h2>
     </hgroup>
  </header>
    <p>正文....<p>
</artilce>

footer元素

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

address元素

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

?
1
2
3
4
5
6
7
<footer>
  <div>
    <address>
       <a title="andy.zhou的OSChina博客" href="http://my.oschina.com/tow">Andy.zhou</a>
    </address>
  <div>
</footer>

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

posted @   游子善心  阅读(3)  评论(0)  编辑  收藏  举报  
相关博文：
·  第二章 HTML5和HTML4的区别-《HTML5+CSS3权威指南》
·  第一章 Web时代的变迁-《HTML5+CSS3权威指南》
·  HTML结构元素
·  HTML5基础之结构元素
·  HTML5语义化
阅读排行：
· winform 绘制太阳，地球，月球 运作规律
· AI与.NET技术实操系列（五）：向量存储与相似性搜索在 .NET 中的实现
· 超详细：普通电脑也行Windows部署deepseek R1训练数据并当服务器共享给他人
· 【硬核科普】Trae如何「偷看」你的代码？零基础破解AI编程运行原理
· 上周热点回顾（3.3-3.9）
点击右上角即可分享
微信分享提示
AI IDE Trae