HTML經常使用標籤(下)

HTML經常使用標籤(下)

1. 表格標籤

1.1 語法

<table>    <!--table定義表格-->
    <tr>    <!--tr定義表格中的行-->
        <!--th定義表頭單元格，位於第一行/列，文字加粗居中顯示-->
        <th>表頭單元格</th>
        <!--td定義表格中的普通單元格-->
    </tr>
    <tr>
        <td>普通單元格內的文字</td>
    </tr>
</table>

這是	表頭單元格
這是	普通單元格

1.2 屬性

這些屬性經過CSS設置。

屬性名	描述
align	表格相對周圍元素的對齊方式(left、center、right)
border	表格是否有邊框，默認沒有(""：沒有，1：有)
cellpadding	單元邊緣與其內容之間的空白，默認爲1px
cellspacing	單元格之間的空白，默認爲2px
width	表格的寬度

對於cellpadding與cellspacing的區別：

1.3 表格結構標籤

表格結構標籤能夠將表格分爲頭部和主體，使表格結構分明，便於後續修改。

<table>
    <thead>表格的頭部，內部必須有tr</thead>
    <tbody>表格的主體</tbody>
</table>

1.4 合併單元格

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

<!--實現上圖的合併-->
<table>
    <!--第一行-->
    <tr>
        <td></td>    <!--第一列-->
        <!--跨列合併，在最左側單元格寫合併代碼-->
        <td colspan="2"></td>    <!--第二列-->
        <!--刪除多餘的單元格-->
    </tr>
    <!--第二行-->
    <!--跨行合併，在最上側單元格寫合併代碼-->
    <tr>
        <td rowspan="2"></td>
        <td></td>
        <td></td>
    </tr>
    <!--第三行-->
    <tr>
        <!--刪除多餘的單元格-->
        <td></td>
        <td></td>
    </tr>
</table>

合併單元格總結：

1. 先肯定是跨行仍是跨列
2. 找到目標單元格，寫上合併方式=合併的單元格數量
3. 刪除多餘的單元格

2. 列表標籤

2.1 無序列表

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

• 無序列表的各個<li>之間是並列的。（兄弟關係）
• <ul></ul>中只能嵌套<li></li>,<li>中能夠嵌套其它

2.2 有序列表

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

• 有序列表的各個<li>之間是並列的。（兄弟關係）
• <ol></ol>中只能嵌套<li></li>,<li>中能夠嵌套其它

2.3 自定義列表

<dl>
    <dt>一個名詞</dt>
    <dd>這個名詞的解釋1</dd>
    <dd>這個名詞的解釋2</dd>
</dl>

• <dl></dl>中只能包含<dt>和<dd>
• <dt>和<dd>個數無限制，常常是一個<dt>對應多個<dd>

這種就是用自定義列表作的。

3. 表單標籤

3.1 表單的組成

3.2 表單域

<form action="url" method="提交方式" name="表單域名稱">
    form會把它範圍內的扁擔元素信息提交給服務器
</form>

屬性	做用
action	填接受並處理表單數據的服務器的url
method	設置表單的提交方式（get或post）
name	指定表單的名稱

3.3 表單元素

(1)<input>

<input type="屬性值">

type屬性的屬性值以下：

屬性值	描述
button	可點擊按鈕
checkbox	複選框
file	輸入字段和瀏覽按鈕，供文件上傳
hidden	隱藏的輸入框
image	圖像形式的提交按鈕
password	密碼框
radio	單選按鈕
reset	重置按鈕
submit	提交按鈕
text	單行的輸入框，默認寬度爲20字符

其它屬性以下：

屬性	描述
name	input元素的名稱
value	input元素的默認顯示在輸入框的值
checked	當值爲checked時，input元素首次加載時被選中
maxlength	input元素的輸入字符的最大長度（正整數）

注：

1. 要求單選按鈕和複選框要有相同的name值
2. checked屬性主要針對於單選按鈕和複選框，主要用於用戶一打開頁面就能夠默認選中某個表單元素

(2)<label>

用於綁定一個表單元素。當點擊<label>標籤內的文本時，瀏覽器就會自動將光標轉到或者選擇對應的表單元素上，以此增長用戶體驗。

<!--綁定了單選按鈕，用戶點擊文字「女」的時候，該按鈕被選擇-->
<label for="sex">女</label>
<input type="radio" id="sex">    <!--單選按鈕-->

注：<label>標籤的for屬性要與相關元素的id屬性相同

(3)<select>

下拉列表。

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

1. <select>中至少包含一對<option>
2. <option selected="selected">表示當前項爲默認選中項

(4)<textarea>

多行文本框。

<textarea>
    文本內容
</textarea>