HTML 元素参考

此页面列出了所有 HTML 元素，这些元素是使用 标签 创建的。

它们按功能分组，以帮助您轻松找到所需内容。所有元素的字母顺序列表也提供在每个元素的页面以及此页面的侧边栏中。

注意：有关 HTML 元素和属性基础知识的更多信息，请参阅 HTML 简介文章中有关元素的部分。

主根

元素 描述
<html> 表示 HTML 文档的根（顶级元素），因此也称为根元素。所有其他元素必须是此元素的后代。

文档元数据

元数据包含有关页面的信息。 这包括有关样式、脚本和数据的的信息，以帮助软件（搜索引擎、浏览器 等）使用和渲染页面。 样式和脚本的元数据可以在页面中定义，也可以链接到包含这些信息的另一个文件。

元素 描述
<base> 指定所有文档中相对 URL 所使用的基本 URL。 文档中只能有一个这样的元素。
<head> 包含有关文档的机器可读信息（元数据），例如其 标题、脚本 和 样式表。
<link> 指定当前文档与外部资源之间的关系。 此元素最常用于链接到 CSS，但也用于建立网站图标（包括“favicon”风格的图标以及移动设备上的主屏幕和应用程序的图标）等。
<meta> 表示 元数据，这些元数据无法通过其他 HTML 元相关元素表示，例如 <base>、<link>、<script>、<style> 和 <title>。
<style> 包含文档或文档部分的样式信息。 它包含 CSS，应用于包含此元素的文档的内容。
<title> 定义文档的标题，该标题显示在 浏览器 的标题栏或页面的选项卡中。 它只包含文本；元素中的标签将被忽略。

分节根

元素 描述
<body> 表示 HTML 文档的内容。 文档中只能有一个这样的元素。

内容分节

内容分节元素允许您将文档内容组织成逻辑部分。 使用分节元素为您的页面内容创建广泛的提纲，包括页眉和页脚导航，以及标题元素以标识内容部分。

元素 描述
<address> 表示所包含的 HTML 提供个人或组织的联系信息。
<article> 表示文档、页面、应用程序或站点中的独立组合，旨在独立分发或重用（例如，在联合发布中）。 例如，论坛帖子、杂志或报纸文章、博客条目、产品卡片、用户提交的评论、交互式小部件或工具，或任何其他独立的内容项。
<aside> 表示文档的一部分，其内容与文档的主要内容仅间接相关。 旁注通常以侧边栏或旁注框的形式呈现。
<footer> 表示其最近祖先 分节内容 或 分节根 元素的页脚。 <footer> 通常包含有关部分作者的信息、版权数据或指向相关文档的链接。
<header> 表示介绍性内容，通常是一组介绍性或导航辅助工具。 它可能包含一些标题元素，但也可能包含徽标、搜索表单、作者姓名和其他元素。
<h1>、<h2>、<h3>、<h4>、<h5>、<h6> 表示六个级别的节标题。 <h1> 是最高节级别，<h6> 是最低节级别。
<hgroup> 表示与任何辅助内容（例如副标题、备用标题或标语）分组的标题。
<main> 表示文档主体的主要内容。 主要内容区域包含与文档的中心主题或应用程序的中心功能直接相关或扩展的內容。
<nav> 表示页面的一个部分，其目的是提供导航链接，无论是当前文档内还是其他文档。 导航部分的常见示例包括菜单、目录和索引。
<section> 表示文档的通用独立部分，没有更具体的语义元素来表示它。 除极少数例外，部分应始终带有标题。
<search> 表示包含一组表单控件或与执行搜索或过滤操作相关的其他内容的部分。

文本内容

使用 HTML 文本内容元素来组织放置在起始 <body> 和结束 </body> 标签之间的内容块或内容部分。 这些元素对于 可访问性 和 SEO 非常重要，它们识别该内容的用途或结构。

