HTML 常用标签介绍
目录
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>
≡