lable、ul、ol、dl和table、fieldset标签
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>
|
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>
|
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>
|
制作带边框的表格
|
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>
|
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>
|
合并单元格：
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>
|
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>
|
上下合并单元格时，第一行会多出一个字段，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>
|
本文转自 曾哥最爱 51CTO博客，原文链接：http://blog.51cto.com/zengestudy/1892259，如需转载请自行联系原作者