- 主体结构元素
article:代表文档、页面或应用程序中独立的、完整的、可以被外部引用的内容。如博客或报刊中的文章,论坛中的帖子等
除了内容部分外,通常有自己的标题(一般放在header元素里面)。下面举例说明
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 <article> 9 <header> 10 <h1>苹果</h1> 11 <p> 12 发表日期:<time pubdate="pubdate">2010/10/09</time> 13 </p> 14 </header> 15 <p><b>苹果</b>植物类水果,多次水果...("苹果"文章正文)</p> 16 <footer> 17 <p><small>著作权归属***公司所有</small></p> 18 </footer> 19 </article> 20 </body> 21 </html>
效果:
此外,article元素是可以嵌套使用的,内层的内容在原则上需要与外层的内容相关联。如微博中文章与评论的关系。
section:对网站或应用程序中的内容进行分块。通常由内容及其标题组成。但section并非一个普通的容器元素,当一个容器需要直接定义样式或通过脚本定义行为时,推荐使用div而非section元素。可以这么理解:section元素中的内容可以单独存储到数据库或输出到word文档。
section的作用是对页面内容进行分块,不要和代表整片文章的article元素搞混了
section和article可以相互嵌套
nav:用作页面导航的链接组。导航元素一般链接到其他页面或当前页面的其他部分
1 <nav> 2 <ul> 3 <li><a href="">主页</a> </li> 4 <li><a href="">开发文档</a> </li> 5 </ul> 6 </nav>
效果:
nav的应用场合:① 传统导航条 ② 侧边栏导航 ③ 业内导航 ④ 翻页操作
aside:表示当前页面或文章的附属信息
新增的非结构元素
header:一种具有引导和导航作用的结构元素
hgroup:将标题及其子标题进行分组
footer:上层父级内容的脚注
address:联系信息