| 前言 |
HTML基礎下篇主要包括表格的創建及表單的使用
一、創建表格
·表格主要的目標是用來顯示特殊數據的
創建表格的基本語法：
<table>
<tr>
<td>單元格內的文字</td>
...
</tr>
...
</table>
1. table用於定義一個表格標籤。
2. tr標籤 用於定義表格中的行，必須嵌套在 table標籤中。
3. td 用於定義表格中的單元格，必須嵌套在標籤中。
4. 字母 td 指表格數據（table data），即數據單元格的內容，現在我們明白，表格最合適的地方就是用來存儲數據的。
5. 中只能嵌套類的單元格
6. 標籤像一個容器，可以容納所有元素
二、表格屬性
三、表頭單元格th
作用：
·表頭單元格位於第一行或第一列，並且在文本中加粗居中
·只需用表頭標籤替代相應的表格標籤即可
四、表格標題標籤caption
表格標題標籤是與整個表格一起的，位置相同且居中位於表格之上
caption標籤必須緊隨table標籤之後
caption標籤只在表格標籤裏面有意義
<table>
<caption>我是表格標題</caption>
</table>
五、合併單元格
5.1·合併單元格的兩種方式
·跨行合併：rowspan=“合併單元格的個數”
·跨列合併：colspan=“合併單元格的個數”
5.2合併單元格的順序：先上後下，先左後右
5.3合併單元格三部曲
1.先確定是跨行合併還是跨列合併
2.根據先上後下，先左後右的順序找到目標單元格
3.刪除多餘的單元格
六、表格總結
七、列表標籤
·列表概念：容器裏面裝載着結構，樣式一致的文字或圖表的一種形式，叫列表
·特點：整齊，整潔，有序，和 表格類似，組合的自由度更高
7.1無序列表（ul）
無序列表沒有順序級別之分，是並列的
<li>標籤只能放在<ul>標籤中使用
<ul>
<li>列表項1</li>
<li>列表項2</li>
<li>列表項3</li>
......
</ul>
7.2有序列表（ol）
有序列表即爲有排列順序的列表，其各個列表項按照一定的順序排列定義，有序列表的基本語法格式如下：
<ol>
<li>列表項1</li>
<li>列表項2</li>
<li>列表項3</li>
......
</ol>
7.3自定義列表
定義列表常用於對術語或名詞進行解釋和描述，定義列表的列表項前沒有任何項目符號。其基本語法如下：
<dl>
<dt>名詞1</dt>
<dd>名詞1解釋1</dd>
<dd>名詞1解釋2</dd>
...
<dt>名詞2</dt>
<dd>名詞2解釋1</dd>
<dd>名詞2解釋2</dd>
...
</dl>
列表總結
| 標籤名 | 定義 | 說明 |
|---|---|---|
| 無序標籤 | 裏面只能包含li 沒有順序，我們以後佈局中最常用的列表 | |
| 有序標籤 | 裏面只能包含li 有順序， 使用情況較少 | |
| 自定義列表 | 裏面有2個兄弟， dt 和 dd |
八、表單
8.1表單屬性
1. type 屬性
* 這個屬性通過改變值，可以決定了你屬於那種input表單。
* 比如 type = ‘text’ 就表示 文本框 可以做 用戶名， 暱稱等。
* 比如 type = ‘password’ 就是表示密碼框 用戶輸入的內容 是不可見的。
用戶名: <input type="text" />
密 碼：<input type="password" />
2. value屬性 值
用戶名:<input type="text" name="username" value="請輸入用戶名">
* value 默認的文本值。 有些表單想剛打開頁面就默認顯示幾個文字，就可以通過這個value 來設置。
3. name屬性
用戶名:<input type="text" name=“username” />
name表單的名字， 這樣，後臺可以通過這個name屬性找到這個表單。 頁面中的表單很多，name主要作用就是用於區別不同的表單。
* name屬性後面的值，是我們自己定義的。
* radio 如果是一組，我們必須給他們命名相同的名字 name 這樣就可以多個選其中的一個啦
<input type="radio" name="sex" />男
<input type="radio" name="sex" />女
* name屬性，我們現在用的較少， 但是，當我們學ajax 和後臺的時候，是必須的。
4. checked屬性
* 表示默認選中狀態。 較常見於 單選按鈕和複選按鈕。
性 別:
<input type="radio" name="sex" value="男" checked="checked" />男
<input type="radio" name="sex" value="女" />女
上面這個，表示就默認選中了 男 這個單選按鈕
5. input 屬性小結
| 屬性 | 說明 | 作用 |
|---|---|---|
| type | 表單類型 | 用來指定不同的控件類型 |
| value | 表單值 | 表單裏面默認顯示的文本 |
| name | 表單名字 | 頁面中的表單很多，name主要作用就是用於區別不同的表單。 |
| checked | 默認選中 | 表示那個單選或者複選按鈕一開始就被選中了 |
九、label標籤
作用：用於綁定一個表單元素，當點擊label的時候，被綁定的表單元素就會獲得輸入焦點
獲得綁定元素的兩種方法
1.用label直接包括input表單
<label> 用戶名： <input type="radio" name="usename" value="請輸入用戶名"> </label>
2.用for屬性規定label與那個表單元素綁定
<label for="sex">男</label>
<input type="radio" name="sex" id="sex">
十、下拉列表select
<select>
<option>選項1</option>
<option>選項2</option>
<option>選項3</option>
...
</select>
注意：<select>中至少包含一對<option>
完！歡迎評論區留言