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>

Canvas

Canvas 是 HTML5 提供的一个用于在网页上绘制图形和动画的元素。它是一个类似画布的区域，您可以在上面使用 JavaScript 绘制各种图形、文本和动画。

HTMLCanvasElement

html

<canvas id="myCanvas"></canvas>

注意

默认 canvas 画布大小为 300px * 150px
不能使用 javascript 给 canvas 画布添加 css 样式的宽高(如 myCanvas.style.cssText='width: 800px; height: 400px;')，必须使用 canvas 默认的宽高属性(如 myCanvas.width = 800 myCanvas.height = 400)，否则将会出现画笔位置偏移
默认 canvas 满屏时会出现滚动条(如 myCanvas.width = document.documentElement.clientWidth myCanvas.height = document.documentElement.clientHeight)，可以设置内外边距归零且使用绝对定位四面归零法解决

2D 渲染上下文

const canvas = document.getElementById('myCanvas')
const ctx = canvas.getContext('2d')

绘制矩形

ctx.fillRect()

绘制一个填充的矩形。

ctx.fillRect(x, y, width, height)

参数：

x：矩形的左上角 x 轴坐标。
y：矩形的左上角 y 轴坐标。
width：矩形的宽度。
height：矩形的高度。

示例：

var canvas = document.getElementById('myCanvas')
var ctx = canvas.getContext('2d')

// 设置填充样式
ctx.fillStyle = 'blue' // 设置填充颜色

// 绘制一个填充矩形
ctx.fillRect(50, 50, 100, 60)

ctx.strokeRect()

绘制线条的矩形。

ctx.strokeRect(x, y, width, height)

参数：

x：矩形左上角的 x 轴坐标。
y：矩形左上角的 y 轴坐标。
width：矩形的宽度。
height：矩形的高度。

示例:

var canvas = document.getElementById('myCanvas')
var ctx = canvas.getContext('2d')

// 设置线条样式
ctx.strokeStyle = 'blue' // 设置描边颜色
ctx.lineWidth = 2 // 设置描边线宽

// 绘制一个描边矩形
ctx.strokeRect(50, 50, 100, 60)

ctx.roundRect()

绘制一个圆角线条的矩形。

roundRect(x, y, width, height, radii)

参数：

x: 矩形起点的 x 轴坐标（以像素为单位）。
y: 矩形起点的 y 轴坐标（以像素为单位）。
width: 矩形的宽度。正值在右边，负值在左边。
height: 矩形的高度。正值下降，负值上升。
radii: 指定要用于矩形拐角的圆弧半径。

radii 取值

all-corners
[all-corners]
[top-left-and-bottom-right, top-right-and-bottom-left]
[top-left, top-right-and-bottom-left, bottom-right]
[top-left, top-right, bottom-right, bottom-left]

示例：

const canvas = document.getElementById('canvas')
const ctx = canvas.getContext('2d')

// Rounded rectangle with zero radius (specified as a number)
ctx.strokeStyle = 'red'
ctx.beginPath()
ctx.roundRect(10, 20, 150, 100, 0)
ctx.stroke()

// Rounded rectangle with 40px radius (single element list)
ctx.strokeStyle = 'blue'
ctx.beginPath()
ctx.roundRect(10, 20, 150, 100, [40])
ctx.stroke()

// Rounded rectangle with 2 different radii
ctx.strokeStyle = 'orange'
ctx.beginPath()
ctx.roundRect(10, 150, 150, 100, [10, 40])
ctx.stroke()

// Rounded rectangle with four different radii
ctx.strokeStyle = 'green'
ctx.beginPath()
ctx.roundRect(400, 20, 200, 100, [0, 30, 50, 60])
ctx.stroke()

ctx.clearRect()

清除 Canvas 中指定区域的像素，使该区域变为透明。

ctx.clearRect(x, y, width, height)

参数：

x：要清除的矩形区域的左上角 x 坐标。
y：要清除的矩形区域的左上角 y 坐标。
width：要清除的矩形区域的宽度。
height：要清除的矩形区域的高度。

示例：

// 清除整个 Canvas ，相当于 ctx.reset()
const canvas = document.getElementById('canvas')
const ctx = canvas.getContext('2d')
ctx.clearRect(0, 0, canvas.width, canvas.height)

// 清除 Canvas 中指定区域
var canvas = document.getElementById('myCanvas')
var ctx = canvas.getContext('2d')

// 绘制一个矩形
ctx.fillStyle = 'blue'
ctx.fillRect(50, 50, 100, 100)

// 清除矩形的一部分，使其变为透明
ctx.clearRect(75, 75, 50, 50)

ctx.reset()

重置 Canvas 为默认状态。

ctx.reset()

绘制线条

ctx.beginPath()

开始新的线条。

ctx.closePath()

关闭当前线条。

ctx.moveTo()

将当前绘图位置（绘制点）移动到指定的坐标 (x, y)，而不创建实际的路径线段。通常与其他路径绘制方法（如 ctx.lineTo()、ctx.arc() 等）一起使用，用于指定路径的起始点或在路径中移动到一个新的位置。

ctx.moveTo(x, y)

ctx.lineTo()

创建一条从当前绘图位置到指定坐标 (x, y) 的直线路径，起点是当前路径的终点（或者初始点，如果路径为空），终点是指定的坐标 (x, y)。

ctx.lineTo(x, y)

ctx.rect()

创建一个矩形的轮廓，但不会绘制矩形本身，需要使用 ctx.stroke() 方法描边路径，或使用 ctx.fill() 方法填充矩形区域。

ctx.rect(x, y, width, height)

参数：

x：矩形左上角的 x 轴坐标。
y：矩形左上角的 y 轴坐标。
width：矩形的宽度。
height：矩形的高度。

示例：

var canvas = document.getElementById('myCanvas')
var ctx = canvas.getContext('2d')

// 创建一个矩形路径
ctx.rect(50, 50, 100, 60)

// 设置线条样式
ctx.strokeStyle = 'blue'

// 描边矩形路径
ctx.stroke()

ctx.stroke()

绘制路径的轮廓。

ctx.stroke()

示例：

var canvas = document.getElementById('myCanvas')
var ctx = canvas.getContext('2d')

// 创建路径
ctx.beginPath()

// 移动到起始点
ctx.moveTo(50, 50)

// 添加一条线段
ctx.lineTo(150, 50)

// 设置线条样式
ctx.strokeStyle = 'blue'
ctx.lineWidth = 3 // 线宽为3像素

// 描边路径
ctx.stroke()

ctx.fill()

填充当前路径所定义的图形。

ctx.fill()
ctx.fill(path)
ctx.fill(fillRule)
ctx.fill(path, fillRule)

参数：

path: 指定一个路径对象，并使用当前的填充样式来填充该路径所定义的图形。路径对象通常是 Path2D 类的实例。
fillRule: 指定一个填充规则，用于定义填充路径内的区域的规则。可选值： "nonzero" (非零填充规则)和 "evenodd" (奇偶填充规则)。

示例：

const canvas = document.getElementById('canvas')
const ctx = canvas.getContext('2d')
ctx.rect(10, 10, 150, 100)
ctx.fill()

WARNING

在调用 ctx.fill() 之前，通常需要使用一系列的路径绘制方法（例如 moveTo()、lineTo()、arc()、rect() 等）来创建一个封闭的路径，然后 fill() 方法会填充该路径内的区域。

ctx.setLineDash()

设置线条的虚线样式。

ctx.setLineDash(segments)

参数：

segments: 是一个包含一组数字的数组，用于指定线条的虚线样式。这个数组中的数字依次表示实线长度和虚线长度，以交替的方式定义虚线模式。例如，[5, 10] 表示线条以 5 个像素的实线后跟 10 个像素的虚线，然后重复这个模式。

示例：

const canvas = document.getElementById('canvas')
const ctx = canvas.getContext('2d')

// Dashed line
ctx.beginPath()
ctx.setLineDash([5, 15])
ctx.moveTo(0, 50)
ctx.lineTo(300, 50)
ctx.stroke()

// Solid line
ctx.beginPath()
ctx.setLineDash([])
ctx.moveTo(0, 100)
ctx.lineTo(300, 100)
ctx.stroke()

