HTML 元素帮助手册

简介: 此页面列出了所有使用标签创建的 HTML 元素。它们已被按照功能进行分组,以便更轻松地找到你想要的内容。同时,侧边栏中也按照字母排序列出了所有元素。

#HTML 元素帮助手册

转载自 MDN

#主根元素

元素 描述
html 表示一个 HTML 文档的根(顶级元素),所以它也被称为根元素。所有其它元素必须是此元素的后代。

#文档元数据

元素 描述
base 指定用于一个文档中包含的所有相对 URL 的根 URL。一份中只能有一个该元素。
head 包含文档相关的配置信息(元数据),包括文档的标题、脚本和样式表等。
link 指定当前文档与外部资源的关系。该元素最常用于链接 CSS,此外也可以被用来创建站点图标(比如“favicon”样式图标和移动设备上用以显示在主屏幕的图标)。
meta 表示那些不能由其它 HTML 元相关(meta-related)元素表示的元数据信息。如:[base]、[link]、[script]、[style] 或 [title]。
style 包含文档或者文档部分内容的样式信息,它们会被应用于包含此元素的文档。
title 定义文档的标题,显示在浏览器的标题栏或标签页上。它只应该包含文本,若是包含有标签,则它包含的任何标签都将被忽略。

#分区根元素

元素 描述
body 表示文档的内容。文档中只能有一个该元素。

#内容分区

元素 描述
address 表示其中的 HTML 提供了某个人、某些人或某个组织(等等)的联系信息。
article 表示文档、页面、应用或网站中的独立结构,旨在成为可独立分配的或可复用的结构,如在发布中,它可能是论坛帖子、杂志或新闻文章、博客、用户提交的评论、交互式组件,或者其它独立的内容项目。
aside 表示文档的一部分,其内容仅与文档的主要内容间接相关。其通常以侧边栏或标注框(call-out box)的形式出现。
footer 表示最近的一个父分段内容或分段的根元素的页脚。[footer] 通常包含该章节作者、版权数据或者与文档相关的链接等信息。
header 表示介绍性内容,通常包含一组介绍性的或是辅助导航的实用元素。它可能包含一些标题元素,但也可能包含其它元素,比如 Logo、搜索框、作者名称和其它元素。
h1 h2 h3 h4 h5 h6 表示六个不同的级别的章节标题,[h1] 级别最高,而 [h6] 级别最低。
main 呈现了文档正文的主体部分。主体部分由与文档直接相关,或者扩展于文档的中心主题、应用的主要功能部分的内容组成。
nav 表示页面的一部分,其目的是在当前文档或其它文档中提供导航链接。导航部分的常见示例是菜单、目录和索引。
section 表示 HTML 文档中一个通用独立章节,它没有更具体的语义元素来表示。一般来说会包含一个标题。

#文本内容

元素 描述
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 表示一系列无序的列表项目,通常渲染为项目符号列表。

#内联文本语义

