3. HTML中的容器标签
2018-06-24 02:28:17来源：未知 阅读 ()
什么是容器标签？在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的结构会特别复杂，代码也会特别多。
标签：
版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有
上一篇：课时101.背景图练习（理解）
下一篇：HTML中id和class选择器
- DIV居中的经典方法 2020-06-13
- CSS中的float和margin的混合使用 2020-06-11
- Html/css 列表项 区分列表首尾 2020-06-11
- HTML骨架 2020-06-10
- HTML基础教程_1 2020-06-09
IDC资讯： 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营： 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程： Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术： Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧： 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作： FrontPages Dreamweaver Javascript css photoshop fireworks Flash