ctx.bezierCurveTo()

绘制一条三次贝塞尔曲线。

ctx.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)

参数：

cp1x 和 cp1y：第一个控制点的 x 和 y 坐标。
cp2x 和 cp2y：第二个控制点的 x 和 y 坐标。
x 和 y：曲线的终点坐标。

示例：

var canvas = document.getElementById('myCanvas')
var ctx = canvas.getContext('2d')

ctx.beginPath()
ctx.moveTo(50, 50) // 移动到起始点
ctx.bezierCurveTo(100, 100, 200, 100, 250, 50) // 绘制贝塞尔曲线
ctx.lineWidth = 2
ctx.strokeStyle = 'blue'
ctx.stroke() // 描边曲线

ctx.quadraticCurveTo()

创建一条二次贝塞尔曲线路径。

ctx.quadraticCurveTo(cp1x, cp1y, x, y)

参数：

cp1x：控制点的 x 轴坐标。
cp1y：控制点的 y 轴坐标。
x：结束点的 x 轴坐标。
y：结束点的 y 轴坐标。

示例：

var canvas = document.getElementById('myCanvas')
var ctx = canvas.getContext('2d')

// 移动到起始点
ctx.moveTo(50, 50)

// 创建二次贝塞尔曲线路径
ctx.quadraticCurveTo(100, 10, 200, 50)

// 设置线条样式
ctx.strokeStyle = 'blue'

// 描边路径
ctx.stroke()

绘制圆弧

ctx.arc()

绘制圆形的路径或填充圆形区域

ctx.arc(x, y, radius, startAngle, endAngle)
ctx.arc(x, y, radius, startAngle, endAngle, anticlockwise)

参数：

x：圆弧中心的 x 坐标。
y：圆弧中心的 y 坐标。
radius：圆弧的半径。
startAngle：圆弧的起始角度，以弧度表示（0 度表示水平向右，逆时针方向增加）。
endAngle：圆弧的结束角度，以弧度表示。
anticlockwise：一个可选的布尔值，表示是否以逆时针方向绘制圆弧（默认为 false，即顺时针方向）。

示例：

var canvas = document.getElementById('myCanvas')
var ctx = canvas.getContext('2d')

// 绘制一个完整的圆
ctx.beginPath()
ctx.arc(100, 100, 50, 0, Math.PI * 2) // 绘制一个半径为50的完整圆
ctx.closePath()
ctx.fill() // 填充圆形区域

// 绘制一个扇形
ctx.beginPath()
ctx.arc(100, 100, 50, 0, Math.PI / 2) // 绘制一个半径为50的四分之一圆
ctx.lineTo(100, 100) // 连接到圆心，形成一个扇形
ctx.closePath()
ctx.fill() // 填充扇形区域

// 绘制一个圆环
ctx.beginPath()
ctx.arc(100, 100, 50, 0, Math.PI * 2) // 绘制一个半径为50的完整圆
ctx.arc(100, 100, 40, 0, Math.PI * 2, true) // 再绘制一个半径为40的圆，覆盖在上面
ctx.closePath()
ctx.fill() // 填充形成的圆环区域

ctx.arcTo()

绘制两条线段之间的弧线，以使图形更加平滑连接

ctx.arcTo(x1, y1, x2, y2, radius)

参数：

x1 和 y1：第一条线段的终点坐标。
x2 和 y2：第二条线段的起始坐标。
radius：圆弧的半径。

示例：

var canvas = document.getElementById('myCanvas')
var ctx = canvas.getContext('2d')

ctx.beginPath()
ctx.moveTo(50, 50) // 移动到第一条线段的起始点
ctx.lineTo(150, 50) // 第一条线段
ctx.lineTo(150, 100) // 第二条线段

// 使用 arcTo 方法绘制平滑连接
ctx.arcTo(150, 150, 100, 150, 50)

ctx.lineTo(50, 150) // 第三条线段
ctx.lineTo(50, 50) // 第四条线段
ctx.stroke() // 描边路径

ctx.ellipse()

绘制椭圆或椭圆弧。

ctx.ellipse(x, y, radiusX, radiusY, rotation, startAngle, endAngle [, anticlockwise])

参数：

x 和 y：椭圆的中心点坐标。
radiusX 和 radiusY：椭圆的水平半径和垂直半径。这两个参数分别定义了椭圆在 x 轴和 y 轴上的半径长度。
rotation：椭圆的旋转角度，以弧度表示。通常情况下，这个参数为 0，表示椭圆不旋转。
startAngle 和 endAngle：椭圆弧的起始角度和结束角度，以弧度表示。这两个参数定义了椭圆弧的起始和结束位置。
anticlockwise（可选）：一个布尔值，指定绘制椭圆弧的方向。如果设置为 true，则逆时针绘制，如果设置为 false 或省略，则顺时针绘制。

示例：

var canvas = document.getElementById('myCanvas')
var ctx = canvas.getContext('2d')

ctx.beginPath()
ctx.ellipse(100, 100, 50, 30, 0, 0, Math.PI * 2)
ctx.stroke()

绘制文本

文本是以左下角为初始坐标。

ctx.fillText()

绘制文本。

ctx.fillText(text, x, y [, maxWidth])

参数：

text：要绘制的文本内容，是一个字符串。
x：文本绘制的起始 x 轴坐标。
y：文本绘制的起始 y 轴坐标。
maxWidth（可选）：文本的最大宽度，如果提供了这个参数，浏览器会自动将文本缩放以适应指定的宽度。如果文本超过了最大宽度，它将被截断。

ctx.strokeText()

绘制文本边框。

ctx.strokeText(text, x, y, maxWidth)

参数：

text：要绘制的文本字符串。
x：文本绘制的起始点 x 轴坐标。
y：文本绘制的起始点 y 轴坐标。
maxWidth（可选）：文本的最大宽度。如果指定了 maxWidth，则文本将在此宽度内自动换行。

示例：

var canvas = document.getElementById('myCanvas')
var ctx = canvas.getContext('2d')

// 设置文本样式
ctx.font = '30px Arial' // 设置字体和字号
ctx.strokeStyle = 'blue' // 设置文本描边颜色
ctx.lineWidth = 2 // 设置描边线宽

// 描边文本
ctx.strokeText('Hello, Canvas!', 50, 50)

绘制图像

ctx.drawImage()

将图片、视频或另一个 Canvas 元素的内容绘制到当前的 Canvas 上。

ctx.drawImage(image, dx, dy)
ctx.drawImage(image, dx, dy, dWidth, dHeight)
ctx.drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)

参数：

image：要绘制的图像、视频或 Canvas 元素。
dx：在目标 Canvas 上放置图像的 x 轴坐标。
dy：在目标 Canvas 上放置图像的 y 轴坐标。
dWidth：绘制到目标 Canvas 上的图像宽度。
dHeight：绘制到目标 Canvas 上的图像高度。
sx：源图像的 x 轴起始位置。
sy：源图像的 y 轴起始位置。
sWidth：源图像的宽度。
sHeight：源图像的高度。

示例：

const canvas = document.getElementById('myCanvas')
const ctx = canvas.getContext('2d')

// 图片
const img = new Image()
img.src = 'image.jpg' // 替换为实际图像的路径
img.onload = function () {
  // 将图像绘制到 Canvas 上
  ctx.drawImage(img, 0, 0)
}

// 视频
const video = document.createElement('video')
video.src = 'video.mp4'

function render() {
  ctx.drawImage(video, 0, 0)
  requestAnimationFrame(render)
}

render()

ctx.createImageData()

创建一个新的空白图像数据对象。

ctx.createImageData(width, height)

参数：

width：图像数据的宽度，以像素为单位。
height：图像数据的高度，以像素为单位。

示例：

var canvas = document.getElementById('myCanvas')
var ctx = canvas.getContext('2d')

// 创建一个空白的图像数据对象，宽度为 100 像素，高度为 50 像素
var imageData = ctx.createImageData(100, 50)

// imageData 对象现在表示一个 100x50 的矩形区域，每个像素都是全透明的

