目錄

前言

標(biāo)題標(biāo)簽

段落標(biāo)簽

換行標(biāo)簽和水平線標(biāo)簽

?文本格式化標(biāo)簽

圖像標(biāo)簽

超鏈接標(biāo)簽

多媒體標(biāo)簽

列表標(biāo)簽

無(wú)序列表

有序列表

表格

合并單元格

表單

無(wú)語(yǔ)義的布局標(biāo)簽

字符實(shí)體

前言

當(dāng)今互聯(lián)網(wǎng)時(shí)代，網(wǎng)頁(yè)是我們獲取信息、交流和展示自己的重要渠道之一。而HTML（超文本標(biāo)記語(yǔ)言）作為構(gòu)建網(wǎng)頁(yè)的基礎(chǔ)，學(xué)習(xí)掌握HTML標(biāo)簽成為了必不可少的技能。?

HTML基本標(biāo)簽

標(biāo)題標(biāo)簽

<h1>~<h6>：這是用來(lái)定義標(biāo)題的標(biāo)簽，其級(jí)別從<h1>到<h6>遞減。

示例：

<h1>一級(jí)標(biāo)題</h1>
<h2>二級(jí)標(biāo)題</h2>
<h3>三級(jí)標(biāo)題</h3>
<h4>四級(jí)標(biāo)題</h4>
<h5>五級(jí)標(biāo)題</h5>
<h6>六級(jí)標(biāo)題</h6>

預(yù)覽：?

段落標(biāo)簽

<p>：這個(gè)標(biāo)簽用于定義一個(gè)段落。通常用于包裹一段文字或內(nèi)容，并按照段落的方式進(jìn)行顯示。

示例：?

<P>這是一個(gè)段落。</P>
<p>江湖問路不問心，問心能有幾分真？
   自古深情留不住，唯有謊言得人心。
   灑盡人間相思淚，斬?cái)嗉t塵萬(wàn)縷情。
   從此天涯多一客，孤舟獨(dú)釣一人行。
</p>

?預(yù)覽：

換行標(biāo)簽和水平線標(biāo)簽

<br>：該標(biāo)簽用于在文本中插入一個(gè)換行符，讓文本在當(dāng)前位置進(jìn)行換行。它是一個(gè)單標(biāo)簽，沒有閉合標(biāo)簽。

<hr>：該標(biāo)簽用于插入一條水平線，常用于分隔不同區(qū)塊或段落之間。它也是一個(gè)單標(biāo)簽，沒有閉合標(biāo)簽。

示例：

這是一行文字。<br>
這是另一行文字。


<P>這是第一段內(nèi)容。</P>
<hr>
<p>這是第二段內(nèi)容。</p>

預(yù)覽：

?文本格式化標(biāo)簽

<strong>、<em>、<ins>、<del>等標(biāo)簽更語(yǔ)義化，推薦使用。

<strong> 或?<b>：該標(biāo)簽用于定義強(qiáng)調(diào)文本，通常會(huì)使文本加粗顯示。

示例：

<p>這是<strong>重要的</strong>內(nèi)容。</p>

預(yù)覽：

?<em> 或?<i>：該標(biāo)簽用于強(qiáng)調(diào)文本，通常用于斜體顯示。

示例：

<P>這是<em>強(qiáng)調(diào)的</em>內(nèi)容。</P>

預(yù)覽：

<ins> 或?<u>：該標(biāo)簽用于定義下劃線文本，使文本帶有下劃線。

示例：

<p>這是<ins>下劃線的</ins>文本。</p>

預(yù)覽：

<del> 或?<s>：該標(biāo)簽用于定義刪除線文本，將文本顯示為刪除線樣式。

示例：

<p>這是<del>刪除的</del>文本。</p>

預(yù)覽：

<sup>：該標(biāo)簽用于定義上標(biāo)文本，將文本顯示在上方略高位置。

示例：

<p>讓 x <sup>2</sup>表示x的平方。</p>

預(yù)覽：

<sub>：該標(biāo)簽用于定義下標(biāo)文本，將文本顯示在下方略低位置。

示例：

<p>H <sub>2</sub>O表示水分子。</p>

預(yù)覽：

圖像標(biāo)簽

<img>：該標(biāo)簽用于插入圖片。它是一個(gè)單標(biāo)簽，不需要閉合。

