6. 表格標(biāo)簽

6.1 表格的主要作用

主要用于顯示、展示數(shù)據(jù)，可以讓數(shù)據(jù)顯示的規(guī)整，可讀性非常好，特別是后臺展示數(shù)據(jù)時，能夠熟練運(yùn)用表格就顯得很重要。

6.2 基本語法

    <!--
    1. <table> </table> 是用于定義表格的標(biāo)簽。
    2. <tr> </tr> 標(biāo)簽用于定義表格中的行，必須嵌套在 <table> </table>標(biāo)簽中。
    3. <td> </td> 用于定義表格中的單元格，必須嵌套在<tr></tr>標(biāo)簽中。
    4. 字母 td 指表格數(shù)據(jù)（table data），即數(shù)據(jù)單元格的內(nèi)容。 
    -->
    <table>
        <!-- 一行三列 -->
        <tr>
            <td>姓名</td>
            <td>性別</td>
            <td>年齡</td>
        </tr>
    </table>

6.3 表頭單元格標(biāo)簽

一般表頭單元格位于表格的第一行或第一列，表頭單元格里面的文本內(nèi)容加粗居中顯示，突出重要性

<th> 標(biāo)簽標(biāo)識HTML表格的表頭部分（table head的縮寫）

    <table>
        <!-- 一行三列 -->
        <tr>
            <th>姓名</th>
            <th>性別</th>
            <th>年齡</th>
        </tr>
    </table>

6.4 表格屬性

表格屬性要寫到表格標(biāo)簽table里面

6.5 表格結(jié)構(gòu)標(biāo)簽

表格過長時，為了更好的表示表格的語義，可以將表格分割成表格頭部<thead>和表格主體<tbody>兩大部分，都存放在<table></table>

<thead></thead>：表格的頭部，其內(nèi)部必須要有<tr>標(biāo)簽，一般是位于第一行

<tbody></tbody>：表格主體，主要用于放數(shù)據(jù)本體

6.6 合并單元格

1. 合并單元格方式

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

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

2. 目標(biāo)單元格（寫合并代碼）

跨行：最上側(cè)單元格為目標(biāo)單元格，寫合并代碼

跨列：最左側(cè)單元格為目標(biāo)單元格，寫合并代碼

3. 合并單元格的步驟

確定跨行還是跨列

找到目標(biāo)單元格：寫合并方式=合并的單元格數(shù)量

刪除多余的單元格

7. 列表標(biāo)簽

表格是用來顯示數(shù)據(jù)的，而列表是用來布局的，列表的最大特別：整齊整潔有秩序、作為布局會更加自由和方便

根據(jù)使用情景不同，列表可以分為三大類：無序列表、有序列表和自定義列表

7.1 無序列表（重點(diǎn)）

7.2 有序列表（理解）

有序列表即為排列順序的列表，其各個列表項會按照一定的順序排列來定義

在HTML標(biāo)簽中，<ol>標(biāo)簽用于定義有序列表，列表排序以數(shù)字來顯示，并使用<li>標(biāo)簽來定義列表項

注意：

1.<ol></ol>中只能嵌套<li></li>，直接在<ol></ol>標(biāo)簽中輸入其他標(biāo)簽或文字的做法是不被允許

2.<li></li>之間相當(dāng)于一個容器，可以容納所有元素

3. 有序列表會帶有自己的樣式屬性，但在實(shí)際使用時是通過CSS來設(shè)置

7.3 自定義列表（重點(diǎn)）

使用場景：用于對術(shù)語或名詞進(jìn)行解釋和描述，定義列表的列表前沒有任何項目符號

在HTML標(biāo)簽中，<dl>標(biāo)簽用于定義描述列表（或定義列表），該標(biāo)簽會與<dt>（定義項目/名字）和<dd>（描述每一個項目/名字）一起使用

注意

1. <dl></dl>只能包含 <dt>和 <dd>

2. <dt>和 <dd>個數(shù)沒有限制，經(jīng)常是一個 <dt> 對應(yīng)多個<dd>

應(yīng)用：底部導(dǎo)航欄

7.4 列表總結(jié)

注意

1. 遇到上面是一個標(biāo)題，下面有幾個圍繞該標(biāo)題說明的，就用自定義列表

2. 排列整齊，沒有順序，就用無序列表

8. 表單標(biāo)簽

使用表單目的是收集用戶信息

8.1 表單的組成

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

8.2 表單域

表單域是一個包含表單元素的區(qū)域

在HTML標(biāo)簽中，<form>標(biāo)簽用于定義表單域，以實(shí)現(xiàn)用戶信息的收集和傳遞

<form>會把它范圍內(nèi)的表單元素信息提交給服務(wù)器

    <p>表單域</p>
    <form action="url地址" method="提交方式" name="表單域名稱">
        各種表單元素空間
    </form>

8.3 表單控件（表單元素）

1. input輸入表單元素

在英文單詞中，input是輸入的意思，而在表單元素中<input>標(biāo)簽用于收集用戶信息

