• HTML的三個(gè)表：表格、列表和表單。
  • 表格：用來(lái)顯示數(shù)據(jù)。讓數(shù)據(jù)顯示的更整齊規(guī)范。
  • 列表：用來(lái)布局。是頁(yè)面布局更整齊規(guī)范。
  • 表單：用來(lái)收集用戶信息。

1.表格標(biāo)簽

• 1.創(chuàng)建表格的基本語(yǔ)法：

<table>
  <tr>
    <td>單元格內(nèi)的數(shù)據(jù)</td>
    ... ...
  </tr>
  ... ...
</table>

• 2.標(biāo)簽的含義：
  • table標(biāo)簽：用來(lái)定義一個(gè)表格標(biāo)簽。
  • tr標(biāo)簽：定義表格的行，必須嵌套在table標(biāo)簽中。
  • td標(biāo)簽：定義表格的單元格，必須嵌套在tr標(biāo)簽中。
• 3.表格的屬性：（重點(diǎn)是cellspacing cellpadding）
  • border：設(shè)置表格的邊框（默認(rèn)border="0",無(wú)邊框）。
  • cellspacing：外邊距，設(shè)置單元格與單元格之間的空白間距（默認(rèn)2像素）。
  • cellpadding：內(nèi)邊距，設(shè)置單元格內(nèi)容與單元格邊框之間的空白間距（默認(rèn)1像素）。
  • width：設(shè)置表格的寬度。
  • height：設(shè)置表格的高度。
    以上單位都是像素
  • align：設(shè)置表格在網(wǎng)頁(yè)中的水平對(duì)齊方式。left、right 、center。
• 4.表頭單元格標(biāo)簽
  • 作用：表頭單元格標(biāo)簽位于表格的第一行或第一列，且文本加粗居中。
  • 語(yǔ)法：用<th></th>代替相應(yīng)的單元格標(biāo)簽<td></td>即可。
• 5.表格標(biāo)題標(biāo)簽
  • 作用：定義表格標(biāo)題，這個(gè)標(biāo)題會(huì)顯示在表格之上且加粗居中。
  • 語(yǔ)法：<table><caption>表格標(biāo)題<caption>... ...<table>

注意：caption標(biāo)簽必須且只能緊跟在table標(biāo)簽之后。

