第二天

表格

表格的主要作用

1.表格主要用于顯示、展示數(shù)據(jù)，因為它可以讓數(shù)據(jù)顯示的非常的規(guī)整，可讀性非常好。特別是后臺展示數(shù)據(jù)的時候，能夠熟練運用表格就顯得很重要。一個清爽簡約的表格能夠把繁雜的數(shù)據(jù)表現(xiàn)得很有條理

2.表格不是用來布局頁面的,而是用來展示數(shù)據(jù)的。

3.表格的具體用法：
     <table>
        <tr>
            <td>單元格內(nèi)的文字</td>
            ...
        </tr>
        ...
    </table>
    1.<table> </table> 是用于定義表格的標簽。
    2.<tr> </tr> 標簽用于定義表格中的行，必須嵌套在 <table> </table>標簽中。
    3.<td> </td> 用于定義表格中的單元格，必須嵌套在<tr></tr>標簽中。
    4.字母 td 指表格數(shù)據(jù)（table data），即數(shù)據(jù)單元格的內(nèi)容。

表頭單元格標簽：

    表頭標簽的具體實現(xiàn)：
     <table>
        <tr>
            <th>姓名</th>
            ...
        </tr>
        ...
    </table>
    1.一般表頭單元格位于表格的第一行或第一列，表頭單元格里面的文本內(nèi)容加粗居中顯示.
        <th> 標簽表示 HTML 表格的表頭部分(table head 的縮寫)
    2.一般表頭單元格位于表格的第一行或第一列，表頭單元格里面的文本內(nèi)容加粗居中顯示.
        <th> 標簽表示 HTML 表格的表頭部分(table head 的縮寫)
5.表頭單元格也是單元格，常用于表格第一行突出重要性，表頭單元格里面的文字會加粗居中

表格屬性：

1.表格標簽這部分屬性我們實際開發(fā)我們不常用，后面通過 CSS 來設置.

后書寫表格屬性

1.用到寬度高度邊框cellpadding 和 cellspacing

2.表格瀏覽器中對齊 align

表格結(jié)構(gòu)標簽：

使用場景:
    因為表格可能很長,為了更好的表示表格的語義，可以將表格分割成 表格頭部和表格主體兩大部分.
在表格標簽中，分別用：<thead>標簽 表格的頭部區(qū)域、<tbody>標簽 表格的主體區(qū)域. 這樣可以更好的分清表格結(jié)構(gòu)。

總結(jié):
1. <thead></thead>：用于定義表格的頭部。<thead> 內(nèi)部必須擁有 <tr> 標簽。 一般是位于第一行。
2. <tbody></tbody>：用于定義表格的主體，主要用于放數(shù)據(jù)本體 。
3. 以上標簽都是放在 <table></table> 標簽中。

合并單元格：

特殊情況下,可以把多個單元格合并為一個單元格,  這里同學們會最簡單的合并單元格即可.
1.合并單元格方式
2.目標單元格
3.合并單元格的步驟

合并單元格方式：

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

最上側(cè)單元格為目標單元格, 寫合并代碼

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

最左側(cè)單元格為目標單元格, 寫合并代碼

合并單元格三步曲：

先確定是跨行還是跨列合并。

找到目標單元格. 寫上合并方式 = 合并的單元格數(shù)量。

比如：<td colspan=“2”></td>。刪除多余的單元格。

表格總結(jié)

表格學習整體可以分為三大部分:

表格的相關(guān)標簽

table   thead  body  tr  th  td 

表格的相關(guān)屬性

cellspacing    cellpadding     width  height  border 

合并單元格

  rowspan   collspan

列表

表格是用來顯示數(shù)據(jù)的，那么列表就是用來布局的。 
列表最大的特點就是整齊、整潔、有序，它作為布局會更加自由和方便。
根據(jù)使用情景不同，列表可以分為三大類：無序列表、有序列表和自定義列表。

無序：

<ul> 標簽表示 HTML 頁面中項目的無序列表，一般會以項目符號呈現(xiàn)列表項，而列表項使用 <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 來設置。

有序：

有序列表即為有排列順序的列表，其各個列表項會按照一定的順序排列定義。在 HTML 標簽中，<ol> 標簽用于定義有序列表，列表排序以數(shù)字來顯示，并且使用 <li> 標簽來定義列表項。有序列表的基本語法格式如下：

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

