| 标签 |
作用 |
| <html>...</html> |
封闭整个HTML文档 |
| <head>...</head> |
封闭HTML文档的头部。在<html>标签对内使用 |
| <title>...</title> |
指示文档的页面标题。在<head>标签对内使用 |
| <body>...</body> |
封闭HTML文档的主体。在<html>标签对内使用 |
| <p>...</p> |
封闭段落，在段落之间跳过一行 |
| <br /> |
指示换行符 |
| <hr /> |
显示水平标线 |
| <h1>...</h1> |
封闭1级标题 |
| <h2>...</h2> |
封闭2级标题 |
| <h3>...</h3> |
封闭3级标题 |
| <h4>...</h4> |
封闭4级标题 |
| <h5>...</h5> |
封闭5级标题 |
| <h6>...</h6> |
封闭6级标题 |
| <header>...</header> |
包含介绍性信息 |
| <footer>...</footer> |
包含关于其包含元素的补充材料（通常是版权通知或作者信息） |
| <nav>...</nav> |
包含导航元素 |
| <section>...</section> |
包含主题上类似的内容，比如一本书中的某一章或一个页面的某个区域 |
| <article>...</article> |
包含一段独立的内容，比如新闻文章 |
| <aside>...</aside> |
包含关于其包含元素的辅助信息 |
| <address>...<address> |
包含与其最近的<article>或<body>元素相关的地址信息，通常包含在<footer>元素内 |
1 <!DOCTYPE html>
2
3 <html lang="en">
4 <head>
5 <title>Semantic Example</title>
6 </head>
7 <body>
8 <header>
9 <h1>SITE OR PAGE LOGO GOES HERE</h1>
10 </header>
11 <nav>
12 SITE OR PAGE NAV GOES HERE
13 </nav>
14 <article>
15 <header>
16 <h2>Article Heading</h2>
17 </header>
18 <section>
19 <header>
20 <h3>Section 1 heading</h3>
21 </header>
22 <p>Section 1 content here.</p>
23 </section>
24 <section>
25 <header>
26 <h3>Section 2 heading</h3>
27 </header>
28 <p>Section 2 content here.</p>
29 </section>
30 <footer>
31 <p>Article footer goes here.</p>
32 </footer>
33 </article>
34 <footer>
35 SITE OR PAGE FOOTER HERE
36 </footer>
37 </body>
38 </html>