元素 描述
<blockquote> 表示所包含的文本是扩展的引用。 通常，这在视觉上通过缩进呈现。 引用来源的 URL 可以使用 cite 属性给出，而来源的文本表示可以使用 <cite> 元素给出。
<dd> 提供描述列表 (<dl>) 中前一个术语 (<dt>) 的描述、定义或值。
<div> 流内容的通用容器。 它对内容或布局没有影响，直到使用 CSS 以某种方式进行样式设置（例如，直接应用于它的样式，或将某种布局模型（如 flexbox）应用于其父元素）。
<dl> 表示描述列表。 此元素包含一组术语列表（使用 <dt> 元素指定）和描述（由 <dd> 元素提供）。 此元素的常见用途是实现词汇表或显示元数据（键值对列表）。
<dt> 指定描述或定义列表中的术语，因此必须在 <dl> 元素中使用。 它通常后跟 <dd> 元素；但是，一行中的多个 <dt> 元素表示多个术语，它们都由紧随其后的 <dd> 元素定义。
<figcaption> 表示描述其父 <figure> 元素其余内容的标题或图例。
<figure> 表示自包含内容，可能包含可选的标题，该标题使用 <figcaption> 元素指定。 图表、标题及其内容被引用为一个单元。
<hr> 表示段落级元素之间的主题断裂：例如，故事中的场景变化，或部分内的主题转换。
<li> 表示列表中的项目。 它必须包含在父元素中：有序列表 (<ol>)、无序列表 (<ul>) 或菜单 (<menu>)。 在菜单和无序列表中，列表项通常使用项目符号显示。 在有序列表中，它们通常在左侧显示一个递增的计数器，例如数字或字母。
<menu> 语义上是 <ul> 的替代方案，但浏览器（以及通过可访问性树公开）将其视为与 <ul> 没有区别。 它表示项目的无序列表（由 <li> 元素表示）。
<ol> 表示项目的排序列表，通常呈现为编号列表。
<p> 表示段落。 段落通常在视觉媒体中表示为文本块，与相邻块用空行和/或首行缩进分隔，但 HTML 段落可以是任何相关内容的结构分组，例如图像或表单字段。
<pre> 表示预格式化的文本，该文本应按 HTML 文件中的书写方式呈现。 文本通常使用非比例或 等宽 字体呈现。 此元素内的空白将按书写方式显示。
<ul> 表示项目的无序列表，通常呈现为项目符号列表。

内联文本语义

使用 HTML 内联文本语义来定义单词、行或任何任意文本片段的含义、结构或样式。

