表格、表單、列表

能夠利用表格、列表和表單完成注冊頁面的綜合案例

• 能出說表格用來做什么的
• 能說出列表用來做什么的
• 能說出表單用來做什么的

為了讓我們頁面顯示的更加整齊，我們需要學習三個表（表格、表單、列表）

表格 table(會使用)

目標：

• 理解：
  • 能說出表格用來做什么的
  • 表格的基本結(jié)構(gòu)組成
• 應(yīng)用：
  • 能夠熟練寫出n行n列的表格
  • 能簡單的合并單元格

表格作用：

存在即是合理的。 表格的現(xiàn)在還是較為常用的一種標簽，但不是用來布局的，常見顯示、展示表格式數(shù)據(jù)。

因為它可以讓數(shù)據(jù)顯示的非常的規(guī)整，可讀性非常好。

特別是后臺展示數(shù)據(jù)的時候表格運用是否熟練就顯得很重要，一個清爽簡約的表格能夠把繁雜的數(shù)據(jù)表現(xiàn)得很有條理，雖然 div 布局也可以做到，但是總沒有表格來得方便。

1. 創(chuàng)建表格

在HTML網(wǎng)頁中，要想創(chuàng)建表格，就需要使用表格相關(guān)的標簽。

創(chuàng)建表格的基本語法：

<table>
      <tr>
            <td>單元格內(nèi)文字</td>
      </tr>
</table>

要深刻體會表格、行、單元格他們的構(gòu)成。

在上面的語法中包含基本的三對HTML標簽，分別為 table、tr、td，他們是創(chuàng)建表格的基本標簽，缺一不可，下面對他們進行具體地解釋

1. table用于定義一個表格標簽。

2. tr標簽 用于定義表格中的行，必須嵌套在 table標簽中。

3. td 用于定義表格中的單元格，必須嵌套在<tr></tr>標簽中。

4. 字母 td 指表格數(shù)據(jù)（table data），即數(shù)據(jù)單元格的內(nèi)容，現(xiàn)在我們明白，表格最合適的地方就是用來存儲數(shù)據(jù)的。

總結(jié)：

• 表格的主要目的是用來顯示特殊數(shù)據(jù)的
• 一個完整的表格有表格標簽（table），行標簽（tr），單元格標簽（td）組成，沒有列的標簽

• <tr></tr>中只能嵌套<td></td> 類的單元格
• <td></td>標簽，他就像一個容器，可以容納所有的元素

2. 表格屬性

表格有部分屬性我們不常用，這里重點記住 cellspacing 、 cellpadding。

<img src="media/tt.png" />

我們經(jīng)常有個說法，是三參為0， 平時開發(fā)的我們這三個參數(shù) border cellpadding cellspacing 為 0

案例：

<table border="1" width="500" height="300" align="certer" cellspacing="0" cellpadding="10">
<tr>  <th>姓名</th>   <th>性別</th> <th>年齡</th>  </tr>
   <tr>  <td>劉德華</td> <td>男</td> <td>55</td>  </tr>
   <tr>  <td>郭富城</td> <td>男</td> <td>52</td>  </tr>
   <tr>  <td>張學友</td> <td>男</td> <td>58</td>  </tr>
   <tr>  <td>黎明</td>   <td>男</td> <td>18</td>  </tr>
   <tr>  <td>劉曉慶</td> <td>女</td> <td>63</td>  </tr>
</table>

3. 表頭單元格標簽th

• 作用：
  • 一般表頭單元格位于表格的第一行或第一列，并且文本加粗居中
• 語法：
  • 只需用表頭標簽<th></th>替代相應(yīng)的單元格標簽<td></td>即可。

案例2：
效果圖

<table border="1" width="500" height="0" align="center" cellspacing="0" cellpadding="0">
<tr>  
            <th>姓名</th> 
            <th>性別</th>
            <th>電話</th>
        </tr>
        <tr>
            <td>小王</td>
            <td>女</td>
            <td>110</td>
        </tr>
        <tr>
            <td>小明</td>
            <td>男</td>
            <td>120</td>
        </tr>   
</table>

th 也是一個單元格 只不過和普通的 td單元格不一樣，它會讓自己里面的文字居中且加粗

4. 表格標題caption

定義和用法

<table>
   <caption>我是表格標題</caption>
</table>

**注意： **

1. caption 元素定義表格標題，通常這個標題會被居中且顯示于表格之上。
2. caption 標簽必須緊隨 table 標簽之后。
3. 這個標簽只存在 表格里面才有意義。

案例3：

按照要求完成以下案例：

5. 合并單元格(難點)

合并單元格是我們比較常用的一個操作，但是不會合并的很復雜。

5.1 合并單元格2種方式

