達標要求
-
了解列表的分類
-
熟練掌握列表的用法
-
熟練掌握表格的結構構成
-
合并單元格
-
表單的組成
-
熟練掌握表單控件分類的使用
1.列表
1.1 無序列表
<ul>：定義無序列表，并且只能包含<li>子元素。
<li>：定義列表項，可以包含與<div>完全類似的內容，所以可以包含較多類型的子元素。
輔助記憶:
ul是unordered lists的縮寫 (無序列表)
li是list item的縮寫 （列表項目）
<ul><li>無序列表項</li><li>無序列表項</li><li>無序列表項</li> </ul>
注意：
<ul></ul>中只能嵌套<li></li>，直接在<ul></ul>標簽中輸入其他標簽或者文字的做法是不被允許的。
<li>與</li>之間相當于一個容器，可以容納所有元素。
1.2 有序列表
有序列表即為有排列順序的列表，其各個列表項按照一定的順序排列定義，有序列表的基本語法格式如下：
輔助記憶:
ol是ordered lists的縮寫（有序列表）
li是list item的縮寫 （列表項目）
<ol><li>列表項1</li><li>列表項2</li><li>列表項3</li>......
</ol>-
所有特性基本與ul 一致。
-
但是實際工作中， 較少用 ol ，因此我們用一句話來總結下 ol：
-
有序列表中默認的type類型是數字，而且是從1開始的。它有兩個屬性：type、start。
-
type：有五個屬性值：1、a、A、i、I(羅馬數字)，表示列表前綴的格式；
-
start：屬性值位數字， 表示從type類型的第幾個數字開始，比如當你選的type=“a”,start=“3”。
1.3 自定義列表
?
<dl>：定義列表
<dt>：定義 標簽定義了定義列表中的項目(術語)
<dd>：定義描述
輔助記憶: dl是definition lists的英文縮寫 (自定義列表) dt是definition term的縮寫 (自定義列表項) dd是definition description的縮寫（自定義列表描述）
<dl><dt>支付方式</dt><dd>貨到付款</dd><dd>在線支付</dd><dd>分期付賬</dd>
</dl>1.4 列表總結
| 標簽名 | 定義 | 說明 |
|---|---|---|
| <ul></ul> | 無序標簽 | 里面只能包含li 沒有順序，我們以后布局中最常用的列表 |
| <ol></ol> | 有序標簽 | 里面只能包含li 有順序， 使用情況較少 |
| <dl></dl> | 自定義列表 | 里面有2個兄弟， dt 和 dd |
2. 表格
表格的現在還是較為常用的一種標簽，但不是用來布局，常見處理、顯示表格式數據。
2.1 創建表格
在HTML網頁中，要想創建表格，就需要使用表格相關的標簽。創建表格的基本語法格式如下：
<table><tr><td>單元格內的文字</td>...</tr>...
</table>1.table：用于定義一個表格。
2.tr ：用于定義表格中的一行，必須嵌套在 table標簽中，在 table中包含幾對 tr，就有幾行表格。
3.td：用于定義表格中的單元格，必須嵌套在<tr></tr>標簽中。
輔助記憶:
tr是table row的縮寫 （表格中的一行）
td是table data cell的縮寫 （表格中的一個單元格）
th是table header cell的縮寫 （表格中的表頭）
注意：
<tr></tr>中只能嵌套<td></td>
<td></td>標簽，他就像一個容器，可以容納所有的元素
2.2 表格屬性
| 屬性 | 值 | 描述 |
|---|---|---|
| border | px | 寬度。 |
| cellpadding | px | 規定單元邊沿與其內容之間的空白。 |
| cellspacing | px | 規定單元格之間的空白。 |
| width | px | 規定表格的寬度。 |
| align | left center right | 不贊成使用。請使用樣式代替。規定表格相對周圍元素的對齊方式。 |
2.3 表格結構
對于比較復雜的表格，表格的結構也就相對的復雜了，所以又將表格分割成三個部分：題頭、正文和腳注。而這三部分分別用:thead,tbody,tfoot來標注， 這樣更好的分清表格結構。
| 元素 | 描述 |
|---|---|
<caption> | 定義表格標題。 |
<thead> | 定義表格的頁眉，用于定義表格的頭部。用來放標題之類的東西 |
<tbody> | 定義表格的主體。 |
<tfoot> | 定義表格的頁腳，放表格的腳注之類 |
<th> | 定義表格的表頭。 |
<tr> | 定義表格的行。 |
<td> | 定義表格單元格。 |
<table><caption>表格標題</caption><thead><tr><th>表頭</th><th>表頭</th><th>表頭</th></tr></thead><tbody><tr><td>單元格</td><td>單元格</td><td>單元格</td></tr></tbody><tfoot><tr><td>表尾</td><td>表尾</td><td>表尾</td></tr></tfoot>
</table>2.4 合并單元格(難點)
跨行合并：rowspan（豎著）="合并單元格的個數"
跨列合并：colspan（橫著）="合并單元格的個數"
合并單元格的思想：
-
將多個內容合并的時候，就會有多余的東西，把它刪除。
-
合并的順序 先上、先左 。
-
thead、tfoot里的單元格不可以與tbody單元格進行合并。
2.5 總結表格
| 標簽名 | 定義 | 說明 |
|---|---|---|
| <table></table> | 表格標簽 | 就是一個四方的盒子 |
| <caption></caption> | 表格標題標簽 | 表格的標題，跟著表格一起走，和表格居中對齊 |
| <tr></tr> | 表格行標簽 | 行標簽要再table標簽內部才有意義 |
| <td></td> | 單元格標簽 | 單元格標簽是個容器級元素，可以放任何東西 |
| <th></th> | 表頭單元格標簽 | 它還是一個單元格，但是里面的文字會居中且加粗 |
| colspan和 rowspan | 合并屬性 | 用來合并單元格的 |
3.表單(重點)
在我們網頁中，需要收集用戶資料做驗證或提交數據時會用到表單。
在HTML中，一個完整的表單通常由表單控件（也稱為表單元素）、提示信息和表單域3個部分構成。
-
表單控件：
包含了具體的表單功能項，如單行文本輸入框、密碼輸入框、復選框、提交按鈕、重置按鈕等。
-
提示信息：
? ? ? ? 一個表單中通常還需要包含一些說明性的文字，提示用戶進行填寫和操作。
? ? 3.表單域：
? ? ? ? 相當于一個容器，用來容納所有的表單控件和提示信息。
3.1 input控件
-
語法：
<input type="屬性值" value="你好">
3.1.1 type 屬性值
通過改變值type 屬性值，可以決定了你屬于那種input表單。
| 值 | 描述 |
|---|---|
| text | 定義單行的輸入字段，用戶可在其中輸入文本。默認寬度為 20 個字符。 |
| password | 定義密碼字段。該字段中的字符被掩碼。 |
| radio | 定義單選按鈕。 |
| checkbox | 定義復選框。 |
| file | 定義輸入字段和 "瀏覽"按鈕，供文件上傳。 |
| reset | 定義重置按鈕。重置按鈕會清除表單中的所有數據。 |
| submit | 定義提交按鈕。提交按鈕會把表單數據發送到服務器。 |
| button | 定義可點擊按鈕（多數情況下，用于通過 JavaScript 啟動腳本） |
3.1.2 text和password
1.value屬性
value 默認的文本值。 有些表單想剛打開頁面就默認顯示幾個文字，就可以通過這個value 來設置。
用戶名:<input type="text" value="請輸入用戶名"> 2.placeholder屬性 placeholder屬性在開發過程中，也可以輸入框的默認值。
<input name="keyword" type="text" value="" placeholder="請輸入您要搜索的寶貝"/>3.name屬性
用戶名:<input type="text" name="username" /> ?name表單的名字， 這樣，后臺可以通過這個name屬性找到這個表單。頁面中的表單很多，name主要作用就是用于區別不同的表單。
-
name屬性后面的值，是我們自己定義的。
-
name屬性與后臺交互時候，是必須的設置的。
3.1.3 radio(單選按鈕)
radio標簽中有<input type="radio" name="單選按鈕所在的組名" value="單選按鈕的取值" checked="checked"/>
其中，單選按鈕之間的name值必須一致。
<input type="radio" value="1" name="sex">男
<input type="radio" value="2" name="sex">女3.1.4 checkbox（復選框）
checkbox標簽中:選中項的值和索引（實際應該叫序號，index()的值從1開始，不是0）
<input type="checkbox" name="checkbox1" value="checkbox復選1" checked="checked"/>checkbox復選1
<input type="checkbox" name="checkbox1" value="checkbox復選2"/>checkbox復選2
<input type="checkbox" name="checkbox1" value="checkbox復選3" checked="checked"/>checkbox復選3| 屬性 | 說明 | 作用 |
|---|---|---|
| checked | 默認選中 | 表示那個單選或者復選按鈕一開始就被選中了 |
3.1.5 file(文件域)
使用file可以實現頁面上傳文件的功能。
<input type="file" multiple/>| 屬性 | 值 | 描述 |
|---|---|---|
| multiple | multiple | 當該屬性為 true 時，可選擇多個文件。 |
3.1.6 表單域
在HTML中，form標簽被用于定義表單域，即創建一個表單，以實現用戶信息的收集和傳遞，form中的所有內容都會被提交給服務器。創建表單的基本語法格式如下：
<form action="url地址" method="提交方式">各種表單控件
</form>常用屬性：
-
Action 在表單收集到信息后，需要將信息傳遞給服務器進行處理，action屬性用于指定接收并處理表單數據的服務器程序的url地址。
-
method 用于設置表單數據的提交方式，其取值為get或post。
3.1.7 reset（重置）和submit（提交）
注意點：需要配合form表單來使用。
3.1.8 button
<input type="button" /> 定義可點擊的按鈕，但沒有任何行為。button 類型常用于在用戶點擊按鈕時啟動 JavaScript 程序。
<input type="button" value="按鈕" />3.2 label標簽(理解)
label 標簽為 input 元素定義標注（標簽）。
作用： 用于綁定一個表單元素, 當點擊label標簽的時候, 被綁定的表單元素就會獲得輸入焦點
如何綁定元素呢？
for 屬性規定 label 與哪個表單元素綁定。
<label for="male">Male</label>
<input type="radio" name="sex" id="male">3.3 textarea控件(文本域)
| 屬性 | 值 | 描述 |
|---|---|---|
| cols | number | 規定文本區域內可見的寬度。 |
| rows | number | 規定文本區域內可見的行數。 |
| disabled | disabled | 規定禁用文本區域。 |
| maxlength | number | 規定文本區域允許的最大字符數。 |
| name | text | 規定文本區域的名稱。 |
如果需要輸入大量的信息，就需要用到<textarea></textarea>標簽。通過textarea控件可以輕松地創建多行文本輸入框，其基本語法格式如下：
<textarea cols="每行中的字符數" rows="顯示的行數">文本內容
</textarea>
3.4 下拉菜單
3.4.1 select標簽的屬性
| 屬性 | 值 | 描述 |
|---|---|---|
| name | text | 定義下拉列表的名稱。 |
| multiple | multiple | 當該屬性為 true 時，可選擇多個選項。 |
使用select控件定義下拉菜單的基本語法格式如下：
<select><option>選項1</option><option>選項2</option><option>選項3</option>...
</select>注意：
<select></select>中至少應包含一對<option></option>。
3.4.2 option的標簽屬性
| 屬性 | 值 | 描述 |
|---|---|---|
| selected | selected | 規定選項（在首次顯示在列表中時）表現為選中狀態。 |
| value | text | 定義送往服務器的選項值。 |
)
)