元素 描述
<a> 与其 href 属性一起，创建一个指向网页、文件、电子邮件地址、当前页面内的位置或 URL 可以寻址的任何其他内容的超链接。
<abbr> 表示缩写或首字母缩略词。
<b> 用于将读者的注意力吸引到元素的内容，而这些内容没有被赋予特殊的意义。 此前称为粗体元素，大多数浏览器仍然以粗体形式绘制文本。 但是，您不应使用 <b> 对文本进行样式设置或赋予重要性。 如果你想创建粗体文本，你应该使用 CSS font-weight 属性。 如果你想表明一个元素特别重要，你应该使用强元素。
<bdi> 告诉浏览器的双向算法将它包含的文本与周围文本隔离对待。 当网站动态插入一些文本并且不知道要插入的文本的方向时，它特别有用。
<bdo> 覆盖文本的当前方向，以便其中的文本以不同的方向呈现。
<br> 在文本中产生换行符（回车符）。 它对于编写诗歌或地址很有用，其中行分隔很重要。
<cite> 用于标记引用的创作作品的标题。 引用可以根据与引用元数据相关的上下文相关约定以缩写形式呈现。
<code> 显示其内容的样式，旨在表明文本是计算机代码的简短片段。 默认情况下，内容文本使用用户代理的默认等宽字体显示。
<data> 将给定的内容与机器可读的翻译链接起来。 如果内容与时间或日期相关，则必须使用 <time> 元素。
<dfn> 用于表示在定义短语或句子上下文中定义的术语。 <dfn> 元素的祖先 <p> 元素、<dt>/<dd> 对或 <dfn> 元素的最近部分祖先被认为是该术语的定义。
<em> 标记具有强调重点的文本。 <em> 元素可以嵌套，每个嵌套级别表示更高的强调程度。
<i> 表示从普通文本中分离的文本范围，原因可能是习语文本、技术术语和分类学名称等。 历史上，这些都是使用斜体类型呈现的，这是此元素名称 <i> 的最初来源。
<kbd> 表示表示来自键盘、语音输入或任何其他文本输入设备的文本用户输入的内联文本跨度。 按照惯例，用户代理默认情况下使用其默认等宽字体渲染 <kbd> 元素的内容，尽管这未被 HTML 标准强制执行。
<mark> 表示因标记的段落在封闭上下文中相关而被标记或突出显示以供参考或注释的文本。
<q> 表示所包含的文本是简短的内联引用。 大多数现代浏览器通过用引号包围文本来实现这一点。 此元素旨在用于不需要段落换行的简短引用；对于长引用，请使用 <blockquote> 元素。
<rp> 用于为不支持使用 <ruby> 元素显示红宝石注释的浏览器提供备用括号。 一个 <rp> 元素应包含包围包含注释文本的 <rt> 元素的开始和结束括号中的每一个。
<rt> 指定了 ruby 注释的 ruby 文本组件，用于为东亚文字提供发音、翻译或音译信息。<rt> 元素必须始终包含在 <ruby> 元素中。
<ruby> 表示渲染在基本文本上方、下方或旁边的较小的注释，通常用于显示东亚字符的发音。它也可以用于注释其他类型的文本，但这种用法不太常见。
<s> 使用删除线或穿过文本的线渲染文本。使用 <s> 元素来表示不再相关或不再准确的事物。但是，<s> 不适合指示文档编辑；为此，请根据情况使用 <del> 和 <ins> 元素。
<samp> 用于封装表示计算机程序示例（或引用）输出的内联文本。其内容通常使用浏览器的默认等宽字体（例如 Courier 或 Lucida Console）渲染。
<small> 表示旁注和小字，如版权和法律文本，独立于其样式呈现。默认情况下，它将其内部的文本渲染为小一号字体，例如从 small 到 x-small。
<span> 用于对短语内容进行通用内联容器，本身不代表任何东西。它可以用于将元素分组以进行样式设置（使用 class 或 id 属性），或者因为它们共享属性值，例如 lang。它应该只在没有其他语义元素适用时使用。<span> 与 div 元素非常相似，但 div 是一个 块级元素，而 <span> 是一个 内联级元素。
<strong> 指示其内容具有很强的重要性、严肃性或紧迫性。浏览器通常以粗体形式渲染内容。
<sub> 指定应以下标形式显示的内联文本，仅出于排版原因。下标通常使用较小的文本以降低的基线渲染。
<sup> 指定应以上标形式显示的内联文本，仅出于排版原因。上标通常使用较小的文本以升高的基线渲染。
<time> 表示特定时间段。它可能包含 datetime 属性，将日期转换为机器可读格式，从而实现更好的搜索引擎结果或自定义功能，例如提醒。
<u> 表示应以指示其具有非文本注释的方式渲染的内联文本范围。默认情况下，这将呈现为简单的实心下划线，但可以使用 CSS 进行更改。
<var> 表示数学表达式或编程环境中的变量名称。它通常使用当前字体的斜体版本呈现，尽管此行为取决于浏览器。
<wbr> 表示单词断行机会——文本中浏览器可以选择断行的位置，尽管它的断行规则不会在该位置创建断行。

图像和多媒体

HTML 支持各种多媒体资源，例如图像、音频和视频。

