《圖解HTML》第四節(jié) HTML標簽分類與實踐

通過上一節(jié)的了解，我們知道html標簽是構(gòu)建網(wǎng)頁結(jié)構(gòu)的關(guān)鍵晴弃，而且它的種類繁多掩幢。為了更好的了解和使用它們，本章節(jié)將在功能上對它們進行分類上鞠，了解這些標簽的功能际邻。如果有分類不太精準的地方，還望不吝指正芍阎。
當(dāng)然這些標簽并不是都需要記住世曾，最初只需要記住常用的即可。隨著不斷的使用谴咸，慢慢就會熟悉大部分標簽的轮听。

帶[HTML5]標識的標簽表示是HTML5新添加的標簽。

文檔基礎(chǔ)標簽

<!DOCTYPE> 定義文檔類型岭佳。
<html> 定義 HTML 文檔血巍。
<head> 定義關(guān)于文檔的信息。
<title> 定義文檔的標題珊随。
<body> 定義文檔的主體述寡。
`` 定義注釋。

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文檔標題</title>
</head>
<body>
    <!-- 注釋內(nèi)容 -->
</body>
</html>

格式標簽

<h1> to <h6> 定義 HTML 標題叶洞。
<p> 定義段落鲫凶。
<br> 定義簡單的折行。
<hr> 定義水平線衩辟。
<acronym>: 定義只取首字母的縮寫螟炫。
<abbr>: 定義縮寫。
<address> 定義文檔作者或擁有者的聯(lián)系信息艺晴。
<b> 定義粗體文本不恭。
<bdo> 定義文字方向叶雹。
<big> 定義大號文本。
<blockquote> 定義長的引用换吧。
<center> 不贊成使用折晦。定義居中文本。
<cite> 定義引用(citation)沾瓦。
<code> 定義計算機代碼文本满着。
<del> 定義被刪除文本。
<dfn> 定義定義項目贯莺。
<em> 定義強調(diào)文本风喇。
<font> 不贊成使用。定義文本的字體缕探、尺寸和顏色
<i> 定義斜體文本魂莫。
<ins> 定義被插入文本。
<kbd> 定義鍵盤文本爹耗。
<s> 不贊成使用耙考。定義加刪除線的文本。
<samp> 定義計算機代碼樣本潭兽。
<small> 定義小號文本倦始。
<strike> 不贊成使用。定義加刪除線文本山卦。
<strong> 定義語氣更為強烈的強調(diào)文本鞋邑。
<sup> 定義上標文本。
<sub> 定義下標文本账蓉。
<tt> 定義打字機文本枚碗。
<u> 不贊成使用。定義下劃線文本铸本。
<var> 定義文本的變量部分视译。
<q>定義短的引用。
<pre> 定義預(yù)格式文本归敬。
<time>[HTML5] 定義日期/時間酷含。目前所有主流瀏覽器都不支持 <time> 標簽
<mark>[HTML5] 定義有記號的文本。
<meter>[HTML5] 定義預(yù)定義范圍內(nèi)的度量汪茧。
<progress>[HTML5] 定義任何類型的任務(wù)的進度椅亚。
<rp>[HTML5] 定義若瀏覽器不支持 ruby 元素顯示的內(nèi)容。
<rt>[HTML5] 定義 ruby 注釋的解釋舱污。
<ruby>[HTML5] 定義 ruby 注釋呀舔。
<bdi>[HTML5] 定義文本的文本方向，使其脫離其周圍文本的方向設(shè)置。
<wbr>[HTML5] 定義可能的換行符媚赖。

