HTML

<meta> 元素是 HTML 中用于提供关于文档的元信息（metadata）的标签。它通常位于 HTML 文档的 <head> 部分，并通过 name/value 属性对来提供信息。<meta> 元素不会在页面中显示，而是提供有关文档的额外信息，如字符集、视口设置、关键词、描述等。

charset：用于指定文档使用的字符集。
content：用于提供与 name 或 http-equiv 属性相关的值。
http-equiv：用于模拟 HTTP 头部中的字段，常用于控制页面的刷新、缓存等行为。
name：用于定义元信息的名称，通常与 content 属性一起使用。

`<link>`:HTMLLinkElement

<link> 是 HTML 中用于定义文档与外部资源之间关系的标签。它通常用于引入外部样式表、图标、字体等资源，或者指定文档之间的关系，如引入下一个或上一个文档。

html

<!-- 引入样式表（CSS） -->
<link rel="stylesheet" type="text/css" href="styles.css">

<!-- 引入图标（Favicon） -->
<link rel="icon" type="image/png" href="favicon.png">

<!-- 指定文档关系 -->
<link rel="next" href="page2.html">

<!-- 引入字体 -->
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Open+Sans">

as：指定资源的媒体类型，通常与 rel="preload" 或者 rel="prefetch" 结合使用。
crossorigin：指定是否跨域加载资源，通常用于引入跨域的字体或脚本。
disabled：用于禁用链接的资源。当设置为 disabled 时，浏览器不会加载该资源。
href：指定链接的资源路径，可以是相对路径或绝对路径。
hreflang：指定链接的资源语言，适用于多语言网站。
media：指定样式表适用的媒体类型，通常用于响应式设计。
rel：定义当前文档与链接文档之间的关系。常见值包括 "nofollow"、"noopener noreferrer" 等。
sizes：为响应式图像指定图像尺寸，通常在与 <link rel="icon"> 配合使用。
title：为链接指定标题，通常用于 <link rel="alternate"> 链接。
type：指定链接的资源类型，通常用于样式表和脚本。

`<style>`:HTMLStyleElement

<style> 元素是 HTML 中用于包含文档的样式信息的元素。它通常位于文档的 <head> 部分，用于定义内部样式表或引用外部样式表。样式表包含了有关如何呈现文档的信息，包括颜色、字体、布局等方面。

html

<!DOCTYPE html>
<html lang="en">
<head>
  <style>
    body {
      font-family: Arial, sans-serif;
      background-color: #f0f0f0;
    }

    h1 {
      color: blue;
    }
  </style>
</head>
<body>
  <h1>Hello, World!</h1>
  <p>This is a sample page with internal styles.</p>
</body>
</html>

media: 用于定义样式表适用的媒体类型，如打印设备或屏幕。示例：<style media="screen">...</style>
nonce: 是用于 Content Security Policy (CSP) 的一个属性，允许将随机值（nonce）用于验证内联脚本或样式的合法性。示例：<style nonce="random-value">...</style>
title: 用于提供样式表的标题，通常用于描述样式表的目的或作用。示例：<style title="Page Styles">...</style>

`<title>`:HTMLTitleElement

<title> 元素是 HTML 文档头部（<head> 元素内）的一个标签，用于定义网页的标题。网页标题通常显示在浏览器的标题栏或选项卡上，并且在书签、搜索引擎结果等地方也会显示。

`<script>`:HTMLScriptElement

<script> 元素是 HTML 中用于嵌入或引用客户端脚本的标签。

html

<script>
  // JavaScript 代码在这里
  alert('Hello, World!');
</script>

<script src="myscript.js"></script>

async:用于异步加载脚本。当页面加载时，脚本会异步执行，而不会阻止 HTML 解析。示例：<script async src="example.js"></script>
crossorigin:用于指定是否应该请求跨域脚本，并可选地指定如何处理跨域请求。示例：<script src="example.js" crossorigin="anonymous"></script>
defer:表示脚本将在文档解析完成后执行。它会按照它们在文档中出现的顺序执行。示例：<script defer src="example.js"></script>
fetchpriority:指定脚本获取的优先级。这是一个实验性的属性，目前并没有被所有浏览器完全支持。示例：<script src="example.js" fetchpriority="high"></script>
integrity:用于启用 Subresource Integrity (SRI)，以确保引入的资源在传输过程中没有被篡改。示例：<script src="example.js" integrity="sha256-abc123"></script>
nomodule:表示脚本是不支持模块的老式脚本。在支持模块的浏览器中将忽略。示例：<script nomodule src="legacy.js"></script>
nonce:用于为脚本提供 CSP (Content Security Policy) 的 nonce 值。示例：<script nonce="random-value" src="example.js"></script>
referrerpolicy:用于指定请求的引用者政策，控制浏览器是否在请求中包含引用者信息。示例：<script src="example.js" referrerpolicy="no-referrer"></script>
src:指定外部脚本文件的 URL。示例：<script src="example.js"></script>
type:指定脚本内容的 MIME 类型。通常为 "text/javascript" 或 "module"。示例：<script type="text/javascript" src="example.js"></script>

`<noscript>`

<noscript> 是 HTML 中的一个元素，用于提供在浏览器不支持或禁用脚本时显示的替代内容。通常，浏览器会执行页面上的脚本，但在某些情况下，用户可能禁用了脚本或浏览器不支持脚本语言。

html

<script>
  document.write("这是通过脚本生成的内容。");
</script>
<noscript>
  <p>你的浏览器不支持或已禁用了脚本。请确保脚本已启用以获得完整的功能。</p>
</noscript>

`<body>`:HTMLBodyElement

<body> 元素是HTML文档中的一个主要容器，包含了整个页面的内容，例如文本、图像、链接、脚本等。在HTML文档结构中，<body> 元素是文档的主体部分。

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My Web Page</title>
</head>
<body>
  <!-- 页面内容 -->
  <h1>Hello, World!</h1>
  <p>This is a simple web page.</p>
</body>
</html>

行内标签

和其他元素并排显示
不支持设置宽度、高度
宽度、高度默认由内容撑开
仅支持设置margin-left、margin-right值，不支持auto属性
仅支持设置padding-left、padding-right值

TIP

行内元素设置了float属性或position属性（absolute或fixed属性值）将会改变该元素自身特质，如支持设置宽高等属性。

`<a>`:HTMLAnchorElement

<a> 是HTML中的锚元素，用于创建超链接（hyperlink）。它允许你将一个文档链接到另一个文档，或者在同一文档内创建链接到不同部分的锚点。

html

<a href="https://www.example.com">访问 Example.com</a>

href：指定链接的目标URL。可以是绝对路径、相对路径或URL。
download：指示浏览器下载链接的目标而不是导航到它。
hreflang：指定链接的目标URL的语言。
ping：指定一组用空格分隔的URL，浏览器在用户点击链接时会发送POST请求到这些URL，用于跟踪用户点击行为等。
referrerpolicy：控制请求的 Referer 头部信息，指定如何处理从当前文档到目标URL的跳转。常见值包括 "no-referrer"、"no-referrer-when-downgrade"、"origin"、"origin-when-cross-origin"等。
rel：定义当前文档与链接文档之间的关系。常见值包括 "nofollow"、"noopener noreferrer" 等。
target：指定链接如何在浏览器中打开。常见值包括 "_blank"、"_self"、"_parent"、"_top" 等。
type：指定链接目标资源的MIME类型。

锚点（内部链接）

html

<a href="#section1">跳转到第一部分</a>

<!-- ... -->

<section id="section1">
  <h2>第一部分</h2>
  <p>这是文档中的第一部分。</p>
</section>

`<br>`:HTMLBRElement

<br> 元素是HTML中的一个空元素，用于在文本中插入一个换行符（换行）或者在两个元素之间创建垂直间距。它是一个单标签，没有结束标签，因为它没有包含任何内容。

html

<p>This is some text.<br>This is on a new line.</p>

`<data>`:HTMLDataElement

<data> 元素是嵌入可以被机器理解的数据，这样它就可以被脚本语言（如JavaScript）等处理。它的一个常见用法是将数据值嵌入到文档中，以便脚本可以访问和操作这些值。

html

<ul>
  <li><data value="398">Mini Ketchup</data></li>
  <li><data value="399">Jumbo Ketchup</data></li>
  <li><data value="400">Mega Jumbo Ketchup</data></li>
</ul>

value：指定元素内容的机器可读数据。

`<datalist>`:HTMLDataListElement

<datalist> 是一个 HTML 元素，通常用于与 <input> 元素结合使用，提供一个预定义的选项列表。这个元素允许用户从一个固定的下拉列表中选择值，而不是自由输入。这对于需要用户选择特定选项的情况非常有用。

html

<label for="products">选择产品：</label>
<input list="productList" id="products" name="products" autocomplete="off">

<datalist id="productList">
  <option value="Mini Ketchup">
  <option value="Jumbo Ketchup">
  <option value="Mega Jumbo Ketchup">
</datalist>

`<meter>`:HTMLMeterElement

<meter> 标签是 HTML5 中的一个元素，用于表示已知范围内的标量测量，例如磁盘利用率、音量等。<meter> 元素包含一个当前值（value）和一个最大值（max），并且可以选择性地包含最小值（min）和高度（高度可用于表示测量条的高度）。

html