元素 描述
<area> 在图像地图内定义一个区域，该区域具有预定义的可点击区域。图像地图允许将图像上的几何区域与 超链接 相关联。
<audio> 用于在文档中嵌入声音内容。它可能包含一个或多个音频源，使用 src 属性或 source 元素表示：浏览器将选择最合适的源。它也可以是流媒体的目的地，使用 MediaStream。
<img> 将图像嵌入文档中。
<map> 与 <area> 元素一起使用来定义图像地图（可点击链接区域）。
<track> 用作媒体元素 audio 和 video 的子元素。它允许您指定定时文本轨道（或基于时间的​​数据），例如自动处理字幕。轨道采用 WebVTT 格式（.vtt 文件）——Web 视频文本轨道。
<video> 在文档中嵌入支持视频播放的媒体播放器。您也可以将 <video> 用于音频内容，但 audio 元素可能提供更合适的用户体验。

嵌入内容

除了常规多媒体内容外，HTML 还包含各种其他内容，即使它并不总是容易交互的。

元素 描述
<embed> 在文档中指定点嵌入外部内容。此内容由外部应用程序或其他交互式内容来源（如浏览器插件）提供。
<fencedframe> 表示嵌套的浏览上下文，如 <iframe>，但内置了更多本机隐私功能。
<iframe> 表示嵌套的浏览上下文，将另一个 HTML 页面嵌入当前页面中。
<object> 表示外部资源，可以将其视为图像、嵌套浏览上下文或由插件处理的资源。
<picture> 包含零个或多个 <source> 元素和一个 <img> 元素，以针对不同的显示/设备场景提供图像的替代版本。
<portal> 允许将另一个 HTML 页面嵌入当前页面中，以实现更顺畅的新页面导航。
<source> 为图片、音频元素或视频元素指定多个媒体资源。它是一个空元素，这意味着它没有内容并且没有结束标签。它通常用于以多种文件格式提供相同的媒体内容，以提供与各种浏览器的兼容性，因为它们对 图像文件格式 和 媒体文件格式 的支持不同。

SVG 和 MathML

您可以使用 SVG 和 MathML 元素将 SVG 和 MathML 内容直接嵌入 HTML 文档中，使用 <svg> 和 <math> 元素。

元素 描述
<svg> 定义新坐标系和 视窗 的容器。它用作 SVG 文档的最外层元素，但也可以用于将 SVG 片段嵌入 SVG 或 HTML 文档中。
<math> MathML 中的顶级元素。每个有效的 MathML 实例都必须包含在其中。此外，您不能将第二个 <math> 元素嵌套在另一个元素中，但您可以在其中包含任意数量的其他子元素。

脚本

为了创建动态内容和 Web 应用程序，HTML 支持使用脚本语言，最突出的是 JavaScript。某些元素支持此功能。

元素 描述
<canvas> 容器元素，与 canvas 脚本 API 或 WebGL API 一起使用，以绘制图形和动画。
<noscript> 定义要插入 HTML 部分的，如果页面上的脚本类型不受支持或浏览器当前关闭了脚本。
<script> 用于嵌入可执行代码或数据；这通常用于嵌入或引用 JavaScript 代码。<script> 元素也可以与其他语言一起使用，例如 WebGL 的 GLSL 着色器编程语言和 JSON。

标记编辑

这些元素允许您提供指示，表明文本的特定部分已被更改。

元素 描述
<del> 表示已从文档中删除的文本范围。例如，这可以在渲染“跟踪更改”或源代码 diff 信息时使用。<ins> 元素可以用于相反的目的：指示已添加到文档的文本。
<ins> 表示已添加到文档的文本范围。您可以使用 <del> 元素类似地表示已从文档中删除的文本范围。

表格内容

这里的元素用于创建和处理表格数据。