示例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <!-- h1 to h6 定義標題 -->
    <h1>h1標題</h1>
    <h2>h2標題</h2>
    <h3>h3標題</h3>
    <h4>h4標題</h4>
    <h5>h5標題</h5>
    <h6>h6標題</h6>

    <!-- p定義段落 -->
    <p>p標簽：這是一個段落內(nèi)容</p>
    <!-- <br> 定義簡單的折行霜瘪。 -->
    <br>
    <p>p標簽：這是另一個段落內(nèi)容,上面使用了br折行，下面有一個水平線</p>
    <hr>
    <!-- <acronym>: 定義只取首字母的縮寫惧磺， abbr： 定義縮寫颖对，鼠標移入，會顯示title內(nèi)容 -->
    <acronym title="World Wide Web">WWW</acronym>
    <abbr title="etcetera">etc.</abbr>

    <!-- <address> 定義文檔作者或擁有者的聯(lián)系信息磨隘。 -->
    <address>
        地址 <a >www.iotzzh.com</a>.<br>
    </address>

    <b>加粗字體</b>

    <big>大號字體</big>
    <blockquote>
        這是一個長的引用缤底，這是一個長的引用，這是一個長的引用番捂，這是一個長的引用个唧，這是一個長的引用，這是一個長的引用设预，
        這是一個長的引用徙歼，這是一個長的引用，這是一個長的引用鳖枕，這是一個長的引用魄梯，這是一個長的引用，這是一個長的引用耕魄，
        這是一個長的引用，這是一個長的引用彭谁，這是一個長的引用吸奴，這是一個長的引用，這是一個長的引用缠局，這是一個長的引用
    </blockquote>

    <cite>標簽通常表示它所包含的文本對某個參考文獻的引用则奥，比如書籍或者雜志的標題。按照慣例狭园，引用的文本將以斜體顯示读处。</cite>
    <br>
    <code>function(){//這里是code}</code>
    <br>
    <del>被刪除的文本</del>
    <br>
    <dfn>定義項目</dfn><br>
    <em>強調(diào)文本</em><br>
    <i>斜體文字</i><br>
    <ins>被插入文本</ins><br>
    <kbd>鍵盤文本abcd</kbd><br>
    <samp>計算機代碼樣本code</samp><br>
    <small>小號文本</small><br>
    <sup>上標文本</sup>
    <strong>語氣更為強烈的強調(diào)文本</strong>
    <sub>下標文本</sub><br>
    <tt>打字機文本 abcd</tt><br>
    <var>var：文本的變量部分</var>
    <q>定義短的引用</q>
    <pre>定義預(yù)格式文本</pre>
    <p>這是一個被<mark>mark</mark> 的標簽</p>
    <progress value="60" max="100"></progress>
<br>
    <!-- <bdo> 定義文字方向:ltr,rtl -->
    <bdo dir="rtl">定義文字方向</bdo><br>
    <!-- <bdi> 定義文本方向:ltr,rtl，auto -->
    <bdo dir="rtl">定義 <bdi dir="ltr">文本它的文本</bdi>方向</bdo>

    <p>這是在測試wbr標簽唱矛，可能的換行符罚舱，如果文字太長，你想指定文本換行的位置绎谦，例如Zhang<wbr>Zhonghua, 那么它就會在該換行的時候管闷，在Zhang后面選擇換行，而不是對整個名字都換行</wbr></p>
</body>

</html>

運行結(jié)果

表單標簽

<form> 定義供用戶輸入的 HTML 表單窃肠。
<input> 定義輸入控件包个。
<textarea> 定義多行的文本輸入控件。
<button> 定義按鈕冤留。
<select> 定義選擇列表（下拉列表）碧囊。
<optgroup> 定義選擇列表中相關(guān)選項的組合树灶。
<option> 定義選擇列表中的選項。
<label> 定義 input 元素的標注糯而。
<fieldset> 定義圍繞表單中元素的邊框天通。
<legend> 定義 fieldset 元素的標題。
<isindex> 不贊成使用歧蒋。定義與文檔相關(guān)的可搜索索引土砂。
<datalist>[HTML5] 定義下拉列表。
<keygen>[HTML5] 定義生成密鑰谜洽。
<output>[HTML5] 定義輸出的一些類型萝映。

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>form練習(xí)</h1>
    <form action="">
        <br><label for=""></label>Text:</label> <input type="text">
        <br><label for="">Button:</label><input type="button" value="inputButton">
        <br><label for="">Checkbox:</label><input type="checkbox">
        <br><label for="">Color:</label><input type="color">
        <br><label for="">Date:</label><input type="date">
        <br><label for="">DateTime:</label><input type="datetime" value="2020-09-17T10:55Z">
        <br><label for="">DateTime-Local:</label><input type="datetime-local">
        <br><label for="">Email:</label><input type="email" value="956159241@qq.com">
        <br><label for="">File:</label><input type="file">
        <br><label for="">Hidden:</label><input type="hidden">
        <br><label for="">Image:</label><input type="image" src='../../img/pic1.png'>
        <br><label for="">Month:</label><input type="month">
        <br><label for="">Number:</label><input type="number">
        <br><label for="">Password:</label><input type="password">
        <br><label for="">Range:</label><input type="range">
        <br><label for="">Radio:</label><input type="radio">
        <br><label for="">Reset:</label><input type="reset">
        <br><label for="">Search:</label><input type="search">
        <br><label for="">Time:</label><input type="time">
        <br><label for="">Url:</label><input type="url" value="http://www.iotzzh.com">
        <br><label for="">Week:</label><input type="week">
    </form>
</body>
</html>

運行結(jié)果

框架標簽

<frame> 定義框架集的窗口或框架。
<frameset> 定義框架集阐虚。
<noframes> 定義針對不支持框架的用戶的替代內(nèi)容序臂。
<iframe> 定義內(nèi)聯(lián)框架。

frameset示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<frameset cols="25%,50%,25%">
    <frame src="./表單標簽.html" />
    <frame src="./格式標簽.html" />
    <frame src="http://www.iotzzh.com" />
</frameset>
</html>

運行結(jié)果

iframe示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <iframe src="http://www.iotzzh.com" width="500px" height="500px" frameborder="0"></iframe>
</body>
</html>

運行結(jié)果

圖像標簽

<img> 定義圖像实束。
<map> 定義圖像映射奥秆。
<area> 定義圖像地圖內(nèi)部的區(qū)域。
<canvas>[HTML5] 定義圖形咸灿。
<figcaption>[HTML5] 定義 figure 元素的標題构订。
<figure>[HTML5] 定義媒介內(nèi)容的分組，以及它們的標題避矢。

示例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <img src="../../img/pic1.png" border="0" usemap="#planetmap" alt="Planets" alt="這是一張圖片" />
    <!-- map：帶有可點擊區(qū)域的圖像映射 -->
    <map name="planetmap" id="planetmap">
        <!-- shap:default\rect\circ\poly -->
        <area shape="circle" coords="60,60,10"  target="_blank" alt="text1" />

        <area shape="circle" coords="50,50,10"  target="_blank" alt="text2" />

        <area shape="rect" coords="0,0,50,50"  target="_blank" alt="text3" />
    </map>

    <p><b>注釋：</b>img 元素中的 "usemap" 屬性引用 map 元素中的 "id" 或 "name" 屬性（根據(jù)瀏覽器）悼瘾，所以我們同時向 map 元素添加了 "id" 和 "name" 屬性。</p>

    <!-- canvas -->
    <h3>canvas畫圖：</h3>
    <canvas id="c2d" width="300" height="150">瀏覽器不支持canvas</canvas>
    <script>      
        const canvas2d = document.querySelector('#c2d');
        const ctx2d = canvas2d.getContext('2d');
        // 繪制矩形
        ctx2d.fillRect(30,50,100,50);
        ctx2d.strokeRect(100,30,100,50);
        ctx2d.clearRect(101,51,28,28);
    </script>

<!-- figure的使用审胸，與p或者span進行對邊  -->
  <figure>
    <figcaption>圖片標題</figcaption>
    <img src="../../img/pic1.png" width="100" height="100" />
    <figcaption>圖片標題尾部</figcaption>
  </figure>
  <p>圖片標題</p>
  <img src="../../img/pic1.png" width="100" height="100" />
  <p>圖片標題尾部</p>

  <span>圖片標題</span>
  <img src="../../img/pic1.png" width="100" height="100" />
  <span>圖片標題尾部</span>

</body>

</html>

運行結(jié)果

音頻/視頻標簽

<audio>[HTML5] 定義聲音內(nèi)容亥宿。
<source>[HTML5] 定義媒介源。
<track>[HTML5] 定義用在媒體播放器中的文本軌道砂沛。
<video>[HTML5] 定義視頻烫扼。

示例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <audio controls>
        <source src="../../asset/4.mp3" type="audio/mpeg">
      Your browser does not support the audio element.
     </audio> 

     <video src="../../asset/4.mp4" width="320" height="240" controls="controls">
        Your browser does not support the video tag.
        </video>
</body>

</html>

運行結(jié)果

鏈接標簽

<a> 定義錨。
<link> 定義文檔與外部資源的關(guān)系碍庵。
<nav>[HTML5] 定義導(dǎo)航鏈接映企。

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" >
</head>
<body>
    <a >Home</a>
    <nav>
        <a >Home</a>
        <a >Previous</a>
        <a >Next</a>
    </nav>
</body>
</html>

列表標簽

<ul> 定義無序列表。
<ol> 定義有序列表静浴。
<li> 定義列表的項目卑吭。
<dir> 不贊成使用。定義目錄列表马绝。
<dl> 定義定義列表豆赏。
<dt> 定義定義列表中的項目。
<dd> 定義定義列表中項目的描述。
<menu> 定義命令的菜單/列表掷邦。
<menuitem> 定義用戶可以從彈出菜單調(diào)用的命令/菜單項目白胀。
<command>[HTML5] 定義命令按鈕。
示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h3>定義無序列表</h3>
    <ul>
        <li>無序項目一</li>
        <li>無序項目二</li>
        <li>無序項目三</li>
    </ul>
    <h3>定義有序列表</h3>
    <ol>
        <li>有序項目一</li>
        <li>有序項目二</li>
        <li>有序項目三</li>
    </ol>
    <h3>定義定義列表</h3>
    <dl>
        <dt>數(shù)學(xué)</dt>
        <dd>使人聰慧</dd>
        <dt>哲學(xué)</dt>
        <dd>使人深刻</dd></dd>
    </dl>
    <h3>menu/menuitem/command只在火狐瀏覽器下起作用抚岗，不做演示</h3>
</body>
</html>

運行結(jié)果

表格標簽

<table> 定義表格
<caption> 定義表格標題或杠。
<th> 定義表格中的表頭單元格。
<tr> 定義表格中的行宣蔚。
<td> 定義表格中的單元向抢。
<thead> 定義表格中的表頭內(nèi)容。
<tbody> 定義表格中的主體內(nèi)容胚委。
<tfoot> 定義表格中的表注內(nèi)容（腳注）挟鸠。
<col> 定義表格中一個或多個列的屬性值。
<colgroup> 定義表格中供格式化的列組亩冬。

示例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <h3>表格標簽</h3>
    <table width="100%" border="1">
        <col align="left" />
        <col align="left" />
        <col align="right" />
        <caption>表格的標題</caption>
        <thead>
            <tr>
                <th>表頭單元格一</th>
                <th>表頭單元格二</th>
                <th>表頭單元格三</th>
            </tr>
        </thead>

        <tbody>
            <tr>
                <td>單元格一</td>
                <td>單元格二</td>
                <td>單元格三</td>
            </tr>
        </tbody>

        <tfoot>
            <tr>
                <td>表尾單元格一</td>
                <td>表尾單元格二</td>
                <td>表尾單元格三</td>
            </tr>
        </tfoot>

    </table>
</body>

</html>

表格標簽

樣式/節(jié)點標簽

<style> 定義文檔的樣式信息艘希。
<div> 定義文檔中塊級節(jié)點。
<span> 定義文檔中行內(nèi)元素節(jié)點硅急。
<header>[HTML5] 定義 section 或 page 的頁眉覆享。
<footer>[HTML5] 定義 section 或 page 的頁腳。
<section>[HTML5] 定義 section营袜。
<article>[HTML5] 定義文章撒顿。
<aside>[HTML5] 定義頁面內(nèi)容之外的內(nèi)容。
<details>[HTML5] 定義元素的細節(jié)荚板。
<dialog>[HTML5] 定義對話框或窗口凤壁。
<summary>[HTML5] 為 <details> 元素定義可見的標題。

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 100px;
            height: 100px;
            background-color: blueviolet;
        }
        span {
            width: 100px;
            height: 100px;
            background-color: yellow;
        }
    </style>
