lable、ul、ol、dl和table、fieldset标签

时间  2021-01-07

lable标签

有时候，我们希望点击文件的时候，鼠标的光标自动跳到输出框中。这需要使用lable功能

1
2
3
4
5
< div >
     < label  for = "name2" >姓名：< input  id = "name2"  type = "test" ></ label >
     < label  for = "111" >密码：< input  id = "111"  type = "test" ></ label >
     < label  for = "222" >婚否 < input  id = '222'  type = "checkbox" ></ label >
</ div >

wKiom1h8W6bCm4pJAAA8m_ssNrM802.png-wh_50

ul、ol、dl标签

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
< div >
     < ul >
         < li >淘宝</ li >
         < li >百度</ li >
         < li >腾讯</ li >
     </ ul >
     < ol >
         < li >淘宝</ li >
         < li >百度</ li >
         < li >腾讯</ li >
     </ ol >
     < dl >
         < dt >湖北省</ dt >
         < dd >咸宁市</ dd >
         < dd >武汉书</ dd >
         < dd >赤壁市</ dd >
     </ dl >
</ div >

wKioL1h8XL-SR0uqAAAwVuPfB9w164.png



table标签

table标签用来制作表格的。

<tr></tr> 表示行，同一行的内容写在一个<tr></tr>中，<td></td>表示列，一个<td></td>就是一列

1
2
3
4
5
6
7
8
9
10
11
12
< table >
     < tr >
         < td >IP</ td >
         < td >IDC</ td >
         < td >Status</ td >
     </ tr >
     < tr >
         < td >172.16.2.5</ td >
         < td >cn-bj2</ td >
         < td >running</ td >
     </ tr >
</ table >

wKioL1h8XdvByqAiAAAjobIdXrY397.png


制作带边框的表格

1
2
3
4
5
6
7
8
9
10
11
12
< table  border = '1' >
     < tr >
         < td >IP</ td >
         < td >IDC</ td >
         < td >Status</ td >
     </ tr >
     < tr >
         < td >172.16.2.5</ td >
         < td >cn-bj2</ td >
         < td >running</ td >
     </ tr >
</ table >

wKiom1h8XlHSyjQ5AAAnsxVbzWo523.png

title格式：有时候我们希望第一行的内容为标题，文字居中，字体加粗，可以使用<th></th>标签

1
2
3
4
5
6
7
8
9
10
11
12
< table >
     < tr >
         < th >IP</ th >
         < th >IDC</ th >
         < th >Status</ th >
     </ tr >
     < tr >
         < td >172.16.2.5</ td >
         < td >cn-bj2</ td >
         < td >running</ td >
     </ tr >
</ table >

wKiom1h8X_6TeEcVAAArEWX-RPg920.png



合并单元格：

1、左右合并单元格：

左右合并单元格时，第一行就少一列字段，colspan='2'，代表把两列合成一列


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
< table  border = "1" >
     < tr >
         < th  colspan = "2" >IP</ th >
         < th >Status</ th >
     </ tr >
     < tr >
         < td >172.16.2.5</ td >
         < td >cn-bj2</ td >
         < td >running</ td >
     </ tr >
     < tr >
         < td >172.16.2.12</ td >
         < td >cn-bj2</ td >
         < td >running</ td >
     </ tr >
</ table >


wKiom1h8YpeCz3NjAAA3BpeG99c848.png



2、上下合并单元格

1
2
3
4
5
6
7
8
9
10
11
< table  border = "1" >
     < tr >
         < td  rowspan = "2" >IP</ td >
         < td >IDC</ td >
         < td >Status</ td >
     </ tr >
     < tr >
         < td >IDC</ td >
         < td >Status</ td >
     </ tr >
</ table >

wKiom1h8ZASAvQcCAAAddsxwzS0492.png

上下合并单元格时，第一行会多出一个字段，rowspan='2'，表示把上下两行的单元格合并成一个单元格



fieldset标签

fieldset是用来将元素进行分组。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
< fieldset >
         < legend >新用户注册</ legend >
         < p >
             用户名：< input  type = "text"  />
             密码：< input  type = "text"  />
         </ p >
         < p >
             邮箱：< input  type = "text"  />
         </ p >
         < p >
             手机号：< input  type = "text"  />
         </ p >
         < p >
             < input  type = "submit" />
         </ p >
     </ fieldset >

wKioL1h8aSPRlarhAABeOX1mo1o383.png










本文转自 曾哥最爱 51CTO博客，原文链接：http://blog.51cto.com/zengestudy/1892259，如需转载请自行联系原作者
联系我们 沪ICP备13005482号-10