HTML 元素参考

本页列出了所有使用 tags 创建的 HTML elements。

¥This page lists all the HTML elements, which are created using tags.

它们按功能分组，以帮助你轻松找到你想要的内容。每个元素页面以及本元素页面的侧边栏中都提供了所有元素的字母顺序列表。

¥They are grouped by function to help you find what you have in mind easily. An alphabetical list of all elements is provided in the sidebar on every element's page as well as this one.

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

¥Note: For more information about the basics of HTML elements and attributes, see the section on elements in the Introduction to HTML article.

主根

¥Main root

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

文档元数据

¥Document metadata

元数据包含有关页面的信息。这包括有关样式、脚本和数据的信息，以帮助软件（search engines、browsers 等）使用和呈现页面。样式和脚本的元数据可以在页面中定义或链接到具有该信息的另一个文件。

¥Metadata contains information about the page. This includes information about styles, scripts and data to help software (search engines, browsers, etc.) use and render the page. Metadata for styles and scripts may be defined in the page or linked to another file that has the information.

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

切根

¥Sectioning root

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

内容分段

¥Content sectioning

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

¥Content sectioning elements allow you to organize the document content into logical pieces. Use the sectioning elements to create a broad outline for your page content, including header and footer navigation, and heading elements to identify sections of content.

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

文字内容

¥Text content

使用 HTML 文本内容元素来组织放置在开始 <body> 和结束 </body> 标记之间的内容块或部分。对于 accessibility 和 SEO 来说很重要，这些元素标识了该内容的目的或结构。

¥Use HTML text content elements to organize blocks or sections of content placed between the opening <body> and closing </body> tags. Important for accessibility and SEO, these elements identify the purpose or structure of that content.

元素 描述
<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 文件中写入的方式呈现的预格式化文本。文本通常使用非比例字体或 monospaced 字体呈现。该元素内的空白按书写方式显示。
<ul> 表示项目的无序列表，通常呈现为项目符号列表。

内联文本语义

¥Inline text semantics

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

¥Use the HTML inline text semantic to define the meaning, structure, or style of a word, line, or any arbitrary piece of text.

元素 描述
<a> 与其 href 属性一起创建指向网页、文件、电子邮件地址、当前页面中的位置或 URL 可以寻址的任何其他内容的超链接。
<abbr> 代表缩写词或首字母缩略词。
<b> 用于引起读者对元素内容的注意，这些内容没有特别重要。这以前称为 Boldface 元素，大多数浏览器仍然以粗体绘制文本。但是，你不应该使用 <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> 用于包含表示计算机程序的示例（或引用的）输出的内联文本。其内容通常使用浏览器的默认等宽字体（例如 导游 或 Lucida Console）呈现。
<small> 代表旁注和小字，如版权和法律文本，独立于其风格的呈现。默认情况下，它会将其中的文本渲染为较小的字体大小，例如从 small 到 x-small。
<span> 用于表达内容的通用内联容器，本质上并不代表任何内容。它可用于出于样式目的对元素进行分组（使用 class 或 id 属性），或者因为它们共享属性值，例如 lang。仅当没有其他语义元素合适时才应使用它。<span> 非常类似于 div 元素，但 div 是 块级元素，而 <span> 是 行内元素。
<strong> 表明其内容具有很强的重要性、严肃性或紧迫性。浏览器通常以粗体显示内容。
<sub> 指定仅出于印刷原因应显示为下标的内联文本。下标通常使用较小的文本以较低的基线呈现。
<sup> 指定仅出于印刷原因而显示为上标的内联文本。上标通常使用较小的文本以凸起的基线呈现。
<time> 代表特定的时间段。它可能包括 datetime 属性，用于将日期转换为机器可读的格式，从而获得更好的搜索引擎结果或自定义功能（例如提醒）。
<u> 表示一段内联文本，应以指示其具有非文本注释的方式呈现。默认情况下呈现为简单的实线下划线，但可以使用 CSS 进行更改。
<var> 表示数学表达式或编程上下文中变量的名称。它通常使用当前字体的斜体版本呈现，尽管该行为取决于浏览器。
<wbr> 表示断字机会 - 文本中浏览器可以选择断行的位置，但其断行规则不会在该位置创建断行。

图片与多媒体

¥Image and multimedia

HTML 支持图片、音频、视频等多种多媒体资源。

¥HTML supports various multimedia resources such as images, audio, and video.

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

嵌入内容

¥Embedded content

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

¥In addition to regular multimedia content, HTML can include a variety of other content, even if it's not always easy to interact with.

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

SVG 和 MathML

¥SVG and MathML

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

¥You can embed SVG and MathML content directly into HTML documents, using the <svg> and <math> elements.

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

脚本编写

¥Scripting

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

¥To create dynamic content and Web applications, HTML supports the use of scripting languages, most prominently JavaScript. Certain elements support this capability.

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

划分编辑范围

¥Demarcating edits

这些元素可让你提供文本特定部分已更改的指示。

¥These elements let you provide indications that specific parts of the text have been altered.

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

表内容

¥Table content

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

¥The elements here are used to create and handle tabular data.

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

形式

¥Forms

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

¥HTML provides several elements that can be used together to create forms that the user can fill out and submit to the website or application. Further information about this available in the HTML forms guide.

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

互动元素

¥Interactive elements

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

¥HTML offers a selection of elements that help to create interactive user interface objects.

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

Web 组件

¥Web Components

Web 组件是一种与 HTML 相关的技术，本质上可以像常规 HTML 一样创建和使用自定义元素。此外，你还可以创建标准 HTML 元素的自定义版本。

¥Web Components is an HTML-related technology that makes it possible to, essentially, create and use custom elements as if it were regular HTML. In addition, you can create custom versions of standard HTML elements.

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

过时和弃用的元素

¥Obsolete and deprecated elements

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

¥Warning: These are old HTML elements that are deprecated and should not be used. You should never use them in new projects, and you should replace them in old projects as soon as you can. They are listed here for completeness only.

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

也可以看看

¥See also