目錄
HTML 標簽
HTML 常用標簽速查表
文檔元標簽
頁面結構與布局
文本內容與排版
鏈接與媒體
列表與表格
表單與交互
其他功能標簽
文本結構標簽
文本格式化標簽
列表標簽
鏈接與導航標簽
媒體標簽
容器與結構標簽
表格標簽
表單標簽
元信息與文檔標簽
腳本與樣式標簽
框架與嵌入內容標簽
交互與可擴展標簽
HTML 標簽
在網頁開發中,HTML 標簽是構建網頁結構和內容的基礎。這些預定義的標簽能夠告訴瀏覽器如何解析和顯示網頁元素,讓原本無序的內容變得條理清晰、層次分明。下面將按功能分類介紹 HTML 中最常用的標簽,幫助大家快速掌握網頁開發的基礎工具。
HTML 常用標簽速查表
文檔元標簽
標簽 | 描述 | HTML5 新增 |
---|---|---|
<!--...--> | 定義注釋 | - |
<!DOCTYPE> | 定義文檔類型,告訴瀏覽器使用 HTML5 標準 | - |
<head> | 文檔的元數據容器(標題、樣式、腳本等) | - |
<html> | HTML 文檔的根元素 | - |
<link> | 關聯外部資源(常用于引入 CSS) | - |
<meta> | 定義頁面元信息(編碼、描述、關鍵字等) | - |
<script> | 定義或引入 JavaScript 腳本 | - |
<style> | 定義內部 CSS 樣式 | - |
<title> | 定義文檔標題(顯示在瀏覽器標簽) | - |
頁面結構與布局
標簽 | 描述 | HTML5 新增 |
---|---|---|
<article> | 獨立的文章或內容塊 | ? |
<aside> | 側邊欄內容 | ? |
<body> | HTML 文檔的主體內容 | - |
<div> | 通用容器,無語義 | - |
<footer> | 頁腳 | ? |
<header> | 文檔或區域的頭部 | ? |
<main> | 頁面主體內容(唯一且重要) | ? |
<nav> | 導航鏈接部分 | ? |
<section> | 章節或區域 | ? |
<span> | 行內容器,無語義 | - |
文本內容與排版
標簽 | 描述 | HTML5 新增 |
---|---|---|
<abbr> | 縮寫 | - |
<blockquote> | 長引用 | - |
<br> | 換行 | - |
<code> | 行內代碼 | - |
<em> | 語義強調(斜體) | - |
<h1> ~<h6> | 標題等級 | - |
<hr> | 水平分割線 | - |
<kbd> | 鍵盤輸入 | - |
<mark> | 高亮文本 | ? |
<p> | 段落 | - |
<pre> | 保留格式的文本 | - |
<q> | 短引用(自動加引號) | - |
<samp> | 程序輸出 | - |
<small> | 小號文字 | - |
<strong> | 強調(加粗) | - |
<sub> | 下標 | - |
<sup> | 上標 | - |
<var> | 變量 | - |
<cite> | 引用作品標題 | - |
鏈接與媒體
標簽 | 描述 | HTML5 新增 |
---|---|---|
<a> | 超鏈接 | - |
<audio> | 音頻 | ? |
<canvas> | 繪圖區域(JS 渲染) | ? |
<embed> | 嵌入外部內容 | ? |
<figcaption> | <figure> ?的標題 | ? |
<figure> | 獨立的圖像/媒體容器 | ? |
<iframe> | 內聯框架(嵌入頁面) | - |
<img> | 圖片 | - |
<object> | 插入多媒體/應用程序 | - |
<source> | 為媒體指定資源 | ? |
<svg> | 矢量圖形 | - |
<track> | 視頻/音頻字幕軌道 | ? |
<video> | 視頻 | ? |
列表與表格
標簽 | 描述 | HTML5 新增 |
---|---|---|
<caption> | 表格標題 | - |
<col> | 列屬性 | - |
<colgroup> | 列分組 | - |
<dd> | 術語描述 | - |
<dl> | 定義列表 | - |
<dt> | 定義術語 | - |
<li> | 列表項 | - |
<ol> | 有序列表 | - |
<table> | 表格 | - |
<tbody> | 表格主體 | - |
<td> | 表格單元格 | - |
<tfoot> | 表尾部分 | - |
<th> | 表頭單元格 | - |
<thead> | 表頭部分 | - |
<tr> | 表格行 | - |
<ul> | 無序列表 | - |
表單與交互
標簽 | 描述 | HTML5 新增 |
---|---|---|
<button> | 按鈕 | - |
<datalist> | 自動完成選項列表 | ? |
<details> | 可折疊內容 | ? |
<dialog> | 對話框 | ? |
<fieldset> | 表單分組 | - |
<form> | 表單 | - |
<input> | 輸入控件 | - |
<label> | 輸入標簽 | - |
<legend> | 分組標題 | - |
<meter> | 度量值顯示 | ? |
<optgroup> | 下拉列表選項分組 | - |
<option> | 下拉選項 | - |
<output> | 表單/腳本輸出 | ? |
<progress> | 進度條 | ? |
<select> | 下拉列表 | - |
<summary> | 折疊標題 | ? |
<textarea> | 多行文本框 | - |
其他功能標簽
標簽 | 描述 | HTML5 新增 |
---|---|---|
<bdi> | 雙向隔離文本 | ? |
<bdo> | 文本方向覆蓋 | - |
<noscript> | 不支持腳本時顯示的內容 | - |
<template> | 頁面中隱藏的模板內容 | ? |
<time> | 時間/日期 | ? |
<wbr> | 建議換行位置 | ? |
文本結構標簽
文本是網頁內容的核心載體,文本結構標簽用于組織和格式化各類文字內容,明確內容的層次關系。
- 標題標簽:
<h1>
?到?<h6>
?是定義標題的核心標簽,其中?<h1>
?代表最高級別的標題,通常用于網頁的主標題,字體最大且加粗;<h6>
?則是最低級別的標題,字體最小。每個標題標簽都會自動換行,并且標題之間會有默認的間距,讓頁面層級更清晰。例如?<h1>網站首頁</h1>
?會顯示為頁面中最醒目的主標題。 - 段落標簽:
<p>
?用于定義一段文本內容,是網頁中最常用的文本標簽之一。段落標簽會自動在前后添加換行和間距,使文本內容呈現出自然的分段效果。比如?<p>這是一段網頁正文內容</p>
?會將文本以段落形式展示,與其他內容區分開來。 - 換行標簽:
<br>
?是單標簽,用于在文本中強制換行,而不需要創建新的段落。例如在地址信息中,<p>北京市朝陽區<br>某某街道 123 號</p>
?會讓地址在換行處顯示為兩行。 - 水平線標簽:
<hr>
?單標簽,用于在頁面中插入一條水平線,起到分隔內容的作用。比如在文章的不同章節之間添加?<hr>
,可以讓頁面結構更清晰。
文本格式化標簽
文本格式化標簽用于改變文本的顯示樣式,突出重點內容或表達特定含義。
- 加粗標簽:
<strong>
?和?<b>
?都能使文本加粗,但?<strong>
?更具語義化,強調文本的重要性,搜索引擎會更重視其中的內容;<b>
?僅用于視覺上的加粗。例如?<strong>注意事項</strong>
?會加粗顯示并強調內容的重要性。 - 斜體標簽:
<em>
?和?<i>
?可使文本顯示為斜體,<em>
?強調文本的語氣或強調內容,具有語義含義;<i>
?主要用于視覺上的斜體效果,如外文詞匯或專業術語。比如?<em>請仔細閱讀</em>
?會以斜體顯示并強調語氣。 - 刪除線標簽:
<s>
?和?<del>
?用于給文本添加刪除線,通常表示已刪除或過時的內容。例如?<p>原價 <s>199 元</s>,現價 99 元</p>
?會在原價上顯示刪除線。 - 下劃線標簽:
<u>
?用于給文本添加下劃線,可用于強調特定內容,但需注意不要與超鏈接的默認下劃線混淆。例如?<u>重點內容</u>
?會為文本添加下劃線。 - 特殊文本格式標簽:
-
<code>
:用于顯示計算機代碼,文本會采用等寬字體,例如?<code>console.log("Hello")</code>
。 -
<pre>
:保留文本中的空格和換行,常用于展示代碼塊或需要固定格式的內容,例如:<pre> function greet() {console.log("Hello World"); } </pre>
-
<kbd>
:表示鍵盤輸入內容,例如?<kbd>Ctrl</kbd> + <kbd>V</kbd>
?表示快捷鍵組合。 -
<mark>
:用于高亮顯示文本,例如?<p>請重點關注 <mark>這部分內容</mark></p>
。 -
<sup>
?和?<sub>
:分別表示上標和下標,例如?<p>數學公式:a<sup>2</sup> + b<sup>2</sup> = c<sup>2</sup></p>
?和?<p>化學方程式:H<sub>2</sub>O</p>
。
-
列表標簽
列表標簽用于將相關內容以列表形式展示,使內容更有條理。
-
無序列表:由?
<ul>
?和?<li>
?標簽組合使用,<ul>
?是無序列表的容器,<li>
?用于定義列表項。無序列表的每個列表項前默認顯示圓點標記,也可通過 CSS 改變標記樣式。例如:<ul><li>蘋果</li><li>香蕉</li><li>橙子</li> </ul>
會顯示帶有圓點標記的水果列表。
-
有序列表:由?
<ol>
?和?<li>
?組成,<ol>
?是有序列表容器,<li>
?為列表項。有序列表的每個列表項前會顯示數字序號,默認從 1 開始,可通過?start
?屬性設置起始序號。例如:<ol start="3"><li>第三步:輸入網址</li><li>第四步:點擊搜索</li> </ol>
會從數字 3 開始顯示有序列表。
-
定義列表:由?
<dl>
、<dt>
?和?<dd>
?組成,用于對術語進行定義和描述。<dl>
?是定義列表容器,<dt>
?表示定義的術語,<dd>
?表示對術語的描述。例如:<dl><dt>HTML</dt><dd>超文本標記語言,用于構建網頁結構</dd><dt>CSS</dt><dd>層疊樣式表,用于美化網頁樣式</dd> </dl>
會顯示術語及其對應的描述內容。
鏈接與導航標簽
鏈接是互聯網的核心特性之一,鏈接與導航標簽用于實現頁面間的跳轉和導航功能。
-
超鏈接標簽:
<a>
?是實現鏈接功能的核心標簽,通過?href
?屬性指定鏈接的目標地址,鏈接文本放在開始標簽和結束標簽之間。例如?<a href="https://www.example.com">訪問示例網站</a>
?會顯示可點擊的鏈接,點擊后跳轉到指定網址。target
?屬性可設置鏈接打開方式,target="_blank"
?表示在新窗口打開鏈接。 -
錨點鏈接:用于在同一頁面內實現快速跳轉,先給目標元素定義?
id
?屬性,再在?<a>
?標簽的?href
?屬性中使用?#id
?形式指向目標元素。例如?<a href="#section1">跳轉到第一部分</a>
,目標元素?<div id="section1">第一部分內容</div>
,點擊鏈接會快速跳轉到頁面中 id 為 section1 的元素位置。 -
導航標簽:
<nav>
?是 HTML5 新增的語義化標簽,用于定義網頁中的導航區域,通常包含多個?<a>
?標簽組成的導航鏈接。例如:<nav><a href="/home">首頁</a><a href="/news">新聞</a><a href="/contact">聯系我們</a> </nav>
使用?
<nav>
?標簽能讓瀏覽器和搜索引擎更清晰地識別導航區域。
媒體標簽
媒體標簽用于在網頁中插入圖片、音頻、視頻等多媒體內容,豐富網頁的表現形式。
-
圖片標簽:
<img>
?是單標簽,用于在網頁中插入圖片,核心屬性包括?src
(指定圖片的路徑或 URL)、alt
(圖片無法加載時顯示的替代文本,提升可訪問性)、width
?和?height
(設置圖片的寬度和高度,單位為像素或百分比)。例如?<img src="image.jpg" alt="風景圖片" width="500" height="300">
?會顯示指定路徑的圖片,寬度為 500 像素,高度為 300 像素。 -
音頻標簽:
<audio>
?用于在網頁中嵌入音頻文件,支持?src
?屬性指定音頻文件路徑,controls
?屬性顯示播放控件(如播放/暫停按鈕、音量調節等),autoplay
?屬性設置音頻自動播放(部分瀏覽器出于用戶體驗考慮可能會限制自動播放),loop
?屬性設置音頻循環播放。例如:<audio src="music.mp3" controls loop></audio>
會在頁面中顯示音頻播放控件,用戶可操作播放音頻。
-
視頻標簽:
<video>
?用于嵌入視頻文件,常用屬性與音頻標簽類似,src
?指定視頻路徑,controls
?顯示播放控件,width
?和?height
?設置視頻尺寸,autoplay
?和?loop
?分別用于自動播放和循環播放。例如:<video src="video.mp4" controls width="800" height="450"></video>
會在頁面中顯示視頻播放窗口和控件,用戶可播放視頻。
容器與結構標簽
容器與結構標簽用于對網頁內容進行分組和布局,構建網頁的整體框架。
-
通用容器標簽:
<div>
?是最常用的通用容器標簽,沒有特定的語義,主要用于對內容進行分組,方便通過 CSS 控制樣式和 JavaScript 操作。例如可以用?<div class="header">
?包裹頭部內容,<div class="content">
?包裹主體內容,使頁面結構更清晰。 -
語義化結構標簽:HTML5 引入了一系列語義化結構標簽,它們不僅能實現容器功能,還能明確表達內容的含義。
<header>
:定義網頁或區域的頭部,通常包含標題、logo、導航等內容。<footer>
:定義網頁或區域的頁腳,通常包含版權信息、聯系方式、相關鏈接等。<section>
:表示文檔中的一個獨立章節或區域,如文章的一個小節。<article>
:表示獨立的、可完整分發的內容,如博客文章、新聞報道、評論等。<aside>
:定義側邊欄內容,通常包含與主內容相關的補充信息,如廣告、相關推薦等。<main>
:表示網頁的主要內容區域,一個頁面通常只包含一個?<main>
?標簽。
例如一個典型的網頁結構:
<header><h1>網站標題</h1><nav>導航鏈接</nav> </header> <main><article><h2>文章標題</h2><p>文章內容...</p></article><aside>相關推薦</aside> </main> <footer>版權信息</footer>
表格標簽
表格標簽用于以行和列的方式展示數據,讓信息更直觀、有序。
-
表格容器:
<table>
?用于定義表格的整體結構,所有表格內容必須放在它內部。 -
表格行:
<tr>
?表示表格中的一行(table row),可包含若干個表格單元格。 -
表頭單元格:
<th>
?用于定義表格的表頭單元格,內容默認加粗并居中,表示列或行的標題。 -
表格單元格:
<td>
?用于定義表格的普通單元格,存放數據或內容。 -
表格分組:HTML 提供?
<thead>
(表頭)、<tbody>
(表格主體)和?<tfoot>
(表尾)來對表格內容進行分組,便于樣式控制和語義清晰。示例:
<table border="1"><thead><tr><th>姓名</th><th>年齡</th><th>城市</th></tr></thead><tbody><tr><td>張三</td><td>25</td><td>北京</td></tr><tr><td>李四</td><td>30</td><td>上海</td></tr></tbody> </table>
表單標簽
表單標簽用于創建用戶與網頁的交互界面,收集用戶輸入的信息。
-
表單容器:
<form>
?是表單的容器標簽,所有表單元素都需要放在?<form>
?內部。action
?屬性指定表單數據提交的目標 URL,method
?屬性指定提交方式(get
?或?post
)。例如?<form action="/submit" method="post">
?表示表單數據將通過 post 方式提交到?/submit
?地址。 -
輸入框:
<input>
?是單標簽,通過?type
?屬性設置輸入框類型,常見類型包括:text
:單行文本輸入框,用于輸入普通文本。password
:密碼輸入框,輸入內容會顯示為圓點或星號。radio
:單選按鈕,多個單選按鈕通過相同的?name
?屬性組成一組,用戶只能選擇其中一個。checkbox
:復選框,多個復選框通過相同的?name
?屬性組成一組,用戶可選擇多個選項。submit
:提交按鈕,點擊后提交表單數據。reset
:重置按鈕,點擊后將表單元素恢復到初始狀態。file
:文件上傳控件,允許用戶選擇本地文件上傳。
-
下拉選擇框:由?
<select>
?和?<option>
?組成,<select>
?是下拉框容器,<option>
?定義每個選項。例如:<select name="city"><option value="beijing">北京</option><option value="shanghai">上海</option><option value="guangzhou">廣州</option> </select>
會顯示一個下拉框,用戶可從中選擇城市。
-
多行文本框:
<textarea>
?用于創建多行文本輸入框,rows
?屬性設置可見行數,cols
?屬性設置可見列數。例如?<textarea rows="5" cols="30" name="message">請輸入留言...</textarea>
?會顯示一個 5 行 30 列的文本框,用戶可輸入多行文本。 -
按鈕標簽:
<button>
?用于創建按鈕,type
?屬性可設置為?submit
(提交表單)、reset
(重置表單)或?button
(普通按鈕,需配合 JavaScript 實現功能)。例如?<button type="button" onclick="alert('Hello')">點擊我</button>
?會創建一個點擊后彈出提示框的按鈕。
元信息與文檔標簽
這些標簽通常位于?<head>
?區域,用于定義網頁的元信息和結構說明。
- 文檔聲明:
<!DOCTYPE html>
?用于告訴瀏覽器使用 HTML5 標準解析頁面,必須放在文檔最開頭。 - HTML 根元素:
<html>
?是整個 HTML 文檔的根標簽,lang
?屬性可指定頁面語言,例如?<html lang="zh-CN">
?表示中文頁面。 - 頭部區域:
<head>
?用于包含頁面的元信息,如標題、樣式、腳本、字符編碼等,內容不會直接顯示在頁面中。 - 標題標簽:
<title>
?定義網頁標題,會顯示在瀏覽器標簽欄中,并影響搜索引擎優化(SEO)。 - 字符編碼:
<meta charset="UTF-8">
?設置網頁使用的字符編碼,UTF-8 能支持多語言字符,避免中文亂碼。 - 視口設置:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
?用于響應式布局,讓頁面在移動端設備上正確顯示。 - SEO 元信息:
<meta name="description" content="網站描述內容">
?用于設置網頁描述,<meta name="keywords" content="關鍵詞1,關鍵詞2">
?用于設置網頁關鍵詞,兩者都有助于搜索引擎收錄。 - 樣式表引用:
<link rel="stylesheet" href="style.css">
?用于引用外部 CSS 文件,實現樣式與結構分離。 - 腳本引用:
<script src="script.js"></script>
?用于引用外部 JavaScript 文件,也可直接在?<script>
?標簽內編寫腳本代碼。
腳本與樣式標簽
-
內聯樣式:
<style>
?用于在 HTML 中直接編寫 CSS 樣式,一般放在?<head>
?內,例如:<style>body { background-color: #f0f0f0; }h1 { color: blue; } </style>
-
外部樣式表:通過?
<link>
?標簽引入獨立的 CSS 文件,便于樣式的維護和復用,是開發中的常用方式。 -
腳本標簽:
<script>
?用于編寫或引用 JavaScript 代碼,可放在?<head>
?或?<body>
?中。通常建議放在?<body>
?底部,避免阻塞頁面加載。 -
模塊腳本:在?
<script>
?標簽中添加?type="module"
?可使用 JavaScript ES6 模塊化功能,例如?<script type="module" src="app.js"></script>
。
框架與嵌入內容標簽
-
內聯框架:
<iframe>
?用于在網頁中嵌入另一個 HTML 頁面,常用于視頻、地圖或第三方內容嵌入。例如:<iframe src="https://www.example.com" width="600" height="400" title="示例頁面"></iframe>
-
畫布標簽:
<canvas>
?提供可繪制 2D 或 3D 圖形的畫布,需配合 JavaScript 使用,例如繪制圖表、游戲畫面等。 -
SVG 圖形:
<svg>
?用于直接在 HTML 中繪制矢量圖形,支持縮放且不失真,例如圖標、簡單插圖等。
交互與可擴展標簽
-
詳情與摘要:
<details>
?和?<summary>
?組合可創建可折疊的內容塊,用戶點擊摘要可展開或收起詳細信息。<details><summary>查看更多</summary><p>這里是隱藏的詳細內容,點擊摘要可展開/收起。</p> </details>
-
進度條:
<progress>
?表示任務完成進度,可設置?value
(當前值)和?max
(最大值)。<p>下載進度:<progress value="70" max="100"></progress> 70%</p>
-
計量值:
<meter>
?表示測量值或比例范圍,例如評分、使用率等。<p>磁盤使用率:<meter value="65" min="0" max="100">65%</meter></p>
≡