<p>Heat the oven to <meter min="200" max="500" value="350">350 degrees</meter>.</p>

value: 表示当前测量值。这是 <meter> 标签中最重要的属性，用于指定当前测量的具体值。
min: 表示测量的最小值。这是一个可选属性，如果未指定，默认为 0。value 属性的值不能小于 min。
max: 表示测量的最大值。这是 <meter> 标签中另一个重要的属性，用于指定测量的范围。value 属性的值不能大于 max。
low: 可选属性，表示低水平的阈值。如果指定了 low，当 value 属性的值低于这个阈值时，浏览器可能会使用不同的样式来表示低水平的状态。
high: 可选属性，表示高水平的阈值。如果指定了 high，当 value 属性的值高于这个阈值时，浏览器可能会使用不同的样式来表示高水平的状态。
optimum: 可选属性，表示最佳值的范围。这个值不会影响显示，但浏览器可能会根据这个值来确定是否在最佳范围内。在某些情况下，浏览器可能会使用不同的样式或提供其他视觉提示，表示当前值处于最佳范围。
form: 可选属性，表示 <meter> 元素所属的表单（<form>）的 ID。这可以将 <meter> 元素与表单关联起来，使其成为表单的一部分。

`<object>`:HTMLObjectElement

<object> 元素是 HTML 中的一个标签，用于在文档中嵌入对象，通常是多媒体资源（如图像、音频、视频）或其他插件（如 Flash 插件）。<object> 元素提供了一种通用的嵌入方法，允许开发者指定各种资源的类型和参数。

html

<object data="example.jpg" type="image/jpeg" width="300" height="200">
  <p>如果您看到此消息，表示浏览器不支持嵌入的对象。</p>
</object>

data: 用于指定要嵌入的对象的 URL。可以是图像、音频、视频文件的 URL，或者是其他插件的 URL。
form: 指定 <object> 元素所属的表单（<form>）的 ID。这可以将 <object> 元素与表单关联起来，使其成为表单的一部分。
height: 用于指定嵌入对象的高度。这可以是像素值或百分比。
name: 用于为对象指定名称。通常，这个属性与 JavaScript 一起使用，以便通过名称引用嵌入的对象。
type: 指定嵌入对象的 MIME 类型。这是为了确保浏览器可以正确解释和处理嵌入的内容。例如，对于图像，可以使用 "image/jpeg" 或 "image/png" 等。
usemap: 指定一个客户端图像映射，该映射定义与图像关联的可点击区域。该属性的值应该是 # 后跟客户端图像映射的名称。
width: 用于指定嵌入对象的宽度。这可以是像素值或百分比。

`<output>`:HTMLOutputElement

<output> 元素是 HTML 中的一个标签，用于标识一个计算或用户操作的结果。它通常用于显示表单（<form>）中的计算结果或用户输入的输出。

html

<form oninput="result.value=parseInt(a.value)+parseInt(b.value)">
  <input type="range" id="b" name="b" value="50" /> +
  <input type="number" id="a" name="a" value="10" /> =
  <output name="result" for="a b">60</output>
</form>

for: 用于指定与 <output> 元素相关联的表单元素的 ID。这意味着 <output> 将显示与指定 ID 相关的表单元素的值。
form: 用于指定 <output> 元素所属的表单（<form>）的 ID。这样，即使 <output> 不直接在 <form> 元素内部，也能够与表单关联起来。
name: 用于为 <output> 元素指定一个名称。这对于通过 JavaScript 访问 <output> 的值很有用。

`<progress>`:HTMLProgressElement

<progress> 是HTML中用于表示任务进度的标签。它通常与 JavaScript 一起使用，通过脚本来更新进度条的值。该标签可以用来显示文件上传、下载、任务完成等的进度。

html

<progress id="progress" value="0" max="100"></progress>

max：用于定义进度条的最大值。它表示任务的完成程度的上限。进度条的值（通过 value 属性设置）通常在 0 到 max 之间。
value：指定任务已完成的程度。它必须是 0 和 max 之间的有效浮点数。

`<blockquote>`:HTMLQuoteElement

<blockquote> 元素是HTML中用于表示长引用或块引用的标签。它通常用于包裹一段引用的文本，例如一段文章、一句诗歌或一段对话。浏览器通常会为 <blockquote> 中的文本添加缩进，以示区别于常规文本。

html

<blockquote cite="https://www.example.com/quote-source">
  <p>“生活是一次向前的旅行，你不能回头去改变过去的事，但你可以通过现在的努力创造一个更好的未来。”</p>
  <footer> - 雷奥纳多·迪卡普里奥</footer>
</blockquote>

cite：用于提供引用来源的URL，作者，或其他信息。这个属性对于引用的透明性和可查找性非常重要，尤其是在学术写作或需要引用来源的地方。

`<q>`:HTMLQuoteElement

<q> 是 HTML 中的内联元素，用于表示短引用（quotation）或内联引用。浏览器通常会以引号的方式呈现 <q> 元素中的文本。

html

<p>这是一段包含短引用的文本：<q>这是一个短引用</q>，引用来源未知。</p>

`<time>`:HTMLTimeElement

<time> 元素是 HTML 中的内联元素，用于表示文档中的日期和时间。它提供了一种标准的方式来标记时间，使得浏览器和其他用户代理可以更好地理解和处理日期时间信息。

html

<p>会议时间：<time datetime="2023-12-01T14:30">2023年12月1日 下午2:30</time></p>

datetime：用于提供机器可读的日期和时间格式，以便计算机和搜索引擎可以更好地理解时间信息。

`<map>`:HTMLMapElement

<map> 是 HTML 中的一个标签，用于定义一个图像地图。图像地图是一个可点击区域，每个区域可以链接到不同的 URL 或执行特定的操作。<map> 标签通常与 <area> 标签结合使用，后者定义图像地图中的区域。

name: 用于为图像地图指定一个唯一的名称，该名称可以被与之关联的 <img> 元素的 usemap 属性引用。通过这种方式，可以将图像和图像地图关联起来。

`<area>`:HTMLAreaElement

<area> 元素是HTML中用于定义图像地图中的可点击区域的标签。通常与 <map> 元素一起使用，<area> 定义图像上的热点区域，用户可以点击这些区域来执行特定的操作，如导航到另一个链接或执行JavaScript函数。

html

<img src="planets.jpg" alt="Solar System" usemap="#solarSystemMap" />

<map name="solarSystemMap">
  <area shape="circle" coords="100,100,50" href="mercury.html" alt="Mercury">
  <area shape="rect" coords="200,100,300,200" href="venus.html" alt="Venus">
  <!-- 其他区域定义 -->
</map>

alt：提供区域的替代文本，用于辅助技术和在图像不可用时显示。
coords：指定热点区域的坐标。具体的值取决于 shape 的类型。
download：指示浏览器下载链接的目标而不是导航到它。
href：指定点击区域时要导航到的链接地址。
ping：指定一组用空格分隔的URL，浏览器在用户点击链接时会发送POST请求到这些URL，用于跟踪用户点击行为等。
referrerpolicy：控制请求的 Referer 头部信息，指定如何处理从当前文档到目标URL的跳转。常见值包括 "no-referrer"、"no-referrer-when-downgrade"、"origin"、"origin-when-cross-origin"等。
rel：定义当前文档与链接文档之间的关系。常见值包括 "nofollow"、"noopener noreferrer" 等。
shape：定义热点区域的形状。常见值包括 rect（矩形）、circle（圆形）、poly（多边形）。
target：指定链接如何在浏览器中打开。与 <a> 元素中的 target 属性类似。常见值包括 "_blank"、"_self"、"_parent"、"_top" 等。

`<embed>`:HTMLEmbedElement

<embed> 是 HTML 中的一个标签，用于嵌入外部内容或资源，通常是多媒体文件（如音频、视频）或其他插件的集成。这个标签提供了一种在网页上嵌入各种类型内容的方法。

html

<embed src="example.swf" width="500" height="300" />

height: 用于指定嵌入内容的高度，以像素为单位。
src: 用于指定要嵌入的外部内容的 URL。
type: 用于指定嵌入内容的 MIME 类型。这有助于浏览器正确地解释和显示内容。
width: 用于指定嵌入内容的宽度，以像素为单位。

`<iframe>`:HTMLIFrameElement

<iframe>（内联框架）是 HTML 中的一个元素，用于嵌入另一个 HTML 文档或外部资源（如网页、音频、视频等）到当前文档中。通过 <iframe>，你可以在页面中显示来自不同源或不同路径的内容。

allow: 用于指定一组能够在 <iframe> 中执行的特定功能，例如允许播放音频或视频。例如：<iframe allow="autoplay; fullscreen"></iframe>
allowfullscreen: 用于启用或禁用 <iframe> 中的全屏模式。例如：<iframe allowfullscreen></iframe>
height: 用于设置 <iframe> 的高度。例如：<iframe height="400"></iframe>
loading: 用于控制浏览器何时加载 <iframe> 中的内容，可以设置为 "eager"（立即加载）或 "lazy"（懒加载）。例如：<iframe loading="lazy"></iframe>
name: 用于为 <iframe> 元素指定一个名称，以便通过链接或 JavaScript 访问它。例如：<iframe name="myFrame"></iframe>
referrerpolicy: 用于指定请求时使用的 referrer 策略，控制浏览器发送的 HTTP Referer 头。例如：<iframe referrerpolicy="origin"></iframe>
sandbox: 用于创建一个沙盒环境，限制 <iframe> 内的脚本运行和对其他文档的访问。例如：<iframe sandbox="allow-same-origin allow-scripts"></iframe>
src: 用于指定要嵌入的内容的 URL。例如：<iframe src="https://www.example.com"></iframe>
srcdoc: 用于直接在 <iframe> 中嵌入 HTML 内容，而不是通过 URL 加载。例如：<iframe srcdoc="<p>Hello, World!</p>"></iframe>
width: 用于设置 <iframe> 的宽度。例如：<iframe width="600"></iframe>

