HTML的表格標籤，列表標籤，表單標籤，HTML5有哪些新特性

阿新 • • 發佈：2022-03-10

歡迎大家去部落格冰山一樹Sankey，瀏覽效果更好。直接右上角搜尋該標題即可

部落格園主頁：部落格園主頁-冰山一樹Sankey
CSDN主頁：CSDN主頁-冰山一樹Sankey

前端學習：學習地址：黑馬程式設計師pink老師前端入門教程，零基礎必看的h5(html5)+css3+移動，下面這些都是一些學習筆記。臨淵羨魚，不如退而結網！！願我自己學有所成，也願每個前端愛好者學有所成

一. 表格標籤

1.1 表格的主要作用

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

總結：表格不是用來佈局頁面的,而是用來展示資料的.

1.2 表格的基本語法

<table>
	<tr>
		<td>單元格內的文字</td>
 ...
	</tr>
 ...
</table>

<table> </table> 是用於定義表格的標籤。
<tr> </tr> 標籤用於定義表格中的行，必須巢狀在 <table> </table>標籤中。
<td> </td> 用於定義表格中的單元格，必須巢狀在<tr></tr>

標籤中。

<table>
    <tr><td>姓名</td> <td>性別</td><td>年齡</td></tr>
    <tr><td>劉德華</td> <td>男</td><td>30</td></tr>
    <tr><td>pink</td> <td>男</td><td>21</td></tr>
    <tr><td>gff</td> <td>男</td><td>21</td></tr>
    <tr><td>piwwecnk</td> <td>男</td><td>21</td></tr>
</table>

1.3 表頭單元格標籤

一般表頭單元格位於表格的第一行或第一列，表頭單元格里面的文字內容加粗居中顯示, 突出重要性
<th> 標籤表示 HTML 表格的表頭部分(table head 的縮寫)

語法：

<table>
	<tr>
		<th>姓名</th>
		...
	</tr>
	...
</table>

1.4 表格屬性

表格標籤這部分屬性實際開發不常用，後面通過 CSS 來設定.
瞭解目的:

記住這些英語單詞,後面 CSS 會使用.
直觀感受表格的外觀形態

1.5 案例分析

小說排行榜

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>今日小說排行榜</title>
</head>
<body>
    <table align="center" width="500" height="249" border="1" cellspacing="0" >
    <thead>
        <tr>
            <th>排名</th>
            <th>關鍵詞</th>
            <th>趨勢</th>
            <th>進入搜尋</th>
            <th>最近七日</th>
            <th>相關連結</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>鬼吹燈</td>
            <td><img src="down.jpg"></td>
            <td>456</td>
            <td>123</td>
            <td> <a href="#">貼吧</a> <a href="#">圖片</a> <a href="#">百科</a> </td>
        </tr>

        <tr>
                <td>1</td>
                <td>鬼吹燈</td>
                <td><img src="down.jpg"></td>
                <td>456</td>
                <td>123</td>
                <td> <a href="#">貼吧</a> <a href="#">圖片</a> <a href="#">百科</a> </td>
        </tr>
        <tr>
                <td>3</td>
                <td>西遊記</td>
                <td><img src="up.jpg"></td>
                <td>456</td>
                <td>123</td>
                <td> <a href="#">貼吧</a> <a href="#">圖片</a> <a href="#">百科</a> </td>
        </tr>
        <tr>
                <td>1</td>
                <td>鬼吹燈</td>
                <td><img src="down.jpg"></td>
                <td>456</td>
                <td>123</td>
                <td> <a href="#">貼吧</a> <a href="#">圖片</a> <a href="#">百科</a> </td>
        </tr>
        <tr>
                <td>1</td>
                <td>鬼吹燈</td>
                <td><img src="down.jpg"></td>
                <td>456</td>
                <td>123</td>
                <td> <a href="#">貼吧</a> <a href="#">圖片</a> <a href="#">百科</a> </td>
        </tr>
        <tr>
                <td>1</td>
                <td>鬼吹燈</td>
                <td><img src="down.jpg"></td>
                <td>456</td>
                <td>123</td>
                <td> <a href="#">貼吧</a> <a href="#">圖片</a> <a href="#">百科</a> </td>
        </tr>
    </tbody>           
    </table>
