標題文本 h1、h2、h3、h4、h5、h6

其中 h1、h2、h3是比較常用的。h3、h4、h5、h6相對來說用的會少一點，除非結構層次比較深才會使用。

段落文本 p

<p>這是一個段落<p/>

強調文本 strong 和 em

盡量避免使用b代替strong，使用i代替em。它們表示的含義不一樣

<strong>strong表示文本的重要性,瀏覽器會對strong標簽內容加粗</strong>

<em>em表示內容的著重點,瀏覽器一般不會對em內容傾斜 </em>

標記細則 small big

small標簽和big標簽分別表示小號字體和大號字體。small通常是行內文本的一小塊，通常用于免責聲明、注意事項、版權信息、法律限制等。big通常是大號字體展示。一啊不能用的少。

加粗字體b，斜體i

b標簽用于加粗字體，i標簽用于使字體傾斜。

上標sup、下標sub

sup標簽和sub標簽使標記的文本比普通文本高一點或者第一點。常用于表示數學公式。具體的代碼和運行結果如下：

<p>這是一段<sup>上標文本</sup></p>

<p>這是一段<sub>下表文本</sub></p>



sup和sub可以使行高增加，可以使用css修復。

定義術語 dfn標簽

dfn標簽默認斜體顯示文本，

<p><dfn>Internet</dfn>是一個全球互聯網系統，用戶量巨大</p>

標記代碼 code

code標簽用于展示一段程序代碼，該標簽包裹的內容一般是一段程序代碼，有特殊的樣式顯示。由于代碼中經常包含<和>等特殊字符，在code中需要轉義。如果顯示單獨的一塊代碼，可以在外圍使用 pre標簽包裹

其他與計算機相關的有kbd、samp、var等標簽，不過基本上不使用。

<code>int a=1;</code>

預定義格式 pre

pre標簽主要用于報紙計算機示例代碼的完整格式。因為普通html元素會忽略空格、換行等元素。pre則要求完全保持元素內的所有格式，包括所有的空格換行等。

縮寫詞 abbr [了解]

下劃線和刪除線 ins del

ins和del的效果也可以通過css實現。

<ins>這是一個ins下劃線標簽</ins> <del>這是一個del刪除線標簽</del>

運行效果如下：

指明引用或者參考 cite，一般用于標記歌曲名、電影名、照片、雕塑 圖書名、作品等名稱

<p>她正在看 <cite>紅樓夢</cite> </p>

運行效果如下：

引述文本 blockquote q

blockquote標簽表示單獨存在的引用，一般很長，顯示在新的一行

q標簽表示簡單的引用

<blockquote>表示單獨存在的引用，一般很長，顯示在新的一行</blockquote>

<q>q標簽表示簡短的一個引用</q>

換行元素 br

<br/>

行內文本 span

<span>這是一段行內文本</span>

文本高亮顯示 mark

<mark>文本高亮顯示</mark>

mark標簽會給文本加一個前景色，運行效果如下：

進度條 progress

progress用于顯示一個進度條，max和value屬性表示最大值和當前比例值。代碼示例和運行效果如下：

<progress max="100" value="35">35%</progress>

刻度信息 meter [了解]

meter和process類型，它可以通過low、hign和value三個屬性一起來表示進度。low默認0，hign默認1。運行效果如下：

<meter low="0.25" high="0.75" value="0.5">50%</meter>



示例代碼中0.5正好在0.25和0.75的中間。目前瀏覽器對meter的支持還在變化，謹慎使用即可

標記時間信息 time [了解]

time標簽有datetime屬性，該屬性是對用戶不可見，是給瀏覽器使用的。time包裹的文本對用戶可見。

<time datetime="2020-02-14">情人節</time>

聯系信息 address

address用于標記一個通訊地址，可以是郵箱、實際地址、電話等 address默認斜體顯示

<address>北京市 北京市 朝陽區 xxx小區19號樓3單元101</address>

文本顯示順序 bdo

bdo可以使文本從左到右或者從右到左顯示，示例代碼和運行效果如下：

<bdo dir="ltr">從左到右顯示</bdo>

<bdo dir="rtl">從右到左顯示</bdo>



另外還有一個bid標簽用于方向未知的情況，目前只有火狐和google瀏覽器支持，不要使用。

換行斷點 wbr [了解]

wbr和br類似，代表一個可換行處。br是強制換行。wbr表示在必要的時候可以換行。具體在哪里換行，由瀏覽器決定。 該元素瀏覽器支持不好，盡量不要使用

標記展開/收縮信息 details summary

可以對標記的內容進行展開和收縮。示例代碼和運行效果如下：

    <details>

        <summary>華為手機</summary>

        <p>品牌：華為</p>

        <p>內存：4G</p>

    </details>

對話框 dialog

dialog表示一個對話框，open屬性表示顯示和隱藏。注意他不是彈框0 ，只是在頁面上顯示或者隱藏。一般也不會使用該標簽

<dialog open="true"><p>這是一個對話框</p></dialog>

圖片 img標簽

img基礎用法

<img src="a.jpg" alt="圖片加載失敗的替換文本" width="500" height="500"/>