</head>
<body>
    <div>塊級元素</div>
    <div>塊級元素</div>
    <span>行內(nèi)元素</span>
    <span>行內(nèi)元素</span>
    <section>
        <header>頁眉</header>
        <article>文章</article>
        <aside>定義頁面內(nèi)容之外的內(nèi)容</aside>
        <footer>頁腳</footer>
    </section>

    <details>
        <summary>為 details 元素定義可見的標題啸驯。</summary>
        定義元素的細節(jié)
    </details>

    <dialog>定義對話框或窗口</dialog>
</body>
</html>

運行結(jié)果

元信息標簽

<meta> 定義關(guān)于 HTML 文檔的元信息客扎。
<base> 定義頁面中所有鏈接的默認地址或默認目標祟峦。
<basefont> 不贊成使用罚斗。定義頁面中文本的默認字體、顏色或尺寸宅楞。

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="小張微站" content="HTML,ASP,PHP,SQL">
    <title>小張微站</title>
    <base  />
    <base target="_blank" />
</head>
<body>
    <h3>meta的定義和用法</h3>
    <h6>
        <meta> 元素可提供有關(guān)頁面的元信息（meta-information）针姿，比如針對搜索引擎和更新頻度的描述和關(guān)鍵詞。
<br>
        <meta> 標簽位于文檔的頭部厌衙，不包含任何內(nèi)容距淫。<meta> 標簽的屬性定義了與文檔相關(guān)聯(lián)的名稱/值對。
    </h6>

    <a href="">已定義跳轉(zhuǎn)鏈接婶希，且使用_blank方式跳轉(zhuǎn)到http://www.iotzzh.com</a>