</body>
</html>

1.6 表格結構標籤

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

<thead></thead>：用於定義表格的頭部。內部必須擁有標籤。一般是位於第一行。
<tbody></tbody>：用於定義表格的主體，主要用於放資料本體。
以上標籤都是放在 <table></table> 標籤中。

1.7 合併單元格

特殊情況下,可以把多個單元格合併為一個單元格。

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

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

目標單元格：（寫合併程式碼）

跨行：最上側單元格為目標單元格，寫合併程式碼
跨列：最左側單元格為目標單元格，寫合併程式碼

合併單元格三步曲：

先確定是跨行還是跨列合併。
找到目標單元格. 寫上合併方式 = 合併的單元格數量。比如：<td colspan="2"></td>。
刪除多餘的單元格。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>合併單元格</title>
</head>
<body>
    <table width="500" height="249" border="1" cellspacing="0">
        <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>
</body>
</html>

二. 列表標籤

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

標籤名	定義	說明
`<ul></ul>`	無序標籤	裡面只能包含li，設有順序，使用較多。li裡面可以包含任何標籤
`<li></li>`	有序標籤	裡面只能包含li，有順序，使用相對較少。li裡面可以包含任何標籤
`<dl><dl>`	自定義列表	裡面只能包含dt和dd。dt和dd裡面可以放任何標籤

2.1 無序列表

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

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


<ul>
    <li>榴蓮</li>
    <li>臭豆腐</li>
    <li>鯡魚罐頭</li>
</ul>

注意：

無序列表的各個列表項之間沒有順序級別之分，是並列的。
<ul>\</ul> 中只能巢狀 <li>\</li>，直接在 <ul>\</ul> 標籤中輸入其他標籤或者文字的做法是不被允許的
<li> 與 </li> 之間相當於一個容器，可以容納所有元素。
無序列表會帶有自己的樣式屬性，但在實際使用時，我們會使用 CSS 來設定。

2.2 有序列表

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

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

<ol>\</ol>中只能巢狀<li>\</li>，直接在<ol>\</ol>標籤中輸入其他標籤或者文字的做法是不被允許的。
<li> 與 </li>之間相當於一個容器，可以容納所有元素。
有序列表會帶有自己樣式屬性，但在實際使用時，我們會使用 CSS 來設定。

2.3 自定義列表

自定義列表的使用場景:
自定義列表常用於對術語或名詞進行解釋和描述，定義列表的列表項前沒有任何專案符號。

在 HTML 標籤中，<dl> 標籤用於定義描述列表（或定義列表），該標籤會與 <dt>（定義專案/名字）和<dd>（描述每一個專案/名字）一起使用。
其基本語法如下：

<dl>
    <dt>名詞1</dt>
    <dd>名詞1解釋1</dd>
    <dd>名詞1解釋2</dd>
</dl>

<dl></dl> 裡面只能包含 <dt> 和 <dd>。
<dt> 和 <dd>個數沒有限制，經常是一個<dt> 對應多個<dd>。

三. 表單標籤

使用表單目的是為了收集使用者資訊。

在我們網頁中，我們也需要跟使用者進行互動，收集使用者資料，此時就需要表單。

網頁中的表單展示

3.1 表單的組成

在 HTML 中，一個完整的表單通常由表單域、表單控制元件（也稱為表單元素）和提示資訊3個部分構成。

3.2 表單域

表單域是一個包含表單元素的區域。
在 HTML 標籤中， <form></form> 標籤用於定義表單域，以實現使用者資訊的收集和傳遞。

<form> 會把它範圍內的表單元素資訊提交給伺服器

<form action=“url地址” method=“提交方式” name=“表單域名稱">
各種表單元素控制元件
</form>

常用屬性:

屬性	屬性值	作用
action	url地址	用於指定接收並處理表單資料的伺服器程式的url地址。
method	get／post	用於設定表單資料的提交方式，其取值為get或post。
name	名稱	用於指定表單的名稱，以區分同一個頁面中的多個表單域。

3.3 表單控制元件

3.3.1 <input>標籤

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

input type="屬性值" />

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

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