// 修改像素数据，使图像变成红色
for (var i = 0; i < imageData.data.length; i += 4) {
  // 每个像素由 4 个字节表示，依次为红、绿、蓝和透明通道
  // 将红色通道设置为最大值（255），其他通道设置为 0
  imageData.data[i] = 255 // 红色通道
  imageData.data[i + 1] = 0 // 绿色通道
  imageData.data[i + 2] = 0 // 蓝色通道
  imageData.data[i + 3] = 255 // 透明通道
}

// 将修改后的图像数据绘制到 Canvas 上
ctx.putImageData(imageData, 10, 10)

cxt.getImageData()

获取指定区域的像素数据。

getImageData(sx, sy, sw, sh)

参数：

x：指定要获取像素数据的区域的左上角 x 轴坐标。
y：指定要获取像素数据的区域的左上角 y 轴坐标。
width：指定要获取像素数据的区域的宽度。
height：指定要获取像素数据的区域的高度。

ctx.putImageData()

将像素数据从 ImageData 对象（通常通过 ctx.getImageData() 获取）绘制到 Canvas 上的指定位置。

ctx.putImageData(imageData, dx, dy)

参数：

imageData：包含要绘制的像素数据的 ImageData 对象。
dx：目标 Canvas 上 x 轴的坐标，即绘制的起始点的 x 轴位置。
dy：目标 Canvas 上 y 轴的坐标，即绘制的起始点的 y 轴位置。

示例：

const canvas = document.getElementById('canvas')
const ctx = canvas.getContext('2d')

const image = new Image()
image.src = 'plumeria.jpg'
image.addEventListener('load', () => {
  ctx.drawImage(image, 0, 0, 233, 320)

  const imageData = ctx.getImageData(10, 20, 80, 230)
  ctx.putImageData(imageData, 260, 0)
  ctx.putImageData(imageData, 380, 50)
  ctx.putImageData(imageData, 500, 100)
})

ctx.createPattern()

创建一个图像重复(印章)填充模式。

ctx.createPattern(image, repetition)

参数：

image：要用作填充的图像，可以是一个 <img> 元素、一个 <canvas> 元素，或者一个 <video> 元素。
repetition：指定填充图像的重复方式，可以是字符串 "repeat"、"repeat-x"、"repeat-y" 或 "no-repeat"。

示例：

var canvas = document.getElementById('myCanvas')
var ctx = canvas.getContext('2d')

// 创建一个填充模式，使用一个图像作为填充
var img = new Image()
img.src = 'pattern.png' // 替换为实际图像的路径
img.onload = function () {
  var pattern = ctx.createPattern(img, 'repeat') // 图像重复填充

  // 使用填充模式作为填充样式
  ctx.fillStyle = pattern

  // 创建一个矩形路径并填充
  ctx.fillRect(50, 50, 200, 150)
}

裁剪

ctx.clip()

创建一个裁剪区域，将后续的绘图限制在该区域内。

ctx.clip()
ctx.clip(path)
ctx.clip(fillRule)
ctx.clip(path, fillRule)

参数：

path: 是一个路径对象或路径的定义，用于定义裁剪区域。
fillRule: 是一个字符串，表示填充规则，可以是 "evenodd" 或 "nonzero"。

示例：

var canvas = document.getElementById('myCanvas')
var ctx = canvas.getContext('2d')

// 绘制一个矩形
ctx.fillStyle = 'blue'
ctx.fillRect(50, 50, 100, 100)

// 创建一个裁剪区域，限制后续的绘图只在裁剪区域内可见
ctx.beginPath()
ctx.arc(100, 100, 50, 0, Math.PI * 2)
ctx.clip()

// 在裁剪区域内绘制另一个矩形
ctx.fillStyle = 'red'
ctx.fillRect(75, 75, 50, 50)

颜色

ctx.strokeStyle

设置路径颜色。颜色值支持：颜色名称、十六进制、RGB/RGBA、HSL/HSLA。

ctx.fillStyle

设置填充颜色。颜色值支持：颜色名称、十六进制、RGB/RGBA、HSL/HSLA。

样式

线条

ctx.lineWidth

设置线条宽度。

ctx.lineCap

设置线条末端的样式，可选值为："butt"（平头）、"round"（圆头）、"square"（方头）。

ctx.lineDashOffset

设置虚线的偏移量。

ctx.lineJoin

设置线条的连接方式，即定义线条相交处的外观样式。可选值为："miter"（尖角）、"round"（圆角）、"bevel"（斜角）。

ctx.miterLimit

设置在尖锐角连接线段时控制尖锐角的最大长度与线条宽度的比率（只有 ctx.lineJoin 设置为 "miter" 时生效）。

ctx.lineWidth

设置线条的宽度，默认单位像素，无需携带。

文本

ctx.font

设置文本字体和大小。

ctx.textAlign

设置文本对齐方式。

ctx.textBaseline

设置文本基线。

ctx.letterSpacing

设置文本字母间距。

ctx.wordSpacing

设置文本单词间距

图像

globalCompositeOperation

多个图像进行合并或混合。

可选值：

"source-over"（默认值）：新绘制的图形会覆盖在已有的图形上。
"source-in"：新绘制的图形只会保留与已有图形重叠的部分，其他部分会被裁剪掉。
"source-out"：新绘制的图形只会保留与已有图形不重叠的部分，重叠部分会被裁剪掉。
"source-atop"：新绘制的图形会与已有图形重叠，但不会覆盖已有图形的内容，只在重叠部分绘制新图形。
"destination-over"：新绘制的图形会放置在已有图形下方。
"destination-in"：新绘制的图形只会保留与已有图形重叠的部分，但不会覆盖已有图形的内容。
"destination-out"：新绘制的图形会删除与已有图形重叠的部分，但不会影响已有图形的内容。
"destination-atop"：新绘制的图形会与已有图形重叠，但不会覆盖已有图形的内容，只在重叠部分绘制新图形。
"lighter"：新绘制的图形与已有图形混合，颜色相加。
"xor"：新绘制的图形与已有图形进行异或混合，产生一种奇特的效果。

渐变

ctx.createLinearGradient()

创建一个线性渐变。

ctx.createLinearGradient(x0, y0, x1, y1)

参数：

x0 和 y0：渐变的起始点坐标。
x1 和 y1：渐变的结束点坐标。

示例：

var canvas = document.getElementById('myCanvas')
var ctx = canvas.getContext('2d')

// 创建线性渐变，从点 (50, 50) 到点 (250, 50)
var gradient = ctx.createLinearGradient(50, 50, 250, 50)

// 添加颜色停止点
gradient.addColorStop(0, 'red')
gradient.addColorStop(0.5, 'yellow')
gradient.addColorStop(1, 'green')

// 使用线性渐变作为填充样式
ctx.fillStyle = gradient

// 创建一个矩形路径并填充
ctx.fillRect(50, 20, 200, 60)

WARNING

一旦创建了线性渐变对象 gradient，您可以通过 gradient.addColorStop() 方法向锥形渐变中添加颜色停止点，以指定不同颜色在渐变中的位置。

ctx.createRadialGradient()

创建一个径向渐变

ctx.createRadialGradient(x0, y0, r0, x1, y1, r1)

参数：

x0 和 y0：内部圆的中心点坐标。
r0：内部圆的半径。
x1 和 y1：外部圆的中心点坐标。
r1：外部圆的半径。

示例：

var canvas = document.getElementById('myCanvas')
var ctx = canvas.getContext('2d')

// 创建径向渐变，从内部圆到外部圆
var gradient = ctx.createRadialGradient(100, 100, 20, 100, 100, 100)

// 添加颜色停止点
gradient.addColorStop(0, 'red')
gradient.addColorStop(0.5, 'yellow')
gradient.addColorStop(1, 'green')

// 使用径向渐变作为填充样式
ctx.fillStyle = gradient

// 创建一个圆形路径并填充
ctx.beginPath()
ctx.arc(100, 100, 100, 0, Math.PI * 2)
ctx.fill()

WARNING

一旦创建了径向渐变对象 gradient，您可以通过 gradient.addColorStop() 方法向锥形渐变中添加颜色停止点，以指定不同颜色在渐变中的位置。

ctx.createConicGradient()

创建一个锥形渐变。

const gradient = ctx.createConicGradient(x, y, angle)

