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
8851b9aab9c5c41c99d215a4b09a7673a442024b
reference/docs/html.html
jaywcjlove 8851b9aab9 website: modify favicon. #840 145aa54a4e
2024-10-14 20:05:37 +00:00

1250 lines
175 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 content="width=device-width, initial-scale=1" name="viewport">
<meta description="此 HTML 快速参考备忘单以可读布局列出了常见的 HTML 和 HTML5 标记。
入门，为开发人员分享快速参考备忘单。">
<meta keywords="html,reference,Quick,Reference,cheatsheet,cheat,sheet">
<meta name="author" content="jaywcjlove">
<meta name="license" content="MIT">
<meta name="funding" content="https://jaywcjlove.github.io/#/sponsor">
<meta rel="apple-touch-icon" href="../icons/touch-icon-iphone.png">
<meta rel="apple-touch-icon" sizes="152x152" href="../icons/touch-icon-ipad.png">
<meta rel="apple-touch-icon" sizes="180x180" href="../icons/touch-icon-iphone-retina.png">
<meta rel="apple-touch-icon" sizes="167x167" href="../icons/touch-icon-ipad-retina.png">
<link rel="icon" href="../icons/favicon.svg" type="image/svg+xml">
<link href="../style/style.css" rel="stylesheet">
<link href="../style/katex.css" rel="stylesheet">
</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="javascript:void(0);" class="searchbtn" id="searchbtn"><svg xmlns="http://www.w3.org/2000/svg" height="1em" width="1em" viewBox="0 0 18 18">
<path fill="currentColor" d="M17.71,16.29 L14.31,12.9 C15.4069846,11.5024547 16.0022094,9.77665502 16,8 C16,3.581722 12.418278,0 8,0 C3.581722,0 0,3.581722 0,8 C0,12.418278 3.581722,16 8,16 C9.77665502,16.0022094 11.5024547,15.4069846 12.9,14.31 L16.29,17.71 C16.4777666,17.8993127 16.7333625,18.0057983 17,18.0057983 C17.2666375,18.0057983 17.5222334,17.8993127 17.71,17.71 C17.8993127,17.5222334 18.0057983,17.2666375 18.0057983,17 C18.0057983,16.7333625 17.8993127,16.4777666 17.71,16.29 Z M2,8 C2,4.6862915 4.6862915,2 8,2 C11.3137085,2 14,4.6862915 14,8 C14,11.3137085 11.3137085,14 8,14 C4.6862915,14 2,11.3137085 2,8 Z"></path>
</svg><span>搜索</span><span>⌘K</span></a><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 src="../js/dark.js?v=1.8.0"></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 h1body-exist 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="menu-tocs"><div class="menu-btn"><svg aria-hidden="true" fill="currentColor" height="1em" width="1em" viewBox="0 0 16 16" version="1.1" data-view-component="true">
<path fill-rule="evenodd" d="M2 4a1 1 0 100-2 1 1 0 000 2zm3.75-1.5a.75.75 0 000 1.5h8.5a.75.75 0 000-1.5h-8.5zm0 5a.75.75 0 000 1.5h8.5a.75.75 0 000-1.5h-8.5zm0 5a.75.75 0 000 1.5h8.5a.75.75 0 000-1.5h-8.5zM3 8a1 1 0 11-2 0 1 1 0 012 0zm-1 6a1 1 0 100-2 1 1 0 000 2z"></path>
</svg></div><div class="menu-modal"><a aria-hidden="true" class="leve2 tocs-link" data-num="2" href="#入门">入门</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#hellohtml">hello.html</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#注释-comment">注释 Comment</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#段落-paragraph">段落 Paragraph</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#html-链接">HTML 链接</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#image-标签">Image 标签</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#文本格式标签">文本格式标签</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#标题">标题</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#section-divisions">Section Divisions</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#内部框架">内部框架</a><a aria-hidden="true" class="leve4 tocs-link" data-num="4" href="#-预览">↓ 预览</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#html-中的-javascript">HTML 中的 JavaScript</a><a aria-hidden="true" class="leve4 tocs-link" data-num="4" href="#外部-javascript">外部 JavaScript</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#html-中的-css">HTML 中的 CSS</a><a aria-hidden="true" class="leve4 tocs-link" data-num="4" href="#外部样式表">外部样式表</a><a aria-hidden="true" class="leve2 tocs-link" data-num="2" href="#html5-标签">HTML5 标签</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#页面">页面</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#标题导航">标题导航</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#html5-tags">HTML5 Tags</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#html5-video">HTML5 Video</a><a aria-hidden="true" class="leve4 tocs-link" data-num="4" href="#-预览-1">↓ 预览</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#html5-audio">HTML5 Audio</a><a aria-hidden="true" class="leve4 tocs-link" data-num="4" href="#-预览-2">↓ 预览</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#html5-ruby">HTML5 Ruby</a><a aria-hidden="true" class="leve4 tocs-link" data-num="4" href="#-预览-3">↓ 预览</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#html5-kdi">HTML5 kdi</a><a aria-hidden="true" class="leve4 tocs-link" data-num="4" href="#-预览-4">↓ 预览</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#html5-progress">HTML5 progress</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#html5-mark">HTML5 mark</a><a aria-hidden="true" class="leve2 tocs-link" data-num="2" href="#html-表格">HTML 表格</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#table-示例">Table 示例</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#html表格标签">HTML表格标签</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#td-属性">&#x3C;td> 属性</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#th-属性">&#x3C;th> 属性</a><a aria-hidden="true" class="leve2 tocs-link" data-num="2" href="#html-列表">HTML 列表</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#无序列表">无序列表</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#有序列表">有序列表</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#定义列表">定义列表</a><a aria-hidden="true" class="leve2 tocs-link" data-num="2" href="#html-表单">HTML 表单</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#form-标签">Form 标签</a><a aria-hidden="true" class="leve4 tocs-link" data-num="4" href="#-预览-5">↓ 预览</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#form-属性">Form 属性</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#label-标签">Label 标签</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#input-标签">Input 标签</a><a aria-hidden="true" class="leve4 tocs-link" data-num="4" href="#-预览-6">↓ 预览</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#textarea-标签">Textarea 标签</a><a aria-hidden="true" class="leve4 tocs-link" data-num="4" href="#-预览-7">↓ 预览</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#radio-buttons">Radio Buttons</a><a aria-hidden="true" class="leve4 tocs-link" data-num="4" href="#-预览-8">↓ 预览</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#checkboxes">Checkboxes</a><a aria-hidden="true" class="leve4 tocs-link" data-num="4" href="#-预览-9">↓ 预览</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#select-标签">Select 标签</a><a aria-hidden="true" class="leve4 tocs-link" data-num="4" href="#-预览-10">↓ 预览</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#fieldset-标签">Fieldset 标签</a><a aria-hidden="true" class="leve4 tocs-link" data-num="4" href="#-预览-11">↓ 预览</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#数据列表标签html5">数据列表标签（HTML5）</a><a aria-hidden="true" class="leve4 tocs-link" data-num="4" href="#-预览-12">↓ 预览</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#提交和重置按钮">提交和重置按钮</a><a aria-hidden="true" class="leve4 tocs-link" data-num="4" href="#-预览-13">↓ 预览</a><a aria-hidden="true" class="leve2 tocs-link" data-num="2" href="#html-input-标签">HTML input 标签</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#input-属性">Input 属性</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#input-类型">Input 类型</a><a aria-hidden="true" class="leve4 tocs-link" data-num="4" href="#html5-中的新输入类型">HTML5 中的新输入类型</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#input-css-选择器">Input CSS 选择器</a><a aria-hidden="true" class="leve2 tocs-link" data-num="2" href="#html-meta-标签">HTML meta 标签</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#meta-标签">Meta 标签</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#常用-meta">常用 Meta</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#常用-meta-1">常用 Meta</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#open-graph">Open Graph</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#twitter-卡片">Twitter 卡片</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#geotagging">Geotagging</a><a aria-hidden="true" class="leve2 tocs-link" data-num="2" href="#标签语义化">标签语义化</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#复杂布局">复杂布局</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#复杂布局-1">复杂布局</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#区域语义化">区域语义化</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#页面头语义化">页面头语义化</a><a aria-hidden="true" class="leve2 tocs-link" data-num="2" href="#另见">另见</a></div></div><div class="h1wrap-body"><div class="wrap h2body-exist"><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 h3body-not-exist 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 h3body-not-exist"><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 h3body-not-exist"><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 h3body-not-exist"><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 h3body-not-exist"><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 h3body-not-exist"><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 h3body-not-exist"><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 h3body-not-exist"><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 h3body-exist 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 -->
<h4 id="-预览"><a aria-hidden="true" tabindex="-1" href="#-预览"><span class="icon icon-link"></span></a>↓ 预览</h4>
<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 class="wrap h3body-exist"><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>
<h4 id="外部-javascript"><a aria-hidden="true" tabindex="-1" href="#外部-javascript"><span class="icon icon-link"></span></a>外部 JavaScript</h4>
<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 class="wrap h3body-exist"><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>
<h4 id="外部样式表"><a aria-hidden="true" tabindex="-1" href="#外部样式表"><span class="icon icon-link"></span></a>外部样式表</h4>
<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 class="wrap h2body-exist"><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 h3body-not-exist"><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 h3body-not-exist"><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 h3body-not-exist 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 h3body-exist"><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 -->
<h4 id="-预览-1"><a aria-hidden="true" tabindex="-1" href="#-预览-1"><span class="icon icon-link"></span></a>↓ 预览</h4>
<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 class="wrap h3body-exist"><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 -->
<h4 id="-预览-2"><a aria-hidden="true" tabindex="-1" href="#-预览-2"><span class="icon icon-link"></span></a>↓ 预览</h4>
<p><audio controls src="https://interactive-examples.mdn.mozilla.net/media/cc0-audio/t-rex-roar.mp3">
您的浏览器不支持音频元素。
</audio></p>
</div></div></div><div class="wrap h3body-exist"><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 -->
<h4 id="-预览-3"><a aria-hidden="true" tabindex="-1" href="#-预览-3"><span class="icon icon-link"></span></a>↓ 预览</h4>
<!--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 class="wrap h3body-exist"><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>
<h4 id="-预览-4"><a aria-hidden="true" tabindex="-1" href="#-预览-4"><span class="icon icon-link"></span></a>↓ 预览</h4>
<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 class="wrap h3body-not-exist"><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 h3body-not-exist"><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 h2body-exist"><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 h3body-not-exist 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 h3body-not-exist 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 h3body-not-exist"><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 h3body-not-exist"><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 h2body-exist"><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 h3body-not-exist"><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 h3body-not-exist"><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 h3body-not-exist"><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 h2body-exist"><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 h3body-exist 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>
<h4 id="-预览-5"><a aria-hidden="true" tabindex="-1" href="#-预览-5"><span class="icon icon-link"></span></a>↓ 预览</h4>
<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 class="wrap h3body-not-exist"><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 h3body-not-exist"><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 h3body-exist"><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>
<h4 id="-预览-6"><a aria-hidden="true" tabindex="-1" href="#-预览-6"><span class="icon icon-link"></span></a>↓ 预览</h4>
<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 class="wrap h3body-exist"><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 -->
<h4 id="-预览-7"><a aria-hidden="true" tabindex="-1" href="#-预览-7"><span class="icon icon-link"></span></a>↓ 预览</h4>
<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 class="wrap h3body-exist"><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>
<h4 id="-预览-8"><a aria-hidden="true" tabindex="-1" href="#-预览-8"><span class="icon icon-link"></span></a>↓ 预览</h4>
<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 class="wrap h3body-exist"><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>
<h4 id="-预览-9"><a aria-hidden="true" tabindex="-1" href="#-预览-9"><span class="icon icon-link"></span></a>↓ 预览</h4>
<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 class="wrap h3body-exist"><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>
<h4 id="-预览-10"><a aria-hidden="true" tabindex="-1" href="#-预览-10"><span class="icon icon-link"></span></a>↓ 预览</h4>
<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 class="wrap h3body-exist"><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>
<h4 id="-预览-11"><a aria-hidden="true" tabindex="-1" href="#-预览-11"><span class="icon icon-link"></span></a>↓ 预览</h4>
<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 class="wrap h3body-exist"><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>
<h4 id="-预览-12"><a aria-hidden="true" tabindex="-1" href="#-预览-12"><span class="icon icon-link"></span></a>↓ 预览</h4>
<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 class="wrap h3body-exist"><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>
<h4 id="-预览-13"><a aria-hidden="true" tabindex="-1" href="#-预览-13"><span class="icon icon-link"></span></a>↓ 预览</h4>
<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 class="wrap h2body-exist"><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 h3body-not-exist 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 h3body-exist"><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>
<h4 id="html5-中的新输入类型"><a aria-hidden="true" tabindex="-1" href="#html5-中的新输入类型"><span class="icon icon-link"></span></a>HTML5 中的新输入类型</h4>
<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 class="wrap h3body-not-exist"><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 h2body-exist"><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 h3body-not-exist row-span-5"><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-5-->
<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>
<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">http-equiv</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>refresh<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>5;url=http://example.com/<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>robots<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>index,follow<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>generator<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>csrf-token<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>token值<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
</span></code></pre>
</div></div></div><div class="wrap h3body-not-exist"><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">
<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>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>keywords<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>关键词1,关键词2,关键词3<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>author<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>
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="常用-meta-1"><a aria-hidden="true" tabindex="-1" href="#常用-meta-1"><span class="icon icon-link"></span></a>常用 Meta</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>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>shortcut icon<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>favicon.ico<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>image/x-icon<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>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>icon<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>favicon.png<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>image/png<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>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>icon<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>favicon.jpg<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>image/jpeg<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
</span></code></pre>
</div></div></div><div class="wrap h3body-not-exist"><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://jaywcjlove.github.io/<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 h3body-not-exist"><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://jaywcjlove.github.io/<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 h3body-not-exist"><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 h2body-exist"><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 h3body-not-exist 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><code class="code-highlight"><span class="code-line">╭┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╮
</span><span class="code-line">┆ &#x3C;header> ┆
</span><span class="code-line">╰┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╯
</span><span class="code-line">╭┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╮
</span><span class="code-line">┆ &#x3C;nav> ┆
</span><span class="code-line">╰┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╯
</span><span class="code-line">╭┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╮
</span><span class="code-line">┆ &#x3C;section> ┆
</span><span class="code-line">┆╭┈┈┈┈┈┈┈┈╮╭┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╮┆
</span><span class="code-line">┆┆&#x3C;aside> ┆┆ &#x3C;main> ┆┆
</span><span class="code-line">┆┆ ┆┆╭┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╮ ╭┈┈┈┈┈┈┈┈┈╮┆┆
</span><span class="code-line">┆┆ ┆┆┆ &#x3C;article> ┆ ┆ &#x3C;aside> ┆┆┆
</span><span class="code-line">┆┆ ┆┆┆ ╭┈┈┈┈┈┈┈┈┈┈┈╮ ┆ ┆ ┆┆┆
</span><span class="code-line">┆┆ ┆┆┆ ┆ &#x3C;header> ┆ ┆ ┆ ┆┆┆
</span><span class="code-line">┆┆ ┆┆┆ ╰┈┈┈┈┈┈┈┈┈┈┈╯ ┆ ┆ ┆┆┆
</span><span class="code-line">┆┆ ┆┆┆ ╭┈┈┈┈┈┈┈┈┈┈┈╮ ┆ ┆ ┆┆┆
</span><span class="code-line">┆┆ ┆┆┆ ┆ &#x3C;article> ┆ ┆ ┆ ┆┆┆
</span><span class="code-line">┆┆ ┆┆┆ ╰┈┈┈┈┈┈┈┈┈┈┈╯ ┆ ┆ ┆┆┆
</span><span class="code-line">┆┆ ┆┆┆ ╭┈┈┈┈┈┈┈┈┈┈┈╮ ┆ ┆ ┆┆┆
</span><span class="code-line">┆┆ ┆┆┆ ┆ &#x3C;footer> ┆ ┆ ┆ ┆┆┆
</span><span class="code-line">┆┆ ┆┆┆ ╰┈┈┈┈┈┈┈┈┈┈┈╯ ┆ ┆ ┆┆┆
</span><span class="code-line">┆┆ ┆┆╰┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╯ ╰┈┈┈┈┈┈┈┈┈╯┆┆
</span><span class="code-line">┆╰┈┈┈┈┈┈┈┈╯╰┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╯┆
</span><span class="code-line">╰┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╯
</span><span class="code-line">╭┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╮
</span><span class="code-line">┆ &#x3C;footer> ┆
</span><span class="code-line">╰┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╯
</span></code></pre>
</div></div></div><div class="wrap h3body-not-exist row-span-2"><div class="wrap-header h3wrap"><h3 id="复杂布局-1"><a aria-hidden="true" tabindex="-1" href="#复杂布局-1"><span class="icon icon-link"></span></a>复杂布局</h3><div class="wrap-body">
<!--rehype:wrap-class=row-span-2-->
<pre><code class="code-highlight"><span class="code-line">╭┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╮
</span><span class="code-line">┆ &#x3C;header> ┆
</span><span class="code-line">┆ ╭┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╮ ┆
</span><span class="code-line">┆ ┆ &#x3C;nav> ┆ ┆
</span><span class="code-line">┆ ╰┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╯ ┆
</span><span class="code-line">╰┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╯
</span><span class="code-line">╭┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╮
</span><span class="code-line">┆ &#x3C;main> ┆
</span><span class="code-line">┆ ╭┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╮ ╭┈┈┈┈┈┈┈┈┈┈┈╮ ┆
</span><span class="code-line">┆ ┆ &#x3C;article> ┆ ┆ &#x3C;aside> ┆ ┆
</span><span class="code-line">┆ ┆ ╭┈┈┈┈┈┈┈┈┈┈┈╮ ┆ ┆ ┆ ┆
</span><span class="code-line">┆ ┆ ┆ &#x3C;header> ┆ ┆ ┆ ┆ ┆
</span><span class="code-line">┆ ┆ ╰┈┈┈┈┈┈┈┈┈┈┈╯ ┆ ┆ ┆ ┆
</span><span class="code-line">┆ ┆ ╭┈┈┈┈┈┈┈┈┈┈┈╮ ┆ ┆ ┆ ┆
</span><span class="code-line">┆ ┆ ┆ &#x3C;section> ┆ ┆ ┆ ┆ ┆
</span><span class="code-line">┆ ┆ ╰┈┈┈┈┈┈┈┈┈┈┈╯ ┆ ┆ ┆ ┆
</span><span class="code-line">┆ ┆ ╭┈┈┈┈┈┈┈┈┈┈┈╮ ┆ ┆ ┆ ┆
</span><span class="code-line">┆ ┆ ┆ &#x3C;footer> ┆ ┆ ┆ ┆ ┆
</span><span class="code-line">┆ ┆ ╰┈┈┈┈┈┈┈┈┈┈┈╯ ┆ ┆ ┆ ┆
</span><span class="code-line">┆ ╰┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╯ ╰┈┈┈┈┈┈┈┈┈┈┈╯ ┆
</span><span class="code-line">╰┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╯
</span><span class="code-line">╭┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╮
</span><span class="code-line">┆ &#x3C;footer> ┆
</span><span class="code-line">╰┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╯
</span></code></pre>
</div></div></div><div class="wrap h3body-not-exist"><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><code class="code-highlight"><span class="code-line">╭┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╮ ╭┈┈┈┈┈┈┈┈┈┈┈╮
</span><span class="code-line">┆ &#x3C;main> ┆ ┆ &#x3C;aside> ┆
</span><span class="code-line">┆ ╭┈┈┈┈┈┈┈┈┈┈┈╮ ┆ ┆ ┆
</span><span class="code-line">┆ ┆ &#x3C;header> ┆ ┆ ┆ ┆
</span><span class="code-line">┆ ╰┈┈┈┈┈┈┈┈┈┈┈╯ ┆ ┆ ┆
</span><span class="code-line">┆ ╭┈┈┈┈┈┈┈┈┈┈┈╮ ┆ ┆ ┆
</span><span class="code-line">┆ ┆ &#x3C;section> ┆ ┆ ┆ ┆
</span><span class="code-line">┆ ╰┈┈┈┈┈┈┈┈┈┈┈╯ ┆ ┆ ┆
</span><span class="code-line">┆ ╭┈┈┈┈┈┈┈┈┈┈┈╮ ┆ ┆ ┆
</span><span class="code-line">┆ ┆ &#x3C;footer> ┆ ┆ ┆ ┆
</span><span class="code-line">┆ ╰┈┈┈┈┈┈┈┈┈┈┈╯ ┆ ┆ ┆
</span><span class="code-line">╰┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╯ ╰┈┈┈┈┈┈┈┈┈┈┈╯
</span></code></pre>
</div></div></div><div class="wrap h3body-not-exist"><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><code class="code-highlight"><span class="code-line">╭┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╮
</span><span class="code-line">┆ &#x3C;header> ┆
</span><span class="code-line">┆ ╭┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╮ ┆
</span><span class="code-line">┆ ┆ &#x3C;section> ┆ ┆
</span><span class="code-line">┆ ╰┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╯ ┆
</span><span class="code-line">┆ ╭┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╮ ╭┈┈┈┈┈┈┈┈┈╮ ┆
</span><span class="code-line">┆ ┆ &#x3C;nav> ┆ ┆ &#x3C;aside> ┆ ┆
</span><span class="code-line">┆ ╰┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╯ ╰┈┈┈┈┈┈┈┈┈╯ ┆
</span><span class="code-line">┆ ╭┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╮ ┆
</span><span class="code-line">┆ ┆ &#x3C;footer> ┆ ┆
</span><span class="code-line">┆ ╰┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╯ ┆
</span><span class="code-line">╰┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╯
</span></code></pre>
</div></div></div></div></div><div class="wrap h2body-not-exist"><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 class="h2wrap-body"></div></div></div><script src="https://giscus.app/client.js" data-repo="jaywcjlove/reference" data-repo-id="R_kgDOID2-Mw" data-category="Q&#x26;A" data-category-id="DIC_kwDOID2-M84CS5wo" data-mapping="pathname" data-strict="0" data-reactions-enabled="1" data-emit-metadata="0" data-input-position="bottom" data-theme="dark" data-lang="zh-CN" crossorigin="anonymous" async></script><div class="giscus"></div></div><footer class="footer-wrap"><footer class="max-container">© 2022 <a href="https://wangchujiang.com/#/app" target="_blank">Kenny Wang</a>.</footer></footer><script src="../data.js?v=1.8.0" defer></script><script src="../js/fuse.min.js?v=1.8.0" defer></script><script src="../js/main.js?v=1.8.0" defer></script><div id="mysearch"><div class="mysearch-box"><div class="mysearch-input"><div><svg xmlns="http://www.w3.org/2000/svg" height="1em" width="1em" viewBox="0 0 18 18">
<path fill="currentColor" d="M17.71,16.29 L14.31,12.9 C15.4069846,11.5024547 16.0022094,9.77665502 16,8 C16,3.581722 12.418278,0 8,0 C3.581722,0 0,3.581722 0,8 C0,12.418278 3.581722,16 8,16 C9.77665502,16.0022094 11.5024547,15.4069846 12.9,14.31 L16.29,17.71 C16.4777666,17.8993127 16.7333625,18.0057983 17,18.0057983 C17.2666375,18.0057983 17.5222334,17.8993127 17.71,17.71 C17.8993127,17.5222334 18.0057983,17.2666375 18.0057983,17 C18.0057983,16.7333625 17.8993127,16.4777666 17.71,16.29 Z M2,8 C2,4.6862915 4.6862915,2 8,2 C11.3137085,2 14,4.6862915 14,8 C14,11.3137085 11.3137085,14 8,14 C4.6862915,14 2,11.3137085 2,8 Z"></path>
</svg><input id="mysearch-input" type="search" placeholder="搜索" autocomplete="off"><div class="mysearch-clear"></div></div><button id="mysearch-close" type="button">搜索</button></div><div class="mysearch-result"><div id="mysearch-menu"></div><div id="mysearch-content"></div></div></div></div></body>
</html>
Reference in New Issue View Git Blame Copy Permalink