[html5]学习笔记一新增的主题结构元素

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

html5 新增的主体结构元素有：article，section，nav，aside，time，pubdate元素。

1、 article元素代表文档、页面或应用程序中独立的、完整的、可以独自被外部引用的内容。它可以是一篇博客或者报刊中的文章，一篇论坛帖子、一段用户评论或独立的插件，或其他任何独立的内容。

例子：

<!DOCTYPE html> <html> <head> <title></title> </head> <body> <article> <header><p></p></header> <p></p> <footer><p></p></footer> </article> </body> </html>

article元素是可以嵌套使用的。

例子：

article元素可以表示插件。

例子：

<!DOCTYPE html> <html> <head> <title></title> </head> <body> <article> <header><p></p></header> <article> <header></header> <p></p> <footer></footer> </article> <footer><p></p></footer> </article> <article> <object>  <embed src="#" width="600" height="400"></embed> </object> </article> </body> </html>

2、section元素用于对网站或应用程序中页面上的内容进行分块。一个section元素通常由内容及标题组成。但section元素并非一个普通的容器元素；当一个容器需要被直接定义样式或通过脚本定义行为时，推荐使用div元素而非section元素。

例子：

<body> <section> <h1>标题</h1> <p>关于该标题的具体描述</p> </section></body>

注意不要与有着自己完整内容的article元素进行混淆。

例子：

<body> <article> <h1>这是一篇独立文章的标题</h1> <p>这是对于标题的描述或内容</p> <section> <h2>这是小标题1</h2> <p>这是对于小标题1的描述或内容</p> </section> <section> <h2>这是小标题2</h2> <p>这是对于小标题2的描述或内容</p> </section> </article></body>

article元素可以与section元素互换使用，因为article是一种特殊的section元素，它更强调独立性。

例子：

<body> <section> <h1>这是一篇独立文章的标题</h1> <p>这是对于标题的描述或内容</p> <article> <h2>这是小标题1</h2> <p>这是对于小标题1的描述或内容</p> </article> <article> <h2>这是小标题2</h2> <p>这是对于小标题2的描述或内容</p> </article> </section></body>

另外如果没有标题内容，不要使用section元素。

3、nav元素是一个可以用作页面导航的连接组，其中的导航元素链接到其他页面或当前页面的其他部分。并不是所有的连接组都要被放进nav元素，只需要将主要的，基本的连接组放进nav元素即可。

nav元素应用场景：

传统导航条、侧边栏导航、页内导航、翻页操作

例子：

4、aside元素用来表示当前页面或文章的附属信息部分，它可以包含与当前页面或主要内容相关的引用、侧边栏、广告、导航条，以及其他类似的有区别于主要内容的部分。

可以被包含在article中，作为主要内容的附属信息。

<article> <h1>语法（标题）</h1> <p>文章的正文部分</p> <aside> <h1>名词解释</h1> <p>语法：指的是构建语言的一套规则</p> </aside></article>

可以在article外，在作为页面或站点信息内容的全局部分，例如侧边栏。

5、time元素

例子：

6、pubdate属性，布尔值，用在time上，表示文章或整个网页的发布日期。