参数解释如下：

x 和 y：锥形渐变的中心点坐标。
angle：锥形渐变的起始角度，以弧度表示，从正 x 轴的方向开始，顺时针旋转。

示例：

var canvas = document.getElementById('myCanvas')
var ctx = canvas.getContext('2d')

// 创建锥形渐变
var gradient = ctx.createConicGradient(100, 100, 0)

// 添加颜色停止点
gradient.addColorStop(0, 'red')
gradient.addColorStop(0.25, 'yellow')
gradient.addColorStop(0.5, 'green')
gradient.addColorStop(0.75, 'blue')
gradient.addColorStop(1, 'red')

// 使用锥形渐变作为填充样式
ctx.fillStyle = gradient

// 创建一个圆形路径并填充
ctx.beginPath()
ctx.arc(100, 100, 50, 0, Math.PI * 2)
ctx.fill()

WARNING

一旦创建了锥形渐变对象 gradient，您可以通过 gradient.addColorStop() 方法向锥形渐变中添加颜色停止点，以指定不同颜色在渐变中的位置。

阴影

ctx.shadowBlur

设置阴影模糊级别。

ctx.shadowColor

设置阴影颜色。

ctx.shadowOffsetX

设置阴影的水平偏移量。

ctx.shadowOffsetY

设置阴影的垂直偏移量。

滤镜

ctx.filter

设置滤镜效果，可选值为："blur()"（模糊）、"brightness()"（亮度）、"contrast()"（对比度）、"grayscale()"（灰度）、"hue-rotate()"（旋转色相）、"invert()"（反转颜色）、"opacity()"（不透明度）、"saturate()"（饱和度）、"sepia()"（深褐色）。

变换

ctx.rotate()

对当前绘图状态应用旋转变换。

ctx.rotate(angle)

参数：

angle：表示要旋转的角度，以弧度为单位。正值表示顺时针旋转，负值表示逆时针旋转。

示例：

var canvas = document.getElementById('myCanvas')
var ctx = canvas.getContext('2d')

// 绘制一个矩形
ctx.fillStyle = 'blue'
ctx.fillRect(50, 50, 100, 60)

// 旋转坐标系 45 度（弧度表示）
ctx.rotate(Math.PI / 4)

// 绘制一个旋转后的矩形
ctx.fillStyle = 'red'
ctx.fillRect(50, 50, 100, 60)

Math.PI

Math.PI = 180 度，Math.PI * 2 = 360 度，依此类推。

ctx.scale()

对当前绘图状态应用缩放变换。

ctx.scale(scaleX, scaleY)

参数：

scaleX：表示在水平方向上进行缩放的比例因子。值小于 1 表示缩小，大于 1 表示放大，1 表示不变。
scaleY：表示在垂直方向上进行缩放的比例因子。同样，值小于 1 表示缩小，大于 1 表示放大，1 表示不变。

示例：

var canvas = document.getElementById('myCanvas')
var ctx = canvas.getContext('2d')

// 绘制一个矩形
ctx.fillStyle = 'blue'
ctx.fillRect(50, 50, 100, 60)

// 进行水平和垂直方向上的缩放
ctx.scale(2, 1.5)

// 绘制一个缩放后的矩形
ctx.fillStyle = 'red'
ctx.fillRect(50, 50, 100, 60)

ctx.transform()

应用仿射变换矩阵来变换绘图坐标系。

ctx.transform(a, b, c, d, e, f)

参数：

a：水平缩放因子
b：水平倾斜因子
c：垂直倾斜因子
d：垂直缩放因子
e：水平平移量
f：垂直平移量

示例：

var canvas = document.getElementById('myCanvas')
var ctx = canvas.getContext('2d')

// 绘制一个矩形
ctx.fillStyle = 'blue'
ctx.fillRect(50, 50, 100, 60)

// 应用仿射变换来旋转和平移坐标系
ctx.transform(1, 0, 0, 1, 50, 50) // 平移坐标系到 (50, 50)
ctx.transform(
  Math.cos(Math.PI / 4),
  Math.sin(Math.PI / 4),
  -Math.sin(Math.PI / 4),
  Math.cos(Math.PI / 4),
  0,
  0
) // 旋转45度

// 绘制一个变换后的矩形
ctx.fillStyle = 'red'
ctx.fillRect(0, 0, 100, 60)

与 ctx.setTransform() 区别

ctx.setTransform(a, b, c, d, e, f)

这个方法不是累积的，它会直接设置绘图坐标系的变换矩阵，覆盖之前的任何变换。
通常用于在重新设置绘图坐标系之前，以确保绘制操作不会受到之前变换的影响。

ctx.transform(a, b, c, d, e, f)

这个方法是累积的，它会将新的变换与之前的变换相乘，以得到最终的变换效果。
通常用于在已经有一些变换的情况下，进一步对绘图坐标系进行变换。

总结：如果需要在清除之前的所有变换并设置一个新的变换矩阵时，可以使用 ctx.setTransform()。如果希望在之前的变换基础上添加更多变换，可以使用 ctx.transform()。

ctx.translate()

平移（移动）绘图坐标系的原点。

ctx.translate(x, y)

参数：

x：表示在水平方向上移动原点的距离。
y：表示在垂直方向上移动原点的距离。

示例：

var canvas = document.getElementById('myCanvas')
var ctx = canvas.getContext('2d')

// 绘制一个矩形
ctx.fillStyle = 'blue'
ctx.fillRect(50, 50, 100, 60)

// 平移坐标系原点
ctx.translate(50, 50)

// 绘制一个平移后的矩形
ctx.fillStyle = 'red'
ctx.fillRect(0, 0, 100, 60)

ctx.setTransform()

设置当前的变换矩阵。

ctx.setTransform(a, b, c, d, e, f)

参数：

a：水平缩放（scaling）和旋转（rotation）。
b：水平倾斜（skewing）和旋转。
c：垂直倾斜和旋转。
d：垂直缩放和旋转。
e：水平平移（translation）。
f：垂直平移。

示例：

var canvas = document.getElementById('myCanvas')
var ctx = canvas.getContext('2d')

// 应用一些变换，例如平移和旋转
ctx.translate(50, 50)
ctx.rotate(Math.PI / 4)

// 清除之前的所有变换，将绘图坐标系重置为默认状态
ctx.setTransform(1, 0, 0, 1, 0, 0)

// 在默认状态下绘制一个不受之前变换影响的图形
ctx.fillStyle = 'blue'
ctx.fillRect(50, 50, 100, 60)

ctx.resetTransform()

将当前的变换矩阵重置为默认状态。

ctx.resetTransform()

示例：

var canvas = document.getElementById('myCanvas')
var ctx = canvas.getContext('2d')

// 应用一些变换操作
ctx.translate(50, 50)
ctx.rotate(Math.PI / 4)
ctx.scale(2, 2)

// 在变换状态下绘制一个矩形
ctx.fillRect(0, 0, 50, 50)

// 重置变换矩阵
ctx.resetTransform()

// 在恢复到默认状态下绘制另一个矩形
ctx.fillRect(100, 100, 50, 50)

保存

ctx.save()

保存当前的绘图状态，包括绘图样式（如颜色、线宽、填充样式等）、变换矩阵（如平移、旋转、缩放等）以及其他属性。

ctx.save()

恢复

ctx.restore()

恢复到之前保存的绘图状态，它会将当前状态替换为之前保存的状态，从而撤销了之后的绘图操作。

ctx.restore()

示例：

var canvas = document.getElementById('myCanvas')
var ctx = canvas.getContext('2d')

// 保存当前绘图状态
ctx.save()

// 设置新的绘图样式
ctx.fillStyle = 'red'
ctx.lineWidth = 3

// 绘制一个矩形
ctx.fillRect(50, 50, 100, 100)

// 恢复到之前保存的绘图状态
ctx.restore()

// 绘制另一个矩形，样式和线宽恢复为之前保存的状态
ctx.fillRect(200, 50, 100, 100)

动画

window.requestAnimationFrame()

requestAnimationFrame(callback)

示例：

var canvas = document.getElementById('myCanvas')
var ctx = canvas.getContext('2d')

