HTML5学习笔记二
主体结构元素:section、article、nav、aside
【注】内容区块:是指将页面按逻辑进行分割的单位。例如对于书籍来说,章、节都可以成为内容区块;对于博客来说,导航菜单,文章正文,文章评论等每一个部分都可以称为内容区块。
article:可独自被外部引用的内容,可以是一篇博文,或报刊中的文章、一片论坛帖子。
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<article> <h1>苹果</h1> <p>发表日期: <time pubdate datetime="2010/10/09">2010/10/09</time> </p> <p><b>苹果</b> ,植物类水果,多次花果...(“苹果”文章正文)</p> <section> <h2>评论</h2> <article> <header> <h3>发表者:陆凌牛</h3> <p><time pubdate datetime="2010-10-10T19:10-08:00">1小时前</time></p> </header> <p>我喜欢苹果,我最喜爱的品种是红富士。</p> </article> </section> </article>
section:此元素通常有内容及其标题组成,但section元素并非一个普通的容器元素,当一个容器需要被定义样式或javascript定义行为时,推荐使用div而非section,
或者这样理解:section元素中的内容可以单独存储到数据库中或输出到word文档中
*通常不推荐为那些没有标题的内容使用section
也许很多人会将section和article两者混淆,下面贴段代码帮助理解。
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<article> <h1>苹果</h1> <p><b>苹果</b> ,植物类水果,多次花果...</p> <section> <h2>红富士</h2> <p>红富士是从普通富士的芽(枝)变中选育出的着色系富的统称...</p> </section> <section> <h2>国光</h2> <p>国光苹果品,又名小国光、万寿。原产美国,1600年发现的偶然实生苗...</p> </section> </article>
在上述代码中,内容首先是一段独立的、完整的内容,因此使用article元素。该内容是一篇关于苹果的文章,该文章分为3段,每一段都有一个独立的标题,因此使用了两个section。
在HTML5里,section元素强调的是分段或分块,而article强调独立性
section元素的使用禁忌:
1)不要将section元素用作设置样式的页面容器,那是div元素的工作。
2)如果article元素、aside元素或nav元素更符合使用条件,就不要使用section元素。
3)不要为没有标题的内容区块使用section元素。
nav:用作页面导航的链接组。
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<nav> <ul> <li><a href="/">主页</a></li> <li><a href="/events">开发文档</a></li> ...more... </ul> </nav> <article> <header> <h1>HTML5与CSS3的历史</h1> <nav> <ul> <li><a href="#HTML5">HTML5的历史</a></li> <li><a href="#CSS3">CSS3的历史</a></li> ...more... </ul> </nav> </header> <section id="HTML5"> <h1>HTML5的历史</h1> <p>讲述HTML5的历史的正文</p> </section> <section id="CSS3"> <h1>CSS3的历史</h1> <p>讲述CSS3的历史的正文</p> </section> ...more... <footer> <p> <a href="?edit">编辑</a> | <a href="?delete">删除</a> | <a href="?rename">重命名</a> </p> </footer> </article> <footer> <p><small>版权所有:陆凌牛</small></p> </footer>
使用场合:传统导航条、侧边栏导航、页内导航、翻页操作。
aside:用来标示当前页面或文章的附属信息部分。
1):被包含在article元素中作为主要内容的附属信息部分,其中的内容可以是与当前article内容有关的参考资料、名词解释、文献等等。
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<article> <h1>第四节 词法闭包</h1> <p>lambda表达式可以创建词法闭包...(文章正文)</p> <aside> <!-- 因为这个aside元素被放置在一个article元素内部, 所以分析器将这个aside元素的内容理解成是和article元素的内容相关联的。 --> <h1>名词解释</h1> <dl> <dt>F#</dt> <dd>F#为.Net2010中引入的新型函数型编程语言</dd> </dl> <dl> <dt>词法闭包</dt> <dd>词法闭包是指,将创建lambda表达式时的环境保存起来...(详细解释)</dd> </dl> </aside> </article>
2):在article元素之外使用,作为页面或站点全局的附属信息部分。最典型的形式是侧边栏,其中的内容可以是友情链接,博客中的其他文章列表,广告单元等等。
非主体结构元素:header、hgroup、footer
header:通常用来放置整个页面或页面内的一个内容区块的标题,当然也可以包含其他内容,例如数据表格,搜索表单,相关logo等。
<header> <h1>网页标题</h1> </header> <article> <header> <h1>文章标题</h1> </header> <p>文章正文</p> </article>
强调:一个网页内并未限制header元素的个数!在HTML5规范中,一个header元素通常包括至少一个heading元素(h1-h6),也可以包括hgroup元素。
hgroup:将标题及其子标题进行分组的元素。hgroup通常会将h1~h6元素进行分组,如果文章只有一个主标题,就不需要hgroup元素。
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<article> <header> <h1>文章标题</h1> <p><time datetime="2010-03-20">2010年10月29日</time></p> </header> <p>文章正文</p> </article>
如果有多个标题,则如下所示:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<article> <header> <hgroup> <h1>文章主标题</h1> <h2>文章子标题</h2> </hgroup> <p><time datetime="2010-03-20">2010年10月29日</time></p> </header> <p>文章正文</p> </article>
footer:作为其上层父级内容区块或一个根区块的脚注。通常包含其相关区块的脚注信息,如作者、相关阅读链接及版权信息等。与header一样,页面并未限制footer的个数。