HTML 元素参考 - HTML | MDN

主根

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

文档元数据

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

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

分区根

Element	描述
`<body>`	表示 HTML 文档的内容。文档中只能有一个此类元素。

内容分区

内容分区元素允许您将文档内容组织成逻辑片段。使用分区元素为页面内容创建大致轮廓，包括页眉和页脚导航，以及标题元素来标识内容部分。

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

文本内容

使用 HTML 文本内容元素组织放置在开放 <body> 和闭合 </body> 标签之间的块或内容部分。对于可访问性和SEO很重要，这些元素标识该内容的用途或结构。

Element	描述
`<blockquote>`	指示封闭的文本是扩展引用。通常，这通过缩进在视觉上呈现。引用来源的 URL 可以使用 `cite` 属性给出，而来源的文本表示可以使用 `<cite>` 元素给出。
`<dd>`	为描述列表（`<dl>`）中前面的术语（`<dt>`）提供描述、定义或值。
`<div>`	流内容的通用容器。它对内容或布局没有影响，除非使用 CSS 进行样式化（例如，直接对其应用样式，或对其父元素应用某种布局模型，如弹性盒）。
`<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 内联文本语义定义单词、行或任何任意文本片段的含义、结构或样式。

Element	描述
`<a>`	与 `href` 属性一起，创建指向网页、文件、电子邮件地址、当前页面中的位置或 URL 可以寻址的任何其他内容的超链接。
`<abbr>`	表示缩写或首字母缩略词。
`<b>`	用于吸引读者对元素内容的注意，否则不赋予特殊重要性。这以前被称为粗体元素，大多数浏览器仍然以粗体显示文本。但是，您不应使用 `<b>` 进行文本样式化或赋予重要性。如果您希望创建粗体文本，应使用 CSS `font-weight` 属性。如果您希望指示元素具有特殊重要性，应使用 `<strong>` 元素。
`<bdi>`	告诉浏览器的双向算法将其包含的文本与其周围文本隔离处理。当网站动态插入某些文本且不知道插入文本的方向性时，它特别有用。
`<bdo>`	覆盖文本的当前方向性，以便其中的文本以不同的方向呈现。
`<br>`	在文本中生成换行符（回车）。它对于撰写诗歌或地址很有用，其中行划分很重要。
`<cite>`	用于标记创意作品的标题。参考文献可以根据上下文相关引用元数据约定以缩写形式出现。
`<code>`	以指示文本是计算机代码的短片段的方式显示其内容。默认情况下，内容文本使用用户代理的默认等宽字体显示。
`<data>`	将给定内容与机器可读的翻译链接。如果内容与时间或日期相关，则必须使用 `<time>` 元素。
`<dfn>`	用于指示定义短语或句子上下文中正在定义的术语。祖先 `<p>` 元素，`<dt>`/`<dd>` 配对，或 `<dfn>` 元素最近的节祖先，被认为是术语的定义。
`<em>`	标记具有强调重音的文本。`<em>` 元素可以嵌套，每个嵌套级别表示更高程度的强调。
`<i>`	表示由于某种原因（例如惯用文本、技术术语和分类名称等）而与普通文本区分开的一段文本。历史上，这些文本一直使用斜体字呈现，这是此元素命名为 `<i>` 的最初来源。
`<kbd>`	表示一段内联文本，表示来自键盘、语音输入或任何其他文本输入设备的用户文本输入。按照惯例，用户代理默认使用其默认等宽字体呈现 `<kbd>` 元素的内容，尽管 HTML 标准并未强制要求。
`<mark>`	表示由于标记段落在封闭上下文中的相关性而被标记或突出显示以供参考或注释的文本。
`<q>`	表示封闭文本是一个短的内联引用。大多数现代浏览器通过在文本周围加上引号来实现此功能。此元素适用于不需要段落分隔符的短引用；对于长引用，请使用 `<blockquote>` 元素。
`<rp>`	用于为不支持使用 `<ruby>` 元素显示 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 支持各种多媒体资源，例如图像、音频和视频。

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

嵌入内容

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

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

SVG 和 MathML

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

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

脚本

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

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

标示编辑

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

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

表格内容

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

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

表单

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

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

交互元素

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

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

Web Components

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

Element	描述
`<slot>`	作为 Web Components 技术套件的一部分，此元素是 Web Component 中的一个占位符，您可以用自己的标记填充它，这允许您创建单独的 DOM 树并将它们一起呈现。
`<template>`	一种用于保存 HTML 的机制，该 HTML 不在页面加载时立即渲染，但可以在运行时通过 JavaScript 随后实例化。

废弃和弃用元素

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

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

另见

Element 接口

帮助改进 MDN

了解如何贡献

此页面最后由 MDN 贡献者于 2025 年 7 月 9 日修改。

在 GitHub 上查看此页面 • 报告此内容问题