`<del>`:HTMLModElement

<del> 是 HTML 中用于标记文本中被删除或不再是最新的内容的标签。这通常用于表示文档的修改或更新。

html

<p>原始文本: <del>这部分文本被删除了</del></p>

cite：用于提供引述文本的引用（通常是 URL）。它表示对删除文本的引用，或者对被引用内容的来源的引用。
datetime：用于提供被删除内容的日期或时间信息。这有助于提供更多关于删除操作的上下文。

`<ins>`:HTMLModElement

<ins> 是HTML中用于表示插入文本（Inserted Text）的标签。插入文本通常在版本控制系统或编辑文档时使用，用于标记新插入或添加的内容。这个标签通常与<del>标签一起使用，后者用于表示已删除的文本。

html

<p>原始文本，<ins>新插入的文本</ins>。</p>

cite：用于指定引用的URL，通常是指向插入文本的来源或引用。这可以是一个链接，指向插入文本的原始来源。
datetime：用于指定插入文本的日期和时间。这对于版本控制系统或其他需要时间戳的应用程序很有用。

`<option>`:HTMLOptionElement

<option> 元素是 HTML 中用于定义 <select> 元素中的可选项的标签。它通常用于创建下拉列表框（<select>）中的每个选项。

disabled:：用于禁用选项，使其在下拉列表中不可选择。如果 <option> 元素带有 disabled 属性，用户将无法选择或交互这个选项。
label:：用于提供一个人类可读的标签，使选项更容易理解。这个属性对于描述选项的内容或目的很有用，但不会影响选项的值或状态。
selected:：用于指定默认选中的选项。如果一个 <option> 元素带有 selected 属性，它将在加载页面时成为默认选中的选项。
value:：用于为选项指定一个值。当用户选择某个选项时，所选的值将提交到服务器或由 JavaScript 处理。如果未提供 value 属性，选项的文本内容将作为默认值。

`<abbr>`

<abbr> 是HTML中的元素，用于表示缩写或首字母缩略语。<abbr> 元素可以向浏览器和阅读器提供关于缩写的附加信息，例如全名或解释。

html

<abbr title="World Health Organization">WHO</abbr>

title：提供有关缩写的额外信息，通常是全名或解释。

`<b>`

<b> 元素是HTML中的行内元素，用于表示文本中的粗体文本。然而，应该注意的是，<b> 元素仅仅提供了粗体效果，而没有传达文本的语义信息。如果你想强调文本并提供语义信息，应该使用更具语义的 <strong> 元素。

html

<p>This is <b>bold</b> text.</p>

`<strong>`

<strong> 是 HTML 中的内联元素，用于表示文本的强调或重要性。默认样式通常是将 <strong> 元素内的文本呈现为粗体。然而，需要强调的文本不仅仅是粗体，其语义含义更加强烈，通常表示内容的重要性。

html

<p>这是一段普通的文本，<strong>这部分文本很重要</strong>。</p>

`<bdi>`

<bdi> 元素是HTML5中的一个标签，用于在文本中嵌套具有不同方向性的文本。"bdi" 代表 "Bi-Directional Isolation"，它的目的是在单个元素中隔离和保护具有不同文本方向（如从右到左的阿拉伯文和从左到右的英文）的文本片段，以确保它们不相互干扰。

html

<p>Some text in English <bdi>مرحبًا بك</bdi> more English text.</p>

`<bdo>`

<bdo> 元素是HTML中的一个标签，用于覆盖文本的默认方向，即从左到右（LTR）的方向。"bdo" 代表 "Bi-Directional Override"，它允许你显式地指定文本的方向，无论其包含在何处。

html

<p>Some text in English <bdo dir="rtl">مرحبًا بك</bdo> more English text.</p>

dir：用于指定文本的方向，可以是 "ltr"（从左到右）或 "rtl"（从右到左）。

`<cite>`

<cite> 元素是HTML中的一个标签，用于表示对某个参考文献的引用。通常，它用于包裹对书籍、文章、电影、音乐作品等引用的标题或名称。

html

<p>According to <cite>The New York Times</cite>, the event was a great success.</p>

`<code>`

<code> 元素是HTML中的一个标签，用于表示计算机代码。它通常用于在文档中嵌入短小的代码片段，或者表示计算机程序的标识符、变量、关键字等。

html

<p>Use the <code>print()</code> function to display text.</p>

`<em>`

<em> 是HTML标记中用于表示文本的强调（emphasis）的标签。在HTML中，当文本被包裹在 <em> 标签中时，这段文本通常会以斜体的形式呈现，以示强调。

html

<p>这是一段<em>强调的文本</em>。</p>

`<i>`

<i> 是 HTML 中用于表示斜体文本的标签。如果你想表示文本是斜体的，而不关心其语义，可以使用 <i>。但如果你的目的是强调文本的语义，HTML5 推荐使用更具语义的标签，比如 <em>（表示强调的文本）。

`<kbd>`

<kbd> 是HTML中的标签，用于表示键盘文本，通常用于标记用户应该按下的键盘按键或键盘输入。这通常在说明快捷键或特定的键盘输入时使用。

html

<p>要保存文件，请按<kbd>Ctrl</kbd> + <kbd>S</kbd>。</p>

`<mark>`

<mark> 是 HTML 中的一个内联元素，用于标记文本中的一部分，以表示需要引起注意或突出显示的内容。通常，被 <mark> 元素包围的文本会以黄色背景或其他方式进行标记以示突出显示。

html

<p>这是一段普通的文本，<mark>这里的文本需要突出显示</mark>，而其他部分保持正常。</p>

`<rp>`

<rp> 是 HTML 中的一个标签，通常与 <ruby> 元素一起使用。<rp> 元素用于提供在不支持 ruby 注释的浏览器中显示备用内容，以确保文本的可读性。

`<rt>`

<rt> 是 HTML 中的一个标签，通常与 <ruby> 元素一起使用，用于定义 ruby 注释（发音注释）的文本。Ruby 注释是一种在亚洲语言中用于显示发音的标记，例如在日语中用于显示汉字的发音。

`<ruby>`

<ruby> 是 HTML 中的一个标签，用于表示可以包含注音或发音的文本。它通常与 <rt>（ruby text，用于包含发音的文本）和<rp>（ruby parenthesis，提供在不支持 ruby 注释的浏览器中显示备用内容）一起使用。

html

<ruby>
  漢 <rp>(</rp><rt>Kan</rt><rp>)</rp> 字 <rp>(</rp><rt>ji</rt><rp>)</rp>
</ruby>

`<s>`

<s> 元素是 HTML 中的一个标记，用于表示文本中不再准确或不再相关的内容。通常，<s> 元素会将其包裹的文本视为被删除的文本，即被划掉的文本。这在表示编辑过的文档或者标记被移除的内容时非常有用。

html

<p>这是一段 <s>不再准确的</s> 文本。</p>

`<samp>`

<samp> 元素是 HTML 中的一个标记，用于表示样本或示例的文本内容。该元素通常用于展示计算机程序的输出、代码的示例或其他需要显示样本文本的情况。<samp> 元素的内容会以等宽字体显示，以突出显示其作为样本的特性。

html

<p>计算机程序的输出示例：</p>
<samp>
  <code>
    $ python script.py
    Hello, World!
  </code>
</samp>

`<small>`

<small> 是 HTML 中的内联元素，用于定义文本的小号字体。通常，<small> 元素用于包裹对文本进行辅助说明、法律声明、版权信息等的较小字体文本。

html

<p>这是一段普通的文本，<small>这是一段小号字体的文本</small>。</p>

`<sub>`

<sub> 元素是 HTML 中的内联元素，用于表示文本应该以下标形式显示。通常情况下，它用于数学表达式、化学公式、日期等场景，以显示下标字符。

html

<p>这是一个<sub>下标</sub>示例。</p>

`<sup>`

<sup> 元素是 HTML 中的内联元素，用于表示文本应该以上标形式显示。通常情况下，它用于数学表达式、化学公式、日期等场景，以显示上标字符。

html

<p>这是一个<sup>上标</sup>示例。</p>

`<summary>`

<summary> 元素是 HTML 中与 <details> 元素一起使用的元素，用于定义 <details> 元素的摘要或标题。<details> 元素是一个可折叠的容器，可以包含一些文本内容或子元素，用户可以点击摘要部分来展开或收起这个容器。

`<u>`

<u> 元素是 HTML 中的文本样式元素，用于定义文本中的下划线。然而，值得注意的是，使用 <u> 元素来添加下划线通常不被推荐，因为它违反了现代 HTML 和 CSS 的语义和样式分离的原则。在 HTML5 中，样式建议通过 CSS 来设置，而不是直接在 HTML 中使用样式元素。