屬性值	描述
button	定義可點選按鈕（多數情況下，用於通過JavaScript啟動指令碼）
checkbox	定義複選框。
file	定義輸入欄位和＂瀏覽＂按鈕，供檔案上傳。
hidden	定義隱藏的輸入欄位。
image	定義影象形式的提交按鈕。
password	定義密碼欄位。該欄位中的字元被掩碼。
radio	定義單選按鈕。
reset	定義重置按鈕。重置按鈕會清除表單中的所有資料。
submit	定義提交按鈕。提交按鈕會把表單資料傳送到伺服器。
text	定義單行的輸入欄位，使用者可在其中輸入文字。預設寬度為20個字元。

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

屬性	屬性值	描述
name	由使用者自定義	定義input元素的名稱。
value	由使用者自定義	規定input元素的值。
checked	checked	規定此input元素首次載入時應當被選中。
maxlength	正整數	規定輸入欄位中的字元的最大長度。

name 和value 是每個表單元素都有的屬性值,主要給後臺人員使用.
name 表單元素的名字, 要求單選按鈕和複選框要有相同的name值.
checked屬性主要針對於單選按鈕和複選框, 主要作用一開啟頁面,就要可以預設選中某個表單元素.
maxlength 是使用者可以在表單元素輸入的最大字元數, 一般較少使用.

小問答：

有些表單元素想剛開啟頁面就預設顯示幾個文字怎麼做?
```
使用者名稱: <input type="text" value="請輸入使用者名稱" /> 
```
答: 可以給這些表單元素設定 value 屬性=“值”
頁面中的表單元素很多，如何區別不同的表單元素?

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

答: name 屬性：當前 input 表單的名字，後臺可以通過這個 name 屬性找到這個表單。頁面中的表單很多，name 的主要作用就是用於區別不同的表單。

