html标签总结

最新推荐文章于 2023-01-15 19:14:40 发布

日子与梦想

最新推荐文章于 2023-01-15 19:14:40 发布

阅读量764

点赞数

文章标签： html 前端 html5

本文链接：https://blog.csdn.net/m0_68672731/article/details/125078751

版权

HTML(Hyper Text Markup Language)超文本标记语言

html标签

基本结构标签

! vscode自动生成HTML基本框架

<!DOCTYPE html>
<!--文档声明-->
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

html

top-level element/root element，HTML文档的根标签，所有其他元素必须是此元素的后代。

lang属性：

<html lang="en"> “en”/英文，“zh-cn”/简体中文

在html元素上设置lang属性，有助于屏幕阅读技术确定要陈述的正确语言。标识语言标签应描述页面大部分内容使用的语言。没有它，屏幕阅读器会默认使用操作系统的设置语言，这可能会导致错误陈述。

head

网页的头部，规定文档相关的配置信息（元数据），包括文档的标题，引用的文档样式和脚本等。帮助解析网页。可以包含下列标签：

<meta> <title> <link> <template> <base> <style> <script> <noscript>

body

表示文档的内容

头部标签

title

文档的标题，显示在浏览器的标题栏或标签页上。only one

<title>第十五届秋季运动会</title>

<title>元素始终在页面的 <head> 块内使用。

link

外部资源链接元素(<link>) 规定了当前文档与外部资源的关系。该元素最常用于链接CSS，此外也可以被用来创建站点图标 (比如 PC 端的 “favicon” 图标和移动设备上用以显示在主屏幕的图标) 。

标签只能出现在 head 元素中，可以出现多个标签。

链接样式表：

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

链接图标：

<link rel="icon" href="favicon.ico">

表示不同移动平台上特殊的图标类型:

<!--在同一页面上包含指向多个不同图标的链接，浏览器将使用rel和sizes 值作为提示来选择最适合其特定上下文的图标。-->
<!-- third-generation iPad with high-resolution Retina display: -->
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="favicon144.png">
<!-- iPhone with high-resolution Retina display: -->
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="favicon114.png">
<!-- first- and second-generation iPad: -->
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="favicon72.png">
<!-- non-Retina iPhone, iPod Touch, and Android 2.1+ devices: -->
<link rel="apple-touch-icon-precomposed" href="favicon57.png">
<!-- basic favicon -->
<link rel="icon" href="favicon32.png">

提供一个媒体类型，或者在media属性内部进行查询；这种资源将只在满足媒体条件的情况下才被加载进来:

<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)">

将rel设定为preload，表示浏览器应该预加载该资源 (更多细节见使用 rel="preload"预加载内容) 。as属性表示获取特定的内容类。crossorigin属性表示该资源是否应该使用一个CORS请求来获取。

<link rel="preload" href="myFont.woff2" as="font" type="font/woff2" crossorigin="anonymous">

样式表加载事件,通过监听发生在样式表上的事件知道什么时候样式表加载完毕,监听error事件检测到是否在加载样式表的过程中出现错误。

<script>
function sheetLoaded() {
  // Do something interesting; the sheet has been loaded
}

function sheetError() {
  alert("An error occurred loading the stylesheet!");
}
</script>

<link rel="stylesheet" href="mystylesheet.css" onload="sheetLoaded()" onerror="sheetError()">

as属性：

该属性仅在<link>元素设置了 rel="preload" 或者 rel="prefetch" 时才能使用。它规定了<link>元素加载的内容的类型。

详见MDN

href属性：

指定被链接资源的URL。 URL 可以是绝对的，也可以是相对的。

disabled属性：

仅对于rel="stylesheet" ，disabled 的 Boolean 属性指示是否应加载所描述的样式表并将其应用于文档。如果在加载 HTML 时在 HTML 中指定了 Disabled，则在页面加载期间不会加载样式表。

media属性：

规定了外部资源适用的媒体类型。它的值必须是"媒体查询"。这个属性使得用户代理能选择最适合设备运行的媒体类型。

rel属性：

命名链接文档与当前文档的关系。该属性必须是链接类型值的用空格分隔的列表。

sizes属性：

定义了包含相应资源的可视化媒体中的 icons 的大小。它只有在rel包含 icon 的link 类型值。

title属性：

属性在<link>元素上有特殊的语义。当用于<link rel="stylesheet">时，它定义了一个首选样式表或备用样式表。使用<link>指定可替换样式表。在这个标签中指定rel=“alternate stylesheet” 属性和 title="…"属性

<link href="reset.css" rel="stylesheet" type="text/css">
<!--在此例中，“页面样式”菜单中会出现“Default Style”、“Fancy”和“Basic”的选项。“Default Style”默认选中。如果用户选择一个不同的样式，浏览器就使用用户选择的样式。-->
<link href="default.css" rel="stylesheet" type="text/css" title="Default Style">
<link href="fancy.css" rel="alternate stylesheet" type="text/css" title="Fancy">
<link href="basic.css" rel="alternate stylesheet" type="text/css" title="Basic">

type属性：

定义链接的内容的类型。这个属性的值应该是像 text/html，text/css 等 MIME 类型。这个属性常用的用法是定义链接的样式表，最常用的值是表明了 CSS 的 text/css。

style

包含文档的样式信息或者文档的部分内容。

type属性

该属性以 MIME 类型（不应该指定字符集）定义样式语言。如果该属性未指定，则默认为 text/css。

media属性

该属性规定该样式适用于哪个媒体。属性的取值CSS 媒体查询，默认值为 all。

<style media="all and (max-width: 500px)">
    p {
      color: blue;
      background-color: yellow;
    }
  </style>

nonce属性

一种加密的随机数（一次使用的数字），用于在style-src Content-Security-Policy (en-US)中将内联样式列入白名单。服务器每次发送策略时都必须生成一个唯一的随机数值。提供一个无法猜测的随机数非常重要，因为绕开资源策略是微不足道的。

title属性

指定可选的样式表。

script

用于嵌入或引用可执行脚本。这通常用作嵌入或者指向 JavaScript 代码。

async属性

对于普通脚本，如果存在 async 属性，那么普通脚本会被并行请求，并尽快解析和执行。
对于模块脚本，如果存在 async 属性，那么脚本及其所有依赖都会在延缓队列中执行，因此它们会被并行请求，并尽快解析和执行。

该属性能够消除解析阻塞的 Javascript。解析阻塞的 Javascript 会导致浏览器必须加载并且执行脚本，之后才能继续解析。defer 在这一点上也有类似的作用。
这是个布尔属性：布尔属性的存在意味着 true 值，布尔属性的缺失意味着 false 值。

defer属性

这个布尔属性被设定用来通知浏览器该脚本将在文档完成解析后，触发 DOMContentLoaded (en-US) 事件前执行。
有 defer 属性的脚本会阻止 DOMContentLoaded 事件，直到脚本被加载并且解析完成。

src属性

引用外部脚本的 URI，这可以用来代替直接在文档中嵌入脚本。指定了 src 属性的 script 元素标签内不应该再有嵌入的脚本。

type属性