src屬性表示圖片鏈接，alt表示圖片加載時的替換文本，width表示圖片寬度，height表示圖片高度。srcset屬性表示一組圖像

插入網站logo、圖標

<link rel="icon" href="favicon.svg"/>

<link rel="shortcut icon" href="favicon.svg"/>

多媒體 embed

embed標簽可以播放多媒體 width height src分別表示多媒體的寬度、高度和多媒體url

<embed width="500" height="500" src="a.mp4"/>

多媒體 object

object標簽可以定義一個嵌入對象，主要用于在網頁中插入多媒體信息，如：圖像、音頻、視頻、pdf、flash、Active X、Java applets等。不過各個瀏覽器對這個標簽的支持都不太一樣，所以也需要謹慎使用。

<object width="100%" height="500" data="a.mp4"></object>

多媒體 audio、video

audio可以播放主流的音頻，支持mp3、wav等格式 src屬性表示音頻url，autoplay屬性表示網頁加載的時候是否自動播放，loop表示是否循環播放，type屬性表示多媒體類型，示例代碼的運行效果如下：

<audio src="a.mp3" autoplay loop controls></audio>



video支持主流的視頻流，如mp4等。muted表示 是否靜音，poster表示視頻未播放時候的加載圖像，示例代碼如下：

<video src="a.mp4" controls width="500" height="500" muted loop autoplay poster="a.jpg">您的瀏覽器不支持video標簽</video>

列表 ul ol li

無序列表 ul-li

有序列表 ol-li

描述列表 dl dt dd

超鏈接 a

普通鏈接

download屬性表示要下載的目標，當用戶點擊按鈕的時候，會下載這個鏈接的內容。

<a href="a.html" download="c.jpg" target="_blank">普通鏈接</a>

塊鏈接

html5放開了a鏈接的限制，可以在a鏈接中包含其他元素。也稱為塊鏈接，注意不要過度使用快鏈接，盡量避免在a中包含大量信息

    <a href="a.html">

        <h1>段落文本</h1>

        <p>更多信息</p>

    </a>

錨鏈接 鏈接可以指向任何被定義了ID的鏈接。

<a id="p4">測試</a>

<a href="#p4">錨點鏈接，指向id=p4</a>

圖像熱點 map area

為圖像的局部區域定義鏈接，點擊熱點區域的時候，會激活鏈接，并跳轉到指定目標

框架鏈接 iframe html5已經不支持iframset，但是還是支持iframe框架。

<iframe src="a.html"></iframe>

表格 table tr th td

table定義表格 tr定義一行 th定義標題 td定義一個單元格 thead、tbody、tfoot對表格進行分組，表頭，表體，表尾三個組，示例代碼如下：

    <table>

        <caption>學生列表</caption>

        <thead>

            <tr>

                <th>姓名</th>

                <th>年齡</th>

            </th>

        </thead>

        <tbody>

            <tr>

                <td>張三</td>

                <td>28</td>

            </tr>

        </tbody>

        <tfoot></tfoot>

    </table>

表單

form標簽定義一個表單，每個表單都是form開頭的

fieldset和legend對表單控件進行組織，使表單更容易理解

常用表單控件如下：

    <p>文本框 <input type="text"/></p>

    <p>標簽 <label>用戶名</label> 主要用于描述表單字段的用途 label的for屬性與一個表單字段的id綁定，當點擊label，可以使表單字段獲得焦點</p>

    <p>密碼框 <input type="password"/></p>

    <p>單選框 <input type="radio"/></p>

    <p>復選框 <input type="checkbox"/></p>

    <p>文本區域 <textarea>這里是一段文本</textarea></p>

    <p>選擇框 <select><option>男士</option></select></p>

    <p>上傳文件 <input type="file"/></p>

    <p>隱藏字段 <input type="hidden"/></p>

    <p>提交按鈕 <input type="submit"></p>

運行效果如下：

html5新型輸入框

    <p>郵件 <input type="email"/>提交表單時，瀏覽器會驗證email格式</p>

    <p>URL框 <input type="url"/>提交表單時，瀏覽器會驗證url格式</p>

    <p>數字框 <input type="number" min="0" max="100"  step="10" value="50"/></p>

    <p>范圍值 <input type="range" min="10" max="100" value="20" step="1"/>在網頁中顯示為滾動條</p>

    <p>日期選擇器 <input type="week"/>type有date、month、week、time、datetime、datetime-local選項</p>

    <p>搜索框 <input type="search"/> 搜索框右邊會有一個清空圖標</p>

    <p>電話號碼 <input type="tel"/></p>

    <p>拾色器 <input type="color"/></p>

運行效果如下：

數據列表

    <input type="text" list="url_lsit">

    <datalist id="url_lsit">

        <option label="百度" value="https://www.baidu.com"></option>

        <option label="新浪" value="https://xinlang.com"></option>

    </datalist>

當用戶點擊文本框的時候，會彈出數據列表選項。

輸出結果 output，用于表示表單的輸出結果

<p><output>輸出結果</output></p>

表單屬性

autofocus表示自動獲取焦點

pattern 定義驗證input的正則表達式

placeholder 定義默認的替換文本

required 定義必填

總結

以上是生活随笔為你收集整理的html5文本标签的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。