元素 描述
<caption> 指定表格的标题（或标题）。
<col> 在由其隐式或显式父 <colgroup> 元素表示的列组中定义一个或多个列。<col> 元素仅在作为 <colgroup> 元素的子元素时有效，该元素没有定义 span 属性。
<colgroup> 在表格中定义一组列。
<table> 表示表格数据——即以二维表格形式呈现的信息，由包含数据的行和列的单元格组成。
<tbody> 封装一组表格行 (<tr> 元素)，指示它们构成表格主体（主要）数据。
<td> 是 <tr> 元素的子元素，它定义表格的一个包含数据的单元格。
<tfoot> 封装一组表格行 (<tr> 元素)，指示它们构成表格脚注，包含有关表格列的信息。这通常是列的摘要，例如，列中给定数字的总和。
<th> 是 <tr> 元素的子元素，它定义单元格作为一组表格单元格的标题。该组的性质可以通过 scope 和 headers 属性明确定义。
<thead> 封装一组表格行 (<tr> 元素)，指示它们构成表格表头，包含有关表格列的信息。这通常以列标题 (<th> 元素) 的形式呈现。
<tr> 定义表格中的一行单元格。然后可以使用 <td>（数据单元格）和 <th>（标题单元格）元素的组合来建立行的单元格。

表单

HTML 提供了几个元素，这些元素可以一起使用来创建用户可以填写并提交到网站或应用程序的表单。有关此的更多信息，请参阅 HTML 表单指南。

元素 描述
<button> 一个交互式元素，由用户使用鼠标、键盘、手指、语音命令或其他辅助技术激活。激活后，它会执行操作，例如提交 表单 或打开对话框。
<datalist> 包含一组 <option> 元素，这些元素表示在其他控件中可供选择的允许或建议的选项。
<fieldset> 用于将多个控件以及标签 (<label>) 分组在 Web 表单中。
<form> 表示一个文档部分，其中包含用于提交信息的交互式控件。
<input> 用于创建用于基于 Web 的表单的交互式控件，以从用户那里接受数据；根据设备和用户代理，可以使用多种类型的输入数据和控件小部件。<input> 元素是所有 HTML 中最强大和最复杂的元素之一，因为输入类型和属性的组合数量众多。
<label> 表示用户界面中项目的标题。
<legend> 表示其父 <fieldset> 内容的标题。
<meter> 表示已知范围内的标量值或分数值。
<optgroup> 在 <select> 元素中创建一组选项。
<option> 用于定义 select、<optgroup> 或 <datalist> 元素中包含的项目。因此，<option> 可以表示 HTML 文档中弹出窗口中的菜单项和其他项目列表。
<output> 容器元素，网站或应用程序可以将计算结果或用户操作的结果注入其中。
<progress> 显示一个指示器，显示任务的完成进度，通常显示为进度条。
<select> 表示一个提供选项菜单的控件。
<textarea> 表示一个多行纯文本编辑控件，当你想要允许用户输入大量的自由格式文本时很有用，例如，对评论或反馈表单的评论。

交互式元素

HTML 提供了一系列元素，有助于创建交互式用户界面对象。

元素 描述
<details> 创建一个显示小部件，其中信息仅在小部件切换到“打开”状态时可见。必须使用 <summary> 元素提供摘要或标签。
<dialog> 表示一个对话框或其他交互式组件，例如可关闭的警报、检查器或子窗口。
<summary> 为 details 元素的显示框指定摘要、标题或图例。单击 <summary> 元素将切换父 <details> 元素的打开和关闭状态。

Web 组件

Web Components 是一种与 HTML 相关的技术，它使得创建和使用自定义元素成为可能，就好像它是普通的 HTML 一样。此外，你可以创建标准 HTML 元素的自定义版本。