圖片高度和寬度一般使用CSS來(lái)設(shè)置。?

示例：

<img src="..\images\小丑.jpg" alt="這是小丑" width="99" height="99" title="小丑">

預(yù)覽：?

無(wú)法顯示時(shí)：

超鏈接標(biāo)簽

<a>：該標(biāo)簽用于創(chuàng)建鏈接。

示例：

<a  target="_blank">這是一個(gè)外部鏈接</a>

預(yù)覽：

多媒體標(biāo)簽

<audio>：該標(biāo)簽用于嵌入音頻內(nèi)容。它可以將音頻文件播放給用戶，并提供控制音頻的各種功能。

示例：

<audio src="E:\音樂\把回憶拼好給你 - cici_.mp3" controls></audio>

預(yù)覽：

<video>：該標(biāo)簽用于嵌入視頻內(nèi)容。它可以在網(wǎng)頁(yè)上顯示和播放視頻，并提供一系列控制功能。

?示例：

<video src="E:\視頻\動(dòng)漫剪輯.mp4" controls width="300" height="200"></video>

預(yù)覽：

列表標(biāo)簽

無(wú)序列表

無(wú)序列表是HTML中用于顯示項(xiàng)目或事項(xiàng)列表的標(biāo)記。使用<ul>元素來(lái)創(chuàng)建無(wú)序列表，并在其中使用<li>表示每個(gè)列表項(xiàng)。

示例：

<ul>
    <li>第一項(xiàng)</li>
    <li>第二項(xiàng)</li>
    <li>第三項(xiàng)</li>
</ul>

預(yù)覽：

可以在<li>元素中使用任意的內(nèi)容，例如文本、圖像、鏈接等。對(duì)于復(fù)雜的列表，可以嵌套的<ul>列表放置在<li>元素內(nèi)部，以創(chuàng)建多級(jí)的層次結(jié)構(gòu)。

示例：

<ul>
    <li>水果</li>
    <ul>
        <li>橙子</li>
        <li>蘋果</li>
        <li>香蕉</li>
    </ul>

    <li>動(dòng)物</li>
    <ul>
        <li>雞</li>
        <li>貓</li>
        <li>狗</li>
    </ul>
</ul>

預(yù)覽：?

有序列表

有序列表是HTML中用于顯示按順序排列的項(xiàng)目或事項(xiàng)列表的標(biāo)記。使用<ol>元素來(lái)創(chuàng)建有序列表，并在其中使用<li>元素表示每個(gè)列表項(xiàng)。

示例：

<ol>
    <li>第一項(xiàng)</li>
    <li>第二項(xiàng)</li>
    <li>第三項(xiàng)</li>
</ol>

預(yù)覽：

與無(wú)序列表類似，可以在<li>元素中使用任何內(nèi)容，包括文本、圖像、鏈接等。也可以嵌套的<ol>列表創(chuàng)建多級(jí)的有序列表。

示例：

<ol>
    <li>水果</li>
    <ol>
        <li>蘋果</li>
        <li>香蕉</li>
        <li>橙子</li>
    </ol>

    <li>動(dòng)物</li>
    <ol>
        <li>雞</li>
        <li>貓</li>
        <li>狗</li>
    </ol>
</ol>

預(yù)覽：

表格

表格是HTML中用于展示數(shù)據(jù)和信息的標(biāo)記。

?<table>標(biāo)簽屬性：

• borber：設(shè)置表格邊框的寬度。
• cellpadding：設(shè)置單元格內(nèi)容與單元格邊框之間的空白距離。
• cellspacing：設(shè)置單元格直接的間距。

示例：

<table border="1" cellspacing="0">
    <caption>學(xué)生成績(jī)表</caption>
    <thead>
        <tr>
            <th>姓名</th>
            <th>數(shù)學(xué)成績(jī)</th>
            <th>語(yǔ)文成績(jī)</th>
            <th>英語(yǔ)成績(jī)</th>
        </tr>
    </thead>

    <tbody>
        <tr>
            <td>張三</td>
            <td>90</td>
            <td>85</td>
            <td>92</td>
        </tr>
        <tr>
            <td>李四</td>
            <td>78</td>
            <td>88</td>
            <td>82</td>
        </tr>
    </tbody>

    <tfoot>
        <tr>
            <td>總平均分：86.75</td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </tfoot>
</table>

預(yù)覽：

合并單元格

