1 <!DOCTYPE html>
2 <html lang="en">
3
4 <head>
5 <meta charset="UTF-8">
6 <meta name="viewport" content="width=device-width, initial-scale=1.0">
7 <meta http-equiv="X-UA-Compatible" content="ie=edge">
8 <title>划分内容的元素</title>
9 </head>
10
11 <body>
12 <!-- section: 表示一个重要的概念或主题 -->
13 <section>
14 <h1>标题1</h1>
15 <p>明天不上班啊</p>
16 </section>
17 <section>
18 <h1>标题2</h1>
19 <p>明天去上班旅游</p>
20 <a href="#">点击查看原文</a>
21 </section>
22 <hr>
23
24 <!-- header: 表示首部 -->
25 <header>
26 <h2>二级标题</h2>
27 </header>
28 <hr>
29
30 <!-- footer: 表示尾部 -->
31 <footer>
32 <ul>
33 <li>链接1</li>
34 <li>链接2</li>
35 <li>链接3</li>
36 </ul>
37 <p>其他信息</p>
38 </footer>
39 <hr>
40
41 <!-- h1-h6: 表示标题 -->
42 <h1>标题1</h1>
43 <h2>标题2</h2>
44 <h3>标题3</h3>
45 <h4>标题4</h4>
46 <h5>标题5</h5>
47 <h6>标题6</h6>
48
49 <hr>
50
51 <!-- hgroup: 将一组标题组织在一起 -->
52 <hgroup>
53 <h1>标题1</h1>
54 <h2>标题2</h2>
55 </hgroup>
56 <hr>
57
58 <!-- nav: 表示有意集中在一起的导航元素 -->
59 <nav>
60 <li>菜单</li>
61 <li>菜单</li>
62 <li>菜单</li>
63 <li>菜单</li>
64 <li>菜单</li>
65 </nav>
66 <hr>
67
68 <!-- article: 表示一段独立的内容 -->
69 <article>
70 <header>
71 <h2>文字标题</h2>
72 </header>
73 <section>
74 <p>第1段话</p>
75 <p>第2段话</p>
76 <p>第3段话</p>
77 <p>第4段话</p>
78 </section>
79 </article>
80 <hr>
81
82 <!-- aside: 表示与周边内容稍有牵连的内容 -->
83 <aside>
84 <li>侧边菜单</li>
85 <li>侧边菜单</li>
86 <li>侧边菜单</li>
87 </aside>
88 <hr>
89
90 <!-- address: 表示文档或article的联系信息 -->
91 <address>
92 我的地址为：<a href="#">网站名称</a>
93 <em>
94 重庆磁器口
95 </em>
96 </address>
97 <hr>
98
99 <!-- details: 生成一个区域，可隐藏/显示详细信息的内容 -->
100 <!-- summary: 概述 -->
101 <details>
102 <summary>这里有武林秘籍</summary>
103 <ul>
104 <li>如来神掌</li>
105 <li>九阳神功</li>
106 </ul>
107 </details>
108 </body>
109
110 </html>
知识兔