该属性定义 script 元素包含或src引用的脚本语言。属性的值为MIME类型; 支持的MIME类型包括text/javascript, text/ecmascript, application/javascript, 和application/ecmascript。如果没有定义这个属性，脚本会被视作 JavaScript。
如果MIME类型不是 JavaScript 类型（上述支持的类型），则该元素所包含的内容会被当作数据块而不会被浏览器执行。
如果 type 属性为module，代码会被当作 JavaScript 模块 Experimental。请参见ES6 in Depth: Modules

<!-- HTML4 and (x)HTML -->
<script type="text/javascript" src="javascript.js">

<!-- HTML5 -->
<script src="javascript.js"></script>

noscript

如果页面上的脚本类型不受支持或者当前在浏览器中关闭了脚本，则在 HTML <noscript> 元素中定义脚本未被执行时的替代内容。

<noscript>
  <!-- anchor linking to external file -->
  <a href="http://www.mozilla.com/">External Link</a>
</noscript>
<p>Rocks!</p>

base

HTML 元素指定用于一个文档中包含的所有相对 URL 的根 URL。一份中只能有一个元素。
一个文档的基本 URL，可以通过使用 document.baseURI (en-US) 的 JS 脚本查询。如果文档不包含元素，baseURI 默认为 document.location.href。
如果指定了以下任一属性，这个元素必须在其他任何属性是 URL 的元素之前。例如：<link> 的 href 属性。

href
用于文档中相对 URL 地址的基础 URL。允许绝对和相对 URL。
target
默认浏览上下文的关键字或作者定义的名称，当没有明确目标的链接 <a> 或表单 <form> 导致导航被激活时显示其结果。该属性值定位到浏览上下文（例如选项卡，窗口或内联框 <iframe> ）。
以下的关键字指定特殊的意思：

_self: 载入结果到当前浏览上下文中。（该值是元素的默认值）。
_blank: 载入结果到一个新的未命名的浏览上下文。
_parent: 载入结果到父级浏览上下文（如果当前页是内联框）。如果没有父级结构，该选项的行为和_self一样。
_top: 载入结果到顶级浏览上下文（该浏览上下文是当前上下文的最顶级上下文）。如果没有父级，该选项的行为和_self 一样。

<base href="http://www.example.com/">
<base target="_blank">
<base target="_top" href="http://www.example.com/">

页面结构标签

nav

表示页面的一部分，其目的是在当前文档或其他文档中提供导航链接。导航部分的常见示例是菜单，目录和索引。

并不是所有的链接都必须使用<nav>元素，它只用来将一些热门的链接放入导航栏，例如<footer>元素就常用来在页面底部包含一个不常用到，没必要加<nav>的链接列表。
一个网页也可能含有多个<nav>元素，例如一个是网站内的导航列表，另一个是本页面内的导航列表。

<nav>
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

article

表示文档、页面、应用或网站中的独立结构，其意在成为可独立分配的或可复用的结构，如在发布中，它可能是论坛帖子、杂志或新闻文章、博客、用户提交的评论、交互式组件，或者其他独立的内容项目。

<article class="forecast">
    <h1>Weather forecast for Seattle</h1>
    <article class="day-forecast">
        <h2>03 March 2018</h2>
        <p>Rain.</p>
    </article>
    <article class="day-forecast">
        <h2>04 March 2018</h2>
        <p>Periods of rain.</p>
    </article>
    <article class="day-forecast">
        <h2>05 March 2018</h2>
        <p>Heavy rain.</p>
    </article>
</article>

每个<article>通常包括标题（<h1> - <h6>元素）作为<article>元素的子元素。
当<article>元素嵌套使用时，则该元素代表与外层元素有关的文章。例如，代表博客评论的<article>元素可嵌套在代表博客文章的<article>元素中。
<article>元素的作者信息可通过<address>元素提供，但是不适用于嵌套的<article>元素。
<article>元素的发布日期和时间可通过<time>元素的pubdate属性表示。
可以使用<time> 元素的datetime属性来描述<article>元素的发布日期和时间。请注意<time>的pubdate 属性不再是W3C (en-US) HTML5标准。

<article class="film_review">
  <header>
    <h2>Jurassic Park</h2>
  </header>
  <section class="main_review">
    <p>Dinos were great!</p>
  </section>
  <section class="user_reviews">
    <article class="user_review">
      <p>Way too scary for me.</p>
      <footer>
        <p>
          Posted on
          <time datetime="2015-05-16 19:00">May 16</time>
          by Lisa.
        </p>
      </footer>
    </article>
    <article class="user_review">
      <p>I agree, dinos are my favorite.</p>
      <footer>
        <p>
          Posted on
          <time datetime="2015-05-17 19:00">May 17</time>
          by Tom.
        </p>
      </footer>
    </article>
  </section>
  <footer>
    <p>
      Posted on
      <time datetime="2015-05-15 19:00">May 15</time>
      by Staff.
    </p>
  </footer>
</article>

header

用于展示介绍性内容，通常包含一组介绍性的或是辅助导航的实用元素。它可能包含一些标题元素，但也可能包含其他元素，比如 Logo、搜索框、作者名称，等等。

<header class="page-header">
    <h1>Cute Puppies Express!</h1>
</header>

<main>
    <p>I love beagles <em>so</em> much! Like, really, a lot. They’re adorable and their ears are so, so snuggly soft!</p>
</main>

<header>元素不是分段内容，因此不会往大纲中引入新的段落。也就是说，<header>元素通常用于包含周围部分的标题（h1 至 h6 元素），但这不是必需的。

main

文档的<body>或应用的主体部分。主体部分由与文档直接相关，或者扩展于文档的中心主题、应用的主要功能部分的内容组成。

在文档中，<main>元素的内容应当是独一无二的。任何同时存在于任意一系列文档中的相同、重复内容，比如侧边栏、导航栏链接、版权信息、网站 Logo，搜索框（除非搜索框为文档的主要功能），都不应当被包含在其内。
<main>对文档的大纲（outline）没有贡献；不会影响 DOM 的页面结构概念。它仅有提供信息的作用。（原文：It’s strictly informative.）

直达内容（skipnav），是一种辅助功能技术，使其用户可以快速跳过大段的重复内容（如主导航栏、信息横幅等）。这允许用户更快地访问到页面的主要内容。

向 <main> 元素添加 id 属性后，该元素可成为直达内容链接的目标。

<body>
  <a href="#main-content">Skip to main content</a>

  <!-- navigation and header content -->

  <main id="main-content">
    <!-- main page content -->
  </main>
</body>

aside

表示一个和其余页面内容几乎无关的部分，被认为是独立于该内容的一部分并且可以被单独的拆分出来而不会使整体受影响。其通常表现为侧边栏或者标注框（call-out boxes）。

section

表示一个包含在 HTML 文档中的独立部分，它没有更具体的语义元素来表示，一般来说会有包含一个标题。

一般通过是否包含一个标题 (<h1>-<h6>element) 作为子节点来辨识每一个<section>。
如果 <section> 元素的内容可以单独在多个媒体上发表，应该使用 <article> 而不是 <section>。
不要把 <section> 元素作为一个普通的容器来使用，这是本应该是<div>的用法（特别是当片段（the sectioning ）仅仅是为了美化样式的时候）。一般来说，一个 <section> 应该出现在文档大纲中。