在表格中可以使用<th>和<td>的屬性colspan和rowspan來(lái)合并單元格。

colspan屬性：用于指定單元橫向合并的列數(shù)。

示例：

將上表中總平均分那一行四個(gè)單元格合并為一個(gè)單元格

<tfoot>
        <tr>
            <td colspan="4">總平均分：86.75</td>
        </tr>
</tfoot>

預(yù)覽：?

rowspan屬性：用于指定單元格縱向合并的行數(shù)。

示例：

將上表中英語(yǔ)成績(jī)那列，兩個(gè)單元格合并成一個(gè)

    <tbody>
        <tr>
            <td>張三</td>
            <td>90</td>
            <td>85</td>
            <td rowspan="2">92</td>
        </tr>
        <tr>
            <td>李四</td>
            <td>78</td>
            <td>88</td>
        </tr>
    </tbody>

預(yù)覽：

注意：合并單元格后一定要將多余的單元格刪掉，不然會(huì)出現(xiàn)下列情況：

表單

在HTML中表單（Form）用于收集用戶輸入的數(shù)據(jù)并將其提交到服務(wù)器進(jìn)行處理。

<form>：該標(biāo)簽用來(lái)定義一個(gè)包含表單元素的區(qū)域，將所有的表單控件放在<form>標(biāo)簽內(nèi)。

<input>：該標(biāo)簽用于接收用戶輸入的各種類型的數(shù)據(jù)，如文本、密碼、日期等。具體類型由type屬性指定。

<input>常用屬性：

• name：指定輸入字段的名稱，用于在提交表單時(shí)標(biāo)識(shí)該字段的值
• placeholder：提供對(duì)用戶信息預(yù)期輸入內(nèi)容的提示信息
• value：設(shè)置輸入字段的初始值
• required：表示該字段為必填項(xiàng)，在提交表單時(shí)需要進(jìn)行驗(yàn)證，默認(rèn)為非空字段。
• maxlength：限制輸入字段的最大長(zhǎng)度，超過指定長(zhǎng)度的字符將會(huì)被截?cái)唷?/li>
• checked：用于默認(rèn)選中復(fù)選框或單選按鈕。

示例：

文本框：<input type="text" placeholder="請(qǐng)輸入用戶名">
<br><br>
密碼輸入框：<input type="password" placeholder="請(qǐng)輸入密碼">
<br><br>
郵箱輸入框：<input type="email">
<br><br>
數(shù)字輸入框：<input type="number">
<br><br>
復(fù)選框：<input type="checkbox">
<br><br>
單選按鈕：<input type="radio" name="gender" checked>男
<input type="radio" name="gender">女
<br><br>
提交按鈕：<input type="submit">
<br><br>
文件上傳框：<input type="file">

預(yù)覽：

<select>和<option>：該標(biāo)簽用于創(chuàng)建下拉列表，<select>是下拉列表的整體，<option>是下拉列表的一個(gè)選項(xiàng)。

<select>標(biāo)簽屬性：

• name：指定表單控件的名稱，用于在提交表單時(shí)標(biāo)識(shí)該控件的值。
• size：設(shè)置下拉列表中可見的選項(xiàng)數(shù)目。
• multiple：表示是否允許選擇多個(gè)選項(xiàng)。

<option>標(biāo)簽屬性：

• value：指定選項(xiàng)的值。
• selected：指定默認(rèn)選項(xiàng)。
• disabled：表示選項(xiàng)是否禁用。

示例：

城市：
<select>
    <option>北京</option>
    <option>深圳</option>
    <option selected>上海</option>
    <option>廣州</option>
</select>

預(yù)覽：

<textarea>：該標(biāo)簽創(chuàng)建文本輸入域，允許用戶輸入多行文本。

<textarea>一些屬性：

• rows和cols：分別設(shè)置文本輸入域的顯示行數(shù)和列數(shù)?？梢酝ㄟ^調(diào)整這些屬性來(lái)控制文本框的大小。
• placeholder：設(shè)置一個(gè)占位符文本，作為用戶未輸入時(shí)文本輸入域內(nèi)的灰色提示文本。

示例：

<textarea cols="30" rows="5" placeholder="請(qǐng)輸入···"></textarea>

預(yù)覽：

<label>：該標(biāo)簽用于為表單控件定義標(biāo)簽文本，以便增強(qiáng)用戶界面的可用性和可訪問性。