`<var>`

<var> 元素是 HTML 中的内联元素，用于表示文档中的变量。通常，<var> 元素用于标记一段文本，表示它是一个变量、参数、数学表达式中的变量名，或者是编程代码中的变量。

html

<p>在数学公式中，<var>x</var> 表示未知数。</p>

`<wbr>`

<wbr> 元素是 HTML 中的一个内联元素，用于指定一个可能的断字点（Word Break Opportunity）。断字点是在某些情况下，浏览器可以选择在其中断开文本的位置，以适应不同的屏幕大小或浏览器窗口宽度。

html

<p>这是一个很长的单词：<wbr />supercalifragilisticexpialidocious</p>

行内容器标签

`<span>`:HTMLSpanElement

<span> 是 HTML 中的行内元素，通常用于对文本的一部分进行分组或应用样式，而不会对文档的整体结构产生影响。<span> 本身并没有特定的语义，它主要用于通过 CSS 或 JavaScript 进行样式化或操作。

html

<p>这是一段文字，<span style="color: red; font-weight: bold;">这部分文字被高亮了。</span></p>

`<search>`

<search> HTML 元素是一个容器，表示文档或应用程序的各个部分，其中包含表单控件或与执行搜索或过滤操作相关的其他内容。 <search> 元素在语义上将元素内容的用途标识为具有搜索或过滤功能。

html

  <search>
    <form action="./search/">
      <label for="movie">Find a Movie</label>
      <input type="search" id="movie" name="q" />
      <button type="submit">Search</button>
    </form>
  </search>

块级标签

独占一行显示
高度、宽度都是可以设置的
宽度没有设置时，默认为100%
高度没有设置时，默认由内容撑开
支持设置margin值，支持auto属性
支持设置padding值

`<canvas>`:HTMLCanvasElement

<canvas> 元素是HTML5中的一个标签，用于通过JavaScript脚本绘制图形。它提供了一个空的画布，你可以通过脚本来在上面进行绘制，从而创建图形、图表、动画等。

html

<canvas id="myCanvas" width="300" height="150"></canvas>

width：设置或获取画布的宽度。
height：设置或获取画布的高度。

`<source>`:HTMLSourceElement

<source> 元素是 HTML 中用于为媒体元素（如 <audio> 和 <video>）指定媒体资源的标签。它允许在同一媒体元素内包含多个 <source> 元素，以提供不同格式或不同版本的媒体文件，浏览器会选择支持的第一个文件进行播放。

`<track>`:HTMLTrackElement

<track> 元素是 HTML 中的媒体元素（例如 <audio> 和 <video>）的一个子元素，用于指定媒体文件的外部文本轨道（如字幕、章节标题或描述）。

`<audio>`:HTMLAudioElement

<audio> 元素是HTML中用于嵌入音频文件的标签，允许你在网页上播放音频内容。它支持多种音频格式，例如MP3、WAV、OGG等。

html

<video controls>
  <source src="movie.mp4" type="video/mp4">
  <track src="subtitles_en.vtt" kind="subtitles" srclang="en" label="English">
  <track src="subtitles_es.vtt" kind="subtitles" srclang="es" label="Spanish">
  Your browser does not support the video tag.
</video>

autoplay: 指定音频是否在页面加载后自动播放。
controls: 在页面上显示音频播放器的控制条，包括播放、暂停、音量和进度控制等。
crossorigin: 用于处理跨域请求问题，如果音频文件位于不同的域，可能需要设置该属性。常见值包括 "anonymous" 或 "use-credentials"。
loop: 指定音频是否循环播放。
muted: 指定音频是否默认静音。
preload: 指定页面加载时是否预加载音频。
- auto：自动加载音频。
- metadata：加载音频的元数据（比如时长）。
- none：不预加载音频。
src: 指定音频文件的URL。

`<video>`:HTMLVideoElement

<video> 元素是 HTML 中用于嵌入视频的块级元素。它提供了一种在网页上嵌入视频内容的标准方式，允许开发者通过简单的标签实现视频播放。

html

  <video controls width="250" height="200" muted>
    <source src="/media/cc0-videos/flower.webm" type="video/webm" />
    <source src="/media/cc0-videos/flower.mp4" type="video/mp4" />
  </video>

`<picture>`:HTMLPictureElement

<picture> 元素是 HTML5 中引入的元素，用于提供对多个源的不同图像版本进行条件加载的机制。主要用于响应式图片的实现，允许根据浏览器窗口大小、屏幕密度等条件加载适当版本的图像。

html

<picture>
  <!-- WebP 格式的图像 -->
  <source srcset="image.webp" type="image/webp">

  <!-- 默认的图像（通常为 JPEG 或 PNG）-->
  <img src="image.jpg" alt="Description">
</picture>

`<dialog>`:HTMLDialogElement

<dialog> 是 HTML 中的元素，用于定义一个对话框或模态框，提供交互式的用户界面。<dialog> 元素使开发者能够创建弹出式窗口，其中可以包含各种交互元素，例如表单、按钮等。

html

<button id="openDialog">打开对话框</button>

<dialog id="myDialog">
  <p>这是一个简单的对话框。</p>
  <button id="closeDialog">关闭</button>
</dialog>

<script>
  var openButton = document.getElementById('openDialog');
  var dialog = document.getElementById('myDialog');
  var closeButton = document.getElementById('closeDialog');

  openButton.addEventListener('click', function() {
    dialog.showModal();
  });

  closeButton.addEventListener('click', function() {
    dialog.close();
  });
</script>

open：一个布尔属性。如果存在 open 属性，表示对话框应该在页面加载时是打开的状态。

`<legend>`:HTMLLegendElement

<legend> 是 HTML 中用于为 <fieldset> 元素定义标题的标签。在 HTML 表单中，<fieldset> 用于将一组相关的表单元素组合在一起，而 <legend> 则用于为这个组合定义一个标题或说明。

`<form>`:HTMLFormElement

<form> 是 HTML 中用于创建表单的标签。表单是用户与网页进行交互的主要方式之一，它可以用于收集用户输入的信息，例如文本、密码、单选框、复选框等。表单通常用于向服务器提交用户数据，以便进行处理、验证或存储。

accept-charset：用于指定在提交表单时使用的字符集，如：<form accept-charset="UTF-8">
autocomplete：用于启用或禁用表单元素的自动完成功能。autocomplete="on" 表示启用，autocomplete="off" 表示禁用。
name：用于为表单元素指定一个名称，以便在提交表单时使用。例如：<form name="loginForm">
rel：在 HTML5 中，rel 属性可以用于指定与表单相关的关系，例如 rel="external"。
action：用于指定表单数据提交的目标 URL。例如：<form action="/submit" method="post">
enctype：用于指定在将表单数据提交到服务器时使用的编码类型。常见的值包括 "application/x-www-form-urlencoded"（默认值）和 "multipart/form-data"（用于文件上传）。
method：用于指定提交表单数据的 HTTP 方法，常见的值包括 "get" 和 "post"。例如：<form method="post">
novalidate：用于禁用浏览器的表单验证功能。例如：<form novalidate>
target：用于指定在提交表单后打开的目标窗口或框架。常见的值包括 "_blank"（在新窗口中打开）和 "_self"（在当前窗口中打开）。

`<h1> - <h6>`:HTMLHeadingElement

<h1> 到 <h6> 是 HTML 中用于定义标题的标签。它们被称为标题标签，用于标记网页的不同部分，使页面结构更具层次性和语义性。

html

<h1>这是标题1</h1>
<h2>这是标题2</h2>
<h3>这是标题3</h3>
<h4>这是标题4</h4>
<h5>这是标题5</h5>
<h6>这是标题6</h6>

`<hr>`:HTMLHRElement

<hr> 是 HTML 中用于表示水平分隔线的标签。它通常用于分隔文档的不同部分或内容，创建视觉上的分隔效果。<hr> 标签是空元素，没有闭合标签，可以在其内部不包含任何内容。

`<li>`:HTMLLIElement

<li> 是 HTML 中用于定义列表项（list item）的标签。它通常用在有序列表 <ol> 或无序列表 <ul> 中，以表示列表中的每个项目。

`<optgroup>`:HTMLOptGroupElement

<optgroup> 元素是 HTML 中用于对 <select> 元素中的 <option> 进行分组的标签。<optgroup> 元素允许你将相关的选项组织到一个可选择的分组中，以提高表单的可读性和可访问性。

disabled：用于禁用整个 <optgroup> 元素，使其成为不可选的状态。当一个 <optgroup> 被禁用时，其中的所有 <option> 元素都会被禁用，用户不能选择这个分组中的任何选项。
label：用于定义 <optgroup> 元素的标签，即显示在下拉列表中的分组名。这与之前介绍的示例相似，但在这里也提到，label 属性用于设置分组的标签。

`<p>`:HTMLParagraphElement

<p> 是HTML（超文本标记语言）中的一个标签，用于定义段落（paragraph）。在网页开发中，<p> 标签常常用于将文本分段显示。

html

<p>这是一个段落。</p>
<p>这是另一个段落。</p>

`<pre>`:HTMLPreElement

<pre> 是HTML中的另一个标签，用于定义预格式化文本（preformatted text）。在 <pre> 元素中的文本通常会保留空格和换行符，以原始的格式显示。这对于展示计算机代码或其他需要保留格式的文本很有用。