<section>
  <h1>Heading</h1>
  <p>Bunch of awesome content</p>
</section>

footer

表示最近一个章节内容或者根节点（sectioning root ）元素的页脚。一个页脚通常包含该章节作者、版权数据或者与文档相关的链接等信息。

<footer>元素内的作者信息应包含在<address> 元素中。

<footer>
  Some copyright info or perhaps some author info for an &lt;article&gt;?
</footer>

div

一个通用型的流内容容器，在不使用CSS的情况下，其对内容或布局没有任何影响。

作为一个 “纯粹的” 容器，<div> 元素在语义上不表示任何特定类型的内容。然而，其可以将内容分组，从而可以使用class或是id属性方便的定义内容的格式，也可以在一段文档中划分标记出使用另一种语言书写的内容（使用lang 属性）等等。

span

短语内容的通用行内容器，并没有任何特殊语义。可以使用它来编组元素以达到某种样式意图（通过使用类或者 Id 属性），或者这些元素有着共同的属性，比如lang。应该在没有其他合适的语义元素时才使用它。<span> 与 <div> 元素很相似，但 <div> 是一个块元素而 <span> 则是行内元素 .

文本标签

a

HTML <a> 元素（或称锚元素）可以通过它的 href 属性创建通向其他网页、文件、同一页面内的位置、电子邮件地址或任何其他 URL 的超链接。<a> 中的内容应该应该指明链接的意图。如果存在 href 属性，当 <a> 元素聚焦时按下回车键就会激活它。

href属性
包含超链接指向的 URL 或 URL 片段。

URL 片段是哈希标记（#）前面的名称，哈希标记指定当前文档中的内部目标位置（HTML 元素的 ID）。URL 不限于基于 Web（HTTP）的文档，也可以使用浏览器支持的任何协议。例如，在大多数浏览器中正常工作的file:、ftp:和 mailto：。

可以使用 href=“#top” 或者 href=“#” 链接返回到页面顶部。这种行为是 HTML5 的特性

target属性
该属性指定在何处显示链接的资源。取值为标签（tab），窗口（window），或框架（iframe）等浏览上下文的名称或其他关键词。以下关键字具有特殊的意义：

_self: 当前页面加载，即当前的响应到同一 HTML 4 frame（或 HTML5 浏览上下文）。此值是默认的，如果没有指定属性的话。
_blank: 新窗口打开，即到一个新的未命名的 HTML4 窗口或 HTML5 浏览器上下文
_parent: 加载响应到当前框架的 HTML4 父框架或当前的 HTML5 浏览上下文的父浏览上下文。如果没有 parent 框架或者浏览上下文，此选项的行为方式与 _self 相同。
_top: IHTML4 中：加载的响应成完整的，原来的窗口，取消所有其它 frame。 HTML5 中：加载响应进入顶层浏览上下文（即，浏览上下文，它是当前的一个的祖先，并且没有 parent）。如果没有 parent 框架或者浏览上下文，此选项的行为方式相同_self

p

表示文本的一个段落。该元素通常表现为一整块与相邻文本分离的文本，或以垂直的空白隔离或以首行缩进,<p> 是块级元素。

使用CSS margin属性去改变段落之间的间隙，不要在段落之间插入空的段落元素或者<br>元素。

hgroup

代表文档章节所属的多级别的目录，它将多个<h1>至<h6>的子元素组装到一起。

本元素已经从 HTML5（W3C）规范中删除，但是它仍旧在 WHATWG 的 HTML 版本里。大多数浏览器都部分地实现，所以它不太可能消失。

h1~h6

标题 (Heading) 元素呈现了六个不同的级别的标题，<h1> 级别最高，而 <h6> 级别最低。

用户代理可以使用标题信息，例如自动构建文档的目录。
不要为了减小标题的字体而使用低级别的标题，而是使用 CSS font-size 属性。
避免跳过某级标题：始终要从 <h1> 开始，接下来依次使用 <h2> 等等。
使用 <section> 元素时，为了方便起见，你应该考虑避免在同一个页面上重复使用 <h1>，<h1> 应被用于表示页面的标题，其他的标题当从 <h2> 开始。在使用 section 时，应当为每个 section 都使用一个 <h2>。详情请参考 Defining sections (en-US) in [Page not yet written] (en-US)。

hr

示段落级元素之间的主题转换（例如，一个故事中的场景的改变，或一个章节的主题的改变）。

在 HTML 的早期版本中，它是一个水平线。现在它仍能在可视化浏览器中表现为水平线，但目前被定义为语义上的，而不是表现层面上。所以如果想画一条横线，请使用适当的 css 样式来修饰。

br

在文本中生成一个换行（回车）符号

不要用 <br> 来增加文本之间的行间隔；应使用 CSS margin 属性或<p> 元素。

address

表示其中的 HTML 提供了某个人或某个组织（等等）的联系信息。

<p>Contact the author of this page:</p>
<!--<address>可以使用在多种语境中，例如在文章开头提供商务的联系方式，或者放在<article>元素内，指明该文章的作者。-->
<address>
  <a href="mailto:jim@rock.com">jim@rock.com</a><br>
  <a href="tel:+13115552368">(311) 555-2368</a>
</address>

由<address>元素中任何形式的内容所提供的联系信息适用于上下文的背景信息，可以是必要的任何一种联系方式，比如真实地址、URL、电子邮箱、电话号码、社交媒体账号、地理坐标等等。此元素应该包含联系信息对应的个人、团体或组织的名称。

当表示一个和联系信息无关的任意的地址时，请改用 <p> 元素而不是 <address> 元素。
这个元素不能包含除联系信息之外的任何信息，比如出版日期（这应当被包含在 <time> 元素之中）。
通常，<address> 元素可以放在 <footer> 元素之中（如果存在的话）。

使用 <address> 表示一篇文章的作者的联系信息。

<address>
    You can contact author at <a href="http://www.somedomain.com/contact">
    www.somedomain.com</a>.<br>
    If you see any bugs, please <a href="mailto:webmaster@somedomain.com">
    contact webmaster</a>.<br>
    You may also want to visit us:<br>
    Mozilla Foundation<br>
    331 E Evelyn Ave<br>
    Mountain View, CA 94041<br>
    USA
  </address>

b

HTML 提醒注意（Bring Attention To）元素（<b>）用于吸引读者的注意到该元素的内容上（如果没有另加特别强调）。

这个元素过去被认为是粗体（Boldface）元素，并且大多数浏览器仍然将文字显示为粗体。尽管如此，你不应将 <b>元素用于显示粗体文字；替代方案是使用 CSS font-weight 属性来创建粗体文字。

应用场合如：摘要中的关键字、评论中的产品名称，或其他典型的应该加粗显示的文字（除此之外无其它特别强调）。

不要将<b>元素与 <strong>、<em>或<mark>元素混淆。 <strong>元素表示某些重要性的文本，<em>强调文本，而<mark>元素表示某些相关性的文本。<b>元素不传达这样的特殊语义信息；仅在没有其他合适的元素时使用它。

