1. 表格標簽 1.1 表格的主要作用 表格主要是用於顯示、展示數據，因為它可以讓數據顯示的非常的規整，可讀性非常好。特別是後臺展示數據的時候，能夠熟練運用表格就顯得很重要。一個清爽簡約的表格能夠把繁雜的數據表現得很有條理。 總結：表格不是用來佈局頁面的，而是用來展示數據的。 1.2 表格的基本語法 ...
1. 表格標簽
1.1 表格的主要作用
表格主要是用於顯示、展示數據，因為它可以讓數據顯示的非常的規整，可讀性非常好。特別是後臺展示數據的時候，能夠熟練運用表格就顯得很重要。一個清爽簡約的表格能夠把繁雜的數據表現得很有條理。
總結：表格不是用來佈局頁面的，而是用來展示數據的。
1.2 表格的基本語法
|
<table> <tr> <td>單元格內的文字</td> …… </tr> …… </table> |
1.<table></table>是用於定義表格的標簽。
2.<tr></tr>標簽用於定義表格中的行，必須嵌套在<table></table>標簽中。
3.<td></td>用於定義表格中的單元格，必須嵌套在<tr></tr>標簽中。
4.字母td指表格數據，即數據單元格的內容。
1.3 表頭單元格標簽
一般表頭單元格位於表格的第一行或第一列，表頭單元格裡面的文件內容加粗居中顯示。
<th>標簽表示HTML表格部分（table head的縮寫）。
|
<table> <tr> <th>姓名</th> …… </tr> …… </table> |
1.4 表格屬性
表格標簽這部分屬性我們實際開發我們不經常用，後面通過CSS來設置。
目的有2個：
1. 記住這些英語單詞，後面CSS會使用。
2. 直觀感受表格的外觀形態。
1.4.1 屬性標簽
| 屬性名 | 屬性值 | 描述 |
| align | left、center、right | 規定表格相對周圍元素的對齊方式。 |
| border | 1或"" | 規定表格單元是否擁有邊框，預設為""，表示沒有邊框。 |
| cellpadding | 像素值 | 規定單元邊沿與其內容之間的空白，預設1像素。 |
| cellspacing | 像素值 | 規定單元格之間的空白，預設2像素。 |
| width | 像素值或百分比 | 規定表格的寬度。 |
註意：
1. 製作表格先書寫製作表格的結構。
2. 在書寫表格的屬性。
1.5 表格結構標簽
使用場景：因為表格可能很長，為了更好的表示表格的語義，可以將表格分割成表格頭部和表格主題兩大部分。
在表格標簽中，分別用：<thead>標簽表格的頭部區域、<tbody>標簽表格的主體區域，這樣可以更好的分清表格結構。
1.6 合併單元格
特殊情況下，可以把多個單元格合併成一個單元格。
1.6.1 合併單元格方式
跨行合併：rowspan="合併單元格的個數"
跨列合併：colspan="合併單元格的個數"
1.6.2 合併單元格三部曲
1. 先確定是跨行還是跨列合併。
2. 找到目標單元格，並寫上合併方式=合併的單元格數量。比如：<td colspan="2"></td>。
3. 刪除多餘的單元格。
2. 列表標簽
表格是用來顯示數據的，那麼列表就是來佈局的。
列表最大的特點就是整齊、整潔、有序，他作為佈局會更加自由和方便。
根據使用場景不同，列表可以分為三大類：無序列表、有序列表和自定義列表。
2.1 無序列表
<ul>標簽表示HTML頁面中項目的無序列表，一般會以項目符號呈現列表項，而列表項使用<li>標簽定義。
無序列表的基本語法格式如下：
|
<ul> <li>列表項1</li> <li>列表項2</li> <li>列表項3</li> …… </ul> |
註意：
1. 無序列表的各個列表之間沒有順序級別之分，是併列的。
2. <ul></ul>中只能嵌套<li></li>,直接在<ul></ul>標簽中輸入其他標簽或者文字的做法是不被允許的。
3. <li>與</li>之間相當於一個容器，可以容納所有元素。
4. 無序列表會帶有自己的樣式屬性，但在實際使用時，我們會使用CSS來設置。
2.2 有序列表
有序列表即為有排列的順序列表，其各個列表會按照一定的順序排列定義。
在HTML標簽中，<ol>標簽用於定義有序列表，列表排序以數字來顯示，並且使用<li>標簽來定義列表項。
有序列表的基本語法格式如下：
|
<ol> <li>列表項1</li> <li>列表項2</li> <li>列表項3</li> …… </ol> |
註意：
1. <ol></ol>中只能嵌套<li></li>，直接在<ol></ol>標簽中輸入其他標簽或文字的做法是不被允許的。
2. <li>與</li>之間相當於一個容器，可以容納所有元素。
3. 有序列表會帶有自己樣式屬性，但在實際使用中，我們會使用CSS來設置。
2.3 自定義列表
自定義列表的使用場景：
自定義列表常用於對術語或名詞進行解釋和描述，定義列表的列表項前沒有任何項目符號。
在HTML標簽中，<dl>標簽用於定義描述列表（或定義列表），該標簽會與<dt>(定義項目/名字)和<dd>（描述每一個項目/名字）一起使用。
其基本語法如下：
|
<dl> <dt>名詞1</dt> <dd>名詞1解釋1</dd> <dd>名詞1解釋2</dd> </dl> |
1. <dl></dl>裡面只能包含<dt>和<dd>。
2. <dt>和<dd>個數沒有限制，經常是一個<dt>對應多個<dd>。
3. 表單標簽
3.1 為什麼需要表單
使用表單目的是為了收集用戶信息。
在我們網頁中，我們也需要跟用戶進行交互，手機用戶資料，此時就需要表單。
3.2 表單的組成
在HTML中，一個完整的表單通常是由表單域、表單控制項（也成為表單元素）和提示信息3個部分構成。
3.3 表單域
表單域是一個包含表單元素的區域。
在HTML標簽中，<form>標簽用於定義表單域，以實現用戶信息的收集和傳遞。
<form>會把它範圍內的表單元素信息交給伺服器。
|
<form action="url地址" method="提交方式" name="表單功能變數名稱稱"> 各種表單元素控制項 </form> |
常用屬性：
| 屬性 | 屬性值 | 作用 |
| action | url | 用於指定接收並處理表單數據的伺服器程式的url地址。 |
| method | get/post | 用於設置表單數據的提交方式，其取值為get或post。 |
| name | 名稱 | 用於指定表單的名稱，以區分同一個頁面中的多個表單域。 |
註意：
1. 在我們寫表單之前，應該有個表單域把他們進行包含。
2. 表單域是form標簽。
3.4 表單控制項
在表單域中可以定義各種表單元素，這些表單元素，這些表單元素就是允許用戶在表單中輸入或者選擇的內容控制項。
3.4.1 <input>表單元素
在英文單詞中，input是輸入的意思，而在表單元素中<input>標簽用於收集用戶的信息。
在<input>標簽中，包含一個type屬性，根據不同的type屬性值，輸入欄位用有很多種形式（可以是文本欄位、覆選框、掩碼後的文件控制項、單選按鈕、按鈕等）。
| <input type="屬性值" /> |
註意：
1. <input />標簽為單標簽。
2. type屬性設置不同的屬性值用來指定不同的控制項類型。
3.4.2 type類型的屬性值及其描述
| 屬性值 | 描述 |
| button | 定義可點擊按鈕（多數情況下，用於通過JavaScript啟動腳本）。 |
| checkbox | 定義覆選框。 |
| file | 定義輸入欄位和“瀏覽”按鈕，供文件上傳。 |
| hidden | 定義隱藏的輸入欄位。 |
| image | 定義圖像形式的提交按鈕。 |
| password |
定義密碼欄位。該欄位中的字元被掩碼。 |
| radio | 定義單選按鈕。 |
| reset |
定義重置按鈕。重置按鈕會清除表單中的所有數據。 |
| submit | 定義提交按鈕。提交按鈕會把表單數據發送到伺服器。 |
| text | 定義單行的輸入欄位，用戶可以在其中輸入文本。預設寬度為20個字元。 |
除type屬性外，<input>標簽還有其他很多屬性，其常用屬性如下：
| 屬性 | 屬性值 | 描述 |
| name | 由用戶自定義 | 定義input元素的名稱。 |
| value | 由用戶自定義 | 規定input元素的值。 |
| checked | checked | 規定此input元素首次載入時應當被選中。 |
| maxlength | 正整數 | 規定輸入欄位中的字元的最大長度。 |
1. name和value是每個表單元素都有的屬性值，主要給後臺人員使用。
2. name表單元素的名字，要求單選按鈕個覆選框要有相同的name值。
3. checked屬性主要是針對單選按鈕和覆選框，主要作用一打開頁面，就可以預設選中某個表單元素。
4. maxlength是用戶可以在表單元素輸入的最大字元數，一般較少使用。
3.4.2 name屬性
頁面中的表單元素很多，name的主要作用就是用於區分不同的表單。
name屬性：當前input表單的名字，後臺可以通過這個name屬性找到這個表單。
| 用戶名<input type="text" value="請輸入用戶名" name=“username” /> |
radio（或者checked）如果是一組，我們必須給他們命名相同的名字。
|
<input type="radio" name="sex" />男 <input type="radio" name="sex" />女 |
3.4.3 <label>標簽
<label>標簽為input元素定義標註(標簽)。
<lable>標簽用於綁定一個表單元素，當點擊<lable>標簽內文本時，瀏覽器就會自動將焦點（游標）轉到或者選擇對應的表單元素上，用來增加用戶體驗。
語法：
|
<label for="sex">男</ label> <input type="radio"name="sex" id="sex" /> |
核心：<label>標簽的for屬性應當與相關屬性的id屬性形同。
3.4.4 <select>表單元素
使用場景：在頁面中，如果有多個選項讓用戶選擇，並且想要節約頁面空間時，我們可以使用<select>標簽空間定義下拉列表。
語法：
|
<select> <option>選項1</option> <option>選項2</option> <option>選項3</option> …… </select> |
註意：
1. <select>中至少包含一對<option>。
2. 在<option>中定義selected=“selected”時，當前項即為預設選中項。
3.4.5 <textarea>表單元素
使用場景：當用戶輸入內容較多的情況下，我們就不能使用文本框表單了，此時我們可以使用<textarea>標簽。
在表單元素中，<textarea>標簽是用於定義多行文本輸入的控制項。
使用多行文本輸入控制項，可以輸入更多的文字，該空間常見於留言板，評論。
語法：
|
<testarea rows="3" cols="20"> 文本內容 </textarea> |
註意：
1. 通過<textarea>標簽可以輕鬆地創建多行文本輸入框。
2. cols="每行中的字元數”，rows="顯示的行數”，我們在實際開發中並不會使用，都是用CSS來改變大小。
4. 查閱文檔
推薦的網址：
百度：http://www.baidu.com
W3C:http://www.w3school.com.cn/
MDN:https://developer.mozilla.org/zh-CN/