name 屬性後面的值，是自定義的
radio (或者checkbox）如果是一組，必須給他們命名相同的名字

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

. 如果頁面一開啟就讓某個單選按鈕或者複選框是選中狀態?

答: checked 屬性：表示預設選中狀態。用於單選按鈕和複選按鈕

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

如何讓input表單元素展示不同的形態? 比如單選按鈕或者文字框

答: type屬性：type屬性可以讓input表單元素設定不同的形態

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

總結：

<form action="xxx.php" method="get">
         <!-- text 文字框 使用者可以裡面輸入任何文字 -->
        使用者名稱: <input type="text" name="username" value="請輸入使用者名稱" maxlength="6">   <br> 
        <!-- password 密碼框 使用者看不見輸入的密碼 -->
        密碼: <input type="password" name="pwd" >  <br> 
        <!-- radio 單選按鈕  可以實現多選一 -->
        <!-- name 是表單元素名字 這裡性別單選按鈕必須有相同的名字name 才可以實現多選1 -->
        <!-- 單選按鈕和複選框可以設定checked 屬性, 當頁面開啟的時候就可以預設選中這個按鈕 -->
        性別: 男 <input type="radio" name="sex" value="男"> 女  <input type="radio" name="sex" value="女" checked="checked"> 人妖   <input type="radio" name="sex" value="人妖">   <br> 
        <!-- checkbox 複選框  可以實現多選 -->
        愛好: 吃飯 <input type="checkbox" name="hobby" value="吃飯"> 睡覺 <input type="checkbox" name="hobby">  打豆豆 <input type="checkbox" name="hobby" checked="checked"> 
        <br> 
        <!-- 點選了提交按鈕,可以把 表單域 form 裡面的表單元素 裡面的值 提交給後臺伺服器 -->
        <input type="submit" value="免費註冊">
        <!-- 重置按鈕可以還原表單元素初始的預設狀態 -->
        <input type="reset" value="重新填寫">
        <!-- 普通按鈕 button  後期結合js 搭配使用-->
        <input type="button" value="獲取簡訊驗證碼"> <br>
        <!-- 檔案域 使用場景 上傳檔案使用的 -->
        上傳頭像:  <input type="file" >
</form>

3.3.2 <label>標籤

<label> 標籤為 input 元素定義標註（標籤）。
<label> 標籤用於繫結一個表單元素, 當點選<label> 標籤內的文字時，瀏覽器就會自動將焦點(游標)轉到或者選擇對應的表單元素上,增加選取範圍，用來增加使用者體驗.
語法：

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

核心：標籤的 for 屬性應當與相關元素的 id 屬性相同。

3.3.3 <select>標籤

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

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

語法：

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

<select> 中至少包含一對<option> 。
在<option> 中定義 selected =“ selected " 時，當前項即為預設選中項。

3.3.4 <textarea>標籤

當用戶輸入內容較多的情況下，我們就不能使用文字框表單了，此時我們可以使用 <textarea> 標籤。
在表單元素中，<textarea> 標籤是用於定義多行文字輸入的控制元件。

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

語法：

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

通過 <textarea> 標籤可以輕鬆地建立多行文字輸入框。
cols=“每行中的字元數” ，rows=“顯示的行數”，我們在實際開發中不會使用，都是用 CSS 來改變大小。

表格，列表，表單綜合案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>綜合案例-註冊頁面</title>
</head>
<body>
    <h4>青春不常在，抓緊談戀愛</h4>
    <table width="600" >
        <!-- 第一行 -->
        <tr>
            <td>性別:</td>
            <td>
                <input type="radio" name="sex" id="nan"> <label for="nan"> <img src="images/man.jpg" > 男 </label>  
                <input type="radio" name="sex" id="nv"> <label for="nv"><img src="images/women.jpg" > 女</label> 
            </td>
        </tr>
        <!-- 第二行 -->
        <tr>
            <td>生日:</td>
            <td>
                <select>
                    <option>--請選擇年份--</option>
                    <option>2001</option>
                    <option>2002</option>
                    <option>2003</option>
                </select>
                <select>
                        <option>--請選擇月份--</option>
                        <option>1</option>
                        <option>2</option>
                        <option>3</option>
                </select>
                <select>
                        <option>--請選擇日--</option>
                        <option>1</option>
                        <option>2</option>
                        <option>3</option>
                </select>
        
            </td>
        </tr>
        <!-- 第三行 -->
        <tr>
            <td>所在地區</td>
            <td><input type="text" value="北京思密達"></td>
        </tr>
        <!-- 第四行 -->
        <tr>
            <td>婚姻狀況:</td>
            <td>
                    <input type="radio" name="marry" checked="checked">未婚  <input type="radio" name="marry">  已婚  <input type="radio" name="marry"> 離婚
            </td>
        </tr>
         <!-- 第五行 -->
         <tr>
             <td>學歷:</td>
             <td><input type="text" value="博士後"></td>
         </tr>
          <!-- 第六行 -->
        <tr>
            <td>喜歡的型別:</td>
            <td>
                <input type="checkbox" name="love" > 嫵媚的 
                <input type="checkbox" name="love" > 可愛的 
                <input type="checkbox" name="love" > 小鮮肉 
                <input type="checkbox" name="love" > 老臘肉 
                <input type="checkbox" name="love"  checked="checked"> 都喜歡 
            </td>
        </tr>
         <!-- 第七行 -->
        <tr>
            <td>個人介紹</td>
            <td>
                <textarea>個人簡介</textarea>
            </td>
        </tr>
        <!-- 第八行 -->
        <tr>
            <td></td>
            <td>
                <input type="submit" value="免費註冊" >
            </td>
        </tr>
        <tr>
                <td></td>
                <td>
                    <input type="checkbox"  checked="checked">    我同意註冊條款和會員加入標準
                </td>
        </tr>
        <tr>
                <td></td>
                <td>
                    <a href="#" > 我是會員，立即登入</a>
                </td>
        </tr>
        <tr>
                <td></td>
                <td>
                    <h5>我承諾</h5>
                    <ul>
                        <li>年滿18歲、單身</li>
                        <li>抱著嚴肅的態度</li>
                        <li>真誠尋找另一半</li>
                    </ul>
                </td>
        </tr>
           
    </table>
</body>
</html>

四. HTML5新特性

HTML5 的新增特性主要是針對於以前的不足，增加了一些新的標籤、新的表單和新的表單屬性等。
這些新特性都有相容性問題，基本是 IE9+ 以上版本的瀏覽器才支援，如果不考慮相容性問題，可以大量使用這些新特性。
宣告：

新特性增加了很多，但是我們專注於開發常用的新特性。
基礎班我們講解部分新特性，到了就業班還會繼續講解其他新特性。

1.1 新增的語義化標籤

以前佈局，基本用 div 來做。div 對於搜尋引擎來說，是沒有語義的。

<div class=“header”> </div>
<div class=“nav”> </div>
<div class=“content”> </div>
<div class=“footer”> </div>

1.2 新增video標籤

HTML5 在不使用外掛的情況下，也可以原生的支援視訊格式檔案的播放，當然，支援的格式是有限的。

語法：

<video src="檔案地址" controls="controls"></video>

 <video controls="controls" width="300">
 <source src="move.ogg" type="video/ogg" >
 <source src="move.mp4" type="video/mp4" >
 您的瀏覽器暫不支援 <video> 標籤播放視訊
 </ video >

常見屬性：

屬性	值	描述
autoplay	autoplay	視訊就堵自動幅放(谷歐劉覽器需要新增muted來解決自動插放問題)
controls	controls	向用戶顯示播放控制元件
width	pixels(畫素)	設定播放器寬度
height	pixels(畫素)	設定播放器高度
loop	loop	插放完是香繼續插放該視訊,迴圈插放
preload	aut0(預先載入視訊) none(不應載入視訊)	規定是否預載入視須如果有了autoplay就忽略該屬性)
src	url	視訊ur地址
poster	Imgurl	載入等待的畫面圖片
muted	muted	靜音播放

