HTML5的结构

时间 2019-11-29

标签 html5 html 结构栏目 HTML5 繁體版

原文原文链接

主体结构元素

article：表明文档、页面或应用程序中独立的、完整的、能够被外部引用的内容。如博客或报刊中的文章，论坛中的帖子等html

除了内容部分外，一般有本身的标题（通常放在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举例

效果：ide

此外，article元素是能够嵌套使用的，内层的内容在原则上须要与外层的内容相关联。如微博中文章与评论的关系。网站

section：对网站或应用程序中的内容进行分块。一般由内容及其标题组成。但section并不是一个普通的容器元素，当一个容器须要直接定义样式或经过脚本定义行为时，推荐使用div而非section元素。能够这么理解：section元素中的内容能够单独存储到数据库或输出到word文档。spa

　　section的做用是对页面内容进行分块，不要和表明整片文章的article元素搞混了3d

　　section和article能够相互嵌套code

nav：用做页面导航的连接组。导航元素通常连接到其余页面或当前页面的其余部分htm

1     <nav>
2         <ul>
3             <li><a href="">主页</a> </li>
4             <li><a href="">开发文档</a> </li>
5         </ul>
6     </nav>

nav举例

效果：blog

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

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

新增的非结构元素

header：一种具备引导和导航做用的结构元素

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

footer：上层父级内容的脚注

address：联系信息