前端學習第二天
1、表格標籤
表格是實際開發中非常常用的標籤
1）表格的主要作用
表格主要用於顯示、展示資料，因為它可以讓資料顯示的非常的規整，可讀性非常好，特別是後臺展示資料的時候，能夠熟練運用表格就顯得很重要。一個清爽簡約的表格能夠把繁雜的資料表現得很有條理。
表格不是用來佈局頁面的，而是用來展示資料的。
2）表格的基本語法
1.<table></table>是用於定義表格的標籤
2.<tr></tr>標籤用於定義表格中的行，必須巢狀在<table></table>標籤中。
3.<td></td>用於定義表格中的單元格，必須巢狀在<tr></tr>標籤中。
4.字母td指表格資料(table data)，即資料單元格的內容。
3）表頭單元格標籤
一般表頭單元格位於表格的第一行或第一列，表頭單元格里面的文字內容加粗居中顯示。<th></th>標籤表示HTML表格的表頭部分(table head)的縮寫。
tip:表頭單元格也是單元格，常用於表格第一行，突出重要性，表頭單元格里面的文字會加粗居中顯示。
4）表格相關屬性
表格標籤這部分屬性我們實際開發不常用，後面通過css來設定。
瞭解的目的有2個：
1.記住這些英語單詞，後面css會使用。
2.直觀感受表格的外觀形態。
5)表格結構標籤
使用場景：因為表格可能很長，為了更好的表示表格的語義，可以將表格分割成表格頭部和表格主體兩大部分。
在表格標籤中，分別用：<thead>標籤表示表格的頭部區域，<tbody>標籤表示表格的主體區域。這樣可以更好地分清表格結構。
2、列表標籤
表格是用來顯示資料的，那麼列表就是用來佈局的。
列表最大的特點就是整齊、整潔、有序，它作為佈局會更加自由和方便。
根據使用情景不同，列表可以分為三大類：無序列表、有序列表和自定義列表。
2.1無序列表
<ul>標籤表示HTML頁面中專案的無序列表，一般會以專案符號呈現列表項，而列表項使用<li>標籤定義。
無序列表的基本語法格式如下：
<ul>
<li>列表項1</li>
<li>列表項2</li>
<li>列表項3</li>
…
</ul>
tip:
1.無序列表中的各個列表之間沒有順序級別之分，是並列的。
2.<ul></ul>中只能巢狀<li></li>，直接在<ul></ul>標籤中輸入其他標籤或者文字的做法是不允許的。
3.<li></li>之間相當於一個容器，可以容納所有元素。
4.無序列表會帶有自己的樣式屬性，但在實際使用時，我們會使用CSS來設定。
2.2有序列表
有序列表即為有排列順序的列表，其各個列表項會按照一定的順序排列來定義。
在HTML標籤中，<ol>標籤用於定義有序列表，列表排列以數字來顯示，並且使用<li>標籤來定義列表項。
有序列表的基本語法格式如下：
<ol>
<li>列表項1</li>
<li>列表項2</li>
<li>列表項3</li>
…
</ol>
tip:
2.<ol></ol>中只能巢狀<li></li>，直接在<ol></ol>標籤中輸入其他標籤或者文字的做法是不允許的。
3.<li></li>之間相當於一個容器，可以容納所有元素。
4.有序列表會帶有自己的樣式屬性，但在實際使用時，我們會使用CSS來設定。
2.3自定義列表
自定義列表常用於對術語或名詞進行解釋和描述，定義列表的列表項前沒有任何專案符號。
在HTML標籤中，<dl>標籤用於定義描述列表（或定義列表），該標籤會與<dt>（定義專案/名字）和<dd>（描述每一個專案/名字）一起使用。
其基本語法如下：
<dl>
<dt>名詞1</dt>
<dd>名詞1解釋1</dd>
<dd>名詞1解釋2</dd>
</dl>
tip:
1.<dl></dl>裡面只能包含<dt>和<dd>
2.<dt>和<dd>個數沒有限制，經常是一個<dt>對應多個<dd>
3、表單標籤
3.1為什麼需要表單
使用表單的目的是收集使用者資訊。
在我們的網頁中，我們也需要跟使用者進行互動，收集使用者資料，此時就需要表單
3.2表單的組成
在HTML中，一個完整的表單通常由表單域、表單控制元件（也稱為表單元素）和提示資訊3個部分組成。
3.3表單域
表單域是一個包含表單元素的區域。
在HTML標籤中，<form>標籤用於定義表單域，以實現使用者資訊的收集和傳遞。
<form>會把它範圍內的表單元素資訊提交給伺服器。
<form>基本語法：
<form action = "url地址" method = "提交方式" name = "表單域名稱">
各種表單元素控制元件
</form>
常用屬性：
| 屬性 | 屬性值 | 作用 |
| action | url地址 | 用於指定接收並處理表單資料的伺服器程式的url地址 |
| method | get/post | 用於設定表單資料的提交方式，其取值為get或post |
| name | 名稱 | 用於指定表單的名稱，以區分同一個頁面中的多個表單域 |
3.4表單控制元件（表單元素）
在表單域中可以定義各種表單元素，這些表單元素就是允許使用者在表單中輸入或者選擇的內容控制元件。
包括：（1）input輸入表單元素（2）select下拉表單元素（3）textarea文字域元素
3.4.1<input>表單元素
在表單元素中，<input>標籤用於收集使用者資訊。
在<input>標籤中，包含一個type屬性，根據不同的type屬性值，輸入欄位擁有很多種形式（可以是文字欄位、複選框、掩碼後的文字控制元件、單選按鈕、按鈕等）。
<input type="屬性值" />
tip:（1）<input />標籤為單標籤（2）type屬性設定不同的屬性值用來指定不同的控制元件型別。
type屬性的屬性值及其描述如下：
| 屬性值 | 描述 |
| button | 定義可點選按鈕（多數情況下，用於通過JavaScript啟動指令碼 |
| checkbox | 定義複選框 |
| file | 定義輸入欄位和“瀏覽”按鈕，供檔案上傳 |
| hidden | 定義隱藏的輸入欄位 |
| image | 定義影象形式的提交按鈕 |
| password | 定義密碼欄位，該欄位中的字元被掩碼 |
| radio | 定義單選按鈕 |
| reset | 定義重置按鈕，重置按鈕會清除表單中的所有資料 |
| submit | 定義提交按鈕，提交按鈕會把表單資料傳送到伺服器 |
| text | 定義單行的輸入欄位，使用者可在其中輸入文字，預設寬度為20個字元 |
除type屬性外，<input>標籤還有其他很多屬性，其常用屬性如下：
| 屬性 | 屬性值 | 描述 |
| name | 由使用者自定義 | 定義input元素的名稱 |
| value | 由使用者自定義 | 規定input元素的值 |
| checked | checked | 規定input元素首次載入時應當被選中 |
| maxlength | 正整數 | 規定輸入欄位中的字元的最大長度 |
1.name和value是每個表單元素都有的屬性值，主要給後臺人員使用。
2.name表單元素的名字，要求單選按鈕和複選按鈕要有相同的name值。
3.checked屬性主要針對於單選按鈕和複選框，主要作用——開啟頁面，就可以預設選中某個表單元素。
4.maxlength是使用者可以在表單元素輸入的最大字元數，一般較少使用。
3.4.2<label>標籤
<label>標籤為input元素定義標註（標籤）
<label>標籤用於繫結一個表單元素，當點選<label>標籤內的文字時，瀏覽器就會自動將焦點（游標）轉到或者選擇對應的表單元素上，用來增加使用者體驗。
基本語法：
<label for="sex">男</label>
<input type="radio" name="sex" id="sex" />
核心：<label>標籤的for屬性應當與相關元素的id屬性相同。
3.4.3<select>表單元素
使用場景：在頁面中，如果有多個選項讓使用者選擇，並且想要節約頁面空間時，我們可以使用<select>標籤控制元件定義下拉列表。
基本語法：
<select>
<option>選項1</option>
<option>選項2</option>
<option>選項3</option>
…
</select>
tip:（1）<select>中至少包含一對<option>（2）在<option>中定義selected="selected"時，當前項即為預設選中項。
3.4.4<textarea>表單元素
使用場景：當用戶輸入內容較多的情況下，我們就不能使用文字框表單了，此時我們可以使用<textarea>標籤。
在表單元素中，<textarea>標籤是用於定義多行文字輸入的控制元件。
使用多行文字輸入控制元件，可以輸入更多的文字，該控制元件常見於留言板，評論。
基本語法：
<textarea rows="3" cols="20">
文字內容
</textarea>
tip:（1）通過<textarea>標籤可以輕鬆地建立多行文字輸入框。（2）cols=“每行中的字元數"，rows="顯示的行數"，我們在實際開發中不會使用，都是用CSS來改變大小。