buyfakett/reference
1
0
Fork 0
mirror of https://github.com/jaywcjlove/reference.git synced 2025-06-17 20:51:21 +08:00
Code Issues Packages Projects Releases Wiki Activity
Files
3e19a9efad8f89038d1c6e1429d56d4da4a8ae36
reference/docs/html.html
jaywcjlove 3e19a9efad website: add anchor positioning style. 4122b48f76
2022-10-15 18:23:38 +00:00

1161 lines
150 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!doctype html>
<html lang="en" data-color-mode="dark">
<head>
<meta charset="utf-8">
<title>HTML 备忘清单
&#x26; html cheatsheet &#x26; Quick Reference</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta description="此 HTML 快速参考备忘单以可读布局列出了常见的 &#x60;HTML&#x60; 和 &#x60;HTML5&#x60; 标记。为开发人员分享快速参考备忘单。">
<meta keywords="Quick,Reference,cheatsheet,html">
<link rel="icon" href="data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20height%3D%221em%22%20width%3D%221em%22%3E%20%3Cpath%20d%3D%22m21.66%2010.44-.98%204.18c-.84%203.61-2.5%205.07-5.62%204.77-.5-.04-1.04-.13-1.62-.27l-1.68-.4c-4.17-.99-5.46-3.05-4.48-7.23l.98-4.19c.2-.85.44-1.59.74-2.2%201.17-2.42%203.16-3.07%206.5-2.28l1.67.39c4.19.98%205.47%203.05%204.49%207.23Z%22%20fill%3D%22%23c9d1d9%22%2F%3E%20%3Cpath%20d%3D%22M15.06%2019.39c-.62.42-1.4.77-2.35%201.08l-1.58.52c-3.97%201.28-6.06.21-7.35-3.76L2.5%2013.28c-1.28-3.97-.22-6.07%203.75-7.35l1.58-.52c.41-.13.8-.24%201.17-.31-.3.61-.54%201.35-.74%202.2l-.98%204.19c-.98%204.18.31%206.24%204.48%207.23l1.68.4c.58.14%201.12.23%201.62.27Zm2.43-8.88c-.06%200-.12-.01-.19-.02l-4.85-1.23a.75.75%200%200%201%20.37-1.45l4.85%201.23a.748.748%200%200%201-.18%201.47Z%22%20fill%3D%22%23228e6c%22%20%2F%3E%20%3Cpath%20d%3D%22M14.56%2013.89c-.06%200-.12-.01-.19-.02l-2.91-.74a.75.75%200%200%201%20.37-1.45l2.91.74c.4.1.64.51.54.91-.08.34-.38.56-.72.56Z%22%20fill%3D%22%23228e6c%22%20%2F%3E%20%3C%2Fsvg%3E" type="image/svg+xml">
<link rel="stylesheet" href="../style/style.css">
</head>
<body><nav class="header-nav"><div class="max-container"><a href="../index.html" class="logo"><svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" height="1em" width="1em">
<path d="m21.66 10.44-.98 4.18c-.84 3.61-2.5 5.07-5.62 4.77-.5-.04-1.04-.13-1.62-.27l-1.68-.4c-4.17-.99-5.46-3.05-4.48-7.23l.98-4.19c.2-.85.44-1.59.74-2.2 1.17-2.42 3.16-3.07 6.5-2.28l1.67.39c4.19.98 5.47 3.05 4.49 7.23Z" fill="#c9d1d9"></path>
<path d="M15.06 19.39c-.62.42-1.4.77-2.35 1.08l-1.58.52c-3.97 1.28-6.06.21-7.35-3.76L2.5 13.28c-1.28-3.97-.22-6.07 3.75-7.35l1.58-.52c.41-.13.8-.24 1.17-.31-.3.61-.54 1.35-.74 2.2l-.98 4.19c-.98 4.18.31 6.24 4.48 7.23l1.68.4c.58.14 1.12.23 1.62.27Zm2.43-8.88c-.06 0-.12-.01-.19-.02l-4.85-1.23a.75.75 0 0 1 .37-1.45l4.85 1.23a.748.748 0 0 1-.18 1.47Z" fill="#228e6c"></path>
<path d="M14.56 13.89c-.06 0-.12-.01-.19-.02l-2.91-.74a.75.75 0 0 1 .37-1.45l2.91.74c.4.1.64.51.54.91-.08.34-.38.56-.72.56Z" fill="#228e6c"></path>
</svg>
<span class="title">Quick Reference</span></a><div class="menu"><a href="https://github.com/jaywcjlove/reference/blob/main/docs/html.md" class="" target="__blank"><svg viewBox="0 0 36 36" fill="currentColor" height="1em" width="1em"><path d="m33 6.4-3.7-3.7a1.71 1.71 0 0 0-2.36 0L23.65 6H6a2 2 0 0 0-2 2v22a2 2 0 0 0 2 2h22a2 2 0 0 0 2-2V11.76l3-3a1.67 1.67 0 0 0 0-2.36ZM18.83 20.13l-4.19.93 1-4.15 9.55-9.57 3.23 3.23ZM29.5 9.43 26.27 6.2l1.85-1.85 3.23 3.23Z"></path><path fill="none" d="M0 0h36v36H0z"></path></svg><span>编辑</span></a><button id="darkMode" type="button"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="light" height="1em" width="1em">
<path d="M6.995 12c0 2.761 2.246 5.007 5.007 5.007s5.007-2.246 5.007-5.007-2.246-5.007-5.007-5.007S6.995 9.239 6.995 12zM11 19h2v3h-2zm0-17h2v3h-2zm-9 9h3v2H2zm17 0h3v2h-3zM5.637 19.778l-1.414-1.414 2.121-2.121 1.414 1.414zM16.242 6.344l2.122-2.122 1.414 1.414-2.122 2.122zM6.344 7.759 4.223 5.637l1.415-1.414 2.12 2.122zm13.434 10.605-1.414 1.414-2.122-2.122 1.414-1.414z"></path>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24" class="dark" height="1em" width="1em">
<path d="M12 11.807A9.002 9.002 0 0 1 10.049 2a9.942 9.942 0 0 0-5.12 2.735c-3.905 3.905-3.905 10.237 0 14.142 3.906 3.906 10.237 3.905 14.143 0a9.946 9.946 0 0 0 2.735-5.119A9.003 9.003 0 0 1 12 11.807z"></path>
</svg>
</button><script>
const LOCAL_NANE = '_dark_mode_theme_'
const rememberedValue = localStorage.getItem(LOCAL_NANE);
if (rememberedValue && ['light', 'dark'].includes(rememberedValue)) {
document.documentElement.setAttribute('data-color-mode', rememberedValue);
}
const button = document.querySelector('#darkMode');
button.onclick = () => {
const theme = document.documentElement.dataset.colorMode;
const mode = theme === 'light' ? 'dark' : 'light';
document.documentElement.setAttribute('data-color-mode', mode);
localStorage.setItem(LOCAL_NANE, mode);
}
</script><a href="https://github.com/jaywcjlove/reference" class="" target="__blank"><svg viewBox="0 0 16 16" fill="currentColor" height="1em" width="1em"><path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8z"></path></svg></a></div></div></nav><div class="wrap max-container"><header class="wrap-header h1wrap"><h1 id="html-备忘清单"><svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 512 512" height="1em" width="1em">
<path d="m64 32 34.94 403.21L255.77 480 413 435.15 448 32Zm308 132H188l4 51h176l-13.51 151.39L256 394.48l-98.68-28-6.78-77.48h48.26l3.42 39.29L256 343.07l53.42-14.92L315 264H148l-12.59-149.59H376.2Z"></path>
</svg>
<a aria-hidden="true" tabindex="-1" href="#html-备忘清单"><span class="icon icon-link"></span></a>HTML 备忘清单</h1><div class="wrap-body">
<p>此 HTML 快速参考备忘单以可读布局列出了常见的 <code>HTML</code> 和 <code>HTML5</code> 标记。</p>
</div></header><div class="h1wrap-body"><div class="wrap"><div class="wrap-header h2wrap"><h2 id="入门"><a aria-hidden="true" tabindex="-1" href="#入门"><span class="icon icon-link"></span></a>入门</h2><div class="wrap-body">
</div></div><div class="h2wrap-body"><div class="wrap col-span-2 row-span-2"><div class="wrap-header h3wrap"><h3 id="hellohtml"><a aria-hidden="true" tabindex="-1" href="#hellohtml"><span class="icon icon-link"></span></a>hello.html</h3><div class="wrap-body">
<!--rehype:wrap-class=col-span-2 row-span-2-->
<pre class="language-html"><code class="language-html code-highlight"><span class="code-line"><span class="token doctype"><span class="token punctuation">&#x3C;!</span><span class="token doctype-tag">DOCTYPE</span> <span class="token name">html</span><span class="token punctuation">></span></span>
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>html</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>en<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>head</span><span class="token punctuation">></span></span>
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>meta</span> <span class="token attr-name">charset</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>UTF-8<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>meta</span> <span class="token attr-name">http-equiv</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>X-UA-Compatible<span class="token punctuation">"</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>IE=edge<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>meta</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>viewport<span class="token punctuation">"</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>width=device-width, initial-scale=1.0<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>title</span><span class="token punctuation">></span></span>HTML5 Boilerplate<span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>title</span><span class="token punctuation">></span></span>
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>head</span><span class="token punctuation">></span></span>
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>body</span><span class="token punctuation">></span></span>
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>h1</span><span class="token punctuation">></span></span>Hello world, hello 备忘清单!<span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>h1</span><span class="token punctuation">></span></span>
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>body</span><span class="token punctuation">></span></span>
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>html</span><span class="token punctuation">></span></span>
</span></code></pre>
<p>或者在 <a href="https://jsfiddle.net/Randy8080/1e4wz20b/">jsfiddle</a></p>
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="注释-comment"><a aria-hidden="true" tabindex="-1" href="#注释-comment"><span class="icon icon-link"></span></a>注释 Comment</h3><div class="wrap-body">
<pre class="language-html"><code class="language-html code-highlight"><span class="code-line"><span class="token comment">&#x3C;!-- 这是代码注释 --></span>
</span><span class="code-line">
</span><span class="code-line"><span class="token comment">&#x3C;!--
</span></span><span class="code-line"><span class="token comment"> 或者你可以注释掉一个
</span></span><span class="code-line"><span class="token comment"> 大量的行。
</span></span><span class="code-line"><span class="token comment">--></span>
</span></code></pre>
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="段落-paragraph"><a aria-hidden="true" tabindex="-1" href="#段落-paragraph"><span class="icon icon-link"></span></a>段落 Paragraph</h3><div class="wrap-body">
<pre class="language-html"><code class="language-html code-highlight"><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>p</span><span class="token punctuation">></span></span>我来自快速参考<span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>p</span><span class="token punctuation">></span></span>
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>p</span><span class="token punctuation">></span></span>分享快速参考备忘单。<span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>p</span><span class="token punctuation">></span></span>
</span></code></pre>
<p>请参阅：<a href="https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/p">段落元素</a></p>
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="html-链接"><a aria-hidden="true" tabindex="-1" href="#html-链接"><span class="icon icon-link"></span></a>HTML 链接</h3><div class="wrap-body">
<pre class="language-html"><code class="language-html code-highlight"><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://github.com/jaywcjlove/reference<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
</span><span class="code-line"> Github
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>a</span><span class="token punctuation">></span></span>
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>mailto:jack@abc.com<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>邮箱<span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>a</span><span class="token punctuation">></span></span>
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>tel:+123456789<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>电话<span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>a</span><span class="token punctuation">></span></span>
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>sms:+123456789&#x26;body=ha%20ha<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
</span><span class="code-line"> 短信
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>a</span><span class="token punctuation">></span></span>
</span></code></pre>
<hr>
<table><thead><tr><th align="left">:-</th><th align="left">:-</th></tr></thead><tbody><tr><td align="left"><code>href</code></td><td align="left">超链接指向的 URL</td></tr><tr><td align="left"><code>rel</code></td><td align="left">链接 URL 的关系</td></tr><tr><td align="left"><code>target</code></td><td align="left">链接目标位置：<code>_self</code>/<code>_blank</code>/<code>_top</code>/<code>_parent</code></td></tr></tbody></table>
<p>请参阅：<a href="https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/a#attributes">&#x3C;a> 属性</a></p>
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="image-标签"><a aria-hidden="true" tabindex="-1" href="#image-标签"><span class="icon icon-link"></span></a>Image 标签</h3><div class="wrap-body">
<pre class="wrap-text "><code class="language-html code-highlight"><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>img</span> <span class="token attr-name">loading</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>lazy<span class="token punctuation">"</span></span>
</span></span><span class="code-line"><span class="token tag"> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://xxx.png<span class="token punctuation">"</span></span>
</span></span><span class="code-line"><span class="token tag"> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>在此处描述图像<span class="token punctuation">"</span></span>
</span></span><span class="code-line"><span class="token tag"> <span class="token attr-name">width</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>400<span class="token punctuation">"</span></span> <span class="token attr-name">height</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>400<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
</span></code></pre>
<!--rehype:className=wrap-text -->
<hr>
<table><thead><tr><th></th><th></th><th></th></tr></thead><tbody><tr><td></td><td><code>src</code> <em>(URL/路径)</em></td><td>必填，图片位置</td></tr><tr><td></td><td><code>alt</code></td><td>描述图像</td></tr><tr><td></td><td><code>width</code></td><td>图像宽度</td></tr><tr><td></td><td><code>height</code></td><td>图像高度</td></tr><tr><td></td><td><code>loading</code></td><td>浏览器应该如何加载</td></tr></tbody></table>
<p>请参阅：<a href="https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/img">图像嵌入元素</a></p>
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="文本格式标签"><a aria-hidden="true" tabindex="-1" href="#文本格式标签"><span class="icon icon-link"></span></a>文本格式标签</h3><div class="wrap-body">
<pre class="language-html"><code class="language-html code-highlight"><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>b</span><span class="token punctuation">></span></span>粗体文字<span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>b</span><span class="token punctuation">></span></span>
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>strong</span><span class="token punctuation">></span></span>这段文字很重要<span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>strong</span><span class="token punctuation">></span></span>
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>i</span><span class="token punctuation">></span></span>斜体文本<span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>i</span><span class="token punctuation">></span></span>
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>em</span><span class="token punctuation">></span></span>这段文字被强调<span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>em</span><span class="token punctuation">></span></span>
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>u</span><span class="token punctuation">></span></span>下划线文本<span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>u</span><span class="token punctuation">></span></span>
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>pre</span><span class="token punctuation">></span></span>预格式化文本<span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>pre</span><span class="token punctuation">></span></span>
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>code</span><span class="token punctuation">></span></span>源代码<span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>code</span><span class="token punctuation">></span></span>
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>del</span><span class="token punctuation">></span></span>删除的文字<span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>del</span><span class="token punctuation">></span></span>
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>mark</span><span class="token punctuation">></span></span>突出显示的文本 (HTML5)<span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>mark</span><span class="token punctuation">></span></span>
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>ins</span><span class="token punctuation">></span></span>插入的文本<span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>ins</span><span class="token punctuation">></span></span>
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>sup</span><span class="token punctuation">></span></span>使文本上标<span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>sup</span><span class="token punctuation">></span></span>
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>sub</span><span class="token punctuation">></span></span>使文本下标<span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>sub</span><span class="token punctuation">></span></span>
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>small</span><span class="token punctuation">></span></span>使文本变小<span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>small</span><span class="token punctuation">></span></span>
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>pre</span><span class="token punctuation">></span></span>预格式化文本<span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>pre</span><span class="token punctuation">></span></span>
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>kbd</span><span class="token punctuation">></span></span>Ctrl<span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>kbd</span><span class="token punctuation">></span></span>
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>blockquote</span><span class="token punctuation">></span></span>文本块引用<span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>blockquote</span><span class="token punctuation">></span></span>
</span></code></pre>
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="标题"><a aria-hidden="true" tabindex="-1" href="#标题"><span class="icon icon-link"></span></a>标题</h3><div class="wrap-body">
<pre class="language-html"><code class="language-html code-highlight"><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>h1</span><span class="token punctuation">></span></span> 这是标题 1 <span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>h1</span><span class="token punctuation">></span></span>
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>h2</span><span class="token punctuation">></span></span> 这是标题 2 <span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>h2</span><span class="token punctuation">></span></span>
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>h3</span><span class="token punctuation">></span></span> 这是标题 3 <span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>h3</span><span class="token punctuation">></span></span>
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>h4</span><span class="token punctuation">></span></span> 这是标题 4 <span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>h4</span><span class="token punctuation">></span></span>
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>h5</span><span class="token punctuation">></span></span> 这是标题 5 <span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>h5</span><span class="token punctuation">></span></span>
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>h6</span><span class="token punctuation">></span></span> 这是标题 6 <span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>h6</span><span class="token punctuation">></span></span>
</span></code></pre>
<p>您的页面上应该只有一个 <code>h1</code></p>
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="section-divisions"><a aria-hidden="true" tabindex="-1" href="#section-divisions"><span class="icon icon-link"></span></a>Section Divisions</h3><div class="wrap-body">
<table><thead><tr><th align="left">:-</th><th align="left">:-</th></tr></thead><tbody><tr><td align="left"><code>&#x3C;div>&#x3C;/div></code></td><td align="left">页面内容的划分或部分</td></tr><tr><td align="left"><code>&#x3C;span>&#x3C;/span></code></td><td align="left">其他内容中的文本部分</td></tr><tr><td align="left"><code>&#x3C;p>&#x3C;/p></code></td><td align="left">文本段落</td></tr><tr><td align="left"><code>&#x3C;br></code></td><td align="left">换行</td></tr><tr><td align="left"><code>&#x3C;hr></code></td><td align="left">水平分割线</td></tr></tbody></table>
<p>这些标签用于将页面划分为多个部分</p>
</div></div></div><div class="wrap row-span-2"><div class="wrap-header h3wrap"><h3 id="内部框架"><a aria-hidden="true" tabindex="-1" href="#内部框架"><span class="icon icon-link"></span></a>内部框架</h3><div class="wrap-body">
<!--rehype:wrap-class=row-span-2-->
<pre class="wrap-text "><code class="language-html code-highlight"><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>iframe</span>
</span></span><span class="code-line"><span class="token tag"> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>inlineFrameExample<span class="token punctuation">"</span></span>
</span></span><span class="code-line"><span class="token tag"> <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Inline Frame Example<span class="token punctuation">"</span></span>
</span></span><span class="code-line"><span class="token tag"> <span class="token attr-name">width</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>100%<span class="token punctuation">"</span></span>
</span></span><span class="code-line"><span class="token tag"> <span class="token attr-name">height</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>200<span class="token punctuation">"</span></span>
</span></span><span class="code-line"><span class="token tag"> <span class="token attr-name">frameborder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>0<span class="token punctuation">"</span></span>
</span></span><span class="code-line"><span class="token tag"> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://www.openstreetmap.org/export/embed.html?bbox=-0.004017949104309083%2C51.47612752641776%2C0.00030577182769775396%2C51.478569861898606&#x26;layer=mapnik<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>iframe</span><span class="token punctuation">></span></span>
</span></code></pre>
<!--rehype:className=wrap-text -->
</div></div><div class="h3wrap-body"><div class="wrap"><div class="wrap-header h4wrap"><h4 id="-预览"><a aria-hidden="true" tabindex="-1" href="#-预览"><span class="icon icon-link"></span></a>↓ 预览</h4><div class="wrap-body">
<iframe id="inlineFrameExample" title="Inline Frame Example" width="100%" height="200" frameborder="0" src="https://www.openstreetmap.org/export/embed.html?bbox=-0.004017949104309083%2C51.47612752641776%2C0.00030577182769775396%2C51.478569861898606&#x26;layer=mapnik">
</iframe>
<p>请参阅：<a href="https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/iframe">内联框架元素</a></p>
</div></div></div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="html-中的-javascript"><a aria-hidden="true" tabindex="-1" href="#html-中的-javascript"><span class="icon icon-link"></span></a>HTML 中的 JavaScript</h3><div class="wrap-body">
<pre class="language-html"><code class="language-html code-highlight"><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>text/javascript<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript">
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"> <span class="token keyword">let</span> text <span class="token operator">=</span> <span class="token string">"Hello 快速参考"</span><span class="token punctuation">;</span>
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"> <span class="token function">alert</span><span class="token punctuation">(</span>text<span class="token punctuation">)</span><span class="token punctuation">;</span>
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>script</span><span class="token punctuation">></span></span>
</span></code></pre>
</div></div><div class="h3wrap-body"><div class="wrap"><div class="wrap-header h4wrap"><h4 id="外部-javascript"><a aria-hidden="true" tabindex="-1" href="#外部-javascript"><span class="icon icon-link"></span></a>外部 JavaScript</h4><div class="wrap-body">
<pre class="language-html"><code class="language-html code-highlight"><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>body</span><span class="token punctuation">></span></span>
</span><span class="code-line"> ...
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>script</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>app.js<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>script</span><span class="token punctuation">></span></span>
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>body</span><span class="token punctuation">></span></span>
</span></code></pre>
</div></div></div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="html-中的-css"><a aria-hidden="true" tabindex="-1" href="#html-中的-css"><span class="icon icon-link"></span></a>HTML 中的 CSS</h3><div class="wrap-body">
<pre class="language-html"><code class="language-html code-highlight"><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>style</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>text/css<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token style"><span class="token language-css">
</span></span></span><span class="code-line"><span class="token style"><span class="token language-css"> <span class="token selector">h1</span> <span class="token punctuation">{</span>
</span></span></span><span class="code-line"><span class="token style"><span class="token language-css"> <span class="token property">color</span><span class="token punctuation">:</span> <span class="token color">purple</span><span class="token punctuation">;</span>
</span></span></span><span class="code-line"><span class="token style"><span class="token language-css"> <span class="token punctuation">}</span>
</span></span></span><span class="code-line"><span class="token style"><span class="token language-css"></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>style</span><span class="token punctuation">></span></span>
</span></code></pre>
</div></div><div class="h3wrap-body"><div class="wrap"><div class="wrap-header h4wrap"><h4 id="外部样式表"><a aria-hidden="true" tabindex="-1" href="#外部样式表"><span class="icon icon-link"></span></a>外部样式表</h4><div class="wrap-body">
<pre class="language-html"><code class="language-html code-highlight"><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>head</span><span class="token punctuation">></span></span>
</span><span class="code-line"> ...
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>link</span> <span class="token attr-name">rel</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>stylesheet<span class="token punctuation">"</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>style.css<span class="token punctuation">"</span></span><span class="token punctuation">/></span></span>
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>head</span><span class="token punctuation">></span></span>
</span></code></pre>
</div></div></div></div></div></div></div><div class="wrap"><div class="wrap-header h2wrap"><h2 id="html5-标签"><a aria-hidden="true" tabindex="-1" href="#html5-标签"><span class="icon icon-link"></span></a>HTML5 标签</h2><div class="wrap-body">
</div></div><div class="h2wrap-body"><div class="wrap"><div class="wrap-header h3wrap"><h3 id="页面"><a aria-hidden="true" tabindex="-1" href="#页面"><span class="icon icon-link"></span></a>页面</h3><div class="wrap-body">
<pre class="language-html"><code class="language-html code-highlight"><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>body</span><span class="token punctuation">></span></span>
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>header</span><span class="token punctuation">></span></span>
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>nav</span><span class="token punctuation">></span></span>...<span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>nav</span><span class="token punctuation">></span></span>
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>header</span><span class="token punctuation">></span></span>
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>main</span><span class="token punctuation">></span></span>
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>h1</span><span class="token punctuation">></span></span>快速参考<span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>h1</span><span class="token punctuation">></span></span>
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>main</span><span class="token punctuation">></span></span>
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>footer</span><span class="token punctuation">></span></span>
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>p</span><span class="token punctuation">></span></span>©2023 快速参考<span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>p</span><span class="token punctuation">></span></span>
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>footer</span><span class="token punctuation">></span></span>
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>body</span><span class="token punctuation">></span></span>
</span></code></pre>
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="标题导航"><a aria-hidden="true" tabindex="-1" href="#标题导航"><span class="icon icon-link"></span></a>标题导航</h3><div class="wrap-body">
<pre class="language-html"><code class="language-html code-highlight"><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>header</span><span class="token punctuation">></span></span>
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>nav</span><span class="token punctuation">></span></span>
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>ul</span><span class="token punctuation">></span></span>
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>li</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>#<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>编辑页面<span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>a</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>li</span><span class="token punctuation">></span></span>
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>li</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>#<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Twitter<span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>a</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>li</span><span class="token punctuation">></span></span>
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>li</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>#<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Facebook<span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>a</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>li</span><span class="token punctuation">></span></span>
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>ul</span><span class="token punctuation">></span></span>
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>nav</span><span class="token punctuation">></span></span>
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>header</span><span class="token punctuation">></span></span>
</span></code></pre>
</div></div></div><div class="wrap row-span-4"><div class="wrap-header h3wrap"><h3 id="html5-tags"><a aria-hidden="true" tabindex="-1" href="#html5-tags"><span class="icon icon-link"></span></a>HTML5 Tags</h3><div class="wrap-body">
<!--rehype:wrap-class=row-span-4-->
<table><thead><tr><th align="left">:-</th><th align="left">:-</th></tr></thead><tbody><tr><td align="left"><a href="https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/article">article</a></td><td align="left">独立的内容</td></tr><tr><td align="left"><a href="https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/aside">aside</a></td><td align="left">次要内容</td></tr><tr><td align="left"><a href="https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/audio">audio</a></td><td align="left">嵌入声音或音频流</td></tr><tr><td align="left"><a href="https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/bdi">bdi</a></td><td align="left">双向隔离元件</td></tr><tr><td align="left"><a href="https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/canvas">canvas</a></td><td align="left">通过JavaScript绘制图形</td></tr><tr><td align="left"><a href="https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/data">data</a></td><td align="left">机器可读内容</td></tr><tr><td align="left"><a href="https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/datalist">datalist</a></td><td align="left">一组预定义选项</td></tr><tr><td align="left"><a href="https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/details">details</a></td><td align="left">其他信息</td></tr><tr><td align="left"><a href="https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/dialog">dialog</a></td><td align="left">对话框或子窗口</td></tr><tr><td align="left"><a href="https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/embed">embed</a></td><td align="left">嵌入外部应用程序</td></tr><tr><td align="left"><a href="https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/figcaption">figcaption</a></td><td align="left">图形的标题或图例</td></tr><tr><td align="left"><a href="https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/figure">figure</a></td><td align="left">插图</td></tr><tr><td align="left"><a href="https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/footer">footer</a></td><td align="left">页脚或最不重要的</td></tr><tr><td align="left"><a href="https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/header">header</a></td><td align="left">刊头或重要信息</td></tr><tr><td align="left"><a href="https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/main">main</a></td><td align="left">文件的主要内容</td></tr><tr><td align="left"><a href="https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/mark">mark</a></td><td align="left">突出显示的文本</td></tr><tr><td align="left"><a href="https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/meter">meter</a></td><td align="left">已知范围内的标量值</td></tr><tr><td align="left"><a href="https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/nav">nav</a></td><td align="left">导航链接的一部分</td></tr><tr><td align="left"><a href="https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/output">output</a></td><td align="left">计算的结果</td></tr><tr><td align="left"><a href="https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/picture">picture</a></td><td align="left">用于多个图像源的容器</td></tr><tr><td align="left"><a href="https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/progress">progress</a></td><td align="left">任务的完成进度</td></tr><tr><td align="left"><a href="https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/rp">rp</a></td><td align="left">提供回退括号</td></tr><tr><td align="left"><a href="https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/rt">rt</a></td><td align="left">定义字符的发音</td></tr><tr><td align="left"><a href="https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/ruby">ruby</a></td><td align="left">表示ruby注释</td></tr><tr><td align="left"><a href="https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/section">section</a></td><td align="left">一系列相关内容中的组</td></tr><tr><td align="left"><a href="https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/source">source</a></td><td align="left">媒体元素的资源</td></tr><tr><td align="left"><a href="https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/summary">summary</a></td><td align="left">元素的摘要</td></tr><tr><td align="left"><a href="https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/template">template</a></td><td align="left">定义HTML片段</td></tr><tr><td align="left"><a href="https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/time">time</a></td><td align="left">时间或日期</td></tr><tr><td align="left"><a href="https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/track">track</a></td><td align="left">媒体元素的字幕信息</td></tr><tr><td align="left"><a href="https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/video">video</a></td><td align="left">嵌入视频</td></tr><tr><td align="left"><a href="https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/wbr">wbr</a></td><td align="left">换行机会</td></tr></tbody></table>
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="html5-video"><a aria-hidden="true" tabindex="-1" href="#html5-video"><span class="icon icon-link"></span></a>HTML5 Video</h3><div class="wrap-body">
<pre class="wrap-text "><code class="language-html code-highlight"><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>video</span> <span class="token attr-name">controls</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span> <span class="token attr-name">width</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>100%<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>source</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4<span class="token punctuation">"</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>video/mp4<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
</span><span class="code-line"> 很抱歉，您的浏览器不支持嵌入式视频。
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>video</span><span class="token punctuation">></span></span>
</span></code></pre>
<!--rehype:className=wrap-text -->
</div></div><div class="h3wrap-body"><div class="wrap"><div class="wrap-header h4wrap"><h4 id="-预览-1"><a aria-hidden="true" tabindex="-1" href="#-预览-1"><span class="icon icon-link"></span></a>↓ 预览</h4><div class="wrap-body">
<video controls width="100%">
<source src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4" type="video/mp4">
很抱歉，您的浏览器不支持嵌入式视频。
</video>
</div></div></div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="html5-audio"><a aria-hidden="true" tabindex="-1" href="#html5-audio"><span class="icon icon-link"></span></a>HTML5 Audio</h3><div class="wrap-body">
<pre class="wrap-text "><code class="language-html code-highlight"><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>audio</span>
</span></span><span class="code-line"><span class="token tag"> <span class="token attr-name">controls</span>
</span></span><span class="code-line"><span class="token tag"> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://interactive-examples.mdn.mozilla.net/media/cc0-audio/t-rex-roar.mp3<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
</span><span class="code-line"> 您的浏览器不支持音频元素。
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>audio</span><span class="token punctuation">></span></span>
</span></code></pre>
<!--rehype:className=wrap-text -->
</div></div><div class="h3wrap-body"><div class="wrap"><div class="wrap-header h4wrap"><h4 id="-预览-2"><a aria-hidden="true" tabindex="-1" href="#-预览-2"><span class="icon icon-link"></span></a>↓ 预览</h4><div class="wrap-body">
<p><audio controls src="https://interactive-examples.mdn.mozilla.net/media/cc0-audio/t-rex-roar.mp3">
您的浏览器不支持音频元素。
</audio></p>
</div></div></div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="html5-ruby"><a aria-hidden="true" tabindex="-1" href="#html5-ruby"><span class="icon icon-link"></span></a>HTML5 Ruby</h3><div class="wrap-body">
<pre class="wrap-text "><code class="language-html code-highlight"><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>ruby</span><span class="token punctuation">></span></span>
</span><span class="code-line"> 汉 <span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>rp</span><span class="token punctuation">></span></span>(<span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>rp</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>rt</span><span class="token punctuation">></span></span>hàn<span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>rt</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>rp</span><span class="token punctuation">></span></span>)<span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>rp</span><span class="token punctuation">></span></span>
</span><span class="code-line"> 字 <span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>rp</span><span class="token punctuation">></span></span>(<span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>rp</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>rt</span><span class="token punctuation">></span></span>zì<span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>rt</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>rp</span><span class="token punctuation">></span></span>)<span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>rp</span><span class="token punctuation">></span></span>
</span><span class="code-line"> 拼 <span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>rp</span><span class="token punctuation">></span></span>(<span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>rp</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>rt</span><span class="token punctuation">></span></span>pīn<span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>rt</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>rp</span><span class="token punctuation">></span></span>)<span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>rp</span><span class="token punctuation">></span></span>
</span><span class="code-line"> 音 <span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>rp</span><span class="token punctuation">></span></span>(<span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>rp</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>rt</span><span class="token punctuation">></span></span>yīn<span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>rt</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>rp</span><span class="token punctuation">></span></span>)<span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>rp</span><span class="token punctuation">></span></span>
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>ruby</span><span class="token punctuation">></span></span>
</span></code></pre>
<!--rehype:className=wrap-text -->
</div></div><div class="h3wrap-body"><div class="wrap" style="text-align: center;"><div class="wrap-header h4wrap"><h4 id="-预览-3"><a aria-hidden="true" tabindex="-1" href="#-预览-3"><span class="icon icon-link"></span></a>↓ 预览</h4><div class="wrap-body">
<!--rehype:wrap-style=text-align: center;-->
<ruby style="font-size: 4rem;">
汉 <rp>(</rp><rt>hàn</rt><rp>)</rp>
字 <rp>(</rp><rt>zì</rt><rp>)</rp>
拼 <rp>(</rp><rt>pīn</rt><rp>)</rp>
音 <rp>(</rp><rt>yīn</rt><rp>)</rp>
</ruby>
</div></div></div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="html5-kdi"><a aria-hidden="true" tabindex="-1" href="#html5-kdi"><span class="icon icon-link"></span></a>HTML5 kdi</h3><div class="wrap-body">
<pre class="language-html"><code class="language-html code-highlight"><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>ul</span><span class="token punctuation">></span></span>
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>li</span><span class="token punctuation">></span></span>User <span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>bdi</span><span class="token punctuation">></span></span>hrefs<span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>bdi</span><span class="token punctuation">></span></span>: 60 points<span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>li</span><span class="token punctuation">></span></span>
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>li</span><span class="token punctuation">></span></span>User <span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>bdi</span><span class="token punctuation">></span></span>jdoe<span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>bdi</span><span class="token punctuation">></span></span>: 80 points<span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>li</span><span class="token punctuation">></span></span>
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>li</span><span class="token punctuation">></span></span>User <span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>bdi</span><span class="token punctuation">></span></span>إيان<span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>bdi</span><span class="token punctuation">></span></span>: 90 points<span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>li</span><span class="token punctuation">></span></span>
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>ul</span><span class="token punctuation">></span></span>
</span></code></pre>
</div></div><div class="h3wrap-body"><div class="wrap"><div class="wrap-header h4wrap"><h4 id="-预览-4"><a aria-hidden="true" tabindex="-1" href="#-预览-4"><span class="icon icon-link"></span></a>↓ 预览</h4><div class="wrap-body">
<ul>
<li>User <bdi>hrefs</bdi>: 60 points</li>
<li>User <bdi>jdoe</bdi>: 80 points</li>
<li>User <bdi>إيان</bdi>: 90 points</li>
</ul>
</div></div></div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="html5-progress"><a aria-hidden="true" tabindex="-1" href="#html5-progress"><span class="icon icon-link"></span></a>HTML5 progress</h3><div class="wrap-body">
<pre class="language-html"><code class="language-html code-highlight"><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>progress</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>50<span class="token punctuation">"</span></span> <span class="token attr-name">max</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>100<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>progress</span><span class="token punctuation">></span></span>
</span></code></pre>
<p><progress value="50" max="100" style="width: 100%"></progress></p>
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="html5-mark"><a aria-hidden="true" tabindex="-1" href="#html5-mark"><span class="icon icon-link"></span></a>HTML5 mark</h3><div class="wrap-body">
<pre class="language-html"><code class="language-html code-highlight"><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>p</span><span class="token punctuation">></span></span>我爱<span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>mark</span><span class="token punctuation">></span></span>备忘清单<span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>mark</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>p</span><span class="token punctuation">></span></span>
</span></code></pre>
<p>我爱<mark>备忘清单</mark></p>
</div></div></div></div></div><div class="wrap"><div class="wrap-header h2wrap"><h2 id="html-表格"><a aria-hidden="true" tabindex="-1" href="#html-表格"><span class="icon icon-link"></span></a>HTML 表格</h2><div class="wrap-body">
</div></div><div class="h2wrap-body"><div class="wrap row-span-2"><div class="wrap-header h3wrap"><h3 id="table-示例"><a aria-hidden="true" tabindex="-1" href="#table-示例"><span class="icon icon-link"></span></a>Table 示例</h3><div class="wrap-body">
<!--rehype:wrap-class=row-span-2-->
<pre class="language-html"><code class="language-html code-highlight"><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>table</span><span class="token punctuation">></span></span>
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>thead</span><span class="token punctuation">></span></span>
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>tr</span><span class="token punctuation">></span></span>
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>td</span><span class="token punctuation">></span></span>name<span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>td</span><span class="token punctuation">></span></span>
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>td</span><span class="token punctuation">></span></span>age<span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>td</span><span class="token punctuation">></span></span>
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>tr</span><span class="token punctuation">></span></span>
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>thead</span><span class="token punctuation">></span></span>
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>tbody</span><span class="token punctuation">></span></span>
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>tr</span><span class="token punctuation">></span></span>
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>td</span><span class="token punctuation">></span></span>Roberta<span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>td</span><span class="token punctuation">></span></span>
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>td</span><span class="token punctuation">></span></span>39<span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>td</span><span class="token punctuation">></span></span>
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>tr</span><span class="token punctuation">></span></span>
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>tr</span><span class="token punctuation">></span></span>
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>td</span><span class="token punctuation">></span></span>Oliver<span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>td</span><span class="token punctuation">></span></span>
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>td</span><span class="token punctuation">></span></span>25<span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>td</span><span class="token punctuation">></span></span>
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>tr</span><span class="token punctuation">></span></span>
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>tbody</span><span class="token punctuation">></span></span>
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>table</span><span class="token punctuation">></span></span>
</span></code></pre>
</div></div></div><div class="wrap row-span-2"><div class="wrap-header h3wrap"><h3 id="html表格标签"><a aria-hidden="true" tabindex="-1" href="#html表格标签"><span class="icon icon-link"></span></a>HTML表格标签</h3><div class="wrap-body">
<!--rehype:wrap-class=row-span-2-->
<table><thead><tr><th align="left">标签</th><th align="left">说明</th></tr></thead><tbody><tr><td align="left"><a href="https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/table">&#x3C;table></a></td><td align="left">定义表格</td></tr><tr><td align="left"><a href="https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/th">&#x3C;th></a></td><td align="left">定义表格中的标题单元格</td></tr><tr><td align="left"><a href="https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/tr">&#x3C;tr></a></td><td align="left">定义表中的行</td></tr><tr><td align="left"><a href="https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/td">&#x3C;td></a></td><td align="left">定义表格中的单元格</td></tr><tr><td align="left"><a href="https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/caption">&#x3C;caption></a></td><td align="left">定义表格标题</td></tr><tr><td align="left"><a href="https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/colgroup">&#x3C;colgroup></a></td><td align="left">定义一组列</td></tr><tr><td align="left"><a href="https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/col">&#x3C;col></a></td><td align="left">定义表中的列</td></tr><tr><td align="left"><a href="https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/thead">&#x3C;thead></a></td><td align="left">对标题内容进行分组</td></tr><tr><td align="left"><a href="https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/tbody">&#x3C;tbody></a></td><td align="left">将正文内容分组</td></tr><tr><td align="left"><a href="https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/tfoot">&#x3C;tfoot></a></td><td align="left">对页脚内容进行分组</td></tr></tbody></table>
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="td-属性"><a aria-hidden="true" tabindex="-1" href="#td-属性"><span class="icon icon-link"></span></a>&#x3C;td> 属性</h3><div class="wrap-body">
<table><thead><tr><th align="left">属性</th><th align="left">说明</th></tr></thead><tbody><tr><td align="left"><code>colspan</code></td><td align="left">单元格应跨越的列数</td></tr><tr><td align="left"><code>headers</code></td><td align="left">单元格与一个或多个标题单元格相关</td></tr><tr><td align="left"><code>rowspan</code></td><td align="left">单元格应跨越的行数</td></tr></tbody></table>
<p>请参阅：<a href="https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/td#attributes">td#属性</a></p>
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="th-属性"><a aria-hidden="true" tabindex="-1" href="#th-属性"><span class="icon icon-link"></span></a>&#x3C;th> 属性</h3><div class="wrap-body">
<table><thead><tr><th align="left">属性</th><th align="left">说明</th></tr></thead><tbody><tr><td align="left"><code>colspan</code></td><td align="left">单元格应跨越的列数</td></tr><tr><td align="left"><code>headers</code></td><td align="left">单元格与一个或多个标题单元格相关</td></tr><tr><td align="left"><code>rowspan</code></td><td align="left">单元格应跨越的行数</td></tr><tr><td align="left"><code>abbr</code></td><td align="left">单元格内容的描述</td></tr><tr><td align="left"><a href="https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/th#attr-scope">scope</a></td><td align="left">表头元素(在&#x3C;th>中定义)关联的单元格</td></tr></tbody></table>
<p>请参阅：<a href="https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/th#attributes">th#属性</a></p>
</div></div></div></div></div><div class="wrap"><div class="wrap-header h2wrap"><h2 id="html-列表"><a aria-hidden="true" tabindex="-1" href="#html-列表"><span class="icon icon-link"></span></a>HTML 列表</h2><div class="wrap-body">
</div></div><div class="h2wrap-body"><div class="wrap"><div class="wrap-header h3wrap"><h3 id="无序列表"><a aria-hidden="true" tabindex="-1" href="#无序列表"><span class="icon icon-link"></span></a>无序列表</h3><div class="wrap-body">
<pre class="language-html"><code class="language-html code-highlight"><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>ul</span><span class="token punctuation">></span></span>
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>li</span><span class="token punctuation">></span></span>I'm an item<span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>li</span><span class="token punctuation">></span></span>
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>li</span><span class="token punctuation">></span></span>I'm another item<span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>li</span><span class="token punctuation">></span></span>
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>li</span><span class="token punctuation">></span></span>I'm another item<span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>li</span><span class="token punctuation">></span></span>
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>ul</span><span class="token punctuation">></span></span>
</span></code></pre>
<p>请参阅：<a href="https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/ul">无序列表元素</a></p>
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="有序列表"><a aria-hidden="true" tabindex="-1" href="#有序列表"><span class="icon icon-link"></span></a>有序列表</h3><div class="wrap-body">
<pre class="language-html"><code class="language-html code-highlight"><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>ol</span><span class="token punctuation">></span></span>
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>li</span><span class="token punctuation">></span></span>I'm the first item<span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>li</span><span class="token punctuation">></span></span>
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>li</span><span class="token punctuation">></span></span>I'm the second item<span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>li</span><span class="token punctuation">></span></span>
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>li</span><span class="token punctuation">></span></span>I'm the third item<span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>li</span><span class="token punctuation">></span></span>
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>ol</span><span class="token punctuation">></span></span>
</span></code></pre>
<p>请参阅：<a href="https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/ol">有序列表元素</a></p>
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="定义列表"><a aria-hidden="true" tabindex="-1" href="#定义列表"><span class="icon icon-link"></span></a>定义列表</h3><div class="wrap-body">
<pre class="language-html"><code class="language-html code-highlight"><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>dl</span><span class="token punctuation">></span></span>
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>dt</span><span class="token punctuation">></span></span>A Term<span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>dt</span><span class="token punctuation">></span></span>
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>dd</span><span class="token punctuation">></span></span>Definition of a term<span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>dd</span><span class="token punctuation">></span></span>
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>dt</span><span class="token punctuation">></span></span>Another Term<span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>dt</span><span class="token punctuation">></span></span>
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>dd</span><span class="token punctuation">></span></span>Definition of another term<span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>dd</span><span class="token punctuation">></span></span>
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>dl</span><span class="token punctuation">></span></span>
</span></code></pre>
<p>请参阅：<a href="https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/dl">描述列表元素</a></p>
</div></div></div></div></div><div class="wrap"><div class="wrap-header h2wrap"><h2 id="html-表单"><a aria-hidden="true" tabindex="-1" href="#html-表单"><span class="icon icon-link"></span></a>HTML 表单</h2><div class="wrap-body">
</div></div><div class="h2wrap-body"><div class="wrap row-span-2"><div class="wrap-header h3wrap"><h3 id="form-标签"><a aria-hidden="true" tabindex="-1" href="#form-标签"><span class="icon icon-link"></span></a>Form 标签</h3><div class="wrap-body">
<!--rehype:wrap-class=row-span-2-->
<pre class="language-html"><code class="language-html code-highlight"><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>form</span> <span class="token attr-name">method</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>POST<span class="token punctuation">"</span></span> <span class="token attr-name">action</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>api/login<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>label</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>mail<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>邮箱: <span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>label</span><span class="token punctuation">></span></span>
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>email<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>mail<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>mail<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>br</span><span class="token punctuation">/></span></span>
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>label</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>pw<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>密码:<span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>label</span><span class="token punctuation">></span></span>
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>password<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>pw<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>pw<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>br</span><span class="token punctuation">/></span></span>
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>submit<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>登录<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>br</span><span class="token punctuation">/></span></span>
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>checkbox<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>ck<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>ck<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>label</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>ck<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>记住我<span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>label</span><span class="token punctuation">></span></span>
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>form</span><span class="token punctuation">></span></span>
</span></code></pre>
</div></div><div class="h3wrap-body"><div class="wrap"><div class="wrap-header h4wrap"><h4 id="-预览-5"><a aria-hidden="true" tabindex="-1" href="#-预览-5"><span class="icon icon-link"></span></a>↓ 预览</h4><div class="wrap-body">
<form method="POST" action="api/login" style="padding: 20px;">
<label for="email">邮箱: </label>
<input type="email" id="email" name="email" class="border border-slate-400 mt-2">
<br>
<label for="pwd">密码:</label>
<input type="password" id="pwd" name="pwd" class="border border-slate-400 mt-2">
<br>
<input type="submit" value="登录" class="mt-2">
<br>
<input type="checkbox" id="ck" name="ck" class="mt-2">
<label for="ck">记住我</label>
</form>
<p>HTML <code>&#x3C;form></code> 元素用于收集信息并将其发送到外部源。</p>
</div></div></div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="form-属性"><a aria-hidden="true" tabindex="-1" href="#form-属性"><span class="icon icon-link"></span></a>Form 属性</h3><div class="wrap-body">
<table><thead><tr><th align="left">属性</th><th align="left">说明</th></tr></thead><tbody><tr><td align="left"><code>name</code></td><td align="left">脚本形式的名称</td></tr><tr><td align="left"><code>action</code></td><td align="left">表单脚本的URL</td></tr><tr><td align="left"><code>method</code></td><td align="left">HTTP方法，<code>POST</code>/<code>GET</code> <em>(默认)</em></td></tr><tr><td align="left"><code>enctype</code></td><td align="left">介质类型，请参见<a href="https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLFormElement/enctype">enctype</a></td></tr><tr><td align="left"><code>onsubmit</code></td><td align="left">提交表单时运行</td></tr><tr><td align="left"><code>onreset</code></td><td align="left">在窗体重置时运行</td></tr></tbody></table>
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="label-标签"><a aria-hidden="true" tabindex="-1" href="#label-标签"><span class="icon icon-link"></span></a>Label 标签</h3><div class="wrap-body">
<pre class="language-html"><code class="language-html code-highlight"><span class="code-line"><span class="token comment">&#x3C;!-- 嵌套标签 --></span>
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>label</span><span class="token punctuation">></span></span>Click me
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>text<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>user<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>name<span class="token punctuation">"</span></span><span class="token punctuation">/></span></span>
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>label</span><span class="token punctuation">></span></span>
</span></code></pre>
<hr>
<pre class="language-html"><code class="language-html code-highlight"><span class="code-line"><span class="token comment">&#x3C;!-- 'for' 属性 --></span>
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>label</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>user<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Click me<span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>label</span><span class="token punctuation">></span></span>
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>input</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>user<span class="token punctuation">"</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>text<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>name<span class="token punctuation">"</span></span><span class="token punctuation">/></span></span>
</span></code></pre>
<p><code>for</code>在标签中引用输入的<code>id</code>属性</p>
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="input-标签"><a aria-hidden="true" tabindex="-1" href="#input-标签"><span class="icon icon-link"></span></a>Input 标签</h3><div class="wrap-body">
<pre class="language-html"><code class="language-html code-highlight"><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>label</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Name<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Name:<span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>label</span><span class="token punctuation">></span></span>
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>text<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Name<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
</span></code></pre>
</div></div><div class="h3wrap-body"><div class="wrap"><div class="wrap-header h4wrap"><h4 id="-预览-6"><a aria-hidden="true" tabindex="-1" href="#-预览-6"><span class="icon icon-link"></span></a>↓ 预览</h4><div class="wrap-body">
<form style="padding: 20px;">
<label for="username">Username:</label>
<input type="text" name="username" id="username" class="border border-slate-400">
</form>
<p>请参阅：<a href="/html#html-input-tags">HTML输入标记</a></p>
</div></div></div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="textarea-标签"><a aria-hidden="true" tabindex="-1" href="#textarea-标签"><span class="icon icon-link"></span></a>Textarea 标签</h3><div class="wrap-body">
<pre class="wrap-text "><code class="language-html code-highlight"><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>textarea</span> <span class="token attr-name">rows</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>2<span class="token punctuation">"</span></span> <span class="token attr-name">cols</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>30<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>address<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>address<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>textarea</span><span class="token punctuation">></span></span>
</span></code></pre>
<!--rehype:className=wrap-text -->
</div></div><div class="h3wrap-body"><div class="wrap"><div class="wrap-header h4wrap"><h4 id="-预览-7"><a aria-hidden="true" tabindex="-1" href="#-预览-7"><span class="icon icon-link"></span></a>↓ 预览</h4><div class="wrap-body">
<form style="padding: 20px;">
<textarea rows="2" cols="30" name="address" id="address" class="border border-slate-400" style="width: 100%"></textarea>
</form>
<p>Textarea 是一个多行文本输入控件</p>
</div></div></div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="radio-buttons"><a aria-hidden="true" tabindex="-1" href="#radio-buttons"><span class="icon icon-link"></span></a>Radio Buttons</h3><div class="wrap-body">
<pre class="language-html"><code class="language-html code-highlight"><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>radio<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>gender<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>m<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>label</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>m<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Male<span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>label</span><span class="token punctuation">></span></span>
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>radio<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>gender<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>f<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>label</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>f<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Female<span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>label</span><span class="token punctuation">></span></span>
</span></code></pre>
</div></div><div class="h3wrap-body"><div class="wrap"><div class="wrap-header h4wrap"><h4 id="-预览-8"><a aria-hidden="true" tabindex="-1" href="#-预览-8"><span class="icon icon-link"></span></a>↓ 预览</h4><div class="wrap-body">
<form style="padding: 20px;">
<input type="radio" name="gender" id="m">
<label for="m">Male</label>
<input type="radio" name="gender" id="f">
<label for="f">Female</label>
</form>
<p>单选按钮用于让用户只选择一个</p>
</div></div></div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="checkboxes"><a aria-hidden="true" tabindex="-1" href="#checkboxes"><span class="icon icon-link"></span></a>Checkboxes</h3><div class="wrap-body">
<pre class="language-html"><code class="language-html code-highlight"><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>checkbox<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>s<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>soc<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>label</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>soc<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Soccer<span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>label</span><span class="token punctuation">></span></span>
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>checkbox<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>s<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>bas<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>label</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>bas<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Baseball<span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>label</span><span class="token punctuation">></span></span>
</span></code></pre>
</div></div><div class="h3wrap-body"><div class="wrap"><div class="wrap-header h4wrap"><h4 id="-预览-9"><a aria-hidden="true" tabindex="-1" href="#-预览-9"><span class="icon icon-link"></span></a>↓ 预览</h4><div class="wrap-body">
<form style="padding: 20px;">
<input type="checkbox" name="sports" id="soccer">
<label for="soccer">Soccer</label>
<input type="checkbox" name="sports" id="baseball">
<label for="baseball">Baseball</label>
</form>
<p>复选框允许用户选择一个或多个</p>
</div></div></div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="select-标签"><a aria-hidden="true" tabindex="-1" href="#select-标签"><span class="icon icon-link"></span></a>Select 标签</h3><div class="wrap-body">
<pre class="language-html"><code class="language-html code-highlight"><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>label</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>city<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>City:<span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>label</span><span class="token punctuation">></span></span>
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>select</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>city<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>city<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>1<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Sydney<span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>option</span><span class="token punctuation">></span></span>
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Melbourne<span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>option</span><span class="token punctuation">></span></span>
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>3<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Cromwell<span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>option</span><span class="token punctuation">></span></span>
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>select</span><span class="token punctuation">></span></span>
</span></code></pre>
</div></div><div class="h3wrap-body"><div class="wrap"><div class="wrap-header h4wrap"><h4 id="-预览-10"><a aria-hidden="true" tabindex="-1" href="#-预览-10"><span class="icon icon-link"></span></a>↓ 预览</h4><div class="wrap-body">
<form style="padding: 20px">
<label for="city">City:</label>
<select name="city" id="city" class="border border-slate-400">
<option value="1">Sydney</option>
<option value="2">Melbourne</option>
<option value="3">Cromwell</option>
</select>
</form>
<p>选择框是选项的下拉列表</p>
</div></div></div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="fieldset-标签"><a aria-hidden="true" tabindex="-1" href="#fieldset-标签"><span class="icon icon-link"></span></a>Fieldset 标签</h3><div class="wrap-body">
<pre class="language-html"><code class="language-html code-highlight"><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>fieldset</span><span class="token punctuation">></span></span>
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>legend</span><span class="token punctuation">></span></span>Your favorite monster<span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>legend</span><span class="token punctuation">></span></span>
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>radio<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>kra<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>m<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>label</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>kraken<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Kraken<span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>label</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>br</span><span class="token punctuation">/></span></span>
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>radio<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>sas<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>m<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>label</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>sas<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Sasquatch<span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>label</span><span class="token punctuation">></span></span>
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>fieldset</span><span class="token punctuation">></span></span>
</span></code></pre>
</div></div><div class="h3wrap-body"><div class="wrap"><div class="wrap-header h4wrap"><h4 id="-预览-11"><a aria-hidden="true" tabindex="-1" href="#-预览-11"><span class="icon icon-link"></span></a>↓ 预览</h4><div class="wrap-body">
<form style="padding: 20px">
<fieldset class="border border-slate-400" style="padding: 20px">
<legend>Your favorite monster</legend>
<input type="radio" id="kra" name="monster">
<label for="kra">Kraken</label><br>
<input type="radio" id="sas" name="monster">
<label for="sas">Sasquatch</label>
</fieldset>
</form>
</div></div></div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="数据列表标签html5"><a aria-hidden="true" tabindex="-1" href="#数据列表标签html5"><span class="icon icon-link"></span></a>数据列表标签（HTML5）</h3><div class="wrap-body">
<pre class="language-html"><code class="language-html code-highlight"><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>label</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>b<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Choose a browser: <span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>label</span><span class="token punctuation">></span></span>
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>input</span> <span class="token attr-name">list</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>list<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>b<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>browser<span class="token punctuation">"</span></span><span class="token punctuation">/></span></span>
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>datalist</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>list<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Chrome<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Firefox<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Internet Explorer<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Opera<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Safari<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Microsoft Edge<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>datalist</span><span class="token punctuation">></span></span>
</span></code></pre>
</div></div><div class="h3wrap-body"><div class="wrap"><div class="wrap-header h4wrap"><h4 id="-预览-12"><a aria-hidden="true" tabindex="-1" href="#-预览-12"><span class="icon icon-link"></span></a>↓ 预览</h4><div class="wrap-body">
<form style="padding: 20px">
<label for="myBrowser">Choose a browser:</label>
<input list="browsers" id="myBrowser" name="myBrowser">
<datalist id="browsers">
<option value="Chrome">
</option><option value="Firefox">
</option><option value="Internet Explorer">
</option><option value="Opera">
</option><option value="Safari">
</option><option value="Microsoft Edge">
</option></datalist>
</form>
</div></div></div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="提交和重置按钮"><a aria-hidden="true" tabindex="-1" href="#提交和重置按钮"><span class="icon icon-link"></span></a>提交和重置按钮</h3><div class="wrap-body">
<pre class="language-html"><code class="language-html code-highlight"><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>form</span> <span class="token attr-name">action</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>register.php<span class="token punctuation">"</span></span> <span class="token attr-name">method</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>post<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>label</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>foo<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Name:<span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>label</span><span class="token punctuation">></span></span>
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>text<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>name<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>foo<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>submit<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>提交<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>reset<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>重置<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>form</span><span class="token punctuation">></span></span>
</span></code></pre>
</div></div><div class="h3wrap-body"><div class="wrap"><div class="wrap-header h4wrap"><h4 id="-预览-13"><a aria-hidden="true" tabindex="-1" href="#-预览-13"><span class="icon icon-link"></span></a>↓ 预览</h4><div class="wrap-body">
<form action="register.php" method="post" style="padding: 20px">
<label for="name">Name:</label>
<input type="text" name="name" id="name" &#x22;="">
<input type="submit" value="提交">
<input type="reset" value="重置">
</form>
<p><code>将数据提交到服务器</code> 重置为默认值</p>
</div></div></div></div></div></div></div><div class="wrap"><div class="wrap-header h2wrap"><h2 id="html-input-标签"><a aria-hidden="true" tabindex="-1" href="#html-input-标签"><span class="icon icon-link"></span></a>HTML input 标签</h2><div class="wrap-body">
<!--rehype:body-class=cols-2-->
</div></div><div class="h2wrap-body cols-2"><div class="wrap row-span-2"><div class="wrap-header h3wrap"><h3 id="input-属性"><a aria-hidden="true" tabindex="-1" href="#input-属性"><span class="icon icon-link"></span></a>Input 属性</h3><div class="wrap-body">
<!--rehype:wrap-class=row-span-2-->
<p>输入标记是一个空元素，用于标识要从用户处获取的特定类型的字段信息。</p>
<pre class="language-html"><code class="language-html code-highlight"><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>text<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>?<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>?<span class="token punctuation">"</span></span> <span class="token attr-name">minlength</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>6<span class="token punctuation">"</span></span> <span class="token attr-name">required</span> <span class="token punctuation">/></span></span>
</span></code></pre>
<hr>
<table><thead><tr><th align="left">:-</th><th align="left">:-</th></tr></thead><tbody><tr><td align="left"><code>type="…"</code></td><td align="left">正在输入的数据类型</td></tr><tr><td align="left"><code>value="…"</code></td><td align="left">默认值</td></tr><tr><td align="left"><code>name="…"</code></td><td align="left">用于在 HTTP 请求中描述此数据</td></tr><tr><td align="left"><code>id="…"</code></td><td align="left">其他 HTML 元素的唯一标识符</td></tr><tr><td align="left"><code>readonly</code></td><td align="left">停止用户修改</td></tr><tr><td align="left"><code>disabled</code></td><td align="left">停止任何交互</td></tr><tr><td align="left"><code>checked</code></td><td align="left">单选或复选框是否选中</td></tr><tr><td align="left"><code>required</code></td><td align="left">是强制性的，参阅<a href="https://developer.mozilla.org/zh-CN/docs/Web/HTML/Attributes/required#example">必填</a></td></tr><tr><td align="left"><code>placeholder="…"</code></td><td align="left">添加临时，请参阅<a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/::placeholder#examples">::placeholder</a></td></tr><tr><td align="left"><code>autocomplete="off"</code></td><td align="left">禁用自动完成</td></tr><tr><td align="left"><code>autocapitalize="none"</code></td><td align="left">禁用自动大写</td></tr><tr><td align="left"><code>inputmode="…"</code></td><td align="left">显示特定键盘，请参阅<a href="https://developer.mozilla.org/zh-CN/docs/Web/HTML/Global_attributes/inputmode">inputmode</a></td></tr><tr><td align="left"><code>list="…"</code></td><td align="left">关联的<a href="https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/datalist">datalist</a>的id</td></tr><tr><td align="left"><code>maxlength="…"</code></td><td align="left">最大字符数</td></tr><tr><td align="left"><code>minlength="…"</code></td><td align="left">最小字符数</td></tr><tr><td align="left"><code>min="…"</code></td><td align="left">范围和编号上的最小数值</td></tr><tr><td align="left"><code>max="…"</code></td><td align="left">范围和编号上的最大数值</td></tr><tr><td align="left"><code>step="…"</code></td><td align="left">数字如何在范围和数字中递增</td></tr><tr><td align="left"><code>pattern="…"</code></td><td align="left">指定一个<a href="./regex.html">正则表达式</a>，请参阅<a href="https://developer.mozilla.org/zh-CN/docs/Web/HTML/Attributes/pattern">pattern</a></td></tr><tr><td align="left"><code>autofocus</code></td><td align="left">集中精力</td></tr><tr><td align="left"><code>spellcheck</code></td><td align="left">执行拼写检查</td></tr><tr><td align="left"><code>multiple</code></td><td align="left">是否允许<a href="https://developer.mozilla.org/zh-CN/docs/Web/HTML/Attributes/multiple">多个</a>值</td></tr><tr><td align="left"><code>accept=""</code></td><td align="left"><a href="https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/input/file">file</a> 中需要文件类型上载控件</td></tr></tbody></table>
<p>请参阅：<a href="https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/input#attributes">&#x3C;input>元素 的属性</a></p>
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="input-类型"><a aria-hidden="true" tabindex="-1" href="#input-类型"><span class="icon icon-link"></span></a>Input 类型</h3><div class="wrap-body">
<table><thead><tr><th></th><th></th></tr></thead><tbody><tr><td><code>type="checkbox"</code></td><td><input type="checkbox"></td></tr><tr><td><code>type="radio"</code></td><td><input type="radio"></td></tr><tr><td><code>type="file"</code></td><td><input type="file"></td></tr><tr><td><code>type="hidden"</code></td><td><input type="hidden"></td></tr><tr><td><code>type="text"</code></td><td><input type="text"></td></tr><tr><td><code>type="password"</code></td><td><input type="password"></td></tr><tr><td><code>type="image"</code></td><td><input type="image" src="https://raw.githubusercontent.com/mdn/learning-area/master/html/forms/image-type-example/login.png" width="70"></td></tr><tr><td><code>type="reset"</code></td><td><input type="reset"></td></tr><tr><td><code>type="button"</code></td><td><input type="button"></td></tr><tr><td><code>type="submit"</code></td><td><input type="submit"></td></tr></tbody></table>
</div></div><div class="h3wrap-body"><div class="wrap"><div class="wrap-header h4wrap"><h4 id="html5-中的新输入类型"><a aria-hidden="true" tabindex="-1" href="#html5-中的新输入类型"><span class="icon icon-link"></span></a>HTML5 中的新输入类型</h4><div class="wrap-body">
<table><thead><tr><th></th><th></th></tr></thead><tbody><tr><td><code>type="color"</code></td><td><input type="color" value="#0FB881"></td></tr><tr><td><code>type="date"</code></td><td><input type="date"></td></tr><tr><td><code>type="time"</code></td><td><input type="time"></td></tr><tr><td><code>type="month"</code></td><td><input type="month"></td></tr><tr><td><code>type="datetime-local"</code></td><td><input type="datetime-local"></td></tr><tr><td><code>type="week"</code></td><td><input type="week"></td></tr><tr><td><code>type="email"</code></td><td><input type="email"></td></tr><tr><td><code>type="tel"</code></td><td><input type="tel"></td></tr><tr><td><code>type="url"</code></td><td><input type="url"></td></tr><tr><td><code>type="number"</code></td><td><input type="number"></td></tr><tr><td><code>type="search"</code></td><td><input type="search"></td></tr><tr><td><code>type="range"</code></td><td><input type="range"></td></tr></tbody></table>
</div></div></div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="input-css-选择器"><a aria-hidden="true" tabindex="-1" href="#input-css-选择器"><span class="icon icon-link"></span></a>Input CSS 选择器</h3><div class="wrap-body">
<table><thead><tr><th></th><th></th></tr></thead><tbody><tr><td><code>input:focus</code></td><td>当键盘聚焦时</td></tr></tbody></table>
</div></div></div></div></div><div class="wrap"><div class="wrap-header h2wrap"><h2 id="html-meta-标签"><a aria-hidden="true" tabindex="-1" href="#html-meta-标签"><span class="icon icon-link"></span></a>HTML meta 标签</h2><div class="wrap-body">
<!--rehype:body-class=cols-2-->
</div></div><div class="h2wrap-body cols-2"><div class="wrap row-span-3"><div class="wrap-header h3wrap"><h3 id="meta-标签"><a aria-hidden="true" tabindex="-1" href="#meta-标签"><span class="icon icon-link"></span></a>Meta 标签</h3><div class="wrap-body">
<!--rehype:wrap-class=row-span-3-->
<p>meta 标记描述 HTML 文档中的元数据。它解释了关于 HTML 的其他材料。</p>
<pre class="language-html"><code class="language-html code-highlight"><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>meta</span> <span class="token attr-name">charset</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>utf-8<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
</span></code></pre>
<pre class="language-html"><code class="language-html code-highlight"><span class="code-line"><span class="token comment">&#x3C;!-- 标题 --></span>
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>title</span><span class="token punctuation">></span></span>···<span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>title</span><span class="token punctuation">></span></span>
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>meta</span> <span class="token attr-name">property</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>og:title<span class="token punctuation">"</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>···<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>meta</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>twitter:title<span class="token punctuation">"</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>···<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
</span></code></pre>
<hr>
<pre class="language-html"><code class="language-html code-highlight"><span class="code-line"><span class="token comment">&#x3C;!-- url --></span>
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>link</span> <span class="token attr-name">rel</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>canonical<span class="token punctuation">"</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://···<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>meta</span> <span class="token attr-name">property</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>og:url<span class="token punctuation">"</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://···<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>meta</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>twitter:url<span class="token punctuation">"</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://···<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
</span></code></pre>
<hr>
<pre class="language-html"><code class="language-html code-highlight"><span class="code-line"><span class="token comment">&#x3C;!-- 描述 --></span>
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>meta</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>description<span class="token punctuation">"</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>···<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>meta</span> <span class="token attr-name">property</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>og:description<span class="token punctuation">"</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>···<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>meta</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>twitter:description<span class="token punctuation">"</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>···<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
</span></code></pre>
<hr>
<pre class="language-html"><code class="language-html code-highlight"><span class="code-line"><span class="token comment">&#x3C;!-- image --></span>
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>meta</span> <span class="token attr-name">property</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>og:image<span class="token punctuation">"</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://···<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>meta</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>twitter:image<span class="token punctuation">"</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://···<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
</span></code></pre>
<hr>
<pre class="language-html"><code class="language-html code-highlight"><span class="code-line"><span class="token comment">&#x3C;!-- ua --></span>
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>meta</span> <span class="token attr-name">http-equiv</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>X-UA-Compatible<span class="token punctuation">"</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>IE=edge,chrome=1<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
</span></code></pre>
<hr>
<pre class="language-html"><code class="language-html code-highlight"><span class="code-line"><span class="token comment">&#x3C;!-- viewport --></span>
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>meta</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>viewport<span class="token punctuation">"</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>width=device-width<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>meta</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>viewport<span class="token punctuation">"</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>width=1024<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
</span></code></pre>
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="open-graph"><a aria-hidden="true" tabindex="-1" href="#open-graph"><span class="icon icon-link"></span></a>Open Graph</h3><div class="wrap-body">
<pre class="language-html"><code class="language-html code-highlight"><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>meta</span> <span class="token attr-name">property</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>og:type<span class="token punctuation">"</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>website<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>meta</span> <span class="token attr-name">property</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>og:locale<span class="token punctuation">"</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>en_CA<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>meta</span> <span class="token attr-name">property</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>og:title<span class="token punctuation">"</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>HTML cheatsheet<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>meta</span> <span class="token attr-name">property</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>og:url<span class="token punctuation">"</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://quickref.me/html<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>meta</span> <span class="token attr-name">property</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>og:image<span class="token punctuation">"</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://xxx.com/image.jpg<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>meta</span> <span class="token attr-name">property</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>og:site_name<span class="token punctuation">"</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Name of your website<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>meta</span> <span class="token attr-name">property</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>og:description<span class="token punctuation">"</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Description of this page<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
</span></code></pre>
<p>Facebook、Instagram、Pinterest、LinkedIn 等使用。</p>
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="twitter-卡片"><a aria-hidden="true" tabindex="-1" href="#twitter-卡片"><span class="icon icon-link"></span></a>Twitter 卡片</h3><div class="wrap-body">
<pre class="language-html"><code class="language-html code-highlight"><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>meta</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>twitter:card<span class="token punctuation">"</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>summary<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>meta</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>twitter:site<span class="token punctuation">"</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>@QuickRef_ME<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>meta</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>twitter:title<span class="token punctuation">"</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>HTML cheatsheet<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>meta</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>twitter:url<span class="token punctuation">"</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://quickref.me/html<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>meta</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>twitter:description<span class="token punctuation">"</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Description of this page<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>meta</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>twitter:image<span class="token punctuation">"</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://xxx.com/image.jpg<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
</span></code></pre>
<p>请参阅：<a href="https://developer.twitter.com/en/docs/tweets/optimize-with-cards/overview/summary">Twitter 卡片文档</a></p>
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="geotagging"><a aria-hidden="true" tabindex="-1" href="#geotagging"><span class="icon icon-link"></span></a>Geotagging</h3><div class="wrap-body">
<pre class="language-html"><code class="language-html code-highlight"><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>meta</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>ICBM<span class="token punctuation">"</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>45.416667,-75.7<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>meta</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>geo.position<span class="token punctuation">"</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>45.416667;-75.7<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>meta</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>geo.region<span class="token punctuation">"</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>ca-on<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>meta</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>geo.placename<span class="token punctuation">"</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Ottawa<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
</span></code></pre>
<p>请参阅：<a href="https://en.wikipedia.org/wiki/Geotagging#HTML_pages">Geotagging</a></p>
</div></div></div></div></div><div class="wrap"><div class="wrap-header h2wrap"><h2 id="另见"><a aria-hidden="true" tabindex="-1" href="#另见"><span class="icon icon-link"></span></a>另见</h2><div class="wrap-body">
<ul>
<li><a href="https://www.w3.org/TR/REC-html40/cover.html#minitoc">HTML 4.01 Specification</a> <em>(w3.org)</em></li>
<li><a href="https://wangchujiang.com/html-tutorial/">HTML Tutorial</a> <em>(jaywcjlove.github.io)</em></li>
<li><a href="./emmet.html">Emmet 备忘清单，提升 HTML 和 CSS 代码编写的工具包</a> <em>(jaywcjlove.github.io)</em></li>
</ul>
</div></div></div></div></div><footer class="footer-wrap"><footer class="max-container">© 2022 Kenny Wang, All rights reserved.</footer></footer><script>
if(('onhashchange' in window) && ((typeof document.documentMode==='undefined') || document.documentMode==8)) {
window.onhashchange = function () {
anchorPoint()
};
}
function anchorPoint() {
const hash = window.location.hash?.replace(/^#/, '') || '';
const elm = document.getElementById(decodeURIComponent(hash));
Array.from(document.querySelectorAll('.h2wrap-body .wrap')).forEach((elm) => elm.classList.remove('active'))
if (elm?.tagName === 'H3') {
elm?.parentElement?.parentElement?.classList.add('active');
const box = elm?.parentElement?.parentElement;
console.log('elm:2', box, document.querySelectorAll('.h2wrap-body .wrap'))
}
}
anchorPoint();
</script></body>
</html>
Reference in New Issue View Git Blame Copy Permalink