</body>
</html>

運行結(jié)果

編程相關(guān)標簽

<script> 定義客戶端腳本榕暇。
<noscript> 定義針對不支持客戶端腳本的用戶的替代內(nèi)容。
<applet> 不贊成使用。定義嵌入的 applet彤枢。
<embed>[HTML5] 為外部應(yīng)用程序（非 HTML）定義容器狰晚。
<object> 定義嵌入的對象。
<param>定義對象的參數(shù)缴啡。

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <noscript></noscript>
</head>
<body>
    <div>盒子</div>
    <script>
        const box = document.querySelector('div');
        box.style.width = '100px';
        box.style.height = '100px';
        box.style.backgroundColor = 'red';
    </script>
    <noscript>Your browser does not support JavaScript!</noscript>
</body>
</html>

運行結(jié)果

個別標簽沒有展示示例壁晒，有些是不推薦使用的，有些是未被各大瀏覽器采用的標簽业栅。除此之外秒咐，以上便是目前可使用的全部標簽了，雖然很多時候div,span就足以完成你想要的界面碘裕，但是如果能讓標簽更具語義化携取，標簽自身自帶樣式，省去你寫不必要的css娘汞，這樣子豈不是更好歹茶？

以上便是HTML標簽的一個基本的分類和使用了，當(dāng)然不同的標簽內(nèi)還有一些獨有的屬性在這就不一一詳盡說明了你弦。這里的實踐這是對每個標簽有個基本的認知惊豺，若想知道的更多，可以參考W3C School:https://www.w3school.com.cn/html/index.asp