类似的，也不要用 <b> 元素来标记标题。如果需要表示标题，请使用 <h1> (en-US) 到 <h6> (en-US) 标签。此外，可以通过样式表来改变这些元素的的默认样式，结果就是它们并不一定都是粗体。

strong

Strong 元素 () 表示文本十分重要，一般用粗体显示。

Bold vs. Strong
新的开发者经常感到疑惑，为什么在一个渲染的网站上会有这么多方式来表达同样的东西。Bold 和 Strong 可能就是这其中的一种。为什么使用<strong></strong>而不是<b></b>? 使用 strong 的话你不得不打更多的字母，却产生出和 b 同样的效果，对吧？
也许并不是； strong 是一个逻辑状态，而 bold 是一个物理状态。逻辑状态分离内容和表现形式，使用逻辑状态允许你用各种不同的方式来表达。比如你想把文字渲染成红色，使用其它大小的字体、带有下划线或其他样式，而不是加粗的样式。必须要理解使用 strong 呈现出的表现形式不同于单纯的加粗。因为 bold 是一个物理状态，他没有区分表现形式和内容。如果让 bold 做了加粗文本外的其它任何事情，都将会令人困惑而且也不符合逻辑。
同样应该注意<b></b> 还有其他用途，比如想单纯地吸引注意而不增加其重要性。

Emphasis vs. Strong
在 HTML4 时， Strong 简单地表示一个更强的强调 (emphasis)，而在 HTML5 中，这个元素被描述为表征 “内容强烈的重要性 (strong importance for its contents) ”。这是一个重要的区别。Em 标签 (Emphasis) 用于改变一个句子的意思 (比如"我<em>喜欢</em>胡萝卜" 和"我喜欢<em>胡萝卜</em>"，分别强调喜欢和胡萝卜), Strong 用来对一个句子的部分增加重要性 (比如 “警告！这非常危险。”) Strong 和 Emphasis 都可以分别通过嵌套来增加相对重要性或强调重点。

i

用于表现因某些原因需要区分普通文本的一系列文本。例如技术术语、外文短语或是小说中人物的思想活动等，它的内容通常以斜体显示。

该元素只在没有更适合的语义元素表示时使用。例如：

使用 <em> 表示强调或重读。
使用 <strong> 表示重要性。
使用 <mark> 表示相关性。
使用 <cite> 标记著作名，如一本书、剧本或是一首歌。
使用 <dfn> 标记术语的定义实例。

em

HTML 着重元素 (<em>) 标记出需要用户着重阅读的内容， <em> 元素是可以嵌套的，嵌套层次越深，则其包含的内容被认定为越需要着重阅读。
<em> 元素通常被用于指示一个隐式或显式的对比。

<i> vs. <em>
在默认情况下，它们的视觉效果是一样的。但语义是不同的。 <em> 标签表示其内容的着重强调，而 <i> 标签表示从正常散文中区分出的文本，例如外来词，虚构人物的思想，或者当文本指的是一个词语的定义，而不是其语义含义。
一个 <em> 的例子可能是：“Just do it already!”，或：“We had to do something about it”。人或软件在阅读文本时，会对斜体字的发音使用重读强调。
一个 <i> 的例子可能是：“The Queen Mary sailed last night”。在这里，没有对 “Queen Mary” 这个词添加强调或重要性。它只是表明，谈论的对象不是一个名叫玛丽的女王，而是一艘名字叫玛丽的船。另一个 <i> 的例子可能是：“The word the is an article”。

figure

HTML <figure> 元素代表一段独立的内容，经常与说明（caption）<figcaption> 配合使用，并且作为一个独立的引用单元。当它属于主内容流（main flow）时，它的位置独立于主体。这个标签经常是在主文中引用的图片，插图，表格，代码段等等，当这部分转移到附录中或者其他页面时不会影响到主体。

<figure>
    <img src="/media/cc0-images/elephant-660-480.jpg"
         alt="Elephant at sunset">
    <figcaption>An elephant at sunset</figcaption>
</figure>

通常，<figure>是图像，插图，图表，代码片段等，在文档的主流程中引用，但可以移动到文档的另一部分或附录而不影响主流程。
作为sectioning root，<figure>元素的内容轮廓将从文档的主要轮廓中排除。
通过在其中插入<figcaption>（作为第一个或最后一个子元素），可以将标题与<figure>元素相关联。图中找到的第一个<figcaption>元素显示为图的标题。

figcaption

HTML

元素是与其相关联的图片的说明/标题，用于描述其父节点

元素里的其他数据。这意味着

在

块里是第一个或最后一个。同时 HTML Figcaption 元素是可选的；如果没有该元素，这个父节点的图片只是会没有说明/标题。

cite

HTML 引用（ Citation）标签 () 表示一个作品的引用，且必须包含作品的标题。这个引用可能是一个根据适当的上下文约定关联引用的元数据的缩写。

<figure>
    <blockquote>
        <p>It was a bright cold day in April, and the clocks were striking thirteen.</p>
    </blockquote>
    <figcaption>First sentence in <cite><a href="http://www.george-orwell.org/1984/0.html">Nineteen Eighty-Four</a></cite> by George Orwell (Part 1, Chapter 1).</figcaption>
</figure>

适用场合可能包括一本书，一张纸，一篇散文，一首诗，一个分数，一首歌，一部电影，一个电视节目，一个游戏，一个雕塑，一幅画，戏剧制作，一个剧本，一个歌剧，一种音乐，一个展览，一个法律案件报告，一个计算机程序，一个网站，一个网页，博客或评论，论坛帖子或评论，鸣叫，或者书面或口头陈述，等等。

在 blockquote 元素或者 q 元素上使用 cite 或者 blockquote 属性来标明参考的在线资源。

blockquote

HTML

元素（或者 HTML 块级引用元素），代表其中的文字是引用内容。通常在渲染时，这部分的内容会有一定的缩进（注中说明了如何更改）。若引文来源于网络，则可以将原内容的出处 URL 地址设置到 cite 特性上，若要以文本的形式告知读者引文的出处时，可以通过元素。

<figure>
    <blockquote cite="https://www.huxley.net/bnw/four.html">
        <p>Words can be like X-rays, if you use them properly—they’ll go through anything. You read and you’re pierced.</p>
    </blockquote>
    <figcaption>—Aldous Huxley, <cite>Brave New World</cite></figcaption>
</figure>

cite属性
是一个标注引用的信息的来源文档或者相关信息的 URL。通常用来描述能够解释引文的上下文或者引用的信息。

若想使用在行内引用较短的内容而非创建一个单独的引用块，可使用（Quotation）元素。
如果想要使用短引用（行间引用），可以使用标签。

q

HTML 引用标签 () 表示一个封闭的并且是短的行内引用的文本。这个标签是用来引用短的文本，所以请不要引入换行符; 对于长的文本的引用请使用

替代。
cite属性
这个属性的值是 URL，意在指出被引用的文本的源文档或者源信息。这个属性重在解释这个引用的参考或者是上下文。

del

HTML 的~~标签表示一些被从文档中删除的文字内容。比如可以在需要显示修改记录或者源代码差异的情况使用这个标签。~~标签的作用恰恰于此相反：表示文档中添加的内容。

