资讯专栏INFORMATION COLUMN

3. HTML中的容器标签

番茄西红柿 / 1143人阅读

摘要:布局标签所谓布局标签,很简单就是用来实现网页布局的这些标签,是现在设计网页中重要的标签。

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

列表标签

 1 
 2 <ul>
 3     <li>无序列表-1li>
 4     <li>无序列表-2li>
 5     <li>无序列表-3li>
 6     <li>无序列表-4li>
 7     <li>无序列表-5li>
 8 ul>
 9 
10 <ul type="disc">
11     <li>无序列表-1li>
12     <li>无序列表-2li>
13     <li>无序列表-3li>
14     <li>无序列表-4li>
15     <li>无序列表-5li>
16 ul>
17 
18 <ul type="circle">
19     <li>无序列表-1li>
20     <li>无序列表-2li>
21     <li>无序列表-3li>
22     <li>无序列表-4li>
23     <li>无序列表-5li>
24 ul>
25 
26 <ul type="square">
27     <li>无序列表-1li>
28     <li>无序列表-2li>
29     <li>无序列表-3li>
30     <li>无序列表-4li>
31     <li>无序列表-5li>
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

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

框架标签

框架是互联网早期的标签,现在开发中基本上已经不再使用了,但是在一些早期的网站中还可以看到这些内容,所以有必要了解这些内容。常见的框架标签包括、