let earthAngle = 0
let moonAngle = 0

function loop() {
  // 保存初始化画布
  ctx.save()

  // 清除画布
  ctx.clearRect(0, 0, canvas.width, canvas.height)

  // 太阳
  ctx.beginPath()
  ctx.arc(400, 300, 100, 0, 2 * Math.PI)
  ctx.fillStyle = '#e3fa14'
  ctx.shadowColor = '#e3fa14'
  ctx.shadowBlur = 10
  ctx.fill()
  ctx.closePath()

  // 地球
  ctx.beginPath()
  ctx.translate(400, 300)
  ctx.rotate(
    ((earthAngle > 60 ? (earthAngle = 0) : earthAngle++) * Math.PI) / 180
  )
  ctx.translate(200, 0)
  ctx.arc(0, 0, 20, 0.2 * Math.PI)
  ctx.fillStyle = 'blue'
  ctx.shadowBlur = 0
  ctx.fill()
  ctx.closePath()

  // 月球
  ctx.beginPath()
  ctx.fillStyle = '#fff'
  ctx.rotate((++moonAngle * Math.PI) / 180)
  ctx.arc(40, 0, 6, 0, 2 * Math.PI)
  ctx.fill()
  ctx.closePath()

  // 恢复至初始化画布
  ctx.restore()

  // 递归调用自身
  requestAnimationFrame(loop)
}

requestAnimationFrame(loop)

数据 URL

将 Canvas 中的图像转换为 Data URL 地址。Data URL 是一种将图像嵌入到文档中的方式，它以文本字符串的形式表示图像数据。

toDataURL([type][, encoderOptions])

参数：

type（可选）：用于指定生成的 Data URL 的图像类型。常见的类型包括："image/png"(默认值)、"image/jpeg"、"image/gif" 。
encoderOptions（可选）：用于指定图像编码的选项。对于 JPEG 和 WebP 图像，您可以指定图像的质量，范围从 0 到 1，其中 1 表示最高质量。

示例：

var canvas = document.getElementById('myCanvas')
var ctx = canvas.getContext('2d')

// 在 Canvas 上绘制一个矩形
ctx.fillStyle = 'blue'
ctx.fillRect(10, 10, 100, 80)

// 使用 toDataURL() 方法将 Canvas 中的绘图结果转换为 Data URL（JPEG 格式，质量为 0.8）
var dataURL = canvas.toDataURL('image/jpeg', 0.8)

// 创建图片
const img = new Image()
img.src = dataURL

封装 Path2D

用于创建和存储路径，以便在后续的绘图操作中重复使用。

new Path2D()

创建一个空的路径对象，或者可以传入一个现有路径对象或路径字符串来创建一个新的路径对象。

new Path2D()
new Path2D(path)
new Path2D(d)

参数：

path: 当使用另一个 Path2D 对象调用时，将创建 path 参数的副本。
d: 当使用由 SVG 路径数据组成的字符串调用时，将从该描述创建一个新路径。

示例

const canvas = document.getElementById('canvas')
const ctx = canvas.getContext('2d')

// Path
let path1 = new Path2D()
path1.rect(10, 10, 100, 100)

let path2 = new Path2D(path1)
path2.moveTo(220, 60)
path2.arc(170, 60, 50, 0, 2 * Math.PI)

ctx.stroke(path2)

// SVG
let p = new Path2D('M10 10 h 80 v 80 h -80 Z')
ctx.fill(p)

path.addPath()

将一个路径添加到另一个路径中。

addPath(path [, transform])

参数：

path: 要添加到当前路径的路径对象，通常是另一个 Path2D 对象，以合并两者的路径。
transform: 在添加路径时对路径进行变换。这是一个 DOMMatrix 或 SVGMatrix 对象，表示 2D 变换矩阵。

示例：

const canvas = document.getElementById('canvas')
const ctx = canvas.getContext('2d')

// Create first path and add a rectangle
let p1 = new Path2D()
p1.rect(0, 0, 100, 150)

// Create second path and add a rectangle
let p2 = new Path2D()
p2.rect(0, 0, 100, 75)

// Draw the first path
p1.addPath(p2)
ctx.fill(p1)

TIP

在 SVG 文档中复用已定义的图形元素。这有助于提高 SVG 文档的可维护性和性能，并允许您在文档中多次使用相同的图形元素。

SVG

SVG，全称为可缩放矢量图形（Scalable Vector Graphics），是一种用于描述二维矢量图形的 XML（可扩展标记语言）文件格式。它是一种开放标准，用于在 Web 上创建图形和图像，以及在各种应用程序中以矢量形式呈现图形。

矢量图形： SVG 使用数学公式来描述图形，而不是像位图图像（如 JPEG 或 PNG）那样使用像素格。这意味着 SVG 图形可以被放大或缩小而不会失去质量，因为它们是基于数学公式的，而不是像素。
可缩放性：由于 SVG 是矢量图形，它们可以在不失真的情况下以任何大小进行缩放，这使其特别适合用于不同分辨率的设备和屏幕上，包括高分辨率屏幕。
文本支持： SVG 支持在图形中嵌入文本，这意味着您可以创建包含文本和图形的复杂图像，而无需将它们分开。
互操作性： SVG 是一个开放标准，受到许多不同应用程序和平台的支持。它可以在 Web 浏览器中直接呈现，也可以在图像编辑软件中编辑和创建。
动画支持： SVG 还支持动画，您可以使用 CSS 或 SMIL（Synchronized Multimedia Integration Language）来创建交互式和动态的图形效果。
小文件尺寸： SVG 文件通常相对较小，因为它们是基于文本的，而不是像素，这使它们适用于 Web 上的图形。
可编辑性： SVG 文件可以使用文本编辑器进行编辑，这使得修改和维护图形变得相对容易。

与 Canvas 区别

图形类型：
- SVG： SVG 是基于矢量的，它使用数学公式来描述图形，因此它主要适用于静态矢量图形，例如图标、图表和矢量图像。SVG 图形是分层的，元素可以直接访问和操纵。
- Canvas： HTML5 Canvas 是一个绘图区域，它允许您使用 JavaScript 绘制位图图形。Canvas 是像素基的，您需要在 Canvas 上绘制所有内容，包括线条、形状和文本。Canvas 通常用于动态图形、游戏和需要复杂绘图的应用程序。
缩放性：
- SVG： SVG 图形可以轻松缩放，而不会失去质量，因为它们是基于数学公式的。这使得 SVG 非常适合用于各种不同分辨率的设备。
- Canvas： Canvas 上的内容是像素化的，因此在放大时可能会失真，除非您手动重新绘制图形。
互交性：
- SVG： SVG 支持事件处理和互动性，您可以将事件处理程序附加到 SVG 元素，使其具有交互性。
- Canvas： Canvas 通常需要更多的 JavaScript 编程来实现交互性，因为它本身不支持事件处理。
绘图方法：
- SVG：在 SVG 中，图形是由一系列的矢量图形元素（如线、圆、矩形、路径等）组成，您可以直接操作这些元素。
- Canvas：在 Canvas 上，您需要使用绘图上下文的 API 来绘制图形，这通常涉及绘制路径、填充颜色和设置样式。
可编辑性：
- SVG： SVG 图形可以直接编辑，因为它们是基于文本的 XML 格式。您可以使用文本编辑器或 SVG 编辑器来修改它们。
- Canvas： Canvas 上的图形通常不可编辑，因为它们是位图，您无法直接编辑像素。

容器元素

svg 元素

这是 SVG 图形的根元素，您可以在其中定义和放置 SVG 图形元素。

html

<svg width="100" height="100">
  <!-- 在这里放置SVG图形元素 -->
</svg>

常见属性：

width 和 height：用于指定 SVG 图形的宽度和高度，以像素为单位。
viewBox：定义 SVG 坐标系统中可见区域的位置和大小。它是一个包含四个值的字符串，分别表示 x、y、宽度和高度。
xmlns：命名空间属性，用于指定 SVG 命名空间，通常为 "http://www.w3.org/2000/svg" 。
preserveAspectRatio：定义了如何处理 SVG 图形在不同宽高比的容器中的显示。它通常与 viewBox 一起使用。
xmlns:xlink：命名空间属性，用于在 SVG 中使用超链接（例如，在 <a> 元素中），通常为 "http://www.w3.org/1999/xlink" 。
xmlns:xml：命名空间属性，用于指定 XML 命名空间，通常为 "http://www.w3.org/XML/1998/namespace" 。
id：用于给 SVG 元素指定一个唯一的标识符。
class：用于为 SVG 元素指定一个或多个 CSS 类。