html

<pre>
  这是预格式化的文本。
  保留空格和
  换行符。
</pre>

`<table>`:HTMLTableElement

<table> 元素是 HTML 中用于创建表格的块级元素。表格由行和列组成，通过使用 <table> 元素及其相关的子元素可以定义表格的结构和内容。

html

<table>
  <caption>Monthly Expenses</caption>
  <thead>
    <tr>
      <th>姓名</th>
      <th>年龄</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>John</td>
      <td>25</td>
    </tr>
    <tr>
      <td>Mary</td>
      <td>30</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td colspan="2">总计：2 人</td>
    </tr>
  </tfoot>
</table>

`<col>`:HTMLTableColElement

<col> 元素是HTML中的一个标签，通常用于为表格中的列定义样式或其他属性，与 <td> 数量一致。它通常与 <colgroup> 元素一起使用，为表格的列组定义样式。

html

<table>
  <colgroup>
    <col style="background-color: #f2f2f2;">
    <col style="background-color: #e6e6e6;">
  </colgroup>
  <tr>
    <td>Column 1</td>
    <td>Column 2</td>
  </tr>
  <!-- more rows -->
</table>

span：指定 <col> 元素应该跨越的列数。默认值为 1。

`<caption>`:HTMLTableCaptionElement

<caption> 元素是HTML表格（<table>）中的一个标签，用于为表格添加标题。通常，<caption> 元素应该在 <table> 标签的开始标签之后立即出现，但在 <thead>、<tbody>、<tfoot> 等元素之前。一个表格只能有一个 <caption> 元素。

`<tbody>`:HTMLTableSectionElement

<tbody> 元素是 HTML 中 <table> 元素的子元素，用于包装表格的主体部分。通常，表格的主体包含着实际的数据行。在一个标准的表格结构中，<tbody> 通常跟随在 <thead> 元素之后，紧接着是 <tfoot> 元素（可选），然后是 <tbody> 元素。

`<thead>`:HTMLTableSectionElement

<thead> 元素是 HTML 表格中的表头部分（Table Head）。它用于包裹表格中的表头行 <tr> 和表头单元格 <th>。在一个标准的 HTML 表格结构中，<thead> 通常位于 <table> 元素内的最上方，紧随其后的是 <tbody>（表格主体部分）和 <tfoot>（表格页脚部分）。

`<tfoot>`:HTMLTableSectionElement

<tfoot> 元素是 HTML 表格中的一个标签，用于定义表格的页脚部分（Footer）。在一个标准的 HTML 表格结构中，<tfoot> 通常紧随在 <thead> 元素之后，而在 <tbody> 元素之前。

`<th>`:HTMLTableCellElement

<th> 元素是 HTML 表格中的表头单元格元素（Table Header Cell）。它用于标识表格中的标题或表头，与 <td> 元素不同，<th> 元素通常包含着对表格数据的描述或标签。

`<td>`:HTMLTableCellElement

<td> 元素是 HTML 中 <table> 元素中的子元素，用于定义表格中的数据单元格。每个 <td> 元素通常位于 <tr>（表格行）元素内，表示一行中的一个数据单元格。

colspan：colspan 属性用于指定一个单元格跨越的列数。它定义了一个单元格应该横跨多少列。
rowspan：rowspan 属性用于指定一个单元格跨越的行数。它定义了一个单元格应该纵跨多少行。

`<tr>`:HTMLTableRowElement

<tr> 元素是 HTML 表格中的行元素，用于定义表格中的一行数据。在表格中，每个数据行都由一个或多个 <td>（表格数据单元格）元素组成，或者由一个或多个 <th>（表头单元格）元素组成。

`<template>`:HTMLTemplateElement

<template> 元素是 HTML 中的一个标准 HTML5 元素，用于在文档中存放客户端模板。模板是一段包含了客户端页面渲染时不会被显示的标记和脚本的 HTML。通过使用 <template> 元素，可以将模板内容保存在文档中，以便在需要时进行克隆和使用。

`<address>`

<address> 是HTML中的元素，用于标记文档或文章的联系信息。通常情况下，<address> 元素包含作者或拥有者的联系信息，例如姓名、地址、电子邮件地址或电话号码。

html

<address>
  John Doe<br>
  Email: <a href="mailto:john@example.com">john@example.com</a><br>
  Phone: 555-1234
</address>

`<dfn>`

<dfn> 是 HTML 中的元素，用于定义术语的定义。<dfn> 元素通常用于说明文档中可能具有不同解释的术语，以确保读者了解特定术语的确切含义。

html

<dfn>HTML</dfn> 是一种用于创建网页的标记语言。

`<dt>`

<dt> 是 HTML 中的元素，用于表示定义列表（<dl>）中的术语（Definition Term）。它通常与 <dd> 元素（Definition Description）一起使用，形成术语和其对应定义的组合。

`<dd>`

<dd> 是 HTML 中定义定义列表（<dl>）中条目的描述部分的标签。<dd> 表示 "description data"，用于包含与上层术语或名词（定义列表中的 <dt> 元素）相关的描述信息。

html

<dl>
  <dt>HTML</dt>
  <dd>HyperText Markup Language</dd>

  <dt>CSS</dt>
  <dd>Cascading Style Sheets</dd>

  <!-- 可以有更多的 dt 和 dd 条目 -->
</dl>

`<figure>`

<figure> 元素用于包裹一组相关的媒体内容，通常与 <figcaption> 元素一起使用。

`<figcaption>`

<figcaption> 是 HTML 中与 <figure> 元素一起使用的标签，用于为图像（或其他媒体元素）提供标题或说明。<figure> 和 <figcaption> 的结合通常用于组织并描述一组相关的媒体内容。

html

<figure>
  <img src="example.jpg" alt="一个示例图像">
  <figcaption>这是一个示例图像的说明。</figcaption>
</figure>

`<hgroup>`

<hgroup> 是一个 HTML 标签，用于将标题元素（<h1> 到 <h6>）组织成一个组（group）。

html

<hgroup>
  <h1>Main Title</h1>
  <h2>Subtitle</h2>
</hgroup>

块级容器标签

`<div>`:HTMLDivElement

<div> 是 HTML 中的一个通用容器元素，它本身并没有特定的语义。<div> 主要用于组织和包装其他 HTML 元素，以便通过 CSS 样式或JavaScript脚本来进行样式化和操作。

html

<div>
  <p>这是一个在<div>中的段落。</p>
  <ul>
    <li>列表项# </li>
    <li>列表项 2</li>
  </ul>
</div>

`<ol>`:HTMLOListElement

<ol> 元素是 HTML 中用于创建有序列表（ordered list）的标签。有序列表以数字或其他类型的有序标记（例如字母或罗马数字）为每个列表项编号。<ol> 元素通常与 <li> 元素一起使用，后者表示列表中的每个项目。

html

<ol>
  <li>第一项</li>
  <li>第二项</li>
  <li>第三项</li>
  <!-- 更多列表项 -->
</ol>

reversed: 布尔值，如果设置为reversed，则反转列表项的顺序，使其按照递减的顺序排列。
start：用于指定有序列表的起始值，即第一个列表项的标记值。
type：用于指定列表项的标记类型。常见的值包括 "1"（数字，默认值），"A"（大写字母），"a"（小写字母），"I"（大写罗马数字），"i"（小写罗马数字）等。

`<ul>`:HTMLUListElement

<ul> 元素是 HTML 中的无序列表（Unordered List）元素，用于创建一个包含列表项的无序列表。无序列表中的每个列表项由 <li>（列表项）元素表示。

html

<ul>
  <li>苹果</li>
  <li>香蕉</li>
  <li>橙子</li>
</ul>

`<dl>`:HTMLDListElement

<dl> 是 HTML 中的一个元素，用于表示一个定义列表（Description List）。定义列表由一组术语（<dt> 元素）和与这些术语相关的描述信息（<dd> 元素）组成。

`<menu>`:HTMLMenuElement

<menu> 元素在 HTML 规范中被描述为对 <ul> 的语义替代，但在浏览器中被视为与 <ul> 没有区别。它表示一个无序列表，其中的项由 <li> 元素表示。

html

<menu>
  <li>Copy</li>
  <li>Cut</li>
  <li>Paste</li>
</menu>

`<slot>`:HTMLSlotElement

<slot> 是 Web 组件（Web Components）规范中的一个元素，用于定义插槽，允许在 Web 组件内部插入外部的内容。它允许开发者创建可重用的组件，使得组件的结构和样式可以被灵活地定制。

name: 插槽的名称。

`<details>`:HTMLDetailsElement

<details> 是 HTML 中的元素，用于创建一个可以折叠或展开的内容块。通常与 <summary> 元素结合使用，其中 <summary> 提供了对折叠内容的简要标题或描述。

html

<details>
  <summary>点击查看更多信息</summary>
  <p>这是可以折叠或展开的详细内容。</p>
</details>

open：这是一个布尔属性，如果存在，表示 <details> 元素应该在页面加载时是打开的状态。如果没有 open 属性，或者它的值是 false，那么 <details> 元素将是关闭的状态。

`<fieldset>`:HTMLFieldSetElement

<fieldset> 是 HTML 中用于创建表单元素组的容器标签。它通常与 <legend> 标签结合使用，用于创建表单的边框和标题。

html