• 6.合并單元格
  • 跨行合并：rowspan="合并單元格的個(gè)數(shù)"
  • 跨列合并：`colspan="合并單元格的個(gè)數(shù)"
  • 合并單元格的步驟：
    1.先去確定是跨行合并還是跨列合并；
    2.根據(jù)先上 后下、先左 后右 的順序找到目標(biāo)單元格，寫上合并方式和合并數(shù)量。<td rowspan="2"></td>
    3.刪除多余的單元格
• 7.表格結(jié)構(gòu)劃分
  • 三部分：題頭、正文和腳注。
  • 語(yǔ)法：對(duì)應(yīng)的分別是<thead></thead>、<tbody></tbody> 、<tfoot></tfoot> 。
  • 作用：方便以后用CSS來(lái)進(jìn)行設(shè)置。

2.列表標(biāo)簽

• 1.無(wú)序列表
  • 作用：各個(gè)列表項(xiàng)之間沒有順序級(jí)別之分，是并列的。
  • 語(yǔ)法：列表項(xiàng)前有小圓點(diǎn) （unordered list）

<ul>
  <li>列表項(xiàng)1</li>
  <li>列表項(xiàng)1</li>
  <li>列表項(xiàng)1</li>
  ... ...
</ul>

1.<ul></ul>中只能嵌套<li></li>，其他標(biāo)簽不能直接嵌套在ul標(biāo)簽中。
2.<li>與</li>之間相當(dāng)于一個(gè)容器，可以容納所有元素。

• 2.有序列表
  • 作用：各個(gè)列表項(xiàng)按照一定的順序排列定義的。
  • 語(yǔ)法：列表項(xiàng)前有數(shù)字（ordered list）

<ol>
  <li>列表項(xiàng)1</li>
  <li>列表項(xiàng)2</li>
  <li>列表項(xiàng)3</li>
  ... ...
</ol>

• 3.定義列表
  • 作用：通常對(duì)術(shù)語(yǔ)或名詞進(jìn)行解釋和描述
  • 語(yǔ)法：列表項(xiàng)前沒有任何項(xiàng)目符號(hào)（definition list、definition description）

<dl>
  <dt>名詞1</dt>
  <dd>名詞1解釋1</dd>
  <dd>名詞1解釋2</dd>
  ... ...
 <dt>名詞2</dt>
  ... ... 
</dl>

• 4.應(yīng)用場(chǎng)景
  • 無(wú)序列表：最常用。新聞列表、商品列表、導(dǎo)航條。
  • 有序列表：很少用。
  • 定義列表：網(wǎng)頁(yè)底部的描述信息。

3.表單標(biāo)簽

• 1.基本內(nèi)容
  作用：收集用戶信息
  結(jié)構(gòu)：一個(gè)完整的表單由表單控件（表單元素）、提示信息和表單域組成。
  • 表單控件：包含了具體的表單功能項(xiàng)，如文本輸入框、密碼輸入框、單選/復(fù)選框、提交/重置按鈕。
  • 提示信息：一些說(shuō)明性文字，提示用戶進(jìn)行填寫和操作。
  • 表單域：相當(dāng)于一個(gè)容器，容納所有的表單控件和提示信息，同時(shí)通過(guò)它定義將數(shù)據(jù)提交給服務(wù)器的方法。不定義表單域，無(wú)法將數(shù)據(jù)提交給服務(wù)器。
• 2.input控件（單）
  • 語(yǔ)法：<input type="屬性值" value="預(yù)顯示內(nèi)容" />
    • 通過(guò)定義type屬性的不同屬性值，來(lái)指定不同的控件類型。
    • 除了type屬性還有其他屬性。
  • type屬性的屬性值：
    • text：?jiǎn)涡形谋据斎肟颉?/li>
    • password：密碼輸入框。
    • radio：?jiǎn)芜x按鈕。
    • checkbox：復(fù)選框。
    • button：普通按鈕。
    • submit：提交按鈕
    • reset：重置按鈕。
    • image：以圖像形式提交按鈕。
    • file：文件域。上傳文件用的（一點(diǎn)擊，會(huì)從本地選擇文件上傳）
  • 其他屬性：
    • name：控件的名稱，由用戶自己定義。
    • value：input控件默認(rèn)的文本值，由用戶自己定義。
    • size：正整數(shù)，input控件在頁(yè)面中顯示的寬度。
    • checked：checked，定義選擇控件默認(rèn)被選中的項(xiàng)。
    • maxlength：正整數(shù)，控件允許輸入的最多字符數(shù)。
  • checked屬性：
    • 默認(rèn)選中的狀態(tài)，常見于 單選按鈕和復(fù)選按鈕。

    <input type="checkbox" name="hb" checked="checked">蘋果
    <input type="checkbox" name="hb" >梨
    <input type="checkbox" name="hb" >香蕉
    

    上面的代碼默認(rèn)選擇了蘋果。
  • name屬性：
    • name屬性值是由用戶自己定義的，方便后臺(tái)通過(guò)name屬性名找到這個(gè)表單，name主要作用就是用來(lái)區(qū)分實(shí)現(xiàn)不同目的的表單的。
      -radio如果是一組，必須給他們命名相同的name屬性值，這樣就可以只選中多個(gè)中的一個(gè)了。

  <input type="radio" name="sex">男
  <input type="radio" name="sex">女
  

• 3.label標(biāo)簽：
  • 作用：用于綁定一個(gè)表單元素，當(dāng)點(diǎn)擊label標(biāo)簽時(shí)，被綁定的表單元素會(huì)獲得輸入點(diǎn)。
  • 如何綁定：
    • 方法1：用label標(biāo)簽直接包裹input表單。

    <label>用戶名：<input type="text" ></label>
    

    • 方法2：用for屬性規(guī)定label與哪個(gè)表單元素（id名）綁定。

    <label for="sex">男</label>
    <input type="radio" id="sex">
    

• 4.文本域標(biāo)簽:（不常用）
  • 作用：通過(guò)textarea控件可以創(chuàng)建多行文本輸入框。
  • 語(yǔ)法：

  <textarea cols="每行的字符數(shù)" rows="顯示的行數(shù)">
  默認(rèn)的內(nèi)容
  </textarea>
  ···
  

注意：cols和rows不再使用，這個(gè)文本域的大小通過(guò)CSS來(lái)設(shè)置。
文本框和文本域是由區(qū)別的。

• 5.下拉列表（基本不用了）
  • 作用：有多個(gè)選項(xiàng)選擇，使用select控件來(lái)節(jié)省空間。
  • 語(yǔ)法：

  <select >
    <option>選項(xiàng)1</option>
    <option>選項(xiàng)2</option>
    <option>選項(xiàng)3</option>
    ... ...
  </select>
  

  語(yǔ)法注意：
  • 在selection標(biāo)簽中至少包含一對(duì)option標(biāo)簽。
  • 在option標(biāo)簽中定義selected屬性時(shí)，當(dāng)前項(xiàng)即為默認(rèn)選中項(xiàng)。

注意：現(xiàn)在開發(fā)一般不再用select標(biāo)簽，因?yàn)樵诓煌瑸g覽器顯示的效果不一樣，同時(shí)很難修改其樣式。

• 6.表單域：

  • 作用：form標(biāo)簽用來(lái)定義表單域，來(lái)實(shí)現(xiàn)用戶信息的收集和傳遞，form標(biāo)簽中的所有內(nèi)容會(huì)被提交給服務(wù)器。
  • 語(yǔ)法：

  <form action="URL地址" method="提交方式" name="表單名稱">
  各種表單控件
  </form>
  

  • 常用屬性：

  屬性	屬性值	作用
  action	URL地址	指定接收并處理表單數(shù)據(jù)的服務(wù)器程序的URL地址
  method	get/post	設(shè)置表單數(shù)據(jù)的提交方式
  name	名稱	指定表單名稱，以區(qū)分同一個(gè)頁(yè)面中的多個(gè)表單