关于 xmlns 注意事项

xmlns 属性只在 SVG 文档的最外层 <svg> 元素上是必需的，或者在采用 XML 序列化的 HTML 文档中使用 SVG 时才需要。
- SVG 文档的最外层 <svg> 元素：在独立的 SVG 文档中，通常会包含一个 <svg> 元素，它是 SVG 图形的根元素。在这种情况下，您需要为最外层的 <svg> 元素指定 xmlns 属性，以指定 SVG 的命名空间。这有助于解析器正确识别文档类型和元素。
html
```
<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100">
  
</svg>
```
- 在 HTML 文档中使用 SVG：如果您将 SVG 嵌入到 HTML 文档中，并且该 HTML 文档采用 XML 序列化（例如，使用 XHTML），则在 <svg> 元素中也需要指定 xmlns 属性。这是因为 XML 文档要求明确指定命名空间。
html
```
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
  <body>
    
    <svg xmlns="http://www.w3.org/2000/svg" width="100" height="100">
      
    </svg>
  </body>
</html>
```
对于内部的 SVG 元素或在采用 HTML 序列化的 HTML 文档中使用的情况，不需要指定 xmlns 属性。
- 内部的 SVG 元素：如果在一个 SVG 文档中包含了多个嵌套的 <svg> 元素，那么对于这些内部的 <svg> 元素，通常不需要指定 xmlns 属性，因为外部的根级 <svg> 元素已经定义了命名空间。内部的 <svg> 元素将继承外部根级 <svg> 元素的命名空间。
html
```
<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200">
  <svg x="50" y="50" width="100" height="100">
    
    <circle cx="50" cy="50" r="30" fill="blue" />
  </svg>
</svg>
```
- HTML 文档中的 HTML 序列化：如果您在 HTML 文档中嵌入 SVG 并使用 HTML 序列化（例如，不使用 XHTML），则通常不需要在 <svg> 元素内部指定 xmlns 属性。这是因为 HTML 文档采用不同的命名空间机制，不需要像 XML 文档那样显式指定命名空间。
html
```
<!DOCTYPE html>
<html>
  <body>
    
    <svg width="100" height="100">
      <circle cx="50" cy="50" r="30" fill="blue" />
    </svg>
  </body>
</html>
```

g 元素

用于创建分组，可以将多个 SVG 元素放入一个分组中，以便一起处理。

html

<g>
  <circle cx="30" cy="30" r="20" fill="blue" />
  <rect x="40" y="10" width="40" height="40" fill="green" />
</g>

常见属性：

id：用于给 <g> 元素分配一个唯一的标识符，以便在 JavaScript 或 CSS 中引用它。
class：用于为 <g> 元素指定一个或多个 CSS 类，以便对其应用样式。
transform：用于应用变换（平移、旋转、缩放等）到包含在 <g> 元素中的所有子元素。变换可以是一个包含多个变换操作的字符串，例如平移、旋转和缩放。
opacity：用于设置 <g> 元素及其子元素的不透明度（透明度）。值范围从 0（完全透明）到 1（完全不透明）。
style：通过内联样式为 <g> 元素设置 CSS 样式，包括颜色、填充、边框等。这是一个字符串值，类似于 HTML 中的 style 属性。

a 元素

用于创建超链接，通常与 <text> 元素结合使用。

html

<a xlink:href="https://www.example.com">
  <text x="20" y="40">Click me</text>
</a>

常见属性：

xlink:href：这是 SVG 中 <a> 元素最重要的属性，用于指定链接的目标。您可以将链接目标指定为其他 SVG 文件、外部网址、资源文件等。
target：用于指定链接的打开方式。常见的值包括 _blank（在新标签页中打开链接）和 _self（在当前标签页中打开链接）等。

defs 元素

用于定义可重用的图形元素、滤镜、渐变、模式或其他图形属性，这些定义可以在 SVG 文档中的其他地方引用和重复使用。<defs> 元素通常与其他 SVG 元素一起使用，以提高 SVG 文档的可维护性和性能。

定义可重用元素：最常见的用法是在 <defs> 元素内部定义可重用的图形元素，例如 <path>、<circle>、<rect> 等，以便在文档中多次引用。

html

<svg>
  <defs>
    <circle id="myCircle" cx="30" cy="30" r="20" />
  </defs>
  <use xlink:href="#myCircle" fill="blue" />
  <use xlink:href="#myCircle" fill="red" x="60" />
</svg>

定义滤镜、渐变和模式： <defs> 元素也用于定义可重用的滤镜、渐变和图案，以便在多个元素上应用。

html

<svg>
  <defs>
    <linearGradient id="myGradient" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" />
      <stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
    </linearGradient>
  </defs>
  <rect x="10" y="10" width="100" height="50" fill="url(#myGradient)" />
</svg>

形状元素

rect 元素

用于创建矩形，可以在 SVG 中定义矩形的位置、大小和样式。

html

<rect x="10" y="10" width="80" height="50" fill="blue" />

常见属性：

x 和 y：用于指定矩形左上角的 x 和 y 坐标。它们定义了矩形相对于 SVG 坐标系统的位置。
width 和 height：用于定义矩形的宽度和高度。这些值通常是以像素为单位的。
rx 和 ry：可选属性，用于定义矩形的圆角半径。如果未指定，矩形将是直角的。如果指定了 rx，但没有指定 ry，则 ry 默认等于 rx，从而创建圆角矩形。
fill：用于指定矩形的填充颜色。可以使用颜色名称、十六进制颜色码或其他有效的 CSS 颜色值。
stroke 和 stroke-width：用于定义矩形边框的颜色和宽度。
opacity：用于设置矩形的不透明度（透明度）。值范围从 0（完全透明）到 1（完全不透明）。
transform：用于应用变换（平移、旋转、缩放等）到矩形。变换可以是一个包含多个变换操作的字符串。

circle 元素

用于创建圆，可以在 SVG 中定义圆的半径、位置和样式。

html

<circle cx="50" cy="50" r="30" fill="red" />

常见属性：

cx 和 cy：用于指定圆心的 x 和 y 坐标。它们定义了圆的中心点相对于 SVG 坐标系统的位置。
r：用于定义圆的半径，即从圆心到边缘的距离。
fill：用于指定圆的填充颜色。可以使用颜色名称、十六进制颜色码或其他有效的 CSS 颜色值。
stroke 和 stroke-width：用于定义圆的边框的颜色和宽度。
stroke-dasharray：用于定义虚线样式的边框。它是一个包含一系列数字的字符串，指定了实线和空白的长度。
opacity：用于设置圆的不透明度（透明度）。值范围从 0（完全透明）到 1（完全不透明）。
transform：用于应用变换（平移、旋转、缩放等）到圆。变换可以是一个包含多个变换操作的字符串。

ellipse 元素

用于创建椭圆，可以在 SVG 中定义椭圆的半径、位置和样式。

html

<ellipse cx="50" cy="50" rx="40" ry="20" fill="green" />

常见属性：

cx 和 cy：用于指定椭圆中心点的 x 和 y 坐标。它们定义了椭圆相对于 SVG 坐标系统的位置。
rx 和 ry：用于定义椭圆的水平和垂直半轴的半径。rx 表示水平半轴的长度，而 ry 表示垂直半轴的长度。
fill：用于指定椭圆的填充颜色。可以使用颜色名称、十六进制颜色码或其他有效的 CSS 颜色值。
stroke 和 stroke-width：用于定义椭圆的边框的颜色和宽度。
stroke-dasharray：用于定义虚线样式的边框。它是一个包含一系列数字的字符串，指定了实线和空白的长度。
opacity：用于设置椭圆的不透明度（透明度）。值范围从 0（完全透明）到 1（完全不透明）。
transform：用于应用变换（平移、旋转、缩放等）到椭圆。变换可以是一个包含多个变换操作的字符串。