<form>
  <fieldset>
    <legend>用户信息</legend>
    <label for="username">用户名：</label>
    <input type="text" id="username" name="username"><br>
    <label for="password">密码：</label>
    <input type="password" id="password" name="password">
  </fieldset>
</form>

`<section>`

<section>是 HTML 中的一个语义化元素，用于表示文档中的一个独立部分或区块。它通常用于将相关的内容进行分组，以便更好地组织和理解文档的结构。

html

<section>
  <h2>这是一个部分标题</h2>
  <p>这是部分内容。</p>
</section>

`<article>`

<article> 元素是HTML中用于表示页面或应用程序中独立、完整、可复用的内容块的标签。通常用于包裹一篇文章、博客帖子、新闻报道或论坛帖子等独立的内容单元。

html

<article>
  <h2>文章标题</h2>
  <p>文章内容...</p>
  <p>更多内容...</p>
</article>

`<header>`

<header> 是 HTML 中用于定义文档或文档的一部分的页眉的标签。通常，<header> 包含页面的标题、导航菜单、标语或其他一些引导性的内容。它是页面的顶部区域，与 <footer> 相对应，后者通常包含页脚信息。

`<footer>`

`<nav>`

<nav> 是 HTML5 中的一个元素，用于定义导航链接的容器。它通常用于包含网站的主导航菜单，包括链接到其他页面或站点的链接。<nav> 的使用有助于标识和组织网页中的导航部分。

html

<nav>
  <ul>
    <li><a href="/">首页</a></li>
    <li><a href="/about">关于我们</a></li>
    <li><a href="/services">服务</a></li>
    <li><a href="/contact">联系我们</a></li>
  </ul>
</nav>

`<main>`

<main> 是 HTML5 中引入的一个语义元素，用于表示文档的主要内容区域。在一个 HTML 文档中，<main> 应该包含文档的主要内容，而不包括页眉、页脚、导航栏或侧边栏等辅助内容。

html

<main>
    <!-- 主要内容区域 -->
    <h2>欢迎访问我们的网站！</h2>
    <p>这是网站的主要内容，包括各种信息和文章。</p>
    <article>
        <h3>最新文章</h3>
        <!-- 最新文章的内容 -->
    </article>
</main>

`<aside>`

<aside> 元素是HTML中用于表示页面的侧边栏或与页面内容相关的附加信息的标签。通常，<aside> 包含与页面主要内容相关但又是次要的信息，例如侧边栏、广告、引用、作者的生平、相关文章等。

html

<article>
  <h2>文章标题</h2>
  <p>文章内容...</p>
  <aside>
    <h3>相关链接</h3>
    <ul>
      <li><a href="#">相关文章# </a></li>
      <li><a href="#">相关文章 2</a></li>
      <li><a href="#">相关文章 3</a></li>
    </ul>
  </aside>
</article>

`<colgroup>`

<colgroup> 元素是 HTML 中用于为表格的列定义属性的一个容器元素。它通常包含一个或多个 <col> 元素，用于设置列的样式、宽度等。

html

<table>
  <colgroup>
    <col style="background-color: #f2f2f2;">
    <col style="background-color: #e6e6e6;">
  </colgroup>
  <tr>
    <td>Column 1</td>
    <td>Column 2</td>
  </tr>
  <!-- more rows -->
</table>

行内块标签

与其他元素并排显示
支持设置宽度、高度
支持设置margin值，不支持auto属性
支持设置padding值
标签之间会有一个空格隔开
- 解决方案1：所有标签代码一行显示，不换行
- 解决方案2：设置font-size:0px

`<button>`:HTMLButtonElement

<button> 元素是HTML中用于创建按钮的标签。它通常用于触发与用户交互相关的操作，如提交表单、打开弹窗、或执行JavaScript函数等。

html

<button>Click me</button>

autofocus: 指定按钮是否自动获得焦点（即页面加载后，该按钮会自动处于激活状态）。
disabled: 指定按钮是否被禁用，禁用的按钮不能被点击。
form: 指定按钮属于哪个表单（通过表单的 id 属性指定）。
formaction: 指定提交表单时要使用的URL，覆盖表单的 action 属性。
formenctype: 指定在提交表单时使用的编码类型，覆盖表单的 enctype 属性。常见值包括 "application/x-www-form-urlencoded"、"multipart/form-data" 或 "text/plain"。
formmethod: 指定提交表单时使用的HTTP方法，覆盖表单的 method 属性。常见值包括 "get" 或 "post"。
formnovalidate: 指定提交表单时是否禁用表单的验证，覆盖表单的 novalidate 属性。
formtarget: 指定在提交表单时打开哪个目标，覆盖表单的 target 属性。常见值包括 "_blank"、"_self"、"_parent" 或 "_top"。
name: 指定按钮的名称，用于在提交表单时作为表单数据的一部分。
popovertarget: 定义与弹出式提示框（popover）相关联的目标元素的ID。这个属性通常用于JavaScript或CSS，而不是HTML。
popovertargetaction: 定义在与弹出式提示框相关联的目标元素上触发的动作。这个属性通常用于JavaScript或CSS，而不是HTML。
type: 指定按钮的类型。常见的值有 "button"（默认，表示普通按钮）、"submit"（提交按钮，用于表单提交）和 "reset"（重置按钮，用于重置表单字段为默认值）。
value: 指定提交表单时按钮的值，作为表单数据的一部分。

`<select>`:HTMLSelectElement

<select> 是 HTML 中用于创建下拉列表（下拉框）的元素。下拉列表允许用户从预定义的选项中选择一个值。通常与 <option> 元素一起使用，其中每个 <option> 元素代表下拉列表中的一个选项。

html

<label for="cars">选择一辆车：</label>
<select id="cars" name="cars">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>

autocomplete: 用于控制浏览器是否应该提供自动完成功能。可以设置为 "on"（默认）或 "off"。示例：<select autocomplete="off">...</select>
autofocus: 用于自动聚焦（自动选中）页面加载时的 <select> 元素。只能应用在页面中的一个元素上。示例：<select autofocus>...</select>
disabled: 当设置为 disabled 时，禁用了 <select> 元素，使用户无法选择或交互。示例：<select disabled>...</select>
form: 定义 <select> 元素所属的表单。该属性的值应为关联表单的 id 属性值。示例：<select form="myForm">...</select>
multiple: 允许用户选择多个选项。在选择多个选项时，可以按住 Ctrl 键（在 Windows 或 Linux 上）或 Command 键（在 Mac 上）进行多选。示例：<select multiple>...</select>
name: 为 <select> 元素定义一个名称，用于在提交表单时标识该字段。示例：<select name="car">...</select>
required: 规定在提交表单之前，必须选择一个选项。如果未选择，浏览器会阻止提交表单。示例：<select required>...</select>
size: 指定下拉列表中可见的行数。这个属性一般用于设置下拉列表的高度，以显示多个选项。示例：<select size="3">...</select>

`<textarea>`:HTMLTextAreaElement

<textarea> 元素是 HTML 中用于创建多行文本输入框的元素。它允许用户输入多行文本，例如用于评论、描述等场景。

html

<label for="comments">Comments:</label>
<textarea id="comments" name="comments" rows="4" cols="50">
  默认文本内容
</textarea>

autocapitalize: 用于控制文本的自动大写功能。示例：<textarea autocapitalize="sentences">...</textarea>
autocomplete: 用于控制浏览器是否应该提供输入建议。示例：<textarea autocomplete="on">...</textarea>
autofocus: 用于在页面加载时自动聚焦到 <textarea> 元素，使其成为焦点。示例：<textarea autofocus>...</textarea>
cols: 用于定义文本区域的列数（宽度）。示例：<textarea cols="30">...</textarea>
dirname: 用于指定在提交表单时，文本区域的文本方向（ltr 或 rtl）。示例：<textarea dirname="rtl">...</textarea>
disabled: 用于禁用 <textarea> 元素，使其不可编辑。示例：<textarea disabled>...</textarea>
form: 用于指定 <textarea> 元素所属的表单，可以是表单的 id。示例：<textarea form="myForm">...</textarea>
maxlength: 用于定义用户能够在 <textarea> 中输入的最大字符数。示例：<textarea maxlength="100">...</textarea>
minlength: 用于定义用户在 <textarea> 中输入的最小字符数。示例：<textarea minlength="10">...</textarea>
name: 定义 <textarea> 元素的名称，用于在表单提交时标识这个字段。示例：<textarea name="myText">...</textarea>
placeholder: 用于在文本区域为空时显示占位符文本。示例：<textarea placeholder="Enter your text">...</textarea>
readonly: 用于将 <textarea> 元素设置为只读，用户不能编辑其内容。示例：<textarea readonly>...</textarea>
required: 用于指定 <textarea> 元素为必填字段，需要用户输入。示例：<textarea required>...</textarea>
rows: 用于定义文本区域的行数（高度）。示例：<textarea rows="4">...</textarea>
spellcheck: 用于控制浏览器是否对文本进行拼写检查。示例：<textarea spellcheck="true">...</textarea>
wrap: 用于定义文本区域中的文本如何换行。示例：<textarea wrap="soft">...</textarea>

`<img>`:HTMLImageElement

<img> 是 HTML 中用于插入图像的标签。通过 <img>，你可以在网页上显示图片。

