005 经常使用浏览器2

时间 2019-12-07

标签经常使用浏览器栏目浏览器繁體版

原文原文链接

　　关于标签，将于004章节继续拓展。html

一：表格布局

1.说明学习

　　常见处理，显示表格式数据。spa

　　手写表格与合并单元格。3d

　　属性：code

　　border：设置表格边框，像素值orm

　　cellspacing：设置单元格，像素值，默认是2htm

　　cellpadding：单元格内容与单元格边框之间的空白间距，默认一个像素blog

　　width：设置表格的宽度，像素值ci

　　height：设置表格的高度，像素值

　　align：设置表格在网页中的水平对齐方式，left，right，center

2.案例

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6 </head>
 7 <body>
 8     <table width="500" border="1">
 9         <tr>
10             <td>姓名</td>
11             <td>性别</td>
12             <td>电话</td>
13         </tr>
14         <tr>
15             <td>tom</td>
16             <td>male</td>
17             <td>111111111111</td>
18         </tr>
19     </table>
20 </body>
21 </html>

3.效果

4.修改

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6 </head>
 7 <body>
 8     <table width="500" border="1" align="center" cellspacing="0" cellpadding="10">
 9         <tr>
10             <td>姓名</td>
11             <td>性别</td>
12             <td>电话</td>
13         </tr>
14         <tr>
15             <td>tom</td>
16             <td>male</td>
17             <td>111111111111</td>
18         </tr>
19     </table>
20 </body>
21 </html>

5.效果

二：表头标签，表格标题

1.表头标签说明

　　<th>

　　文本加粗且居中。

2.表格标签

　　须要写在表格中。

3.案例

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6 </head>
 7 <body>
 8     <table width="500" border="1" align="center" cellspacing="0" cellpadding="10">
 9         <caption>员工信息表格</caption>
10         <tr>
11             <th>姓名</th>
12             <th>性别</th>
13             <th>电话</th>
14         </tr>
15         <tr>
16             <td>tom</td>
17             <td>male</td>
18             <td>111111111111</td>
19         </tr>
20     </table>
21 </body>
22 </html>

4.效果

三：合并单元格

1.说明

　　rowspan：跨行合并

　　colspan：跨列合并

2.案例

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<table width="500" border="1" align="center" cellspacing="0" cellpadding="10">
		<caption>员工信息表格</caption>
		<tr>
			<th>姓名</th>
			<th>性别</th>
			<th>电话</th>
		</tr>
		<tr>
			<td>tom</td>
			<td>male</td>
			<td>111111111111</td>
		</tr>
		<tr>
			<td>总计</td>
			<!--合并列，选择跨2列，而后将第三列去掉-->
			<td colspan="2" align="center">￥1000</td>
		</tr>		
	</table>
</body>
</html>

3.效果

四：表单

1.描述

　　收集用户的信息

　　通常有表单控件，提示文本，表单域

2.input控件

　　单标签

3.案例

　　这个案例，暂时使用的是使用表格的布局，能够先学习学习。

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6 </head>
 7 <body>
 8     <table width="400" border="0" align="center" cellspacing="0" cellpadding="0">
 9         <caption><h1>青春不常在</h1></caption>
10         <!--调整高度-->
11         <tr height="30">
12             <td>所在地区</td>
13             <td><input type="text" name="area" value="beijing"></td>
14         </tr>
15         <tr height="30">
16             <td>用户名</td>
17             <td><input type="user" name="area" value="beijing"></td>
18         </tr>
19         <tr height="30">
20             <td>密码</td>
21             <td><input type="password" name="password" maxlength="6"></td>
22         </tr>
23         <tr height="30">
24             <td>性别</td>
25             <td>
26                 <!--必须是相同的name-->
27                 male：<input type="radio" name="sex" value="male" checked="checked">
28                 female：<input type="radio" name="sex" value="female">
29             </td>
30         </tr>
31         <tr height="30">
32             <td>喜欢的类型</td>
33             <td>
34                 苹果：<input type="checkbox" name="like" value="pinguo">
35                 香蕉：<input type="checkbox" name="like" value="xiangjiao">
36                 橘子：<input type="checkbox" name="like" value="juzi">
37             </td>
38         </tr>
39         <tr height="30">
40             <td>上传头像</td>
41             <td>
42                 <input type="file">
43             </td>
44         </tr>
45         <tr height="30">
46             <td></td>
47             <td>
48                 <input type="button" value="注册">
49                 <input type="submit" value="提交">
50                 <input type="reset" value="重置">
51                 <!--图像形式的提交-->
52                 <input type="image" src="00_1.png" width="45" align="center">
53             </td>
54         </tr>
55     </table>
56 </body>
57 </html>

4.效果

五：下拉菜单

1.说明

　　默认选择的时候是selected=“selected”。

2.案例

<tr height="30">
			<td>年龄</td>
			<td><select name="age" id="">
				<option value="">选择年份</option>
				<option value="1990" selected="selected">1990</option>
				<option value="1991">1991</option>
				<option value="1992">1992</option>
			</select></td>
		</tr>

六：表单域

1.说明

　　form

2.案例

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6 </head>
 7 <body>
 8     <form action="">
 9         用户名：<input type="text"><br>
10         密 &nbsp;码：<input type="password"><br>
11         <input type="submit" value="提交">
12     </form>
13 </body>
14 </html>