line 元素

用于创建直线，可以在 SVG 中定义线的起点和终点、颜色和样式。

html

<line x1="10" y1="10" x2="90" y2="90" stroke="black" />

常见属性：

x1 和 y1：用于指定直线的起点坐标的 x 和 y 值。
x2 和 y2：用于指定直线的终点坐标的 x 和 y 值。
stroke 和 stroke-width：用于定义直线的颜色和宽度。
stroke-dasharray：用于定义虚线样式的边框。它是一个包含一系列数字的字符串，指定了实线和空白的长度。
opacity：用于设置直线的不透明度（透明度）。值范围从 0（完全透明）到 1（完全不透明）。
transform：用于应用变换（平移、旋转、缩放等）到直线。变换可以是一个包含多个变换操作的字符串。

polyline 元素

用于创建多段线，可以在 SVG 中定义多个点，这些点将连接成线条。

html

<polyline
  points="10,10 50,90 90,10"
  fill="none"
  stroke="purple"
  stroke-width="3"
/>

常见属性：

points：此属性定义了多段线的点坐标。它是一个包含一系列 x 和 y 坐标值的字符串，用空格或逗号分隔。每对坐标表示一个点。
fill：用于指定多段线的填充颜色。可以使用颜色名称、十六进制颜色码或其他有效的 CSS 颜色值。
stroke 和 stroke-width：用于定义多段线的边框颜色和宽度。
stroke-dasharray：用于定义虚线样式的边框。它是一个包含一系列数字的字符串，指定了实线和空白的长度。
opacity：用于设置多段线的不透明度（透明度）。值范围从 0（完全透明）到 1（完全不透明）。
transform：用于应用变换（平移、旋转、缩放等）到多段线。变换可以是一个包含多个变换操作的字符串。

polygon 元素

用于创建多边形，可以在 SVG 中定义多个点，这些点将连接成封闭的形状。

html

<polygon points="50,10 10,90 90,90" fill="orange" />

常见属性：

points：此属性定义了多边形的点坐标。它是一个包含一系列 x 和 y 坐标值的字符串，用空格或逗号分隔。每对坐标表示一个点。
fill：用于指定多边形的填充颜色。可以使用颜色名称、十六进制颜色码或其他有效的 CSS 颜色值。
stroke 和 stroke-width：用于定义多边形的边框颜色和宽度。
stroke-dasharray：用于定义虚线样式的边框。它是一个包含一系列数字的字符串，指定了实线和空白的长度。
opacity：用于设置多边形的不透明度（透明度）。值范围从 0（完全透明）到 1（完全不透明）。
transform：用于应用变换（平移、旋转、缩放等）到多边形。变换可以是一个包含多个变换操作的字符串。

path 元素

用于创建自定义路径，可以在 SVG 中使用各种命令来定义路径的形状。

html

<path
  d="M10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80"
  fill="none"
  stroke="brown"
/>

常见属性：

d：此属性是 <path> 元素最重要的属性，用于定义路径的命令和参数。它是一个包含路径数据的字符串，每个命令以字母表示，后面跟着命令的参数。
fill：用于指定路径的填充颜色。可以使用颜色名称、十六进制颜色码或其他有效的 CSS 颜色值。
stroke 和 stroke-width：用于定义路径的边框颜色和宽度。
stroke-dasharray：用于定义虚线样式的边框。它是一个包含一系列数字的字符串，指定了实线和空白的长度。
opacity：用于设置路径的不透明度（透明度）。值范围从 0（完全透明）到 1（完全不透明）。
transform：用于应用变换（平移、旋转、缩放等）到路径。变换可以是一个包含多个变换操作的字符串。

关于 d 命令参数

路径命令可以使用绝对定位和相对定位。一般来说，在 SVG 路径数据中，大写字母通常表示绝对定位，而小写字母表示相对定位。这是一种通用的约定，用于表示路径命令中的坐标是绝对的还是相对于当前点的。绝对定位命令将指定绝对的坐标值，相对于 SVG 坐标系统来描述路径；相对定位命令使用相对于当前点的坐标值来描述路径，相对于上一个点的坐标值来绘制路径。

M (Move To)：M 命令用于将路径的起始点移动到指定的坐标位置，而不绘制任何线条。它后面跟随一个或多个坐标对，每个坐标对表示一个点。
- M x y：将起始点移动到坐标 (x, y)。
html
```
<path d="M 10 10" />
```
L (Line To)：L 命令用于从当前点绘制一条直线到指定的坐标位置。它后面跟随一个或多个坐标对，每个坐标对表示一个终点。
- L x y：绘制一条直线到坐标 (x, y)。
html
```
<path d="M 10 10 L 50 50" />
```
H (Horizontal Line To)：H 命令用于从当前点绘制一条水平线到指定的 x 坐标位置。它只接受一个 x 坐标值作为参数。
- H x：绘制一条水平线到 x 坐标 (x, 当前 y)。
html
```
<path d="M 10 10 H 50" />
```
V (Vertical Line To)：V 命令用于从当前点绘制一条垂直线到指定的 y 坐标位置。它只接受一个 y 坐标值作为参数。
- V y：绘制一条垂直线到 y 坐标 (当前 x, y)。
html
```
<path d="M 10 10 V 50" />
```
C (Cubic Bezier Curve To)：C 命令用于绘制三次贝塞尔曲线。它后面跟随六个参数，分别是两个控制点和终点的坐标。
- C x1 y1, x2 y2, x y：绘制从当前点到 (x, y) 的三次贝塞尔曲线，其中 (x1, y1) 和 (x2, y2) 是两个控制点。
html
```
<path d="M 10 10 C 20 20, 40 20, 50 10" />
```
S (Smooth Curve To)：S 命令用于绘制光滑的三次贝塞尔曲线，其中第一个控制点是前一个曲线的终点的对称点。它后面跟随四个参数，分别是一个控制点和终点的坐标。
- S x2 y2, x y：绘制从当前点到 (x, y) 的光滑三次贝塞尔曲线，其中 (x2, y2) 是一个控制点。
html
```
<path d="M 10 10 S 40 20, 50 10" />
```
Q (Quadratic Bezier Curve To)：Q 命令用于绘制二次贝塞尔曲线。它后面跟随四个参数，分别是一个控制点和终点的坐标。
- Q x1 y1, x y：绘制从当前点到 (x, y) 的二次贝塞尔曲线，其中 (x1, y1) 是一个控制点。
html
```
<path d="M 10 10 Q 30 20, 50 10" />
```
T (Smooth Quadratic Bezier Curve To)：T 命令用于绘制光滑的二次贝塞尔曲线，其中控制点是前一个曲线的终点的对称点。它后面跟随两个参数，分别是终点的坐标。
- T x y：绘制从当前点到 (x, y) 的光滑二次贝塞尔曲线。
html
```
<path d="M 10 80 A 45 45, 0, 0, 0, 100 80" />
```
A (Arc)：A 命令用于绘制椭圆弧。它后面跟随七个参数，分别是椭圆弧的半径、旋转角度、弧的大/小角度、弧的方向和终点坐标。
- A rx ry x-axis-rotation large-arc-flag sweep-flag x y：绘制椭圆弧。
html
```
<path d="M 10 80 A 45 45, 0, 0, 0, 100 80" />
```
Z (Close Path)：Z 命令用于将当前路径连接回起始点，形成封闭路径。它不需要参数。
- Z：连接当前点到路径的起始点。
html
```
<path d="M 10 10 L 50 50 H 100 V 10 Z" />
```

文本内容元素

text 元素

用于在 SVG 图形中添加文本，可以指定文本内容、位置、字体等。

html

<text x="20" y="40" fill="black" font-size="20">SVG Text</text>

常见属性：