cite属性
提供一个 URI，其中的资源解释作出修改的原因（比如：根据某次会议讨论）。
datetime属性
这个属性说明修改的时间和日期，这里的时间和日期格式要符合规范。如果设置的值不符合该规范，那么它将没有任何意义。

s

HTML ~~元素使用删除线来渲染文本。使用 ~~元素来表示不再相关，或者不再准确的事情。但是当表示文档编辑时，不提倡使用 ~~；为此，提倡使用~~~~~~ 和元素。

ins

HTML 元素定义已经被插入文档中的文本。

cite属性
cite 属性的值指向一个文档的 URL，该文档解释了文本被插入或修改的原因。（目前该属性还没有被主流浏览器支持）
datetime属性
该特性指示的此修改发生的时间和日期，并且该特性的值必须是一个有效的日期或者时间字符串。如果该值不能被解析为日期或者时间，则该元素不具有相关联的时间标记。

sub/sup

HTML _{元素定义了一个文本区域，出于排版的原因，与主要的文本相比，应该展示得更低并且更小。}

这个元素应该只用于排版目的，也就是改变文本的位置会改变含义，例如在数学中（t₂，也可以考虑使用 MathML 公式）或者化学符号（ H₂O）。
这个元素不能用于样式上的目的，比如产品名称 LaTeX 的样式，这时应该使用 CSS样式： vertical-align 属性的 sub 值能实现相同效果。

abbr

HTML 缩写元素（）用于代表缩写，并且可以通过可选的 title 属性提供完整的描述。若使用 title 属性，则它必须且仅可包含完整的描述内容。

<p>You can use <abbr title="Cascading Style Sheets">CSS</abbr> to style your <abbr title="HyperText Markup Language">HTML</abbr>.</p>

title 属性有特殊的语法含义; 它必须包含对一个缩写完全天然可读的扩写或者描述。这些文本通常会作为提示，在鼠标指针覆盖到该元素时显示作为一个提示。

dfn

HTML 定义元素 () 表示术语的一个定义。

<!-- Define "The Internet" -->
<p><dfn id="def-internet">The Internet</dfn> is a global system of interconnected networks that use the Internet Protocol Suite (TCP/IP) to serve billions of users worldwide.</p>

<dl>
  <!-- Define "World-Wide Web" and reference definition for "the Internet" -->
  <dt>
    <dfn>
      <abbr title="World-Wide Web">WWW</abbr>
    </dfn>
  </dt>
  <dd>The World-Wide Web (WWW) is a system of interlinked hypertext documents accessed on <a href="#def-internet">the Internet</a>.</dd>
</dl>

code

HTML 元素呈现一段计算机代码。默认情况下，它以浏览器的默认等宽字体显示。

媒体资源标签

picture

包含零或多个元素和一个元素来为不同的显示/设备场景提供图像版本。浏览器会选择最匹配的子元素，如果没有匹配的，就选择元素的 src 属性中的 URL。

<!--Change the browser window width to see the image change.-->

<picture>
    <source srcset="/media/cc0-images/surfer-240-200.jpg"
            media="(min-width: 800px)">
    <img src="/media/cc0-images/painted-hand-298-332.jpg" alt="" />
</picture>

的常见使用场景：
艺术指导 (Art direction) —— 针对不同 media 条件裁剪或修改图像
遇到所有浏览器都不支持的特定格式时，提供不同的图像格式

media 属性
media 属性允许你提供一个用于给用户代理作为选择元素的依据的媒体条件 (media condition)（类似于媒体查询）。如果这个媒体条件匹配结果为 false，那么这个元素会被跳过。

type 属性
type 属性允许你为元素的 srcset 属性指向的资源指定一个 MIME 类型。如果用户代理不支持指定的类型，那么这个元素会被跳过。

source

HTML 元素为 , 或者元素指定多个媒体资源。这是一个空元素。它通常用于以不同浏览器支持的多种格式 (en-US)提供相同的媒体内容。

<!--这个例子包含了多个 <source> 元素。如果能够播放的话，浏览器就会试图去加载第一个 source 元素（Opus 后缀名）；如果不行，那就退而求其次去加载第二个 (Vorbis 后缀名)，最终退到了 MP3 格式：-->
<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

<img> 元素将一份图像嵌入文档。

<img class="fit-picture"
     src="/media/cc0-images/grapefruit-slice-332-332.jpg"
     alt="Grapefruit slice atop a pile of other slices">

src 属性是必须的，它包含了你想嵌入的图片的文件路径。
alt 属性包含一条对图像的文本描述，这不是强制性的，但对可访问性而言，它难以置信地有用——屏幕阅读器会将这些描述读给需要使用阅读器的使用者听，让他们知道图像的含义。如果由于某种原因无法加载图像，普通浏览器也会在页面上显示alt 属性中的备用文本：例如，网络错误、内容被屏蔽或链接过期时。
title属性的值一般作为提示条 (tooltip) 呈现给用户，在光标于图片上停下后显示出来。尽管这确实能给用户提供更多的信息，

其它属性见MDN

是一个可替换元素。它的 display 属性的默认值是 inline，但是它的默认分辨率是由被嵌入的图片的原始宽高来确定的，使得它就像 inline-block 一样。你可以为设置 border/border-radius、padding/margin、width、height 等等的 CSS 属性。

audio

HTML 元素用于在文档中嵌入音频内容。元素可以包含一个或多个音频资源，这些音频资源可以使用 src 属性或者元素来进行描述：浏览器将会选择最合适的一个来使用。也可以使用 MediaStream 将这个元素用于流式媒体。

<figure>
    <figcaption>Listen to the T-Rex:</figcaption>
    <audio
        controls
        src="/media/cc0-audio/t-rex-roar.mp3">
            Your browser does not support the
            <code>audio</code> element.
    </audio>
</figure>

autoplay属性
布尔值属性；声明该属性，音频会尽快自动播放，不会等待整个音频文件下载完成。

controls属性
如果声明了该属性，浏览器将提供一个包含声音，播放进度，播放暂停的控制面板，让用户可以控制音频的播放。
loop属性
布尔属性；如果声明该属性，将循环播放音频。
muted属性
表示是否静音的布尔值。默认值为 false，表示有声音。

src属性
嵌入的音频的 URL。该 URL 应遵从 HTTP access controls. 这是一个可选属性；你可以在 audio 元素中使用元素来替代该属性指定嵌入的音频。

video

HTML 元素用于在 HTML 或者 XHTML 文档中嵌入媒体播放器，用于支持文档内的视频播放。你也可以将标签用于音频内容，但是元素可能在用户体验上更合适。

<video controls width="250">

    <source src="/media/cc0-videos/flower.webm"
            type="video/webm">

    <source src="/media/cc0-videos/flower.mp4"
            type="video/mp4">

    Sorry, your browser doesn't support embedded videos.
</video>

属性和audio差不多

canvas

<canvas>元素可被用来通过 JavaScript（Canvas API 或 WebGL API）绘制图形及图形动画。

不同于元素，元素需要有闭合标签 ().

有序，无序，自定义列表

ul

HTML

元素（或称 HTML 无序列表元素）表示一个内可含多个元素的无序列表或项目符号列表。