在<input>標(biāo)簽中，包含一個type屬性，根據(jù)不同的type屬性值，輸入字段擁有很多種形式（可以是文本、復(fù)選框、掩碼后的文本控件、單選按鈕、按鈕等）

<input type="屬性值"> <!--單標(biāo)簽-->

?type屬性設(shè)置不同的屬性值用來指定不同的控件類型：

除type屬性外，<input>標(biāo)簽還有很多屬性：

?1. name和value是每個表單元素都有的屬性值，主要給后臺人員使用

2. name表單元素的名字，要求單選按鈕和復(fù)選框要有相同的name值

3. checked屬性主要針對于單選按鈕和復(fù)選框，主要作用一打開頁面，就要可以默認(rèn)選中某個表單元素

4. maxlength是用戶可以在表單元素輸入的最大字符數(shù)，一般較少使用

    <form action="demo.php" method="post" name="name1">
        <!-- text向里面輸入文本 -->
        <!-- value 默認(rèn)值，將輸入的值送到后臺 -->
        <!-- maxlength輸入字段的最大值 -->
        用戶名：<input type="text" name="user" value="輸入用戶名" maxlength="6"><br>
        <!-- password用于密碼，有加密功能 -->
        密碼：<input type="password"><br>

        <!-- 單選按鈕和復(fù)選框可以設(shè)置checked屬性，當(dāng)頁面打開的時候就可以默認(rèn)選中這個按鈕 -->
        <!-- radio單選按鈕，可以實(shí)現(xiàn)多選 -->
        <!-- name 是表單元素名字 性別單元按鈕必須要有相同的名字name，才可以實(shí)現(xiàn)多選 -->
        性別：男 <input type="radio" name="sex" value="男" checked="checked"> 女 <input type="radio" name="sex" value="女">
        人妖<input type="radio" name="sex" value="人妖"><br>
        <!-- checkbox 復(fù)選框 可以實(shí)現(xiàn)多選 -->

        愛好：吃飯 <input type="checkbox" value="吃飯"> 睡覺 <input type="checkbox" value="睡覺"> 打豆豆<input type="checkbox"
            value="打豆豆"><br>

        <!-- submit 提交按鈕，默認(rèn)文字是“提交”，可以通過value修改默認(rèn)文字 -->
        <!-- 點(diǎn)擊提交按鈕，可以把表單域form里面的表單元素 里面的值 提交給后臺服務(wù)器 -->
        <input type="submit" value="免費(fèi)注冊"><br>

        <!-- reset 提交按鈕，默認(rèn)文字是“重置”，可以通過value修改默認(rèn)文字 -->
        <!-- 點(diǎn)擊重置按鈕可以還原表單元素初始的默認(rèn)狀態(tài) -->
        <input type="reset" value="重新填寫"><br>

        <!-- button 普通按鈕，無默認(rèn)文字 可以通過value修改默認(rèn)文字 -->
        <!-- button后期結(jié)合js 搭配使用 -->
        <input type="button" value="獲取短信驗證碼"><br>

        <!-- 文件域使用場景：上傳文件使用 -->
        上傳文件：<input type="file">
    </form>

?注意：

1、有些表單元素想剛打開頁面就默認(rèn)顯示幾個文字怎么做?

用戶名: <input type="text" value="請輸入用戶名" /> 

用戶名: <input type="text" value="請輸入用戶名" name="username" /> 

<input type="radio" name="sex" />男
<input type="radio" name="sex" />女

性 別:
<input type="radio" name="sex" value="男" checked="checked" />男
<input type="radio" name="sex" value="女" />女

<input type="radio" name="sex" value="男" checked="checked" />男
<input type="text" value=“請輸入用戶名”>

<label for="sex">男</label>
<input type="radio" name="sex" id="sex" />

4. textarea文本域元素

使用場景：當(dāng)用戶輸入內(nèi)容較多的情況下，可以使用<textarea>標(biāo)簽

在表單元素中，<textarea>標(biāo)簽是用于定義多行文本輸入的條件

使用多行文本輸入控件，可以輸入更多的文字，該控件常見于留言板、評論

    <p>今日反饋</p>
    <!-- 一行rows寫cols字，-->
    <textarea cols="50" rows="5">
    那些酗酒和吸毒的人，通常都知道這樣會毀了自己，但是內(nèi)心就是不夠堅定，沒有辦法戒掉。這一類的軟弱，就像我們前面談過的那種難以面對創(chuàng)傷的情形，常常是一種人格上的特質(zhì)。
    </textarea>

注意

1. 通過<textarea>標(biāo)簽可以輕松地創(chuàng)建多行文本輸入框

2. cols=“每行中的字符數(shù)”，rows=“顯示的行數(shù)”，實(shí)際開發(fā)中都是用CSS改變大小文章來源地址http://www.zghlxwxcb.cn/news/detail-800922.html

總結(jié)

到了這里，關(guān)于跟著pink老師前端入門教程-day03的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！