全站最全「HTML5-全部元素标签大全」（建议收藏）正在更新……

Tony_Kan_

已于 2023-02-06 10:35:17 修改

阅读量1.5k

点赞数 4

分类专栏： HTML 文章标签： html 前端 html5 css3 https

于 2022-08-21 12:46:40 首次发布

本文链接：https://blog.csdn.net/Tony_Kan_/article/details/126169797

版权

HTML 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

『主根元素』

HTML元素 表示一个 HTML 文档的根元素，所有其他元素必须是此元素的后代。

<html></html>

『文档元数据』

元数据（Metadata）含有页面的相关信息，包括样式、脚本及数据，能帮助一些，搜索引擎更好地运用和渲染页面。对于样式和脚本的元数据，可以直接在网页里定义，也可以链接到包含相关信息的外部文件。

base元素：

指定用于一个文档中包含的所有相对 URL 的根 URL。一份文件中只能有一个 <base> 元素。

<base href="http://url.com/" target="_blank">

link元素：

引入HTML 外部资源链接元素，经常用于引入CSS样式表。

<link href="/media/examples/link-element-example.css" rel="stylesheet">

meta标签：

元数据（Metadata）是数据的数据信息。

<meta> 标签提供了 HTML 文档的元数据。元数据不会显示在客户端，但是会被浏览器解析。

META元素通常用于指定网页的描述，关键词，文件的最后修改时间，作者及其他元数据。

元数据可以被使用浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他 Web 服务调用。

<head>
<!--网站基本信息，方便搜索引擎爬取数据-->
<meta name="description" content="网站用途">
<meta name="keywords" content="HTML,CSS,XML,JavaScript">
<meta name="author" content="tonykan">

<!--字符编码-->
<meta charset="UTF-8">
</head>

每30秒刷新页面

<meta http-equiv="refresh" content="30">

style标签：

style元素包含文档的样式信息或者文档的部分内容。默认情况下，该标签的样式信息通常是CSS的格式。

<style>
p {
  color: #26b72b;
}
</style>

title元素：

title元素 定义文档的标题，显示在浏览器的标题栏或标签页上。它只应该包含文本，若是包含有标签，则它包含的任何标签都将被忽略。

<title>页面标题</title>

『分区根元素』

body 元素表示文档的内容。document.body 属性提供了可以轻松访问文档的 body 元素的脚本。

<body>
<!--你的网站内容-->
</body>

『内容分区』

内容分区元素允许你将文档内容从逻辑上进行组织划分。使用包括页眉（header）、页脚（footer）、导航（nav）和标题（h1~h6）等分区元素，来为页面内容创建明确的大纲，以便区分各个章节的内容。

元素	描述
<address>	`address`元素表示其中的 HTML 提供了某个人或某个组织（等等）的联系信息。
<article>	article元素表示文档、页面、应用或网站中的独立结构，其意在成为可独立分配的或可复用的结构，如在发布中，它可能是论坛帖子、杂志或新闻文章、博客、用户提交的评论、交互式组件，或者其他独立的内容项目。
<aside>	`aside`元素表示一个和其余页面内容几乎无关的部分，被认为是独立于该内容的一部分并且可以被单独的拆分出来而不会使整体受影响。其通常表现为侧边栏或者标注框（call-out boxes）。
<footer>	footer元素表示最近一个章节内容或者根节点（sectioning root ）元素的页脚。一个页脚通常包含该章节作者、版权数据或者与文档相关的链接等信息。
<header>	`header`元素用于展示介绍性内容，通常包含一组介绍性的或是辅助导航的实用元素。它可能包含一些标题元素，但也可能包含其他元素，比如 Logo、搜索框、作者名称……
<h1>-<h6>	`<h1>`–`<h6>` 标题 (Heading) 元素呈现了六个不同的级别的标题，`<h1>` 级别最高，而 `<h6>` 级别最低。
<main>	`main`元素呈现了文档的 `body` 或应用的主体部分。主体部分由与文档直接相关，或者扩展于文档的中心主题、应用的主要功能部分的内容组成。
<nav>	`nav`元素表示页面的一部分，其目的是在当前文档或其他文档中提供导航链接。导航部分的常见示例是菜单，目录和索引。
<section>	section元素表示 HTML 文档中一个通用独立章节，它没有更具体的语义元素来表示。一般来说会包含一个标题。