alt: 用于提供图像的替代文本，当图像无法加载时或用户使用辅助技术时显示。例如：<img src="example.jpg" alt="Description">
crossorigin: 用于配置如何处理跨域请求，可能的值有 "anonymous" 和 "use-credentials"。例如：<img src="example.jpg" crossorigin="anonymous" alt="Description">
decoding: 用于控制图像的解码方式，可以设置为 "async" 或 "sync"。例如：<img src="example.jpg" decoding="async" alt="Description">
elementtiming: 启用图像的 Element Timing 特性，用于测量图像加载和解码的性能。例如：<img src="example.jpg" elementtiming="true" alt="Description">
height: 用于设置图像的高度。例如：<img src="example.jpg" height="200" alt="Description">
ismap: 用于指定图像是否是一个服务器端图像映射（server-side image map）。例如：<img src="example.jpg" ismap alt="Description">
loading: 用于控制浏览器何时加载图像，可以设置为 "eager"（立即加载）或 "lazy"（懒加载）。例如：<img src="example.jpg" loading="lazy" alt="Description">
referrerpolicy: 用于指定请求时使用的 referrer 策略，控制浏览器发送的 HTTP Referer 头。例如：<img src="example.jpg" referrerpolicy="origin"></img>
sizes: 用于指定图像在不同显示器尺寸下的大小，通常与响应式设计一起使用。例如：<img src="example.jpg" sizes="(max-width: 600px) 200px, 50vw" alt="Description">
srcset: 用于提供一系列备选图像，以适应不同的显示器密度和大小。例如：<img srcset="image-1x.jpg 1x, image-2x.jpg 2x" alt="Description">
width: 用于设置图像的宽度。例如：<img src="example.jpg" width="300" alt="Description">
usemap: 用于指定一个客户端图像映射的名称或 ID。例如：<img src="example.jpg" usemap="#map" alt="Description">

`<input>`:HTMLInputElement

<input> 标签是HTML中用于创建用户可以输入数据的元素之一。它通常用于表单（<form>）中，允许用户输入文本、数字、日期等各种类型的数据。

html

<input type="text" name="username" placeholder="请输入用户名">

Type 类型
- button（按钮）: 创建一个普通的按钮，可用于触发 JavaScript 函数或执行其他操作。
- checkbox（复选框）: 允许用户选择多个选项中的一个或多个。
- color（颜色）: 创建一个颜色选择器，允许用户选择颜色。
- date（日期）: 创建一个日期选择框，允许用户选择日期。
- datetime-local（本地日期时间）: 创建一个本地日期和时间的选择框。
- email（电子邮件）: 创建一个用于输入电子邮件地址的文本框，通常会进行基本的格式验证。
- file（文件）: 创建一个用于上传文件的输入框。
- hidden（隐藏）: 创建一个隐藏的输入字段，通常用于在不显示给用户的情况下传递数据到服务器。
- image（图像）: 类似于 submit 按钮，但是用图像代替文本。
- month（月份）: 创建一个月份选择框，允许用户选择年份和月份。
- number（数字）: 创建一个用于输入数字的文本框，可以设置最小值（min）和最大值（max）。
- password（密码）: 创建一个用于输入密码的文本框，输入的文本会被隐藏。
- radio（单选按钮）: 允许用户从一组选项中选择一个。
- range（范围）: 创建一个范围选择器，允许用户选择指定范围内的值。
- reset（重置）: 创建一个重置按钮，当点击时将表单重置为其初始状态。
- search（搜索）: 创建一个用于输入搜索查询的文本框。
- submit（提交）: 创建一个提交按钮，用于提交表单数据。
- tel（电话号码）: 创建一个用于输入电话号码的文本框。
- text（文本）: 创建一个用于输入单行文本的文本框。
- time（时间）: 创建一个时间选择框，允许用户选择时间。
- url（网址）: 创建一个用于输入URL的文本框，通常会进行基本的格式验证。
- week（周）: 创建一个周选择框，允许用户选择年份和周。

Attr 属性

属性	支持类型	说明
accept	file	文件上传控件中预期文件类型的提示
alt	image	图片类型的 alt 属性。对无障碍是必需的
autocomplete	除了 checkbox、radio 和按钮以外	表单自动填充特性提示
capture	file	文件上传控件中媒体捕获方法的提示
checked	checkbox、radio	控件是否选中
dirname	search、text	表单字段的名称，用于在提交表单时发送元素的方向性
disabled	所有类型	表单控件是否禁用
form	所有类型	将控件联系到表单元素中
formaction	image、submit	要提交表单的 URL 地址
formenctype	image、submit	提交表单时使用的表单数据编码类型
formmethod	image、submit	提交表单时所使用的 HTTP 方法
formnovalidate	image、submit	绕过表单提交时的表单控件验证
formtarget	image、submit	提交表单时的浏览上下文
height	image	与 `<img>`元素的 height 属性有相同含义，垂直方向上的维度值
list	除了 hidden、password、checkbox、radio 和按钮以外	自动完成选项的 `<datalist>` 的 id 属性的值
max	date、month、week、time、datetime-local、number、range	最大值
maxlength	text、search、url、tel、email、password	value 的最大长度（字符数）
min	date、month、week、time、datetime-local、number、range	最小值
minlength	text、search、url、tel、email、password	value 的最小长度（字符数）
multiple	email、file	布尔值。是否允许多个值
name	所有类型	表单的控件名称，作为键值对的一部分与表单一同提交
pattern	text、search、url、tel、email、password	为了使得 value 有效，必须符合的模式
placeholder	text、search、url、tel、email、password、number	当没有值设定时，出现在表单控件上的文字
readonly	除了 hidden、range、color、checkbox、radio 和按钮以外	布尔值。如果存在，其中的值将不可编辑。
required	除了 hidden、range、color 和按钮以外	布尔值。如果存在，一个值是必需的，或者必须勾选该值才能提交表格。
size	text、search、url、tel、email、password	控件的尺寸
src	image	与 `<img>` 元素的 src 属性含义相同，图片资源的地址
step	date、month、week、time、datetime-local、number、range	有效的增量值
type	所有类型	表单控件的类型
value	所有类型	表单控件的初始值
width	image	与 `<img>` 元素的 width 属性含义相同

`<label>`:HTMLLabelElement

<label> 是 HTML 中用于关联表单元素（form elements）和它们的标签文本的标签。<label> 的主要目的是提高表单的可访问性，并改善用户体验。它通过将标签文本与相应的表单元素关联起来，使得用户在点击标签文本时，相应的表单元素得到焦点或被选中。

html

<label for="username">用户名：</label>
<input type="text" id="username" name="username">

for: 指定关联的表单元素的 id 值

全局属性

autocapitalize：控制用户输入的文本的自动大写。
off：禁用自动大写。用户输入的文本不会被自动转换为大写。
on：启用自动大写。用户输入的文本可能会被自动转换为大写。
accesskey：提供一个键盘快捷键，使用户能够更轻松地访问元素。
autofocus：当页面加载时，自动将焦点设置到元素上，使其成为默认选中状态。
contenteditable：允许用户编辑元素的内容。
- true：允许编辑元素的内容。
- false：禁止编辑元素的内容。
draggable：指定元素是否可以拖动。
- true：表示元素可拖动。
- false：表示元素不可拖动。这是默认值。
hidden：隐藏元素，使其不在页面上可见。
- hidden="true"：元素被隐藏。
- hidden="false" 或未设置：元素不被隐藏（默认状态）。
tabindex：指定元素在 tab 键顺序中的位置。
class：为元素定义一个或多个类，用于样式和脚本选择。
id：为元素定义唯一的标识符。
data-*：允许为元素存储自定义数据。
dir：指定元素内容的文本方向。
- ltr（从左到右）：用于表示文本从左向右书写的方向，这是默认值。
- rtl（从右到左）：用于表示文本从右向左书写的方向。
enterkeyhint：提供一个提示，指定在虚拟键盘上按下“Enter”键的预期行为。
- enter: 表示用户期望按下回车键时执行“进入”或“前往下一行”的操作。
- done: 表示用户期望按下回车键时执行“完成”或“提交表单”的操作。
- go: 表示用户期望按下回车键时执行“前往”或“导航到指定位置”的操作。
- next: 表示用户期望按下回车键时执行“下一个”或“切换到下一个字段”的操作。
- search: 表示用户期望按下回车键时执行“搜索”的操作。
- send: 表示用户期望按下回车键时执行“发送”或“提交表单”的操作。
exportparts：允许元素导出其内部的一些部分，以便其他元素样式化。
inert：标记元素及其子孙元素为非活动状态，阻止用户与之交互。
inputmode：指定用户在输入时使用的输入法模式。
- none：不提供任何输入提示。
- text：期望常规文本输入。
- tel：期望电话号码输入。
- url：期望 URL 输入。
- email：期望电子邮件地址输入。
- numeric：期望纯数字输入。
- decimal：期望带小数点的数字输入。
- search：期望搜索文本的输入。
lang：指定元素的语言。
nonce：用于安全性，指定脚本的安全性口令。
spellcheck：控制元素是否应进行拼写检查。
title：提供关于元素的附加信息，通常在用户悬停时显示。
translate：控制是否翻译元素内容。
popover：用于 Shadow DOM，定义自定义元素的外观和行为。
part：用于 Shadow DOM，允许元素公开内部的一部分，以便其他元素样式化。
slot：用于 Shadow DOM，定义自定义元素中的插槽。
itemid：用于定义 HTML Microdata，指定数据项唯一的标识符。
itemprop：用于定义 HTML Microdata，指定数据项的属性名称。
itemscope：用于定义 HTML Microdata，标记 HTML 文档中的一个区域，表示该区域包含一个独立的数据项。
itemtype：用于定义 HTML Microdata，指定包含在 itemscope 中的数据项的类型。
itemref：用于定义 HTML Microdata，指定包含在 itemscope 中的数据项的属性值，可以从其他包含 itemid 的元素中获取。

