目標：
目錄：
一、表格標籤
表格是實際開發中最常用的標籤，重點掌握
1、表格的主要作用：
表格主要用於顯示、展示數據，可讓數據整齊，可讀性好。
表格不是用來佈局頁面的，而是用來展示數據的。
2、表格的基本語法
<table>
<tr>
<td>單元格內的文字</td>
........
</tr>
</table>
1、< table>< /table>是用於定義表格的標籤。
2、< tr>< /tr>標籤用來定義表格中的行，必須嵌套在< table>< /table>中
3、< td>< /td>用來定義表格中的單元格，必須嵌套在< tr>< /tr>中。
4、字母td指表格數據（table data），即數據單元格的內容。
3、表頭單元格標籤
用< th></ th>標籤，位於第一行或第一列，表頭單元格里的文本內容加粗居中顯示。//與tr的區別。
<table>
<tr>
<th>姓名 </th>
......
</tr>
.....
</table>
4、表格屬性
表格標籤的屬性在實際開發中不常用，後面用CSS來設置。
目的：
1、記住英語單詞，後面CSS要用。
2、感受表格外觀形態。
這些屬性要寫在表格標籤table裏面去。即：<table align="center">
5、表格結構標籤
因爲表格很長，爲更好的表現表格的語義，把表格分割成頭部和主體兩部分。
< thead>:表格的頭部區域
< tbody>:表格的主題區域
注意區分< th>和< thead>，< th>爲表頭單元格！
< thead>內一定要有< tr>標籤，一般在第一行
以上兩標籤一定在兩table中。
6、合併單元格
1、合併單元格方式：
- 跨行合併：rowspan=“合併單元格的個數”
- 跨列合併：colspan=“合併單元格的個數”
2、目標單元格：（寫合併代碼）
- 跨行：最上側單元格爲目標單元格，寫合併代碼
- 跨列：最左側單元格爲目標單元格，寫合併代碼
3、合併單元格三步曲：
- 確定跨行？跨列？
- 找到目標單元格，寫合併代碼。如：< td colspan=“2” > < /td>
- 刪除多餘的單元格
7、表格總結
表格學習的三部分
- 表格的相關標籤
- 表格的相關屬性
- 合併單元格
二、列表標籤 （重要）
表格用來展示數據，列表用來佈局。
列表的特點：整齊有序，用其佈局自由方便。
根據使用場景不同，列表分爲：
- 無序列表
- 有序列表
- 自定義列表
1、無序列表 （重點！）
< ul>標籤定義無序列表，列表項用< li>標籤定義。
無序列表的基本語法格式：
<ul>
<li>列表項1</li>
<li>列表項2</li>
<li>列表項3</li>
......
</ul>
1、無序列表的各個列表項無順序。
2、無序列表只能放< li>標籤，不許放其他標籤或文字。
3、< li>相當於一個容器，可以容納所以元素。
4、無序列表會帶有自己的樣式屬性，CSS後會強制去掉小點。
2、有序列表 （理解）
< ol>標籤定義有序列表，< li>標籤定義列表項。
<ol>
<li>列表項1</li>
<li>列表項2</li>
<li>列表項3</li>
......
</ol>
1、有序列表有順序
2,3,4與上類似。
3、自定義列表 （重點）
自定義列表的使用場景：
用於對術語或名詞進行解釋和說明，定義的列表項前沒有任何符號。
(1)語法格式
< dl>用於定義列表，與< dt>（定義項目/名字）和< dd>（描述每一個項目/名字）一起使用。
<dl>
<dt>名詞1</dt>
<dd>名詞1解釋1</dd>
<dd>名詞1解釋2</dd>
</dl>
1、dl裏只能包含dt、dd。
2、dt、dd個數沒有限制。
3、dt、dd爲兄弟關係，不是包含關係。
4、列表總結
三、表單標籤
如用戶註冊賬號信息頁面爲一個表單。
1、爲什麼需要表單？
收集用戶信息。
2、表單的組成
由表單域，表單控件（或元素）和提示信息三個部分組成
（1）表單域
包含表單元素的區域，
用< form>標籤定義表單域，< form>會把它範圍內的表單元素信息提交給服務器。
語法規範
<form action="url地址" method="提交方式" name="表單域名稱">
各種表單元素控件
</form>
（2）表單控件（表單元素）
1、input輸入表單元素
2、select下拉表單元素
3、textarea文本域元素
< Input>輸入表單元素
< input>標籤用於收集用戶信息。
語法規範：
<input type="屬性值" />
1、爲單標籤
2、 type屬性設不同的值用來指定不同的控件類型
type屬性及屬性值：
單選按鈕：小圓。
複選框：小方框。
例子：
①單選
<input type="radio" name="sex" id="man"checked="checked"/><label for="man">男</label>
<input type="radio" name="sex" id="women"/><label for="women">女</label>
3、input的其他屬性：
- name和value是每個表單元素都要有的屬性值，只要給後臺人員使用。
- name表單元素的名字，要求單選按鈕和複選框同一組要有相同的name值。
- value：默認顯示值
- checked：頁面一打開，某個按鈕或複選框被選中狀態。
checked="checked"。針對單選按鈕和複選框。
< label>標籤
< label>標籤爲Input元素定義標註標籤
< label>標籤綁定一個表單元素，當點擊< label>標籤內的文本時，自動將光標選擇在對應的表單元素上，增加用戶體驗。
語法規範：
<label for="sex">男</label>
<input type="radio" name="sex" id="sex" />
核心：< label>標籤的for屬性應與相關元素的id屬性相同。
select下拉表單元素
節約頁面空間。
用< select>標籤定義下拉列表。
語法規範：
<select>
<option>選項1</option>
<option>選項2</option>
......
</select>
- < select>內至少包含一對< option>
- 在< option>中定義selected=“selected”，則當前項爲默認選中項。
textarea文本域元素
使用場景：輸入內容較多。
使用< textarea>定義多行文本輸入控件。
語法規範：
<textarea cols="50" rows="5">
文本內容
</textarea>