『文本分区』

使用 HTML 文本内容元素来组织在开标签 <body> 和闭标签 </body> 里的块或章节的内容。这些元素能标识内容的宗旨或结构，而这对于 accessibility 和 SEO 很重要。

元素	描述
<blockquote>	`blockquote`元素，代表其中的文字是引用内容。通常在渲染时，这部分的内容会有一定的缩进。若引文来源于网络，则可以将原内容的出处 URL 地址设置到 cite 特性上，若要以文本的形式告知读者引文的出处时，可以通过 `cite` 元素。
<dd>	dd元素，用来指明一个描述列表 (dl) 元素中一个术语的描述。这个元素只能作为描述列表元素的子元素出现，并且必须跟着一个 dt 元素。
<div>	`div`元素，是一个通用型的流内容容器，在不使用CSS的情况下，其对内容或布局没有任何影响。
<dl>	`dl`元素，是一个包含术语定义以及描述的列表，通常用于展示词汇表或者元数据。
<dt>	dt元素，用于在一个定义列表中声明一个术语。该元素仅能作为 dl 的子元素出现。通常在该元素后面会跟着 dd 元素，然而，多个连续出现的 <dt> 元素都将由出现在它们后面的第一个 dd 元素定义。
<figcaption>	`figcaption`元素，是与其相关联的图片的说明/标题，用？于描述其父节点 `figure` 元素里的其他数据。这意味着 `<figcaption>` 在`figure` 块里是第一个或最后一个。同时Figcaption 元素是可选的，如果没有该元素，这个父节点的图片只是会没有说明/标题。
<figure>	`figure`元素，代表一段独立的内容，经常与说明（caption），`figcaption` 配合使用，并且作为一个独立的引用单元。当它属于主内容流（main flow）时，它的位置独立于主体。这个标签经常是在主文中引用的图片，插图，表格，代码段等等，当这部分转移到附录中或者其他页面时不会影响到主体。
<hr>	`hr`元素，表示段落级元素之间的主题转换（例如，一个故事中的场景的改变，或一个章节的主题的改变）。
<li>	`li`元素，用于表示列表里的条目。它必须包含在一个父元素里：一个有序列表 (`ol`)，一个无序列表 (`ul`)，或者一个菜单 (`menu`)。在菜单或者无序列表里，列表条目通常用点排列显示；在有序列表里，列表条目通常在左边显示按升序排列的计数，例如数字或者字母。
<menu>	`menu`元素，呈现了一组用户可执行或激活的命令。这既包含了可能出现在屏幕顶端的列表菜单，也包含了那些隐藏在按钮之下、当点击按钮后显示出来的文本菜单。
<ol>	`ol`元素，表示有序列表，通常渲染为一个带编号的列表。
<p>	p元素，表示文本的一个段落。该元素通常表现为一整块与相邻文本分离的文本，或以垂直的空白隔离或以首行缩进。另外，<p> 是块级元素。
<pre>	pre元素，表示预定义格式文本。在该元素中的文本通常按照原文件中的编排，以等宽字体的形式展现出来，文本中的空白符（比如空格和换行符）都会显示出来。
<ul>	ul元素，表示一个内可含多个元素的无序列表或项目符号列表。

『内联文本语义』

使用 HTML 内联文本语义（Inline text semantics）定义一个单词、一行内容，或任意文字的语义、结构或样式。

