##第二天
##表格
###表格的主要作用
1.表格主要用於顯示、展示資料，因為它可以讓資料顯示的非常的規整，可讀性非常好。特別是後臺展示資料的時候，能夠熟練運用表格就顯得很重要。一個清爽簡約的表格能夠把繁雜的資料表現得很有條理

2.表格不是用來佈局頁面的,而是用來展示資料的。

3.表格的具體用法：
<table>
<tr>
<td>單元格內的文字</td>
...
</tr>
...
</table>
1.<table> </table> 是用於定義表格的標籤。
2.<tr> </tr> 標籤用於定義表格中的行，必須巢狀在 <table> </table>標籤中。
3.<td> </td> 用於定義表格中的單元格，必須巢狀在<tr></tr>標籤中。
4.字母 td 指表格資料（table data），即資料單元格的內容。
###表頭單元格標籤：
表頭標籤的具體實現：
<table>
<tr>
<th>姓名</th>
...
</tr>
...
</table>
1.一般表頭單元格位於表格的第一行或第一列，表頭單元格里面的文字內容加粗居中顯示.
<th> 標籤表示 HTML 表格的表頭部分(table head 的縮寫)
2.一般表頭單元格位於表格的第一行或第一列，表頭單元格里面的文字內容加粗居中顯示.
<th> 標籤表示 HTML 表格的表頭部分(table head 的縮寫)
5.表頭單元格也是單元格，常用於表格第一行突出重要性，表頭單元格里面的文字會加粗居中
###表格屬性：
1.表格標籤這部分屬性我們實際開發我們不常用，後面通過 CSS 來設定.
​

思路：

先製作表格的結構.

1.第一行裡面是 th 表頭單元格

2.第二行開始裡面是 td 普通單元格單元格里面可以放任何元素

3.文字連結圖片等都可以

後書寫表格屬性

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

2.表格瀏覽器中對齊 align
###表格結構標籤：
使用場景:
因為表格可能很長,為了更好的表示表格的語義，可以將表格分割成 表格頭部和表格主體兩大部分.
在表格標籤中，分別用：<thead>標籤 表格的頭部區域、<tbody>標籤 表格的主體區域. 這樣可以更好的分清表格結構。

總結:
1. <thead></thead>：用於定義表格的頭部。<thead> 內部必須擁有 <tr> 標籤。 一般是位於第一行。
2. <tbody></tbody>：用於定義表格的主體，主要用於放資料本體 。
3. 以上標籤都是放在 <table></table> 標籤中。
###合併單元格：
特殊情況下,可以把多個單元格合併為一個單元格, 這裡同學們會最簡單的合併單元格即可.
1.合併單元格方式
2.目標單元格
3.合併單元格的步驟
如下圖：

合併單元格方式：

跨行合併：rowspan="合併單元格的個數"

最上側單元格為目標單元格, 寫合併程式碼

跨列合併：colspan="合併單元格的個數"

最左側單元格為目標單元格, 寫合併程式碼

合併單元格三步曲：

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

找到目標單元格. 寫上合併方式 = 合併的單元格數量。

比如：<td colspan="2"></td>。刪除多餘的單元格。

表格總結

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

表格的相關標籤

table thead body tr th td

表格的相關屬性

cellspacing cellpadding width height border

合併單元格

rowspan collspan
##列表
表格是用來顯示資料的，那麼列表就是用來佈局的。
列表最大的特點就是整齊、整潔、有序，它作為佈局會更加自由和方便。
根據使用情景不同，列表可以分為三大類：無序列表、有序列表和自定義列表。
###無序：

<ul> 標籤表示 HTML 頁面中專案的無序列表，一般會以專案符號呈現列表項，而列表項使用 <li> 標籤定義。無序列表的基本語法格式如下：

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

</ul>

1. 無序列表的各個列表項之間沒有順序級別之分，是並列的。

2. ​ 中只能巢狀
，直接在標籤中輸入其他標籤或者文字的做法是不被允許的。​

4. <li> 與 </li> 之間相當於一個容器，可以容納所有元素。

5. 無序列表會帶有自己的樣式屬性，但在實際使用時，我們會使用 CSS 來設定。

###有序：

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