1. <ol></ol>中只能嵌套<li></li>，直接在<ol></ol>標簽中輸入其他標簽或者文字的做法是不被允許的。
2. <li> 與 </li>之間相當于一個容器，可以容納所有元素。
3. 有序列表會帶有自己樣式屬性，但在實際使用時，我們會使用 CSS 來設置。

自定義：

自定義列表的使用場景:自定義列表常用于對術(shù)語或名詞進行解釋和描述，定義列表的列表項前沒有任何項目符號。在 HTML 標簽中，<dl> 標簽用于定義描述列表（或定義列表），該標簽會與 <dt>（定義項目/名字）和 <dd>（描述每一個項目/名字）一起使用。語法如下：

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

為什么需要表單：

使用表單目的是為了收集用戶信息。
在我們網(wǎng)頁中， 我們也需要跟用戶進行交互，收集用戶資料，此時就需要表單。

表單的組成：

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

表單域：

表單域是一個包含表單元素的區(qū)域。
在 HTML 標簽中， <form> 標簽用于定義表單域，以實現(xiàn)用戶信息的收集和傳遞。
<form> 會把它范圍內(nèi)的表單元素信息提交給服務器.
實現(xiàn)代碼：
<form action=“url地址” method=“提交方式” name=“表單域名稱">各種表單元素控件</form>

表單域的常用屬性：

這里只需要記住兩點:
1.在我們寫表單元素之前,應該有個表單域把他們進行包含.
2.表單域是 form標簽.

表單控件(表單元素)

<input> 表單元素

在英文單詞中，input 是輸入的意思，而在表單元素中 <input> 標簽用于收集用戶信息。在 <input> 標簽中，包含一個 type 屬性，根據(jù)不同的 type 屬性值，輸入字段擁有很多種形式（可以是文本字段、復選框、掩碼后的文本控件、單選按鈕、按鈕等）。

<input type="屬性值" />

<input /> 標簽為單標簽 type 屬性設置不同的屬性值用來指定不同的控件類型

<label> 標簽

<label> 標簽為 input 元素定義標注（標簽）。
<label> 標簽用于綁定一個表單元素, 當點擊<label> 標簽內(nèi)的文本時，瀏覽器就會自動將焦點(光標)轉(zhuǎn)到或者選擇對應的表單元素上,用來增加用戶體驗.
語法：
<label for="sex">男</label>
<input type="radio" name="sex" id="sex" />
核心： <label> 標簽的 for 屬性應當與相關(guān)元素的 id 屬性相同。

<select> 表單元素

使用場景: 在頁面中，如果有多個選項讓用戶選擇，并且想要節(jié)約頁面空間時，我們可以使用<select>標簽控件定義下拉列表。

語法：
<select>
<option>選項1</option>
<option>選項2</option>
<option>選項3</option>
...
</select>

<textarea> 表單元素

1. 使用場景: 當用戶輸入內(nèi)容較多的情況下，此時我們可以使用 <textarea> 標簽。
2. 在表單元素中，<textarea> 標簽是用于定義多行文本輸入的控件。
3. 使用多行文本輸入控件，可以輸入更多的文字，該控件常見于留言板，評論。

語法：

<textarea rows="3" cols="20">   文本內(nèi)容 </textarea>

通過 <textarea> 標簽可以輕松地創(chuàng)建多行文本輸入框。cols=“每行中的字符數(shù)” ，rows=“顯示的行數(shù)”，

我們在實際開發(fā)中不會使用，都是用 CSS 來改變大小。

表單元素我們學習了三大組 input 輸入表單元素 select 下拉表單元素 textarea 文本域表單元素.這三組表單元素都應該包含在form表單域里面,并且有 name 屬性.

具體代碼：

<form>

    <input type=“text " name=“username”>

    <select name=“jiguan”>  

     <option>北京</option>

    </select> 

    <textarea name= "message">

    </textarea>

</form>

有三個名字非常相似的標簽:表單域 form 使用場景: 提交區(qū)域內(nèi)表單元素給后臺服務器文件域 file 是input type 屬性值 使用場景: 上傳文件文本域 textarea 使用場景: 可以輸入多行文字, 比如留言板 網(wǎng)站介紹等…4. 我們當前階段不需要提交表單元素,所以我們只負責表單元素的外觀形態(tài)即可.

完成綜合案例

查閱文檔：

推薦的網(wǎng)址： 
百度:  http://www.baidu.com
W3C :  http://www.w3school.com.cn/
MDN: https://developer.mozilla.org/zh-CN/