<!DOCTYPE html>p37
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK"/>
<title>2.3.1新增-文档结构元素</title>
</head>
<body>
在HTML5以前，HTML页面只能使用div元素作为结构元素，而HTML5则提供了
article、section、nav、aside、header、footer等文档结构元素。<br><br>
<p>
1、article：该元素用于代表页面上独立、完整的一篇“文章”，该元素表示的内容
可以是一个帖子、一篇Blog文章、一篇短文、一条完整的回复等。总之，只要是
一篇独立的文档内容，就应该使用article元素来表示。
<blockquote>
关于article的简单规则如下：<br>
1)article元素内部可使用header定义文章“标题”部分。
2)article元素内部可使用footer定义文章“脚注”部分。
3)article元素内部可使用多个section把文章内容分成几个“段落”。
4)article元素内部可嵌套多个article作为它的附属“文章”，
比如一篇Blog文章后面可以有多篇回复文章。
</blockquote>
</p>
<p>
2、section：该元素用于对页面的内容进行分块。section元素通常也可由标题和内容组成。
<blockquote>
关于section元素的简单规则如下：<br>
1)通常建议section元素包含一个标题（也就是h1~h6元素定义的标题）。
2)section元素可以包含多个article元素，表示该“分块”内部包含多篇文章。
3)section元素可以嵌套section元素，用于表示该“分块”包含多个“子分块”。
</blockquote>
</p>
<p>
<b>
article和section两个元素非常容易搞混，因为它们都可以包含很多子元素，
而且可以相互嵌套。但article和section的侧重点不同：article侧重于表达
一篇独立的、完整的文章，而section则侧重于对页面内容进行分块。
换句话来说，如果想表达一块独立、完整的内容时，应该使用article元素；
如果想把一块内容分成几个部分，则应该使用section元素。
</b>
</p>
<p>
3、nav：该元素专门用于定义页面上的“导航条”，包括页面上方的“主导航条”、
侧边的“边栏导航”、页面内部的“页面导航”、页面下方的“底部导航”等，
HTML5推荐将这些导航链接分别放在相应的nav元素中进行管理。
</p>
<p>
4、aside：该元素专门用于定义当前页面或当前文章的附属信息，通常来说，
推荐aside元素使用CSS渲染成侧边栏。
</p>
<p>
5、header：该元素主要用于为article元素定义文章“头部”信息。
该元素内部既可包含多个h1~h6这样的标题元素，也可包含hgroup元素，
还可包含普通的p、span等元素。
</p>
<p>
6、hgroup：该元素主要用于组织多个h1~h6这样的标题元素。
当header需要包含多个标题元素时，可以考虑使用hgroup把它们组成一组。
</p>
<p>
7、figure：该元素用于表示一块独立的“图片区域”，该元素内部可包含一个或多个
img元素所代表的图片。除此之外，该元素内部还可包含一个figcaption元素，
用于定义该“图片区域”的标题。
</p>
<p>
8、figcaption：该元素通常放在figure内部，用于定义“图片区域”的标题。
</p>
<p>
<blockquote>
eg：使用figure元素定义一块“图片区域”，在这块“图片区域”内包含了3张图片，
还使用CSS为figure元素添加了一个边框。<br>
<figure style="border:2px solid black;padding:5px;width:500px">
<figcaption><b>疯狂Java体系图书</b></figcaption>
<img src="images/logo.jpg" alt="疯狂Java讲义"/>
<img src="images/logo.jpg" alt="疯狂Android讲义"/>
<img src="images/logo.jpg" alt="轻量级Java EE企业应用实战"/>
</figure>
<b>
figure定义的“图片区域”代表了网页上的独立区域，每个figure元素内部只能包含一个figcaption元素。
</b>
</blockquote>
</p>
<p>
除了section元素可指定cite属性之外，上面其余元素都只支持id、class、style、
contentEditable、hidden等通用属性。
</p>
<hr>
<p>
eg：使用article、section来模拟定义一个论坛帖子：<br>
<article>
<!-- 帖子的“头部” -->
<header>
<h1>学习Android，必须先学习Java吗</h1>
<div>作者：crazystu</div>
</header>
<p>
学习Android，必须先学习Java吗？
Android上的应用程序只能用Java编写吗？可以用C++吗？
</p>
<!-- 帖子的“回复”部分，用section元素表示 -->
<section>
<!-- 每个article代表一个回复 -->
<article>
<!-- 回复的头部 -->
<header>
<h2>还是得学习Java</h2>
<div>作者：kongyeeku</div>
</header>
<p>虽然Android不一定要使用Java开发，还可以选择JavaScript、<br/>
或NDK开发，但Java毕竟是Android主要的开发语言，<br/>
因此建议学习Android之前还是先学习Java</p>
</article>
<!-- 每个article代表一个回复 -->
<article>
<!-- 回复的头部 -->
<header>
<h2>Java是基础</h2>
<div>作者：kuan008</div>
</header>
<p>Java是基础，学好Java再去学习Android事半功倍。</p>
</article>
</section>
<!-- 帖子的“脚注” -->
<footer>
以上帖子和回复只代表其个人观点，不代表疯狂Java联盟的观点或立场
</footer>
</article>
</p>
<hr>
<p>
eg：使用aside元素为article、body元素添加“边栏”，
这也是nav元素的两个通用功能。<br>
<b>1、将aside元素放在body内部，表明为整个页面添加“边栏”。</b><br>
<b>2、将aside元素放在其他父元素内部，表明为父元素添加“边栏”</b><br><br>
<article>
<!-- 帖子的“头部” -->
<header>
<h1>学习Android，必须先学习Java吗</h1>
<div>作者：crazystu</div>
</header>
<p>
学习Android，必须先学习Java吗？
Android上的应用程序只能用Java编写吗？可以用C++吗？</p>
<!-- 帖子的“回复”部分，用section元素表示 -->
<section>
<!-- 每个article代表一个回复 -->
<article>
<!-- 回复的头部 -->
<header>
<h2>还是得学习Java</h2>
<div>作者：kongyeeku</div>
</header>
<p>虽然Android不一定要使用Java开发，还可以选择JavaScript、<br/>
或NDK开发，但Java毕竟是Android主要的开发语言，<br/>
因此建议学习Android之前还是先学习Java</p>
</article>
<!-- 每个article代表一个回复 -->
<article>
<!-- 回复的头部 -->
<header>
<h2>Java是基础</h2>
<div>作者：kuan008</div>
</header>
<p>Java是基础，学好Java再去学习Android事半功倍。</p>
</article>
</section>
<!-- 帖子的“脚注” -->
<footer>
以上帖子和回复只代表其个人观点，不代表疯狂Java联盟的观点或立场
</footer>
<!-- 该aside放在article内部，将作为该文章的“边栏”信息 -->
<aside>
<h3>关于楼主</h3>
<section>
<div>用户组: 编程摸索者</div>
<div>注册日期: 2009-7-27</div>
<div>上次访问: 2012-1-3 20:02</div>
<div>最后发表: 2012-1-1 17:38</div>
<div>发帖数级别: 小试牛刀</div>
<div>阅读权限: 30</div>
</section>
</aside>
</article>
<!-- 该aside放在body内部，将作为整个HTML文档的“边栏”信息 -->
<aside>
<h3>页面导航</h3>
<nav>
<ul>
<li><a href="#">查看相关内容</a></li>
<li><a href="http://www.crazyit.org">返回首页</a></li>
<li><a href="http://www.crazyit.org/forum-63-1.html">返回本版</a></li>
</ul>
</nav>
</aside>
</p>
<hr>
</body>
</html>
1027
评论
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
查看更多评论
添加红包