x 和 y：用于指定文本的起始位置的 x 和 y 坐标。它们定义了文本的基线（通常是文本的底部）相对于 SVG 坐标系统的位置。
font-family：用于指定文本的字体系列（例如，Arial、Helvetica、Times New Roman 等）。
font-size：用于定义文本的字体大小，以像素为单位。
fill：用于指定文本的填充颜色。可以使用颜色名称、十六进制颜色码或其他有效的 CSS 颜色值。
opacity：用于设置文本的不透明度（透明度）。值范围从 0（完全透明）到 1（完全不透明）。
transform：用于应用变换（平移、旋转、缩放等）到文本。变换可以是一个包含多个变换操作的字符串。
text-anchor：用于定义文本的对齐方式，可以是 start（默认，左对齐）、middle（居中对齐）、或 end（右对齐）。
alignment-baseline：用于定义文本的垂直对齐方式，可以是 baseline（默认，基线对齐）、middle（居中对齐）、或 hanging（悬挂对齐）等。

tspan 元素

用于在文本中创建子文本块的元素。它通常用于在文本内部应用不同的样式或进行定位，使文本具有更多的灵活性。

html

<text x="20" y="40">
  <tspan x="20" y="40">Hello</tspan>
  <tspan x="60" y="40">SVG!</tspan>
</text>

常见属性：

x 和 y：用于指定 <tspan> 元素的起始位置的 x 和 y 坐标。这些坐标定义了子文本块相对于父文本的位置。
font-family：用于指定 <tspan> 元素的字体系列（例如，Arial、Helvetica、Times New Roman 等）。
font-size：用于定义 <tspan> 元素的字体大小，以像素为单位。
fill：用于指定 <tspan> 元素的填充颜色。可以使用颜色名称、十六进制颜色码或其他有效的 CSS 颜色值。
stroke 和 stroke-width：用于定义 <tspan> 元素的边框颜色和宽度。
opacity：用于设置 <tspan> 元素的不透明度（透明度）。值范围从 0（完全透明）到 1（完全不透明）。

滤镜元素

filter 元素

用于创建图形效果和滤镜效果的元素之一。

html

<filter x="0" y="0" width="100%" height="100%" id="blur">
  <!-- 滤镜效果的内容 -->
</filter>

常见属性：

x 和 y：用于指定滤镜效果的坐标，表示滤镜效果的位置。通常与 <filter> 元素的 width 和 height 属性一起使用，用于定义滤镜效果的范围。
id：用于为滤镜效果定义唯一的标识符，以便在其他元素中引用该滤镜。
filterUnits 和 primitiveUnits：这些属性定义了滤镜效果的坐标系统和尺寸单位。通常使用默认值即可。
filterRes：用于指定滤镜效果的分辨率，即滤镜效果的像素大小。它是一个包含两个整数的字符串，例如 filterRes="300 300"。
filterUnits：用于指定滤镜效果的坐标系统。可以是 userSpaceOnUse（默认，以用户坐标系统为基础）或 objectBoundingBox（以被过滤对象的边界框为基础）。
滤镜效果的内容：在 <filter> 元素内部，您可以包含多个滤镜效果操作。

filter 属性

在 SVG 元素中，可以通过设置 filter 属性来应用定义 circle 元素的滤镜效果。

html

<circle cx="50" cy="50" r="40" fill="red" filter="url(#blur)" />

滤镜效果的内容

<feGaussianBlur>：高斯模糊滤镜，用于模糊图像或元素。

html

<filter x="0" y="0" width="100%" height="100%" id="blur">
  <feGaussianBlur in="SourceGraphic" stdDeviation="5" />
</filter>

<feColorMatrix>：颜色矩阵滤镜，用于改变图像或元素的颜色。

html

<filter x="0" y="0" width="100%" height="100%" id="Matrix">
  <feColorMatrix
    in="SourceGraphic"
    type="matrix"
    values="0.5 0 0 0 0 0 0.8 0 0 0 0 0 0 0 0 0 0 0 0.5 0"
  />
</filter>

<feDropShadow>：阴影滤镜，用于在图像或元素周围创建阴影效果。

html

<filter x="0" y="0" width="100%" height="100%" id="Shadow">
  <feDropShadow dx="2" dy="2" stdDeviation="3" />
</filter>

<feComposite>：合成滤镜，用于在图像或元素之间执行复合操作。

html

<filter x="0" y="0" width="100%" height="100%" id="Composite">
  <feComposite operator="in" in2="SourceGraphic" />
</filter>

<feTurbulence>：涡流滤镜，用于创建噪点或纹理效果。

html

<filter x="0" y="0" width="100%" height="100%" id="Turbulence">
  <feTurbulence type="fractalNoise" baseFrequency="0.01" numOctaves="5" />
</filter>

<feDisplacementMap>：位移映射滤镜，用于根据另一幅图像的亮度值扭曲图像。

html

<filter x="0" y="0" width="100%" height="100%" id="Map">
  <feDisplacementMap in2="SourceGraphic" scale="20" />
</filter>

<feMorphology>：形态学滤镜，用于膨胀或腐蚀图像。

html

<filter x="0" y="0" width="100%" height="100%" id="Composite">
  <feMorphology operator="erode" radius="2" />
</filter>

<feOffset>：偏移滤镜，用于将图像或元素偏移一定的距离。

html

<filter x="0" y="0" width="100%" height="100%" id="Composite">
  <feOffset dx="5" dy="5" />
</filter>

渐变元素

linearGradient 元素

用于创建线性渐变的元素。

html

<defs>
  <linearGradient id="myGradient" x1="0%" y1="0%" x2="100%" y2="0%">
    <stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" />
    <stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
  </linearGradient>
</defs>
<rect x="10" y="10" width="100" height="50" fill="url(#myGradient)" />

常见属性：

id：必须的属性，用于给渐变定义一个唯一的标识符。
x1 和 y1：渐变的起始点的坐标，可以使用百分比或具体的坐标值。默认值是 "0%"。
x2 和 y2：渐变的结束点的坐标，可以使用百分比或具体的坐标值。默认值是 "100%"。
gradientUnits：指定坐标系统，可以是 userSpaceOnUse（默认，使用用户坐标系统）或 objectBoundingBox（相对于被填充元素的边界框）。
spreadMethod：定义渐变超出起始点和结束点之外的行为。可以是 pad（默认，超出部分填充与最近的颜色相同）、reflect（超出部分镜像反射）或 repeat（超出部分重复渐变）。
gradientTransform：允许应用变换矩阵来改变渐变的方向、位置和形状。
颜色停止点：在 <linearGradient> 元素内部使用 <stop> 元素来定义颜色和颜色停止点。

radialGradient 元素

用于创建径向渐变的元素。

html

<defs>
    <radialGradient id="myGradient" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
        <stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" />
        <stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
    </radialGradient>
</defs>
<circle cx="100" cy="100" r="50" fill="url(#myGradient)" />

常见属性：

id：必须的属性，用于给渐变定义一个唯一的标识符。
cx 和 cy：渐变的中心点的坐标，可以使用百分比或具体的坐标值。默认值是 "50%"。
r：渐变的半径，可以使用百分比或具体的坐标值。默认值是 "50%"。
fx 和 fy：焦点的坐标（可选），用于创建焦点渐变。默认值是与中心点相同。
gradientUnits：指定坐标系统，可以是 userSpaceOnUse（默认，使用用户坐标系统）或 objectBoundingBox（相对于被填充元素的边界框）。
spreadMethod：定义渐变超出半径之外的行为。可以是 pad（默认，超出部分填充与最近的颜色相同）、reflect（超出部分镜像反射）或 repeat（超出部分重复渐变）。
gradientTransform：允许应用变换矩阵来改变渐变的方向、位置和形状。
颜色停止点：在 <radialGradient> 元素内部使用 <stop> 元素来定义颜色和颜色停止点。

渲染元素

use 元素

用于在 SVG 文档中引用其他元素（通常是 <defs> 内定义的元素）。通过设置 x 和 y 属性，可以指定要放置图形元素的位置。

html

<use xlink:href="#myShape" x="50" y="50" />

常见属性：

xlink:href 或 href（在 HTML5 中使用）：必须的属性，用于指定要引用的图形元素的 ID。您可以在当前文档中引用或在外部文档中引用。
x 和 y：可选属性，用于指定要插入的图形元素的位置。这些属性定义了元素的左上角坐标。默认值是 0。
width 和 height：可选属性，用于指定要插入的图形元素的大小。默认值是根据原始图形元素的大小来确定。

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