元素 描述
a 可以通过它的 href 属性创建通向其它网页、文件、电子邮件地址、同一页面内的位置或任何其它 URL 的超链接。
abbr 用于代表缩写。
b 用于吸引读者的注意到该元素的内容上(如果没有另加特别强调)。这个元素过去被认为是粗体(Boldface)元素,并且大多数浏览器仍然将文字显示为粗体。尽管如此,你不应将 [b] 元素用于显示粗体文字;替代方案是使用 CSS font-weight 属性来创建粗体文字。
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 文本组件,用于描述东亚字符的发音、翻译或音译信息。该元素始终在 [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 表示一个需要标注为非文本化(non-textual)的内联文本域。默认情况下渲染为一个实线下划线,但可以用 CSS 替换。
var 表示数学表达式或编程上下文中的变量名称。尽管该行为取决于浏览器,但通常使用当前字体的斜体形式显示。
wbr 一个文本中的位置,其中浏览器可以选择来换行,虽然它的换行规则可能不会在这里换行。

#图片和多媒体

元素 描述
area 在图片上定义一个可点击区域。图像映射(image map)允许图像上的几何区域与超链接关联。
audio 用于在文档中嵌入音频内容。它可以包含一个或多个音频资源,这些音频资源可以使用 src 属性或者 source 元素来进行表示:浏览器将会选择最合适的一个来使用。也可以使用 MediaStream 将这个元素用于流式媒体。
img 将一张图像嵌入文档。
map 与 [area] 元素一起使用,以定义一个图像映射(可点击链接区域)。
track 被当作媒体元素——音频(audio)和视频(video)的子元素来使用。它允许指定时序文本轨道(或者基于时间的数据),例如自动处理字幕。轨道格式有 WebVTT 格式(.vtt 格式文件)——Web 视频文本轨格式。
video 用于在文档中嵌入媒体播放器,支持文档内的视频播放。你也可以将 [video] 标签用于音频内容,但是 audio 元素可能在用户体验上更合适。

#内嵌内容

元素 描述
embed 将外部内容嵌入文档中的指定位置。此内容由外部应用程序或其他交互式内容源(如浏览器插件)提供。
iframe 表示嵌套的浏览上下文。它能够将另一个 HTML 页面嵌入到当前页面中。
object 表示引入一个外部资源,这个资源可能是一张图片、嵌入的浏览上下文,亦或是一个插件所使用的资源。
picture 通过包含零或多个 [source] 元素和一个 [img] 元素来为不同的显示/设备场景提供图像版本。
portal 允许将另一个 HTML 页面嵌入到当前页面中,以便更流畅地导航到新页面。
source 为 picture、audio 或 video 元素指定多个媒体资源。这是一个空元素,这意味着它没有内容,也没有封闭标签。它通常用于以多种格式提供相同的媒体内容,以提供不同浏览器的兼容性,因为浏览器对图像文件和媒体文件格式的支持不同。

#SVG 和 MathML

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

#脚本

元素 描述
canvas 用来通过 canvas scripting API 或 WebGL API 绘制图形及图形动画的容器元素。
noscript 定义脚本未被执行时(页面的脚本类型不受支持,或当前浏览器关闭了脚本)的替代内容。
script 用于嵌入可执行脚本或数据。这通常用作嵌入或者引用 JavaScript 代码。[script] 元素也能在其他语言中使用,比如 WebGL 的 GLSL 着色器语言和 JSON。

#编辑标识

元素 描述
del 表示一些被从文档中删除的文本内容。比如可以在需要显示修改记录或者源代码差异的情况使用这个标签。[ins] 标签的作用恰恰与此相反:表示文档中添加的文本。
ins 表示一些添加到文档中的文本内容。你可以使用 [del] 元素来类似地表示已从文档中删除的文本。

#表格内容

元素 描述
caption 指定表格的标题。
col 定义表格中的列,并用于定义所有公共单元格上的公共语义。它通常位于 [colgroup] 元素内。
colgroup 定义表中的一组列表。
table 表示表格数据——即通过二维(由行和列组成)数据表表示的信息。
tbody 封装了一系列表格的行([tr] 元素),代表了它们是表格([table])主要内容的组成部分。
td 定义了一个包含数据的表格单元格。它是表格模型(table model)的一部分。
tfoot 定义了一组表格中各列的汇总行。
th 定义表格内的表头单元格。这部分特征是由 scope 和 headers 属性准确定义的。
thead 定义了一组定义表格的列头的行。
tr 定义表格中的行。同一行可同时出现 [td](数据单元格)和 [th](列头单元格)元素。

#表单

元素 描述
button 一个可交互元素(可通过用户的鼠标、键盘、手指、声音指令或其他辅助技术激活)。一旦被激活,它就会执行一个动作,例如提交表单或打开对话框。
datalist 包含了一组 [option] 元素,这些元素表示其它表单控件可选值。
fieldset 用于对 web 表单中的控件和标签([label])进行分组。
form 表示文档中的一个区域,此区域包含交互控件,用于向 Web 服务器提交信息。
input 用于为基于 Web 的表单创建交互式控件,以便接受来自用户的数据。取决于设备和用户代理的不同,表单可以使用各种类型的输入数据和控件。[input] 元素是目前是 HTML 中最强大、最复杂的元素之一,因为它有大量的输入类型和属性组合。
label 表示用户界面中某个元素的说明。
legend 用于表示其父元素 [fieldset] 的内容标题。
meter 用来显示已知范围的标量值或者分数值。
optgroup 为 [select] 元素中的选项创建分组。
option 用于定义在 select、[optgroup] 或 [datalist] 元素中包含的选项。[option] 可以在弹出窗口和 HTML 文档中的其他项目列表中表示菜单项。
output 网站或应用程序可以将计算或用户操作的结果注入其中的容器元素。
progress 用来显示一项任务的完成进度,通常情况下该元素显示为一个进度条。
select 表示一个提供选项菜单的控件。
textarea 表示一个多行纯文本编辑控件,当你希望用户输入一段相当长的、不限格式的文本,例如评论或反馈表单中的一段意见时,这很有用。

#交互元素

元素 描述
details 创建一个挂件,仅在被切换成“展开”状态时,它才会显示内含的信息。必须使用 [summary] 元素为该部件提供概要或者标签。
dialog 表示一个对话框或其他交互式组件,例如一个可关闭警告、检查器或者窗口。
summary 用作 details 元素内容的摘要、标题或图例。点击 [summary] 元素会翻转父元素 [details] 的展开和关闭状态。

#Web 组件

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

#过时的和弃用的元素

元素 描述
acronym 允许作者明确地声明一个字符序列,它们构成一个单词的首字母缩写或简略语。
bgsound 设置一个音频文件,以在使用页面时在后台播放;请使用 [audio] 代替。
big 以比周围文本大一号的字体渲染其封闭的文本(例如,medium 变 large)。最大不超过浏览器允许的最大字体。
center 以水平居中的形式显示包含在元素中的块级或内联内容。
content Web 组件技术套件的废弃部分——用于 Shadow DOM 内部作为插入点,并且不可用于任何正常的 HTML。现在已被 [slot] 元素代替,它在 DOM 中创建一个位置,Shadow DOM 会插入这里。
dir 被作为一个文件和/或文件夹的目录的容器,可能还有用户代理应用的样式与图标。请不要使用此过时的元素;请使用用于列表的 [ul] 元素代替,包含文件列表。
font 定义内容的字体大小、颜色与外观。
frame 定义一个特定区域,另一个 HTML 文档可以在里面展示。frame 应该在 [frameset] 中使用。
frameset 用于包含 [frame] 元素。
image [img] 元素古老而又缺乏支持的前身。它不应被使用。
marquee 用来插入一段滚动的文字。你可以使用它的属性控制当文本到达容器边缘发生的事情。
menuitem 表示一个用户可以通过弹出式菜单来执行的命令。这包括上下文菜单,以及按钮可能附带的菜单。
nobr 阻止文本自动拆分成新行,可能导致用户必须水平滚动才能看到文本的所有内容。
noembed 是个废除的和不标准的方式,用于向不支持 [embed] 或不支持作者希望的嵌入内容的浏览器提供替代(回退)内容。这个元素在 HTML 4.01 起废除,后备内容应该插在 [object] 的开始和结束标签之间。
noframes 在不支持(或禁用支持)[frame] 元素的浏览器中提供要显示的内容。虽然大多数常用浏览器都支持 frame,但也有例外,包括一些特殊用途的浏览器(移动终端的浏览器和文本模式浏览器)。
param 为 [object] 元素定义参数。
plaintext 将起始标签后面的任何东西渲染为纯文本,忽略随后的任何 HTML 内容。它没有闭合标签,因为任何后面的东西都会看做纯文本。
rb 用于分隔 ruby 注解的基本文本组件(即正在注解的文本)。一个 [rb] 元素应该包装基本文本的每个单独的原子段。
rtc 包含文字的语义注解,用于在 [rb] 元素中展示。[rb] 元素可以拥有发音([rt])和语义([rtc])注解。
shadow Web 组件技术套件的废弃部分——目的是用作 Shadow DOM 插入点。如果你在 shadow host 下面创建了多个 shadow root,你就可能已经使用了它。
strike 在文本上放置水平的删除线。
tt 创建内联文本,使用用户代理默认的等宽字体渲染。这个元素用于给文本排版,使其等宽展示,就像电报、纯文本屏幕或行式打印机那样。
xmp 渲染在开始和结束标签之间的文本,而不解释中间的 HTML 内容,并使用等宽字体。HTML2 规范建议它应该渲染得足够宽以允许每行 80 个字符。

HTML 元素帮助手册》 是转载文章,点击查看原文

相关文章
|
20天前
|
API
Lua 的 Math 模块
这个库提供了基本的数学函数。 所以函数都放在表 math 中。 注解有 "integer/float" 的函数会对整数参数返回整数结果, 对浮点(或混合)参数返回浮点结果。 圆整函数(math.ceil, math.floor, math.modf) 在结果在整数范围内时返回整数,否则返回浮点数。
|
2月前
|
敏捷开发 测试技术 API
测试金字塔:构建高效自动化测试策略的基石
测试金字塔:构建高效自动化测试策略的基石
240 116
|
17天前
|
人工智能 机器人 API
🤖 AstrBot 安卓 App:让每一个普通人都能拥有自己的 AI 聊天机器人
🤖 AstrBot 安卓 App:让每一个普通人都能拥有自己的 AI 聊天机器人
455 5
🤖 AstrBot 安卓 App:让每一个普通人都能拥有自己的 AI 聊天机器人
|
17天前
|
机器学习/深度学习 人工智能 API
构建AI智能体:二十四、RAG的高效召回方法论:提升RAG系统召回率的三大策略实践
本文探讨了检索增强生成(RAG)系统中的高效召回技术。RAG系统通过检索相关文档增强大语言模型的回答质量,但性能受制于垃圾进,垃圾出原则。为提高召回效果,文章重点分析了三种方法:Small-to-Big通过大小文本块映射兼顾检索精度与上下文丰富度;索引扩展(如HyDE)利用大模型生成假设文档来优化检索;双向改写弥合用户查询与文档表述的差异。这些方法从不同角度解决了RAG系统中的语义鸿沟、词汇不匹配等核心问题,可单独或组合使用。高效召回技术能显著提升RAG系统的回答质量和效率。
183 5
|
9天前
|
C++ Python
Qt Theme —— 纯 qss 的 Qt 主题
Qt Theme 是一个纯 QSS 实现的 Qt 主题库,支持 C++ 与 Python(PyQt/PySide),提供多种风格与配色,轻松美化界面。可通过 pip 安装或导出资源嵌入项目,兼容 WebAssembly 在线预览。
164 109
|
19天前
|
缓存 监控 Java
用 Spring Boot 3 构建高性能 RESTful API 的 10 个关键技巧
本文介绍使用 Spring Boot 3 构建高性能 RESTful API 的 10 大关键技巧,涵盖启动优化、数据库连接池、缓存策略、异步处理、分页查询、限流熔断、日志监控等方面。通过合理配置与代码优化,显著提升响应速度、并发能力与系统稳定性,助力打造高效云原生应用。
359 3
|
20天前
|
传感器 运维 监控
基于北斗和蓝牙beacon的室内北斗定位系统从原理到应用全面详解(一)
本文介绍基于北斗与蓝牙beacon的室内定位系统,融合卫星与蓝牙技术优势,实现室内外无缝覆盖、多精度分级、低成本部署及多功能扩展,适用于工厂、园区等全域定位场景。
217 1
|
7天前
|
移动开发 前端开发 JavaScript
Canvas 绘图基础
Canvas是HTML5的绘图API,通过JavaScript实现像素级图形、动画和游戏开发。支持矩形、路径、圆形、文本、图像及渐变绘制,结合requestAnimationFrame可制作高性能动画,广泛应用于数据可视化、游戏与交互设计。
253 11
|
20天前
|
人工智能 Android开发 iOS开发
MNN × Qwen 实战:离线运行大模型的正确姿势
本期教程带你用MNN+Qwen在手机端部署大模型,从安装MNN Chat体验离线对话,到源码编译、模型转换与推理测试,再到Android/iOS移动端部署全流程实战,并提供精度与性能调优秘籍,助力端侧AI创新挑战赛。
487 24
|
20天前
|
Java 数据库 微服务
Java 学习路线可按「基础→进阶→实战→架构」四阶段推进
Java学习路线分四阶段:基础→进阶→实战→架构。涵盖语法、多线程、框架、微服务等核心内容,搭配项目实战与学习技巧,助你系统掌握Java开发技能,逐步成长为高级工程师。(238字)
153 4

热门文章

最新文章