1.3 新增audio標籤

瀏貸器	MP3	Wav	Ogg
Intemet Explorer	YES	NO	NO
Chrome	YES	YES	YES
Firefox	YES	YES	YES
Safari	YES	YES	NO
Opera	YES	YES	YES

語法：

<audio src="檔案地址" controls="controls"></audio>

 <source src="happy.mp3" type="audio/mpeg" >
 <source src="happy.ogg" type="audio/ogg" >
 您的瀏覽器暫不支援 <audio> 標籤。
 </ audio>

常見屬性

屬性	值	描述
autoplay	autoplay	如果出現該屬性,則音訊在就緒後馬上播放。
controls	controls	如果出現該屬性,則向用戶顯示控制元件,比如播放按鈕。
loop	loop	如果出現該屬性,則每當音訊結束時重新開始插放。
src	url	要播放的音訊的URL,

谷歌瀏覽器把音訊和視訊自動播放都禁止了。

總結：

音訊標籤和視訊標籤使用方式基本一致
瀏覽器支援情況不同
谷歌瀏覽器把音訊和視訊自動播放禁止了
我們可以給視訊標籤新增 muted 屬性來靜音播放視訊，音訊不可以（可以通過JavaScript解決）
視訊標籤是重點，我們經常設定自動播放，不使用 controls 控制元件，迴圈和設定大小屬性

1.4 新增的 input 型別

屬性值	說明
type="email"	限制使用者輸入必須為Email型別
type="url"	限制使用者輸入必須為URL型別
type="date"	限制使用者輸入必須為日期型別
type="time"	限制使用者輸入必須為時間型別
type="month"	限制使用者輸入必須為月型別
type="week"	限制使用者輸入必須為周型別
type="number"	限制使用者輸入必須為數字型別
type="tel"	手機號碼
type="search"	搜尋框
type="color"	生成一個顏色選擇表單

1.5 新增表單屬性

屬性	值	說明
required	required	表單擁有該屬性表示其內容不能為空,必填
placeholder	提示文字	表單的提示資訊,存在預設值將不顯示
autofocus	autofocus	自動聚焦屬性,頁面載入完成自動聚焦到指定表單
autocomplete	off /on	當用戶在欄位開始鍵入時,瀏覽器基於之前鍵入過的值,應該顯示出在欄位中填寫的選項。預設已經開啟,如autocomplete="on",關閉autocomplete="off 需要放在表單內,同時加上name屬性,同時成功提交
multiple	multiple	可以多選檔案提交

可以通過以下設定方式修改placeholder裡面的字型顏色:
input:placeholder{
	color:pink;
}