• 跨行合并：rowspan="合并單元格的個數(shù)"
• 跨列合并：colspan="合并單元格的個數(shù)"

5.3 合并單元格三步曲

1. 先確定是跨行還是跨列合并
2. 根據(jù) 先上 后下 先左 后右的原則找到目標單元格 然后寫上 合并方式 還有 要合并的單元格數(shù)量 比如 ： <td colspan="3"> </td>
3. 刪除多余的單元格 單元格

6. 總結(jié)表格

1. 表格提供了HTML 中定義表格式數(shù)據(jù)的方法。
2. 表格中由行中的單元格組成。
3. 表格中沒有列元素，列的個數(shù)取決于行的單元格個數(shù)。
4. 表格不要糾結(jié)于外觀，那是CSS 的作用。
5. 表格的學習要求： 能手寫表格結(jié)構(gòu)，并且能簡單合并單元格。

7. 拓展閱讀@

表格劃分結(jié)構(gòu)（了解）

對于比較復雜的表格，表格的結(jié)構(gòu)也就相對的復雜了，所以又將表格分割成三個部分：題頭、正文和腳注。而這三部分分別用:thead,tbody,tfoot來標注， 這樣更好的分清表格結(jié)構(gòu)

注意：*

1. <thead></thead>：用于定義表格的頭部。用來放標題之類的東西。<thead> 內(nèi)部必須擁有 <tr> 標簽！
2. <tbody></tbody>：用于定義表格的主體。放數(shù)據(jù)本體 。
3. <tfoot></tfoot>放表格的腳注之類。
4. 以上標簽都是放到table標簽中。

1. 列表標簽（重點）

問？

前面我們知道表格一般用于數(shù)據(jù)展示的，但是網(wǎng)頁中還是有很多跟表格類似的布局，如下圖~~ 我們用什么做呢？

答：

答案是列表， 那什么是列表？ 表格是用來顯示數(shù)據(jù)的，那么列表就是用來布局的。 因為非常整齊和自由

• 概念：

  容器里面裝載著結(jié)構(gòu)，樣式一致的文字或圖表的一種形式，叫列表

• 特點：

  列表最大的特點就是 整齊 、整潔、 有序，跟表格類似，但是他可組合自由度會更高。

1.1 無序列表 ul （重點）

無序列表的各個列表項之間沒有順序級別之分，是并列的。其基本語法格式如下：

<ul>
  <li>列表項1</li>
  <li>列表項2</li>
  <li>列表項3</li>
  ......
</ul>

比如下面這些，新聞是沒有順序的，不用排隊，先到先得，后發(fā)布先顯示。

腳下留心：

 1. <ul></ul>中只能嵌套<li></li>，直接在<ul></ul>標簽中輸入其他標簽或者文字的做法是不被允許的。
 2. <li>與</li>之間相當于一個容器，可以容納所有元素。
 3. 無序列表會帶有自己樣式屬性，放下那個樣式，一會讓CSS來！

1.2 有序列表 ol （了解）

有序列表即為有排列順序的列表，其各個列表項按照一定的順序排列定義，有序列表的基本語法格式如下：

<ol>
  <li>列表項1</li>
  <li>列表項2</li>
  <li>列表項3</li>
  ......
</ol>

所有特性基本與ul 一致。 但是實際中比 無序列表 用的少很多。

1.3 自定義列表（理解）

自定義列表常用于對術(shù)語或名詞進行解釋和描述，定義列表的列表項前沒有任何項目符號。其基本語法如下：

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

1.4 列表總結(jié)

我們現(xiàn)在還沒有學布局，現(xiàn)在只要保證2個點：

1. 學會什么時候用無序列表， 學會什么時候用自定義列表
2. 無序列表和自定義列表代碼怎么寫？
3. 具體的我們剛才看的布局，等我們學了css 在來全面布局。

2. 表單標簽(掌握)

目標：

• 能寫出最常用的注冊類表單
• 能說出input表單常見屬性

現(xiàn)實中的表單，類似我們?nèi)ャy行辦理信用卡填寫的單子。 如下圖：

**作用： **

表單目的是為了收集用戶信息。

在我們網(wǎng)頁中， 我們也需要跟用戶進行交互，收集用戶資料，此時也需要表單。

在HTML中，一個完整的表單通常由表單控件（也稱為表單元素）、提示信息和表單域3個部分構(gòu)成。

**表單控件： **

? 包含了具體的表單功能項，如單行文本輸入框、密碼輸入框、復選框、提交按鈕、重置按鈕等。

提示信息：

? 一個表單中通常還需要包含一些說明性的文字，提示用戶進行填寫和操作。

表單域：

