3. HTML中的容器标签
什么是容器標簽？在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> View Code在HTML中提供了三種列表形式，即無序列表、有序列表以及自定義列表。其中無序列表的應用場景最多，自定義列表幾乎沒有被使用，有序列表只是在特殊的場合中使用。而且在使用有序列表的時候會遇到一個特別有意思的情況，就是有序列表的標記可以是數字，而數字足夠我們使用，但是英文字母的數量是有限的，那么在列表項超過了26個英文字母的時候會遇到什么情況呢？
表格標簽
<table align=”表格對齊方式”><tr><td align=”單元格水平對齊方式”>單元格內容</td><td valign=”單元格垂直對齊方式”>單元格內容</td><td colsspan=”單元格所跨列數”>單元格內容</td><td rowspan=”單元格所跨行數”>單元格內容</td></tr> </table> View Code表格結構在互聯網早期被用作實現網頁的布局，但是現在表格只是用來呈現一些數據，因為表格結構會產生大量的標簽，而且一旦網頁結構改變，那么整個網頁的結構就需要改變，這點對于開發人員來說會特別的痛苦，所以后來就逐漸的拋棄了這種方式。在這里我們只要熟悉表格結構就好。
框架標簽
框架是互聯網早期的標簽，現在開發中基本上已經不再使用了，但是在一些早期的網站中還可以看到這些內容，所以有必要了解這些內容。常見的框架標簽包括<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> View Code這個標簽可以十分方便的讓我們實現菜單目錄的功能，對于頁面的重復利用非常方便，所以很受歡迎。
<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中的容器標簽
總結
以上是生活随笔為你收集整理的3. HTML中的容器标签的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： HTML5 拖放、交换位置
- 下一篇： 课时57.HTML被废弃的标签（掌握）