第三章 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>
好了,这章就到这了。这只是告诉你有什么标签,可以做什么用。但是这些标签用到恰到好处还需要很长一段路的磨练。