元素	描述
<a>	a元素（或称锚元素），可以通过它的 href 属性创建通向其他网页、文件、同一页面内的位置、电子邮件地址或任何其他 URL 的超链接。<a> 中的内容应该应该指明链接的意图。如果存在 href 属性，当 <a> 元素聚焦时按下回车键就会激活它。
<abbr>	缩写元素<abbr>，用于代表缩写，并且可以通过可选的 title 属性提供完整的描述。若使用 title 属性，则它必须且仅可包含完整的描述内容。
<b>	提醒注意（Bring Attention To）元素（`<b>`）用于吸引读者的注意到该元素的内容上（如果没有另加特别强调）。这个元素过去被认为是粗体（Boldface）元素，并且大多数浏览器仍然将文字显示为粗体。尽管如此，你不应将 `<b>` 元素用于显示粗体文字；替代方案是使用 CSS `font-weight` 属性来创建粗体文字。
<bdi>	双向隔离元素 ( `<bdi>` ) 告诉浏览器的双向算法将其包含的文本与周围的文本隔离，当网站动态插入一些文本且不知道所插入文本的方向性时，此功能特别有用。
<bdo>	双向文本替代元素 (`<bdo>`) 改写了文本的方向性，使文本以不同的方向渲染呈现出来 (override 可以翻译很多意思，编程语言中多用覆盖，重载。
<br>	br元素，在文本中生成一个换行（回车）符号。此元素在写诗和地址时很有用，这些地方的换行都非常重要。
<cite>	引用（ Citation）标签 (<cite>) 表示一个作品的引用，且必须包含作品的标题。这个引用可能是一个根据适当的上下文约定关联引用的元数据的缩写。
<code>	`code`元素，呈现一段计算机代码。默认情况下，它以浏览器的默认等宽字体显示。
<data>	`data`元素，将一个指定内容和机器可读的翻译联系在一起。但是，如果内容是与时间或者日期相关的，则一定要使用 `time`。
<dfn>	*定义元素* (<dfn>) 表示术语的一个定义。
<em>	着重元素 (`<em>`) 标记出需要用户着重阅读的内容， `<em>` 元素是可以嵌套的，嵌套层次越深，则其包含的内容被认定为越需要着重阅读。
<i>	元素 `<i>` 用于表现因某些原因需要区分普通文本的一系列文本。例如技术术语、外文短语或是小说中人物的思想活动等，它的内容通常以斜体显示。
<kbd>	键盘输入元素 (<kbd>) 用于表示用户输入，它将产生一个行内元素，以浏览器的默认 monospace 字体显示。
<mark>	标记文本元素 (< Mark >) 表示为引用或符号目的而标记或突出显示的文本，这是由于标记的段落在封闭上下文中的相关性或重要性造成的。
<q>	*引用标签* (<q>) 表示一个封闭的并且是短的行内引用的文本。这个标签是用来引用短的文本，所以请不要引入换行符; 对于长的文本的引用请使用 `blockquote` 替代。
<rp>	`rp`元素，用于为那些不能使用 `ruby` 元素展示 ruby 注解的浏览器，提供随后的圆括号。
<rt>	Ruby 文本 (`<rt>`) 元素包含字符的发音，字符在 ruby 注解中出现，它用于描述东亚字符的发音。这个元素始终在 `ruby` 元素中使用。
<ruby>	`ruby`元素，被用来展示拼音或字符注释。
<s>	`s`元素，使用删除线来渲染文本。使用 `<s>` 元素来表示不再相关，或者不再准确的事情。但是当表示文档编辑时，不提倡使用 `<s>``。`
<samp>	samp元素，用于标识计算机程序输出，通常使用浏览器缺省的 monotype 字体（例如 Lucida Console）。
<small>	small元素，將使文本的字体变小一号。(例如从大变成中等，从中等变成小，从小变成超小)。在 HTML5 中，除了它的样式含义，这个元素被重新定义为表示边注释和附属细则，包括版权和法律文本。
<span>	span元素是短语内容的通用行内容器，并没有任何特殊语义。可以使用它来编组元素以达到某种样式意图（通过使用类或者 Id 属性），或者这些元素有着共同的属性，比如lang。应该在没有其他合适的语义元素时才使用它。<span> 与 div 元素很相似，但 div 是一个块元素而 <span> 则是行内元素.
<strong>	strong元素表示文本十分重要，一般用粗体显示。
<sub>	sub元素定义了一个文本区域，出于排版的原因，与主要的文本相比，应该展示得更低并且更小。
<sup>	sup元素定义了一个文本区域，出于排版的原因，与主要的文本相比，应该展示得更高并且更小。
<time>	time标签，用来表示 24 小时制时间或者公历日期，若表示日期则也可包含时间和时区。
<u>	`u`元素（表意不清标注元素）表示一个需要标注为非文本化（non-textual）的内联文本域。默认情况下渲染为一个实线下划线，可以用 CSS 替换。
<var>	var元素表示数学表达式或编程上下文中的变量名称。尽管该行为取决于浏览器，但通常使用当前字体的斜体形式显示。
<wbr>	`wbr`元素，一个文本中的位置，其中浏览器可以选择来换行，虽然它的换行规则可能不会在这里换行。