website: adjust the layout. f60826e6da

This commit is contained in:
jaywcjlove
2022-10-31 08:38:59 +00:00
parent c71af37115
commit 2f6a6cca1c
41 changed files with 473 additions and 470 deletions

View File

@ -221,36 +221,36 @@
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>iframe</span><span class="token punctuation">></span></span>
</span></code></pre>
<!--rehype:className=wrap-text -->
</div></div><div class="h3wrap-body"><div class="wrap h4body-not-exist"><div class="wrap-header h4wrap"><h4 id="-预览"><a aria-hidden="true" tabindex="-1" href="#-预览"><span class="icon icon-link"></span></a>↓ 预览</h4><div class="wrap-body">
</div></div><div class="h3wrap-body"><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></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">
</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>
</div></div><div class="h3wrap-body"><div class="wrap h4body-not-exist"><div class="wrap-header h4wrap"><h4 id="外部-javascript"><a aria-hidden="true" tabindex="-1" href="#外部-javascript"><span class="icon icon-link"></span></a>外部 JavaScript</h4><div class="wrap-body">
</div></div><div class="h3wrap-body"><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></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">
</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>
</div></div><div class="h3wrap-body"><div class="wrap h4body-not-exist"><div class="wrap-header h4wrap"><h4 id="外部样式表"><a aria-hidden="true" tabindex="-1" href="#外部样式表"><span class="icon icon-link"></span></a>外部样式表</h4><div class="wrap-body">
</div></div><div class="h3wrap-body"><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></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></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>
@ -422,12 +422,12 @@
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>video</span><span class="token punctuation">></span></span>
</span></code></pre>
<!--rehype:className=wrap-text -->
</div></div><div class="h3wrap-body"><div class="wrap h4body-not-exist"><div class="wrap-header h4wrap"><h4 id="-预览-1"><a aria-hidden="true" tabindex="-1" href="#-预览-1"><span class="icon icon-link"></span></a>↓ 预览</h4><div class="wrap-body">
</div></div><div class="h3wrap-body"><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></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">
</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>
@ -435,11 +435,11 @@
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>audio</span><span class="token punctuation">></span></span>
</span></code></pre>
<!--rehype:className=wrap-text -->
</div></div><div class="h3wrap-body"><div class="wrap h4body-not-exist"><div class="wrap-header h4wrap"><h4 id="-预览-2"><a aria-hidden="true" tabindex="-1" href="#-预览-2"><span class="icon icon-link"></span></a>↓ 预览</h4><div class="wrap-body">
</div></div><div class="h3wrap-body"><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></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">
</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><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>
@ -448,7 +448,7 @@
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>ruby</span><span class="token punctuation">></span></span>
</span></code></pre>
<!--rehype:className=wrap-text -->
</div></div><div class="h3wrap-body"><div class="wrap h4body-not-exist" style="text-align: center;"><div class="wrap-header h4wrap"><h4 id="-预览-3"><a aria-hidden="true" tabindex="-1" href="#-预览-3"><span class="icon icon-link"></span></a>↓ 预览</h4><div class="wrap-body">
</div></div><div class="h3wrap-body"><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>
@ -456,20 +456,20 @@
<rp>(</rp><rt>pīn</rt><rp>)</rp>
<rp>(</rp><rt>yīn</rt><rp>)</rp>
</ruby>
</div></div></div></div></div><div class="wrap 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">
</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>
</div></div><div class="h3wrap-body"><div class="wrap h4body-not-exist"><div class="wrap-header h4wrap"><h4 id="-预览-4"><a aria-hidden="true" tabindex="-1" href="#-预览-4"><span class="icon icon-link"></span></a>↓ 预览</h4><div class="wrap-body">
</div></div><div class="h3wrap-body"><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></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">
</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>
@ -649,7 +649,7 @@
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>label</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>ck<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>记住我<span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>label</span><span class="token punctuation">></span></span>
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>form</span><span class="token punctuation">></span></span>
</span></code></pre>
</div></div><div class="h3wrap-body"><div class="wrap h4body-not-exist"><div class="wrap-header h4wrap"><h4 id="-预览-5"><a aria-hidden="true" tabindex="-1" href="#-预览-5"><span class="icon icon-link"></span></a>↓ 预览</h4><div class="wrap-body">
</div></div><div class="h3wrap-body"><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">
@ -663,7 +663,7 @@
<label for="ck">记住我</label>
</form>
<p>HTML <code>&#x3C;form></code> 元素用于收集信息并将其发送到外部源。</p>
</div></div></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">
</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">
@ -714,28 +714,28 @@
<pre class="language-html"><code class="language-html code-highlight"><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>label</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Name<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Name:<span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>label</span><span class="token punctuation">></span></span>
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>text<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Name<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
</span></code></pre>
</div></div><div class="h3wrap-body"><div class="wrap h4body-not-exist"><div class="wrap-header h4wrap"><h4 id="-预览-6"><a aria-hidden="true" tabindex="-1" href="#-预览-6"><span class="icon icon-link"></span></a>↓ 预览</h4><div class="wrap-body">
</div></div><div class="h3wrap-body"><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></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">
</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 -->
</div></div><div class="h3wrap-body"><div class="wrap h4body-not-exist"><div class="wrap-header h4wrap"><h4 id="-预览-7"><a aria-hidden="true" tabindex="-1" href="#-预览-7"><span class="icon icon-link"></span></a>↓ 预览</h4><div class="wrap-body">
</div></div><div class="h3wrap-body"><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></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">
</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>
</div></div><div class="h3wrap-body"><div class="wrap h4body-not-exist"><div class="wrap-header h4wrap"><h4 id="-预览-8"><a aria-hidden="true" tabindex="-1" href="#-预览-8"><span class="icon icon-link"></span></a>↓ 预览</h4><div class="wrap-body">
</div></div><div class="h3wrap-body"><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>
@ -743,13 +743,13 @@
<label for="f">Female</label>
</form>
<p>单选按钮用于让用户只选择一个</p>
</div></div></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">
</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>
</div></div><div class="h3wrap-body"><div class="wrap h4body-not-exist"><div class="wrap-header h4wrap"><h4 id="-预览-9"><a aria-hidden="true" tabindex="-1" href="#-预览-9"><span class="icon icon-link"></span></a>↓ 预览</h4><div class="wrap-body">
</div></div><div class="h3wrap-body"><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>
@ -757,7 +757,7 @@
<label for="baseball">Baseball</label>
</form>
<p>复选框允许用户选择一个或多个</p>
</div></div></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">
</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>
@ -765,7 +765,7 @@
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>3<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Cromwell<span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>option</span><span class="token punctuation">></span></span>
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>select</span><span class="token punctuation">></span></span>
</span></code></pre>
</div></div><div class="h3wrap-body"><div class="wrap h4body-not-exist"><div class="wrap-header h4wrap"><h4 id="-预览-10"><a aria-hidden="true" tabindex="-1" href="#-预览-10"><span class="icon icon-link"></span></a>↓ 预览</h4><div class="wrap-body">
</div></div><div class="h3wrap-body"><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">
@ -775,7 +775,7 @@
</select>
</form>
<p>选择框是选项的下拉列表</p>
</div></div></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">
</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>
@ -784,7 +784,7 @@
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>label</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>sas<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Sasquatch<span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>label</span><span class="token punctuation">></span></span>
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>fieldset</span><span class="token punctuation">></span></span>
</span></code></pre>
</div></div><div class="h3wrap-body"><div class="wrap h4body-not-exist"><div class="wrap-header h4wrap"><h4 id="-预览-11"><a aria-hidden="true" tabindex="-1" href="#-预览-11"><span class="icon icon-link"></span></a>↓ 预览</h4><div class="wrap-body">
</div></div><div class="h3wrap-body"><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>
@ -794,7 +794,7 @@
<label for="sas">Sasquatch</label>
</fieldset>
</form>
</div></div></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">
</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>
@ -806,7 +806,7 @@
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Microsoft Edge<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>datalist</span><span class="token punctuation">></span></span>
</span></code></pre>
</div></div><div class="h3wrap-body"><div class="wrap h4body-not-exist"><div class="wrap-header h4wrap"><h4 id="-预览-12"><a aria-hidden="true" tabindex="-1" href="#-预览-12"><span class="icon icon-link"></span></a>↓ 预览</h4><div class="wrap-body">
</div></div><div class="h3wrap-body"><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">
@ -819,7 +819,7 @@
</option><option value="Microsoft Edge">
</option></datalist>
</form>
</div></div></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">
</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>
@ -827,7 +827,7 @@
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>reset<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>重置<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>form</span><span class="token punctuation">></span></span>
</span></code></pre>
</div></div><div class="h3wrap-body"><div class="wrap h4body-not-exist"><div class="wrap-header h4wrap"><h4 id="-预览-13"><a aria-hidden="true" tabindex="-1" href="#-预览-13"><span class="icon icon-link"></span></a>↓ 预览</h4><div class="wrap-body">
</div></div><div class="h3wrap-body"><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;="">
@ -835,7 +835,7 @@
<input type="reset" value="重置">
</form>
<p><code>将数据提交到服务器</code> 重置为默认值</p>
</div></div></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">
</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-->
@ -997,7 +997,7 @@
<table><thead><tr><th></th><th></th></tr></thead><tbody><tr><td><code>type="checkbox"</code></td><td><input type="checkbox"></td></tr><tr><td><code>type="radio"</code></td><td><input type="radio"></td></tr><tr><td><code>type="file"</code></td><td><input type="file"></td></tr><tr><td><code>type="hidden"</code></td><td><input type="hidden"></td></tr><tr><td><code>type="text"</code></td><td><input type="text"></td></tr><tr><td><code>type="password"</code></td><td><input type="password"></td></tr><tr><td><code>type="image"</code></td><td><input type="image" src="https://raw.githubusercontent.com/mdn/learning-area/master/html/forms/image-type-example/login.png" width="70"></td></tr><tr><td><code>type="reset"</code></td><td><input type="reset"></td></tr><tr><td><code>type="button"</code></td><td><input type="button"></td></tr><tr><td><code>type="submit"</code></td><td><input type="submit"></td></tr></tbody></table>
</div></div><div class="h3wrap-body"><div class="wrap h4body-not-exist"><div class="wrap-header h4wrap"><h4 id="html5-中的新输入类型"><a aria-hidden="true" tabindex="-1" href="#html5-中的新输入类型"><span class="icon icon-link"></span></a>HTML5 中的新输入类型</h4><div class="wrap-body">
</div></div><div class="h3wrap-body"><h4 id="html5-中的新输入类型"><a aria-hidden="true" tabindex="-1" href="#html5-中的新输入类型"><span class="icon icon-link"></span></a>HTML5 中的新输入类型</h4>
@ -1056,7 +1056,7 @@
<table><thead><tr><th></th><th></th></tr></thead><tbody><tr><td><code>type="color"</code></td><td><input type="color" value="#0FB881"></td></tr><tr><td><code>type="date"</code></td><td><input type="date"></td></tr><tr><td><code>type="time"</code></td><td><input type="time"></td></tr><tr><td><code>type="month"</code></td><td><input type="month"></td></tr><tr><td><code>type="datetime-local"</code></td><td><input type="datetime-local"></td></tr><tr><td><code>type="week"</code></td><td><input type="week"></td></tr><tr><td><code>type="email"</code></td><td><input type="email"></td></tr><tr><td><code>type="tel"</code></td><td><input type="tel"></td></tr><tr><td><code>type="url"</code></td><td><input type="url"></td></tr><tr><td><code>type="number"</code></td><td><input type="number"></td></tr><tr><td><code>type="search"</code></td><td><input type="search"></td></tr><tr><td><code>type="range"</code></td><td><input type="range"></td></tr></tbody></table>
</div></div></div></div></div><div class="wrap 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">
</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">