欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  IT编程

3. HTML中的容器标签

程序员文章站 2022-04-12 12:10:01
什么是容器标签？在HTML开发中我们常常会使用一类标签作为容器放置一些内容，我们把这类标签称之为容器标签，可以作为容器标签的包括列表标签、表格标签、框架标签、布局标签，在这里我们就来总结下这些内容。 列表标签 1 2
    3
  • 无序列表-1
    • 4

    什么是容器标签？在HTML开发中我们常常会使用一类标签作为容器放置一些内容，我们把这类标签称之为容器标签，可以作为容器标签的包括列表标签、表格标签、框架标签、布局标签，在这里我们就来总结下这些内容。

    列表标签

    3. 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个英文字母的时候会遇到什么情况呢？

    表格标签

    3. HTML中的容器标签
    <table  align=”表格对齐方式”>
    <tr>
        <td  align=”单元格水平对齐方式”>单元格内容</td>
                <td  valign=”单元格垂直对齐方式”>单元格内容</td>
                <td  colsspan=”单元格所跨列数”>单元格内容</td>
                <td  rowspan=”单元格所跨行数”>单元格内容</td>
        </tr>
</table>
    View Code

    表格结构在互联网早期被用作实现网页的布局，但是现在表格只是用来呈现一些数据，因为表格结构会产生大量的标签，而且一旦网页结构改变，那么整个网页的结构就需要改变，这点对于开发人员来说会特别的痛苦，所以后来就逐渐的抛弃了这种方式。在这里我们只要熟悉表格结构就好。

    框架标签

    框架是互联网早期的标签，现在开发中基本上已经不再使用了，但是在一些早期的网站中还可以看到这些内容，所以有必要了解这些内容。常见的框架标签包括<frameset>、<iframe>两种，下表是我们整理的一些框架相关的代码。

    <framset>标签

    3. HTML中的容器标签
     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的结构会特别复杂，代码也会特别多。

    3. HTML中的容器标签

    上一篇： Node启动https服务器

    下一篇： 事件模型

    推荐阅读