什么是容器標簽？在HTML開發中我們常常會使用一類標簽作為容器放置一些內容，我們把這類標簽稱之為容器標簽，可以作為容器標簽的包括列表標簽、表格標簽、框架標簽、布局標簽，在這里我們就來總結下這些內容。
列表標簽
1 <!-- 無序列表 -->
2 <ul>
3 <li>無序列表-1</li>
4 <li>無序列表-2</li>
5 <li>無序列表-3</li>
6 <li>無序列表-4</li>
7 <li>無序列表-5</li>
8 </ul>
9 <!-- 實心圓標記 -->
10 <ul type="disc">
11 <li>無序列表-1</li>
12 <li>無序列表-2</li>
13 <li>無序列表-3</li>
14 <li>無序列表-4</li>
15 <li>無序列表-5</li>
16 </ul>
17 <!-- 空心圓 -->
18 <ul type="circle">
19 <li>無序列表-1</li>
20 <li>無序列表-2</li>
21 <li>無序列表-3</li>
22 <li>無序列表-4</li>
23 <li>無序列表-5</li>
24 </ul>
25 <!-- 實心方塊 -->
26 <ul type="square">
27 <li>無序列表-1</li>
28 <li>無序列表-2</li>
29 <li>無序列表-3</li>
30 <li>無序列表-4</li>
31 <li>無序列表-5</li>
32 </ul>
33 <!-- 有序列表 -->
34 <ol>
35 <li>有序列表</li>
36 <li>有序列表</li>
37 <li>有序列表</li>
38 <li>有序列表</li>
39 <li>有序列表</li>
40 </ol>
41 <!-- 數字標記 -->
42 <ol type="1">
43 <li>有序列表</li>
44 <li>有序列表</li>
45 <li>有序列表</li>
46 <li>有序列表</li>
47 <li>有序列表</li>
48 </ol>
49 <!-- 大寫羅馬數字 -->
50 <ol type="I">
51 <li>有序列表</li>
52 <li>有序列表</li>
53 <li>有序列表</li>
54 <li>有序列表</li>
55 <li>有序列表</li>
56 </ol>
57 <!-- 小寫羅馬數字 -->
58 <ol type="i">
59 <li>有序列表</li>
60 <li>有序列表</li>
61 <li>有序列表</li>
62 <li>有序列表</li>
63 <li>有序列表</li>
64 </ol>
65 <!-- 大寫英文字母 -->
66 <ol type="A">
67 <li>有序列表</li>
68 <li>有序列表</li>
69 <li>有序列表</li>
70 <li>有序列表</li>
71 <li>有序列表</li>
72 </ol>
73 <!-- 小寫英文字母 -->
74 <ol type="a">
75 <li>有序列表</li>
76 <li>有序列表</li>
77 <li>有序列表</li>
78 <li>有序列表</li>
79 <li>有序列表</li>
80 </ol>
81 <!-- 自定義列表 -->
82 <dl>
83 <dt>自定義列表</dt>
84 <dd>內容</dd>
85 <dt>自定義列表</dt>
86 <dd>內容</dd>
87 <dt>自定義列表</dt>
88 <dd>內容</dd>
89 </dl>
90 <dl>
91 <dt>自定義列表</dt>
92 <dd>內容</dd>
93 <dt>自定義列表</dt>
94 <dd>內容</dd>
95 <dt>自定義列表</dt>
96 <dd>內容</dd>
97 </dl>在HTML中提供了三種列表形式，即無序列表、有序列表以及自定義列表。其中無序列表的應用場景最多，自定義列表幾乎沒有被使用，有序列表只是在特殊的場合中使用。而且在使用有序列表的時候會遇到一個特別有意思的情況，就是有序列表的標記可以是數字，而數字足夠我們使用，但是英文字母的數量是有限的，那么在列表項超過了26個英文字母的時候會遇到什么情況呢？
表格標簽
<table align=”表格對齊方式”><tr><td align=”單元格水平對齊方式”>單元格內容</td><td valign=”單元格垂直對齊方式”>單元格內容</td><td colsspan=”單元格所跨列數”>單元格內容</td><td rowspan=”單元格所跨行數”>單元格內容</td></tr>
</table>表格結構在互聯網早期被用作實現網頁的布局，但是現在表格只是用來呈現一些數據，因為表格結構會產生大量的標簽，而且一旦網頁結構改變，那么整個網頁的結構就需要改變，這點對于開發人員來說會特別的痛苦，所以后來就逐漸的拋棄了這種方式。在這里我們只要熟悉表格結構就好。
框架標簽
框架是互聯網早期的標簽，現在開發中基本上已經不再使用了，但是在一些早期的網站中還可以看到這些內容，所以有必要了解這些內容。常見的框架標簽包括<frameset>、<iframe>兩種，下表是我們整理的一些框架相關的代碼。
<framset>標簽
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>2-3 容器標簽 框架</title>
6 </head>
7 <!-- 沒有<body>標簽 -->
8 <frameset rows="10%,80%,*">
9 <frame src="./background.html" name="top"></frame>
10 <frameset cols="25%,*">
11 <!-- 關聯窗口的實現 -->
12 <frame src="./left_main.html"></frame>
13 <frame src="./background.html" name="main"></frame>
14 </frameset>
15 <frame src="./background.html" name="bottom"></frame>
16 </frameset>
17 </html>這個標簽可以十分方便的讓我們實現菜單目錄的功能，對于頁面的重復利用非常方便，所以很受歡迎。
<iframe>標簽
<iframe src="http://www.sina.com.cn/" width="100%" height="1000px"></iframe>這種標簽可以十分方便的在我們的網站中嵌入一些其他網站的頁面。
布局標簽
所謂布局標簽，很簡單就是用來實現網頁布局的<div>、<span>這些標簽，是現在設計網頁中重要的HTML標簽。不過值得說明的是這些標簽沒有實際的語義，只是作為容器來放置一些內容，所以建議在實際開發中不要濫用，否則的話HTML的結構會特別復雜，代碼也會特別多。
本文轉載于:猿2048?https://www.mk2048.com/blog/blog.php?id=j1b00jb&title=3. HTML中的容器標簽
 方法)
