什么是容器标签？在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的结构会特别复杂，代码也会特别多。
3. HTML中的容器标签
原文地址：https://www.cnblogs.com/yunxiansheng/p/9190454.html