前文鏈接：從零基礎到web前端工程師（一）
學習表格、表單
表格（table）
表格使HTML的一項非常重要的功能，利用其多種屬性能夠設計處多樣化的表格。
創建表格
在HTML網頁中，要想創建表格，就需要使用表格相關的標籤。創建表格的基本語法格式如下：
<table>
<tr>
<td>單元格內的文字</td>
...
</tr>
...
</table>
在上面的語法中包含三對HTML標籤，分別爲 <table></table>、<tr></tr>、<td></td>，他們是創建表格的基本標籤，缺一不可，下面對他們進行具體地解釋:
-
table用於定義一個表格。
-
<tr> </tr> 用於定義表格中的一行，必須嵌套在 table標籤中，在 table中包含幾對 tr，就有幾行表格。
-
<td> </td>：用於定義表格中的單元格，必須嵌套在<tr> </tr>標籤中，一對 <tr> </tr>中包含幾對<td> </td>，就表示該行中有多少列（或多少個單元格）。
注意：
1. <tr> </tr>中只能嵌套<td> </td>。
2. <td> </td>標籤，他就像一個容器，可以容納所有的元素。
表格屬性：
例如：
舉一個小小的案例，創建了一個表格，
這裏只寫了表格中的代碼
<table border="1" align="center" cellspacing="0" cellpadding="0">
<tr>
<td>姓名</td>
<td>年齡</td>
<td>性別</td>
</tr>
<tr>
<td>小明</td>
<td>18</td>
<td>男</td>
</tr>
<tr>
<td>小紅</td>
<td>18</td>
<td>女</td>
</tr>
</table>
效果：
表頭標籤
表頭一般位於表格的第一行或第一列，其文本加粗居中，如下圖所示，即爲設置了表頭的表格。設置表頭非常簡單，只需用表頭標籤<th></th>替代相應的單元格標籤<td></td>即可。
表格結構
在使用表格進行佈局時，可以將表格劃分爲頭部、主體和頁腳，具體如下所示：
<thead> </thead>：用於定義表格的頭部。
必須位於<table> </table> 標籤中，一般包含網頁的logo和導航等頭部信息。
<tbody></tbody>：用於定義表格的主體。
位於<table> </table>標籤中，一般包含網頁中除頭部和底部之外的其他內容。
表格標題
表格的標題： caption
實例代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>爲表格設置表頭</title>
</head>
<body>
<h3>下面公佈某班的期中考試成績</h3>
<table align="left" border="1" cellpadding="0" cellspacing="0">
<caption> 期中考試成績表</caption>
<tr>
<th>姓名</th>
<th>語文</th>
<th>數學</th>
<th>英語</th>
</tr>
<tr>
<td>小明</td>
<td>94</td>
<td>98</td>
<td>77</td>
</tr>
<tr>
<td>小紅</td>
<td>98</td>
<td>78</td>
<td>100</td>
</tr>
<tr>
<td>小張</td>
<td>89</td>
<td>99</td>
<td>89</td>
</tr>
</table>
</body>
</html>
結果：
caption 標籤必須緊隨 table 標籤之後。您只能對每個表格定義一個標題。通常這個標題會被居中於表格之上。
合併單元格
跨行合併：rowspan 跨列合併：colspan
這裏就不多介紹了，直接看代碼實例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>設置單元格行跨度</title>
</head>
<body>
<table border="1" bordercolor="00CCFF" cellspacing="0" cellpadding="5">
<caption>某網站上書店的銷售分類</caption>
<tr bgcolor="aqua">
<td width="140">類別</td>
<td width="300">子類別</td>
</tr>
<tr>
<td rowspan="3">電腦書籍</td>
<td >編程類</td>
</tr>
<tr>
<td >C語言</td>
</tr>
<tr>
<td>數據庫類</td>
</tr>
<tr>
<td rowspan="2"> 考試類</td>
<td>考研類</td>
</tr>
<tr>
<td> 計算機等級考試</td>
</tr>
</table>
<table align="left" width="400" bgcolor="#f0f8ff" border="1">
<caption>必讀書籍</caption>
<tr>
<td colspan="3">計算機書籍</td>
<td>文學類</td>
</tr>
<tr>
<td>算法導論</td>
<td>Java核心技術</td>
<td>python爬蟲</td>
<td>東野圭吾小說</td>
</tr>
</table>
</body>
</html>
實現效果：
注意： 將多個內容合併的時候，就會有多餘的東西，把它刪除。 例如 把 3個 td 合併成一個， 那就多餘了2個，需要刪除。
總結表格
-
表格提供了HTML 中定義表格式數據的方法。
-
表格中由行中的單元格組成。
-
表格中沒有列元素，列的個數取決於行的單元格個數。
-
表格不要糾結於外觀，那是CSS 的作用。
表單標籤
在HTML中，<form> </from>標誌對用來創建一個表單，即定義表單的開始和結束位置，在標誌對之間的一切都屬於表單的內容。
每個表單元素開始於form元素，可以包括所有的表單控件，還有任何必需的伴隨數據，如控件的標籤、處理數據的腳本或程序的位置等，在表單的<form> 標記中，還可以設置表單的基本屬性，包含表單的名稱、處理程序、傳送方法等。一般情況下，表單的處理程序action和傳送方法method是必不可少的參數。
一個完整的表單通常由表單控件（也稱爲表單元素）、提示信息和表單域3個部分構成。
表單控件：
包含了具體的表單功能項，如單行文本輸入框、密碼輸入框、複選框、提交按鈕、重置按鈕等。
提示信息：
一個表單中通常還需要包含一些說明性的文字，提示用戶進行填寫和操作。
表單域：
他相當於一個容器，用來容納所有的表單控件和提示信息，可以通過他定義處理表單數據所用程序的url地址，以及數據提交到服務器的方法。如果不定義表單域，表單中的數據就無法傳送到後臺服務器。
input 控件
在上面的語法中，<input />標籤爲單標籤，type屬性爲其最基本的屬性，其取值有多種，用於指定不同的控件類型。除了type屬性之外，<input />標籤還可以定義很多其他的屬性，其常用屬性如下表所示。
代碼實例1：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form>
<h3 align="left">登錄界面</h3>
姓名：<input type="text" value="李華">
<br />
QQ：<label>
<input type="number" name="usename" size="20"/>
</label>
<br/>
密碼：<label>
<input type="password" name="passward">
</label>
<br />
<input type="submit" name="提交">
</form>
</body>
</html>
顯示結果：
代碼實例2：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>插入表單</title>
</head>
<body>
<form name="invest">
姓名：<input type="text" name="Username" size="20"/> <br/>
網站: <input type="text" name="URL" size="20" maxlength="50" value="http://"/> <br />
密碼：<input type="password" name="password" size="20" maxlength="8" /> <br/>
確認密碼：<input type="password" name="qurpassword" size="20" maxlength="8"/>
請上傳你的照片：<input type="file" name="file" /><br/>
請選擇你喜歡的音樂：
<input type="checkbox" name="m1" value="rock" />搖滾樂
<input type="checkbox" name="m2" value="jazz"/>爵士樂
<input type="checkbox" name="m3" value="pop"/> 流行樂<br/>
請選擇你居住的城市:
<input type="radio" name="city" value="beijing"/> 北京
<input type="radio" name="city" value="shanghai"/> 上海
<input type="radio" name="city" value="nanjing"/> 南京 <br/>
<input type="submit" name="submit">
</form>
</body>
</html>
顯示效果：
label標籤
label 標籤爲 input 元素定義標註（標籤）。
<label>標記 可以指定 id、style、class等核心屬性，也可以指定onclick等事件屬性。除此之外，<label>標記還有一個for屬性，該屬性指定<label>標記與哪個表單控件相關聯。
代碼實例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<label for="pwd"> <strong> 填寫密碼 </strong> </label>
<br>
用戶名：<input type="text"><br />
密碼：<input type="password" id="pwd">
</body>
</html>
顯示效果：
這裏，我點擊填寫密碼這幾個文字，鼠標光標回跳到密碼輸入框。
總之，label作用：
用於綁定一個表單元素, 當點擊label標籤的時候, 被綁定的表單元素就會獲得輸入焦點。
textarea控件(文本域)
如果需要輸入大量的信息，就需要用到<textarea></textarea>標籤。通過textarea控件可以輕鬆地創建多行文本輸入框，其基本語法格式如下：
<textarea cols="每行中的字符數" rows="顯示的行數">
文本內容
</textarea>
實例案例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>添加文本域</title>
</head>
<body>
用戶調查留言：<br /> <br/>
<form action="" name="invest" method="post">
用戶名:<input name="username" type="text" size="20" value="一枝梨花壓海棠"/><br />
密碼：<input name="password" type="password" size="20" /><br />
留言: <textarea name="liuyan" rows="5" cols="40" value="輸入你的留言"></textarea><br />
<input type="submit" name="submit" value="提交" />
</form>
</body>
</html>
實例結果：
下拉菜單
使用select控件定義下拉菜單的基本語法格式如下：
<select>
<option>選項1</option>
<option>選項2</option>
<option>選項3</option>
...
</select>
代碼實例（框架沒有寫出）：
<select>
<option >python</option>
<option selected="selected">Saab</option>
<option >Opel</option>
<option>Audi</option>
</select>
顯示結果：
注意：
- <select></select>中至少應包含一對<option></option>。
- 在option 中定義selected =" selected "時，當前項即爲默認選中項。
表單域
在HTML中，form標籤被用於定義表單域，即創建一個表單，以實現用戶信息的收集和傳遞，form中的所有內容都會被提交給服務器。創建表單的基本語法格式如下：
<form action="url地址" method="提交方式" name="表單名稱">
各種表單控件
</form>
常用屬性：
- Action
在表單收集到信息後，需要將信息傳遞給服務器進行處理，action屬性用於指定接收並處理表單數據的服務器程序的url地址。 - method
用於設置表單數據的提交方式，其取值爲get或post。 - name
用於指定表單的名稱，以區分同一個頁面中的多個表單。
注意： 每個表單都應該有自己表單域
感謝，你能看到這裏，文章中難免會有錯誤，請指出或提出建議
下文鏈接：從零基礎到web前端工程師（三）