元素 描述
<slot> 作为 Web Components 技术套件的一部分，该元素是 Web 组件内的占位符，你可以用自己的标记填充它，这使你可以创建独立的 DOM 树并将它们组合在一起。
<template> 一种用于保存 HTML 的机制，这些 HTML 在页面加载时不会立即呈现，但可以在运行时使用 JavaScript 实例化。

已过时和已弃用的元素

警告：这些是已弃用的旧 HTML 元素，不应该使用。你绝不应该在新的项目中使用它们，并且应该尽快在旧项目中替换它们。它们仅出于完整性考虑在此处列出。

元素 描述
<acronym> 允许作者明确指示构成单词的首字母缩略词或缩写的字符序列。
<big> 以比周围文本大一级别的字体大小呈现封闭的文本（例如，medium 变成 large）。大小上限为浏览器允许的最大字体大小。
<center> 在其包含元素内水平居中显示其块级或内联内容。
<content> 一个已过时的 Web Components 技术套件的一部分 - 在 Shadow DOM 内用作插入点，不打算在普通 HTML 中使用。现在它已被 <slot> 元素取代，该元素在 DOM 中创建了一个可以插入 Shadow DOM 的点。考虑使用 <slot> 而不是它。
<dir> 用于存储文件和/或文件夹的目录，可能应用了用户代理应用的样式和图标。不要使用这个已过时的元素；相反，你应该使用 <ul> 元素来表示列表，包括文件列表。
<font> 为其内容定义字体大小、颜色和字形。
<frame> 定义一个特定区域，可以在其中显示另一个 HTML 文档。框架应该在 <frameset> 中使用。
<frameset> 用于包含 <frame> 元素。
<image> 一个古老且支持不佳的 <img> 元素的前身。它不应该被使用。
<marquee> 用于插入一个滚动文本区域。你可以使用它的属性来控制文本到达其内容区域边缘时会发生什么。
<menuitem> 表示用户可以通过弹出菜单调用的命令。这包括上下文菜单，以及可能附加到菜单按钮的菜单。
<nobr> 防止其包含的文本自动换行，可能导致用户必须水平滚动才能看到文本的整个宽度。
<noembed> 一个已过时的、非标准的方式来为不支持 embed 元素或不支持作者希望使用的 嵌入内容 类型的浏览器提供替代或“回退”内容。该元素在 HTML 4.01 及更高版本中被弃用，取而代之的是将回退内容放置在 <object> 元素的开始和结束标签之间。
<noframes> 提供要向不支持（或禁用了对）<frame> 元素的浏览器呈现的内容。虽然大多数常用的浏览器都支持框架，但也有一些例外，包括某些特殊用途的浏览器，包括一些移动浏览器，以及文本模式浏览器。
<param> 为 <object> 元素定义参数。
<plaintext> 将开始标签之后的任何内容呈现为原始文本，忽略任何后续的 HTML。没有结束标签，因为之后的所有内容都被视为原始文本。
<rb> 用于分隔 ruby 注释的基本文本组件，即正在注释的文本。一个 <rb> 元素应该包含基本文本的每个单独的原子段。
<rtc> 包含在 <ruby> 元素内部使用的 <rb> 元素的 ruby 中呈现的字符的语义注释。 <rb> 元素可以同时具有发音 (<rt>) 和语义 (<rtc>) 注释。
<shadow> Web Components 技术套件中一个已过时的部分，旨在用作 Shadow DOM 插入点。如果你在 Shadow 主机下创建了多个 Shadow 根，你可能已经使用过它。考虑使用 <slot> 而不是它。
<strike> 在文本上放置删除线（水平线）。
<tt> 创建使用用户代理默认等宽字体字形的内联文本。此元素是为呈现文本的目的而创建的，就像它在固定宽度显示器（如电传打字机、纯文本屏幕或行式打印机）上显示一样。
<xmp> 使用等宽字体呈现开始和结束标签之间的文本，而不解释之间的 HTML。HTML2 规范建议它应该呈现得足够宽，以允许每行 80 个字符。

另请参阅