示例：

用<label>標(biāo)簽綁定文字和表單控件的關(guān)系，增大表單控件的點(diǎn)擊范圍。

<!-- 寫法1：只包裹內(nèi)容，不包裹表單控件 -->
<input type="radio" id="man">
<label for="man">男</label>

<!-- 寫法2：包裹文字和表單控件 -->
<label><input type="radio">女</label>

預(yù)覽：?

這樣點(diǎn)擊文字也可以選中單選按鈕。

<button>：該標(biāo)簽用于創(chuàng)建一個(gè)可點(diǎn)擊的按鈕。它可以與JavaScript代碼一起使用，實(shí)現(xiàn)交互功能并響應(yīng)用戶的點(diǎn)擊事件。

<button>標(biāo)簽的一些屬性：

• type：指定按鈕的類型，默認(rèn)為"submit"。常用類型包括"submit"（提交表單，點(diǎn)擊后提交數(shù)據(jù)到后臺(tái)）、"reset"（重置表單，點(diǎn)擊后將表單控件恢復(fù)默認(rèn)值）和"button"（普通按鈕，默認(rèn)沒有功能，一般配和JavaScript使用）。
• name和value：用于將按鈕的名稱和值作為鍵值對(duì)提交到服務(wù)器或處理表單數(shù)據(jù)。

示例：

<button type="submit">提交</button>

預(yù)覽：

無(wú)語(yǔ)義的布局標(biāo)簽

<div>：該標(biāo)簽是HTML中的一個(gè)無(wú)語(yǔ)義的塊級(jí)元素，被用于將一組相關(guān)的內(nèi)容包裹在一個(gè)容器中。它通常用于布局和樣式的目的。

1.包裹內(nèi)容：可以使用<div>標(biāo)簽來(lái)包裹其他HTML元素或文本內(nèi)容，創(chuàng)建一個(gè)獨(dú)立的區(qū)塊。這使得可以對(duì)這個(gè)區(qū)塊進(jìn)行樣式、操作或布局上的調(diào)整。

示例：

<div>
    <h1>這是一個(gè)標(biāo)題。</h1>
    <p>這是一個(gè)段落。</p>
</div>

預(yù)覽：

2.劃分布局：<div>標(biāo)簽可以劃分頁(yè)面布局的不同部分，使其具有不同的樣式或行為。例如，可以將頁(yè)面分為頁(yè)眉、內(nèi)容區(qū)域和頁(yè)腳，每個(gè)部分用一個(gè)<div>標(biāo)簽包裹。

示例：

<div id="header">
    <!-- 頁(yè)眉內(nèi)容 -->
</div>

<div id="content">
    <!-- 內(nèi)容區(qū)域 -->
</div>

<div id="footer">
    <!-- 頁(yè)腳內(nèi)容 -->
</div>

3.CSS樣式選擇器容器：<div>標(biāo)簽經(jīng)常用作CSS選擇器的容器，通過為<div>添加類名或ID，可以通過CSS將樣式應(yīng)用到其中的內(nèi)容。

示例：

<div class="container">
    <h1>標(biāo)題</h1>
    <p>這是一個(gè)段落。</p>
</div>

<span>：該標(biāo)簽是HTML的一個(gè)內(nèi)聯(lián)元素，用于標(biāo)記文本中的小片段或行內(nèi)元素。與<div>標(biāo)簽不同，<span>標(biāo)簽通常用于對(duì)文本進(jìn)行樣式、處理或標(biāo)記，而不會(huì)創(chuàng)建獨(dú)立的區(qū)塊。

文本樣式：可以使用<span>標(biāo)簽將文本片段包裹起來(lái)，并應(yīng)用樣式或類名來(lái)對(duì)其進(jìn)行格式化或添加特殊效果。

示例：

<p>
    這是一段正常的文本，
    <span class="highlight">這是一個(gè)高亮文本片段</span>
    ，然后繼續(xù)正常文本。
</p>

<span>標(biāo)簽還有其他常用用法例如操作或處理元素、表單處理等。

字符實(shí)體

字符實(shí)體是一種特殊的編碼方式，用于在HTML中表示特殊字符或無(wú)法直接輸入的字符。

一些常見字符實(shí)體示例：文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-632672.html

到了這里，關(guān)于HTML 基礎(chǔ)標(biāo)簽的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！