本文转载MDN HTML元素参考
主根元素
html
- HTML
<html>元素 表示一个 HTML 文档的根（顶级元素），所以它也被称为根元素。所有其他元素必须是此元素的后代。 - 示例
<!DOCTYPE html>
<html lang="zh">
<head>...</head>
<body>...</body>
</html>
复制代码文档元素据
base
- HTML
<base>元素 指定用于一个文档中包含的所有相对 URL 的根 URL。一份中只能有一个<base>元素。 - 示例
<base href="http://www.example.com/">
<base target="_blank">
<base target="_top" href="http://www.example.com/">
复制代码head
- HTML
<head>元素 规定文档相关的配置信息（元数据），包括文档的标题，引用的文档样式和脚本等。 - 示例
<html>
<head>
<title>文档标题</title>
</head>
</html>
复制代码link
- HTML
<link>外部资源链接元素 规定了当前文档与外部资源的关系。该元素最常用于链接样式表，此外也可以被用来创建站点图标 (比如 PC 端的 “favicon” 图标和移动设备上用以显示在主屏幕的图标) 。 - 示例
// 引入一个css文件
<link href="style.css" rel="stylesheet">
// 提供可替换的样式表
<link href="default.css" rel="stylesheet" title="Default Style">
<link href="fancy.css" rel="alternate stylesheet" title="Fancy">
<link href="basic.css" rel="alternate stylesheet" title="Basic">
// 提供用于不同用法上下文的图标
<!-- 配备高分辨率Retina显示屏的第三代iPad: -->
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="favicon144.png">
<!-- 高分辨率Retina显示屏的iPhone: -->
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="favicon114.png">
<!-- 第一代和第二代iPad: -->
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="favicon72.png">
<!-- 非Retina iPhone, iPod Touch和Android 2.1+设备: -->
<link rel="apple-touch-icon-precomposed" href="favicon57.png">
<!-- 基本的图标 -->
<link rel="icon" href="favicon32.png">
// 通过媒体查询有条件地加载资源
<link href="print.css" rel="stylesheet" media="print">
<link href="mobile.css" rel="stylesheet" media="all">
<link href="desktop.css" rel="stylesheet" media="screen and (min-width: 600px)">
<link href="highres.css" rel="stylesheet" media="screen and (min-resolution: 300dpi)">
// 样式表加载事件
<script>
function sheetLoaded() {
// Do something interesting; the sheet has been loaded
}
function sheetError() {
alert("加载样式表时发生错误!");
}
</script>
<link rel="stylesheet" href="mystylesheet.css" onload="sheetLoaded()" onerror="sheetError()">
复制代码meta
- HTML
<meta>元素 表示那些不能由其它 HTML 元相关元素（base、link,script、style或title）之一表示的任何Metadata信息。 - 示例
<meta charset="utf-8">
<!-- 3秒后重定向页面 -->
<meta http-equiv="refresh" content="3;url=https://www.mozilla.org">
复制代码style
- HTML
<style>元素 包含文档的样式信息或者文档的部分内容。默认情况下，该标签的样式信息通常是 CSS 的格式。 - 示例
<!doctype html>
<html>
<head>
<style>
p {
color: red;
}
</style>
</head>
<body>
<p>一个简单的样式表</p>
</body>
</html>
复制代码<!doctype html>
<html>
<head>
<style>
p {
color: white;
background-color: blue;
padding: 5px;
border: 1px solid black;
}
</style>
<style>
p {
color: blue;
background-color: yellow;
}
</style>
</head>
<body>
<p>多种样式元素</p>
</body>
</html>
复制代码<!doctype html>
<html>
<head>
<style>
p {
color: white;
background-color: blue;
padding: 5px;
border: 1px solid black;
}
</style>
<style media="all and (max-width: 500px)">
p {
color: blue;
background-color: yellow;
}
</style>
</head>
<body>
<p>包含媒体选择</p>
</body>
</html>
复制代码title
- HTML
<title>元素 定义文档的标题，显示在Browser的标题栏或标签页上。它只应该包含文本，若是包含有标签，则它包含的任何标签都将被忽略。 - 示例
// 建立一个页面，其标题（如显示在窗口顶部或在窗口的选项卡中）为 “Amazing！”
<title>Amazing！</title>
复制代码分区根元素
body
- HTML
body元素 表示文档的内容。document.body属性提供了可以轻松访问文档的 body 元素的脚本。 - 示例
<!doctype html>
<html>
<head>
<title>文档标题</title>
</head>
<body>
<p>这是一个段落</p>
</body>
</html>
复制代码内容分区
内容分区元素允许你将文档内容从逻辑上进行组织划分。使用包括页眉（header）、页脚（footer）、导航（nav）和标题（h1~h6）等分区元素，来为页面内容创建明确的大纲，以便区分各个章节的内容。
address
- HTML
<address>元素 表示其中的 HTML 提供了某个人或某个组织（等等）的联系信息。 - 示例
article
- HTML
<article>元素 表示文档、页面、应用或网站中的独立结构，其意在成为可独立分配的或可复用的结构，如在发布中，它可能是论坛帖子、杂志或新闻文章、博客、用户提交的评论、交互式组件，或者其他独立的内容项目。 - 示例
aside
- HTML
<aside>元素 表示一个和其余页面内容几乎无关的部分，被认为是独立于该内容的一部分并且可以被单独的拆分出来而不会使整体受影响。其通常表现为侧边栏或者标注框（call-out boxes）。 - 示例
footer
- HTML
<footer>元素 表示最近一个 章节内容 或 者根节点（sectioning root ）元素的页脚。一个页脚通常包含该章节作者、版权数据或者与文档相关的链接等信息。 - 示例
header
- HTML
<header>元素 用于展示介绍性内容，通常包含一组介绍性的或是辅助导航的实用元素。它可能包含一些标题元素，但也可能包含其他元素，比如 Logo、搜索框、作者名称，等等。 - 示例
// 页面的 Header
<header>
<h1>主页标题</h1>
<img src="mdn-logo-sm.png" alt="MDN logo">
</header>
// 文章的 Header
<article>
<header>
<h2>地球</h2>
<p>简·史密斯于2017年10月4日周三发布</p>
</header>
<p>我们生活在一个蓝色和绿色的星球上，还有很多看不到的东西。</p>
<p><a href="https://janesmith.com/the-planet-earth/">继续阅读....</a></p>
</article>
复制代码h1,h2,h3,h4,h5,h6
- HTML
<h1>–<h6>元素 呈现了六个不同的级别的标题，<h1>级别最高，而<h6>级别最低。 - 示例
<h1>一级</h1>
<h2>二级</h2>
<h3>三级</h3>
<h4>四级</h4>
<h5>五级</h5>
<h6>六级</h6>
复制代码main
- HTML
<main>元素 呈现了文档的body或应用的主体部分。主体部分由与文档直接相关，或者扩展于文档的中心主题、应用的主要功能部分的内容组成。 - 示例
<header>Gecko facts</header>
<main>
<p>Geckos are a group of usually small, usually nocturnal lizards. They are found on every continent except Australia.</p>
<p>Many species of gecko have adhesive toe pads which enable them to climb walls and even windows.</p>
</main>
复制代码nav
- HTML
<nav>元素 表示页面的一部分，其目的是在当前文档或其他文档中提供导航链接。导航部分的常见示例是菜单，目录和索引。 - 示例
section
- HTML
<section>元素 表示一个包含在 HTML 文档中的独立部分，它没有更具体的语义元素来表示，一般来说会有包含一个标题。 - 示例
<h1>选择一个苹果</h1>
<section>
<h2>介绍</h2>
<p>本文档提供了一个指南，帮助您选择正确的苹果产品。</p>
</section>
<section>
<h2>标准</h2>
<p>选择苹果有许多不同的标准要考虑——大小、颜色、紧实度、甜度、酸味...</p>
</section>
复制代码文本内容
使用 HTML 文本内容元素来组织在开标签 <body> 和闭标签 </body> 里的块或章节的内容。这些元素能标识内容的宗旨或结构，而这对于 accessibility 和 SEO 很重要。
blockquote
- HTML
<blockquote>元素（或者 HTML 块级引用元素），代表其中的文字是引用内容。通常在渲染时，这部分的内容会有一定的缩进。若引文来源于网络，则可以将原内容的出处 URL 地址设置到 cite 特性上，若要以文本的形式告知读者引文的出处时，可以通过cite元素。 - 示例
dl
- HTML
<dl>元素 （或 HTML 描述列表元素）是一个包含术语定义以及描述的列表，通常用于展示词汇表或者元数据 (键 - 值对列表)。 - 示例
<!-- 单条术语与描述 -->
<dl>
<dt>火狐</dt>
<dd>
由Mozilla公司和数百名志愿者共同开发的免费、开源、跨平台、图形化网络浏览器。
</dd>
</dl>
<!-- 多条术语，单条描述 -->
<dl>
<dt>火狐</dt>
<dt>Mozilla Firefox</dt>
<dt>Fx</dt>
<dd>
由Mozilla公司和数百名志愿者共同开发的免费、开源、跨平台、图形化网络浏览器。
</dd>
</dl>
<!-- 单条术语，多条描述 -->
<dl>
<dt>Firefox</dt>
<dd>
由Mozilla公司和数百名志愿者共同开发的免费、开源、跨平台、图形化网络浏览器。
</dd>
<dd>
小熊猫也被称为小熊猫，Wah，熊猫或Firefox，是一种主要食草哺乳动物，比家猫略大(60厘米长)。
</dd>
</dl>
复制代码dd
- HTML
<dd>元素（HTML 描述元素）用来指明一个描述列表 (dl) 元素中一个术语的描述。这个元素只能作为描述列表元素的子元素出现，并且必须跟着一个dt元素。 - 示例
请参考 <dl> 页面以查看 <dd> 的示例
复制代码dt
- HTML
<dt>元素 （或 HTML 术语定义元素）用于在一个定义列表中声明一个术语。该元素仅能作为dl的子元素出现。通常在该元素后面会跟着dd元素， 然而，多个连续出现的<dt>元素都将由出现在它们后面的第一个dd元素定义。 - 示例
请参考 <dl> 页面以查看 <dt> 的示例
复制代码div
- HTML
<div>元素 (或 HTML 文档分区元素) 是一个通用型的流内容容器，在不使用CSS的情况下，其对内容或布局没有任何影响。 - 示例
figure
- HTML
<figure>元素 代表一段独立的内容，经常与说明（caption）figcaption配合使用，并且作为一个独立的引用单元。当它属于主内容流（main flow）时，它的位置独立于主体。这个标签经常是在主文中引用的图片，插图，表格，代码段等等，当这部分转移到附录中或者其他页面时不会影响到主体。 - 示例
figcaption
- HTML
<figcaption>元素 是与其相关联的图片的说明/标题，用？于描述其父节点figure元素里的其他数据。这意味着<figcaption>在figure块里是第一个或最后一个。同时 HTML Figcaption 元素是可选的；如果没有该元素，这个父节点的图片只是会没有说明/标题。 - 示例
hr
- HTML
<hr>元素 表示段落级元素之间的主题转换（例如，一个故事中的场景的改变，或一个章节的主题的改变）。 - 示例
<p>
这是文章的第一段。
这是文章的第一段。
这是文章的第一段。
这是文章的第一段。
</p>
<hr>
<p>
这是文章的第二段。
这是文章的第二段。
这是文章的第二段。
这是文章的第二段。
</p>
复制代码p
- HTML
<p>元素（或者说 HTML 段落元素）表示文本的一个段落。该元素通常表现为一整块与相邻文本分离的文本，或以垂直的空白隔离或以首行缩进。另外，<p>是块级元素。 - 示例
<p>这是第一个段落。这是第一个段落。元素的 align 属性已被弃用，请不要使用。</p>
<p>这是第二个段落。这是第二个段落。元素的 align 属性已被弃用，请不要使用。</p>
复制代码pre
- HTML
<pre>元素 表示预定义格式文本。在该元素中的文本通常按照原文件中的编排，以等宽字体的形式展现出来，文本中的空白符（比如空格和换行符）都会显示出来。(紧跟在<pre>开始标签后的换行符也会被省略) - 示例
<figure role="img" aria-labelledby="cow-caption">
<pre>
___________________________
< 我是这个领域的专家。 >
---------------------------
\ ^__^
\ (oo)\_______
(__)\ )\/\
||----w |
|| ||
</pre>
<figcaption id="cow-caption">
一头牛说:“我是这个领域的专家。”奶牛使用预先格式化的文本字符进行说明。
</figcaption>
</figure>
复制代码ul
- HTML
<ul>元素（或称 HTML 无序列表元素）表示一个内可含多个元素的无序列表或项目符号列表。 - 示例
// 简单的例子
<ul>
<li>第一项</li>
<li>第二项</li>
<li>第三项</li>
</ul>
// 嵌套列表
<ul>
<li>第一项</li>
<li>第二项
<ul>
<li>第二项的第一个子项目</li>
<li>第二个项的第二个子项目
<ul>
<li>第二项，第二分项，第一分项</li>
<li>第二个项目，第二个分项，第二个分项</li>
<li>第二项，第二分项，第三分项</li>
</ul>
</li>
<li>第二项的第三子项目</li>
</ul>
</li>
<li>第三项</li>
</ul>
// 嵌套<ul>和<ol>
<ul>
<li>第一项</li>
<li>第二项
<ol>
<li>第二项第一个子项目</li>
<li>第二项第二个子项目</li>
<li>第二项第三个子项目</li>
</ol>
</li>
<li>第三项</li>
</ul>
复制代码ol
- HTML
<ol>元素 表示有序列表，通常渲染为一个带编号的列表。 - 示例
// 简单示例
<ol>
<li>Fee</li>
<li>Fi</li>
<li>Fo</li>
<li>Fum</li>
</ol>
// 使用小写罗马数字编号
<ol type="i">
<li>介绍</li>
<li>列表</li>
<li>结论</li>
</ol>
// 使用start属性
<p>选手的终点位置不在获胜者的圈子里:</p>
<ol start="4">
<li>Speedwalk Stu</li>
<li>Saunterin’ Sam</li>
<li>Slowpoke Rodriguez</li>
</ol>
// 嵌套列表
<ol>
<li>第一项</li>
<li>第二项
<ol>
<li>第二项第一个子项目</li>
<li>第二项第二个子项目</li>
<li>第二项第三个子项目</li>
</ol>
</li>
<li>第三项</li>
</ol>
// 嵌套有序列表和无序列表
<ol>
<li>第一项</li>
<li>第二项
<ul>
<li>第二项第一个子项目</li>
<li>第二项第二个子项目</li>
<li>第二项第三个子项目</li>
</ul>
</li>
<li>第三项</li>
</ol>
复制代码li
- HTML
<li>元素 （或称 HTML 列表条目元素） 用于表示列表里的条目。它必须包含在一个父元素里：一个有序列表 (ol)，一个无序列表 (ul)，或者一个菜单 (menu)。在菜单或者无序列表里，列表条目通常用点排列显示；在有序列表里，列表条目通常在左边显示按升序排列的计数，例如数字或者字母。 - 示例
<ol type="I">
<li value="3">third item</li>
<li>fourth item</li>
<li>fifth item</li>
</ol>
复制代码内联文本语义
使用 HTML 内联文本语义（Inline text semantics）定义一个单词、一行内容，或任意文字的语义、结构或样式。
a
- HTML
<a>元素（或称锚元素）可以通过它的href属性创建通向其他网页、文件、同一页面内的位置、电子邮件地址或任何其他 URL 的超链接。<a>中的内容应该应该指明链接的意图。如果存在href属性，当<a>元素聚焦时按下回车键就会激活它。 - 示例
<!-- 链接到外部地址 -->
<a href="https://juejin.cn/">
外部链接
</a>
<br />
<!-- 链接到本页的某个部分 -->
<a href="#属性">
对同页链接的描述
</a>
<br />
<!-- 创建一个可点击的图片 -->
<a href="https://juejin.cn/">
<img src=" https://lf3-cdn-tos.bytescm.com/obj/static/xitu_juejin_web/e08da34488b114bd4c665ba2fa520a31.svg"
alt="稀土掘金" />
</a>
<br />
<!-- 创建一个 email 链接 -->
<a href="mailto:nowhere@mozilla.org">Send email to nowhere</a>
<br />
<!-- 创建电话链接 -->
<a href="tel:+400400400">+40 040 0400</a>
复制代码abbr
- HTML
<abbr>缩写元素 用于代表缩写，并且可以通过可选的title属性提供完整的描述。若使用title属性，则它必须且仅可包含完整的描述内容。 - 示例
<p><dfn id="html"><abbr title="HyperText Markup Language">HTML</abbr>
</dfn>是一种标记语言，用于创建网页的语义和结构。</p>
<p>A <dfn id="spec">Specification</dfn>
(<abbr title="Specification">spec</abbr>) 是一种文档，详细地概述了一项技术或API如何工作以及如何访问它。</p>
复制代码b
- HTML
<b>元素 用于吸引读者的注意到该元素的内容上（如果没有另加特别强调）。这个元素过去被认为是粗体（Boldface）元素，并且大多数浏览器仍然将文字显示为粗体。尽管如此，你不应将<b>元素用于显示粗体文字；替代方案是使用 CSSfont-weight属性来创建粗体文字。 - 示例
<p>
This article describes several <b>text-level</b> elements.
It explains their usage in an <b>HTML</b> document.
</p>
Keywords are displayed with the default style of the <b> element, likely in bold.
复制代码bdi
- HTML
<bdi>元素 告诉浏览器的双向算法将其包含的文本与周围的文本隔离，当网站动态插入一些文本且不知道所插入文本的方向性时，此功能特别有用。 - 示例
bdo
- HTML
<bdo>元素 改写了文本的方向性，使文本以不同的方向渲染呈现出来 - 示例
br
- HTML
<br>元素 在文本中生成一个换行（回车）符号。此元素在写诗和地址时很有用，这些地方的换行都非常重要。 - 示例
Mozilla Foundation<br>1981 Landings Drive<br>Building K<br>Mountain View, CA 94043-0801<br>USA
复制代码code
- HTML
<code>元素 呈现一段计算机代码。默认情况下，它以浏览器的默认等宽字体显示。 - 示例
<p>Regular text. <code>This is code.</code> Regular text.</p>
复制代码data
- HTML
<data>元素 将一个指定内容和机器可读的翻译联系在一起。但是，如果内容是与时间或者日期相关的，则一定要使用time。 - 示例
em
- HTML
<em>元素 标记出需要用户着重阅读的内容，<em>元素是可以嵌套的，嵌套层次越深，则其包含的内容被认定为越需要着重阅读。 - 示例
<p>
In HTML 5, what was previously called <em>block-level</em> content is now called <em>flow</em> content.
</p>
复制代码kbd
- HTML
<kbd>键盘元素 用于表示用户输入，它将产生一个行内元素，以浏览器的默认 monospace 字体显示。 - 示例
<p>Type the following in the Run dialog: <kbd>cmd</kbd><br />Then click the OK button.</p>
<p>Save the document by pressing <kbd>Ctrl</kbd> + <kbd>S</kbd></p>
复制代码mark
- HTML
<Mark>标记文本元素 表示为引用或符号目的而标记或突出显示的文本，这是由于标记的段落在封闭上下文中的相关性或重要性造成的。 - 示例
<p><mark> 元素用于 <mark>高亮</mark> 文本</p>
复制代码q
- HTML
<q>引用标签 表示一个封闭的并且是短的行内引用的文本。这个标签是用来引用短的文本，所以请不要引入换行符; 对于长的文本的引用请使用blockquote替代。 - 示例
<p>每次Kenny被杀，斯坦都会宣布：
<q cite="https://juejin.cn">
天哪，他们杀了Kenny!
</q>.
</p>
复制代码ruby
- HTML
<ruby>元素 被用来展示东亚文字注音或字符注释。 - 示例
<ruby>
汉 <rp>(</rp><rt>han</rt><rp>)</rp>
字 <rp>(</rp><rt>zi</rt><rp>)</rp>
</ruby>
<ruby>
明 日 <rp>(</rp><rt>ming ri</rt><rp>)</rp>
</ruby>
复制代码rp
- HTML
<rp>元素 用于为那些不能使用ruby元素展示 ruby 注解的浏览器，提供随后的圆括号。 - 示例
<ruby>
漢 <rp>(</rp><rt>han</rt><rp>)</rp>
字 <rp>(</rp><rt>zi</rt><rp>)</rp>
</ruby>
复制代码rt
- HTML Ruby 文本 (
<rt>) 元素 包含字符的发音，字符在 ruby 注解中出现，它用于描述东亚字符的发音。这个元素始终在ruby元素中使用。 - 示例
<ruby>
汉 <rt>hàn</rt>
字 <rt>zì</rt>
</ruby>
复制代码span
- HTML
<span>元素 是短语内容的通用行内容器，并没有任何特殊语义。可以使用它来编组元素以达到某种样式意图（通过使用类或者 Id 属性），或者这些元素有着共同的属性，比如lang。应该在没有其他合适的语义元素时才使用它。<span>与div元素很相似，但div是一个块元素而<span>则是行内元素。 - 示例
strong
- Strong
<strong>元素 表示文本十分重要，一般用粗体显示。 - 示例
<p>When doing x it is <strong>imperative</strong> to do y before proceeding.</p>
复制代码sub
- HTML
<sub>元素 定义了一个文本区域，出于排版的原因，与主要的文本相比，应该展示得更低并且更小。 - 示例
<p>水的化学式: H<sub>2</sub>O</p>
复制代码sup
- HTML
<sup>元素 定义了一个文本区域，出于排版的原因，与主要的文本相比，应该展示得更高并且更小。 - 示例
<p>This text is <sup>superscripted</sup></p>
复制代码图片和多媒体
area
- HTML
<area>元素 在图片上定义一个热点区域，可以关联一个超链接。<area>元素仅在<map>元素内部使用。 - 示例
<map name="primary">
<area shape="circle" coords="200,250,25" href="another.htm" />
<area shape="default" nohref />
</map>
复制代码audio
- HTML
<audio>元素 用于在文档中嵌入音频内容。<audio>元素可以包含一个或多个音频资源， 这些音频资源可以使用src属性或者source元素来进行描述：浏览器将会选择最合适的一个来使用。也可以使用MediaStream将这个元素用于流式媒体。 - 示例
// 基本用法
<audio
src="AudioTest.ogg"
autoplay>
您的浏览器不支持音频元素。
</audio>
// <audio> 元素与 <source> 元素
<audio controls>
<source src="foo.wav" type="audio/wav">
您的浏览器不支持音频元素。
</audio>
// <audio> 元素与多个 <source> 元素
<audio controls>
<source src="foo.opus" type="audio/ogg; codecs=opus"/>
<source src="foo.ogg" type="audio/ogg; codecs=vorbis"/>
<source src="foo.mp3" type="audio/mpeg"/>
</audio>
复制代码img
- HTML
<img>元素 将一份图像嵌入文档。 - 示例
// 备用文字
<img src="favicon144.png"
alt="MDN logo">
// 图像链接
<a href="https://developer.mozilla.org">
<img src="favicon144.png"
alt="Visit the MDN site">
</a>
// 使用srcset属性
<img src="favicon72.png"
alt="MDN logo"
srcset="favicon144.png 2x">
// 使用srcset和sizes属性
<img src="clock-demo-200px.png"
alt="Clock"
srcset="clock-demo-200px.png 200w,
clock-demo-400px.png 400w"
sizes="(max-width: 600px) 200px, 50vw">
复制代码track
- HTML
<track>元素 被当作媒体元素—audio和video的子元素来使用。它允许指定时序文本字幕（或者基于时间的数据），例如自动处理字幕。字幕格式有 WebVTT 格式（.vtt格式文件）— Web 视频文本字幕格式，以及指时序文本标记语言（TTML）格式。 - 示例
<video controls poster="/images/sample.gif">
<source src="sample.mp4" type="video/mp4">
<source src="sample.ogv" type="video/ogv">
<track kind="captions" src="sampleCaptions.vtt" srclang="en">
<track kind="descriptions"
src="sampleDescriptions.vtt" srclang="en">
<track kind="chapters" src="sampleChapters.vtt" srclang="en">
<track kind="subtitles" src="sampleSubtitles_de.vtt" srclang="de">
<track kind="subtitles" src="sampleSubtitles_en.vtt" srclang="en">
<track kind="subtitles" src="sampleSubtitles_ja.vtt" srclang="ja">
<track kind="subtitles" src="sampleSubtitles_oz.vtt" srclang="oz">
<track kind="metadata" src="keyStage1.vtt" srclang="en"
label="Key Stage 1">
<track kind="metadata" src="keyStage2.vtt" srclang="en"
label="Key Stage 2">
<track kind="metadata" src="keyStage3.vtt" srclang="en"
label="Key Stage 3">
<!-- Fallback -->
...
</video>
复制代码video
- HTML
<video>元素 用于在 HTML 或者 XHTML 文档中嵌入媒体播放器，用于支持文档内的视频播放。你也可以将<video>标签用于音频内容，但是audio元素可能在用户体验上更合适。 - 示例
<!-- Simple video example -->
<video src="videofile.ogg" autoplay poster="posterimage.jpg">
抱歉，您的浏览器不支持内嵌视频，不过不用担心，你可以 <a href="videofile.ogg">下载</a>
并用你喜欢的播放器观看！
</video>
<!-- Video with subtitles -->
<video src="foo.ogg">
<track kind="subtitles" src="foo.en.vtt" srclang="en" label="English">
<track kind="subtitles" src="foo.sv.vtt" srclang="sv" label="Svenska">
</video>
复制代码表格内容
caption
- HTML
<caption>元素 (or HTML 表格标题元素) 展示一个表格的标题， 它常常作为table的第一个子元素出现，同时显示在表格内容的最前面，但是，它同样可以被 CSS 样式化，所以，它同样可以出现在任何一个一个相对于表格的做任意位置。 - 示例
请查看<table>页面获得<caption>的例子
复制代码col
- HTML
<col>元素 定义表格中的列，并用于定义所有公共单元格上的公共语义。它通常位于colgroup元素内。 - 示例
详见<table>页面<col>标签的示例
复制代码colgroup
- HTML 中的 表格列组（Column Group
<colgroup>）标签用来定义表中的一组列表。 - 示例
请参考 <table> 页面以查看 <colgroup> 的示例
复制代码table
- HTML
table元素 表示表格数据 — 即通过二维数据表表示的信息。 - 示例
<p>Simple table with header</p>
<table>
<tr>
<th>First name</th>
<th>Last name</th>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
</tr>
<tr>
<td>Jane</td>
<td>Doe</td>
</tr>
</table>
<p>Table with thead, tfoot, and tbody</p>
<table>
<thead>
<tr>
<th>Header content 1</th>
<th>Header content 2</th>
</tr>
</thead>
<tfoot>
<tr>
<td>Footer content 1</td>
<td>Footer content 2</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>Body content 1</td>
<td>Body content 2</td>
</tr>
</tbody>
</table>
<p>Table with colgroup</p>
<table>
<colgroup span="4" class="columns"></colgroup>
<tr>
<th>Countries</th>
<th>Capitals</th>
<th>Population</th>
<th>Language</th>
</tr>
<tr>
<td>USA</td>
<td>Washington D.C.</td>
<td>309 million</td>
<td>English</td>
</tr>
<tr>
<td>Sweden</td>
<td>Stockholm</td>
<td>9 million</td>
<td>Swedish</td>
</tr>
</table>
<p>Table with colgroup and col</p>
<table>
<colgroup>
<col class="column1">
<col class="columns2plus3" span="2">
</colgroup>
<tr>
<th>Lime</th>
<th>Lemon</th>
<th>Orange</th>
</tr>
<tr>
<td>Green</td>
<td>Yellow</td>
<td>Orange</td>
</tr>
</table>
<p>Simple table with caption</p>
<table>
<caption>Awesome caption</caption>
<tr>
<td>Awesome data</td>
</tr>
</table>
复制代码tbody
- HTML
<tbody>元素 封装了一组表行（<tr>元素），指示它们构成表的正文（<table>）。 - 示例
<table>
<caption>Council budget (in £) 2018</caption>
<thead>
<tr>
<th>Items</th>
<th scope="col">Expenditure</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Donuts</th>
<td>3,000</td>
</tr>
<tr>
<th scope="row">Stationery</th>
<td>18,000</td>
</tr>
</tbody>
</table>
复制代码td
- HTML
<td>元素 定义了一个包含数据的表格单元格。 - 示例
请在 <table> 上查看 <td> 的例子
复制代码tfoot
- HTML
<tfoot>元素 定义了一组表格中各列的汇总行。 - 示例
请查看<table>页面中<tfoot>的相关示例
复制代码th
- HTML
<th>元素 定义表格内的表头单元格。这部分特征是由scopeandheaders属性准确定义的。 - 示例
参考 <table> 中 <th>的示例内容
复制代码thead
- HTML
<thead>元素 定义了一组定义表格的列头的行。 - 示例
参考 <table> 中 <thead>的示例内容
复制代码tr
- HTML
<tr>元素 定义表格中的行。 同一行可同时出现td和th元素。 - 示例
参考 <table> 中 <thead>的示例内容
复制代码表单
button
- HTML
<button>元素 表示一个可点击的按钮，可以用在表单或文档其它需要使用简单标准按钮的地方。 默认情况下，HTML 按钮的显示样式接近于 user agent 所在的宿主系统平台（用户操作系统）的按钮， 但你可以使用 CSS来改变按钮的样貌。 - 示例
<button name="button">Click me</button>
复制代码datalist
- HTML
<datalist>元素 包含了一组option元素，这些元素表示其它表单控件可选值。 - 示例
<label>从这个列表中选择一个浏览器:
<input list="browsers" name="myBrowser" /></label>
<datalist id="browsers">
<option value="gu">
<option value="Firefox">
<option value="Edge">
<option value="Opera">
<option value="Safari">
</datalist>
复制代码fieldset
- HTML
<fieldset>元素 用于对表单中的控制元素进行分组（也包括 label 元素）。 - 示例
// 简单的fieldset
<form action="#">
<fieldset>
<legend>Simple fieldset</legend>
<input type="radio" id="radio">
<label for="radio">Spirit of radio</label>
</fieldset>
</form>
// 禁用fieldset
<form action="#">
<fieldset disabled>
<legend>Disabled fieldset</legend>
<div>
<label for="name">Name: </label>
<input type="text" id="name" value="Chris">
</div>
<div>
<label for="pwd">Archetype: </label>
<input type="password" id="pwd" value="Wookie">
</div>
</fieldset>
</form>
复制代码form
- HTML
<form>元素 表示文档中的一个区域，此区域包含交互控件，用于向 Web 服务器提交信息。 - 示例
<!-- 表单，它将向当前URL发送一个GET请求 -->
<form>
<label>Name:
<input name="submitted-name" autocomplete="name">
</label>
<button>Save</button>
</form>
<!-- 表单，它将向当前URL发送一个POST请求 -->
<form method="post">
<label>Name:
<input name="submitted-name" autocomplete="name">
</label>
<button>Save</button>
</form>
<!-- 使用字段集、图例和标签创建表单 -->
<form method="post">
<fieldset>
<legend>Title</legend>
<label><input type="radio" name="radio"> Select me</label>
</fieldset>
</form>
复制代码input
- HTML
<input>元素 用于为基于 Web 的表单创建交互式控件，以便接受来自用户的数据; 可以使用各种类型的输入数据和控件小部件，具体取决于设备和user agent。 - 示例
<input type="button" value="Click me">
<p>
<input type="checkbox" id="cbox1" value="first_checkbox">
<label for="cbox1">This is the first checkbox</label>
</p>
<p>
<input type="checkbox" id="cbox2" value="second_checkbox" checked="checked">
<label for="cbox2">This is the second checkbox, which is checked</label>
</p>
<input type="color" />
<input type="date" value="2017-06-01">
<input type="datetime-local"
name="meeting-time"
value="2018-06-12T19:30"
min="2018-06-07T00:00"
max="2018-06-14T00:00">
<input type="email"
pattern=".+@globex\.com"
size="30"
required> // 不支持 “电子邮件” 类型的浏览器可以回退为标准的 “文本” 输入。
<input type="file"
name="avatar"
accept="image/png, image/jpeg">
<input type="image" name="image" src="/files/2917/fxlogo.png" width="50">
<input type="month" name="start" min="2018-03" value="2018-05">
<input type="number" placeholder="multiple of 10" step="10" min="0" max="100">
<input type="password"
inputmode="number"
minlength="9"
maxlength="12"
pattern="(?!000)([0-6]\d{2}|7([0-6]\d|7[012]))([ -])?(?!00)\d\d\3(?!0000)\d{4}"
required
autocomplete="off">
<fieldset>
<legend>Select a maintenance drone:</legend>
<div>
<input type="radio" id="huey" name="drone" value="huey"
checked>
<label for="huey">Huey</label>
</div>
<div>
<input type="radio" id="dewey" name="drone" value="dewey">
<label for="dewey">Dewey</label>
</div>
<div>
<input type="radio" id="louie" name="drone" value="louie">
<label for="louie">Louie</label>
</div>
</fieldset>
<input type="range" min="5" max="10" step="0.01">
<input type="reset" value="Disabled" disabled>
<input type="search" name="q">
<input type="submit" value="发送请求">
<input name="telNo"
type="tel"
size="20"
minlength="9"
maxlength="14"> //不支持 "tel" 类型的浏览器会默认使用 "text" 类型输入。
<input type="text" name="name" required size="10"
placeholder="Username"
minlength="4" maxlength="8">
<input type="url" name="url"
placeholder="https://example.com"
pattern="https://.*" size="30"
required>
复制代码label
- HTML
<label>元素（标签） 表示用户界面中某个元素的说明。 - 示例
// 简单的label
<label>Click me <input type="text"></label>
// 使用for属性
<label for="username">Click me</label>
<input type="text" id="username">
复制代码legend
- HTML
<legend>元素 用于表示其父元素fieldset的内容标题。 - 示例
在 <form> 中查看关于 <legend> 元素的示例
复制代码meter
- HTML
<meter>元素 用来显示已知范围的标量值或者分数值。 - 示例
// 简单例子
<p>Heat the oven to <meter min="200" max="500"
value="350">350 degrees</meter>.</p>
// 高低值区间示例
<p>He got a <meter low="69" high="80" max="100"
value="84">B</meter> on the exam.</p>
复制代码optgroup
- HTML
<optgroup>元素 为select元素中的选项创建分组。 - 示例
<select>
<optgroup label="Group 1">
<option>Option 1.1</option>
</optgroup>
<optgroup label="Group 2">
<option>Option 2.1</option>
<option>Option 2.2</option>
</optgroup>
<optgroup label="Group 3" disabled>
<option>Option 3.1</option>
<option>Option 3.2</option>
<option>Option 3.3</option>
</optgroup>
</select>
复制代码option
- HTML
<option>元素 用于定义在select,optgroup或datalist元素中包含的项。<option>可以在弹出窗口和 HTML 文档中的其他项目列表中表示菜单项。 - 示例
参见 <select> 示例
复制代码output
- HTML
<output>标签 表示计算或用户操作的结果。 - 示例
<form oninput="result.value=parseInt(a.value)+parseInt(b.value)">
<input type="range" name="b" value="50" /> +
<input type="number" name="a" value="10" /> =
<output name="result"></output>
</form>
复制代码progress
- HTML
<progress>元素 用来显示一项任务的完成进度。虽然规范中没有规定该元素具体如何显示，浏览器开发商可以自己决定，但通常情况下，该元素都显示为一个进度条形式。 - 示例
<progress value="70" max="100">70 %</progress>
复制代码select
- HTML
<select>元素 表示一个提供选项菜单的控件。 - 示例
// 基本选择
<!-- 第二项会默认选中 -->
<select name="select">
<option value="value1">Value 1</option>
<option value="value2" selected>Value 2</option>
<option value="value3">Value 3</option>
</select>
// 使用多选的进阶选择
<label>Please choose one or more pets:
<select name="pets" multiple size="4">
<optgroup label="4-legged pets">
<option value="dog">Dog</option>
<option value="cat">Cat</option>
<option value="hamster" disabled>Hamster</option>
</optgroup>
<optgroup label="Flying pets">
<option value="parrot">Parrot</option>
<option value="macaw">Macaw</option>
<option value="albatross">Albatross</option>
</optgroup>
</select>
</label>
复制代码textarea
- HTML
<textarea>元素 表示一个多行纯文本编辑控件，当你希望用户输入一段相当长的、不限格式的文本，例如评论或反馈表单中的一段意见时，这很有用。 - 示例
// 基本示例
<textarea name="textarea" rows="10" cols="50">Write something here</textarea>
// 最小和最大长度
<textarea name="textarea" rows="5" cols="30" minlength="10" maxlength="60">Write</textarea>
// 占位符
<textarea name="textarea"
rows="5" cols="30"
placeholder="Comment text."></textarea>
复制代码