和
元素二者都代表一组数据，不过它们彼此是有区别的，ol 元素中的顺序是有意义的。如果想确定你到底需要使用哪一个列表元素，你可以试着去改变数据的顺序。如果想表达的语义改变了，你就需要使用 ol 元素，否则你该使用 ul 元素。

ol

HTML

元素表示有序列表，通常渲染为一个带编号的列表。
reversed属性
此布尔值属性指定列表中的条目是否是倒序排列的，即编号是否应从高到低反向标注。

start属性
一个整数值属性，指定了列表编号的起始值。此属性的值应为阿拉伯数字，尽管列表条目的编号类型 type 属性可能指定为了罗马数字编号等其他类型的编号。比如说，想要让元素的编号从英文字母 “d” 或者罗马数字 “iv” 开始，都应当使用 start=“4”。

type属性
设置编号的类型：

a 表示小写英文字母编号
A 表示大写英文字母编号
i 表示小写罗马数字编号
I 表示大写罗马数字编号
1 表示数字编号（默认）

start和type属性在 HTML4 中弃用，但是在 HTML5 中被重新引入。除非列表中序号很重要（比如，在法律或者技术文件中条目通常被需要所引用），否则请使用 CSS list-style-type 属性替代。

li

HTML

元素（或称 HTML 列表条目元素）用于表示列表里的条目。它必须包含在一个父元素里：一个有序列表 (
1. )，一个无序列表 (
  - )，或者一个菜单 ( )。在菜单或者无序列表里，列表条目通常用点排列显示；在有序列表里，列表条目通常在左边显示按升序排列的计数，例如数字或者字母。
dl

HTML

元素（或 HTML 描述列表元素）是一个包含术语定义以及描述的列表，通常用于展示词汇表或者元数据 (键 - 值对列表)。

dt

HTML
元素（或 HTML 术语定义元素）用于在一个定义列表中声明一个术语。该元素仅能作为
的子元素出现。通常在该元素后面会跟着
元素，然而，多个连续出现的
元素都将由出现在它们后面的第一个
元素定义。

dd

HTML

元素（HTML 描述元素）用来指明一个描述列表 (
) 元素中一个术语的描述。这个元素只能作为描述列表元素的子元素出现，并且必须跟着一个元素。
```
<dl>
  <dt>Firefox</dt>
  <dd>A free, open source, cross-platform, graphical web browser
      developed by the Mozilla Corporation and hundreds of volunteers.</dd>
  <dd>The Red Panda also known as the Lesser Panda, Wah, Bear Cat or Firefox,
      is a mostly herbivorous mammal, slightly larger than a domestic cat
      (60 cm long).</dd>

  
</dl>
```
表格

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>
```
caption

HTML 元素 (or HTML 表格标题元素) 展示一个表格的标题，它常常作为
的第一个子元素出现，同时显示在表格内容的最前面，但是，它同样可以被 CSS 样式化，所以，它同样可以出现在任何一个一个相对于表格的做任意位置。

tr

HTML 元素定义表格中的行。同一行可同时出现和元素。

th

HTML 元素定义表格内的表头单元格。这部分特征是由 scope and headers 属性准确定义的。
scope属性
这个枚举属性定义了表头元素 (在中定义) 关联的单元格。它可能有以下值：
- row: 表头关联一行中所有的单元格。
- col: 表头关联一列中所有的单元格。
- rowgroup:表头属于一个行组并与其中所有单元格相关联。这些单元格可以被放在表头的左侧或右侧，取决于元素中 dir 属性的值。
- colgroup: 表头属于一个列组并与其中所有单元格相关联。
  auto
td

HTML 元素定义了一个包含数据的表格单元格。
colspan属性
此属性包含一个非负整数值，该值指示单元格扩展的列数。其默认值为。大于 1000 的值将被视为不正确，并将设置为默认值（1）。

rowspan属性
此属性包含一个非负整数值，该值指示单元格扩展的行数。其默认值为 ;如果其值设置为，它将一直延伸到单元格所属的表部分（，（en-US），即使隐式定义）的末尾。大于 65534 的值将裁剪为 65534。

thead

HTML的元素定义了一组定义表格的列头的行。

tbody
HTML 元素封装了一组表行（元素），指示它们构成表的正文（）。 #### tfoot HTML 元素定义了一组表格中各列的汇总行。

colgroup

HTML 中的表格列组（Column Group ）标签用来定义表中的一组列表。
```
<table>
    <caption>Superheros and sidekicks</caption>
    <colgroup>
        <col>
        <col span="2" class="batman">
        <col span="2" class="flash">
    </colgroup>
    <tr>
        <td> </td>
        <th scope="col">Batman</th>
        <th scope="col">Robin</th>
        <th scope="col">The Flash</th>
        <th scope="col">Kid Flash</th>
    </tr>
    <tr>
        <th scope="row">Skill</th>
        <td>Smarts</td>
        <td>Dex, acrobat</td>
        <td>Super speed</td>
        <td>Super speed</td>
    </tr>
</table>
```
col

HTML 元素定义表格中的列，并用于定义所有公共单元格上的公共语义。它通常位于元素内。
span属性
该属性值为一个正整数，表示该元素横跨的列数。默认值为 1

表单，输入框，按钮，下拉框

form

HTML 元素表示文档中的一个区域，此区域包含交互控件，用于向 Web 服务器提交信息。
```
<form action="" method="get" class="form-example">
  <div class="form-example">
    <label for="name">Enter your name: </label>
    <input type="text" name="name" id="name" required>
  </div>
  <div class="form-example">
    <label for="email">Enter your email: </label>
    <input type="email" name="email" id="email" required>
  </div>
  <div class="form-example">
    <input type="submit" value="Subscribe!">
  </div>
</form>
```
关于提交表单的属性
下列属性控制提交表单时的行为。

action
处理表单提交的 URL。这个值可被、或元素上的 formaction 属性覆盖。
enctype
当 method 属性值为 post 时，enctype 就是将表单的内容提交给服务器的 MIME 类型。可能的取值有：
- application/x-www-form-urlencoded：未指定属性时的默认值。
- multipart/form-data：当表单包含 type=file 的元素时使用此值。
- text/plain：出现于 HTML5，用于调试。
  这个值可被、或元素上的 formenctype 属性覆盖。
method
浏览器使用这种 HTTP 方式来提交表单。可能的值有：
- post：指的是 HTTP POST 方法；表单数据会包含在表单体内然后发送给服务器。
- get：指的是 HTTP GET 方法；表单数据会附加在 action 属性的 URL 中，并以 ‘?’ 作为分隔符，没有副作用时使用这个方法。
- dialog：如果表单在元素中，提交时关闭对话框。
  此值可以被、或元素中的 formmethod 属性覆盖。
novalidate
此布尔值属性表示提交表单时不需要验证表单。如果没有声明该属性（因此表单需要通过验证）。该属性可以被表单中的、或元素中的 formnovalidate 属性覆盖。
target
表示在提交表单之后，在哪里显示响应信息。在 HTML 4 中，这是一个 frame 的名字/关键字对。在 HTML5 里，这是一个浏览上下文的名字/关键字（如标签页、窗口或 iframe）。下述关键字有特别含义：
- _self：默认值。在相同浏览上下文中加载。
- _blank：在新的未命名的浏览上下文中加载。
- _parent：在当前上下文的父级浏览上下文中加载，如果没有父级，则与 _self 表现一致。
- _top：在最顶级的浏览上下文中（即当前上下文的一个没有父级的祖先浏览上下文），如果没有父级，则与 _self 表现一致。
  此值可以被、或元素中的 formtarget 属性覆盖。
fieldset

HTML 元素用于对表单中的控制元素进行分组（也包括 label 元素）
```
<form>
  <fieldset>
    <legend>Choose your favorite monster</legend>

    <input type="radio" id="kraken" name="monster">
    <label for="kraken">Kraken</label><br/>

    <input type="radio" id="sasquatch" name="monster">
    <label for="sasquatch">Sasquatch</label><br/>

    <input type="radio" id="mothman" name="monster">
    <label for="mothman">Mothman</label>
  </fieldset>
