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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。