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>
```