1. 列表項1
2. 列表項2
3. 列表項3
...

1. ​ 中只能巢狀
，直接在標籤中輸入其他標籤或者文字的做法是不被允許的。​

3. <li> 與 </li>之間相當於一個容器，可以容納所有元素。

4. 有序列表會帶有自己樣式屬性，但在實際使用時，我們會使用 CSS 來設定。

###自定義：

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

名詞1

名詞1解釋1

名詞1解釋2

###列表總結

##表單
現實中的表單：

###為什麼需要表單：
使用表單目的是為了收集使用者資訊。
在我們網頁中， 我們也需要跟使用者進行互動，收集使用者資料，此時就需要表單。
###表單的組成：
在 HTML 中，一個完整的表單通常由表單域、表單控制元件（也稱為表單元素）和 提示資訊3個部分構成。
###表單域：
表單域是一個包含表單元素的區域。
在 HTML 標籤中， <form> 標籤用於定義表單域，以實現使用者資訊的收集和傳遞。
<form> 會把它範圍內的表單元素資訊提交給伺服器.
實現程式碼：
<form action=“url地址” method=“提交方式” name=“表單域名稱">各種表單元素控制元件</form>
###表單域的常用屬性：

基礎班來說,我們暫時不用表單域提交資料,只需要寫上 form 標籤即可. 就業班等學習伺服器程式設計階段會重新講解.
這裡只需要記住兩點:
1.在我們寫表單元素之前,應該有個表單域把他們進行包含.
2.表單域是 form標籤.

###表單控制元件(表單元素)

<input> 表單元素

在英文單詞中，input 是輸入的意思，而在表單元素中 <input> 標籤用於收集使用者資訊。在 <input> 標籤中，包含一個 type 屬性，根據不同的 type 屬性值，輸入欄位擁有很多種形式（可以是文字欄位、複選框、掩碼後的文字控制元件、單選按鈕、按鈕等）。

<input type="屬性值" />

<input /> 標籤為單標籤 type 屬性設定不同的屬性值用來指定不同的控制元件型別

type 屬性的屬性值及其描述如下：

除 type 屬性外，<input>標籤還有其他很多屬性，其常用屬性如下：

###<label> 標籤
<label> 標籤為 input 元素定義標註（標籤）。
<label> 標籤用於繫結一個表單元素, 當點選<label> 標籤內的文字時，瀏覽器就會自動將焦點(游標)轉到或者選擇對應的表單元素上,用來增加使用者體驗.
語法：
<label for="sex">男</label>
<input type="radio" name="sex" id="sex" />
核心： <label> 標籤的 for 屬性應當與相關元素的 id 屬性相同。

###<select> 表單元素
使用場景: 在頁面中，如果有多個選項讓使用者選擇，並且想要節約頁面空間時，我們可以使用<select>標籤控制元件定義下拉列表。

語法：

###<textarea> 表單元素

1. 使用場景: 當用戶輸入內容較多的情況下，我們就不能使用文字框表單了，此時我們可以使用 <textarea> 標籤。

2. 在表單元素中，<textarea> 標籤是用於定義多行文字輸入的控制元件。

3. 使用多行文字輸入控制元件，可以輸入更多的文字，該控制元件常見於留言板，評論。

語法：

<textarea rows="3" cols="20"> 文字內容 </textarea>

通過 <textarea> 標籤可以輕鬆地建立多行文字輸入框。cols=“每行中的字元數” ，rows=“顯示的行數”，

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

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

具體程式碼：

<form>

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

<select name="jiguan">

<option>北京</option>

</select>

<textarea name= "message">

</textarea>

</form>

有三個名字非常相似的標籤:表單域 form 使用場景: 提交區域內表單元素給後臺伺服器檔案域 file 是input type 屬性值 使用場景: 上傳檔案文字域 textarea 使用場景: 可以輸入多行文字, 比如留言板 網站介紹等…4. 我們當前階段不需要提交表單元素,所以我們只負責表單元素的外觀形態即可.

###完成綜合案例

###查閱文件：
經常查閱文件是一個非常好的學習習慣。
推薦的網址：
百度: http://www.baidu.com
W3C : http://www.w3school.com.cn/
MDN: https://developer.mozilla.org/zh-CN/