? 他相當于一個容器，用來容納所有的表單控件和提示信息，可以通過他定義處理表單數(shù)據(jù)所用程序的url地址，以及數(shù)據(jù)提交到服務(wù)器的方法。如果不定義表單域，表單中的數(shù)據(jù)就無法傳送到后臺服務(wù)器。

2.1 input 控件(重點)

• 語法：

  <input type="屬性值" value="你好">
  

• input 輸入的意思

• <input />標簽為單標簽

• type屬性設(shè)置不同的屬性值用來指定不同的控件類型

• 除了type屬性還有別的屬性

• 常用屬性：

  
  

1. type 屬性

• 這個屬性通過改變值，可以決定了你屬于那種input表單。
• 比如 type = 'text' 就表示 文本框 可以做 用戶名， 昵稱等。
• 比如 type = 'password' 就是表示密碼框 用戶輸入的內(nèi)容 是不可見的。

用戶名: <input type="text" /> 
密  碼：<input type="password" />

2. value屬性 值

用戶名:<input type="text"  name="username" value="請輸入用戶名"> 

• value 默認的文本值。 有些表單想剛打開頁面文本框里面面就默認顯示幾個文字，就可以通過這個value 來設(shè)置。
  比如：

  
  

3. name屬性

用戶名:<input type="text"  name=“username” />  

name表單的名字， 這樣，后臺可以通過這個name屬性找到這個表單。 頁面中的表單很多，name主要作用就是用于區(qū)別不同的表單。

• name屬性后面的值，是我們自己定義的。

• radio 如果是一組，我們必須給他們命名相同的名字 name 這樣就可以多個選其中的一個啦

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

• name屬性，我們現(xiàn)在用的較少， 但是，當我們學ajax 和后臺的時候，是必須的。

4. checked屬性

• 表示默認選中狀態(tài)。 較常見于 單選按鈕和復選按鈕。

性    別:
<input type="radio" name="sex" value="男" checked="checked" />男
<input type="radio" name="sex" value="女" />女 

上面這個，表示就默認選中了 男 這個單選按鈕

5. input 屬性小結(jié)

2.2 label標簽(理解)

目標：

label標簽主要目的是為了提高用戶體驗。 為用戶提高最優(yōu)秀的服務(wù)。

概念：

label 標簽為 input 元素定義標注（標簽）。

作用：

用于綁定一個表單元素, 當點擊label標簽的時候, 被綁定的表單元素就會獲得輸入焦點。

如何綁定元素呢？

1. 第一種用法就是用label直接包括input表單。

<label> 用戶名： <input type="radio" name="usename" value="請輸入用戶名">   </label>

適合單個表單選擇

2. 第二種用法 for 屬性規(guī)定 label 與哪個表單元素綁定。

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

當我們鼠標點擊 label標簽里面的文字時， 光標會定位到指定的表單里面

2.3 textarea（文本域）

• 語法：

<textarea >
  文本內(nèi)容
</textarea>

• 作用：

  通過textarea控件可以輕松地創(chuàng)建多行文本輸入框.

  cols="每行中的字符數(shù)" rows="顯示的行數(shù)" 我們實際開發(fā)不用

文本框和文本域區(qū)別

2.4 select下拉列表

目的：

如果有多個選項讓用戶選擇，為了節(jié)約空間，我們可以使用select控件定義下拉列表.

<select>
  <option>選項1</option>
  <option>選項2</option>
  <option>選項3</option>
  ...
</select>

• 注意：

1. <select> 中至少包含一對 option
2. 在option 中定義selected =" selected "時，當前項即為默認選中項。
3. 但是我們實際開發(fā)會用的比較少

3. form表單域

• 收集的用戶信息怎么傳遞給服務(wù)器？

  通過form表單域

• 目的：

  在HTML中，form標簽被用于定義表單域，以實現(xiàn)用戶信息的收集和傳遞，form中的所有內(nèi)容都會被提交給服務(wù)器。

**語法: **

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

常用屬性：

注意:

每個表單都應(yīng)該有自己表單域。我們現(xiàn)在做頁面，不寫看不到效果，但是 如果后面學 ajax 后臺交互的時候，必須需要 form表單域。

2.6 團隊約定

元素屬性

• 元素屬性值使用雙引號語法
• 元素屬性值可以寫上的都寫上

推薦：

<input type="text" />   
<input type="radio" name="name" checked="checked" />

不推薦：

<input type=text  />    
<input type='text' />   
<input type="radio" name="name" checked />

4.綜合案例（注冊頁面）

5. 查文檔

經(jīng)常查閱文檔是一個非常好的學習習慣。

W3C : http://www.w3school.com.cn/

MDN: https://developer.mozilla.org/zh-CN/

6. 總結(jié)