</form>

```
legend

HTML 元素用于表示其父元素的内容标题。

label

HTML 元素（标签）表示用户界面中某个元素的说明。

output

HTML 标签表示计算或用户操作的结果。
```
<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>
```
input

HTML 元素用于为基于 Web 的表单创建交互式控件，以便接受来自用户的数据; 可以使用各种类型的输入数据和控件小部件，具体取决于设备和user agent。

的工作方式相当程度上取决于type属性的值，不同的 type 值会在各自的参考页中进行介绍。如果未指定此属性，则采用的默认类型为 text。
可用的值包括：
- button 没有默认行为的按钮，上面显示 value 属性的值，默认为空。
- checkbox 复选框，可设为选中或未选中。
- color 用于指定颜色的控件；在支持的浏览器中，激活时会打开取色器。
- date 输入日期的控件（年、月、日，不包括时间）。在支持的浏览器激活时打开日期选择器或年月日的数字滚轮。
- datetime-local 输入日期和时间的控件，不包括时区。在支持的浏览器激活时打开日期选择器或年月日的数字滚轮。
- email 编辑邮箱地址的区域。类似 text 输入，但在支持的浏览器和带有动态键盘的设备上会有确认参数和相应的键盘。
- file 让用户选择文件的控件。使用 accept 属性规定控件能选择的文件类型。
- hidden 不显示的控件，其值仍会提交到服务器。举个例子，右边就是一个隐形的控件。
- image 带图像的 submit 按钮。显示的图像由 src 属性规定。如果 src 缺失，alt 属性就会显示。
- month 输入年和月的控件，没有时区。
- number 用于输入数字的控件。如果支持的话，会显示滚动按钮并提供缺省验证（即只能输入数字）。拥有动态键盘的设备上会显示数字键盘。
- password 单行的文本区域，其值会被遮盖。如果站点不安全，会警告用户。
- radio 单选按钮，允许在多个拥有相同 name 值的选项中选中其中一个。
- range 此控件用于输入不需要精确的数字。控件是一个范围组件，默认值为正中间的值。同时使用 min 和 max 来规定值的范围。
- reset 此按钮将表单的所有内容重置为默认值。不推荐。
- search 用于搜索字符串的单行文字区域。输入文本中的换行会被自动去除。在支持的浏览器中可能有一个删除按钮，用于清除整个区域。拥有动态键盘的设备上的回车图标会变成搜索图标。
- submit 用于提交表单的按钮。
- submit 用于提交表单的按钮。
- text 默认值。单行的文本区域，输入中的换行会被自动去除。
- time 用于输入时间的控件，不包括时区。
- url 用于输入 URL 的控件。类似 text 输入，但有验证参数，在支持动态键盘的设备上有相应的键盘。
- week 用于输入以年和周数组成的日期，不带时区。
list
list 属性的值是位于同一文档中的元素的 id。提供了一个预定义值的列表，以建议用户进行此输入。列表中与类型不兼容的任何值都不会包含在建议的选项中。提供的值是建议，而不是要求：用户可以从此预定义列表中进行选择或提供其他值。
```
<datalist id="colorsxx">
  <option>#ff0000</option>
  <option>#ee0000</option>
  <option>#dd0000</option>
  <option>#cc0000</option>
  <option>#bb0000</option>
</datalist>
<datalist id="numbersxx">
  <option>0</option>
  <option>2</option>
  <option>4</option>
  <option>8</option>
  <option>16</option>
  <option>32</option>
  <option>64</option>
</datalist>
<datalist id="fruitsxx">
  <option>cherry</option>
  <option>banana</option>
  <option>mango</option>
  <option>orange</option>
  <option>blueberry</option>
</datalist>
<datalist id="urlsxx">
  <option>https://developer.mozilla.org</option>
  <option>https://caniuse.com/</option>
  <option>https://mozilla.com</option>
  <option>https://mdn.github.io</option>
  <option>https://www.youtube.com/user/firefoxchannel</option>
</datalist>

<p><label for="textx">Text</label> <input type="text" list="fruitsxx" id="textx"/></p>
<p><label for="colorx">Color</label> <input type="color" list="colorsxx" id="colorx"/></p>
<p><label for="rangex">Range</label> <input type="range" min="0" max="64" list="numbersxx" id="rangex"/></p>
<p><label for="numberx">Number</label> <input type="number" min="0" max="64" list="numbersxx" id="numberx"/></p>
<p><label for="urlx">URL</label> <input type="url" list="urlsxx" id="urlx"/></p>
```
datalist

HTML 元素包含了一组元素，这些元素表示其它表单控件可选值。
```
<label for="ice-cream-choice">Choose a flavor:</label>
<input list="ice-cream-flavors" id="ice-cream-choice" name="ice-cream-choice" />

<datalist id="ice-cream-flavors">
    <option value="Chocolate">
    <option value="Coconut">
    <option value="Mint">
    <option value="Strawberry">
    <option value="Vanilla">
</datalist>
```
option

HTML 元素用于定义在 , 或元素中包含的项。可以在弹出窗口和 HTML 文档中的其他项目列表中表示菜单项。
disabled
如果设置了这个布尔属性，则该选项不可选。浏览器通常会将这种控件显示为灰色，并且不再接受任何浏览器事件，例如鼠标点击或者焦点相关的事件。如果这个属性没有设置，而这个元素的其中一个父元素是被禁用的元素，则这个元素仍然是禁用的。
label
这个属性是用于表示选项含义的文本。如果 label 属性没有定义，它的值就是元素文本内容。
selected
这个布尔属性存在时表明这个选项是否一开始就被选中。如果元素是元素的子元素，并且元素的 multiple 属性没有设置，则元素中只有一个元素可以拥有 selected 属性。
value
这个属性的值表示该选项被选中时提交给表单的值。如果省略了这个属性，值就从选项元素的文本内容中获取

button

HTML 元素表示一个可点击的按钮，可以用在表单或文档其它需要使用简单标准按钮的地方。默认情况下，HTML 按钮的显示样式接近于 user agent 所在的宿主系统平台（用户操作系统）的按钮，但你可以使用 CSS 来改变按钮的样貌。
name
button 的名称，与表单数据一起提交。
type
button 的类型。可选值：
- submit: 此按钮将表单数据提交给服务器。如果未指定属性，或者属性动态更改为空值或无效值，则此值为默认值。
- reset: 此按钮重置所有组件为初始值。
- button: 此按钮没有默认行为。它可以有与元素事件相关的客户端脚本，当事件出现时可触发。
- menu: 此按钮打开一个由指定元素进行定义的弹出菜单。
  value
  button 的初始值。它定义的值与表单数据的提交按钮相关联。当表单中的数据被提交时，这个值便以参数的形式被递送至服务器。
注意
元素比元素更容易使用样式。你可以在元素内添加 HTML 内容（像、甚至），以及 ::after 和 ::before 伪元素来实现复杂的效果，而只支持文本内容。
如果你的按钮不是用于向服务器提交数据，请确保这些按钮的 type 属性设置成 button。否则它们被按下后将会向服务器发送数据并加载（可能并不存在的）响应内容，因而可能会破坏当前文档的状态。
```
<button type="submit" name="myButton" value="foo">Click me</button>
```
select

HTML 元素表示一个提供选项菜单的控件：
```
<label for="pet-select">Choose a pet:</label>

