HTML5的结构-优快云博客

主体结构元素

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举例

效果：

此外，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举例

效果：

nav的应用场合：① 传统导航条 ② 侧边栏导航 ③ 业内导航 ④ 翻页操作

aside：表示当前页面或文章的附属信息

新增的非结构元素

header：一种具有引导和导航作用的结构元素

hgroup：将标题及其子标题进行分组

footer：上层父级内容的脚注

address：联系信息

转载于:https://www.cnblogs.com/sherrykid/p/5700645.html