属性

autocomplete：用于表单元素。指示表单或输入字段是否应启用或禁用自动完成。
disable：用于表单元素，禁用输入字段或表单控件。
max：用于表单元素，指定用户允许输入的最大值。
min：用于表单元素，指定用户允许输入的最小值。
pattern：用于表单元素，指定输入值必须匹配的正则表达式模式。
readonly：用于表单元素，使输入字段只读，用户可以看到内容但无法修改。
required：用于表单元素，指定在提交表单之前必须填写或选择的字段。
accept：用于 <input type="file"> 元素，指定服务器接受的文件类型。
capture：用于 <input type="file">，指定要捕获的媒体的源（如相机或麦克风）。
- camera：指示浏览器使用设备的摄像头来捕获图像或视频。
- camcorder：指示浏览器使用设备的摄像头来捕获视频。
- microphone：指示浏览器使用设备的麦克风来捕获音频。
dirname：用于 <input> 元素，用于指定文件输入字段在提交表单时应自动获取的目录名。
- anonymous：表示资源请求不会包含凭据（例如，不会发送用户的 cookie）。
- use-credentials：表示资源请求会包含凭据。这通常用于需要发送用户身份验证信息的情况。
- "": 将属性名称设置为空值，例如 crossorigin 或 crossorigin="" ，与 anonymous 相同。
maxlength：用于 <input> 和 <textarea> 元素，指定输入字段中允许的最大字符数。
minlength：用于 <input> 和 <textarea> 元素，指定输入字段中允许的最小字符数。
multiple：用于 <input type="file"> 和 <select> 元素，允许用户选择多个文件或选项。
size：用于 <input>、<select> 和 <textarea> 元素，指定文本输入的可见宽度或下拉列表的可见选项数量。
step：用于 <input type="number"> 和 <input type="datetime-local"> 元素，指定在数字输入时应用的增量或减量。
crossorigin：用于处理跨域资源请求（如 <script>、<img>、<audio>、<video> 和 <link> 等元素），指定浏览器如何处理跨域请求。
elementtiming：用于指示一个元素被标记为使用 "element" 类型的 PerformanceObserver 对象进行跟踪。
for：用于 <label> 元素时，指示该标签描述的表单元素；用于 <output> 元素时，允许在表示输出中使用的值的元素之间建立显式关系。
placeholder：用于文本输入元素（如 <input> 或 <textarea>），提供对用户输入的简要说明或示例。
rel：用于 <a> 和 <link> 元素，指定当前文档与链接文档或资源之间的关系。

Emmet

标签缩写

直接写标签名来生成标签。例如：div 展开为 <div></div>

子代操作符 `>`

用于创建父子关系。例如：ul>li 展开为

html

<ul>
  <li></li>
</ul>

兄弟操作符 `+`

用于创建同级元素。例如：div+p+bq 展开为

html

<div></div>
<p></p>
<blockquote></blockquote>

上级操作符 `^`

移动到当前元素的父级元素。例如：div+div>p>span+em^bq 展开为

html

<div></div>
<div>
  <p><span></span><em></em></p>
  <blockquote></blockquote>
</div>

乘法操作符 `*`

重复元素。例如：ul>li*5 展开为带有5个<li>的<ul>。

分组操作符 `()`

组合复杂的表达式。例如：(div>dl>(dt+dd)*3)+footer>p。

ID和类属性

使用#和.来指定ID和类。例如：#header 展开为 <div id="header"></div> 或 .title 展开为 <div class="title"></div>

自定义属性

使用方括号[]。例如：a[href='http://example.com']

文本

使用花括号{}。例如：p{Hello World!} 展开为 <p>Hello World!</p>

HTML ​

标签 ​

文档结构标签 ​

<html>:HTMLHtmlElement ​

<head>:HTMLHeadElement ​

<base>:HTMLBaseElement ​

<meta>:HTMLMetaElement ​

<link>:HTMLLinkElement ​

<style>:HTMLStyleElement ​

<title>:HTMLTitleElement ​

<script>:HTMLScriptElement ​

<noscript> ​

<body>:HTMLBodyElement ​

行内标签 ​

<a>:HTMLAnchorElement ​

<br>:HTMLBRElement ​

<data>:HTMLDataElement ​

<datalist>:HTMLDataListElement ​

<meter>:HTMLMeterElement ​

<object>:HTMLObjectElement ​

<output>:HTMLOutputElement ​

<progress>:HTMLProgressElement ​

<blockquote>:HTMLQuoteElement ​

<q>:HTMLQuoteElement ​

<time>:HTMLTimeElement ​

<map>:HTMLMapElement ​

<area>:HTMLAreaElement ​

<embed>:HTMLEmbedElement ​

<iframe>:HTMLIFrameElement ​

<del>:HTMLModElement ​

<ins>:HTMLModElement ​

<option>:HTMLOptionElement ​

<abbr> ​

<b> ​

<strong> ​

<bdi> ​

<bdo> ​

<cite> ​

<code> ​

<em> ​

<i> ​

<kbd> ​

<mark> ​

<rp> ​

<rt> ​

<ruby> ​

<s> ​

<samp> ​

<small> ​

<sub> ​

<sup> ​

<summary> ​

<u> ​

<var> ​

<wbr> ​

行内容器标签 ​

<span>:HTMLSpanElement ​

<search> ​

块级标签 ​

<canvas>:HTMLCanvasElement ​

<source>:HTMLSourceElement ​

<track>:HTMLTrackElement ​

<audio>:HTMLAudioElement ​

<video>:HTMLVideoElement ​

<picture>:HTMLPictureElement ​

<dialog>:HTMLDialogElement ​

<legend>:HTMLLegendElement ​

<form>:HTMLFormElement ​

<h1> - <h6>:HTMLHeadingElement ​

<hr>:HTMLHRElement ​

<li>:HTMLLIElement ​

<optgroup>:HTMLOptGroupElement ​

<p>:HTMLParagraphElement ​

<pre>:HTMLPreElement ​

<table>:HTMLTableElement ​

<col>:HTMLTableColElement ​

<caption>:HTMLTableCaptionElement ​

<tbody>:HTMLTableSectionElement ​

<thead>:HTMLTableSectionElement ​

<tfoot>:HTMLTableSectionElement ​

HTML

标签

文档结构标签

`<html>`:HTMLHtmlElement

`<head>`:HTMLHeadElement

`<base>`:HTMLBaseElement

`<meta>`:HTMLMetaElement

`<link>`:HTMLLinkElement

`<style>`:HTMLStyleElement

`<title>`:HTMLTitleElement

`<script>`:HTMLScriptElement

`<noscript>`

`<body>`:HTMLBodyElement

行内标签

`<a>`:HTMLAnchorElement

`<br>`:HTMLBRElement

`<data>`:HTMLDataElement

`<datalist>`:HTMLDataListElement

`<meter>`:HTMLMeterElement

`<object>`:HTMLObjectElement

`<output>`:HTMLOutputElement

`<progress>`:HTMLProgressElement

`<blockquote>`:HTMLQuoteElement

`<q>`:HTMLQuoteElement

`<time>`:HTMLTimeElement

`<map>`:HTMLMapElement

`<area>`:HTMLAreaElement

`<embed>`:HTMLEmbedElement

`<iframe>`:HTMLIFrameElement

`<del>`:HTMLModElement

`<ins>`:HTMLModElement

`<option>`:HTMLOptionElement

`<abbr>`

`<b>`

`<strong>`

`<bdi>`

`<bdo>`

`<cite>`

`<code>`

`<em>`

`<i>`

`<kbd>`

`<mark>`

`<rp>`

`<rt>`

`<ruby>`

`<s>`

`<samp>`

`<small>`

`<sub>`

`<sup>`

`<summary>`

`<u>`

`<var>`

`<wbr>`

行内容器标签

`<span>`:HTMLSpanElement

`<search>`

块级标签

`<canvas>`:HTMLCanvasElement

`<source>`:HTMLSourceElement

`<track>`:HTMLTrackElement

`<audio>`:HTMLAudioElement

`<video>`:HTMLVideoElement

`<picture>`:HTMLPictureElement

`<dialog>`:HTMLDialogElement

`<legend>`:HTMLLegendElement

`<form>`:HTMLFormElement

`<h1> - <h6>`:HTMLHeadingElement

`<hr>`:HTMLHRElement

`<li>`:HTMLLIElement

`<optgroup>`:HTMLOptGroupElement

`<p>`:HTMLParagraphElement

`<pre>`:HTMLPreElement

`<table>`:HTMLTableElement

`<col>`:HTMLTableColElement

`<caption>`:HTMLTableCaptionElement

`<tbody>`:HTMLTableSectionElement

`<thead>`:HTMLTableSectionElement

`<tfoot>`:HTMLTableSectionElement