<select name="pets" id="pet-select">
    <option value="">--Please choose an option--</option>
    <option value="dog">Dog</option>
    <option value="cat">Cat</option>
    <option value="hamster">Hamster</option>
    <option value="parrot">Parrot</option>
    <option value="spider">Spider</option>
    <option value="goldfish">Goldfish</option>
</select>



```
<select>元素有一些用于控制元素的特有属性，例如 multiple 规定了能不能同时选中多个选项，size 规定了一次性显示多少选项。这个元素也支持大多数常见的表单输入元素属性，如 required, disabled, autofocus 等。
你还可以将 <option>元素放在<optgroup>元素中以为下拉菜单创建不同的选项分组。
```

<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>
```
optgroup

HTML 元素为元素中的选项创建分组。

disabled
如果设置了这个布尔值，则不能选择这个选项组中的任何选项。通常浏览器会置灰这样的控件，它不接受任何浏览器事件，如鼠标点击或者焦点相关的事件。
label
选项组的名字，浏览器用以在用户界面中标记选项。使用这个元素时必须加上这个属性。

textarea

HTML 元素表示一个多行纯文本编辑控件，当你希望用户输入一段相当长的、不限格式的文本，例如评论或反馈表单中的一段意见时，这很有用。
```
<label for="story">Tell us your story:</label>

<textarea id="story" name="story"
          rows="5" cols="33">
It was a dark and stormy night...
</textarea>
```
上述例子展示了的几个特点：
- 为了提高可访问性（accessibility），用于将与一个关联的 id 属性。
- name 属性，用于设置随表单一同提交到服务器的相关数据的名字。
- rows 和 cols 属性，用于声明的精确尺寸。这对于一致性非常有帮助，因为不同浏览器的默认值常常不一样。
- 位于开始标签和闭合标签之间的默认内容。不支持 value 属性。
progress

HTML中的<progress>元素用来显示一项任务的完成进度。虽然规范中没有规定该元素具体如何显示，浏览器开发商可以自己决定，但通常情况下，该元素都显示为一个进度条形式。
```
<label for="file">File progress:</label>
<progress id="file" max="100" value="70"> 70% </progress>
```
max
该属性描述了这个progress元素所表示的任务一共需要完成多少工作。
value
该属性用来指定该进度条已完成的工作量。如果没有value 属性,则该进度条的进度为"不确定",也就是说，进度条不会显示任何进度，你无法估计当前的工作会在何时完成 (比如在下载一个未知大小的文件时，下载对话框中的进度条就是这样的).

Note: 你可以使用orient (en-US)属性来指定该进度条的显示方向是横向 (默认) 还是纵向.CSS 伪类:indeterminate可以用来匹配那些不确定的进度条。

meter

HTML 元素用来显示已知范围的标量值或者分数值。
value
当前的数值。如果设置了最小值和最大值（分别由 min 属性和 max 属性定义），它必须介于最小值和最大值之间。如果没有指定或者格式有误，值即为 0.如果给定的值不在最小值和最大值之间，它的值就等于它最接近的一端的值。
min
值域的最小边界值。如果设置了，它必须比最大值要小。如果没设置，默认为 0。
max
值域的上限边界值。如果设置了，它必须比最小值要大。如果没设置，默认为 1。
low
定义了低值区间的上限值（译者注：如果 value 介于 min 和 low 之间，该元素就会表现出低值的视觉效果，value 落在 [min,low]、[high,max] 等不同的区间会使浏览器渲染该元素时出不同的视觉效果）。如果设置了，它必须比最小值属性大，并且不能超过 high 值和最大值。未设置或者比最小值还要小时，其值即为最小值。
high
定义了高值区间的下限值。如果设置了，它必须小于最大值，同时必须大于 low 值和最小值。如果没有设置，或者比最大值还大，其值即为最大值。
optimum
这个属性用来指示最优/最佳取值。它必须在正确的值域内（由最小值属性和最大值属性定义）。当使用了 low 和 high 属性时，它指明哪一个取值范围是更好的。例如，假设它介于最小值和 low 之间，那么 lower 区间就被认为是更佳的取值范围。
form
该属性将本元素与对应的 form 元素关联。例如，一个计量器可能用来显示某个数值输入框（input 元素，number 类型）的范围。只有当计量器元素被用作表单关联的元素时，该属性才应当被使用；即便如此，如果它作为表单的后代元素出现，它仍然有可能被省略。
```
<p>He got a <meter low="69" high="80" max="100"
  value="84">B</meter> on the exam.</p>
```
模板标签

template

HTML 内容模板（）元素是一种用于保存客户端内容机制，该内容在加载页面时不会呈现，但随后可以 (原文为 may be) 在运行时使用 JavaScript 实例化。
将模板视为一个可存储在文档中以便后续使用的内容片段。虽然解析器在加载页面时确实会处理元素的内容，但这样做只是为了确保这些内容有效；但元素内容不会被渲染。
```
<table id="producttable">
  <thead>
    <tr>
      <td>UPC_Code</td>
      <td>Product_Name</td>
    </tr>
  </thead>
  <tbody>
    
  </tbody>
</table>

<template id="productrow">
  <tr>
    <td class="record"></td>
    <td></td>
  </tr>
</template>
<script>
// 通过检查来测试浏览器是否支持 HTML 模板元素
// 用于保存模板元素的内容属性。
if ('content' in document.createElement('template')) {

  // 使用现有的 HTML tbody 实例化表和该行与模板
  let t = document.querySelector('#productrow'),
  td = t.content.querySelectorAll("td");
  td[0].textContent = "1235646565";
  td[1].textContent = "Stuff";

  // 克隆新行并将其插入表中
  let tb = document.getElementsByTagName("tbody");
  let clone = document.importNode(t.content, true);
  tb[0].appendChild(clone);

  // 创建一个新行
  td[0].textContent = "0384928528";
  td[1].textContent = "Acme Kidney Beans";

  // 克隆新行并将其插入表中
  let clone2 = document.importNode(t.content, true);
  tb[0].appendChild(clone2);

} else {
  // 找到另一种方法来添加行到表，因为不支持 HTML 模板元素。
}
</script>
```