diff options
| author | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:40:17 -0500 |
|---|---|---|
| committer | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:40:17 -0500 |
| commit | 33058f2b292b3a581333bdfb21b8f671898c5060 (patch) | |
| tree | 51c3e392513ec574331b2d3f85c394445ea803c6 /files/zh-cn/web/html/element | |
| parent | 8b66d724f7caf0157093fb09cfec8fbd0c6ad50a (diff) | |
| download | translated-content-33058f2b292b3a581333bdfb21b8f671898c5060.tar.gz translated-content-33058f2b292b3a581333bdfb21b8f671898c5060.tar.bz2 translated-content-33058f2b292b3a581333bdfb21b8f671898c5060.zip | |
initial commit
Diffstat (limited to 'files/zh-cn/web/html/element')
164 files changed, 30809 insertions, 0 deletions
diff --git a/files/zh-cn/web/html/element/a/index.html b/files/zh-cn/web/html/element/a/index.html new file mode 100644 index 0000000000..e48a805692 --- /dev/null +++ b/files/zh-cn/web/html/element/a/index.html @@ -0,0 +1,336 @@ +--- +title: <a> +slug: Web/HTML/Element/a +tags: + - Element + - HTML + - HTML text-level semantics + - Reference + - Web + - 元素 +translation_of: Web/HTML/Element/a +--- +<div>{{HTMLRef}}</div> + +<p><span class="seoSummary"><strong>HTML <code><a></code> 元素</strong>（或称锚元素）可以创建通向其他网页、文件、同一页面内的位置、电子邮件地址或任何其他 URL 的超链接。</span></p> + +<div>{{EmbedInteractiveExample("pages/tabbed/a.html")}}</div> + + + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><dfn><a href="/en-US/docs/HTML/Content_categories" title="HTML/Content_categories">内容分类</a></dfn></th> + <td>流内容、文字内容、交互内容、可触摸内容。</td> + </tr> + <tr> + <th scope="row"><dfn>允许的内容 </dfn></th> + <td>可见的内容（Transparent），包含流内容（不包括交互式内容）或文字内容（phrasing content）。</td> + </tr> + <tr> + <th scope="row"><dfn>标签省略</dfn></th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th scope="row"><dfn>允许的父元素</dfn></th> + <td>接受短语内容的任何元素或接受流内容的任何元素，但始终不接受 <a> 元素（根据对称的逻辑原理，如果 <a> 标记作为父元素，不能具有交互内容，则相同的 <a> 内容不能具有 <a> 标记作为其父元素）。</td> + </tr> + <tr> + <th scope="row">Permitted ARIA roles</th> + <td>{{ARIARole("button")}}, {{ARIARole("checkbox")}}, {{ARIARole("menuitem")}}, {{ARIARole("menuitemcheckbox")}}, {{ARIARole("menuitemradio")}}, {{ARIARole("option")}}, {{ARIARole("radio")}}, {{ARIARole("switch")}}, {{ARIARole("tab")}}, {{ARIARole("treeitem")}}</td> + </tr> + <tr> + <th scope="row"><dfn>DOM 接口</dfn></th> + <td>{{domxref("HTMLAnchorElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="属性">属性</h2> + +<p>该元素的属性包含<a href="/zh-CN/docs/HTML/Global_attributes">全局属性</a>。</p> + +<dl> + <dt>{{htmlattrdef("download")}} {{HTMLVersionInline(5)}}</dt> + <dd>此属性指示浏览器下载 URL 而不是导航到它，因此将提示用户将其保存为本地文件。如果属性有一个值，那么此值将在下载保存过程中作为预填充的文件名（如果用户需要，仍然可以更改文件名）。此属性对允许的值没有限制，但是 <code>/</code> 和 <code>\</code> 会被转换为下划线。大多数文件系统限制了文件名中的标点符号，故此，浏览器将相应地调整建议的文件名。 + <div class="note"><strong>注意:</strong> + <ul> + <li>此属性仅适用于<a href="/zh-CN/docs/Web/Security/Same-origin_policy">同源 URL</a>。</li> + <li>尽管 HTTP URL 需要位于同一源中，但是可以使用 <a href="/zh-CN/docs/Web/API/URL.createObjectURL"><code>blob:</code> URL</a> 和 <a href="/zh-CN/docs/Web/HTTP/Basics_of_HTTP/Data_URIs"><code>data:</code> URL</a> ，以方便用户下载使用 JavaScript 生成的内容（例如使用在线绘图 Web 应用程序创建的照片）。</li> + <li>如果 HTTP 头中的 <a href="/zh-CN/docs/Web/HTTP/Headers/Content-Disposition">Content-Disposition</a> 属性赋予了一个不同于此属性的文件名，HTTP 头属性优先于此属性。</li> + <li>如果 HTTP 头属性 <code>Content-Disposition</code> 被设置为inline（即 <code>Content-Disposition='inline'</code>），那么 Firefox 优先考虑 HTTP 头 <code>Content-Disposition</code>download 属性。</li> + </ul> + </div> + </dd> + <dt>{{htmlattrdef("href")}}</dt> + <dd>包含超链接指向的 URL 或 URL 片段。</dd> + <dd>URL 片段是哈希标记（#）前面的名称，哈希标记指定当前文档中的内部目标位置（HTML 元素的 ID）。URL 不限于基于 Web（HTTP）的文档，也可以使用浏览器支持的任何协议。例如，在大多数浏览器中正常工作的<a class="external external-icon" href="https://en.wikipedia.org/wiki/File_URI_scheme"><code>file:</code></a>、ftp:和mailto：。 + <div class="note"> + <p><strong>注意:</strong> 可以使用 <code>href="#top"</code> 或者 <code>href="#"</code> 链接返回到页面顶部。<a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/history.html#scroll-to-fragid">这种行为是 HTML5 的特性</a>。</p> + </div> + </dd> + <dt>{{htmlattrdef("hreflang")}}</dt> + <dd>该属性用于指定链接文档的人类语言。其仅提供建议，并没有内置的功能。hreflang 允许的值取决于HTML5 <a class="external" href="http://www.ietf.org/rfc/bcp/bcp47.txt" title="http://www.ietf.org/rfc/bcp/bcp47.txt">BCP47</a>。</dd> + <dt>{{htmlattrdef("ping")}}</dt> + <dd>包含一个以空格分隔的url列表，当跟随超链接时，将由浏览器(在后台)发送带有正文 PING 的 POST 请求。通常用于跟踪。</dd> + <dd> + + </dd> + <dt>{{htmlattrdef("referrerpolicy")}} {{experimental_inline}}</dt> + <dd>表明在获取URL时发送哪个提交者（referrer）: + <ul> + <li><code>"no-referrer"</code> 表示 <code>Referer:</code> 头将不会被发送。</li> + <li><code>"no-referrer-when-downgrade"</code> 表示当从使用HTTPS的页面导航到不使用 TLS(HTTPS)的来源 时不会发送 <code>Referer:</code> 头。如果没有指定策略，这将是用户代理的默认行为。</li> + <li><code>"origin"</code> 表示 referrer将会是页面的来源，大致为这样的组合：主机和端口（不包含具体的路径和参数的信息）。</li> + <li>"origin-when-cross-origin" 表示导航到其它源将会限制为这种组合：主机 + 端口，而导航到相同的源将会只包含 referrer的路径。</li> + <li><code>'strict-origin-when-cross-origin'</code></li> + <li><code>"unsafe-url"</code> 表示 referrer将会包含源和路径（domain + path）（但是不包含密码或用户名的片段）。这种情况是不安全的，因为它可能会将安全的URLs数据泄露给不安全的源。</li> + </ul> + </dd> +</dl> + +<dl> + <dt>{{htmlattrdef("rel")}}</dt> + <dd>该属性指定了目标对象到链接对象的关系。该值是空格分隔的<a href="/zh-CN/docs/Web/HTML/Link_types">列表类型值</a>。</dd> + <dt>{{htmlattrdef("target")}}</dt> + <dd>该属性指定在何处显示链接的资源。 取值为标签（tab），窗口（window），或框架（iframe）等浏览上下文的名称或其他关键词。以下关键字具有特殊的意义: + <ul> + <li><code>_self</code>: 当前页面加载，即当前的响应到同一HTML 4 frame（或HTML5浏览上下文）。此值是默认的，如果没有指定属性的话。</li> + <li><code>_blank</code>: 新窗口打开，即到一个新的未命名的HTML4窗口或HTML5浏览器上下文</li> + <li><code>_parent</code>: 加载响应到当前框架的HTML4父框架或当前的HTML5浏览上下文的父浏览上下文。如果没有parent框架或者浏览上下文，此选项的行为方式与 <code>_self</code> 相同。</li> + <li><code>_top</code>: IHTML4中：加载的响应成完整的，原来的窗口，取消所有其它frame。 HTML5中：加载响应进入顶层浏览上下文（即，浏览上下文，它是当前的一个的祖先，并且没有parent）。如果没有parent框架或者浏览上下文，此选项的行为方式相同_self</li> + </ul> + </dd> + <dd> + <div class="note"> + <p><strong>注意：</strong>使用target时，考虑添加 rel="noopener noreferrer" 以防止针对 window.opener API 的恶意行为。</p> + </div> + </dd> + <dd> + <div class="note"> + <p><strong>Note:</strong> Linking to another page using <code>target="_blank"</code> will run the new page on the same process as your page. If the new page is executing expensive JS, your page's performance may suffer. To avoid this use <code>rel=noopener</code>.</p> + </div> + </dd> + <dt>{{htmlattrdef("type")}}</dt> + <dd>该属性指定在一个 {{Glossary("MIME type")}} 链接目标的形式的媒体类型。其仅提供建议，并没有内置的功能。</dd> + <dt> + <h3 id="过时的">过时的</h3> + </dt> + <dt>{{htmlattrdef("charset")}} {{obsoleteGeneric("inline","HTML5")}}</dt> + <dd>此属性定义链接资源的字符编码。该值是一个空格- 和/或逗号分隔的<a class="external" href="http://tools.ietf.org/html/rfc2045" style="color: rgb(102, 153, 204); text-decoration: none; padding-right: 16px; background-color: rgb(255, 255, 255); font-family: 'Lucida Grande', 'Lucida Sans Unicode', 'DejaVu Sans', Lucida, Arial, Helvetica, sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 22px; text-align: start; text-indent: 0px; text-transform: none; white-space: normal;" title="http://tool??s.ietf.org/html/rfc2045">RFC 2045</a>中定义的字符集列表。默认值是ISO-8859-1。 + <div class="note"> + <p><strong>使用说明: </strong>在 HTML5 中该属性已作废，不应使用。 为了实现其效果，使用HTTP content - type header的链接资源。</p> + </div> + </dd> + <dt>{{htmlattrdef("coords")}} {{HTMLVersionInline(4)}} only, {{obsoleteGeneric("inline","HTML5")}}</dt> + <dd>对于使用对象的形状，此属性使用逗号分隔的数字列表来定义对象在页面上的坐标。</dd> + <dt>{{htmlattrdef("name")}} {{HTMLVersionInline(4)}} only, {{obsoleteGeneric("inline","HTML5")}}</dt> + <dd>该属性在页面中定义锚点的目标位置时是必须的。 <strong>name</strong> 的值类似于ID核心属性值，该属性值在文档中是唯一的且由数字字母标示符所组成的。在 HTML 4.01 规范中, <strong>id</strong> 和 <strong>name</strong> 都可以使用 <a> 元素，只要他们有相同的值。 + <div class="note"> + <p><strong>使用说明:</strong> 该属性在 HTML5中是过时的, 使用 <a href="/zh-CN/docs/HTML/Global_attributes#attr-id" title="HTML/Global attributes#id">全局属性 <strong>id</strong></a> 来代替。</p> + </div> + </dd> + <dt>{{htmlattrdef("rev")}} {{HTMLVersionInline(4)}} only, {{obsoleteGeneric("inline","HTML5")}}</dt> + <dd>该属性用于指定当前文档与被链接文档的关系。用于 <a> 标签的可选属性 rel 和 rev 分别表示源文档与目标文档之间正式的关系和方向。rel 属性指定从源文档到目标文档的关系，而 rev 属性则指定从目标文档到源文档的关系。这两种属性可以在 <a> 标签中同时使用。对于网页编者来说，这个属性很有用，可以通过它来查看外链的来源。</dd> +</dl> + +<dl> + <dt>{{htmlattrdef("shape")}} {{HTMLVersionInline(4)}} only, {{obsoleteGeneric("inline","HTML5")}}</dt> + <dd>此属性用于定义一个可选的超链接相关的一个数字来创建图像映射区域，该属性的值是圆，默认情况下，多边形，矩形。 所述的<strong>coords</strong> 属性的格式取决于形状的值。对于圆，该值的x，y，r其中x和y为圆心像素坐标，r是像素值半径。对于矩形，该<strong>coords</strong> 属性应该是x，y，w，h。x，y值定义的矩形的左上角的位置，而w和h分别定义宽度和高度。多边形形状的值需要x1，y1，x2，y2，......值来定义coords。每对x，y定义多边形的一个点，连续点由直线接合和，最后一个点连接到第一个点。默认为形状的值需要将整个封闭区域，典型的图像，可以使用。 + <div class="note"><strong>说明：</strong>建议使用 <a href="/zh-CN/docs/Web/HTML/Element/img#attr-usemap">使用 map 属性</a>在 {{HTMLElement("img")}} 元素和相关的{{HTMLElement("map")}}元素中来定义热点而不是用形状属性。</div> + </dd> +</dl> + +<h2 id="示例">示例</h2> + +<h3 id="链接到外部地址">链接到外部地址</h3> + +<pre class="brush: html"><!-- anchor linking to external file --> +<a href="http://www.mozilla.com/"> +External Link +</a> +</pre> + +<h4 id="Result" name="Result">结果</h4> + +<p><a class="external" href="http://www.mozilla.com/">外部链接</a></p> + +<h3 id="链接到本页的某个部分">链接到本页的某个部分</h3> + +<pre class="brush: html"><!-- links to element on this page with id="attr-href" --> +<a href="#属性"> +Description of Same-Page Links +</a></pre> + +<h4 id="结果">结果</h4> + +<p><a href="#属性">相同页面链接的描述</a></p> + +<h3 id="创建一个可点击的图片">创建一个可点击的图片</h3> + +<p>这个小例子使用图像链接到MDN主页。主页将在新的浏览环境，这是一个新的页面或新标签中打开研究。</p> + +<pre class="brush: html"><a href="https://developer.mozilla.org/en-US/"> + <img src="https://mdn.mozillademos.org/files/6851/mdn_logo.png" + alt="MDN logo" /> +</a> +</pre> + +<h4 id="结果_2">结果</h4> + +<figure> +<p>{{EmbedLiveSample("创建一个可点击的图片", "320", "64")}}</p> +</figure> + +<h3 id="创建一个email链接">创建一个email链接</h3> + +<p>这是常见的创建按钮或链接，将用户的电子邮件程序打开，让他们发送新邮件。这是通过使用一个mailto链接完成的。这里有一个简单的例子：</p> + +<pre class="brush: html"><a href="mailto:nowhere@mozilla.org">Send email to nowhere</a> +</pre> + +<p>生成这样的链接: <a href="mailto:nowhere@mozilla.org">Send email to nowhere</a>.</p> + +<p>有关mailto URL方案的更多细节，比如如何包含主题，正文，或其他预定内容，参考 <a href="/zh-CN/docs/Web/Guide/HTML/Email_links">Email links</a> or {{RFC(6068)}}.</p> + +<h3 id="创建电话链接">创建电话链接</h3> + +<p>提供电话链接有助于用户查看连接到手机的网络文档和笔记本电脑。</p> + +<pre class="brush: html"><a href="tel:+491570156">+49 157 0156</a> +</pre> + +<p>更详细的语法请参考 {{RFC(3966)}}。</p> + +<h3 id="使用_download_属性将_<canvas>_保存为_PNG_格式">使用 download 属性将 <code><canvas></code> 保存为 PNG 格式</h3> + +<p>如果你想允许用户下载一个HTML画布，你可以创建一个下载属性和画布数据作为文件URL链接图像：</p> + +<pre class="brush: js">var link = document.createElement('a'); +link.innerHTML = 'download image'; + +link.addEventListener('click', function(ev) { + link.href = canvas.toDataURL(); + link.download = "mypainting.png"; +}, false); + +document.body.appendChild(link);</pre> + +<p>可以查看这个例子 <a href="https://jsfiddle.net/codepo8/V6ufG/2/">https://jsfiddle.net/codepo8/V6ufG/2/</a></p> + +<h2 id="备注">备注</h2> + +<p>html 3.2 只定义 name, href, rel, rev, 和 title 属性。</p> + +<h3 id="无障碍建议">无障碍建议</h3> + +<p>锚点标签常常通过将 <strong>href </strong>属性设置为 <code>"#"</code> 或 <code>"javascript:void(0)" 来创造一个能阻止页面刷新的伪按钮的方式</code>被滥用。 这些属性值会在拖动 / 复制链接时导致意外行为，在新窗口 / 新标签打开链接，加入书签以及 JavaScript 仍在下载时会出现错误或被禁用。这也会向辅助技术（如屏幕阅读器）传达不正确的语义。在这些情况下，推荐使用 {{HTMLElement("button")}} 来代替。通常情况下，您应该只将锚点用于正常的 URL 导航。</p> + +<h3 id="Clicking_及_focus">Clicking 及 focus</h3> + +<p>点击一个 {{HTMLElement("a")}} 标签是否会出现 focus 取决于浏览器和操作系统。</p> + +<table> + <caption>点击一个 {{HTMLElement("a")}} 标签是否使其获得焦点？</caption> + <tbody> + <tr> + <td>桌面浏览器</td> + <th>Windows 8.1</th> + <th>OS X 10.9</th> + </tr> + <tr> + <th>Firefox 30.0</th> + <td style="background-color: LawnGreen;">是</td> + <td style="background-color: LawnGreen;">是</td> + </tr> + <tr> + <th>Chrome ≥39<br> + (<a href="https://code.google.com/p/chromium/issues/detail?id=388666" title="Issue 388666: Focus anchor (A) elements on mousedown">Chromium bug 388666</a>)</th> + <td style="background-color: LawnGreen;">是</td> + <td style="background-color: LawnGreen;">是</td> + </tr> + <tr> + <th>Safari 7.0.5</th> + <td style="background-color: silver;">不可用</td> + <td style="background-color: yellow;">仅当包含 <code>tabindex 属性时</code></td> + </tr> + <tr> + <th>Internet Explorer 11</th> + <td style="background-color: LawnGreen;">是</td> + <td style="background-color: silver;">不可用</td> + </tr> + <tr> + <th>Presto (Opera 12)</th> + <td style="background-color: LawnGreen;">是</td> + <td style="background-color: LawnGreen;">是</td> + </tr> + </tbody> +</table> + +<table> + <caption>轻触一个 {{HTMLElement("a")}} 标签是否使其获得焦点？</caption> + <tbody> + <tr> + <td>移动浏览器</td> + <th>iOS 7.1.2</th> + <th>Android 4.4.4</th> + </tr> + <tr> + <th>Safari Mobile</th> + <td style="background-color: yellow;">仅当包含 <code>tabindex 属性时</code></td> + <td style="background-color: silver;">不可用</td> + </tr> + <tr> + <th>Chrome 35</th> + <td>未知</td> + <td style="background-color: yellow;">仅当包含 <code>tabindex 属性时</code></td> + </tr> + </tbody> +</table> + +<h2 id="Specifications" name="Specifications">规范</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('Referrer Policy', '#referrer-policy-delivery-referrer-attribute', 'referrer attribute')}}</td> + <td>{{Spec2('Referrer Policy')}}</td> + <td>Added the <code>referrer </code>attribute.</td> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', 'text-level-semantics.html#the-a-element', '<a>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'textlevel-semantics.html#the-a-element', '<a>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/links.html#h-12.2', '<a>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + + + +<p>{{Compat("html.elements.a")}}</p> + +<h2 id="相关链接">相关链接</h2> + +<ul> + <li>其它传递<a href="/zh-CN/docs/HTML/Text_level_semantics_conveying_elements" title="HTML/Text level semantics conveying elements">文本级语义</a>的元素：{{HTMLElement("abbr")}}, {{HTMLElement("em")}}, {{HTMLElement("strong")}}, {{HTMLElement("small")}}, {{HTMLElement("cite")}}, {{HTMLElement("q")}}, {{HTMLElement("dfn")}}, {{HTMLElement("time")}}, {{HTMLElement("code")}}, {{HTMLElement("var")}}, {{HTMLElement("samp")}}, {{HTMLElement("kbd")}}, {{HTMLElement("sub")}}, {{HTMLElement("sup")}}, {{HTMLElement("b")}}, {{HTMLElement("i")}}, {{HTMLElement("mark")}}, {{HTMLElement("ruby")}}, {{HTMLElement("rp")}}, {{HTMLElement("rt")}}, {{HTMLElement("bdo")}}, {{HTMLElement("span")}}, {{HTMLElement("br")}}, {{HTMLElement("wbr")}}.</li> +</ul> diff --git a/files/zh-cn/web/html/element/abbr/index.html b/files/zh-cn/web/html/element/abbr/index.html new file mode 100644 index 0000000000..a59a429de1 --- /dev/null +++ b/files/zh-cn/web/html/element/abbr/index.html @@ -0,0 +1,214 @@ +--- +title: <abbr> +slug: Web/HTML/Element/abbr +tags: + - Element + - HTML + - HTML text-level semantics + - Reference + - Web + - abbr +translation_of: Web/HTML/Element/abbr +--- +<p>{{HTMLRef}}</p> + +<p><span class="seoSummary"><strong>HTML 缩写元素</strong>（<strong><code><abbr></code></strong>）用于代表缩写，并且可以通过可选的 {{htmlattrxref("title")}} 属性提供完整的描述。</span>若使用 <code>title</code> 属性，则它必须且仅可包含完整的描述内容。</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/abbr.html", "tabbed-shorter")}}</div> + +<div></div> + +<p class="hidden">Github 的仓库中存储了该可交互化的示例项目。如果宁愿意为此可交互化的示例项目作出贡献，请克隆<a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> 并向我们提起 pull 请求。</p> + +<p>这篇文章： <em><a href="/en-US/Learn/HTML/Howto/Mark_abbreviations_and_make_them_understandable">How to mark abbreviations and make them understandable</a></em> 是一份学习使用 <code><abbr></code> 与其他相关元素的指南。</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/en-US/docs/HTML/Content_categories">Content categories</a></th> + <td><a href="/en-US/docs/HTML/Content_categories#Flow_content">Flow content</a>, <a href="/en-US/docs/HTML/Content_categories#Phrasing_content">phrasing content</a>, palpable content</td> + </tr> + <tr> + <th scope="row">Permitted content</th> + <td><a href="/en-US/docs/HTML/Content_categories#Phrasing_content">Phrasing content</a></td> + </tr> + <tr> + <th scope="row">Tag omission</th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th scope="row">Permitted parents</th> + <td>Any element that accepts <a href="/en-US/docs/HTML/Content_categories#Phrasing_content">phrasing content</a></td> + </tr> + <tr> + <th scope="row">Permitted ARIA roles</th> + <td>Any</td> + </tr> + <tr> + <th scope="row">DOM Interface</th> + <td>{{domxref("HTMLElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="属性">属性</h2> + +<p><span style="line-height: 21px;"><span style="line-height: 21px;">这个元素只有</span></span><a href="https://developer.mozilla.org/zh-CN/docs/Web/HTML/Global_attributes" style="line-height: 21px;" title="HTML/Global attributes">全局属性</a>。在同 <code><abbr></code> 元素一起使用的时候，{{htmlattrxref("title")}} 属性有特殊的语法含义; 它必须包含对一个缩写完全天然可读的扩写或者描述。这些文本通常会作为提示，在鼠标指针覆盖到该元素时显示作为一个提示。</p> + +<p>你使用的每一个 <code><abbr></code> 元素与其它同类元素都是相互独立的，为其中一个提供 <code>title</code> 不会自动把相同的附加文字依附到其它内容文字相同的元素上。</p> + +<h2 id="用法注解">用法注解</h2> + +<h3 id="典型使用场景">典型使用场景</h3> + +<p>当然，我们不是所有的缩写都要使用<code><abbr></code>标记。但是其在下面一些场景很有帮助：</p> + +<ul> + <li>当你想为缩写在文档流外提供一段扩展或定义的时候，为 <code><abbr></code> 设置一个合适的{{htmlattrxref("title")}}。</li> + <li>在定义一个读者可能不太熟悉的缩写时，使用 <code><abbr></code> 和<code>title</code>属性或内联的文本来表现这个术语。</li> + <li>当文本中出现需要进行语义上的标注的缩写词时，<code><abbr></code>元素可用于依次将其作用样式和脚本。</li> + <li>You can use <code><abbr></code> in concert with {{HTMLElement("dfn")}} to establish definitions for terms which are abbreviations or acronyms. See the example {{anch("Defining an abbreviation")}} below.</li> + <li>可以将 <code><abbr></code> 与 {{HTMLElement("dfn")}} 配合使用来建立缩写或首字母缩略词的定义。 请参阅下面的示例 {{anch("定义一个缩写")}}。</li> +</ul> + +<h3 id="语法注意事项">语法注意事项</h3> + +<p>在有 {{interwiki("wikipedia", "单复数")}} 的语言中（即物体数量会影响句子语法的语言）， <code><abbr></code> 元素和其中的 <code>title</code> 属性应当单复数一致。这在阿拉伯语这样超过二数的语言中非常重要，在英语中也有一定的影响。</p> + +<h2 id="默认样式">默认样式</h2> + +<p>虽然完全为了网站制作者的方便，所有的浏览器都默认把这个元素显示为行内元素 ({{cssxref('display')}}<code>: inline</code>) ，但是默认样式在不同浏览器中存在差别：</p> + +<ul> + <li>一些浏览器，比如 IE，对它的添加的样式和{{HTMLElement("span")}} 元素的样式完全相同。</li> + <li>Opera、Firefox 和其他一些浏览器给这个元素的内容添加一条点状下划线 。</li> + <li>一些浏览器不仅添加点状下划线，而且还把元素的内容添加小写大写字母的样式。若要避免这种样式，在 CSS 中添加 {{cssxref('font-variant')}}<code>: none</code> 。</li> +</ul> + +<h2 id="例子">例子</h2> + +<h3 id="创建语义化的缩写">创建语义化的缩写</h3> + +<p> 想要创建不含解释或描述性的缩写，就直接用<code><abbr></code>不添加任何属性。请看下面的例子。</p> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html notranslate"><p>Using <abbr>HTML</abbr> is fun and easy!</p></pre> + +<h4 id="结果">结果</h4> + +<p>{{EmbedLiveSample("Marking_up_an_abbreviation_semantically")}}</p> + +<h3 id="缩写样式">缩写样式</h3> + +<p>你可以像这个简单的例子一样，用CSS来为缩写做一个样式。</p> + +<h4 id="HTML_2">HTML</h4> + +<pre class="brush: html notranslate"><p>Using <abbr>CSS</abbr>, you can style your abbreviations!</p></pre> + +<h4 id="CSS">CSS</h4> + +<pre class="brush: css notranslate">abbr { + font-variant: all-small-caps; +}</pre> + +<h4 id="Result">Result</h4> + +<p>{{EmbedLiveSample("Styling_abbreviations")}}</p> + +<h3 id="提供扩展">提供扩展</h3> + +<p>Adding a {{htmlattrxref("title")}} attribute lets you provide an expansion or definition for the abbreviation or acronym.</p> + +<p>添加一个 {{htmlattrxref("title")}} 属性，为缩写提供定义或拓展。</p> + +<h4 id="HTML_3">HTML</h4> + +<pre class="brush: html notranslate"><p>Ashok's joke made me <abbr title="Laugh Out Loud">LOL</abbr> big +time.</p></pre> + +<h4 id="结果_2">结果</h4> + +<p>{{EmbedLiveSample("Providing_an_expansion")}}</p> + +<h3 id="定义一个缩写">定义一个缩写</h3> + +<p>You can use <code><abbr></code> in tandem with {{HTMLElement("dfn")}} to more formally define an abbreviation, as shown here.</p> + +<p><code><abbr></code> 与 {{HTMLElement("dfn")}} 联合使用可以定义一个更加正式的缩写，如下：</p> + +<h4 id="HTML_4">HTML</h4> + +<pre class="brush: html notranslate"><p><dfn id="html"><abbr title="HyperText Markup Language">HTML</abbr> +</dfn> is a markup language used to create the semantics and structure +of a web page.</p> + +<p>A <dfn id="spec">Specification</dfn> +(<abbr title="Specification">spec</abbr>) is a document that outlines +in detail how a technology or API is intended to function and how it is +accessed.</p></pre> + +<h4 id="结果_3">结果</h4> + +<p>{{EmbedLiveSample("Defining_an_abbreviation", 600, 120)}}</p> + +<p>可以在 <em><a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting#Abbreviations">How to mark abbreviations and make them understandable</a></em> 中浏览更多深层次的实例.</p> + +<h2 id="可访问性问题">可访问性问题</h2> + +<p>在缩略词第一次出现在页面的时候，将它书写完整对帮助人们理解很有用处的，特别是内容是技术或者工业术语</p> + +<h4 id="Example">Example</h4> + +<pre class="brush: html notranslate"><p>JavaScript Object Notation (<abbr>JSON</abbr>) is a lightweight data-interchange format.</p> + +</pre> + +<p>这对于不熟悉内容中讨论的术语或概念的人，对语言不熟悉的人以及具有认知问题的人特别有用。</p> + +<h2 id="规范">规范</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">规范</th> + <th scope="col">状态</th> + <th scope="col">备注</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'semantics.html#the-abbr-element', '<abbr>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'textlevel-semantics.html#the-abbr-element', '<abbr>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/text.html#edef-ABBR', '<abbr>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + + + +<p>{{Compat("html.elements.abbr")}}</p> + +<h2 id="参见">参见</h2> + +<ul> + <li><a href="/zh-CN/docs/learn/HTML/Introduction_to_HTML/Advanced_text_formatting#%E7%BC%A9%E7%95%A5%E8%AF%AD">高级文字格式 - 使用 <code><abbr></code> 元素</a></li> +</ul> + +<ul> + <li>其他传达文本级语义的元素：{{HTMLElement("a")}}, {{HTMLElement("em")}}, {{HTMLElement("strong")}}, {{HTMLElement("small")}}, {{HTMLElement("cite")}}, {{HTMLElement("q")}}, {{HTMLElement("dfn")}}, {{HTMLElement("time")}}, {{HTMLElement("code")}}, {{HTMLElement("var")}}, {{HTMLElement("samp")}}, {{HTMLElement("kbd")}}, {{HTMLElement("sub")}}, {{HTMLElement("sup")}}, {{HTMLElement("b")}}, {{HTMLElement("i")}}, {{HTMLElement("mark")}}, {{HTMLElement("ruby")}}, {{HTMLElement("rp")}}, {{HTMLElement("rt")}}, {{HTMLElement("bdo")}}, {{HTMLElement("span")}}, {{HTMLElement("br")}}, {{HTMLElement("wbr")}}.</li> + <li>已被弃用的 {{HTMLElement("acronym")}} 元素，原被用于展示首字母缩写。其作用被归入了 <code><abbr></code> 的作用中。</li> +</ul> diff --git a/files/zh-cn/web/html/element/acronym/index.html b/files/zh-cn/web/html/element/acronym/index.html new file mode 100644 index 0000000000..5d6cf1d8ae --- /dev/null +++ b/files/zh-cn/web/html/element/acronym/index.html @@ -0,0 +1,120 @@ +--- +title: <acronym> +slug: Web/HTML/Element/acronym +tags: + - <acronym> +translation_of: Web/HTML/Element/acronym +--- +<div>{{obsolete_header}}</div> + +<h2 id="Summary" name="Summary">简介</h2> + +<p>HTML Acronym 元素 (<code><acronym>)</code> 允许作者明确地声明一个字符序列,，它们构成一个单词的首字母缩写或简略语。</p> + +<div class="note"> +<p><strong>用法提示: </strong>. 该元素已从HTML5中移除，不应再被使用。Web开发者应使用 {{HTMLElement("abbr")}} 元素.</p> +</div> + +<h2 id="Attributes" name="Attributes">属性</h2> + +<p>该元素除了 <a class="new " href="/en-US/docs/HTML/global_attributes" rel="internal" title="HTML/global attributes">global attributes</a>, 所有其他元素的公共属性之外没有其他属性.</p> + +<h2 id="DOM_Interface" name="DOM_Interface">DOM 接口</h2> + +<p>该元素实现了 {{domxref('HTMLElement')}} 接口.</p> + +<div class="note"><strong>实现提示: </strong>直到 Gecko 1.9.2（包含），Firefox 为这个元素实现了 {{domxref('HTMLSpanElement')}} 接口。</div> + +<h2 id="Example" name="Example">例子</h2> + +<pre class="brush:html"><p>The <acronym title="World Wide Web">WWW</acronym> is only one component of the Internet.</p> +</pre> + +<h2 id="Default_styling" name="Default_styling">默认样式</h2> + +<p>尽管这个标签的目的纯粹是为了方便作者，它的默认样式却在各个浏览器中不尽相同:</p> + +<ul> + <li>一些浏览器, 像Internet Explorer, 赋予它和 {{HTMLElement("span")}} 元素相同的样式。</li> + <li>Opera, Firefox, 和 一些其他的浏览器在元素内容下方添加了一条点状的下划线。</li> + <li>一小部分浏览器不仅添加了点状下划线， 而且 put it in small caps; 为避免这种样式， 可以在 CSS 中添加{{cssxref('font-variant')}}<code>: none</code> 处理这种情况。</li> +</ul> + +<p>因此强烈建议Web作者们不要依赖默认的样式.</p> + +<h2 id="Specifications" name="Specifications">规范</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">规范</th> + <th scope="col">状态</th> + <th scope="col">备注</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML4.01', 'struct/text.html#edef-ACRONYM', '<acronym>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">浏览器兼容性</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>特性</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>基本支持</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>特性</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>基本支持</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="See_also" name="See_also">另见</h2> + +<ul> + <li>{{HTMLElement("abbr")}} HTML 元素</li> +</ul> + +<div>{{HTMLRef}}</div> diff --git a/files/zh-cn/web/html/element/address/index.html b/files/zh-cn/web/html/element/address/index.html new file mode 100644 index 0000000000..0de11f9078 --- /dev/null +++ b/files/zh-cn/web/html/element/address/index.html @@ -0,0 +1,125 @@ +--- +title: <address> +slug: Web/HTML/Element/address +tags: + - HTML + - 元素 +translation_of: Web/HTML/Element/address +--- +<div>{{HTMLRef}}</div> + +<p><strong>HTML <code><address></code> 元素</strong> 表示其中的 HTML 提供了某个人或某个组织（等等）的联系信息。</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/address.html", "tabbed-standard")}}</div> + +<p class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples </a> and send us a pull request.</p> + +<p> 由<code><address></code>元素中任何形式的内容所提供的联系信息适用于上下文的背景信息,可以是必要的任何一种联系方式,比如真实地址、URL、电子邮箱、电话号码、社交媒体账号、地理坐标等等。此元素应该包含联系信息对应的个人、团体或组织的名称。</p> + +<p> <code><address></code>可以使用在多种语境中，例如在文章开头提供商务的联系方式，或者放在{{HTMLElement("article")}}元素内，指明该文章的作者。</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/zh-cn/docs/Web/HTML/Content_categories">内容分类</a></th> + <td><a href="/en-US/docs/HTML/Content_categories#Flow_content">Flow content</a>, palpable content.</td> + </tr> + <tr> + <th scope="row">允许的内容</th> + <td><a href="/en-US/docs/HTML/Content_categories#Flow_content">Flow content</a>, 但是不能嵌套<code><address>元素</code>, 不能是头部内容 ({{HTMLElement("hgroup")}}, {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}}), 不能是区块内容 ({{HTMLElement("article")}}, {{HTMLElement("aside")}}, {{HTMLElement("section")}}, {{HTMLElement("nav")}}), 不能是{{HTMLElement("header")}} 或 {{HTMLElement("footer")}}元素.</td> + </tr> + <tr> + <th scope="row">标签省略</th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th scope="row">允许的父元素</th> + <td>Any element that accepts <a href="/en-US/docs/HTML/Content_categories#Flow_content">flow content</a>, but always excluding <code><address></code> elements (according to the logical principle of symmetry, if <code><address></code> tag, as a parent, can not have nested <code><address></code> element, then the same <code><address></code> content can not have <code><address></code> tag as its parent).</td> + </tr> + <tr> + <th scope="row">允许的 ARIA 角色</th> + <td>无</td> + </tr> + <tr> + <th scope="row">DOM 接口</th> + <td>{{domxref("HTMLElement")}} 在 Gecko 2.0（Firefox 4）以前，Gecko 使用 {{domxref("HTMLSpanElement")}} 接口实现这个元素</td> + </tr> + </tbody> +</table> + +<h2 id="属性">属性</h2> + +<p>此元素只有<a href="/zh-CN/docs/Web/HTML/Global_attributes">全局属性</a>。</p> + +<h2 id="用法说明">用法说明</h2> + +<ul> + <li>当表示一个和联系信息无关的任意的地址时，请改用 {{HTMLElement("p")}} 元素而不是 <code><address></code> 元素。</li> + <li>这个元素不能包含除联系信息之外的任何信息，比如出版日期（这应当被包含在 {{HTMLElement("time")}} 元素之中）。</li> + <li>通常，<code><address></code> 元素可以放在 {{HTMLElement("footer")}} 元素之中（如果存在的话）。</li> +</ul> + +<h2 id="示例">示例</h2> + +<p>这个例子演示了如何使用 <code><address></code> 表示一篇文章的作者的联系信息。</p> + +<pre class="brush: html"> <address> + You can contact author at <a href="http://www.somedomain.com/contact"> + www.somedomain.com</a>.<br> + If you see any bugs, please <a href="mailto:webmaster@somedomain.com"> + contact webmaster</a>.<br> + You may also want to visit us:<br> + Mozilla Foundation<br> + 331 E Evelyn Ave<br> + Mountain View, CA 94041<br> + USA + </address> +</pre> + +<h3 id="结果">结果</h3> + +<p>{{EmbedLiveSample("Example", "300", "200")}}</p> + +<p>虽然 <code><address></code> 元素看起来只是使用了 {{HTMLElement("i")}} 或者 {{HTMLElement("em")}} 元素的默认样式来渲染其中的文本，但是当处理联系信息时使用它更为合适，因为它表达了额外的语义信息。</p> + +<h2 id="规范">规范</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">规范</th> + <th scope="col">状态</th> + <th scope="col">备注</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'semantics.html#the-address-element', '<address>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'sections.html#the-address-element', '<address>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/global.html#h-7.5.6', '<address>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + + + +<p>{{Compat("html.elements.address")}}</p> + +<h2 id="另请参阅">另请参阅</h2> + +<ul> + <li>Others section-related elements: {{HTMLElement("body")}}, {{HTMLElement("nav")}}, {{HTMLElement("article")}}, {{HTMLElement("aside")}}, {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}}, {{HTMLElement("hgroup")}}, {{HTMLElement("footer")}}, {{HTMLElement("section")}}, {{HTMLElement("header")}};</li> + <li><a href="/zh-CN/docs/Web/Guide/HTML/Sections_and_Outlines_of_an_HTML5_document">使用 HTML 章节和大纲</a></li> +</ul> diff --git a/files/zh-cn/web/html/element/applet/index.html b/files/zh-cn/web/html/element/applet/index.html new file mode 100644 index 0000000000..410e432bb9 --- /dev/null +++ b/files/zh-cn/web/html/element/applet/index.html @@ -0,0 +1,120 @@ +--- +title: <applet> +slug: Web/HTML/Element/applet +tags: + - HTML + - 元素 + - 参考 + - 网页开发 +translation_of: Web/HTML/Element/applet +--- +<div>{{obsolete_header}}</div> + +<h2 id="概要">概要</h2> + +<p>HTML中的Applet元素(<code><applet></code>) 标志着包含了Java的applet。</p> + +<div class="note"> +<p><strong>注解： </strong>这个元素在HTML5中已经废弃了，不能再被使用。网页开发者应该使用更为通用的元素。</p> +</div> + +<h2 id="Attributes" name="Attributes">属性（Attributes）</h2> + +<dl> + <dt>{{htmlattrdef("align")}}</dt> + <dd>该属性被用来定义网页上applet相对于周围内容的对齐方式。HTML4.01规范定义了bottom, left, middle, right和 top的值，而Microsoft（微软）和Netscaple（网景）也可能支持<strong>absbottom</strong>, <strong>absmiddle</strong>, <strong>baseline</strong>, <strong>center</strong>和<strong>texttop。</strong></dd> + <dt>{{htmlattrdef("alt")}}</dt> + <dd>该属性造成在不支持Java的浏览器上显示出一段替代的描述性文字。 页面设计者应该记住在<code><applet></code> 元素中封闭的内容也可以呈现为替代性文本。</dd> + <dt>{{htmlattrdef("archive")}}</dt> + <dd>该属性涉及到applet的存档或压缩版本及其相关类文件，这可能会减少下载时间。</dd> + <dt>{{htmlattrdef("code")}}</dt> + <dd>该属性指定被加载和执行的applet类文件的URL。Applet文件名由一个.class文件扩展名定义。由code指定的URL可能与codebase属性有关。</dd> + <dt>{{htmlattrdef("codebase")}}</dt> + <dd>该属性给出绝对或相对的，由code属性引用的applet的.class文件储存的目录的URL。</dd> + <dt>{{htmlattrdef("datafld")}}</dt> + <dd>该属性支持Internet Explorer4及更高的版本，指定提供边界数据的数据源对象的列名。该属性可以用来指定各种传递到Java的{{HTMLElement("param")}} 元素。</dd> + <dt>{{htmlattrdef("datasrc")}}</dt> + <dd>就像datafld，该属性被用于Internet Explorer 4版本以下的数据绑定（data binding）。它指明了数据源对象的id，这个数据对象提供了被与applet有关的元素约束的数据。</dd> + <dt>{{htmlattrdef("height")}}</dt> + <dd>该属性提供了applet所需的高度，以像素为单位。</dd> + <dt>{{htmlattrdef("hspace")}}</dt> + <dd>该属性指定了保存在applet两侧的额外横向空间，以像素为单位。</dd> + <dt>{{htmlattrdef("mayscript")}}</dt> + <dd>在Netscape中，该属性允许使用在文档中嵌入的脚本语言程序访问applet。</dd> + <dt>{{htmlattrdef("name")}}</dt> + <dd>该属性为applet分配一个名称，以便它可以被其他资源识别，尤其是脚本语言。</dd> + <dt>{{htmlattrdef("object")}}</dt> + <dd>该属性指定一个序列化表示的applet的URL。</dd> + <dt>{{htmlattrdef("src")}}</dt> + <dd>为Internet Explorer 4 及更高版本制定, 该属性为applet相关文件指定一个URL。 该定义及使用是不明确的，也不属于HTML标准。</dd> + <dt>{{htmlattrdef("vspace")}}</dt> + <dd>该属性指定了保存在applet以上或以下的额外垂直空间，以像素为单位。</dd> + <dt>{{htmlattrdef("width")}}</dt> + <dd>该属性指定了applet所需的宽度，以像素为单位。</dd> +</dl> + +<h2 id="例子">例子</h2> + +<pre class="brush: html"><applet code="game.class" align="left" archive="game.zip" height="250" width="350"> + <param name="difficulty" value="easy"> + <b>Sorry, you need Java to play this game.</b> +</applet> +</pre> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>特征</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>基本支持</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>特征</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mini</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>基本支持</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="注意">注意</h2> + +<p>W3C规范不鼓励使用<code><applet>，更</code>倾向于使用{{HTMLElement("object")}}标签。因为HTML 4.01的严格定义，这个元素已经完全过时，在HTML5中不再被使用。</p> + +<div>{{HTMLRef}}</div> diff --git a/files/zh-cn/web/html/element/area/index.html b/files/zh-cn/web/html/element/area/index.html new file mode 100644 index 0000000000..0afb9521e6 --- /dev/null +++ b/files/zh-cn/web/html/element/area/index.html @@ -0,0 +1,207 @@ +--- +title: <area> +slug: Web/HTML/Element/area +tags: + - HTML + - Web + - 元素 + - 参考 + - 多媒体 +translation_of: Web/HTML/Element/area +--- +<h2 id="简要">简要</h2> + +<p class="seoSummary"><em>HTML <code><area></code> 元素 在图片上定义一个热点区域，可以关联一个超链接。<area>元素仅在<map>元素内部使用。</em></p> + +<ul class="htmlelt"> + <li><dfn><a href="/en-US/docs/HTML/Content_categories" title="HTML/Content_categories">内容分类</a></dfn> <a href="/en-US/docs/HTML/Content_categories#Flow_content" title="HTML/Content categories#Flow content">流内容</a>, <a href="/en-US/docs/HTML/Content_categories#Phrasing_content" title="HTML/Content categories#Phrasing content">短语内容</a>.</li> + <li><dfn>允许的内容</dfn>它是一个空的元素不允许嵌套任何子元素或者文本。</li> + <li><dfn>标签省略</dfn>只能允许有开始标签不允许有结束标签。</li> + <li><dfn>允许的父元素</dfn> <area>元素必须拥有一个<map>元素祖先元素，但不一定是直接的父元素。</li> + <li><dfn>DOM 接口</dfn> {{domxref("HTMLAreaElement")}}</li> +</ul> + +<h2 id="属性">属性</h2> + +<p>该元素包括全局属性。</p> + +<dl> + <dt>{{htmlattrdef("accesskey")}} {{HTMLVersionInline("4")}} only, {{obsolete_inline("5.0")}}</dt> + <dd>为元素指定一个获取焦点的快捷键。在与指定字符关联的情况下，按ALT或类似键选择与该键序列相关联的表单控件。页面设计人员避免使用已经绑定到浏览器的快捷键。这个属性自HTML5以来是全局性的。</dd> +</dl> + +<dl> + <dt>{{htmlattrdef("alt")}}</dt> + <dd>在未显示图像的浏览器上显示代替的文本字符串。这个文本应该能传达给用户与显示图像而没有文本的情况下同等的选择（译者注：就是字和图片表达一个意思）。在HTML4中， 这个属性时必需的, 但是可以是一个空的串("")。在HTML5中, 这个属性只有在<strong>href</strong> 属性被使用的时候才是必需的。</dd> +</dl> + +<dl> + <dt>{{htmlattrdef("coords")}}</dt> + <dd>给热点区域设定具体的坐标值。这个值的数值和意义取决于这个值所描述的<strong>形状</strong>属性.。对于矩形或长方形, 这个<strong>coords </strong>值为两个X,Y对：左上、右下。 对于圆形, 这个值是 <code>x,y,r</code> ，这里的 <code>x,y</code> 是一对确定圆的中心的坐标而 <code>r</code> 则表示的是半径值.。对于多边和多边形，这个值是用x,y对表示的多边形的每一个点：<code>x1,y1,x2,y2,x3,y3,</code>等等。HTML4里, 值可能是像素数量或者百分比, 区别是不是有%出现; HTML5里, 只可能是像素的数量.</dd> + <dt>{{htmlattrdef("download")}} {{HTMLVersionInline("5")}}</dt> + <dd>这个属性如果存在的话, 表明作者想把超链接用于下载一个资源。请查看{{HTMLElement("a")}} 获得关于 {{htmlattrxref("download", "a")}}属性的完整描述。</dd> +</dl> + +<dl> + <dt>{{htmlattrdef("href")}}</dt> + <dd>area的超链接, 值为一个URL. HTML4里, 这个值不管是不是有值都要明确指定出来. HTML5里则不需要.</dd> +</dl> + +<dl> + <dt>{{htmlattrdef("hreflang")}} {{HTMLVersionInline("5")}}</dt> + <dd>指明链接资源的语言类型, 值的范围参考<a class="external" href="http://www.ietf.org/rfc/bcp/bcp47.txt" title="http://www.ietf.org/rfc/bcp/bcp47.txt">BCP47</a>. 这个属性只能在指明href属性之后使用.</dd> +</dl> + +<dl> + <dt>{{htmlattrdef("name")}} {{HTMLVersionInline("4")}} only, {{obsolete_inline("5.0")}}</dt> + <dd>为可点击区域定义一个名字以使旧浏览器解析。</dd> +</dl> + +<dl> + <dt>{{htmlattrdef("media")}} {{HTMLVersionInline("5")}}</dt> + <dd>指明链接资源的媒体类型，例：print and screen。如果此属性省略，默认全部。仅在href属性存在情况下使用。</dd> +</dl> + +<dl> + <dt>{{htmlattrdef("nohref")}} {{HTMLVersionInline("4")}} only, {{obsolete_inline("5.0")}}</dt> + <dd>指明此区域没有超链接。在<area>中必须存在nohref或者href。 + <div class="note"> + <p><strong>用法提示: </strong>此属性在html5中是废弃的，而忽略href属性就足够了。</p> + </div> + </dd> +</dl> + +<p> </p> + +<dl> + <dt> </dt> +</dl> + +<dl> + <dt>{{htmlattrdef("rel")}} {{HTMLVersionInline("5")}}</dt> + <dd>对于包含href属性的锚，该属性指定目标对象与链接对象的关系。该值是一个逗号分隔的链接类型值列表。这些值及其语义将由一些可能对文档作者有意义的权威进行注册。如果没有其他的关系，默认的关系是无效的。只有当href属性是presen时才使用该属性</dd> + <dt>{{htmlattrdef("shape")}}</dt> + <dd>相关联的热点的形状。HTML 5和HTML 4的规范定义了值rect，它定义了一个矩形区域;圆圈，它定义了一个圆形区域;多边形，它定义了一个多边形;默认情况下，这表示整个区域超出了任何定义的形状。许多浏览器，特别是Internet Explorer 4和更高版本，支持弧形、多边形和矩形作为形状的有效值;这些值{ { Non-standard_inline } }。</dd> +</dl> + +<dl> + <dt>{{htmlattrdef("tabindex")}} {{HTMLVersionInline("4")}} only, {{obsolete_inline("5.0")}}</dt> + <dd>用于指定浏览器tab键获取焦点的顺序。在html5中是全局属性。</dd> +</dl> + +<dl> + <dt>{{htmlattrdef("target")}}</dt> + <dd>本属性指明了在什么地方显示链接的资源. HTML4里, 这个值是一个frame的链接或者关键字. HTML5里, 它是一个浏览器上下文(比如: 标签, 窗口或者内嵌的frame)的链接或者关键字. 值的含义: + <ul> + <li><code>_self</code>: 在当前区域加载链接指向的资源. 这个是默认值.</li> + <li><code>_blank</code>: 在新的未命名的窗口或者tab里加载超链接资源.</li> + <li><code>_parent</code>: 在父级加载超链接资源. HTML4里, 是当前frame的父级, HTML5里是当前的浏览器上下文, 如果当前环境没有父级, 行为和<code>_self</code>一样.</li> + <li><code>_top</code>: HTML4里: 将响应加载到完整的原始窗口中，取消所有其他帧。在HTML5中:将响应加载到顶级浏览上下文(也就是说，浏览上下文是当前版本的祖先，并且没有父类)。如果没有父类，这个选项的行为方式与self相同</li> + </ul> + 本属性只能在指明href属性之后使用.</dd> + <dt>{{htmlattrdef("type")}}</dt> + <dd>该属性指定了用于链接目标的MIME类型的媒体类型。一般来说，这是严格的咨询信息;然而，在未来，浏览器可能会为多媒体类型添加一个小图标。例如，当类型设置为音频/wav时，浏览器可能会添加一个小的扬声器图标。公认的MIME类型的完整列表,请参阅http://www.w3.org/TR/html4/references.html ref-MIMETYPES。只有当href属性存在时才使用该属性。</dd> +</dl> + +<h2 id="例子">例子</h2> + +<pre class="brush: html"><map name="primary"> + <area shape="circle" coords="200,250,25" href="another.htm" /> + <area shape="default" nohref /> +</map> +</pre> + +<h2 id="Specifications" name="Specifications">规范</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'the-map-element.html#the-area-element', '<area>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'embedded-content-0.html#the-area-element', '<area>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/objects.html#h-13.6.1', '<area>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mini</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="注意">注意</h2> + +<p>HTML 3.2, 4.0, 和HTML 5 规范中, 不允许有 <code></area></code> 单闭合标签.</p> + +<p>XHTML 1.0 规范要求有尾部的斜线: <code><area /></code>.</p> + +<p><strong>id</strong>, <strong>class</strong>, 和<strong>style</strong> 属性和其他的HTML4属性一样, 但是只有Netscape和Microsoft定义了这些属性.</p> + +<p>Netscape 1–level 浏览器不能解析<strong>target</strong> 链接到frames的属性.</p> + +<p>HTML 3.2 只定义了<strong>alt</strong>, <strong>coords</strong>, <strong>href</strong>, <strong>nohref</strong>, 和<strong>shape</strong>.</p> + +<p>{{HTMLRef}}</p> diff --git a/files/zh-cn/web/html/element/article/index.html b/files/zh-cn/web/html/element/article/index.html new file mode 100644 index 0000000000..8261b6979b --- /dev/null +++ b/files/zh-cn/web/html/element/article/index.html @@ -0,0 +1,139 @@ +--- +title: <article> +slug: Web/HTML/Element/article +tags: + - HTML + - 元素 +translation_of: Web/HTML/Element/article +--- +<div>{{HTMLRef}}</div> + +<p><strong>HTML <code><article></code></strong>元素表示文档、页面、应用或网站中的独立结构，其意在成为可独立分配的或可复用的结构，如在发布中，它可能是论坛帖子、杂志或新闻文章、博客、用户提交的评论、交互式组件，或者其他独立的内容项目。</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/article.html", "tabbed-standard")}}</div> + +<p class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples </a> and send us a pull request.</p> + +<p>给定文档中可以包含多篇文章;例如，阅读器在博客上滚动时一个接一个地显示每篇文章的文本，每个帖子将包含在<code><article></code>元素中，可能包含一个或多个<code><section></code>。</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><dfn><a href="/en-US/docs/HTML/Content_categories" title="HTML/Content_categories">内容分类</a></dfn></th> + <td><a href="/en-US/docs/HTML/Content_categories#Flow_content">Flow content</a>, sectioning content, palpable content.</td> + </tr> + <tr> + <th scope="row">允许的内容</th> + <td><a href="/en-US/docs/HTML/Content_categories#Flow_content">Flow content</a>.</td> + </tr> + <tr> + <th scope="row"><dfn>标记省略</dfn></th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th scope="row">允许的父元素</th> + <td>所有接受 <a href="/en-US/docs/HTML/Content_categories#Flow_content">Flow content</a>的元素。注意<code><article></code>元素不能成为{{HTMLElement("address")}}元素的子元素。</td> + </tr> + <tr> + <th scope="row">允许的 ARIA roles</th> + <td>{{ARIARole("application")}}, {{ARIARole("document")}}, {{ARIARole("feed")}}, {{ARIARole("main")}}, {{ARIARole("presentation")}}, {{ARIARole("region")}}</td> + </tr> + <tr> + <th scope="row">DOM 实例</th> + <td>{{domxref("HTMLElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="属性">属性</h2> + +<p>此元素只具有<a href="https://developer.mozilla.org/en-US/docs/HTML/Global_attributes">全局属性</a>。</p> + +<h2 id="使用说明">使用说明</h2> + +<ul> + <li>每个<code><article></code>，通常包括标题（<h1> - <h6>元素）作为<code><article></code>元素的子元素。</li> + <li>当<code><article></code>元素嵌套使用时，则该元素代表与外层元素有关的文章。例如，代表博客评论的<code><article></code>元素可嵌套在代表博客文章的<code><article></code>元素中。</li> + <li><code><article></code>元素的作者信息可通过{{HTMLElement("address")}}元素提供，但是不适用于嵌套的<code><article></code>元素。</li> + <li> + <p><code><article></code>元素的发布日期和时间可通过{{HTMLElement("time")}}元素的{{htmlattrxref("pubdate", "time")}}属性表示。</p> + </li> + <li> + <p>可以使用{{HTMLElement("time")}} 元素的{{htmlattrxref("datetime", "time")}}属性来描述<code><article></code>元素的发布日期和时间。请注意{{HTMLElement("time")}}的<em>{{htmlattrxref("pubdate", "time")}} </em>属性不再是<em>{{glossary("W3C")}} </em> <em>{{glossary("HTML5")}}</em>标准。</p> + </li> +</ul> + +<h2 id="示例">示例</h2> + +<pre><code><article class="film_review"> + <header> + <h2>Jurassic Park</h2> + </header> + <section class="main_review"> + <p>Dinos were great!</p> + </section> + <section class="user_reviews"> + <article class="user_review"> + <p>Way too scary for me.</p> + <footer> + <p> + Posted on + <time datetime="2015-05-16 19:00">May 16</time> + by Lisa. + </p> + </footer> + </article> + <article class="user_review"> + <p>I agree, dinos are my favorite.</p> + <footer> + <p> + Posted on + <time datetime="2015-05-17 19:00">May 17</time> + by Tom. + </p> + </footer> + </article> + </section> + <footer> + <p> + Posted on + <time datetime="2015-05-15 19:00">May 15</time> + by Staff. + </p> + </footer> +</article></code></pre> + +<h2 id="Specifications" name="Specifications">规范</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">规范</th> + <th scope="col">状态</th> + <th scope="col">注释</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'sections.html#the-article-element', '<article>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'sections.html#the-article-element', '<article>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容">浏览器兼容</h2> + +<p>{{Compat("html.elements.article")}}</p> + +<h2 id="相关文章">相关文章</h2> + +<ul> + <li>Others section-related elements: {{HTMLElement("body")}}, {{HTMLElement("nav")}}, {{HTMLElement("section")}}, {{HTMLElement("aside")}}, {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}}, {{HTMLElement("hgroup")}}, {{HTMLElement("header")}}, {{HTMLElement("footer")}}, {{HTMLElement("address")}}</li> + <li class="last"><a class="deki-ns current" href="/en-US/docs/Sections_and_Outlines_of_an_HTML5_document" title="Sections and Outlines of an HTML5 document">Sections and outlines of an HTML5 document</a>.</li> +</ul> diff --git a/files/zh-cn/web/html/element/aside/index.html b/files/zh-cn/web/html/element/aside/index.html new file mode 100644 index 0000000000..9f61c067cf --- /dev/null +++ b/files/zh-cn/web/html/element/aside/index.html @@ -0,0 +1,108 @@ +--- +title: <aside> +slug: Web/HTML/Element/aside +tags: + - HTML + - HTML5 + - 元素 +translation_of: Web/HTML/Element/aside +--- +<p><span class="seoSummary"><strong>HTML <code><aside></code> 元素</strong>表示一个和其余页面内容几乎无关的部分，被认为是独立于该内容的一部分并且可以被单独的拆分出来而不会使整体受影响。</span>其通常表现为侧边栏或者标注框（call-out boxes）。</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/aside.html", "tabbed-standard")}}</div> + +<p class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples </a> and send us a pull request.</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/zh-CN/docs/HTML/Content_categories" title="HTML/Content_categories">内容分类</a></th> + <td><a href="/zh-CN/docs/Web/Guide/HTML/Content_categories#流式元素（Flow_content）" title="HTML/Content categories#Flow content">流式元素</a>, <a href="/zh-CN/docs/Web/Guide/HTML/Content_categories#章节元素（Sectioning_content）">章节元素</a>, <a href="https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Content_categories#Palpable_content">可触摸内容</a>.</td> + </tr> + <tr> + <th scope="row">允许的内容</th> + <td><a href="/zh-CN/docs/Web/Guide/HTML/Content_categories#流式元素（Flow_content）" title="HTML/Content categories#Flow content">流式元素</a>.</td> + </tr> + <tr> + <th scope="row">标签省略</th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th scope="row">允许的父元素</th> + <td>所有元素接受流式元素。注意 <code><aside></code> 不能是{{HTMLElement("address")}} 元素的后代</td> + </tr> + <tr> + <th scope="row">允许的ARIA角色</th> + <td>{{ARIARole("feed")}}, {{ARIARole("note")}}, {{ARIARole("presentation")}}, {{ARIARole("region")}}, {{ARIARole("search")}}</td> + </tr> + <tr> + <th scope="row">DOM 接口</th> + <td>{{domxref("HTMLElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="属性">属性</h2> + +<p>此元素只有<a href="https://developer.mozilla.org/zh-CN/docs/HTML/Global_attributes">全局属性</a>。</p> + +<h2 id="使用说明">使用说明</h2> + +<ul> + <li>不要使用 <code><aside></code> 元素去尾随括号内的文本 ，因为这种文本被认为是主要流内容的一部分。</li> +</ul> + +<h2 id="示例">示例</h2> + +<pre class="brush: html"><article> + <p> + 迪斯尼电影<cite>海的女儿</cite>（<cite>The Little Mermaid</cite>）于 1989 年首次登上银幕。 + </p> + <aside> + 在首次发行期间，该片便收获了 8700 万美元的票房。 + </aside> + <p> + 更多有关该电影的信息… + </p> +</article></pre> + +<p>{{EmbedLiveSample("Examples")}}</p> + +<h2 id="标准">标准</h2> + +<table class="standard-table" style="font-size: 14px; font-weight: normal; line-height: 1.5;"> + <thead> + <tr> + <th scope="col">标准</th> + <th scope="col">状态</th> + <th scope="col">备注</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'sections.html#the-aside-element', '<aside>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'sections.html#the-aside-element', '<aside>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + + + +<p>{{Compat("html.elements.aside")}}</p> + +<h2 id="参见">参见</h2> + +<ul> + <li>Others section-related elements: {{HTMLElement("body")}}, {{HTMLElement("article")}}, {{HTMLElement("section")}}, {{HTMLElement("nav")}}, {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}}, {{HTMLElement("hgroup")}}, {{HTMLElement("header")}}, {{HTMLElement("footer")}}, {{HTMLElement("address")}};</li> + <li><a href="/zh-CN/docs/Web/Guide/HTML/Sections_and_Outlines_of_an_HTML5_document">使用 HTML 章节与大纲</a></li> +</ul> + +<div>{{HTMLRef}}</div> diff --git a/files/zh-cn/web/html/element/audio/index.html b/files/zh-cn/web/html/element/audio/index.html new file mode 100644 index 0000000000..dcae80d55a --- /dev/null +++ b/files/zh-cn/web/html/element/audio/index.html @@ -0,0 +1,437 @@ +--- +title: <audio> +slug: Web/HTML/Element/audio +tags: + - Audio + - Element + - HTML + - HTML5 + - Media +translation_of: Web/HTML/Element/audio +--- +<p id="简介">{{HTMLRef}}</p> + +<p><strong>HTML <code><audio></code> </strong>元素用于在文档中嵌入音频内容。 <code><audio></code> 元素可以包含一个或多个音频资源， 这些音频资源可以使用 <code>src</code> 属性或者{{HTMLElement("source")}} 元素来进行描述：浏览器将会选择最合适的一个来使用。也可以使用 {{domxref("MediaStream")}} 将这个元素用于流式媒体。</p> + +<p>{{EmbedInteractiveExample("pages/tabbed/audio.html","tabbed-standard")}}</p> + +<p>上述例子展示了 <code><audio></code> 元素的基本用法。与 {{htmlelement("img")}} 元素类似，我们在 <code>src</code> 属性中添加了嵌入媒体的路径；也可以使用其他属性来规定一些功能，例如是否自动播放、是否循环播放、是否显示浏览器的默认音频空间等等。</p> + +<p>在浏览器不支持该元素时，会显示 <code><audio></audio></code> 标签之间的内容作为回退。</p> + +<h2 id="属性"><span>属性</span></h2> + +<p>该元素包含 <a href="/en-US/docs/Web/HTML/Global_attributes">全局属性</a>。</p> + +<dl> + <dt>{{htmlattrdef("autoplay")}}</dt> + <dd>布尔值属性；声明该属性，音频会尽快自动播放，不会等待整个音频文件下载完成。 + <div class="blockIndicator note"> + <p><strong>注意：</strong>自动播放音频（或有声视频）可能会破坏用户体验，所以应该尽可能避免。如果你一定要提供自动播放功能，你应该加入开关（让用户主动打开自动播放）。然而，如果需要创建一些媒体元素，其播放源由用户在稍后设置，自动播放就会很有用。想了解如果正确使用自动播放，可参见我们的<a href="https://wiki.developer.mozilla.org/en-US/docs/Web/Media/Autoplay_guide">自动播放指南</a>。</p> + </div> + </dd> + <dt>{{htmlattrdef("controls")}}</dt> + <dd>如果声明了该属性，浏览器将提供一个包含声音，播放进度，播放暂停的控制面板，让用户可以控制音频的播放。</dd> + <dt>{{htmlattrdef("crossorigin")}}</dt> + <dd>枚举属性 展示音频资源是否可以通过CORS加载。<a href="https://wiki.developer.mozilla.org/en-US/docs/CORS_Enabled_Image">支持CORS的资源 </a> 可以被 {{HTMLElement("canvas")}} 元素复用而不污染. 可选值如下： + <dl> + <dt><code>anonymous</code></dt> + <dd>在发送跨域请求时不携带验证信息。换句话说，浏览器在发送<code>Origin:</code> HTTP 请求首部时将不携带 cookie、 X.509 安全令牌、也不会执行任何 HTTP 基本认证。如果服务器没有给与源站信任（也就是说没有设置 <code>Access-Control-Allow-Origin:</code> 响应首部），那么图片就被认为是污染的，它就会被限制使用。</dd> + <dt><code>use-credentials</code></dt> + <dd>在发送跨域请求时不携带验证信息。换句话说，在发送<code>Origin:</code> HTTP 请求首部时将携带 cookie、安全令牌、并且执行 HTTP 基本认证。如果服务器没有给与源站信任（通过设置<code>Access-Control-Allow-Credentials:</code> 响应首部）那么图片就被认为是污染的，它就会被限制使用。</dd> + </dl> + 在未指定时，资源将不通过 CORS 请求来获取（也就是不发送 <code>Origin: </code>请求首部），以保护 {{HTMLElement('canvas')}} 元素中未污染的内容。如果验证失败，它会表现的好像 <strong>anonymous </strong>选项是选中的。查看 <a href="https://wiki.developer.mozilla.org/en-US/docs/HTML/CORS_settings_attributes">CORS settings attributes</a> 来获取更多信息。</dd> + <dt>{{htmlattrdef("currentTime")}}</dt> + <dd> + <p>读取 <code>currentTime</code> 属性将返回一个双精度浮点值，用以标明以秒为单位的当前音频的播放位置。如果音频的元数据暂时无法访问——这意味着你无法的知道媒体的开始或持续时间。这时，<code>currentTime</code> 相对应的，能够被用于改变重播的时间。否则，设置 <code>currentTime</code> 将设置当前的播放位置，并且会自动搜寻到媒体的那个位置，如果媒体目前已经被加载的话。</p> + + <p>如果音频是以流的形式加载的，并且数据超出了媒体的缓冲区（buffer），{{Glossary("user agent")}} 可能无法获取资源的某些部分。另一些音频的时间轴可能并非从 0 秒开始，所以设置 <code>currentTime</code> 到一个开始时间之前的时间可能会失败。举个例子，如果音频媒体的时间轴从 12 小时开始，把 <code>currentTime</code> 设置到 3600 将会尝试把当前播放位置设置到媒体的开始位置之前，从而导致错误。{{domxref("HTMLMediaElement.getStartDate", "getStartDate()")}} 方法能够用于确定媒体时间轴的开始位置。</p> + </dd> + <dt>{{htmlattrdef("disableRemotePlayback")}} {{experimental_inline}}</dt> + <dd>这是一个布尔值，用来禁用在远程设备上进行进度控制的能力。这些设备通过有线（比如 HDMI, DVI）或无线技术（比如Miracast, Chromecast, DLNA, AirPlay,）来与 web 连接。请参考 <a href="https://www.w3.org/TR/remote-playback/#the-disableremoteplayback-attribute">this proposed specification</a> 来获取更多信息。 + <div class="blockIndicator note"> + <p>在 Safari 中，你能使用 <a href="https://developer.apple.com/library/archive/documentation/AudioVideo/Conceptual/AirPlayGuide/OptingInorOutofAirPlay/OptingInorOutofAirPlay.html"><code>x-webkit-airplay="deny"</code></a> 作为兜底方案。</p> + </div> + </dd> + <dt>{{htmlattrdef("duration")}} {{ReadOnlyInline}}</dt> + <dd>这是一个双精度浮点数，指明了音频在时间轴中的持续时间（总长度），以秒为单位。如果元素上没有媒体，或者媒体是不可用的，那么会返回 <code>NaN</code>。如果媒体找不到确切的结尾（比如不确定长度的直播流，网络电台，或者是通过 <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/WebRTC_API">WebRTC</a> 连接的流），那么这个值将返回 <code>+Infinity</code>。</dd> + <dt>{{htmlattrdef("loop")}}</dt> + <dd>布尔属性；如果声明该属性，将循环播放音频。</dd> + <dt>{{htmlattrdef("muted")}}</dt> + <dd>表示是否静音的布尔值。默认值为 <code>false</code>，表示有声音。</dd> + <dt>{{htmlattrdef("preload")}}</dt> + <dd>枚举属性，让开发者自行思考来示意浏览器使用何种加载方式以达到最好的用户体验。可以是以下属性之一： + <ul> + <li><code>none</code>: 示意用户可能不会播放该音频，或者服务器希望节省带宽；换句话说，该音频不会被缓存；</li> + <li><code>metadata</code>: 示意即使用户可能不会播放该音频，但获取元数据 (例如音频长度) 还是有必要的。</li> + <li><code>auto</code>: 示意用户可能会播放音频；换句话说，如果有必要，整个音频都将被加载，即使用户不期望使用。</li> + <li><em>空字符串</em> : 等效于<code>auto</code>属性。</li> + </ul> + + <p>不同浏览器会有自己的默认值，规范建议的默认值为 <code>metadata</code>.</p> + + <div class="blockIndicator note"> + <p><strong>使用说明：</strong></p> + + <ul> + <li><code>autoplay</code> 属性的优先级高于 <code>preload</code>。如果 <code>autoplay</code> 被指定，浏览器将显式地开始下载媒体以供播放。</li> + <li>浏览器并不被强制遵循该属性的规范，该属性只是一个建议与提示。</li> + </ul> + </div> + </dd> + <dt>{{htmlattrdef("src")}}</dt> + <dd>嵌入的音频的URL。 该URL应遵从 <a href="/en-US/docs/HTTP_access_control">HTTP access controls</a>. 这是一个可选属性；你可以在audio元素中使用 {{htmlelement("source")}} 元素来替代该属性指定嵌入的音频。</dd> +</dl> + +<h2 id="事件">事件</h2> + +<table> + <thead> + <tr> + <th scope="col">事件名称</th> + <th scope="col">触发时机</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{Event("audioprocess")}}</td> + <td>一个 {{DOMxRef("ScriptProcessorNode")}} 的输入缓冲区已经准备开始处理。</td> + </tr> + <tr> + <td>{{domxref("HTMLMediaElement.canplay_event", 'canplay')}}</td> + <td> + <p>浏览器已经可以播放媒体，但是预测已加载的数据不足以在不暂停的情况下顺利将其播放到结尾（即预测会在播放时暂停以获取更多的缓冲区内容）</p> + </td> + </tr> + <tr> + <td>{{domxref("HTMLMediaElement.canplaythrough_event", 'canplaythrough')}}</td> + <td> + <p>浏览器预测已经可以在不暂停的前提下将媒体播放到结束。</p> + </td> + </tr> + <tr> + <td>{{Event("complete")}}</td> + <td>一个 {{DOMxRef("OfflineAudioContext")}} 的渲染已经中止。</td> + </tr> + <tr> + <td>{{domxref("HTMLMediaElement.durationchange_event", 'durationchange')}}</td> + <td> <code>duration</code> 属性发生了变化。</td> + </tr> + <tr> + <td>{{domxref("HTMLMediaElement.emptied_event", 'emptied')}}</td> + <td> + <p>媒体置空。举个例子，当一个媒体已经加载（或部分加载）的情况下话调用 <code><a href="https://wiki.developer.mozilla.org/en-US/docs/XPCOM_Interface_Reference/NsIDOMHTMLMediaElement" rel="internal">load()</a> </code>方法，这个事件就将被触发。</p> + </td> + </tr> + <tr> + <td>{{domxref("HTMLMediaElement.ended_event", 'ended')}}</td> + <td> + <p>播放到媒体的结束位置，播放停止。</p> + </td> + </tr> + <tr> + <td>{{domxref("HTMLMediaElement.loadeddata_event", 'loadeddata')}}</td> + <td> + <p>媒体的第一帧加载完成。</p> + </td> + </tr> + <tr> + <td>{{domxref("HTMLMediaElement.loadedmetadata_event", 'loadedmetadata')}}</td> + <td> + <p>元数据加载完成。</p> + </td> + </tr> + <tr> + <td>{{domxref("HTMLMediaElement.pause_event", 'pause')}}</td> + <td>播放暂停。</td> + </tr> + <tr> + <td>{{domxref("HTMLMediaElement.play_event", 'play')}}</td> + <td>播放开始。</td> + </tr> + <tr> + <td>{{domxref("HTMLMediaElement.playing_event", 'playing ')}}</td> + <td> + <p>因为缺少数据而暂停或延迟的状态结束，播放准备开始。</p> + </td> + </tr> + <tr> + <td>{{domxref("HTMLMediaElement.ratechange_event", 'ratechange')}}</td> + <td>播放速度变化。</td> + </tr> + <tr> + <td>{{domxref("HTMLMediaElement.seeked_event", 'seeked')}}</td> + <td> + <p>一次<em>获取</em> 操作结束。</p> + </td> + </tr> + <tr> + <td>{{domxref("HTMLMediaElement.seeking_event", 'seeking')}}</td> + <td>一次<em>获取</em> 操作开始。</td> + </tr> + <tr> + <td>{{domxref("HTMLMediaElement.stalled_event", 'stalled')}}</td> + <td> + <p>用户代理试图获取媒体数据，但数据意外地没有进入。</p> + </td> + </tr> + <tr> + <td>{{domxref("HTMLMediaElement.suspend_event", 'suspend')}}</td> + <td> + <p>媒体加载挂起。</p> + </td> + </tr> + <tr> + <td>{{domxref("HTMLMediaElement.timeupdate_event", 'timeupdate')}}</td> + <td> + <p>由 <code>currentTime</code> 指定的时间更新。</p> + </td> + </tr> + <tr> + <td>{{domxref("HTMLMediaElement.volumechange_event", 'volumechange')}}</td> + <td>音量变化。</td> + </tr> + <tr> + <td>{{domxref("HTMLMediaElement.waiting_event", 'waiting')}}</td> + <td>因为暂时性缺少数据，播放暂停。</td> + </tr> + </tbody> +</table> + +<h2 id="使用说明">使用说明</h2> + +<p>浏览器对 <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/Media/Formats/Containers">文件类型</a> 和 <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/Media/Formats/Audio_codecs">音频编码</a> 的支持各有不同，你可以使用内嵌的 {{htmlelement("source")}} 元素提供不同的播放源。浏览器会使用第一个它支持的播放源：</p> + +<pre class="notranslate"><audio controls> + <source src="myAudio.mp3" type="audio/mpeg"> + <source src="myAudio.ogg" type="audio/ogg"> + <p>Your browser doesn't support HTML5 audio. Here is + a <a href="myAudio.mp4">link to the audio</a> instead.</p> +</audio></pre> + +<p>我们提供了全面细致的 <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/Media/Formats">音频文件类型指南</a> 和 <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/Media/Formats/Audio_codecs">这些类型可以使用的音频编码</a>。此外，还有 <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/Media/Formats/Video_codecs">视频编码支持指南</a>。</p> + +<p>其他使用说明：</p> + +<ul> + <li>如果你没有声明 <code>controls</code> 属性，音频播放器不会包含浏览器的默认控件。但你可以使用 JavaScript 和 {{domxref("HTMLMediaElement")}} API 创建自己的自定义控件。</li> + <li>为了更精确地控制你的音频内容，<code>HTMLMediaElement</code> 会触发多种不同的 <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/Guide/Events/Media_events">事件</a>。这也提供了一个查看音频获取过程的方式，你可以查看错误或检测什么时候可以开始播放或操作。</li> + <li>你还可以使用 <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API">Web Audio API</a> 以从 JavaScript 代码直接生成和操纵音频流，而非流式播放已存在的音频文件。</li> + <li><code><audio></code> 元素不能像 <code><video></code> 元素一样附加副标题（subtitle）或说明标题（caption）。更多有用的信息和解决方法参见 Ian Devlin 的 <a href="https://www.iandevlin.com/blog/2015/12/html5/webvtt-and-audio">WebVTT and Audio</a>。</li> +</ul> + +<p><a href="https://wiki.developer.mozilla.org/zh-CN/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content">视频和音频内容</a> 新手教程是一篇关于使用 HTML <code><audio></code> 的好文章。</p> + +<h3 id="使用_CSS_设置样式">使用 CSS 设置样式</h3> + +<p><code><audio></code> 元素没有自带的固有视觉样式，除非如果声明了 <code>controls</code> 属性，则会显示浏览器的默认控件。</p> + +<p>默认控件的 {{cssxref("display")}} 的默认值为 <code>inline</code>。将该值设为 <code>block</code> 通常会对定位和布局有好处，除非你想将控件放在文本块或类似元素中。</p> + +<p>你可以使用作用于整个控件的属性来为其设置样式。例如可用 {{cssxref("border")}}、{{cssxref("border-radius")}}、{{cssxref("padding")}}, {{cssxref("margin")}} 等等。但你不能设置音频播放器中的单个组件（如改变按钮大小、改变图标或字体等）。控件在不同的浏览器中也有所不同。</p> + +<p>如果在跨浏览器中得到一致的外观和体验，你需要创建自定义控件；自定义控件可以根据你的需求任意设置样式，还可以使用 JavaScript 和 {{domxref("HTMLMediaElement")}} API 来设置更多功能。</p> + +<p><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/Apps/Fundamentals/Audio_and_video_delivery/Video_player_styling_basics">视频播放器样式基础</a> 提供了一些有用的样式技术，这篇文章围绕 <code><video></code> 而写，但大部分都可以用于 <code><audio></code>。</p> + +<h3 id="检测音轨添加和移除">检测音轨添加和移除</h3> + +<p>你能够通过 {{event("addtrack")}} and {{event("removetrack")}} 事件来检测何时音轨从 <code><audio></code> 元素中添加和移除了。然而，这些事件并不是直接传递给 <code><audio></code> 元素自己的。相反，它们是发送给 <code><audio></code> 元素的{{domxref("HTMLMediaElement")}} 中的音轨列表对象的。这些对象与添加进元素的音轨类型一一对应。</p> + +<dl> + <dt>{{domxref("HTMLMediaElement.audioTracks")}}</dt> + <dd>一个 {{domxref("AudioTrackList")}} 包含所有的媒体对象的音轨。你能在为 <code>addtrack</code> 事件添加监听，以在新音轨添加进元素时获得通知。</dd> + <dt>{{domxref("HTMLMediaElement.videoTracks")}}</dt> + <dd>在该 {{domxref("VideoTrackList")}} 对象上添加监听，以在视频轨道被添加进元素时获得通知。</dd> + <dt>{{domxref("HTMLMediaElement.textTracks")}}</dt> + <dd>在该 {{domxref("TextTrackList")}} 对象上添加监听，以在文字轨道被添加进元素时获得通知。（也许用于字幕，译者猜测）</dd> +</dl> + +<div class="blockIndicator note"> +<p><strong>注意:尽管是 </strong><code><audio></code> 元素，但它依然有视频以及文字的轨道列表，并且实际上能够用来展示视频，尽管应用接口的使用可能显得很古怪。 </p> +</div> + +<p>举个例子，为了侦测何时音轨从一个 <code><audio></code> 元素中添加或者移除，你可以使用如下代码：</p> + +<pre class="notranslate">var elem = document.querySelector("audio"); + +elem.audioTrackList.onaddtrack = function(event) { + trackEditor.addTrack(event.track); +}; + +elem.audioTrackList.onremovetrack = function(event) { + trackEditor.removeTrack(event.track); +}; +</pre> + +<p>这份代码监听音轨从目标元素中添加删除的事件，并且调用了一个轨道编辑器上的虚拟函数，来从编辑器上的可用音轨列表中注册和移除音轨。</p> + +<p>你也可以使用 {{domxref("EventTarget.addEventListener", "addEventListener()")}} 来监听 {{event("addtrack")}} 和 {{event("removetrack")}} 事件。</p> + +<h2 id="示例">示例</h2> + +<h3 id="基本用法">基本用法</h3> + +<p>下面的例子展示了使用 <code><audio></code> 元素来播放 OGG 文件的简单用法。它将根据 <code>autoplay</code> 属性的设置来自动播放——如果页面允许你这么做的话。它同时还包含一个兜底内容，以防止浏览器不支持 <code><audio></code> 元素。</p> + +<pre class="notranslate"><!-- Simple audio playback --> +<audio + src="AudioTest.ogg" + autoplay> + Your browser does not support the <code>audio</code> element. +</audio> +</pre> + +<p>如果想获得更多信息，包括何时自动播放生效，如何获取自动播放权限，并且通过何种方式，在何时应用自动播放才是合适的，请看我们的 <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/Media/Autoplay_guide">autoplay guide</a>。</p> + +<h3 id="<audio>_元素与_<source>_元素"><audio> 元素与 <source> 元素</h3> + +<p>这个例子指出了在嵌套的 <code><source></code> 元素的 <code>src</code> 属性上设置嵌入音轨，而非直接在 <code><audio></code> 元素上设置。通过这种方法可以同时在 <code>type</code> 属性上包含文件的 MIME 类型，这通常很有用，因为浏览器就能立即决策：自己究竟是能够播放该文件，还是不在不能播放的文件上浪费时间。</p> + +<pre class="notranslate"><audio controls> + <source src="foo.wav" type="audio/wav"> + Your browser does not support the <code>audio</code> element. +</audio> +</pre> + +<h3 id="<audio>_与多个_<source>_元素"><audio> 与多个 <source> 元素</h3> + +<p>这个例子包含了多个 <code><source></code> 元素。如果能够播放的话，浏览器就会试图去加载第一个 source 元素（Opus 后缀名）；如果不行，那就退而求其次去加载第二个(Vorbis 后缀名)，最终退到了 MP3 格式：</p> + +<pre class="notranslate"><audio controls> + <source src="foo.opus" type="audio/ogg; codecs=opus"/> + <source src="foo.ogg" type="audio/ogg; codecs=vorbis"/> + <source src="foo.mp3" type="audio/mpeg"/> +</audio></pre> + +<h2 id="可访问性考虑">可访问性考虑</h2> + +<p>语音形式的音频必须同时提供标题，以及确切描述其内容的文本。标题（Captions）是由 <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/WebVTT_API">WebVTT</a> 标准定义的，允许听力障碍的人群能够通过播放（文字）记录来理解音频内容。转录文字允许那些需要额外时间的人们，以适合他们的速度和格式回顾记录的内容。</p> + +<p>如果使用自动标题服务，人工检查生成内容是很重要的，这确保了标题能够准确的描述源音频。</p> + +<p>如何你的用户代理上的 <code><audio></code> 元素不直接支持 WebVTT。你必须寻找一个框架来为你提供这种能力，或者自己写代码来展示标题。一个选择是使用 {{HTMLElement("video")}} 元素，它是一定支持 WebVTT 的。</p> + +<p>进阶的来讲，语音的副标题和转录文字应该同时描述音乐与音效，因为它们也是音频的重要信息，包含了情绪与音调。举例子，在下面的 WebVTT 中，中括号里提供了关于音调与情绪的信息给观看者；通过这种方式（给出音乐，语言之外的声音，以及另一些至关重要的声音的描述）能够帮助建立起音频的氛围。</p> + +<pre class="notranslate">1 +00:00:00 --> 00:00:45 +[Energetic techno music] + +2 +00:00:46 --> 00:00:51 +Welcome to the Time Keeper's podcast! In this episode we're discussing which Swisswatch is a wrist switchwatch? + +16 +00:00:52 --> 00:01:02 +[Laughing] Sorry! I mean, which wristwatch is a Swiss wristwatch? + +</pre> + +<p>给出其他内容（比如直接的下载链接）也是一种最佳实践，这能够作为一种用户浏览器不支持 <code><audio></code> 元素时的兜底方案。</p> + +<pre class="notranslate"><audio controls> + <source src="myAudio.mp3" type="audio/mpeg"> + <source src="myAudio.ogg" type="audio/ogg"> + <p> + Your browser doesn't support HTML5 audio. + Here is a <a href="myAudio.mp4">link to download the audio</a> instead. + </p> +</audio> + +</pre> + +<ul> + <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Plugins/Flash_to_HTML5/Video/Subtitles_captions">MDN Subtitles and closed caption — Plugins</a></li> + <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/WebVTT_API">Web Video Text Tracks Format (WebVTT)</a></li> + <li><a href="https://webaim.org/techniques/captions/">WebAIM: Captions, Transcripts, and Audio Descriptions</a></li> + <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.2_%E2%80%94_Providing_text_alternatives_for_time-based_media">MDN Understanding WCAG, Guideline 1.2 explanations</a></li> + <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/media-equiv-av-only-alt.html">Understanding Success Criterion 1.2.1 | W3C Understanding WCAG 2.0</a></li> + <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/media-equiv-captions.html">Understanding Success Criterion 1.2.2 | W3C Understanding WCAG 2.0</a></li> +</ul> + +<h2 id="技术总结">技术总结</h2> + +<table> + <tbody> + <tr> + <th scope="row"><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/HTML/Content_categories">Content categories</a></th> + <td><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/HTML/Content_categories#Flow_content">Flow content</a>, phrasing content, embedded content. If it has a {{htmlattrxref("controls", "audio")}} attribute: interactive content and palpable content.</td> + </tr> + <tr> + <th scope="row">合法内容</th> + <td> + <p>如果元素拥有一个 {{htmlattrxref("src", "audio")}} 属性：合法内容为 0 个或更多 {{HTMLElement("track")}} 元素，跟随着不包含 {{HTMLElement("audio")}} 或 {{HTMLElement("video")}} 媒体元素的透明内容<br> + <strong>否则</strong>: 合法内容为零个或多个 {{HTMLElement("source")}} 元素，跟随着 0 个或多个{{HTMLElement("track")}} 元素，跟随着不包含 {{HTMLElement("audio")}} 或 {{HTMLElement("video")}} 媒体元素的透明内容</p> + </td> + </tr> + <tr> + <th scope="row"> + <p>标签简写</p> + </th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th scope="row">合法的父元素</th> + <td>任何能够作为容器的元素</td> + </tr> + <tr> + <th scope="row">隐式ARIA role</th> + <td><a href="https://www.w3.org/TR/html-aria/#dfn-no-corresponding-role">No corresponding role</a></td> + </tr> + <tr> + <th scope="row">合法de ARIA roles</th> + <td>{{ARIARole("application")}}</td> + </tr> + <tr> + <th scope="row">DOM interface</th> + <td>{{domxref("HTMLAudioElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="规范">规范</h2> + +<table> + <thead> + <tr> + <th scope="col">贵干</th> + <th scope="col">进度</th> + <th scope="col">备注</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'embedded-content.html#the-audio-element', '<audio>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'semantics-embedded-content.html#the-audio-element', '<audio>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<p>{{Compat("html.elements.audio")}}</p> + +<h2 id="参见">参见</h2> + +<ul> + <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/Media">Web media technologies</a> + + <ul> + <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/Media/Formats/Containers">Media container formats (file types)</a></li> + <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/Media/Formats/Audio_codecs">Guide to audio codecs used on the web</a></li> + </ul> + </li> + <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web_Audio_API">Web Audio API</a></li> + <li>{{domxref("HTMLAudioElement")}}</li> + <li>{{htmlelement("source")}}</li> + <li>{{htmlelement("video")}}</li> + <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content">Learning area: Video and audio content</a></li> + <li><a href="https://wiki.developer.mozilla.org/en-US/Apps/Fundamentals/Audio_and_video_delivery/Cross-browser_audio_basics">Cross-browser audio basics</a></li> +</ul> diff --git a/files/zh-cn/web/html/element/b/index.html b/files/zh-cn/web/html/element/b/index.html new file mode 100644 index 0000000000..e01455a131 --- /dev/null +++ b/files/zh-cn/web/html/element/b/index.html @@ -0,0 +1,169 @@ +--- +title: <b> +slug: Web/HTML/Element/b +tags: + - HTML + - HTML 文本等级语义 + - HTML 流内容 + - HTML 表述内容 + - Web + - 元素 + - 参考 +translation_of: Web/HTML/Element/b +--- +<p id="摘要"><strong>HTML提醒注意（Bring Attention To）元素（<code><b></code>）</strong>用于吸引读者的注意到该元素的内容上（如果没有另加特别强调）。这个元素过去被认为是<strong>粗体（Boldface）元素</strong>，并且大多数浏览器仍然将文字显示为粗体。尽管如此，你不应将 <code><b></code> 元素用于显示粗体文字；替代方案是使用 CSS {{cssxref("font-weight")}} 属性来创建粗体文字。</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/en-US/docs/HTML/Content_categories">内容分类</a></th> + <td><a href="/en-US/docs/HTML/Content_categories#Flow_content">Flow content</a>, <a href="/en-US/docs/HTML/Content_categories#Phrasing_content">phrasing content</a>, palpable content.</td> + </tr> + <tr> + <th scope="row">允许的内容</th> + <td><a href="/en-US/docs/HTML/Content_categories#Phrasing_content">Phrasing content</a>.</td> + </tr> + <tr> + <th scope="row">标签略写</th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th scope="row">允许的父元素</th> + <td>任意可容纳 <a href="/en-US/docs/HTML/Content_categories#Phrasing_content">phrasing content</a> 的元素</td> + </tr> + <tr> + <th scope="row">Permitted ARIA roles</th> + <td>任意</td> + </tr> + <tr> + <th scope="row">DOM 接口</th> + <td>{{domxref("HTMLElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="属性">属性</h2> + +<p><span style="line-height: 21px;">这个元素只包含<a href="/en-US/docs/HTML/Global_attributes">全局属性</a>。</span></p> + +<h2 id="使用说明"><strong>使用说明</strong></h2> + +<ul> + <li> + <p><code><b></code> 应用场合如：摘要中的关键字、评论中的产品名称，或其他典型的应该加粗显示的文字（除此之外无其它特别强调）。</p> + </li> + <li> + <p>不要将<b>元素与 {{HTMLElement("strong")}}、{{HTMLElement("em")}}或{{HTMLElement("mark")}}元素混淆。 {{HTMLElement("strong")}}元素表示某些重要性的文本，{{HTMLElement("em")}}强调文本，而{{HTMLElement("mark")}}元素表示某些相关性的文本。 <code><b></code>元素不传达这样的特殊语义信息；仅在没有其他合适的元素时使用它。</p> + </li> + <li>类似的，也不要用 <code><b></code> 元素来标记标题。如果需要表示标题，请使用 {{HTMLElement("h1")}} 到 {{HTMLElement("h6")}} 标签。此外，可以通过样式表来改变这些元素的的默认样式，结果就是它们并<em>不一定</em>都是粗体。</li> + <li>通过在 <code><b></code> 元素上添加<strong> </strong>{{htmlattrxref("class")}} 属性来表示额外的语义信息是一个很好的方式（例如 <code><b class="lead"></code> 来表示段落中的第一句）。这可以在样式需要变动的情况下更轻松地处理不同应用场合的 <code><b></code> 元素，无须改动HTML。</li> + <li>以前 <code><b></code> 元素的意思就是让文本变成粗体。但从 HTML4 开始，不赞成标签表示带样式信息，于是 <code><b></code> 元素的含义发生了变化。</li> + <li>如果不是出于语义目的而使用 <code><b></code> 元素，那么让文本显示粗体更好的方式是使用将 CSS 的 {{cssxref("font-weight")}} 属性设置为 <code>"bold"</code>。</li> +</ul> + +<h2 id="例子">例子</h2> + +<pre class="brush: html"><p> + This article describes several <b>text-level</b> elements. + It explains their usage in an <b>HTML</b> document. +</p> +Keywords are displayed with the default style of the <b> element, likely in bold. +</pre> + +<h3 id="结果">结果</h3> + +<p>This article describes several <strong>text-level</strong> elements. It explains their usage in an <strong>HTML</strong> document.</p> + +<p>Keywords are displayed with the default style of the <b> element, likely in bold.</p> + +<h2 id="规范">规范</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'semantics.html#the-b-element', '<b>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'text-level-semantics.html#the-b-element', '<b>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'present/graphics.html#h-15.2.1', '<b>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("1.0")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Edge</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("1.0")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="相关链接">相关链接</h2> + +<ul> + <li>Others elements conveying <a href="/en-US/docs/HTML/Text_level_semantics_conveying_elements" title="HTML/Text level semantics conveying elements">text-level semantics</a>: {{HTMLElement("a")}}, {{HTMLElement("em")}}, {{HTMLElement("strong")}}, {{HTMLElement("small")}}, {{HTMLElement("cite")}}, {{HTMLElement("q")}}, {{HTMLElement("dfn")}}, {{HTMLElement("abbr")}}, {{HTMLElement("time")}}, {{HTMLElement("code")}}, {{HTMLElement("var")}}, {{HTMLElement("samp")}}, {{HTMLElement("kbd")}}, {{HTMLElement("sub")}}, {{HTMLElement("sup")}}, {{HTMLElement("i")}}, {{HTMLElement("mark")}}, {{HTMLElement("ruby")}}, {{HTMLElement("rp")}}, {{HTMLElement("rt")}}, {{HTMLElement("bdo")}}, {{HTMLElement("span")}}, {{HTMLElement("br")}}, {{HTMLElement("wbr")}}.</li> + <li><a class="external" href="http://www.w3.org/International/questions/qa-b-and-i-tags">Using <b> and <i> elements (W3C)</a></li> +</ul> + +<div>{{HTMLRef}}</div> diff --git a/files/zh-cn/web/html/element/base/index.html b/files/zh-cn/web/html/element/base/index.html new file mode 100644 index 0000000000..138ff49ba0 --- /dev/null +++ b/files/zh-cn/web/html/element/base/index.html @@ -0,0 +1,128 @@ +--- +title: <base>：文档根 URL 元素 +slug: Web/HTML/Element/base +tags: + - HTML + - 元素 + - 文档 +translation_of: Web/HTML/Element/base +--- +<div>{{HTMLRef}}</div> + +<p><strong>HTML <base> 元素</strong> 指定用于一个文档中包含的所有相对 URL 的根 URL。一份中只能有一个 <base> 元素。</p> + +<p>一个文档的基本 URL, 可以通过使用 {{domxref('document.baseURI')}} 的 JS 脚本查询。如果文档不包含 <code><base></code> 元素，<code>baseURI</code> 默认为 <code>{{domxref("document.location.href")}}</code>。</p> + +<table class="properties"> + <tbody> + <tr> + <th><a href="/zh-CN/docs/Web/HTML/Content_categories">内容类别</a></th> + <td>元数据内容。</td> + </tr> + <tr> + <th>合法的内容</th> + <td>无，它是一个{{Glossary("empty element")}}</td> + </tr> + <tr> + <th><dfn>标签省略</dfn></th> + <td>该标签不能有结束标签。</td> + </tr> + <tr> + <th>合法的父级</th> + <td>任何不带有任何其他 {{HTMLElement("base")}} 元素的{{HTMLElement("head")}} 元素</td> + </tr> + <tr> + <th>合法的 ARIA 角色</th> + <td>无</td> + </tr> + <tr> + <th>DOM 接口</th> + <td>{{domxref("HTMLBaseElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="属性">属性</h2> + +<p>该标签包含<a href="/zh-CN/docs/HTML/Global_attributes">全局属性</a>。</p> + +<p>如果指定了以下任一属性，这个元素<strong>必须</strong>在其他任何属性是URL的元素之前。例如：<code>{{HTMLElement("link")}}</code> 的 <code>href</code> 属性。</p> + +<dl> + <dt>{{htmlattrdef("href")}}</dt> + <dd>用于文档中相对 URL 地址的基础 URL。允许绝对和相对URL。</dd> + <dt>{{htmlattrdef("target")}}</dt> + <dd>默认浏览上下文的关键字或作者定义的名称，当没有明确目标的链接 <code>{{HTMLElement("a")}}</code> 或表单 <code>{{HTMLElement("form")}}</code> 导致导航被激活时显示其结果。该属性值定位到<em>浏览上下文</em>（例如选项卡，窗口或内联框 <code>{{HTMLElement("iframe")}}</code> ）。</dd> + <dd>以下的关键字指定特殊的意思： + <ul> + <li><code>_self</code>: 载入结果到当前浏览上下文中。（该值是元素的默认值）。</li> + <li><code>_blank</code>: 载入结果到一个新的未命名的浏览上下文。</li> + <li><code>_parent</code>: 载入结果到父级浏览上下文（如果当前页是内联框）。如果没有父级结构，该选项的行为和<code>_self</code>一样。</li> + <li><code>_top</code>: 载入结果到顶级浏览上下文（该浏览上下文是当前上下文的最顶级上下文）。如果没有父级，该选项的行为和_self一样。</li> + </ul> + </dd> +</dl> + +<h2 id="使用说明">使用说明</h2> + +<h3 id="多个_<base>_元素">多个 <code><base></code> 元素</h3> + +<p>如果指定了多个 <code><base></code> 元素，只会使用第一个 <code>href </code>和 <code>target </code>值, 其余都会被忽略。</p> + +<h3 id="页内锚">页内锚</h3> + +<p>指向文档中某个片段的链接，例如 <code><a href="#some-id"></code> 用 <code><base></code> 解析，触发对带有附加片段的基本 URL 的 HTTP 请求。</p> + +<p>例如：给定 <code><base href="https://example.com"></code></p> + +<p>以及此链接 <code><a href="#anchor">Anker</a></code></p> + +<p>链接指向 <code>https://example.com/#anchor</code></p> + +<h3 id="Open_Graph">Open Graph</h3> + +<p><a href="https://ogp.me">Open Graph</a> 标签不接受 <code><base></code>，并且应该始终具有完整的绝对URL。例如：</p> + +<pre><code><meta property="og:image" content="https://example.com/thumbnail.jpg"></code></pre> + +<h2 id="示例">示例</h2> + +<pre class="brush: html"><base href="http://www.example.com/"> +<base target="_blank"> +<base target="_top" href="http://www.example.com/"> +</pre> + +<h2 id="规范">规范</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">规范</th> + <th scope="col">状态</th> + <th scope="col">注释</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'semantics.html#the-base-element', '<base>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>上次快照之后没有变化。</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'document-metadata#the-base-element', '<base>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td><font face="Arial, x-locale-body, sans-serif"><span style="background-color: rgba(212, 221, 228, 0.14902);">指定 </span></font><code>target</code> 的行为</td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/links.html#h-12.4', '<base>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td>添加 <code>target</code> 属性</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<div class="hidden">此页面中的兼容性表是根据结构化数据生成的。 如果您想贡献数据，请查看 <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> 并向我们发送拉取请求。</div> + +<p>{{Compat("html.elements.base")}}</p> diff --git a/files/zh-cn/web/html/element/basefont/index.html b/files/zh-cn/web/html/element/basefont/index.html new file mode 100644 index 0000000000..9270e149c9 --- /dev/null +++ b/files/zh-cn/web/html/element/basefont/index.html @@ -0,0 +1,111 @@ +--- +title: <basefont> +slug: Web/HTML/Element/basefont +tags: + - Web + - 元素 +translation_of: Web/HTML/Element/basefont +--- +<div>{{obsolete_header}}</div> + +<h2 id="概要">概要</h2> + +<p>HTML标签<basefont>用来设置文档的默认字体大小。使用{{HTMLElement("font")}}可以相对于默认字体大小进行变化。</p> + +<div class="note"> +<p><em>使用说明: </em></p> + +<p><strong>不要再使用这个标签！ </strong>尽管在HTML 3.2中曾经（不严格地）标准化，但是它并不被主流的浏览器所支持。而且，不同的浏览器、甚至同一浏览器的相邻版本，都没有使用相同的实现方式； 实际上，使用这个标签总是导致不确定的结果。</p> + +<p><basefont>元素，同其他只与样式相关的元素一起，在标准中不被建议使用。从HTML 4起，HTML不再传递样式信息（除{{HTMLElement("style")}} 元素和所有元素的<strong>style</strong>属性内容外）。在HTML5，这个元素已经被彻底移除。对于所有新的网页开发，样式只应该写在CSS中。</p> + +<p>使用<a href="/en-US/docs/Web/CSS/CSS_Fonts">CSS Fonts</a>属性，同样能够实现 {{HTMLElement("font")}}的效果，甚至更好控制。</p> +</div> + +<h2 id="属性">属性</h2> + +<p>如同其他HTML元素一样，它支持<a href="/en-US/docs/HTML/Global_attributes" title="HTML/Global attributes">全局属性</a>.</p> + +<dl> + <dt>{{htmlattrdef("color")}}</dt> + <dd>该属性使用颜色名称或者形如#RRGGBB的十六进制格式设置字体的颜色。</dd> + <dt>{{htmlattrdef("face")}}</dt> + <dd>该属性包含一个或多个字体名称。文档文字默认按照第一个浏览器支持的字体进行渲染。如果所有列出的字体本地系统都未安装，浏览器默认使用该系统上的定比或者定宽字体。</dd> + <dt>{{htmlattrdef("size")}}</dt> + <dd>该属性定义了字体大小的，使用数值或者相对值。数值值域为1～7，1最小，默认值为3。</dd> +</dl> + +<h2 id="DOM接口">DOM接口</h2> + +<p>该元素实现了<code><a href="/en-US/docs/DOM/HTMLBaseFontElement" title="DOM/HTMLBaseFontElement">HTMLBaseFontElement</a>接口</code>.</p> + +<h2 id="示例">示例</h2> + +<pre><basefont color="#FF0000" face="Helvetica" size="+2" /> +</pre> + +<h2 id="浏览器兼容">浏览器兼容</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Edge</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="备注">备注</h2> + +<ul> + <li>HTML 3.2 支持basefont元素，但只支持size属性。</li> + <li>严格HTML和XHTML均不支持该元素。</li> + <li>尽管曾是过渡标准的一部分，许多像Mozilla与Opera这些聚焦正式标准的浏览器并不支持该元素。</li> + <li>该元素的效果可以通过CSS规则实现，为 {{HTMLElement("body")}} 设置CSS属性即可。</li> + <li>XHTML 1.0 要求这个元素包含结尾的斜杠: <code><basefont /></code>.</li> +</ul> + +<div>{{HTMLRef}}</div> diff --git a/files/zh-cn/web/html/element/bdi/index.html b/files/zh-cn/web/html/element/bdi/index.html new file mode 100644 index 0000000000..03d0f69f37 --- /dev/null +++ b/files/zh-cn/web/html/element/bdi/index.html @@ -0,0 +1,103 @@ +--- +title: <bdi> +slug: Web/HTML/Element/bdi +tags: + - BiDi + - Element + - HTML + - HTML text-level semantics + - Reference + - Web +translation_of: Web/HTML/Element/bdi +--- +<h2 id="Summary">Summary</h2> + +<p>{{HTMLRef}}<br> + <strong>HTML </strong>双向隔离元素(<strong> <code><bdi></code> </strong>) 告诉浏览器的双向算法将其包含的文本与周围的文本隔离，当网站动态插入一些文本且不知道所插入文本的方向性时，此功能特别有用。</p> + +<p>{{EmbedInteractiveExample("pages/tabbed/bdi.html", "tabbed-standard")}}</p> + + + +<p class="note">尽管同样的显示效果可以通过使用CSS规则 {{cssxref("unicode-bidi")}}：隔离{{HTMLElement("span")}}或者其他文本格式化元素，但语义信息只能通过<bdi>元素传递。特别是，当浏览器允许忽略CSS样式时，在这种情况下，使用<bdi>仍然可以保证文本正确显示，而使用CSS样式来传递语义时就显得毫无用处。</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/en-US/docs/HTML/Content_categories" title="HTML/Content_categories">Content categories</a></th> + <td><a href="/en-US/docs/HTML/Content_categories#Flow_content" title="HTML/Content categories#Flow content">Flow content</a>, <a href="/en-US/docs/HTML/Content_categories#Phrasing_content" title="HTML/Content_categories#Phrasing_content">phrasing content</a>, palpable content.</td> + </tr> + <tr> + <th scope="row">Permitted content</th> + <td><a href="/en-US/docs/HTML/Content_categories#Phrasing_content" title="HTML/Content_categories#Flow_content">Phrasing content</a>.</td> + </tr> + <tr> + <th scope="row">Tag omission</th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th scope="row">Permitted parent elements</th> + <td>Any element that accepts <a href="/en-US/docs/HTML/Content_categories#Phrasing_content" title="HTML/Content_categories#Flow_content">phrasing content</a>.</td> + </tr> + <tr> + <th scope="row">DOM interface</th> + <td>{{domxref("HTMLElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="属性">属性</h2> + +<p>{{htmlattrdef("dir")}}</p> + +<p>如同其他HTML元素一样，它包含<a href="/en-US/docs/HTML/Global_attributes" title="HTML/Global attributes">全局属性</a>，但是有一些语义上的细微差别：<strong>dir</strong>属性不继承父元素。如果没有设置，默认值即为auto，以便浏览器根据元素内容决定元素内容的方向。</p> + +<h2 id="示例">示例</h2> + +<pre class="brush: html"><p dir="ltr">This arabic word <bdi>ARABIC_PLACEHOLDER</bdi> is automatically displayed right-to-left.</p> +</pre> + +<h3 id="结果">结果</h3> + +<p dir="ltr">This arabic word REDLOHECALP_CIBARA is automatically displayed right-to-left.</p> + +<h2 id="Specifications" name="Specifications">规范</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'text-level-semantics.html#the-bdi-element', '<bdi>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'the-bdi-element.html#the-bdi-element', '<bdi>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容">浏览器兼容</h2> + + + + + +<p>{{Compat("html.elements.bdi")}}</p> + + + +<h2 dir="ltr" id="参见">参见</h2> + +<ul> + <li>相关元素: {{HTMLElement("bdo")}}</li> + <li>相关属性: {{cssxref("direction")}}, {{cssxref("unicode-bidi")}}</li> +</ul> diff --git a/files/zh-cn/web/html/element/bdo/index.html b/files/zh-cn/web/html/element/bdo/index.html new file mode 100644 index 0000000000..6037c4b619 --- /dev/null +++ b/files/zh-cn/web/html/element/bdo/index.html @@ -0,0 +1,122 @@ +--- +title: '<bdo>: 双向文本替代元素' +slug: Web/HTML/Element/bdo +translation_of: Web/HTML/Element/bdo +--- +<div>{{HTMLRef}}</div> + +<div></div> + +<p><span class="seoSummary">HTML 双向文本替代元素(<strong><code><bdo></code></strong>)改写了文本的方向性, </span>使文本以不同的方向渲染呈现出来<span class="seoSummary">(override可以翻译很多意思，编程语言中多用覆盖，重载；这里采用了Google的整体翻译，取替代替换改写之意)</span></p> + +<div>{{EmbedInteractiveExample("pages/tabbed/bdo.html", "tabbed-standard")}}</div> + + + +<p>文本的字符是从给定方向的起始点绘制的; 各个字符的方向不受影响 (因此字符集不会向后拉, 例如).</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row">内容分类</th> + <td><a href="zh-CN/docs/Web/Guide/HTML/Content_categories">流式元素</a>, <a href="zh-CN/docs/Web/Guide/HTML/Content_categories">短语元素</a>, 显式元素.</td> + </tr> + <tr> + <th scope="row">许可内容</th> + <td><a href="zh-CN/docs/Web/Guide/HTML/Content_categories">短语元素</a>.</td> + </tr> + <tr> + <th scope="row">标记省略</th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th scope="row">许可父级元素</th> + <td>接受<a href="zh-CN/docs/Web/Guide/HTML/Content_categories">短语元素</a>的任何元素</td> + </tr> + <tr> + <th scope="row">隐式ARIA角色</th> + <td><a href="https://www.w3.org/TR/html-aria/#dfn-no-corresponding-role">No corresponding role</a></td> + </tr> + <tr> + <th scope="row">许可ARIA角色</th> + <td>任何</td> + </tr> + <tr> + <th scope="row">DOM 接口</th> + <td>{{domxref("HTMLElement")}}直到Gecko 1.9.2 (包括Firefox 4)为止，Firefox均为此元素实现HTMLSpanElement接口。</td> + </tr> + </tbody> +</table> + +<h2 id="属性">属性</h2> + +<p>元素属性包含<a href="/zh-CN/docs/Web/HTML/Global_attributes">全局属性</a></p> + +<dl> + <dt>{{htmlattrdef("dir")}}</dt> + <dd> + <p> 在此元素内容中呈现文本的方向.可能的值是:</p> + + <ul> + <li>ltr: 指示文本应从左到右的方向.</li> + <li>rtl: 指示文本应从右到左的方向.</li> + </ul> + </dd> +</dl> + +<h2 id="示例">示例</h2> + +<pre class="brush: html"><!-- Switch text direction --> +<p>This text will go left to right.</p> +<p><bdo dir="rtl">This text will go right +to left.</bdo></p> +</pre> + +<h3 id="结果">结果</h3> + +<p>{{EmbedLiveSample('Examples')}}</p> + +<h2 id="注意">注意</h2> + +<p>HTML 4规范未指定此元素的事件。 它们是在XHTML中添加的。 这很可能是疏忽。</p> + +<h2 id="规范">规范</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">规范</th> + <th scope="col">状态</th> + <th scope="col">注释</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'semantics.html#the-bdo-element', '<bdo>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'textlevel-semantics.html#the-bdo-element', '<bdo>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'dirlang.html#h-8.2.4', '<bdo>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + + + +<p>{{Compat("html.elements.bdo")}}</p> + +<h2 dir="ltr" id="另参见">另参见</h2> + +<ul> + <li>相关HTML: {{HTMLElement("bdi")}}</li> +</ul> diff --git a/files/zh-cn/web/html/element/bgsound/index.html b/files/zh-cn/web/html/element/bgsound/index.html new file mode 100644 index 0000000000..5bc998b303 --- /dev/null +++ b/files/zh-cn/web/html/element/bgsound/index.html @@ -0,0 +1,100 @@ +--- +title: <bgsound> +slug: Web/HTML/Element/bgsound +translation_of: Web/HTML/Element/bgsound +--- +<div>{{non-standard_header}}</div> + +<h2 id="概要">概要</h2> + +<p><bgsound>是IE浏览器中设置网页背景音乐的元素。</p> + +<div class="note"> +<p><strong>不要使用它!</strong>想要在网页中嵌入音频，应当使用{{HTMLElement("audio")}}.</p> +</div> + +<h2 id="属性">属性</h2> + +<dl> + <dt>{{htmlattrdef("balance")}}</dt> + <dd>该属性取值在-10,000到+10,000，它决定扬声器之间的音量如何分配。</dd> + <dt>{{htmlattrdef("loop")}}</dt> + <dd>该属性表明音频被播放的次数，是一个数值或者关键字infinite。</dd> + <dt>{{htmlattrdef("src")}}</dt> + <dd>该属性定义了音频文件的URL，必须是以下格式之一：.wav，.au，.mid</dd> + <dt>{{htmlattrdef("volume")}}</dt> + <dd>该属性值域为-10,000到0，它决定背景音乐的音量大小。</dd> +</dl> + +<h2 id="示例">示例</h2> + +<pre class="brush:html"><bgsound src="sound1.mid"> + +<bgsound src="sound2.au" loop="infinite"> +</pre> + +<h2 id="备注">备注</h2> + +<p>类似的功能在一些版本的Netscape中使用<embed>标签来调用音频播放器。</p> + +<p>你可以使用自闭合标签<code><bgsound />。然后由于它并非标准的一部分，XHTML会认为它无效。</code></p> + +<h2 id="浏览器兼容">浏览器兼容</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}} [1]</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}} [1]</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] Up to Firefox 22, even if not supporting this element, Gecko was associating it an {{domxref("HTMLSpanElement")}}. This was fixed then and now the associated element is an {{domxref("HTMLUnknownElement")}} as required by the specification.</p> + +<h2 id="参见">参见</h2> + +<ul> + <li>The {{htmlelement("audio")}}, which is the standard element to embed audio in a document.</li> +</ul> + +<div>{{HTMLRef}}</div> diff --git a/files/zh-cn/web/html/element/big/index.html b/files/zh-cn/web/html/element/big/index.html new file mode 100644 index 0000000000..2136192d9e --- /dev/null +++ b/files/zh-cn/web/html/element/big/index.html @@ -0,0 +1,105 @@ +--- +title: <big> +slug: Web/HTML/Element/big +translation_of: Web/HTML/Element/big +--- +<div>{{obsolete_header}}</div> + +<h2 id="概要">概要</h2> + +<p>The HTML Big Element (<code><big></code>) 会使字体加大一号（例如从小号(small)到中号(medium)，从大号(large)到加大(x-large)），最大不超过浏览器的最大字体。</p> + +<div class="note"> +<p><strong>使用备注: </strong>由于它是纯显示性的，该元素在<a href="/en-US/docs/Web/Guide/HTML/HTML5" title="/en-US/docs/Web/Guide/HTML/HTML5">HTML5</a>中已经被移除，不应当再使用。取而代之，网页开发者应当使用CSS属性。 </p> +</div> + +<h2 id="属性">属性</h2> + +<p>只包含 <a href="/en-US/docs/HTML/global_attributes" title="HTML/global attributes">全局属性</a></p> + +<h2 id="示例_1">示例 1</h2> + +<pre class="brush:xml"><p> + This is the first sentence. <big>This whole + sentence is in bigger letters.</big> +</p></pre> + +<h2 id="示例_2_(CSS_版)">示例 2 (CSS 版)</h2> + +<pre class="brush:xml"><p> + This is the first sentence. <span style="font-size:1.2em">This whole + sentence is in bigger letters.</span> +</p></pre> + +<h3 id="结果">结果</h3> + +<p>This is the first sentence. <span style="font-size: 1.2em;">This whole sentence is in bigger letters.</span></p> + +<h2 id="DOM_接口">DOM 接口</h2> + +<p>该元素实现了 {{domxref('HTMLElement')}}接口.</p> + +<div class="note"><strong>实现备注: 直到</strong> Gecko 1.9.2, Firefox 为该元素实现了{{domxref('HTMLSpanElement')}}接口.</div> + +<h2 id="浏览器兼容">浏览器兼容</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Edge</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="参见">参见</h2> + +<ul> + <li>{{htmlelement("small")}}, {{htmlelement("font")}}, {{htmlelement("style")}}</li> + <li>HTML 4.01 Specification: <a class="external" href="http://www.w3.org/TR/html4/present/graphics.html#h-15.2">Font Styles</a></li> +</ul> + +<div>{{HTMLRef}}</div> diff --git a/files/zh-cn/web/html/element/blink/index.html b/files/zh-cn/web/html/element/blink/index.html new file mode 100644 index 0000000000..43dffb7fe4 --- /dev/null +++ b/files/zh-cn/web/html/element/blink/index.html @@ -0,0 +1,94 @@ +--- +title: <blink> +slug: Web/HTML/Element/blink +translation_of: Web/HTML/Element/blink +--- +<div>{{Deprecated_header}} {{obsolete_header}}</div> + +<p>HTML Blink Element (<code><blink></code>)不是标准元素，它会使包含其中的文本闪烁。</p> + +<div class="warning"> +<p class="note"><strong>警告:</strong> 不要使用这个元素，它已经被<strong>淘汰</strong>。闪烁字体不符合无障碍标准，CSS规范允许浏览器忽略闪烁值。</p> +</div> + +<h2 id="DOM_接口">DOM 接口</h2> + +<p>该元素不被支持，因而实现了{{domxref("HTMLUnknownElement")}} 接口.</p> + +<h2 id="示例">示例</h2> + +<pre class="brush:html"><blink>Why would somebody use this?</blink> +</pre> + +<h3 id="结果_(淡化!)">结果 (淡化!)</h3> + +<p><img alt="Image:HTMLBlinkElement.gif" src="/@api/deki/files/247/=HTMLBlinkElement.gif"></p> + +<h2 id="规范">规范</h2> + +<p>该元素不是标准元素，不属于规范的一部分. 不信的话，<a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/obsolete.html#non-conforming-features"> 你自己来看HTML规范文档</a>.</p> + +<h2 id="浏览器兼容">浏览器兼容</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}} [1]</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}} [2]</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}} [1]</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}} [2]</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] Supported until version 22. Removed in version 23.</p> + +<p>[2] Supported until version 12.1. Removed in version 15.0.</p> + +<h2 id="参见">参见</h2> + +<ul> + <li><a href="http://www.montulli.org/theoriginofthe%3Cblink%3Etag">History of the creation of the HTML <code><blink></code> element</a>.</li> + <li>{{cssxref("text-decoration")}}, where a blink value exists, though browsers are not required to effectively make it blink.</li> + <li>{{htmlelement("marquee")}}, another similar non-standard element.</li> + <li><a href="/en-US/docs/Web/Guide/CSS/Using_CSS_animations" title="/en-US/docs/Web/Guide/CSS/Using_CSS_animations">CSS animations</a> are the way to go to create such an effect.</li> +</ul> + +<p>{{HTMLRef}}</p> diff --git a/files/zh-cn/web/html/element/blockquote/index.html b/files/zh-cn/web/html/element/blockquote/index.html new file mode 100644 index 0000000000..4bd40652b7 --- /dev/null +++ b/files/zh-cn/web/html/element/blockquote/index.html @@ -0,0 +1,127 @@ +--- +title: <blockquote>：块级引用元素 +slug: Web/HTML/Element/blockquote +tags: + - Blockquote + - 元素 + - 块级引用 + - 引用 +translation_of: Web/HTML/Element/blockquote +--- +<div>{{HTMLRef}}</div> + +<p><strong>HTML <code><blockquote></code> 元素</strong>（或者 HTML 块级引用元素），代表其中的文字是引用内容。通常在渲染时，这部分的内容会有一定的缩进（<a href="/zh-CN/docs/Web/HTML/Element/blockquote#Notes">注</a> 中说明了如何更改）。若引文来源于网络，则可以将原内容的出处 URL 地址设置到 cite 特性上，若要以文本的形式告知读者引文的出处时，可以通过 {{HTMLElement("cite")}} 元素。</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/blockquote.html","tabbed-standard")}}</div> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/en-US/docs/HTML/Content_categories">Content categories</a></th> + <td><a href="/en-US/docs/HTML/Content_categories#Flow_content">Flow content</a>, sectioning root, palpable content.</td> + </tr> + <tr> + <th scope="row">Permitted content</th> + <td><a href="/en-US/docs/HTML/Content_categories#Flow_content">Flow content</a>.</td> + </tr> + <tr> + <th scope="row">Tag omission</th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th scope="row">Permitted parents</th> + <td>Any element that accepts <a href="/en-US/docs/HTML/Content_categories#Flow_content">flow content</a>.</td> + </tr> + <tr> + <th scope="row">Permitted ARIA roles</th> + <td>Any</td> + </tr> + <tr> + <th scope="row">DOM interface</th> + <td>{{domxref("HTMLQuoteElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="属性">属性</h2> + +<p>此元素的属性包含 <a href="https://developer.mozilla.org/zh-CN/docs/Web/HTML/Global_attributes">全局属性</a>。</p> + +<dl> + <dt>{{htmlattrdef("cite")}}</dt> + <dd>是一个标注引用的信息的来源文档或者相关信息的URL。通常用来描述能够解释引文的上下文或者引用的信息。</dd> +</dl> + + +<h2 id="使用备注">使用备注</h2> + +<p>若要修改被引用内容的缩进距离，可以使用 {{Glossary("CSS")}} {{cssxref("margin-left")}} 和/或 {{cssxref("margin-right")}} 属性，或使用 {{cssxref("margin")}} 缩写属性。</p> + +<p>若想使用在行内引用较短的内容而非创建一个单独的引用块，可使用 {{HTMLElement("q")}}（Quotation）元素。</p> + +<p>如果想要使用短引用（行间引用），可以使用{{HTMLElement("q")}} 标签。</p> + +<h2 id="例子">例子</h2> + +<p>下面的这个例子演示了使用 <code><blockquote></code> 元素引用一段来自 {{RFC(1149)}} 的内容，<cite>以禽类作为载体的IP 数据包传输标准。</cite></p> + +<pre class="brush: html"><blockquote cite="https://tools.ietf.org/html/rfc1149"> + <p>Avian carriers can provide high delay, low + throughput, and low altitude service. The + connection topology is limited to a single + point-to-point path for each carrier, used with + standard carriers, but many carriers can be used + without significant interference with each other, + outside of early spring. This is because of the 3D + ether space available to the carriers, in contrast + to the 1D ether used by IEEE802.3. The carriers + have an intrinsic collision avoidance system, which + increases availability.</p> +</blockquote> +</pre> + +<p>上面的HTML代码将会生成:</p> + +<p>{{EmbedLiveSample("Example", 640, 180)}}</p> + +<h2 id="规范">规范</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">规范</th> + <th scope="col">状态</th> + <th scope="col">备注</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'grouping-content.html#the-blockquote-element', '<blockquote>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'grouping-content.html#the-blockquote-element', '<blockquote>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/text.html#h-9.2.2', '<blockquote>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + + + +<p>{{Compat("html.elements.blockquote")}}</p> + +<h2 id="参见">参见</h2> + +<ul> + <li>适用于行内引用的 {{HTMLElement("q")}} 元素。</li> + <li>适用于来源引文的 {{HTMLElement("cite")}} 元素。</li> +</ul> diff --git a/files/zh-cn/web/html/element/body/index.html b/files/zh-cn/web/html/element/body/index.html new file mode 100644 index 0000000000..b92f290bbb --- /dev/null +++ b/files/zh-cn/web/html/element/body/index.html @@ -0,0 +1,165 @@ +--- +title: <body>：文档主体元素 +slug: Web/HTML/Element/body +tags: + - HTML + - 元素 + - 分段 + - 参考 + - 段落根元素 +translation_of: Web/HTML/Element/body +--- +<p>{{HTMLRef}}</p> + +<p><strong>HTML <code>body</code> 元素</strong>表示文档的内容。{{domxref("document.body")}} 属性提供了可以轻松访问文档的 body 元素的脚本。</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/en-US/docs/Web/HTML/Content_categories">内容分类</a></th> + <td><a href="/en-US/docs/Web/HTML/Sections_and_Outlines_of_an_HTML5_document#Sectioning_roots">Sectioning root</a>.</td> + </tr> + <tr> + <th scope="row">允许的内容</th> + <td><a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">Flow content</a>.</td> + </tr> + <tr> + <th scope="row">Tag omission</th> + <td>The start tag may be omitted if the first thing inside it is not a space character, comment, {{HTMLElement("script")}} element or {{HTMLElement("style")}} element. The end tag may be omitted if the <code><body></code> element has contents or has a start tag, and is not immediately followed by a comment.</td> + </tr> + <tr> + <th scope="row">允许的父元素</th> + <td>它必须是 <a href="/zh-CN/docs/Web/HTML/Element/html">html</a> 元素的直接子元素。</td> + </tr> + <tr> + <th scope="row">Permitted ARIA roles</th> + <td>None</td> + </tr> + <tr> + <th scope="row">DOM 接口</th> + <td>{{domxref("HTMLBodyElement")}} + <ul> + <li><code>body</code> 元素接口 {{domxref("HTMLBodyElement")}} 。</li> + <li>你可以通过 {{domxref("document.body")}} 属性访问 <code>body</code> 元素。</li> + </ul> + </td> + </tr> + </tbody> +</table> + +<h2 id="属性">属性</h2> + +<p>此元素包含 <a href="/zh-CN/docs/Web/HTML/Global_attributes">全局属性</a> 。</p> + +<dl class="syntaxbox"> + <dt>{{htmlattrdef("alink")}} {{obsolete_inline}}</dt> + <dd>超链接选中之后的文本颜色。<em>此方法不符合规范，请使用 CSS 的 {{cssxref("color")}} 属性和 {{cssxref(":active")}} 伪类替代。</em></dd> + <dt>{{htmlattrdef("background")}} {{obsolete_inline}}</dt> + <dd>将URI所指向的图片作为背景。此方法不符合规范，请<em>使用</em><em> CSS 的 {{cssxref("background")}} 属性替代。</em></dd> + <dt>{{htmlattrdef("bgcolor")}} {{obsolete_inline}}</dt> + <dd>文档的背景颜色。此方法不符合规范，请使用<em> CSS 的 {{cssxref("background-color")}} 属性替代。</em></dd> + <dt>{{htmlattrdef("bottommargin")}} {{obsolete_inline}}</dt> + <dd><code>body</code> 的底外边距。此方法不符合规范，请使用<em> CSS 的 {{cssxref("margin-bottom")}} 属性替代。</em></dd> + <dt>{{htmlattrdef("leftmargin")}} {{obsolete_inline}}</dt> + <dd><code>body</code> 的左外边距。此方法不符合规范，请使用<em> CSS 的 {{cssxref("margin-left")}} 属性替代。</em></dd> + <dt>{{htmlattrdef("link")}} {{obsolete_inline}}</dt> + <dd>未访问过的超链接文本颜色。此方法不符合规范，请使用<em> CSS 的 {{cssxref("color")}} 属性和 {{cssxref(":link")}} 伪类替代。</em></dd> + <dt>{{htmlattrdef("onafterprint")}}</dt> + <dd>用户完成文档打印之后调用的函数。</dd> + <dt>{{htmlattrdef("onbeforeprint")}}</dt> + <dd>用户要求打印文档之前调用的函数。</dd> + <dt>{{htmlattrdef("onbeforeunload")}}</dt> + <dd>文档即将被关闭之前调用的函数。</dd> + <dt>{{htmlattrdef("onblur")}}</dt> + <dd>文档失去焦点时调用的函数。</dd> + <dt>{{htmlattrdef("onerror")}}</dt> + <dd>文档加载失败时调用的函数。</dd> + <dt>{{htmlattrdef("onfocus")}}</dt> + <dd>文档获得焦点时调用的函数。</dd> + <dt>{{htmlattrdef("onhashchange")}}</dt> + <dd>文档当前地址的片段标识部分（以(<code>'#'</code>)开始的部分）发生改变时调用的函数。</dd> + <dt>{{htmlattrdef("onlanguagechange")}} {{experimental_inline}}</dt> + <dd>用户选择的语言发生改变时调用的函数。</dd> + <dt>{{htmlattrdef("onload")}}</dt> + <dd>文档完成加载时调用的函数。</dd> + <dt>{{htmlattrdef("onmessage")}}</dt> + <dd>文档接收到消息时调用的函数。</dd> + <dt>{{htmlattrdef("onoffline")}}</dt> + <dd>网络连接失败时调用的函数。</dd> + <dt>{{htmlattrdef("ononline")}}</dt> + <dd>网络连接恢复时调用的函数。</dd> + <dt>{{htmlattrdef("onpopstate")}}</dt> + <dd>用户回退历史记录时调用的函数。</dd> + <dt>{{htmlattrdef("onredo")}}</dt> + <dd>用户重做操作时调用的函数。</dd> + <dt>{{htmlattrdef("onresize")}}</dt> + <dd>文档尺寸发生改变时调用的函数。</dd> + <dt>{{htmlattrdef("onstorage")}}</dt> + <dd>存储内容（<code>localStorage</code> / <code>sessionStorage</code>）发生改变时调用的函数。</dd> + <dt>{{htmlattrdef("onundo")}}</dt> + <dd>用户撤销操作时调用的函数。</dd> + <dt>{{htmlattrdef("onunload")}}</dt> + <dd>文档关闭时调用的函数。</dd> + <dt>{{htmlattrdef("rightmargin")}} {{obsolete_inline}}</dt> + <dd><code>body</code> 的右外边距。此方法不符合规范，请使用 <em>CSS 的 {{cssxref("margin-right")}} 属性替代。</em></dd> + <dt>{{htmlattrdef("text")}} {{obsolete_inline}}</dt> + <dd>文本颜色。此方法不符合规范，请使用<em> CSS 的 {{cssxref("color")}} 属性替代。</em></dd> + <dt>{{htmlattrdef("topmargin")}} {{obsolete_inline}}</dt> + <dd><code>body</code> 的上外边距。此方法不符合规范，请使用<em> CSS 的 {{cssxref("margin-top")}} 属性替代。</em></dd> + <dt>{{htmlattrdef("vlink")}} {{obsolete_inline}}</dt> + <dd>访问过的超链接的文本颜色。 此方法不符合规范，请使用<em> CSS {{cssxref("color")}} 属性和 {{cssxref(":visited")}} 伪类替代。</em></dd> +</dl> + +<h2 id="例子">例子</h2> + +<pre class="brush: html"><html> + <head> + <title>Document title</title> + </head> + <body> + <p>This is a paragraph</p> + </body> +</html> +</pre> + +<h2 id="规范">规范</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">规范</th> + <th scope="col">状态</th> + <th scope="col">备注</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'semantics.html#the-body-element', '<body>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>更改了不一致的特性列表。</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'sections.html#the-body-element', '<body>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>废弃了以前不赞成的属性。定义了没有标准化的 <code>margintop</code>, <code>marginleft</code>, <code>marginright</code> 和<code>marginbottom</code> 不一致的行为。增加了 <code>on*</code> 属性。</td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/global.html#h-7.5.1', '<body>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td>不再赞成 <code>alink</code>, <code>background</code>, <code>bgcolor</code>, <code>link</code>, <code>text</code> 和<code>vlink</code> 属性。</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + + + +<p>{{Compat("html.elements.body")}}</p> + +<h2 id="参见">参见</h2> + +<ul> + <li>{{HTMLElement("html")}}</li> + <li>{{HTMLElement("head")}}</li> +</ul> diff --git a/files/zh-cn/web/html/element/br/index.html b/files/zh-cn/web/html/element/br/index.html new file mode 100644 index 0000000000..aa3e6ea144 --- /dev/null +++ b/files/zh-cn/web/html/element/br/index.html @@ -0,0 +1,113 @@ +--- +title: <br> +slug: Web/HTML/Element/br +translation_of: Web/HTML/Element/br +--- +<p><strong>HTML <br> 元素</strong>在文本中生成一个换行（回车）符号。此元素在写诗和地址时很有用，这些地方的换行都非常重要。</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/en-US/docs/HTML/Content_categories">内容分类</a></th> + <td><a href="/en-US/docs/HTML/Content_categories#Flow_content">Flow content</a>, <a href="/en-US/docs/HTML/Content_categories#Phrasing_content">phrasing content</a>.</td> + </tr> + <tr> + <th scope="row">允许的内容</th> + <td>无，这是一个{{Glossary("空元素")}}.</td> + </tr> + <tr> + <th scope="row">标签略写</th> + <td>必须有一个开始标签，并且一定不能有结束标签。在 XHTML中将元素写为 <code><br /></code>。</td> + </tr> + <tr> + <th scope="row">允许的父元素</th> + <td>任意可容纳 <a href="/en-US/docs/HTML/Content_categories#Phrasing_content">phrasing content</a> 的元素。</td> + </tr> + <tr> + <th scope="row">Permitted ARIA roles</th> + <td>任意</td> + </tr> + <tr> + <th scope="row">DOM 接口</th> + <td>{{domxref("HTMLBRElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="属性">属性</h2> + +<p>此元素的属性包括<a href="/en-US/docs/HTML/Global_attributes">全局属性</a>。</p> + +<dl> + <dt>{{htmlattrdef("clear")}} {{deprecatedGeneric('inline','HTML4.01')}} {{obsoleteGeneric('inline','HTML5')}}</dt> + <dd>指定换行后下一行文本开始位置。 + <div class="note"> + <p><strong>使用注意： 此属性</strong>在 {{HTMLVersionInline(5)}} 中已被废弃，<strong>请勿使用</strong>。 请用 {{CSSxref('clear')}} 属性替代。</p> + </div> + </dd> +</dl> + +<h2 id="注意">注意</h2> + +<p>不要用 <code><br></code> 来增加文本之间的行间隔；应使用 <a href="/en-US/docs/CSS">CSS</a> {{cssxref('margin')}} 属性或{{HTMLElement("p")}} 元素。</p> + +<h2 id="例子">例子</h2> + +<pre class="brush: html">Mozilla Foundation<br> +1981 Landings Drive<br> +Building K<br> +Mountain View, CA 94043-0801<br> +USA +</pre> + +<p>The HTML above outputs:</p> + +<p>Mozilla Foundation<br> + 1981 Landings Drive<br> + Building K<br> + Mountain View, CA 94043-0801<br> + USA</p> + +<h2 id="技术规范">技术规范</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'semantics.html#the-br-element', '<br>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'text-level-semantics.html#the-br-element', '<br>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/text.html#h-9.3.2.1', '<br>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + + + +<p>{{Compat("html.elements.br")}}</p> + +<h2 id="参见">参见</h2> + +<ul> + <li>{{HTMLElement("address")}} element</li> + <li>{{HTMLElement("p")}} element</li> +</ul> + +<div>{{HTMLRef}}</div> diff --git a/files/zh-cn/web/html/element/button/index.html b/files/zh-cn/web/html/element/button/index.html new file mode 100644 index 0000000000..11b4d5d7a3 --- /dev/null +++ b/files/zh-cn/web/html/element/button/index.html @@ -0,0 +1,226 @@ +--- +title: <button> +slug: Web/HTML/Element/button +translation_of: Web/HTML/Element/button +--- +<p><span class="seoSummary"><strong>HTML <code><button></code> 元素</strong>表示一个可点击的按钮，可以用在<a href="/en-US/docs/Learn/HTML/Forms">表单</a>或文档其它需要使用简单标准按钮的地方。</span> 默认情况下，HTML按钮的显示样式接近于 {{Glossary("user agent")}} 所在的宿主系统平台（用户操作系统）的按钮， 但你可以使用 <a href="/en-US/docs/Web/CSS">CSS</a> 来改变按钮的样貌。</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/en-US/docs/HTML/Content_categories">内容分类</a></th> + <td><a href="/en-US/docs/HTML/Content_categories#Flow_content">Flow content</a>, <a href="/en-US/docs/HTML/Content_categories#Phrasing_content">phrasing content</a>, <a href="/en-US/docs/HTML/Content_categories#Interactive_content">Interactive content</a>, <a href="/en-US/docs/HTML/Content_categories#Form_listed">listed</a>, <a href="/en-US/docs/HTML/Content_categories#Form_labelable">labelable</a>, and <a href="/en-US/docs/HTML/Content_categories#Form_submittable">submittable</a> <a href="/en-US/docs/HTML/Content_categories#Form-associated_">form-associated</a> element, palpable content.</td> + </tr> + <tr> + <th scope="row">允许的内容</th> + <td><a href="/en-US/docs/HTML/Content_categories#Phrasing_content">Phrasing content</a>.</td> + </tr> + <tr> + <th scope="row">标签略写</th> + <td>{{no_tag_omission}} </td> + </tr> + <tr> + <th scope="row">允许的父元素</th> + <td>任意可容纳 <a href="/en-US/docs/HTML/Content_categories#Phrasing_content">phrasing content</a> 的元素。</td> + </tr> + <tr> + <th scope="row">Permitted ARIA roles</th> + <td>{{ARIARole("checkbox")}}, {{ARIARole("link")}}, {{ARIARole("menuitem")}}, {{ARIARole("menuitemcheckbox")}}, {{ARIARole("menuitemradio")}}, {{ARIARole("radio")}}, {{ARIARole("switch")}}, {{ARIARole("tab")}}</td> + </tr> + <tr> + <th scope="row">DOM 接口</th> + <td>{{domxref("HTMLButtonElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="属性">属性</h2> + +<p><span style="line-height: 21px;">该元素包含</span><a href="https://developer.mozilla.org/en-US/docs/HTML/Global_attributes" style="line-height: 21px;" title="HTML/Global attributes">全局属性</a><span style="line-height: 21px;">.</span></p> + +<dl> + <dt>{{htmlattrdef("autofocus")}} {{HTMLVersionInline(5)}}</dt> + <dd>一个布尔属性，用于指定当页面加载时按钮必须有输入焦点，除非用户重写，例如通过不同控件键入。只有一个表单关联元素可以指定该属性。</dd> + <dt>{{htmlattrdef("autocomplete")}} {{non-standard_inline}}</dt> + <dd>该属性在 {{HTMLElement("button")}}上的使用并未标准化，只有Firefox允许。不像其它浏览器，Firefox默认在页面加载时持续禁用Button的动态状态（<a href="http://stackoverflow.com/questions/5985839/bug-with-firefox-disabled-attribute-of-input-not-resetting-when-refreshing">Firefox persists the dynamic disabled state</a> ）。将此属性设置为<code style="font-style: normal;">off</code> (i.e. <code style="font-style: normal;">autocomplete="off"</code>)关闭此特性。参见 {{bug(654072)}}。</dd> + <dt>{{htmlattrdef("disabled")}}</dt> + <dd> + <p>此布尔属性表示用户不能与button交互。如果属性值未指定，button继承包含元素，例如{{HTMLElement("fieldset")}}；如果没有设置<strong>disabled</strong>属性的包含元素，button将可交互。</p> + + <p>不像其它浏览器，Firefox默认在页面加载时持续禁用Button的动态状态。使用{{htmlattrxref("autocomplete","button")}}属性可控制此特性。</p> + </dd> + <dt>{{htmlattrdef("form")}} {{HTMLVersionInline(5)}}</dt> + <dd>表示button元素关联的form元素（它的表单拥有者）。此属性值必须为同一文档中的一个{{HTMLElement("form")}}元素的<strong>id</strong>属性。如果此属性未指定，<button>元素必须是form元素的后代。利用此属性，你可以将<button>元素放置在文档内的任何位置，而不仅仅是作为他们form元素的后代。</dd> + <dt>{{htmlattrdef("formaction")}} {{HTMLVersionInline(5)}}</dt> + <dd>表示程序处理button提交信息的URI。如果指定了，将重写button表单拥有者的{{htmlattrxref("action","form")}}属性。</dd> + <dt>{{htmlattrdef("formenctype")}} {{HTMLVersionInline(5)}}</dt> + <dd>如果button是submit类型，此属性值指定提交表单到服务器的内容类型。可选值： + <ul> + <li><code>application/x-www-form-urlencoded</code>: 未指定时的默认值。</li> + <li><code>multipart/form-data</code>: 如果使用{{htmlattrxref("type","input")}}属性的{{HTMLElement("input")}}元素设置文件，使用此值。</li> + <li><code>text/plain</code></li> + </ul> + + <p>如果指定此属性，它将重写button的表单拥有者的{{htmlattrxref("enctype","form")}}属性。</p> + </dd> + <dt>{{htmlattrdef("formmethod")}} {{HTMLVersionInline(5)}}</dt> + <dd>如果button是submit类型，此属性指定浏览器提交表单使用的HTTP方法。可选值: + <ul> + <li><code>post</code>: 来自表单的数据被包含在表单内容中，被发送到服务器。</li> + <li><code>get</code>: 来自表单的数据以'?'作为分隔符被附加到form的<strong>URI</strong>属性中，得到的URI被发送到服务器。当表单没有副作用，且仅包含ASCII字符时使用这种方法。</li> + </ul> + + <p>如果指定了，此属性会重写button拥有者的{{htmlattrxref("method","form")}}属性。</p> + </dd> + <dt>{{htmlattrdef("formnovalidate")}} {{HTMLVersionInline(5)}}</dt> + <dd>如果button是submit类型，此布尔属性指定当表单被提交时不需要验证。如果指定了，它会重写button拥有者的{{htmlattrxref("novalidate","form")}}属性。</dd> + <dt>{{htmlattrdef("formtarget")}} {{HTMLVersionInline(5)}}</dt> + <dd>如果button是submit类型，此属性指定一个名称或关键字，表示接收提交的表单后在哪里显示响应。这是一个浏览上下文（例如tab，window或内联框架）的名称或关键字。如果指定了，它会重写button拥有者的{{htmlattrxref("target", "form")}} 属性。关键字如下： + <ul> + <li><code>_self</code>: 在同一个浏览上下文中加载响应作为当前的。未指定时此值为默认值。</li> + <li><code>_blank</code>: 在一个新的不知名浏览上下文中加载响应。</li> + <li><code>_parent</code>: 在当前浏览上下文父级中加载响应。如果没有父级的，此选项将按<span style="font-family: Consolas,Monaco,'Andale Mono',monospace;">_self执行。</span></li> + <li><code>_top</code>: 在顶级浏览上下文（即当前浏览上下文的祖先，且没有父级）中架加载响应。如果没有顶级的，此选项将按<span style="font-family: Consolas,Monaco,'Andale Mono',monospace;">_self执行。</span></li> + </ul> + </dd> + <dt>{{htmlattrdef("name")}}</dt> + <dd>button的名称，与表单数据一起提交。</dd> + <dt>{{htmlattrdef("type")}}</dt> + <dd>button的类型。可选值： + <ul> + <li><code>submit</code>: 此按钮将表单数据提交给服务器。如果未指定属性，或者属性动态更改为空值或无效值，则此值为默认值。</li> + <li><code>reset</code>: 此按钮重置所有组件为初始值。</li> + <li><code>button</code>: 此按钮没有默认行为。它可以有与元素事件相关的客户端脚本，当事件出现时可触发。</li> + <li>menu: 此按钮打开一个由指定{{HTMLElement("menu")}}元素进行定义的弹出菜单。</li> + </ul> + </dd> + <dt>{{htmlattrdef("value")}}</dt> + <dd>button的初始值。它定义的值与表单数据的提交按钮相关联。当表单中的数据被提交时，这个值便以参数的形式被递送至服务器。</dd> +</dl> + +<h2 id="注意">注意</h2> + +<p><code><button></code> 元素比 {{HTMLElement("input")}} 元素更容易使用样式。你可以在元素内添加HTML内容（像 <code><em></code>、<code><strong></code> 甚至 <code><img></code>），以及 {{Cssxref("::after")}} 和 {{Cssxref("::before")}} 伪元素来实现复杂的效果，而 {{HTMLElement("input")}} 只支持文本内容。</p> + +<p>如果你的按钮不是用于向服务器提交数据，请确保这些按钮的 <code>type</code> 属性设置成 <code>button</code>。否则它们被按下后将会向服务器发送数据并加载（可能并不存在的）响应内容，因而可能会破坏当前文档的状态。</p> + +<p>IE7 在使用 <code><button type="submit" name="myButton" value="foo">Click me</button></code> 提交表单时存在一个BUG，<code>POST</code> 提交的数据将是 <code>myButton=Click me</code> 而不是 <code>myButton=foo</code>（没有把 <code>value</code> 属性的值 <code>foo</code> 提交上去）。<br> + IE6 的BUG更糟糕，在提交表单的时候会把表单内所有的按钮都提交上去，同时还有和 IE7 一样的BUG。<br> + IE8 已经修复了这个问题。</p> + +<p>Firefox 出于使用方便的目的，会在获得焦点的按钮上添加一个细小的虚线框。 这个边框由浏览器内部的样式表中的 CSS 定义，但如果有必要的话，你可以用 <code>button{{cssxref("::-moz-focus-inner")}} { }</code> 重写这个样式。</p> + +<p>Firefox 在默认情况下会在页面加载时让 {{HTMLElement("button")}} <a href="https://stackoverflow.com/questions/5985839/bug-with-firefox-disabled-attribute-of-input-not-resetting-when-refreshing">保持动态禁用状态</a> ，这个行为在其它浏览器上是没有的。将 {{htmlattrxref("autocomplete","button")}} 属性设置为 <code>off</code> 可以禁用这项特性。参见 {{bug(654072)}}。</p> + +<p>安卓系统上的 Firefox <35 会为每个按钮设置一个默认的 {{ cssxref("background-image") }} 渐变背景（参见 {{bug(763671)}}）。这项可以通过 <code>background-image: none</code> 禁用。</p> + +<h3 id="点击和焦点">点击和焦点</h3> + +<p>点击 {{HTMLElement("button")}} 会让浏览器和操作系统（默认情况下）将焦点放在其上。 {{HTMLElement("input")}} 的 <code>type="button"</code> 和 <code>type="submit"</code> 也是一样的。</p> + +<table> + <caption>点击 {{HTMLElement("button")}} 会让其获得焦点吗？</caption> + <tbody> + <tr> + <td>桌面浏览器</td> + <th>Windows 8.1</th> + <th>OS X 10.9</th> + </tr> + <tr> + <th>Firefox 30.0</th> + <td style="background-color: LawnGreen;">Yes</td> + <td style="background-color: red;">No (even with a <code>tabindex</code>)</td> + </tr> + <tr> + <th>Chrome 35</th> + <td style="background-color: LawnGreen;">Yes</td> + <td style="background-color: LawnGreen;">Yes</td> + </tr> + <tr> + <th>Safari 7.0.5</th> + <td style="background-color: silver;">N/A</td> + <td style="background-color: red;">No (even with a <code>tabindex</code>)</td> + </tr> + <tr> + <th>Internet Explorer 11</th> + <td style="background-color: LawnGreen;">Yes</td> + <td style="background-color: silver;">N/A</td> + </tr> + <tr> + <th>Presto (Opera 12)</th> + <td style="background-color: LawnGreen;">Yes</td> + <td style="background-color: LawnGreen;">Yes</td> + </tr> + </tbody> +</table> + +<table> + <caption>轻点（tapping） {{HTMLElement("button")}} 会让其获得焦点吗？</caption> + <tbody> + <tr> + <td>移动浏览器</td> + <th>iOS 7.1.2</th> + <th>Android 4.4.4</th> + </tr> + <tr> + <th>Safari Mobile</th> + <td style="background-color: red;">No (even with a <code>tabindex</code>)</td> + <td style="background-color: silver;">N/A</td> + </tr> + <tr> + <th>Chrome 35</th> + <td style="background-color: red;">No (even with a <code>tabindex</code>)</td> + <td style="background-color: LawnGreen;">Yes</td> + </tr> + </tbody> +</table> + +<h2 id="示例">示例</h2> + +<pre class="brush:html"><button name="button">Click me</button> +</pre> + +<p>{{ EmbedLiveSample('示例', 200, 64) }}</p> + +<p>请注意上例中应用了 CSS 。</p> + +<h2 id="技术规范">技术规范</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'forms.html#the-button-element', '<button>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'forms.html#the-button-element', '<button>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'interact/forms.html#h-17.5', '<button>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + + + +<p>{{Compat("html.elements.button")}}</p> + +<h2 id="参见">参见</h2> + +<p>Other elements that are used for creating forms: {{HTMLElement("form")}}, {{HTMLElement("datalist")}}, {{HTMLElement("fieldset")}}, {{HTMLElement("input")}},{{HTMLElement("keygen")}}, {{HTMLElement("label")}}, {{HTMLElement("legend")}}, {{HTMLElement("meter")}}, {{HTMLElement("optgroup")}}, {{HTMLElement("option")}}, {{HTMLElement("output")}}, {{HTMLElement("progress")}}, {{HTMLElement("select")}}, {{HTMLElement("textarea")}}.</p> + +<div>{{HTMLRef}}</div> diff --git a/files/zh-cn/web/html/element/canvas/index.html b/files/zh-cn/web/html/element/canvas/index.html new file mode 100644 index 0000000000..8f9fd88ea9 --- /dev/null +++ b/files/zh-cn/web/html/element/canvas/index.html @@ -0,0 +1,164 @@ +--- +title: <canvas> +slug: Web/HTML/Element/canvas +tags: + - Canvas + - HTML + - HTML5 + - Web +translation_of: Web/HTML/Element/canvas +--- +<p><code><canvas></code>元素可被用来通过JavaScript（<a href="/zh-CN/docs/Web/API/Canvas_API">Canvas</a> API 或 <a href="https://developer.mozilla.org/zh-CN/docs/Web/API/WebGL_API">WebGL</a> API）绘制图形及图形动画。</p> + +<p>{{HTMLRef}}</p> + +<h2 id="属性"><strong>属性</strong></h2> + +<p>本元素支持 <a href="https://developer.mozilla.org/en- + +US/docs/HTML/Global_attributes">全局属性</a>.</p> + +<dl> + <dt>{{htmlattrdef("height")}}</dt> + <dd>该元素占用空间的高度，以 CSS 像素（px）表示，默认为 150。</dd> + <dt>{{htmlattrdef("moz-opaque")}} {{non-standard_inline}} {{deprecated_inline}}</dt> + <dd>通过设置这个属性，来控制canvas元素是否半透明。如果你不想canvas元素被设置为半透明，使用这个元素将可以优化浏览器绘图性能。</dd> + <dt>{{htmlattrdef("width")}}</dt> + <dd>该元素占用空间的宽度，以 CSS 像素（px）表示，默认为 300。</dd> +</dl> + +<h2 id="注意事项"><strong>注意事项</strong></h2> + +<h3 id="标签需要闭合">标签需要闭合</h3> + +<p>不同于 {{HTMLElement("img")}} 元素, {{HTMLElement ("canvas")}}元素需要有闭合标签 (<code></canvas></code>).</p> + +<h3 id="设置画布canvas的大小">设置画布(canvas)的大小</h3> + +<p>直接在html标签中设置width和height属性或者使用JavaScript来指定画布尺寸，这将改变一个画布的水平像素和垂直像素数，就像定义了一张图片的大小一样。</p> + +<p>可以使用CSS的width和height以在渲染期间缩放图像以适应样式大小，就像<img>元素一样。如果您发现<canvas>元素中展示的内容变形，您可以通过<canvas>自带的height和width属性进行相关设置，而不要使用CSS。</p> + +<h3 id="最大的画布尺寸">最大的画布尺寸</h3> + +<p>画布的最大的尺寸取决于浏览器，下表的结论来自别处 (e.g. <a href="https://stackoverflow.com/questions/6081483/maximum-size-of-a-canvas-element">Stack Overflow</a>):</p> + +<table> + <thead> + <tr> + <th scope="col">浏览器</th> + <th scope="col">最大高度</th> + <th scope="col">最大宽度</th> + <th scope="col">最大面积</th> + </tr> + </thead> + <tbody> + <tr> + <td>Chrome</td> + <td>32,767 pixels</td> + <td>32,767 pixels</td> + <td>268,435,456 pixels (i.e., 16,384 x 16,384)</td> + </tr> + <tr> + <td>Firefox</td> + <td>32,767 pixels</td> + <td>32,767 pixels</td> + <td>472,907,776 pixels (i.e., 22,528 x 20,992)</td> + </tr> + <tr> + <td>Safari</td> + <td>32,767 pixels</td> + <td>32,767 pixels</td> + <td>268,435,456 pixels (i.e., 16,384 x 16,384)</td> + </tr> + <tr> + <td>IE</td> + <td>8,192 pixels</td> + <td>8,192 pixels</td> + <td>?</td> + </tr> + </tbody> +</table> + +<h2 id="示例">示例</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><canvas id="canvas" width="300" height="300"> + 抱歉，您的浏览器不支持canvas元素 + （这些内容将会在不支持<canvas>元素的浏览器或是禁用了JavaScript的浏览器内渲染并展现） +</canvas> +</pre> + +<h3 id="JavaScript">JavaScript</h3> + +<p>使用{{domxref("HTMLCanvasElement.getContext()")}}获得一个绘图上下文并开始绘制</p> + +<pre class="brush: js">var canvas = document.getElementById('canvas'); +var ctx = canvas.getContext('2d'); +ctx.fillStyle = 'green'; +ctx.fillRect(10, 10, 100, 100);</pre> + +<h3 id="结果">结果</h3> + +<p>{{EmbedLiveSample('示例')}}</p> + +<h2 id="可访问性">可访问性</h2> + +<p><code><canvas></code> 元素本身只是一个位图，不提供任何绘制对象的信息。画布内容不像HTML那样具有语义并能暴露给可访问性工具。以下指南可以帮助您更方便地访问它。</p> + +<ul> + <li><a href="/zh-CN/docs/Web/API/Canvas_API/Tutorial/Hit_regions_and_accessibility">MDN Hit regions and accessability</a></li> + <li><a href="https://www.w3.org/WAI/PF/HTML/wiki/Canvas_Accessibility_Use_Cases">Canvas accessibility use cases</a></li> + <li><a href="https://www.w3.org/html/wg/wiki/AddedElementCanvas">Canvas element accessibility issues</a></li> + <li><a href="https://developer.paciellogroup.com/blog/2012/06/html5-canvas-accessibility-in-firefox-13/">HTML5 Canvas Accessibility in Firefox 13 – by Steve Faulkner</a></li> + <li><a href="https://html.spec.whatwg.org/multipage/scripting.html#best-practices">Best practices for interactive canvas elements</a></li> +</ul> + +<h2 id="规范">规范</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'the-canvas-element.html#the-canvas- element', '<canvas>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'the-canvas-element.html#the-canvas- element', '<canvas>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>初始定义</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<div class="hidden"> +<p>The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> +</div> + +<p>{{Compat("html.elements.canvas")}}</p> + +<h2 id="参阅">参阅</h2> + +<ul> + <li><a href="/en-US/docs/Web/API/Canvas_API">MDN canvas portal</a></li> + <li><a href="/en-US/docs/Web/API/Canvas_API/Tutorial">Canvas tutorial</a></li> + <li><a href="https://simon.html5.org/dump/html5-canvas-cheat- + +sheet.html">Canvas cheat sheet</a></li> + <li><a href="/en-US/demos/tag/tech:canvas">Canvas-related demos</a></li> + <li><a href="https://developer.apple.com/library/safari/documentation/AudioVi + +deo/Conceptual/HTML-canvas- + +guide/Introduction/Introduction.html">Canvas introduction by Apple</a></li> +</ul> diff --git a/files/zh-cn/web/html/element/caption/index.html b/files/zh-cn/web/html/element/caption/index.html new file mode 100644 index 0000000000..6afe7d92c3 --- /dev/null +++ b/files/zh-cn/web/html/element/caption/index.html @@ -0,0 +1,151 @@ +--- +title: <caption> +slug: Web/HTML/Element/caption +translation_of: Web/HTML/Element/caption +--- +<h2 id="简介">简介</h2> + +<p><strong>HTML <code><caption></code> 元素</strong> (or <em>HTML 表格标题元素</em>) 展示一个表格的标题， 它常常作为 {{HTMLElement("table")}} 的第一个子元素出现，同时显示在表格内容的最前面，但是，它同样可以被CSS样式化，所以，它同样可以出现在任何一个一个相对于表格的做任意位置。</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/en-US/docs/HTML/Content_categories" title="HTML/Content_categories">Content categories</a></th> + <td>None.</td> + </tr> + <tr> + <th scope="row">Permitted content</th> + <td><a href="/en-US/docs/HTML/Content_categories#Flow_content" title="HTML/Content categories#Flow content">Flow content</a>.</td> + </tr> + <tr> + <th scope="row">Tag omission</th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th scope="row">Permitted parent elements</th> + <td>A {{HTMLElement("table")}} element, as its first descendant.</td> + </tr> + <tr> + <th scope="row">DOM interface</th> + <td>{{domxref("HTMLTableCaptionElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="特性">特性</h2> + +<p>本元素包含了所有 <a href="https://developer.mozilla.org/en-US/docs/HTML/Global_attributes" title="HTML/Global attributes">全局特性</a>。</p> + +<dl> + <dt>{{htmlattrdef("align")}} {{deprecatedGeneric('inline','HTML4.01')}} {{obsoleteGeneric('inline','HTML5')}}</dt> + <dd>这个可枚举属性表明了caption相对于table应该如何排列。它可能有以下几个值： + <ul> + <li><code>left</code>, 展示在表格左边</li> + <li><code>top</code>, 显示在表格前面</li> + <li><code>right</code>, 显示在表格右边</li> + <li><code>bottom</code>, 显示在表格下面</li> + </ul> + + <div class="note"><strong>使用说明：</strong>不要使用这个属性，它已经被弃用： {{HTMLElement("caption")}} 元素应该使用 <a href="/en-US/docs/CSS" title="CSS">CSS</a>设置样式。要得到类似<code>align</code>属性的效果，使用 <a href="/en-US/docs/CSS" title="CSS">CSS</a> 属性 {{cssxref("caption-side")}} 和 {{cssxref("text-align")}}.</div> + </dd> +</dl> + +<h2 id="使用说明">使用说明</h2> + +<p>当 {{HTMLElement("table")}} 元素是{{HTMLElement("caption")}} 的父元素，caption是{{HTMLElement("figure")}} 元素的唯一后代的时候，使用{{HTMLElement("figcaption")}}元素替代caption元素</p> + +<h2 id="实例">实例</h2> + +<p>请查看 {{HTMLElement("table")}} 页面获得 {{HTMLElement("caption")}}的例子</p> + +<h2 id="Specifications" name="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'tabular-data.html#the-caption-element', '<caption>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'tabular-data.html#the-caption-element', '<caption>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/tables.html#h-11.2.2', '<caption>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("1.0")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("1.0")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="See_also">See also</h2> + +<ul> + <li>其他与table相关的HTML元素: {{HTMLElement("col")}}, {{HTMLElement("colgroup")}}, {{HTMLElement("table")}}, {{HTMLElement("tbody")}}, {{HTMLElement("td")}}, {{HTMLElement("tfoot")}}, {{HTMLElement("th")}}, {{HTMLElement("thead")}}, {{HTMLElement("tr")}};</li> + <li>可能对{{HTMLElement("caption")}} 元素有用的CSS属性: + <ul> + <li>{{cssxref("text-align")}}, {{cssxref("caption-side")}}.</li> + </ul> + </li> +</ul> + +<p>{{HTMLRef}}</p> diff --git a/files/zh-cn/web/html/element/center/index.html b/files/zh-cn/web/html/element/center/index.html new file mode 100644 index 0000000000..2ccce04ce5 --- /dev/null +++ b/files/zh-cn/web/html/element/center/index.html @@ -0,0 +1,51 @@ +--- +title: <center> +slug: Web/HTML/Element/center +translation_of: Web/HTML/Element/center +--- +<div>{{deprecated_header()}}</div> + +<h2 id="Summary">Summary</h2> + +<p>HTML Center 元素 (<code><center></code>) 是个 <a href="/en-US/docs/HTML/Block-level_elements" title="HTML/Block-level_elements">块级元素</a>，可以包含段落，以及其它块级和内联元素。这个元素的整个内容在它的上级元素中水平居中(通常是 {{HTMLElement("body")}})。</p> + +<p>这个标签已经在 HTML 4（以及 XHTML 1）中废除了，以支持 <a href="/en-US/docs/Web/CSS" title="/en-US/docs/Web/CSS">CSS</a> {{Cssxref("text-align")}} 属性，它可以用于 {{HTMLElement("div")}} 元素，或者独立的 {{HTMLElement("p")}}。对于居中的块，使用其它 CSS 属性，例如 {{Cssxref("margin-left")}} 和 {{Cssxref("margin-right")}}，并将其设置为 <code>auto</code> (或者将 {{Cssxref("margin")}} 设为 <code>0 auto</code>).</p> + +<h2 id="DOM_接口">DOM 接口</h2> + +<p>这个元素实现了 {{domxref("HTMLElement")}} 接口。</p> + +<div class="note"> +<p><strong>实现注解:</strong> 直到 Gecko 1.9.2（包含）, Firefox 为这个元素实现了 {{domxref("HTMLSpanElement")}} 接口。</p> +</div> + +<h2 id="Example_1" name="Example_1">示例 1</h2> + +<pre class="brush: html"><center>This text will be centered. +<p>So will this paragraph.</p></center> +</pre> + +<h2 id="Example_2" name="Example_2">示例 2 (CSS 替代)</h2> + +<pre class="brush: html"><div style="text-align:center">This text will be centered. +<p>So will this paragraph.</p></div> +</pre> + +<h2 id="Example_3" name="Example_3">示例 3 (CSS 替代)</h2> + +<pre class="brush: html"><p style="text-align:center">This line will be centered.<br> +And so will this line.</p> +</pre> + +<h2 id="Notes" name="Notes">注</h2> + +<p>向 {{HTMLElement("div")}} 或者 {{HTMLElement("p")}} 元素应用 {{Cssxref("text-align")}}<code>:center</code> <font face="consolas, Liberation Mono, courier, monospace">会使这些元素的</font><em>内容</em>居中，同时保留其整体大小不变。</p> + +<h2 id="另见">另见</h2> + +<ul> + <li>{{Cssxref("text-align")}}</li> + <li>{{Cssxref("display")}}</li> +</ul> + +<div>{{HTMLRef}}</div> diff --git a/files/zh-cn/web/html/element/cite/index.html b/files/zh-cn/web/html/element/cite/index.html new file mode 100644 index 0000000000..1369ae440f --- /dev/null +++ b/files/zh-cn/web/html/element/cite/index.html @@ -0,0 +1,217 @@ +--- +title: <cite> +slug: Web/HTML/Element/cite +tags: + - HTML + - Reference 参考 + - Web + - 元素 + - 文本级语义 +translation_of: Web/HTML/Element/cite +--- +<div>{{HTMLRef}}</div> + +<p><em>HTML引用（ Citation）标签</em> (<strong><cite></strong>) 表示一个作品的引用，且必须包含作品的标题。这个引用可能是一个根据适当的上下文约定关联引用的元数据的缩写。</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/cite.html", "tabbed-standard")}}</div> + +<p class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples </a> and send us a pull request.</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row" style="vertical-align: middle;">内容类别</th> + <td> + <p><a href="/en-US/docs/Web/Guide/HTML/Content_categories#Flow_content">流内容（Flow Content）</a>，<a href="/en-US/docs/Web/Guide/HTML/Content_categories#Phrasing_content">叙述内容（Phrasing Content）</a>，可触及的内容（Palpable Content） 。</p> + </td> + </tr> + <tr> + <th scope="row">允许的内容</th> + <td><a href="/en-US/docs/Web/Guide/HTML/Content_categories#Phrasing_content">叙述内容（Phrasing Content）</a></td> + </tr> + <tr> + <th scope="row">标签省略</th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th scope="row">允许的父级元素</th> + <td>任何接受<a href="/en-US/docs/Web/Guide/HTML/Content_categories#Phrasing_content">叙述内容（Phrasing Content）</a>的元素。</td> + </tr> + <tr> + <th scope="row">DOM 接口</th> + <td>这个元素在Gecko 1.9.2 (Firefox 4)及之前的版本中 实现为HTMLElement, Firefox 实现为HTMLSpanElement。</td> + </tr> + </tbody> +</table> + +<h2 id="属性">属性</h2> + +<p>这个元素仅包含了 所有的<a href="/en-US/docs/HTML/Global_attributes">全局属性</a>.</p> + +<div class="note"> +<p><strong>使用说明：</strong></p> + +<ul> + <li>适用场合可能包括一本书，一张纸，一篇散文，一首诗，一个分数，一首歌，一部电影，一个电视节目，一个游戏，一个雕塑，一幅画，戏剧制作，一个剧本，一个歌剧，一种音乐，一个展览 ，一个法律案件报告，一个计算机程序，一个网站，一个网页，博客或评论，论坛帖子或评论 ，鸣叫，或者书面或口头陈述，等等。</li> + <li>W3C规范，对创造性的工作可能包括作者的名字，而WHATWG宣布，它可能不包括在任何情况下，一个人的名字。</li> + <li>在blockquote元素或者q元素上使用cite或者blockquote属性来标明参考的在线资源。</li> + <li>为了避免在使用cite元素时默认字体为斜体，可以使用css的font-style属性重新进行设置。</li> +</ul> + + +</div> + +<h2 id="使用说明">使用说明</h2> + +<p>在 <code><cite></code> 标签中，可能引用的内容类型如下：</p> + +<div class="threecolumns"> +<ul> + <li> + <p>A book</p> + </li> + <li> + <p>A research paper</p> + </li> + <li> + <p>An essay</p> + </li> + <li> + <p>A poem</p> + </li> + <li> + <p>A musical score</p> + </li> + <li> + <p>A song</p> + </li> + <li> + <p>A play or film script</p> + </li> + <li> + <p>A film</p> + </li> + <li> + <p>A television show</p> + </li> + <li> + <p>A game</p> + </li> + <li> + <p>A sculpture</p> + </li> + <li> + <p>A painting</p> + </li> + <li> + <p>A theatrical production</p> + </li> + <li> + <p>A play</p> + </li> + <li> + <p>An opera</p> + </li> + <li> + <p>A musical</p> + </li> + <li> + <p>An exhibition</p> + </li> + <li> + <p>A legal case report</p> + </li> + <li> + <p>A computer program</p> + </li> + <li> + <p>A web site</p> + </li> + <li> + <p>A web page</p> + </li> + <li> + <p>A blog post or comment</p> + </li> + <li> + <p>A forum post or comment</p> + </li> + <li> + <p>A tweet</p> + </li> + <li> + <p>A Facebook post</p> + </li> + <li> + <p>A written or oral statement</p> + </li> + <li> + <p>And so forth.</p> + </li> +</ul> +</div> + +<ul> +</ul> + +<p>值得注意的是，W3C 标准允许在 <code><cite></code> 元素中包含引用内容的作者信息。然而 WHATWG 规范不允许在 <code><cite></code> 元素中出现人名。</p> + +<p>要标明{{HTMLElement("blockquote")}} 或 {{HTMLElement("q")}}之中内容的引用来源，可以使用元素的{{htmlattrxref("cite", "blockquote")}}属性。</p> + +<p>通常，浏览器默认使用斜体来展示<code><cite></code>元素中的内容。可以通过指定<code><cite></code>元素的{{cssxref("font-style")}}样式来覆盖这种默认行为。</p> + +<h2 id="示例">示例</h2> + +<pre class="brush: html">More information can be found in <cite>[ISO-0000]</cite>.</pre> + +<p>该段代码的输出如下：</p> + +<p>{{EmbedLiveSample("Example", 640, 60)}}</p> + +<h2 id="Specifications" name="Specifications">规范</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col" style="width: 200px;">规范</th> + <th scope="col">状态</th> + <th scope="col">注释</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'text-level-semantics.html#the-cite-element', '<cite>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'text-level-semantics.html#the-cite-element', '<cite>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/text.html#h-9.2.1', '<cite>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<div> +<p>{{Compat("html.elements.cite")}}</p> +</div> + +<div></div> + +<div id="compat-desktop"></div> + +<h2 id="相关链接">相关链接</h2> + +<ul> + <li>适用于长引用的 {{HTMLElement("blockquote")}} 元素。</li> + <li>适用于行内引用的 {{HTMLElement("q")}} 元素。</li> +</ul> + +<div></div> diff --git a/files/zh-cn/web/html/element/code/index.html b/files/zh-cn/web/html/element/code/index.html new file mode 100644 index 0000000000..1090396027 --- /dev/null +++ b/files/zh-cn/web/html/element/code/index.html @@ -0,0 +1,106 @@ +--- +title: <code> +slug: Web/HTML/Element/code +translation_of: Web/HTML/Element/code +--- +<h2 id="摘要">摘要</h2> +<p><strong>HTML <code><code></code> 元素</strong>呈现一段计算机代码. 默认情况下, 它以浏览器的默认等宽字体显示.</p> +<ul class="htmlelt"> + <li><dfn><a href="/en-US/docs/HTML/Content_categories" title="HTML/Content_categories">Content categories</a></dfn> <a href="/en-US/docs/HTML/Content_categories#Flow_content" title="HTML/Content categories#Flow content">Flow content</a>, <a href="/en-US/docs/HTML/Content_categories#Phrasing_content" title="HTML/Content categories#Phrasing content">phrasing content</a>, palpable content.</li> + <li><dfn>Permitted content</dfn> <a href="/en-US/docs/HTML/Content_categories#Phrasing_content" title="HTML/Content_categories#Phrasing_content">Phrasing content</a>.</li> + <li><dfn>Tag omission</dfn> {{no_tag_omission}}</li> + <li><dfn>Permitted parent elements</dfn> Any element that accepts <a href="/en-US/docs/HTML/Content_categories#Phrasing_content" title="HTML/Content_categories#Phrasing_content">phrasing content</a>.</li> + <li><dfn>DOM interface</dfn> {{domxref("HTMLElement")}} Up to Gecko 1.9.2 (Firefox 4) inclusive, Firefox implements the {{domxref("HTMLSpanElement")}} interface for this element.</li> +</ul> +<h2 id="属性">属性</h2> +<p><span style="line-height: 21px;">此元素仅包含 </span><a href="https://developer.mozilla.org/zh-CN/docs/HTML/Global_attributes" style="line-height: 21px;" title="HTML/Global attributes">全局属性</a><span style="line-height: 21px;">.</span></p> +<h2 id="例子">例子</h2> +<pre class="brush: html"><p>Regular text. <code>This is code.</code> Regular text.</p> +</pre> +<h3 id="Result" name="Result">结果</h3> +<p>Regular text. <code>This is code.</code> Regular text.</p> +<p>(中文的等宽字和正常字看起来区别不大, 因为汉字本身就是方块行. 但是仍能看出几行文字之间的对齐差异)</p> +<h2 id="注意">注意</h2> +<p>CSS 规则可以覆盖浏览器默认的 <code>code</code> 标签字体样式. 但用户设置的浏览器字体选项可能会超过 CSS 的优先级, 使之无效.</p> +<h2 id="Specifications" name="Specifications">Specifications</h2> +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'text-level-semantics.html#the-code-element', '<code>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'text-level-semantics.html#the-code-element', '<code>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/text.html#h-9.2.1', '<code>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td> </td> + </tr> + </tbody> +</table> +<h2 id="Browser_compatibility" name="Browser_compatibility">浏览器兼容性</h2> +<p>{{CompatibilityTable}}</p> +<div id="compat-desktop"> + <table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Basic support</td> + <td>1.0</td> + <td>{{CompatGeckoDesktop("1.0")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> + </table> +</div> +<div id="compat-mobile"> + <table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("1.0")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> + </table> +</div> +<h2 id="See_also" name="See_also">See also</h2> +<ul> + <li>{{HTMLElement("samp")}}</li> + <li>{{HTMLElement("kbd")}}</li> + <li>{{HTMLElement("command")}}</li> + <li>{{HTMLElement("var")}}</li> +</ul> +<div> + {{HTMLRef}}</div> diff --git a/files/zh-cn/web/html/element/col/index.html b/files/zh-cn/web/html/element/col/index.html new file mode 100644 index 0000000000..0a1303dcff --- /dev/null +++ b/files/zh-cn/web/html/element/col/index.html @@ -0,0 +1,304 @@ +--- +title: <col> +slug: Web/HTML/Element/col +translation_of: Web/HTML/Element/col +--- +<p>{{HTMLRef}}</p> + +<p><strong>HTML <code><col></code> 元素</strong> 定义表格中的列，并用于定义所有公共单元格上的公共语义。它通常位于{{HTMLElement("colgroup")}}元素内。</p> + +<p>此元素允许使用CSS进行样式列，但只有少数属性将对该列产生影响（请参阅列表的<a href="https://www.w3.org/TR/CSS21/tables.html#columns">CSS 2.1规范</a>）。</p> + +<ul class="htmlelt"> + <li><dfn><a href="/en-US/docs/HTML/Content_categories" title="HTML/Content_categories">Content categories</a></dfn> None.</li> + <li><dfn>Permitted content</dfn> None, it is an {{Glossary("empty element")}}.</li> + <li><dfn>Tag omission</dfn> The <span title="syntax-start-tag">start tag</span> is mandatory, but, as it is a void element, the <span title="syntax-end-tag">use of an end tag</span> is forbidden.</li> + <li><dfn>Permitted parent elements</dfn> {{HTMLElement("colgroup")}} only, though it can be implicitly defined as its start tag is not mandatory. The {{HTMLElement("colgroup")}} must not have a {{htmlattrxref("span", "colgroup")}} attribute.</li> + <li><dfn>Permitted ARIA roles</dfn>None</li> + <li><dfn>DOM interface</dfn> {{domxref("HTMLTableColElement")}}</li> +</ul> + +<h2 id="属性">属性</h2> + +<p><span style="line-height: 21px;">该元素包含一些全局属性 </span><a href="https://developer.mozilla.org/en-US/docs/HTML/Global_attributes" style="line-height: 21px;" title="HTML/Global attributes">全局属性</a><span style="line-height: 21px;">.</span></p> + +<dl> + <dt>{{htmlattrdef("align")}} {{Deprecated_inline("html4.01")}}, {{obsolete_inline("html5")}}</dt> + <dd>This enumerated attribute specifies how horizontal alignment of each column cell content will be handled. Possible values are: + <ul> + <li><code>left</code>, aligning the content to the left of the cell</li> + <li><code>center</code>, centering the content in the cell</li> + <li><code>right</code>, aligning the content to the right of the cell</li> + <li><code>justify</code>, inserting spaces into the textual content so that the content is justified in the cell</li> + <li><code>char</code>, aligning the textual content on a special character with a minimal offset, defined by the {{htmlattrxref("char", "col")}} and {{htmlattrxref("charoff", "col")}} attributes {{unimplemented_inline(2212)}}.</li> + </ul> + + <p>If this attribute is not set, its value is inherited from the {{htmlattrxref("align", "colgroup")}} of the {{HTMLElement("colgroup")}} element this <code><col></code> element belongs too. If there are none, the <code>left</code> value is assumed.</p> + + <div class="note"><strong>Note: </strong>Do not use this attribute as it is obsolete (not supported) in the latest standard. + + <ul> + <li>To achieve the same effect as the <code>left</code>, <code>center</code>, <code>right</code> or <code>justify</code> values: + + <ul> + <li>Do not try to set the {{cssxref("text-align")}} property on a selector giving a {{HTMLElement("col")}} element. Because {{HTMLElement("td")}} elements are not descendant of the {{HTMLElement("col")}} element, they won't inherit it.</li> + <li>If the table doesn't use a {{htmlattrxref("colspan", "td")}} attribute, use the <code>td:nth-child(an+b)</code> CSS selector where a is the total number of the columns in the table and b is the ordinal position of the column in the table. Only after this selector the {{cssxref("text-align")}} property can be used.</li> + <li>If the table does use a {{htmlattrxref("colspan", "td")}} attribute, the effect can be achieved by combining adequate CSS attribute selectors like <code>[colspan=n]</code>, though this is not trivial.</li> + </ul> + </li> + <li>To achieve the same effect as the <code>char</code> value, in CSS3, you can use the value of the {{htmlattrxref("char", "col")}} as the value of the {{cssxref("text-align")}} property {{unimplemented_inline}}.</li> + </ul> + </div> + </dd> +</dl> + +<dl> + <dt>{{htmlattrdef("bgcolor")}} {{Non-standard_inline}}</dt> + <dd>定义列中对应的每个单元格的背景色。其值是 <a class="external" href="http://www.w3.org/Graphics/Color/sRGB" title="http://www.w3.org/Graphics/Color/sRGB">sRGB</a> 定义的6位16进制代码之一，前缀为 '#'。 也可以使用以下16个预定义的颜色字符: + <table style="width: 80%;"> + <tbody> + <tr> + <td style="background-color: black; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td> + <td><code>black</code> = "#000000"</td> + <td style="background-color: green; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td> + <td><code>green</code> = "#008000"</td> + </tr> + <tr> + <td style="background-color: silver; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td> + <td><code>silver</code> = "#C0C0C0"</td> + <td style="background-color: lime; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td> + <td><code>lime</code> = "#00FF00"</td> + </tr> + <tr> + <td style="background-color: gray; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td> + <td><code>gray</code> = "#808080"</td> + <td style="background-color: olive; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td> + <td><code>olive</code> = "#808000"</td> + </tr> + <tr> + <td style="background-color: white; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td> + <td><code>white</code> = "#FFFFFF"</td> + <td style="background-color: yellow; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td> + <td><code>yellow</code> = "#FFFF00"</td> + </tr> + <tr> + <td style="background-color: maroon; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td> + <td><code>maroon</code> = "#800000"</td> + <td style="background-color: navy; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td> + <td><code>navy</code> = "#000080"</td> + </tr> + <tr> + <td style="background-color: red; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td> + <td><code>red</code> = "#FF0000"</td> + <td style="background-color: blue; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td> + <td><code>blue</code> = "#0000FF"</td> + </tr> + <tr> + <td style="background-color: purple; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td> + <td><code>purple</code> = "#800080"</td> + <td style="background-color: teal; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td> + <td><code>teal</code> = "#008080"</td> + </tr> + <tr> + <td style="background-color: fuchsia; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td> + <td><code>fuchsia</code> = "#FF00FF"</td> + <td style="background-color: aqua; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td> + <td><code>aqua</code> = "#00FFFF"</td> + </tr> + </tbody> + </table> + + <div class="note"><strong>注意: 不要使用这个属性</strong>, 它是非标准的，并且只实现了IE浏览器中的部分版本: {{HTMLElement("col")}} 元素的样式应该使用 <a href="/en-US/docs/CSS" title="CSS">CSS</a>. 在{{HTMLElement("td")}}元素上使用 <a href="/en-US/docs/CSS" title="CSS">CSS</a> 的 {{cssxref("background-color")}} 属性即可实现相同效果。</div> + </dd> +</dl> + +<dl> + <dt>{{htmlattrdef("char")}} {{Deprecated_inline("html4.01")}}, {{obsolete_inline("html5")}}</dt> + <dd>This attribute is used to set the character to align the cells in a column on. Typical values for this include a period (.) when attempting to align numbers or monetary values. If {{htmlattrxref("align", "col")}} is not set to <code>char</code>, this attribute is ignored. + <div class="note"><strong>Note: </strong>Do not use this attribute as it is obsolete (and not supported) in the latest standard. To achieve the same effect as the {{htmlattrxref("char", "col")}}, in CSS3, you can use the character set using the {{htmlattrxref("char", "col")}} attribute as the value of the {{cssxref("text-align")}} property {{unimplemented_inline}}.</div> + </dd> +</dl> + +<dl> + <dt>{{htmlattrdef("charoff")}} {{Deprecated_inline("html4.01")}}, {{obsolete_inline("html5")}}</dt> + <dd>This attribute is used to indicate the number of characters to offset the column data from the alignment characters specified by the <strong>char</strong> attribute. + <div class="note"><strong>Note: </strong>Do not use this attribute as it is obsolete (and not supported) in the latest standard.</div> + </dd> +</dl> + +<dl> + <dt>{{htmlattrdef("span")}}</dt> + <dd>该属性值为一个正整数，表示该 <col> 元素横跨的列数。默认值为1</dd> +</dl> + +<dl> + <dt>{{htmlattrdef("valign")}} {{Deprecated_inline("html4.01")}}, {{obsolete_inline("html5")}}</dt> + <dd>This attribute specifies the vertical alignment of the text within each cell of the column. Possible values for this attribute are: + <ul> + <li><code>baseline</code>, which will put the text as close to the bottom of the cell as it is possible, but align it on the <a class="external" href="http://en.wikipedia.org/wiki/Baseline_%28typography%29" title="http://en.wikipedia.org/wiki/Baseline_(typography)">baseline</a> of the characters instead of the bottom of them. If characters are all of the size, this has the same effect as <code>bottom</code>.</li> + <li><code>bottom</code>, which will put the text as close to the bottom of the cell as it is possible;</li> + <li><code>middle</code>, which will center the text in the cell;</li> + <li>and <code>top</code>, which will put the text as close to the top of the cell as it is possible.</li> + </ul> + + <div class="note"><strong>Note: </strong>Do not use this attribute as it is obsolete (and not supported) in the latest standard: + + <ul> + <li>Do not try to set the {{cssxref("vertical-align")}} property on a selector giving a {{HTMLElement("col")}} element. Because {{HTMLElement("td")}} elements are not descendant of the {{HTMLElement("col")}} element, they won't inherit it.</li> + <li>If the table doesn't use a {{htmlattrxref("colspan", "td")}} attribute, use the <code>td:nth-child(an+b)</code> CSS selector where a is the total number of the columns in the table and b is the ordinal position of the column in the table. Only after this selector the {{cssxref("vertical-align")}} property can be used.</li> + <li>If the table does use a {{htmlattrxref("colspan", "td")}} attribute, the effect can be achieved by combining adequate CSS attribute selectors like <code>[colspan=n]</code>, though this is not trivial.</li> + </ul> + </div> + </dd> +</dl> + +<dl> + <dt>{{htmlattrdef("width")}} {{obsolete_inline("html5")}}</dt> + <dd>This attribute specifies a default width for each column in the current column group. In addition to the standard pixel and percentage values, this attribute might take the special form <code>0*</code>, which means that the width of each column in the group should be the minimum width necessary to hold the column's contents. Relative widths such as <code>0.5*</code> also can be used.</dd> +</dl> + +<h2 id="示例">示例</h2> + +<p>详见 {{HTMLElement("table")}} 页面 <code><col></code> 标签的示例.</p> + +<h2 id="Specifications" name="Specifications">规范</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'tabular-data.html#the-col-element', '<col>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'tabular-data.html#the-col-element', '<col>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/tables.html#h-11.2.4.2', '<col>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>1.0</td> + <td>{{CompatGeckoDesktop("1.0")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>align/valign</code> attribute</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}} {{bug(915)}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>char/charoff</code> attribute</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}} {{bug(2212)}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>bgcolor</code> attribute</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("1.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>align/valign</code> attribute</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}} {{bug(915)}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>char/charoff</code> attribute</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}} {{bug(2212)}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>bgcolor</code> attribute</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="相关链接">相关链接</h2> + +<ul> + <li>Other table-related HTML Elements: {{HTMLElement("caption")}}, {{HTMLElement("colgroup")}}, {{HTMLElement("table")}}, {{HTMLElement("tbody")}}, {{HTMLElement("td")}}, {{HTMLElement("tfoot")}}, {{HTMLElement("th")}}, {{HTMLElement("thead")}}, {{HTMLElement("tr")}};</li> + <li>CSS properties and pseudo-classes that may be specially useful to style the <code><col></code> element: + <ul> + <li>the {{cssxref("width")}} property to control the width of the column;</li> + <li>the {{cssxref(":nth-child")}} pseudo-class to set the alignment on the cells of the column;</li> + <li>the {{cssxref("text-align")}} property to align all cells content on the same character, like '.'.</li> + </ul> + </li> +</ul> + +<p>{{ HTMLRef }}</p> diff --git a/files/zh-cn/web/html/element/colgroup/index.html b/files/zh-cn/web/html/element/colgroup/index.html new file mode 100644 index 0000000000..5ebaef5929 --- /dev/null +++ b/files/zh-cn/web/html/element/colgroup/index.html @@ -0,0 +1,247 @@ +--- +title: <colgroup> +slug: Web/HTML/Element/colgroup +tags: + - HTML + - Web + - 元素 + - 参考 + - 表格 +translation_of: Web/HTML/Element/colgroup +--- +<div>{{HTMLRef}}</div> + +<p>HTML 中的 表格列组（<em>Column Group </em><strong><colgroup></strong>） 标签用来定义表中的一组列表。</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/colgroup.html","tabbed-taller")}}</div> + +<p class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples </a> and send us a pull request.</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/zh-CN/docs/HTML/Content_categories">内容类别</a></th> + <td>无。</td> + </tr> + <tr> + <th scope="row">允许的内容</th> + <td>If the {{htmlattrxref("span", "colgroup")}} attribute is present: none, it is an {{Glossary("empty element")}}.<br> + If the attribute is not present: zero or more {{HTMLElement("col")}} element</td> + </tr> + <tr> + <th scope="row"><span class="op_dict_text2">标签省略</span></th> + <td>如果元素的第一个子元素存在且是一个 {{HTMLElement("col")}} 元素，而且在它之前没有省略了结束标签的 {{HTMLElement("colgroup")}} 元素，元素的开始标签可以被省略。<br> + 如果之后没有紧跟一个空格或注释，元素的结束标签可以被省略。</td> + </tr> + <tr> + <th scope="row">允许的父元素</th> + <td>一个 {{HTMLElement("table")}} 元素。The {{HTMLElement("colgroup")}} must appear after any optional {{HTMLElement("caption")}} element but before any {{HTMLElement("thead")}}, {{HTMLElement("th")}}, {{HTMLElement("tbody")}}, {{HTMLElement("tfoot")}} and {{HTMLElement("tr")}} element.</td> + </tr> + <tr> + <th scope="row">允许的 ARIA roles</th> + <td>无</td> + </tr> + <tr> + <th scope="row">DOM 接口</th> + <td>{{domxref("HTMLTableColElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="属性">属性</h2> + +<p>此标签支持 <a href="/zh-CN/docs/Web/HTML/Global_attributes">全局属性</a>。</p> + +<dl> + <dt>{{htmlattrdef("align")}} {{Deprecated_inline("html4.01")}}, {{obsolete_inline("html5")}}</dt> + <dd>这个可枚举的属性定义每一列的元素内容的水平对齐方式，支持的值有：</dd> + <dd> + <ul> + <li><code>left</code>，元素中的内容左对齐</li> + <li><code>center</code>，元素中的内容居中对齐</li> + <li><code>right</code>，元素中的内容右对齐</li> + <li><code>justify</code>，插入空格，使元素中内容两端对齐</li> + <li><code>char</code>，针对确定的字符，设置一个最小偏移量，来进行布局，通过 {{htmlattrxref("char", "col")}} 和 {{htmlattrxref("charoff", "col")}} 属性进行定义 {{unimplemented_inline(2212)}}。</li> + </ul> + + <p>此属性的默认值为 <code>left</code>。后代 {{HTMLElement("col")}} 元素可以用它们自己的 {{htmlattrxref("align", "col")}} 属性值来重写该属性。</p> + + <div class="note"><strong>小贴士: </strong>不要使用这个属性，它在最新的标准中已经不被支持。 + + <ul> + <li>若要实现与 <code>left</code>, <code>center</code>, <code>right</code> 或 <code>justify</code> 相同的效果： + + <ul> + <li>不要为一个 {{HTMLElement("colgroup")}} 元素选择器设置 {{cssxref("text-align")}} 属性.，因为{{HTMLElement("td")}} 元素并不是 {{HTMLElement("colgroup")}} 元素的后代，不继承于它。</li> + <li>如果表格不使用 {{htmlattrxref("colspan", "td")}} 属性，每列用一个 <code>td:nth-child(an+b)</code> 的 CSS 选择器，a 是表格中列的总数，b 是当前列在表格中的位列次序号。只有在这个选择器之后， {{cssxref("text-align")}} 属性可以使用。</li> + <li>如果表格使用了 {{htmlattrxref("colspan", "td")}} 属性，可以通过合并足够多的属性选择器来实现同样的效果，比如 <code>[colspan=n]，但这不常用。</code></li> + </ul> + </li> + <li>若要实现与 <code>char</code> 相同的效果：在 CSS3 中，你可以使用 {{htmlattrxref("char", "colgroup")}} 作为 {{cssxref("text-align")}} 的属性值。 {{unimplemented_inline}}</li> + </ul> + </div> + </dd> +</dl> + +<dl> + <dt>{{htmlattrdef("bgcolor")}} {{Non-standard_inline}}</dt> + <dd>这个属性用于定义列组中的每一个列成员的背景颜色。在 <a class="external" href="http://www.w3.org/Graphics/Color/sRGB" title="http://www.w3.org/Graphics/Color/sRGB">sRGB</a> 的定义中，它是一个以 '#' 开头的 6 位 16 进制值，有 16 个预定义的表示颜色的字符串可以使用，如下所示： + <table> + <tbody> + <tr> + <td style="background-color: black; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"></td> + <td><code> black = "#000000"</code></td> + <td style="background-color: green; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"></td> + <td><code> green = "#008000"</code></td> + </tr> + <tr> + <td style="background-color: silver; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"></td> + <td><code> silver = "#C0C0C0"</code></td> + <td style="background-color: lime; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"></td> + <td><code> lime = "#00FF00"</code></td> + </tr> + <tr> + <td style="background-color: gray; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"></td> + <td><code> gray = "#808080"</code></td> + <td style="background-color: olive; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"></td> + <td><code> olive = "#808000"</code></td> + </tr> + <tr> + <td style="background-color: white; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"></td> + <td><code> white = "#FFFFFF"</code></td> + <td style="background-color: yellow; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"></td> + <td><code>yellow = "#FFFF00"</code></td> + </tr> + <tr> + <td style="background-color: maroon; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"></td> + <td><code> maroon = "#800000"</code></td> + <td style="background-color: navy; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"></td> + <td><code> navy = "#000080"</code></td> + </tr> + <tr> + <td style="background-color: red; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"></td> + <td><code> red = "#FF0000"</code></td> + <td style="background-color: blue; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"></td> + <td><code> blue = "#0000FF"</code></td> + </tr> + <tr> + <td style="background-color: purple; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"></td> + <td><code> purple = "#800080"</code></td> + <td style="background-color: teal; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"></td> + <td><code> teal = "#008080"</code></td> + </tr> + <tr> + <td style="background-color: fuchsia; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"></td> + <td><code>fuchsia = "#FF00FF"</code></td> + <td style="background-color: aqua; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"></td> + <td><code> aqua = "#00FFFF"</code></td> + </tr> + </tbody> + </table> + + <div class="note"><strong>小贴士：</strong><strong> </strong>不要使用这个并未标准化的属性，它只在 IE 的某些版本中生效，{{HTMLElement("colgroup")}} 标签应该使用 CSS 来定义样式。要实现和 <strong>bgcolor</strong> 属性相似的效果，可以在相关的 {{HTMLElement("td")}} 标签上使用 {{cssxref("background-color")}} 属性。</div> + </dd> +</dl> + +<dl> + <dt>{{htmlattrdef("char")}} {{Deprecated_inline("html4.01")}}, {{obsolete_inline("html5")}}</dt> + <dd>This attribute specifies the alignment of the content in a column group to a character. Typical values for this include a period (.) when attempting to align numbers or monetary values. If {{htmlattrxref("align", "colgroup")}} is not set to <code>char</code>, this attribute is ignored, though it will still be used as the default value for the {{htmlattrxref("align", "col")}} of the {{HTMLElement("col")}} which are members of this column group. + <div class="note"><strong>Note: </strong>Do not use this attribute as it is obsolete (and not supported) in the latest standard. To achieve the same effect as the {{htmlattrxref("char", "colgroup")}}, in CSS3, you can use the character set using the {{htmlattrxref("char", "colgroup")}} attribute as the value of the {{cssxref("text-align")}} property {{unimplemented_inline}}.</div> + </dd> +</dl> + +<dl> + <dt>{{htmlattrdef("charoff")}} {{Deprecated_inline("html4.01")}}, {{obsolete_inline("html5")}}</dt> + <dd>This attribute is used to indicate the number of characters to offset the column data from the alignment character specified by the <strong>char</strong> attribute. + <div class="note"><strong>Note: </strong>Do not use this attribute as it is obsolete (and not supported) in the latest standard.</div> + </dd> +</dl> + +<dl> + <dt>{{htmlattrdef("span")}}</dt> + <dd>This attribute contains a positive integer indicating the number of consecutive columns the <code><colgroup></code> element spans. If not present, its default value is <code>1</code>. + <div class="note"><strong>Note: </strong>This attribute is applied on the attributes of the column group, it has no effect on the CSS styling rules associated with it or, even more, to the cells of the column's members of the group. + <ul> + <li>The <code>span</code> attribute is not permitted if there are one or more <code><col></code> elements within the <code><colgroup></code>.</li> + </ul> + </div> + </dd> +</dl> + +<dl> + <dt>{{htmlattrdef("valign")}} {{Deprecated_inline("html4.01")}}, {{obsolete_inline("html5")}}</dt> + <dd>This attribute specifies the vertical alignment of the text within each cell of the column. Possible values for this attribute are: + <ul> + <li><code>baseline</code>, which will put the text as close to the bottom of the cell as it is possible, but align it on the <a class="external" href="https://en.wikipedia.org/wiki/Baseline_%28typography%29">baseline</a> of the characters instead of the bottom of them. If characters are all of the size, this has the same effect as <code>bottom</code>.</li> + <li><code>bottom</code>, which will put the text as close to the bottom of the cell as it is possible;</li> + <li><code>middle</code>, which will center the text in the cell;</li> + <li>and <code>top</code>, which will put the text as close to the top of the cell as it is possible.</li> + </ul> + + <div class="note"><strong>Note: </strong>Do not use this attribute as it is obsolete (and not supported) in the latest standard: + + <ul> + <li>Do not try to set the {{cssxref("vertical-align")}} property on a selector giving a {{HTMLElement("colgroup")}} element. Because {{HTMLElement("td")}} elements are not descendant of the {{HTMLElement("colgroup")}} element, they won't inherit it.</li> + <li>If the table doesn't use a {{htmlattrxref("colspan", "td")}} attribute, use the <code>td:nth-child(an+b)</code> CSS selector per column, where a is the total number of the columns in the table and b is the ordinal position of the column in the table. Only after this selector the {{cssxref("vertical-align")}} property can be used.</li> + <li>If the table does use a {{htmlattrxref("colspan", "td")}} attribute, the effect can be achieved by combining adequate CSS attribute selectors like <code>[colspan=n]</code>, though this is not trivial.</li> + </ul> + </div> + </dd> +</dl> + +<dl> + <dt>{{htmlattrdef("width")}} {{obsolete_inline("html5")}}</dt> + <dd>This attribute specifies a default width for each column in the current column group. In addition to the standard pixel and percentage values, this attribute might take the special form <code>0*</code>, which means that the width of each column in the group should be the minimum width necessary to hold the column's contents. Relative widths such as <code>0.5*</code> also can be used.</dd> +</dl> + +<h2 id="示例">示例</h2> + +<p>请参考 {{HTMLElement("table")}} 页面以查看 <code><colgroup></code> 的示例。</p> + +<h2 id="规范">规范</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">规范</th> + <th scope="col">状态</th> + <th scope="col">备注</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'tabular-data.html#the-colgroup-element', '<colgroup>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'tabular-data.html#the-colgroup-element', '<colgroup>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'tables.html#edef-COLGROUP', '<colgroup>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + + + +<p>{{Compat("html.elements.colgroup")}}</p> + +<h2 id="参见">参见</h2> + +<ul> + <li>其他与表格有关的 HTML 元素：{{HTMLElement("caption")}}，{{HTMLElement("col")}}，{{HTMLElement("table")}}，{{HTMLElement("tbody")}}，{{HTMLElement("td")}}，{{HTMLElement("tfoot")}}，{{HTMLElement("th")}}，{{HTMLElement("thead")}}，{{HTMLElement("tr")}}；</li> + <li>对 <code><col></code> 元素编写样式时特别有用的 CSS 属性和伪类： + <ul> + <li>{{cssxref("width")}} 属性可用于控制列宽；</li> + <li>{{cssxref(":nth-child")}} 伪类可用于针对特定单元格设置对齐方式；</li> + <li>{{cssxref("text-align")}} 属性可用于按照某一个字符对齐所有单元格的内容，例如 '.'。</li> + </ul> + </li> +</ul> diff --git a/files/zh-cn/web/html/element/command/index.html b/files/zh-cn/web/html/element/command/index.html new file mode 100644 index 0000000000..9d6a7c58fd --- /dev/null +++ b/files/zh-cn/web/html/element/command/index.html @@ -0,0 +1,139 @@ +--- +title: command +slug: Web/HTML/Element/command +translation_of: Web/HTML/Element/command +--- +<div class="warning"> +<p><strong>已废弃</strong></p> + +<p>此功能已过时。 虽然它可能仍然在某些浏览器中工作，但不鼓励使用它，因为它可能随时被删除。 尽量避免使用它。</p> +</div> + +<div class="note"> +<p><strong>注意：</strong><code>command</code>元素已经被{{Gecko("24.0")}}引擎移除以利于{{HTMLElement("menuitem")}}元素。Firefox从未支持<code>command</code>元素，并且在<a href="https://developer.mozilla.org/en-US/docs/Site_Compatibility_for_Firefox_24">Firefox 24</a>中删除了对{{domxref("HTMLCommandElement")}}DOM接口的实现。</p> +</div> + +<h2 class="editable" id="概述"><span>概述</span></h2> + +<p><code>command元素</code>用来表示一个用户可以调用的命令.</p> + +<h2 id="使用规范">使用规范</h2> + +<table class="standard-table"> + <tbody> + <tr> + <td>内容类别</td> + <td><a href="/zh-cn/HTML/Content_categories#Flow_content" title="zh-cn/HTML/Content categories#Flow content">Flow content</a>, <a href="/zh-cn/HTML/Content_categories#Phrasing_content" title="zh-cn/HTML/Content categories#Phrasing content">phrasing content</a></td> + </tr> + <tr> + <td>是否允许有内容</td> + <td>否, 它是一个空元素</td> + </tr> + <tr> + <td>标签遗漏</td> + <td>必须有开始标签, 不可以有结束标签.</td> + </tr> + <tr> + <td>允许的父元素</td> + <td>任何可以包含 <a href="/zh-cn/HTML/Content_categories#Phrasing_content" title="https://developer.mozilla.org/zh-cn/HTML/Content_categories#Phrasing_content">phrasing content</a>的元素.</td> + </tr> + <tr> + <td>规范文档</td> + <td><a class="external" href="http://dev.w3.org/html5/spec/Overview.html#the-command" title="http://dev.w3.org/html5/spec/Overview.html#the-command">HTML5, section 4.11.3</a></td> + </tr> + </tbody> +</table> + +<h2 id="属性">属性</h2> + +<p>和其他的HTML元素一样, 该元素支持<a href="/zh-cn/HTML/Global_attributes" title="zh-cn/HTML/Global attributes">全局属性</a>.</p> + +<dl> + <dt>{{ htmlattrdef("checked") }}</dt> + <dd>表明该元素已被选择, 除非元素的<code>type</code> 属性是 <code>checkbox 或</code>者 <code>radio</code>,否则该属性必须被省略.</dd> + <dt>{{ htmlattrdef("disabled") }}</dt> + <dd>表明该command元素已经被禁用.</dd> + <dt>{{ htmlattrdef("icon") }}</dt> + <dd>用一张图片来显示该command元素.</dd> + <dt>{{ htmlattrdef("label") }}</dt> + <dd>该command元素的名称.用来显示给用户.</dd> + <dt>{{ htmlattrdef("radiogroup") }}</dt> + <dd>如果该元素的<code>type</code>属性为<code>radio</code>,则radiogroup属性用来表示这一组command元素的公用名称. 如果<code>type</code>属性不是<code>radio</code>,则radiogroup属性必须省略.</dd> + <dt>{{ htmlattrdef("type") }}</dt> + <dd>该属性用来表明command元素的类型,可以是下面三种值: + <ul> + <li> + <p><code>command</code> 或者为空,表示一个普通的command元素.</p> + </li> + <li> + <p><code>checkbox</code>表明该command元素体现为一个复选框,可以来回切换选中状态.</p> + </li> + <li> + <p><code>radio</code> 表明该command元素体现为一个单选按钮,可以来回切换选中状态.</p> + </li> + </ul> + </dd> +</dl> + +<h2 id="DOM_接口">DOM 接口</h2> + +<p>该元素实现了<code><a href="/zh-cn/DOM/HTMLCommandElement" rel="internal">HTMLCommandElement</a></code>接口.</p> + +<h2 id="例子">例子</h2> + +<pre class="brush: html"><command type="command" label="Save" icon="icons/save.png" onclick="save()"> +</pre> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + </tr> + </tbody> +</table> +</div> + +<p> </p> + +<p>{{ languages( { "en": "en/HTML/Element/command" } ) }}</p> diff --git a/files/zh-cn/web/html/element/content/index.html b/files/zh-cn/web/html/element/content/index.html new file mode 100644 index 0000000000..21f0f196cd --- /dev/null +++ b/files/zh-cn/web/html/element/content/index.html @@ -0,0 +1,160 @@ +--- +title: <content> +slug: Web/HTML/Element/content +translation_of: Web/HTML/Element/content +--- +<p>{{Deprecated_header}}</p> + +<p><strong>HTML <code><content></code> 元素</strong>— <a href="/en-US/docs/Web/Web_Components">Web 组件</a> 的技术套件的废弃部分 — 用于 <a href="/en-US/docs/Web/Web_Components/Shadow_DOM">Shadow DOM</a> 内部作为 {{glossary("insertion point")}}，并且不可用于任何正常的 HTML，现在已被 {{HTMLElement("slot")}} 元素代替，它在 DOM 中创建一个位置，Shadow DOM 会插入这里。 </p> + +<div class="note"> +<p><strong>注</strong>：虽然在规范的草案中出现，并且在多个浏览器中实现，这个元素依然会在规范的之后版本中移除。</p> +</div> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/en-US/docs/Web/HTML/Content_categories" title="HTML/Content_categories">内容分类</a></th> + <td><a href="/en-US/docs/Web/HTML/Content_categories#Transparent_content_model" title="HTML/Content_categories#Transparent_content_model">透明内容</a></td> + </tr> + <tr> + <th scope="row">允许的内容</th> + <td><a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">流式内容</a></td> + </tr> + <tr> + <th scope="row">Tag omission</th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th scope="row">允许的父元素</th> + <td>任何接受流式内容的元素</td> + </tr> + <tr> + <th scope="row">DOM 接口</th> + <td>{{domxref("HTMLContentElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Attributes" name="Attributes">属性</h2> + +<p>这个元素包含 <a href="/en-US/docs/Web/HTML/Global_attributes">全局属性</a>。</p> + +<dl> + <dt><code>select</code></dt> + <dd>逗号分隔的选择器列表，它们和 CSS 选择器语法相同。它们选择要插入的内容，来替换为 <code><content> </code>元素。</dd> +</dl> + +<h2 id="示例">示例</h2> + +<p>这里是一个使用 <code><content></code> 元素的简单示例。它是个 HTML 文件，包含所有所需的东西。</p> + +<div class="note"> +<p><strong>注</strong>：为了使这个代码有效，你使用的浏览器必须支持 Web 组件，请见 <a href="/en-US/docs/Web/Web_Components#Enabling_Web_Components_in_Firefox">Enabling Web Components in Firefox</a>。</p> +</div> + +<pre class="brush: html"><html> + <head></head> + <body> + <!-- The original content accessed by <content> --> + <div> + <h4>My Content Heading</h4> + <p>My content text</p> + </div> + + <script> + // Get the <div> above. + var myContent = document.querySelector('div'); + // Create a shadow DOM on the <div> + var shadowroot = myContent.createShadowRoot(); + // Insert into the shadow DOM a new heading and + // part of the original content: the <p> tag. + shadowroot.innerHTML = + '<h2>Inserted Heading</h2> <content select="p"></content>'; + </script> + + </body> +</html> +</pre> + +<p>如果你在 Web 浏览器中展示，它应该是这样。</p> + +<p><img alt="content example" src="https://mdn.mozillademos.org/files/10077/content-example.png" style="height: 383px; width: 716px;"></p> + +<h2 id="规范">规范</h2> + +<table class="spec-table standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('Shadow DOM', "#the-content-element", "content")}}</td> + <td>{{Spec2('Shadow DOM')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">浏览器兼容性</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Basic support</td> + <td>35</td> + <td><span style="font-size: 12px; line-height: 18px;">{{CompatGeckoDesktop("28")}}</span> [1]</td> + <td>{{CompatNo}}</td> + <td>26</td> + <td><span style="font-size: 12px; line-height: 18px;">{{CompatNo}}</span></td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>37</td> + <td>{{CompatGeckoMobile("28")}} [1]</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] 如果 Shadow DOM 在 Firefox 中没有开启， <code><content> </code>元素会表现为<code> </code>domxref("HTMLUnknownElement")}}。Shadow DOM 首先在 Firefox 33 中实现，并且在首选项 <code>dom.webcomponents.enabled </code>背后，它默认是关闭的。</p> + +<h2 id="See_also" name="See_also">另见</h2> + +<ul> + <li><a href="/en-US/docs/Web/Web_Components">Web 组件</a></li> + <li>{{HTMLElement("shadow")}}, {{HTMLElement("slot")}}, {{HTMLElement("template")}}, {{HTMLElement("element")}}</li> +</ul> + +<div>{{HTMLRef}}</div> diff --git a/files/zh-cn/web/html/element/data/index.html b/files/zh-cn/web/html/element/data/index.html new file mode 100644 index 0000000000..860165d4c4 --- /dev/null +++ b/files/zh-cn/web/html/element/data/index.html @@ -0,0 +1,99 @@ +--- +title: <data> +slug: Web/HTML/Element/data +tags: + - HTML + - Web + - 元素 + - 参考 +translation_of: Web/HTML/Element/data +--- +<div>{{HTMLRef}}</div> + +<p><strong>HTML <code><data></code> 元素</strong>将一个指定内容和机器可读的翻译联系在一起。但是，如果内容是与时间或者日期相关的，则一定要使用 {{HTMLElement("time")}}。</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/data.html", "tabbed-shorter")}}</div> + + + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/en-US/docs/Web/HTML/Content_categories">Content categories</a></th> + <td><a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">Flow content</a>, <a href="/en-US/docs/Web/HTML/Content_categories#Phrasing_content">phrasing content</a>, palpable content.</td> + </tr> + <tr> + <th scope="row">Permitted content</th> + <td><a href="/en-US/docs/Web/HTML/Content_categories#Phrasing_content">Phrasing content</a>.</td> + </tr> + <tr> + <th scope="row">Tag omission</th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th scope="row">Permitted parents</th> + <td>Any element that accepts <a href="/en-US/docs/Web/HTML/Content_categories#Phrasing_content">phrasing content</a>.</td> + </tr> + <tr> + <th scope="row">DOM 接口</th> + <td>{{domxref("HTMLDataElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="属性">属性</h2> + +<p>该元素支持<a href="/zh-CN/docs/HTML/Global_attributes">全局属性</a>。</p> + +<dl> + <dt>{{htmlattrdef("value")}}</dt> + <dd>该属性指定元素内容所对应的数据，或者说“机器可读的翻译”。</dd> +</dl> + +<h2 id="示例">示例</h2> + +<p>下面的示例展示了一些产品名称，而且每个名称都和一个产品编码相关联。</p> + +<pre class="brush: html"><p>新产品</p> +<ul> + <li><data value="398">迷你番茄酱</data></li> + <li><data value="399">巨无霸番茄酱</data></li> + <li><data value="400">超级巨无霸番茄酱</data></li> +</ul> +</pre> + +<h2 id="规范">规范</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">规范</th> + <th scope="col">状态</th> + <th scope="col">备注</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'text-level-semantics.html#the-data-element', '<data>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>No change from {{Spec2('HTML5 W3C')}}</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'text-level-semantics.html#the-data-element', '<data>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + + + +<p>{{Compat("html.elements.data")}}</p> + +<h2 id="参见">参见</h2> + +<ul> + <li>HTML {{HTMLElement("time")}} 元素。</li> +</ul> diff --git a/files/zh-cn/web/html/element/datalist/index.html b/files/zh-cn/web/html/element/datalist/index.html new file mode 100644 index 0000000000..37bb8d3607 --- /dev/null +++ b/files/zh-cn/web/html/element/datalist/index.html @@ -0,0 +1,79 @@ +--- +title: datalist +slug: Web/HTML/Element/datalist +tags: + - Element + - HTML +translation_of: Web/HTML/Element/datalist +--- +<p id="概述"><strong><em>HTML </em><code><datalist></code><em>元素</em></strong>包含了一组{{HTMLElement("option")}}元素，这些元素表示其它表单控件可选值.</p> + +<p>{{EmbedInteractiveExample("pages/tabbed/datalist.html", "tabbed-standard")}}</p> + +<ul class="htmlelt"> + <li><dfn><a href="https://developer.mozilla.org/en-US/docs/HTML/Content_categories" title="HTML/Content_categories">内容范畴</a></dfn><a href="https://developer.mozilla.org/en-US/docs/HTML/Content_categories#Flow_content" title="HTML/Content categories#Flow content">流内容</a>，<a href="https://developer.mozilla.org/en-US/docs/HTML/Content_categories#Phrasing_content" title="HTML/Content categories#Phrasing content">段落内容</a>。</li> + <li><dfn>允许内容</dfn>要么 <a href="https://developer.mozilla.org/en-US/docs/HTML/Content_categories#Phrasing_content" title="HTML/Content_categories#Phrasing_content">段落内容</a> 要么 0个或多个 {{HTMLElement("option")}}元素.</li> + <li><dfn>遗漏标签</dfn>{{no_tag_omission}}</li> + <li><dfn>允许父级元素</dfn>任何接受<a href="https://developer.mozilla.org/en-US/docs/HTML/Content_categories#Phrasing_content" title="HTML/Content_categories#Phrasing_content">段落内容</a>的元素.</li> + <li><dfn>Permitted ARIA roles</dfn>None</li> + <li><dfn>DOM接口</dfn>{{domxref("HTMLDataListElement")}}</li> +</ul> + +<h2 id="属性">属性</h2> + +<p>该元素除了公用的<a href="/zh-cn/HTML/Global_attributes" title="zh-cn/HTML/Global attributes">全局属性</a>之外，没有其他属性。</p> + +<h2 id="示例">示例</h2> + +<pre class="brush: html"><label>Choose a browser from this list: +<input list="browsers" name="myBrowser" /></label> +<datalist id="browsers"> + <option value="Chrome"> + <option value="Firefox"> + <option value="Internet Explorer"> + <option value="Opera"> + <option value="Safari"> +</datalist></pre> + +<h3 id="结果">结果</h3> + +<p>{{EmbedLiveSample("示例")}}</p> + +<h2 id="Specifications" name="Specifications">规范</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">规范</th> + <th scope="col">状态</th> + <th scope="col">备注</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'the-button-element.html#the-datalist-element', '<datalist>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'the-datalist-element.html#the-datalist-element', '<datalist>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<p>{{Compat("html.elements.datalist")}}</p> + +<h2 id="Polyfill">Polyfill</h2> + +<p>以下Polyfill旨在支持旧的或者目前不兼容的浏览器：<a href="https://github.com/mfranzke/datalist-polyfill">datalist-polyfill</a></p> + +<h2 id="参见">参见</h2> + +<ul> + <li class="last">{{ HTMLElement("input") }} 元素，它更特殊的 {{ htmlattrxref("list", "input") }} 属性;</li> + <li class="last"> {{ HTMLElement("option") }}元素.</li> +</ul> diff --git a/files/zh-cn/web/html/element/dd/index.html b/files/zh-cn/web/html/element/dd/index.html new file mode 100644 index 0000000000..fae18f6334 --- /dev/null +++ b/files/zh-cn/web/html/element/dd/index.html @@ -0,0 +1,139 @@ +--- +title: <dd> +slug: Web/HTML/Element/dd +tags: + - HTML + - HTML 分组内容 + - Web + - 元素 + - 引用 +translation_of: Web/HTML/Element/dd +--- +<p>{{HTMLRef}}</p> + +<p><strong>HTML <code><dd></code> 元素</strong>（<em>HTML 描述元素</em>）用来指明一个描述列表 ({{HTMLElement("dl")}}) 元素中一个术语的描述。这个元素只能作为描述列表元素的子元素出现，并且必须跟着一个 {{HTMLElement("dt")}} 元素。</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/en-US/docs/HTML/Content_categories" title="HTML/Content_categories">内容分类</a></th> + <td>None</td> + </tr> + <tr> + <th scope="row">允许的内容</th> + <td><a href="/en-US/docs/HTML/Content_categories#Flow_content" title="HTML/Content_categories#Flow_content">流内容</a></td> + </tr> + <tr> + <th scope="row">标签省略</th> + <td>必须有开标签。如果该元素后面紧跟着另一个 <dd> 元素，或者父元素中没有更多内容，则可以省略闭标签。</td> + </tr> + <tr> + <th scope="row">允许的父元素</th> + <td>该元素需要出现在 {{HTMLElement("dt")}} 元素和 {{HTMLElement("dd")}} 元素之后，并且在一个 {{HTMLElement("dl")}} 元素里。</td> + </tr> + <tr> + <th scope="row">DOM 接口</th> + <td>{{domxref("HTMLElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="属性">属性</h2> + +<p><span style="line-height: 21px;">该元素包含</span><a href="https://developer.mozilla.org/en-US/docs/HTML/Global_attributes" style="line-height: 21px;" title="HTML/Global attributes">全局属性</a>。</p> + +<dl> + <dt>{{htmlattrdef("nowrap")}} {{Non-standard_inline}}</dt> + <dd>如果这个属性的值为 yes，那么定义的描述文字将不会包裹。默认值为 no。</dd> +</dl> + +<h2 id="示例">示例</h2> + +<p>示例请看<a href="/zh-CN/docs/HTML/Element/dl#examples"><dl> 的示例</a>。</p> + +<h2 id="Specifications" name="Specifications">规范</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">规范</th> + <th scope="col">状态</th> + <th scope="col">备注</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'grouping-content.html#the-dd-element', '<dd>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'grouping-content.html#the-dd-element', '<dd>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/lists.html#h-10.3', '<dd>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("1.0")}} [1]</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("1.0")}} [1]</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] Up to Gecko 1.9.2 (Firefox 4) inclusive, Firefox implements the <a href="/en-US/docs/DOM/span" title="DOM/span"><span style="font-family: courier new;">HTMLSpanElement</span></a> interface for this element.</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{HTMLELement("dl")}}, {{HTMLElement("dt")}}</li> +</ul> diff --git a/files/zh-cn/web/html/element/del/index.html b/files/zh-cn/web/html/element/del/index.html new file mode 100644 index 0000000000..ebb6162f64 --- /dev/null +++ b/files/zh-cn/web/html/element/del/index.html @@ -0,0 +1,109 @@ +--- +title: <del> +slug: Web/HTML/Element/del +tags: + - Element + - HTML + - HTML edits + - Web + - del +translation_of: Web/HTML/Element/del +--- +<p id="Summary">HTML的<strong><code><del></code></strong>标签表示一些被从文档中删除的文字内容。比如可以在需要显示修改记录或者源代码差异的情况使用这个标签。{{HTMLElement("ins")}}标签的作用恰恰于此相反：表示文档中添加的内容。</p> + +<p>这个标签通常（但不一定要）在文字上显示删除线。</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/zh-CN/docs/Web/Guide/HTML/Content_categories">内容分类</a></th> + <td><a href="/zh-CN/docs/Web/Guide/HTML/Content_categories#短语元素（Phrasing_content）">短语元素</a> 或者 <a href="/zh-CN/docs/Web/Guide/HTML/Content_categories#流式元素（Flow_content）">流式元素</a> 。</td> + </tr> + <tr> + <th scope="row">允许的内容</th> + <td><a href="/zh-CN/docs/Web/Guide/HTML/Content_categories#透明内容模型（Transparent_content_model）">透明内容模型</a></td> + </tr> + <tr> + <th scope="row">标签省略</th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th scope="row">允许的父元素</th> + <td>任意<a href="/zh-CN/docs/Web/Guide/HTML/Content_categories#短语元素（Phrasing_content）">短语元素</a> </td> + </tr> + <tr> + <th scope="row">允许的 ARIA 角色</th> + <td>任意</td> + </tr> + <tr> + <th scope="row">DOM 接口</th> + <td>{{domxref("HTMLModElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="属性">属性</h2> + +<p><span style="line-height: 21px;">这个标签包含<a href="/zh-CN/docs/Web/HTML/Global_attributes">全局属性</a>。</span></p> + +<dl> + <dt>{{htmlattrdef("cite")}}</dt> + <dd>提供一个URI，其中的资源解释作出修改的原因（比如：根据某次会议讨论）。</dd> + <dt>{{htmlattrdef("datetime")}}</dt> + <dd>这个属性说明修改的时间和日期，这里的时间和日期格式要符合<a href="https://html.spec.whatwg.org/multipage/infrastructure.html#valid-date-string-with-optional-time">规范</a>。如果设置的值不符合该规范，那么它将没有任何意义。</dd> +</dl> + +<h2 id="示例">示例</h2> + +<pre class="brush: html"><p><del>This text has been deleted</del>, here is the rest of the paragraph.</p> +<del ><p >This paragraph has been deleted.</p ></del ></pre> + +<h3 id="结果">结果</h3> + +<p><del>This text has been deleted</del>, here is the rest of the paragraph.</p> + +<p><del>This paragraph has been deleted.</del></p> + +<h2 id="Specifications" name="Specifications">规范</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">规范</th> + <th scope="col">状态</th> + <th scope="col">评论</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'edits.html#the-del-element', '<del>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'edits.html#the-del-element', '<del>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/text.html#h-9.4', '<del>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> + +<p>{{Compat("html.elements.del")}}</p> + +<h2 id="相关链接">相关链接</h2> + +<ul> + <li>{{HTMLElement("ins")}} 标签用来表示插入文本的内容</li> + <li>{{HTMLElement("s")}} 标签用来显示删除线，代表内容被删除了</li> +</ul> + +<div>{{HTMLRef}}</div> diff --git a/files/zh-cn/web/html/element/details/index.html b/files/zh-cn/web/html/element/details/index.html new file mode 100644 index 0000000000..aa33ec2e53 --- /dev/null +++ b/files/zh-cn/web/html/element/details/index.html @@ -0,0 +1,275 @@ +--- +title: <details>：详细信息展现元素 +slug: Web/HTML/Element/details +tags: + - HTML + - HTML5 + - Web + - 元素 +translation_of: Web/HTML/Element/details +--- +<div>{{HTMLRef}}</div> + +<p><span class="seoSummary"><strong>HTML <code><details></code>元素</strong>可创建一个挂件，仅在被切换成展开状态时，它才会显示内含的信息。</span>{{HTMLElement("summary")}} 元素可为该部件提供概要或者标签。</p> + +<p>A disclosure widget is typically presented onscreen using a small triangle which rotates (or twists) to indicate open/closed status, with a label next to the triangle. If the first child of the <code><details></code> element is a <code><summary></code>, the contents of the <code><summary></code> element are used as the label for the disclosure widget.</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/details.html", "tabbed-standard")}}</div> + + + +<div class="note"> +<p><strong>Note:</strong> The common use of a triangle which rotates or twists around to represent opening or closing the widget is why these are sometimes called "twisties."</p> +</div> + +<p>同一个 <code><details></code> 组件只能处于两种状态之一。The default <em>closed</em> state displays only the triangle and the label inside <code><summary></code> (or a {{Glossary("user agent")}}-defined default string if no <code><summary></code>). This might look like the following:</p> + +<figure style="margin: 1em 0; padding: 1em; border: 1px solid black; box-shadow: 0 0 4px 1px black; width: 640px;"><img alt="Screenshot of closed <details> widget. A black left-pointing triangle sits to the right of the text “System Requirements”." src="https://mdn.mozillademos.org/files/15717/details-closed.png" style="height: 26px; width: 191px;"></figure> + +<p>Here we see a standard disclosure widget with the label "System Requirements", in its default closed state. When the user clicks on the widget, or focuses it then presses the space bar, it "twists" open, revealing its contents:</p> + +<figure style="margin: 1em 0; padding: 1em; border: 1px solid black; box-shadow: 0 0 4px 1px black; width: 640px;"><img alt="Screenshot of open <details> widget. The triangle now points downward, and a detailed description of what “System Requirements” means is shown." src="https://mdn.mozillademos.org/files/15718/details-open.png" style="height: 96px; width: 640px;"></figure> + +<p>From there, you can use CSS to style the disclosure widget, and you can programmatically open and close the widget by setting/removing its {{htmlattrxref("open", "details")}} attribute.</p> + +<p>By default when closed, the widget is only tall enough to display the disclosure triangle and summary. When open, it expands to display the details contained within.</p> + +<div class="note"> +<p><strong>Note:</strong> Unfortunately, at this time there's no built-in way to animate the transition between open and closed.</p> +</div> + +<p>Fully standards-compliant implementations automatically apply the CSS <code>{{cssxref("display")}}: list-item</code> to the {{HTMLElement("summary")}} element. You can use this to customize its appearance further. See {{anch("Customizing the disclosure widget")}} for further details.</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/en-US/docs/Web/HTML/Content_categories">Content categories</a></th> + <td><a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">Flow content</a>, sectioning root, interactive content, palpable content.</td> + </tr> + <tr> + <th scope="row">Permitted content</th> + <td>One {{HTMLElement("summary")}} element followed by <a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">flow content</a>.</td> + </tr> + <tr> + <th scope="row">Tag omission</th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th scope="row">Permitted parents</th> + <td>Any element that accepts <a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">flow content</a>.</td> + </tr> + <tr> + <th scope="row">Permitted ARIA roles</th> + <td>None</td> + </tr> + <tr> + <th scope="row">DOM interface</th> + <td>{{domxref("HTMLDetailsElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="属性">属性</h2> + +<p>此元素仅包含<a href="/zh-CN/docs/Web/HTML/Global_attributes">全局属性</a>。</p> + +<dl> + <dt>{{htmlattrdef("open")}}</dt> + <dd>This Boolean attribute indicates whether or not the details — that is, the contents of the <code><details></code> element — are currently visible. The default, <code>false</code>, means the details are not visible.</dd> +</dl> + +<h2 id="事件">事件</h2> + +<p>In addition to the usual events supported by HTML elements, the <code><details></code> element supports the {{event("toggle")}} event, which is dispatched to the <code><details></code> element whenever its state changes between open and closed. It is sent <em>after</em> the state is changed, although if the state changes multiple times before the browser can dispatch the event, the events are coalesced so that only one is sent.</p> + +<p>You can listen for the <code>toggle</code> event to detect when the widget changes state:</p> + +<pre class="brush: js">details.addEventListener("toggle", event => { + if (details.open) { + /* the element was toggled open */ + } else { + /* the element was toggled closed */ + } +});</pre> + +<h2 id="例子">例子</h2> + +<h3 id="A_simple_disclosure_example">A simple disclosure example</h3> + +<p>This example shows a <code><details></code> element with no provided summary.</p> + +<pre class="brush: html"><details> + <p>Requires a computer running an operating system. The computer + must have some memory and ideally some kind of long-term storage. + An input device as well as some form of output device is + recommended.</p> +</details></pre> + +<p>In this situation, the browser will use a default summary string (usually "Details"). Here's what your browser does with it:</p> + +<p>{{EmbedLiveSample("A_simple_disclosure_example", 650, 150)}}</p> + +<h3 id="Providing_a_summary">Providing a summary</h3> + +<p>This example adds a summary to the above example by using the {{HTMLElement("summary")}} element inside <code><details></code>, like this:</p> + +<pre class="brush: html"><details> + <summary>System Requirements</summary> + <p>Requires a computer running an operating system. The computer + must have some memory and ideally some kind of long-term storage. + An input device as well as some form of output device is + recommended.</p> +</details></pre> + +<p>The result from this HTML is this:</p> + +<p>{{EmbedLiveSample("Providing_a_summary", 650, 150)}}</p> + +<h3 id="Creating_an_open_disclosure_box">Creating an open disclosure box</h3> + +<p>To start the <code><details></code> box in its open state, add the Boolean <code>open</code> attribute:</p> + +<pre class="brush: html"><details open> + <summary>System Requirements</summary> + <p>Requires a computer running an operating system. The computer + must have some memory and ideally some kind of long-term storage. + An input device as well as some form of output device is + recommended.</p> +</details></pre> + +<p>This results in:</p> + +<p>{{EmbedLiveSample("Creating_an_open_disclosure_box", 650, 150)}}</p> + +<h3 id="Customizing_the_appearance">Customizing the appearance</h3> + +<p>Now let's apply some CSS to customize the appearance of the disclosure box.</p> + +<h4 id="CSS">CSS</h4> + +<pre class="brush: css">details { + font: 16px "Open Sans", "Arial", sans-serif; + width: 620px; +} + +details > summary { + padding: 2px 6px; + width: 15em; + background-color: #ddd; + border: none; + box-shadow: 3px 3px 4px black; +} + +details > p { + border-radius: 0 0 10px 10px; + background-color: #ddd; + padding: 2px 6px; + margin: 0; + box-shadow: 3px 3px 4px black; +} +</pre> + +<p>This CSS creates a look similar to a tabbed interface, where clicking the tab opens it to reveal its contents.</p> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><details> + <summary>System Requirements</summary> + <p>Requires a computer running an operating system. The computer + must have some memory and ideally some kind of long-term storage. + An input device as well as some form of output device is + recommended.</p> +</details></pre> + +<h4 id="结果">结果</h4> + +<p>{{EmbedLiveSample("Customizing_the_appearance", 650, 150)}}</p> + +<h3 id="自定义自带部件的样式">自定义自带部件的样式</h3> + +<p>自带的三角形可以自定义，但并没有得到广泛支持。由于该元素是标准化的，因此在实验性实施阶段，浏览器如何支持此自定义项有所不同，我们不得不暂时使用多种方法。</p> + +<p>{{HTMLElement("summary")}} 元素支持 {{cssxref("list-style")}}缩写属性或者完全属性，比如{{cssxref("list-style-type")}}，可以使用它们任意改变三角（通常是使用{{cssxref("list-style-image")}}）。例如，我们可以使用<code>list-style: none</code>移除三角形。</p> + +<p>Chrome尚不支持此功能，因此我们还需要使用其非标准<code>::-webkit-details-marker</code><a href="/en-US/docs/Web/CSS/Pseudo-elements">伪元素</a>来自定义。</p> + +<h4 id="CSS_2">CSS</h4> + +<pre class="brush: css; highlight:[12, 15-17]">details { + font: 16px "Open Sans", "Arial", sans-serif; + width: 620px; +} + +details > summary { + padding: 2px 6px; + width: 15em; + background-color: #ddd; + border: none; + box-shadow: 3px 3px 4px black; + list-style: none; +} + +details > summary::-webkit-details-marker { + display: none; +} + +details > p { + border-radius: 0 0 10px 10px; + background-color: #ddd; + padding: 2px 6px; + margin: 0; + box-shadow: 3px 3px 4px black; +} +</pre> + +<p>该CSS的外观类似于选项卡界面，在该界面中，激活选项卡将展开并打开它以显示其内容。</p> + +<h4 id="HTML_2">HTML</h4> + +<pre class="brush: html"><details> + <summary>System Requirements</summary> + <p>Requires a computer running an operating system. The computer + must have some memory and ideally some kind of long-term storage. + An input device as well as some form of output device is + recommended.</p> +</details></pre> + +<h4 id="结果_2">结果</h4> + +<p>{{EmbedLiveSample("Customizing_the_disclosure_widget", 650, 150)}}</p> + +<h2 id="规范">规范</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">规范</th> + <th scope="col">状态</th> + <th scope="col">备注</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'interactive-elements.html#the-details-element', '<details>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5.1', 'interactive-elements.html#the-details-element', '<details>')}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + + + +<p>{{Compat("html.elements.details")}}</p> + +<h2 id="参见">参见</h2> + +<ul> + <li>{{HTMLElement("summary")}}</li> +</ul> diff --git a/files/zh-cn/web/html/element/dfn/index.html b/files/zh-cn/web/html/element/dfn/index.html new file mode 100644 index 0000000000..54ad800e1d --- /dev/null +++ b/files/zh-cn/web/html/element/dfn/index.html @@ -0,0 +1,166 @@ +--- +title: <dfn> +slug: Web/HTML/Element/dfn +translation_of: Web/HTML/Element/dfn +--- +<h2 id="摘要">摘要</h2> + +<p><em>HTML 定义元素</em> (<strong><dfn></strong>) 表示术语的一个定义。</p> + +<div class="note"><strong>HTML5 使用说明：</strong> + +<ul> + <li><code><dfn></code> 元素标记了被定义的术语；术语定义应当在 {{HTMLElement("p")}}, {{HTMLElement("section")}}或定义列表 (通常是{{HTMLElement("dt")}}, {{HTMLElement("dd")}} 对)中给出。</li> + <li>被定义术语的值由下列规则确定： + <ol> + <li>如果 <code><dfn></code> 元素有一个 <code><strong>title</strong></code> 属性，那么该术语的值就是该属性的值。</li> + <li>否则，如果它仅包含一个 {{HTMLElement("abbr")}} 元素，该元素拥有 {{htmlattrxref("title", "abbr")}} 属性，那么该术语的值就是该属性的值。</li> + <li>否则，<code><dfn></code> 元素的文本内容就是该术语的值。</li> + </ol> + </li> +</ul> +</div> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/zh-CN/docs/Web/Guide/HTML/Content_categories" title="HTML/Content_categories">内容分类</a></th> + <td><a href="/zh-CN/docs/Web/Guide/HTML/Content_categories#Flow_content" title="HTML/Content categories#Flow content">Flow content</a>, <a href="/zh-CN/docs/Web/Guide/HTML/Content_categories#Phrasing_content" title="HTML/Content categories#Phrasing content">phrasing content</a>, palpable content.</td> + </tr> + <tr> + <th scope="row">允许的内容</th> + <td><a href="/zh-CN/docs/Web/Guide/HTML/Content_categories#Phrasing_content" title="HTML/Content_categories#Phrasing_content">Phrasing content</a>, but no {{HTMLElement("dfn")}} element must be a descendant.</td> + </tr> + <tr> + <th scope="row">标签省略</th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th scope="row">允许的父元素</th> + <td>Any element that accepts <a href="/zh-CN/docs/Web/Guide/HTML/Content_categories#Phrasing_content" title="HTML/Content_categories#Phrasing_content">phrasing content</a>.</td> + </tr> + <tr> + <th scope="row">DOM 接口</th> + <td>{{domxref("HTMLElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="属性">属性</h2> + +<p><span style="line-height: 21px;">该元素包括 </span><a href="https://developer.mozilla.org/en-US/docs/HTML/Global_attributes" style="line-height: 21px;" title="HTML/Global attributes">全局属性</a>。</p> + +<p>在 HTML5 中，<code><strong>title</strong></code> 属性拥有特殊含义，见上文。</p> + +<h2 id="示例">示例</h2> + +<p>下列示例是合法的HTML5。</p> + +<pre class="brush: html"><!-- Define "The Internet" --> +<p><dfn id="def-internet">The Internet</dfn> is a global system of interconnected networks that use the Internet Protocol Suite (TCP/IP) to serve billions of users worldwide.</p> +</pre> + +<p>在同一文档的后面：</p> + +<pre class="brush: html"><dl> + <!-- Define "World-Wide Web" and reference definition for "the Internet" --> + <dt> + <dfn> + <abbr title="World-Wide Web">WWW</abbr> + </dfn> + </dt> + <dd>The World-Wide Web (WWW) is a system of interlinked hypertext documents accessed on <a href="#def-internet">the Internet</a>.</dd> +</dl> +</pre> + +<h3 id="结果">结果</h3> + +<p>{{ EmbedLiveSample('Examples', '600', '150', '', 'Web/HTML/Element/dfn') }}</p> + +<h2 id="Specifications" name="Specifications">标准</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">标准</th> + <th scope="col">状态</th> + <th scope="col">备注</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'text-level-semantics.html#the-dfn-element', '<dfn>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'text-level-semantics.html#the-dfn-element', '<dfn>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/text.html#h-9.2.1', '<dfn>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>特性</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>基本支持</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("1.0")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>特性</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>基本支持</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("1.0")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="相关链接">相关链接</h2> + +<ul> + <li>定义列表的相关元素：{{HTMLElement("dl")}}, {{HTMLElement("dt")}}, {{HTMLElement("dd")}}</li> + <li>{{HTMLElement("abbr")}}</li> +</ul> + +<p>{{HTMLRef}}</p> diff --git a/files/zh-cn/web/html/element/dialog/index.html b/files/zh-cn/web/html/element/dialog/index.html new file mode 100644 index 0000000000..0b9ffdfd91 --- /dev/null +++ b/files/zh-cn/web/html/element/dialog/index.html @@ -0,0 +1,179 @@ +--- +title: <dialog> +slug: Web/HTML/Element/dialog +tags: + - Dialog + - HTML + - 元素 + - 参考 + - 可交互 +translation_of: Web/HTML/Element/dialog +--- +<div>{{HTMLRef}}</div> + +<p><strong>HTML <code><dialog></code> 元素</strong>表示一个对话框或其他交互式组件，例如一个检查器或者窗口。</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/en-US/docs/Web/HTML/Content_categories">Content categories</a></th> + <td><a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">Flow content</a>, <a href="/en-US/docs/Web/HTML/Sections_and_Outlines_of_an_HTML5_document#Sectioning_roots">sectioning root</a></td> + </tr> + <tr> + <th scope="row">Permitted content</th> + <td><a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">Flow content</a></td> + </tr> + <tr> + <th scope="row">Tag omission</th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th scope="row">Permitted parents</th> + <td>Any element that accepts <a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">flow content</a></td> + </tr> + <tr> + <th scope="row">Permitted ARIA roles</th> + <td>{{ARIARole("alertdialog")}}</td> + </tr> + <tr> + <th scope="row">DOM interface</th> + <td>{{domxref("HTMLDialogElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="属性">属性</h2> + +<p>这个元素包含了<a href="/zh-CN/docs/Web/HTML/Global_attributes">全局属性</a>。但是 <code>tabindex</code> 特性不能被使用在 <code><dialog></code> 元素上。</p> + +<dl> + <dt>{{htmlattrdef("open")}}</dt> + <dd>指示这个对话框是激活的和能互动的。当这个 <code>open</code> 特性没有被设置，对话框不应该显示给用户。</dd> +</dl> + +<h2 id="使用备注">使用备注</h2> + +<ul> + <li><code><form></code> 元素可在此对话框中使用，但需要指定属性 <code>method="dialog"</code> 。当提交表单时，对话框的 {{domxref("HTMLDialogElement.returnValue", "returnValue")}} 属性将会等于表单中被使用的提交按钮的 <code>value</code> 。</li> + <li> {{cssxref('::backdrop')}} CSS 伪元素可用于更改 <code><dialog></code> 背景元素样式，例如在对话框被打开激活时，调暗背景中不可访问的内容。仅当使用 {{domxref("HTMLDialogElement.showModal()")}} 显示对话框时才会绘制 backdrop 背景。</li> +</ul> + +<h2 id="Examples">Examples</h2> + +<h3 id="简单的例子">简单的例子</h3> + +<pre class="brush: html"><dialog open> + <p>Greetings, one and all!</p> +</dialog> +</pre> + +<h3 id="高级示例">高级示例</h3> + +<p>当单击“更新详细信息”按钮时，此示例打开一个包含一个表单的弹出对话框。</p> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><!-- Simple pop-up dialog box containing a form --> +<dialog id="favDialog"> + <form method="dialog"> + <p><label>Favorite animal: + <select> + <option></option> + <option>Brine shrimp</option> + <option>Red panda</option> + <option>Spider monkey</option> + </select> + </label></p> + <menu> + <button value="cancel">Cancel</button> + <button id="confirmBtn" value="default">Confirm</button> + </menu> + </form> +</dialog> + +<menu> + <button id="updateDetails">Update details</button> +</menu> + +<output aria-live="polite"></output> +</pre> + +<h4 id="JavaScript">JavaScript</h4> + +<pre class="brush: js">(function() { + var updateButton = document.getElementById('updateDetails'); + var favDialog = document.getElementById('favDialog'); + var outputBox = document.getElementsByTagName('output')[0]; + var selectEl = document.getElementsByTagName('select')[0]; + var confirmBtn = document.getElementById('confirmBtn'); + + // “Update details” button opens the <dialog> modally + updateButton.addEventListener('click', function onOpen() { + if (typeof favDialog.showModal === "function") { + favDialog.showModal(); + } else { + alert("The dialog API is not supported by this browser"); + } + }); + // "Favorite animal" input sets the value of the submit button + selectEl.addEventListener('change', function onSelect(e) { + confirmBtn.value = selectEl.value; + }); + // "Confirm" button of form triggers "close" on dialog because of [method="dialog"] + favDialog.addEventListener('close', function onClose() { + outputBox.value = favDialog.returnValue + " button clicked - " + (new Date()).toString(); + }); +})(); + +</pre> + +<h3 id="结果">结果</h3> + +<p>{{EmbedLiveSample("Advanced_example", "100%", 300)}}</p> + +<p>Which button was clicked can be determined from <code>favDialog</code>’s {{domxref("HTMLDialogElement.returnValue", "returnValue")}}.</p> + +<h2 id="规范">规范</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">规范</th> + <th scope="col">状态</th> + <th scope="col">备注</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'forms.html#the-dialog-element', '<dialog>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5.2', 'interactive-elements.html#the-dialog-element', '<dialog>')}}</td> + <td>{{Spec2('HTML5.2')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + + + +<p>{{Compat("html.elements.dialog")}}</p> + +<h2 id="Polyfill">Polyfill</h2> + +<p>Include this polyfill to provide support for older browsers.</p> + +<p><a href="https://github.com/GoogleChrome/dialog-polyfill">dialog-polyfill</a></p> + +<h2 id="参见">参见</h2> + +<ul> + <li>{{event("close")}} 事件</li> + <li>{{event("cancel")}} 事件</li> + <li><a href="/en-US/docs/Web/Guide/HTML/Forms">HTML forms guide</a>.</li> + <li>{{cssxref("::backdrop")}} 伪元素</li> +</ul> diff --git a/files/zh-cn/web/html/element/dir/index.html b/files/zh-cn/web/html/element/dir/index.html new file mode 100644 index 0000000000..5fe16cbc8c --- /dev/null +++ b/files/zh-cn/web/html/element/dir/index.html @@ -0,0 +1,46 @@ +--- +title: <dir>：目录元素（已废弃） +slug: Web/HTML/Element/dir +tags: + - HTML + - 列表 + - 已废弃 + - 目录 +translation_of: Web/HTML/Element/dir +--- +<div>{{Obsolete_header()}}</div> + +<p><span class="seoSummary">已废弃的 <strong>HTML 目录元素</strong>（<strong><code><dir></code></strong>）被作为一个文件和/或文件夹的目录的容器，可能还有 {{Glossary("user agent", "用户代理")}} 应用的样式与图标。</span> Do not use this obsolete element; instead, you should use the {{HTMLElement("ul")}} element for lists, including lists of files.</p> + +<div class="note"><strong>用法注解</strong>：不要使用这个元素。虽然它出现在早期的 HTML 规范中，它已经在 HTML4 中废除了，并且在 <a href="/en-US/docs/Web/Guide/HTML/HTML5" title="/en-US/docs/Web/Guide/HTML/HTML5">HTML5</a> 中过时。使用 {{HTMLElement("ul")}} 来代替。</div> + +<h2 id="DOM_接口">DOM 接口</h2> + +<p>元素实现了 {{domxref("HTMLDirectoryElement")}} 接口。</p> + +<h2 id="属性">属性</h2> + +<p>就像其它 HTML 元素，这个元素支持 <a href="/en-US/docs/HTML/Global_attributes" title="HTML/Global attributes">全局属性</a>。</p> + +<dl> + <dt>{{htmlattrdef("compact")}}</dt> + <dd>这个布尔属性表明，列表应该以紧凑样式显示。这个属性的实现取决于浏览器，并且不在所有浏览器中工作。 + <div class="note">用法注解：不要使用这个属性，因为它已经废除了： {{HTMLElement("dir")}} 元素应该使用 CSS 来设计。为了提供 <code>compact</code> 属性的相似效果，可以使用 <a href="/en-US/docs/CSS" title="CSS">CSS</a> 属性 {{cssxref("line-height")}}，值为 <code>80%</code> 。</div> + </dd> +</dl> + +<h2 id="另见">另见</h2> + +<ul> + <li>其它和列表相关的 HTML 元素： {{HTMLElement("ol")}}，{{HTMLElement("ul")}}，{{HTMLElement("li")}}，{{HTMLElement("menu")}}；</li> + <li>特定用于 <code><dir></code> 元素的 CSS 属性： + <ul> + <li>{{cssxref('list-style')}} 属性，用于选择序号展示的方式。</li> + <li><a href="/en-US/docs/CSS_Counters" title="CSS_Counters">CSS 计数器</a>，用于处理复杂的嵌套列表。</li> + <li>{{Cssxref('line-height')}} 属性，用于模拟废除的 {{htmlattrxref("compact", "dir")}} 属性。.</li> + <li>{{cssxref('margin')}} 属性，用于控制列表的缩进。</li> + </ul> + </li> +</ul> + +<div>{{HTMLRef}}</div> diff --git a/files/zh-cn/web/html/element/div/index.html b/files/zh-cn/web/html/element/div/index.html new file mode 100644 index 0000000000..15f608528b --- /dev/null +++ b/files/zh-cn/web/html/element/div/index.html @@ -0,0 +1,153 @@ +--- +title: <div>：内容划分元素 +slug: Web/HTML/Element/div +tags: + - Element + - HTML + - Layout + - Reference + - Web + - 元素 + - 参考 + - 布局 +translation_of: Web/HTML/Element/div +--- +<div>{{HTMLRef}}</div> + +<p><strong><a href="/zh-CN/docs/Web/HTML">HTML</a> <code><div></code> 元素</strong> (或 <em>HTML 文档分区元素</em>) 是一个通用型的流内容容器，在不使用{{glossary("CSS")}}的情况下，其对内容或布局没有任何影响。</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/div.html","tabbed-standard")}}</div> + +<p class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples </a> and send us a pull request.</p> + +<p>作为一个“纯粹的”容器，<code><div></code> 元素在语义上不表示任何特定类型的内容。然而，其可以将内容分组，从而可以使用{{htmlattrxref("class")}}或是{{htmlattrxref("id")}}属性方便的定义内容的格式，也可以在一段文档中划分标记出使用另一种语言书写的内容（使用{{htmlattrxref("lang")}} 属性）等等。</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/zh-CN/docs/Web/Guide/HTML/Content_categories">所属内容分类</a>（<a href="/en-US/docs/Web/HTML/Content_categories">Content categories</a>）</th> + <td><a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">Flow content</a>, palpable content.</td> + </tr> + <tr> + <th scope="row">允许的子元素</th> + <td><a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">Flow content</a>.<br> + Or (in {{glossary("WHATWG")}} HTML): If the parent is a {{HTMLElement("dl")}} element: one or more {{HTMLElement("dt")}} elements followed by one or more {{HTMLElement("dd")}} elements, optionally intermixed with {{HTMLElement("script")}} and {{HTMLElement("template")}} elements.</td> + </tr> + <tr> + <th scope="row">Tag omission</th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th scope="row">允许的父元素</th> + <td>Any element that accepts <a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">flow content</a>.<br> + Or (in {{glossary("WHATWG")}} HTML): {{HTMLElement("dl")}} element.</td> + </tr> + <tr> + <th scope="row">Permitted ARIA roles</th> + <td>Any</td> + </tr> + <tr> + <th scope="row">所使用的DOM API 接口</th> + <td>{{domxref("HTMLDivElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="属性">属性</h2> + +<p>该元素支持所有<a href="/zh-CN/docs/Web/HTML/Global_attributes">全局属性</a>。</p> + +<div class="blockIndicator note"> +<p><strong>注意：</strong> <code>align</code> 属性已废弃；不要再使用它了。你应当使用 <a href="/en-US/docs/Web/CSS/CSS_Grid_Layout">CSS Grid</a> 或 <a href="/en-US/docs/Learn/CSS/CSS_layout/Flexbox">CSS Flexbox</a> 来对齐、定位页面上的 <code><div></code> 元素。</p> +</div> + +<h2 id="使用备注">使用备注</h2> + +<ul> + <li><code><div></code> 元素应当仅在没有任何其它语义元素（比如 {{HTMLElement("article")}} 或 {{HTMLElement("nav")}}）可用时使用。</li> +</ul> + +<h2 id="示例">示例</h2> + +<h3 id="一个简单的例子">一个简单的例子</h3> + +<pre class="brush: html"><div> + <p>这里可以是任何内容，比如 &lt;p&gt;, + &lt;table&gt;，一切由你作主！</p> +</div> +</pre> + +<p>结果看起来像这样：</p> + +<div>这里可以是任何内容，比如 <p>, <table>，一切由你作主！</div> + +<p>实例：</p> + +<p>{{EmbedLiveSample("A_simple_example", 650, 60)}}</p> + +<h3 id="样式实例">样式实例</h3> + +<p>本例使用CSS将样式应用于<div>，从而创建一个阴影框。注意使用<div>上的 {{htmlattrxref("class")}}属性将名为“shadowbox”的样式应用于元素。</p> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><div class="shadowbox"> + <p>Here's a very interesting note displayed in a + lovely shadowed box.</p> +</div></pre> + +<h4 id="CSS">CSS</h4> + +<pre class="brush: css">.shadowbox { + width: 15em; + border: 1px solid #333; + box-shadow: 8px 8px 5px #444; + padding: 8px 12px; + background-image: linear-gradient(180deg, #fff, #ddd 40%, #ccc); +}</pre> + +<h4 id="结果">结果</h4> + +<p>{{EmbedLiveSample("A_styled_example", 650, 120)}}</p> + +<h2 id="规范">规范</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">规范</th> + <th scope="col">状态</th> + <th scope="col">备注</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'grouping-content.html#the-div-element', '<div>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>No changes since the latest snapshot</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'grouping-content.html#the-div-element', '<div>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>Obsoleted <code>align</code></td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/global.html#h-7.5.4', '<div>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + + + +<p>{{Compat("html.elements.div")}}</p> + +<h2 id="参见">参见</h2> + +<ul> + <li>Semantic sectioning elements: {{HTMLElement("section")}}, {{HTMLElement("article")}}, {{HTMLElement("nav")}}, {{HTMLElement("header")}}, {{HTMLElement("footer")}}</li> + <li>{{HTMLElement("span")}} element for styling of phrasing content</li> +</ul> diff --git a/files/zh-cn/web/html/element/dl/index.html b/files/zh-cn/web/html/element/dl/index.html new file mode 100644 index 0000000000..5b0fdf9162 --- /dev/null +++ b/files/zh-cn/web/html/element/dl/index.html @@ -0,0 +1,230 @@ +--- +title: <dl> +slug: Web/HTML/Element/dl +tags: + - HTML + - HTML 分组内容 + - Web + - 元素 + - 引用 +translation_of: Web/HTML/Element/dl +--- +<h2 id="简介">简介</h2> + +<p><strong>HTML <code><dl></code> 元素</strong> （或 <em>HTML</em> <em>描述列表元素</em>）是一个包含术语定义以及描述的列表，通常用于展示词汇表或者元数据 (键-值对列表)。</p> + +<p>在 HTML5 之前， <dl> 被大家以定义列表所熟知。</p> + +<ul class="htmlelt"> + <li><dfn><a href="/en-US/docs/HTML/Content_categories">内容分类</a></dfn> <a href="/en-US/docs/HTML/Content_categories#Flow_content">Flow content</a>(流体内容), 如果<code><dl></code> 元素的子元素包含一个键值对，则显示其中内容.</li> +</ul> + +<ol class="htmlelt"> + <li><dfn>允许的内容</dfn>一：零组或多组dom结构，每组dom结构中包含一个或多个{{HTMLElement("dt")}} 元素，以及 一个或多个{{HTMLElement("dd")}}元素，可通过{{HTMLElement("script")}}元素和{{HTMLElement("template")}}元素进行混入。二：一组或多组{{HTMLElement("div")}}元素，可通过{{HTMLElement("script")}}元素和{{HTMLElement("template")}}元素混入。</li> +</ol> + +<ul class="htmlelt"> + <li><dfn>标签省略</dfn> {{no_tag_omission}}</li> + <li><dfn>允许的父元素</dfn>符合流内容的任何元素</li> + <li><dfn>DOM 接口</dfn> {{domxref("HTMLDListElement")}}</li> +</ul> + +<h2 id="属性">属性</h2> + +<p>该元素包含<a href="/zh-CN/docs/HTML/Global_attributes">全局属性</a>。</p> + +<h2 id="示例">示例</h2> + +<h3 id="单条术语与描述">单条术语与描述</h3> + +<pre class="brush: html"><dl> + <dt>Firefox</dt> + <dd>A free, open source, cross-platform, graphical web browser + developed by the Mozilla Corporation and hundreds of volunteers. + </dd> + <!-- other terms and definitions --> +</dl> +</pre> + +<p>输出：</p> + +<p><img alt="Image:HTML-dl1.png" src="/@api/deki/files/241/=HTML-dl1.png"></p> + +<h3 id="多条术语，单条描述">多条术语，单条描述</h3> + +<pre class="brush: html"><dl> + <dt>Firefox</dt> + <dt>Mozilla Firefox</dt> + <dt>Fx</dt> + <dd>A free, open source, cross-platform, graphical web browser + developed by the Mozilla Corporation and hundreds of volunteers.</dd> + + <!-- other terms and definitions --> +</dl> +</pre> + +<p>输出：</p> + +<p><img alt="Image:HTML-dl2.png" src="/@api/deki/files/242/=HTML-dl2.png"></p> + +<h3 id="单条术语，多条描述">单条术语，多条描述</h3> + +<pre class="brush: html"><dl> + <dt>Firefox</dt> + <dd>A free, open source, cross-platform, graphical web browser + developed by the Mozilla Corporation and hundreds of volunteers.</dd> + <dd>The Red Panda also known as the Lesser Panda, Wah, Bear Cat or Firefox, + is a mostly herbivorous mammal, slightly larger than a domestic cat + (60 cm long).</dd> + + <!-- other terms and definitions --> +</dl> +</pre> + +<p>输出：</p> + +<p><img alt="Image:HTML-dl3.png" src="/@api/deki/files/243/=HTML-dl3.png"></p> + +<h3 id="多条术语，多条描述">多条术语，多条描述</h3> + +<p>同样的，该元素同样可以支持在一个列表中出现多条术语以及多条描述。</p> + +<h3 id="元数据">元数据</h3> + +<p>描述列表可以很方便的将元数据展示为键-值对列表：</p> + +<pre><dl> + <dt>Name</dt> + <dd>Godzilla</dd> + <dt>Born</dt> + <dd>1952</dd> + <dt>Birthplace</dt> + <dd>Japan</dd> + <dt>Color</dt> + <dd>Green</dd> +</dl> +</pre> + +<p>小技巧：通过 CSS3 ，我们可以很容易的在术语后面添加一个与内容无关的分隔符号，比如<font face="Consolas, Liberation Mono, Courier, monospace">：</font></p> + +<pre><code>dt:after { + content: ": "; +}</code></pre> + +<h3 id="在_HTMLElementdiv_元素中包装名称值组">在 {{HTMLElement("div")}} 元素中包装名称值组</h3> + +<p>WHATWG HTML允许在 {{HTMLElement("div")}} 元素中的 {{HTMLElement("dl")}} 元素中包装每个名称 - 值组。当使用元数据时，或全局属性适用于整个组或用于样式时，这可能很有用。</p> + +<pre class="brush: html"><dl> + <div> + <dt>Name</dt> + <dd>Godzilla</dd> + </div> + <div> + <dt>Born</dt> + <dd>1952</dd> + </div> + <div> + <dt>Birthplace</dt> + <dd>Japan</dd> + </div> + <div> + <dt>Color</dt> + <dd>Green</dd> + </div> +</dl> +</pre> + +<h2 id="注意">注意</h2> + +<p>请不要将该元素（也不要用 {{HTMLElement("ul")}} 元素）用来在页面创建具有缩进效果的内容。虽然这样的结果样式看上去没问题，但是，这是很糟糕的做法，并且语义也不清晰。</p> + +<p>要改变描述列表中描述的缩进量，请使用 <a href="/en-US/docs/CSS" title="CSS">CSS</a> {{cssxref("margin")}} 属性。</p> + +<h2 id="Specifications" name="Specifications">规范</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">规范</th> + <th scope="col">状态</th> + <th scope="col">备注</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'grouping-content.html#the-dl-element', '<dl>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'grouping-content.html#the-dl-element', '<dl>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/lists.html#h-10.3', '<dl>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">浏览器兼容性</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Basic support</td> + <td>1.0</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="相关内容">相关内容</h2> + +<ul> + <li>{{HTMLElement("dt")}} element</li> + <li>{{HTMLElement("dd")}} element</li> +</ul> + +<div>{{HTMLRef}}</div> diff --git a/files/zh-cn/web/html/element/dt/index.html b/files/zh-cn/web/html/element/dt/index.html new file mode 100644 index 0000000000..83caa4d909 --- /dev/null +++ b/files/zh-cn/web/html/element/dt/index.html @@ -0,0 +1,116 @@ +--- +title: <dt> +slug: Web/HTML/Element/dt +tags: + - HTML + - HTML 分组内容 + - 元素 + - 引用 +translation_of: Web/HTML/Element/dt +--- +<h2 id="简介">简介</h2> + +<p><strong>HTML <code><dt></code> 元素</strong> （或 <em>HTML 术语定义元素</em>）用于在一个定义列表中声明一个术语。该元素仅能作为 {{HTMLElement("dl")}} 的子元素出现。通常在该元素后面会跟着 {{HTMLElement("dd")}} 元素， 然而，多个连续出现的 <code><dt></code> 元素都将由出现在它们后面的第一个 {{HTMLElement("dd")}} 元素定义。 </p> + +<ul class="htmlelt"> + <li><dfn><a href="/en-US/docs/HTML/Content_categories">内容分类</a></dfn> None.</li> + <li><dfn>允许的内容</dfn><a href="/en-US/docs/HTML/Content_categories#Flowing_content" title="HTML/Content_categories#Phrasing_content">流内容</a>，但是不能包含 {{HTMLElement("header")}} 元素、{{HTMLElement("footer")}} 元素或者其他章节、标题内容。</li> + <li><dfn>标签省略</dfn>必须有开标签。如果该元素后面紧跟着另一个 <dd> 元素，或者父元素中没有更多内容，则可以省略闭标签。</li> + <li><dfn>允许的父元素</dfn>该元素需要出现在 {{HTMLElement("dt")}} 元素或者 {{HTMLElement("dd")}} 元素之前，并且在 {{HTMLElement("dl")}} 元素中。</li> + <li><dfn>DOM 接口</dfn> {{domxref("HTMLElement")}} Up to Gecko 1.9.2 (Firefox 4) inclusive, Firefox implements the <a href="/en-US/docs/DOM/span" title="DOM/span"><span style="font-family: courier new;">HTMLSpanElement</span></a> interface for this element.</li> +</ul> + +<h2 id="属性">属性</h2> + +<p><span style="line-height: 21px;">该元素仅包含 <a href="https://developer.mozilla.org/en-US/docs/HTML/Global_attributes">全局属性</a>。</span></p> + +<h2 id="示例">示例</h2> + +<p>查看示例请移步 <a href="/en-US/docs/HTML/Element/dl#Examples">定义列表示例</a>。</p> + +<h2 id="Specifications" name="Specifications">规范</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">规范</th> + <th scope="col">状态</th> + <th scope="col">备注</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'grouping-content.html#the-dt-element', '<dt>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'grouping-content.html#the-dt-element', '<dt>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/lists.html#h-10.3', '<dt>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">浏览器兼容性</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Basic support</td> + <td>1.0</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="相关内容">相关内容</h2> + +<ul> + <li>{{HTMLElement("dd")}}, {{HTMLElement("dl")}}</li> +</ul> + +<div>{{HTMLRef}}</div> diff --git a/files/zh-cn/web/html/element/element/index.html b/files/zh-cn/web/html/element/element/index.html new file mode 100644 index 0000000000..4db9cb2471 --- /dev/null +++ b/files/zh-cn/web/html/element/element/index.html @@ -0,0 +1,112 @@ +--- +title: <element> +slug: Web/HTML/Element/element +translation_of: Web/HTML/Element/element +--- +<p>{{obsolete_header}}</p> + +<div class="note"> +<p><strong>Note:</strong> This element has been removed from the specification. See <a href="http://lists.w3.org/Archives/Public/public-webapps/2013JulSep/0287.html">this</a> for more information from the editor of the specification.</p> +</div> + +<h2 id="Summary" name="Summary">简介</h2> + +<p><element>元素被定义在最新的 HTML DOM 元素中。</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/en-US/docs/Web/HTML/Content_categories" title="HTML/Content_categories">Content categories</a></th> + <td><a href="/en-US/docs/Web/HTML/Content_categories#Transparent_content">Transparent content</a>.</td> + </tr> + <tr> + <th scope="row">Permitted content</th> + <td>???</td> + </tr> + <tr> + <th scope="row">Tag omission</th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th scope="row">Permitted parent elements</th> + <td>???</td> + </tr> + <tr> + <th scope="row">DOM interface</th> + <td>{{domxref("HTMLElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Attributes" name="Attributes">属性</h2> + +<p>这个元素只有<a href="https://developer.mozilla.org/zh-CN/docs/Web/HTML/Global_attributes" title="HTML/Global attributes">全局属性</a>。</p> + +<h2 id="Examples" name="Examples">示例</h2> + +<p>Text goes here.</p> + +<pre class="brush: html">More text goes here. +</pre> + +<h2 id="Specifications" name="Specifications">规范</h2> + +<p><element>元素以前位于<a href="http://w3c.github.io/webcomponents/spec/custom/">自定义元素</a>的草稿规范中，但已被删除</p> + +<h2 id="Browser_compatibility" name="Browser_compatibility">浏览器兼容</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="See_also" name="See_also">另请参阅</h2> + +<ul> + <li>Web components: {{HTMLElement("content")}}, {{HTMLElement("shadow")}}, {{HTMLElement("template")}}</li> +</ul> + +<div>{{HTMLRef}}</div> diff --git a/files/zh-cn/web/html/element/em/index.html b/files/zh-cn/web/html/element/em/index.html new file mode 100644 index 0000000000..1c3f6deca5 --- /dev/null +++ b/files/zh-cn/web/html/element/em/index.html @@ -0,0 +1,141 @@ +--- +title: <em> +slug: Web/HTML/Element/em +tags: + - VS + - em + - i + - web 语义化 + - webgeeker + - xgqfrms +translation_of: Web/HTML/Element/em +--- +<h2 id="简介">简介</h2> + +<p><strong>HTML 着重元素</strong> (<code><strong><em></strong></code>) 标记出需要用户着重阅读的内容， <code><em></code> 元素是可以嵌套的，嵌套层次越深，则其包含的内容被认定为越需要着重阅读。</p> + +<div class="note"><strong>请注意：</strong> 通常地，该元素会被浏览器展示为斜体文本， 但是，它不应该仅仅用于应用斜体样式；为此目的，请使用CSS样式。使用 {{HTMLElement("cite")}} 元素标记作品的标题（书籍，戏剧，歌曲等）；它通常也采用斜体样式，但具有不同的含义。使用 {{HTMLElement("strong")}} 元素标记比周围文本更重要的文本。</div> + +<ul class="htmlelt"> + <li><dfn>内容类别</dfn><br> + 流内容，推辞内容，可触及内容</li> + <li><dfn>Permitted content</dfn> <a href="/en-US/docs/Web/HTML/Content_categories#Phrasing_content">Phrasing content</a>.</li> + <li><dfn>Tag omission</dfn> {{no_tag_omission}}</li> + <li><dfn>Permitted parent elements</dfn> Any element that accepts <a href="/en-US/docs/Web/HTML/Content_categories#Phrasing_content">phrasing content</a>.</li> + <li><dfn>DOM interface</dfn> {{domxref("HTMLElement")}} Up to Gecko 1.9.2 (Firefox 4) inclusive, Firefox implements the {{domxref("HTMLSpanElement")}} interface for this element.</li> +</ul> + +<h2 id="属性">属性</h2> + +<p>此元素只包括<a href="https://developer.mozilla.org/zh-CN/docs/Web/HTML/Global_attributes">全局属性</a>。</p> + +<h2 id="示例">示例</h2> + +<p><code><em></code> 元素通常被用于指示一个隐式或显式的对比。</p> + +<pre class="brush: html"><p> + In HTML 5, what was previously called <em>block-level</em> content is now called <em>flow</em> content. +</p></pre> + +<h3 id="Result" name="Result">结果</h3> + +<p>In HTML 5, what was previously called <em>block-level</em> content is now called <em>flow</em> content.</p> + +<h2 id="<i>_vs._<em>"><i> vs. <em></h2> + +<p>新的开发人员看到多个元素产生相似的效果，经常被混淆。<code><em></code> 和 <code><i></code> 就是一对常见的例子，因为它们都对文字斜体化。它们的区别是什么？应该使用哪一个？</p> + +<p>在默认情况下，它们的视觉效果是一样的。但语义是不同的。 <code><em></code> 标签表示其内容的着重强调，而 <code><i></code> 标签表示从正常散文中区分出的文本，例如外来词，虚构人物的思想，或者当文本指的是一个词语的定义，而不是其语义含义。（作品的标题，例如书籍或电影的名字，应该使用 <code><cite></code>。）</p> + +<p>这意味着，正确使用哪一个取决于具体的场景。两者都不是纯粹为了装饰的目的，那是CSS样式所做的。</p> + +<p>一个 <code><em></code> 的例子可能是："Just <em>do</em> it already!"，或："We <em>had</em> to do something about it"。人或软件在阅读文本时，会对斜体字的发音使用重读强调。</p> + +<p>一个 <code><i></code> 的例子可能是："The <em>Queen Mary</em> sailed last night"。在这里，没有对 "Queen Mary" 这个词添加强调或重要性。它只是表明，谈论的对象不是一个名叫玛丽的女王，而是一艘名字叫玛丽的船。另一个 <code><i></code> 的例子可能是："The word <em>the</em> is an article"。</p> + +<h2 id="Specifications" name="Specifications">说明文档</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">规范</th> + <th scope="col">状态</th> + <th scope="col">注释</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'text-level-semantics.html#the-em-element', '<em>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'text-level-semantics.html#the-em-element', '<em>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/text.html#h-9.2.1', '<em>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">浏览器兼容性</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>特征</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Basic support</td> + <td>1.0</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="See_also" name="See_also">了解更多</h2> + +<ul> + <li>{{HTMLElement("i")}}</li> +</ul> + +<div>{{HTMLRef}}</div> diff --git a/files/zh-cn/web/html/element/embed/index.html b/files/zh-cn/web/html/element/embed/index.html new file mode 100644 index 0000000000..6733e70d96 --- /dev/null +++ b/files/zh-cn/web/html/element/embed/index.html @@ -0,0 +1,106 @@ +--- +title: <embed>：外部内容嵌入元素 +slug: Web/HTML/Element/embed +tags: + - HTML + - HTML5 + - Web + - 嵌入 +translation_of: Web/HTML/Element/embed +--- +<p><strong>HTML <code><embed></code> 元素</strong>将外部内容嵌入文档中的指定位置。此内容由外部应用程序或其他交互式内容源（如浏览器插件）提供。</p> + +<p>{{Note("这篇文档仅定义该元素在 HTML5 中定义的部分，不包含该元素之前的声明内容和非标准的实现。")}}</p> + +<p>请记住，大多数现代浏览器已经弃用并取消了对浏览器插件的支持，所以如果您希望您的网站可以在普通用户的浏览器上运行，那么依靠 <code><embed></code> 通常是不明智的。</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/en-US/docs/HTML/Content_categories">Content categories</a></th> + <td><a href="/en-US/docs/HTML/Content_categories#Flow_content">Flow content</a>, <a href="/en-US/docs/HTML/Content_categories#Phrasing_content">phrasing content</a>, embedded content, interactive content, palpable content.</td> + </tr> + <tr> + <th scope="row">Permitted content</th> + <td>None, it is an {{Glossary("empty element")}}.</td> + </tr> + <tr> + <th scope="row">Tag omission</th> + <td>Must have a start tag, and must not have an end tag.</td> + </tr> + <tr> + <th scope="row">Permitted parents</th> + <td>Any element that accepts embedded content.</td> + </tr> + <tr> + <th scope="row">Permitted ARIA roles</th> + <td>{{ARIARole("application")}}, {{ARIARole("document")}}, {{ARIARole("img")}}, {{ARIARole("presentation")}}</td> + </tr> + <tr> + <th scope="row">DOM interface</th> + <td>{{domxref("HTMLEmbedElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="属性">属性</h2> + +<p>这个元素的属性包括 <a href="/en-US/docs/HTML/Global_attributes">全局属性</a>。</p> + +<dl> + <dt>{{htmlattrdef("height")}}</dt> + <dd>资源显示的高度，in <a href="https://drafts.csswg.org/css-values/#px">CSS pixels</a>. -- (Absolute values only. <a href="https://html.spec.whatwg.org/multipage/embedded-content.html#dimension-attributes">NO percentages</a>)</dd> + <dt>{{htmlattrdef("src")}}</dt> + <dd>被嵌套的资源的URL。</dd> + <dt>{{htmlattrdef("type")}}</dt> + <dd>用于选择插件实例化的 MIME 类型。</dd> + <dt>{{htmlattrdef("width")}}</dt> + <dd>资源显示的宽度，in <a href="https://drafts.csswg.org/css-values/#px">CSS pixels</a>. -- (Absolute values only. <a href="https://html.spec.whatwg.org/multipage/embedded-content.html#dimension-attributes">NO percentages</a>)</dd> +</dl> + +<h2 id="例子">例子</h2> + +<pre class="brush: html"><embed type="video/quicktime" src="movie.mov" width="640" height="480"> +</pre> + +<h2 id="规范">规范</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">规范</th> + <th scope="col">状态</th> + <th scope="col">备注</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'embedded-content.html#the-embed-element', '<embed>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'embedded-content-0.html#the-embed-element', '<embed>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<div class="note"> +<p><strong>注意</strong>: 不同浏览器之间显示有差异。Blink 内核浏览器（Chrome，Opera）会显示 HTML 资源的内容，但 Firefox 会显示一条通知消息，指出内容需要一个插件（见 {{Bug("730768")}}）。建议使用 <object> 或 <iframe> 元素。</p> +</div> + + + +<p>{{Compat("html.elements.embed")}}</p> + +<h2 id="参见">参见</h2> + +<ul> + <li>其他用于嵌入各种类型内容的元素还包括：{{HTMLElement("audio")}}, {{HTMLElement("canvas")}}, {{HTMLElement("iframe")}}, {{HTMLElement("img")}}, {{MathMLElement("math")}}, {{HTMLElement("object")}}, {{SVGElement("svg")}} 和 {{HTMLElement("video")}}.</li> +</ul> + +<p>{{ HTMLRef }}</p> diff --git a/files/zh-cn/web/html/element/fieldset/index.html b/files/zh-cn/web/html/element/fieldset/index.html new file mode 100644 index 0000000000..4128676e36 --- /dev/null +++ b/files/zh-cn/web/html/element/fieldset/index.html @@ -0,0 +1,169 @@ +--- +title: <fieldset> +slug: Web/HTML/Element/fieldset +tags: + - Element + - HTML + - HTML表单 + - 元素 + - 参考 + - 表单 +translation_of: Web/HTML/Element/fieldset +--- +<div>{{HTMLRef}}</div> + +<div><strong>HTML <code><fieldset></code> </strong>元素用于对表单中的控制元素进行分组（也包括 label 元素）。</div> + +<div></div> + +<div>{{EmbedInteractiveExample("pages/tabbed/fieldset.html", "tabbed-standard")}}</div> + +<div>如上述例子所示，<code><fieldset></code> 元素将一个HTML表单的一部分组成一组，内置了一个 {{htmlelement("legend")}} 元素作为 <code>fieldset</code> 的标题。这个元素有几个属性，最值得注意的是 <code>form</code>，其可以包含同一页面的 {{htmlelement("form")}} 元素的 <code>id</code>，以使 <code><fieldset></code> 成为这个 <code><form></code> 的一部分，即使 <code><fieldset></code> 不在其内。还有 <code>disabled</code> 属性，可将 <code><fieldset></code> 及其所有内容设置为不可用。</div> + +<h2 id="属性">属性</h2> + +<p> 这个元素包含<a href="/en-US/docs/HTML/Global_attributes">所有全局属性</a>。</p> + +<dl> + <dt>{{htmlattrdef("disabled")}}</dt> + <dd>如果设置了这个 bool 值属性, <code><fieldset></code> 的所有子代表单控件也会继承这个属性。这意味着它们不可编辑，也不会随着 {{htmlelement("form")}} 一起提交。它们也不会接收到任何浏览器事件，如鼠标点击或与聚焦相关的事件。默认情况下，浏览器会将这样的控件展示为灰色。注意，{{HTMLElement("legend")}} 中的表单元素不会被禁用。</dd> + <dt>{{htmlattrdef("form")}}</dt> + <dd>将该值设为一个 {{HTMLElement("form")}} 元素的 {{htmlattrxref("id")}} 属性值以将 <code><fieldset></code> 设置成这个 {{HTMLElement("form")}} 的一部分。 </dd> + <dt>{{htmlattrdef("name")}}</dt> + <dd>元素分组的名称 + <div class="note"><strong>注意：</strong>fieldset 的标题由第一个 {{HTMLElement("legend")}} 子元素确定。</div> + </dd> +</dl> + +<h2 id="使用_CSS_样式">使用 CSS 样式</h2> + +<p><code><fieldset></code> 有几种特别的样式方案。</p> + +<p>它的 {{cssxref("display")}} 值默认为 <code>block</code>，因此建立了一个<a href="https://wiki.developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/Block_formatting_context">块级格式化上下文</a>。如果将 <code><fieldset></code> 的 <code>display</code> 值设置为行内级别，则会表现为 <code>inline-block</code>，否则会表现为 <code>block</code>。默认情况下 <code><fieldset></code> 会有 <code>2px</code> <code>groove</code> 的边界围绕着内容，还有一个默认的小的内边距，还有 {{cssxref("min-inline-size", "min-inline-size: min-content")}} 。</p> + +<p>如果其中有 {{htmlelement("legend")}} 元素，会放在块级框起始处的边界上。<code><legend></code> 的宽度会根据内容尽量收缩（shrink-wrap），同时也建立了一个格式化上下文。<code>display</code> 值会块级化（例如 <code>display: inline</code> 表现为 <code>block</code>）。</p> + +<p>一个匿名的框会包围 <code><fieldset></code> 的内容，这个框继承了 <code><fieldset></code> 的一些属性。如果将 <code><fieldset></code> 的样式设置为 <code>display: grid</code> 或 <code>display: inline-grid</code>，那么这个匿名框也会是栅格上下文。如果将 <code><fieldset></code> 的样式设置为 <code>display: flex</code> 或 <code>display: inline-flex</code>，则匿名框也会是弹性盒上下文。除上述情况之外，匿名框默认建立块级格式化上下文。</p> + +<p>你可以以任意方式自行设置 <code><fieldset></code> 和 <code><legend></code> 的样式以配合你的页面设计。</p> + +<div class="blockIndicator note"> +<p><strong>注意：</strong>截至这篇文章发出为止，Microsoft Edge 和 Google Chrome 不能在 {{HTMLElement("fieldset")}} 中使用 <a href="https://wiki.developer.mozilla.org/en-US/docs/Glossary/Flexbox">flexbox</a> 和 <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout">grid </a>布局。<a href="https://github.com/w3c/csswg-drafts/issues/321">这个 GitHub issue</a> 跟踪了这个bug。</p> +</div> + +<h2 id="示例">示例</h2> + +<h3 id="简单的_fieldset">简单的 fieldset</h3> + +<p>这个例子展示了一个非常简单的 <code><fieldset></code>，其中有一个 <code><legend> </code>和一个简单的控件。</p> + +<pre><form action="#"> + <fieldset> + <legend>Simple fieldset</legend> + <input type="radio" id="radio"> + <label for="radio">Spirit of radio</label> + </fieldset> +</form></pre> + +<p><iframe class="live-sample-frame sample-code-frame" frameborder="0" height="80" id="frame_Simple_fieldset" src="https://mdn.mozillademos.org/en-US/docs/Web/HTML/Element/fieldset$samples/Simple_fieldset?revision=1625975" width="100%"></iframe></p> + +<h3 id="禁用_fieldset">禁用 fieldset</h3> + +<p>这个例子展示了一个被禁用的 <code><fieldset></code> ，其中有两个控件。注意随着 <code><fieldset></code> 被一起禁用的控件如何表现。</p> + +<pre><form action="#"> + <fieldset disabled> + <legend>Disabled fieldset</legend> + <div> + <label for="name">Name: </label> + <input type="text" id="name" value="Chris"> + </div> + <div> + <label for="pwd">Archetype: </label> + <input type="password" id="pwd" value="Wookie"> + </div> + </fieldset> +</form></pre> + +<p><iframe class="live-sample-frame sample-code-frame" frameborder="0" height="110" id="frame_Disabled_fieldset" src="https://mdn.mozillademos.org/en-US/docs/Web/HTML/Element/fieldset$samples/Disabled_fieldset?revision=1625975" width="100%"></iframe></p> + +<h2 id="技术概览">技术概览</h2> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="https://wiki.developer.mozilla.org/en-US/docs/HTML/Content_categories">内容目录</a></th> + <td><a href="https://wiki.developer.mozilla.org/en-US/docs/HTML/Content_categories#Flow_content">Flow content</a>, <a href="https://wiki.developer.mozilla.org/en-US/docs/Sections_and_Outlines_of_an_HTML5_document#sectioning_root">sectioning root</a>, <a href="https://wiki.developer.mozilla.org/en-US/docs/HTML/Content_categories#form_listed">listed</a>, <a href="https://wiki.developer.mozilla.org/en-US/docs/HTML/Content_categories#form-associated_content">form-associated</a> element, palpable content.</td> + </tr> + <tr> + <th scope="row">允许的内容</th> + <td>可选的{{HTMLElement("legend")}} 元素，后面是内容流（flow content）</td> + </tr> + <tr> + <th scope="row">标签省略</th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th scope="row">允许的父元素</th> + <td>Any element that accepts <a href="https://wiki.developer.mozilla.org/en-US/docs/HTML/Content_categories#Flow_content">flow content</a>.</td> + </tr> + <tr> + <th scope="row">默认 ARIA role</th> + <td>{{ARIARole("group")}}</td> + </tr> + <tr> + <th scope="row">允许的 ARIA roles</th> + <td>{{ARIARole("radiogroup")}}, {{ARIARole("presentation")}}, {{ARIARole("none")}}</td> + </tr> + <tr> + <th scope="row">DOM 接口</th> + <td>{{domxref("HTMLFieldSetElement")}}</td> + </tr> + </tbody> +</table> + + + +<h2 id="规范">规范</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">规范</th> + <th scope="col">状态</th> + <th scope="col">注释</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'forms.html#the-fieldset-element', '<fieldset>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>Definition of the <code>fieldset</code> element</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'forms.html#the-fieldset-element', '<fieldset>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'interact/forms.html#h-17.10', '<fieldset>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<p>{{Compat("html.elements.fieldset")}}</p> + +<p>[1] 在 IE11 中 disabled 的 fieldset 的子元素并不会全都被 disabled; 相关 Issues: <a href="https://connect.microsoft.com/IE/feedbackdetail/view/817488">IE bug 817488: <code>input[type="file"]</code> not disabled inside disabled <code>fieldset</code></a> and <a href="https://connect.microsoft.com/IE/feedbackdetail/view/962368/can-still-edit-input-type-text-within-fieldset-disabled">IE bug 962368: Can still edit <code>input[type="text"]</code> within <code>fieldset[disabled]</code></a>.</p> + +<h2 id="参见">参见</h2> + +<ul> + <li>{{HTMLElement("legend")}} 元素</li> + <li>{{HTMLElement("input")}} 元素</li> + <li>{{HTMLElement("label")}} 元素</li> + <li>{{HTMLElement("form")}} 元素</li> +</ul> diff --git a/files/zh-cn/web/html/element/figcaption/index.html b/files/zh-cn/web/html/element/figcaption/index.html new file mode 100644 index 0000000000..615e8fc953 --- /dev/null +++ b/files/zh-cn/web/html/element/figcaption/index.html @@ -0,0 +1,125 @@ +--- +title: <figcaption> +slug: Web/HTML/Element/figcaption +tags: + - Element + - HTML + - HTML grouping content +translation_of: Web/HTML/Element/figcaption +--- +<p>{{HTMLRef}}</p> + +<p><strong>HTML <code><figcaption></code> 元素</strong> 是与其相关联的图片的说明/标题，用?于描述其父节点 {{HTMLElement("figure")}} 元素里的其他数据。这意味着 <code><figcaption></code> 在{{HTMLElement("figure")}} 块里是第一个或最后一个。同时 HTML Figcaption 元素是可选的；如果没有该元素，这个父节点的图片只是会没有说明/标题。</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/en-US/docs/HTML/Content_categories" title="HTML/Content_categories">内容分类</a></th> + <td>无</td> + </tr> + <tr> + <th scope="row">允许的内容</th> + <td><a href="/en-US/docs/HTML/Content_categories#Flow_content" title="HTML/Content categories#Flow content">流式内容</a></td> + </tr> + <tr> + <th scope="row">标签省略</th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th scope="row">允许的父元素</th> + <td>{{HTMLElement("figure")}} 元素；<code><figcaption></code> 元素必须是它的第一个或者最后一个子节点。</td> + </tr> + <tr> + <th scope="row">DOM 接口</th> + <td>{{domxref("HTMLElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="属性">属性</h2> + +<p><span style="line-height: 21px;">仅仅包含 </span><a href="https://developer.mozilla.org/en-US/docs/HTML/Global_attributes" style="line-height: 21px;" title="HTML/Global attributes">全局属性</a></p> + +<h2 id="示例">示例</h2> + +<p><code><figcaption></code> 的示例，请查看 {{HTMLElement("figure")}} 页面。</p> + +<h2 id="Specifications" name="Specifications">规范</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'grouping-content.html#the-figcaption-element', '<figcaption>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'grouping-content.html#the-figcaption-element', '<figcaption>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>8</td> + <td>{{CompatGeckoDesktop("2.0")}}</td> + <td>9.0</td> + <td>11.10</td> + <td>5.1</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>3.0</td> + <td>{{CompatGeckoMobile("2.0")}}</td> + <td>9.0</td> + <td>11.0</td> + <td>5.1 (iOS 5.0)</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="另见">另见</h2> + +<ul> + <li>{{HTMLElement("figure")}} 元素。</li> +</ul> diff --git a/files/zh-cn/web/html/element/figure/index.html b/files/zh-cn/web/html/element/figure/index.html new file mode 100644 index 0000000000..5c2e101c81 --- /dev/null +++ b/files/zh-cn/web/html/element/figure/index.html @@ -0,0 +1,161 @@ +--- +title: <figure>：可附标题内容元素 +slug: Web/HTML/Element/figure +tags: + - Element + - HTML + - HTML grouping content + - Reference +translation_of: Web/HTML/Element/figure +--- +<div>{{HTMLRef}}</div> + +<p><strong>HTML <code><figure></code> 元素</strong>代表一段独立的内容, 经常与说明（caption） {{HTMLElement("figcaption")}} 配合使用, 并且作为一个独立的引用单元。当它属于主内容流（main flow）时，它的位置独立于主体。这个标签经常是在主文中引用的图片，插图，表格，代码段等等，当这部分转移到附录中或者其他页面时不会影响到主体。</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/figure.html","tabbed-shorter")}}</div> + +<div class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples </a> and send us a pull request.</div> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/en-US/docs/Web/HTML/Content_categories">内容分类</a></th> + <td><a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">Flow content</a>, <a href="/en-US/docs/Web/Guide/HTML/Using_HTML_sections_and_outlines#Sectioning_roots">sectioning root</a>, palpable content.</td> + </tr> + <tr> + <th scope="row">允许的内容</th> + <td>A {{HTMLElement("figcaption")}} element, followed by <a href="/en-US/docs/HTML/Content_categories#Flow_content">flow content</a>; or flow content followed by a {{HTMLElement("figcaption")}} element; or flow content.</td> + </tr> + <tr> + <th scope="row">标签省略</th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th scope="row">允许的父元素</th> + <td>所有接受 <a href="/en-US/docs/HTML/Content_categories#Flow_content">Flow content</a> 的元素</td> + </tr> + <tr> + <th scope="row">允许的 ARIA roles</th> + <td>{{ARIARole("group")}}, {{ARIARole("presentation")}}</td> + </tr> + <tr> + <th scope="row">DOM 实例</th> + <td>{{domxref("HTMLElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="属性">属性</h2> + +<p>此元素只包含 <a href="https://developer.mozilla.org/en-US/docs/HTML/Global_attributes">全局属性</a>。</p> + +<h2 id="使用说明">使用说明</h2> + +<ul> + <li>通常，<code><figure></code>是图像，插图，图表，代码片段等，在文档的主流程中引用，但可以移动到文档的另一部分或附录而不影响主流程。</li> + <li>作为<a href="/en-US/docs/Web/Guide/HTML/Using_HTML_sections_and_outlines#Sectioning_roots">sectioning root</a>，<code><figure></code>元素的内容轮廓将从文档的主要轮廓中排除。</li> + <li>通过在其中插入{{HTMLElement("figcaption")}}（作为第一个或最后一个子元素），可以将标题与<code><figure></code>元素相关联。图中找到的第一个<code><figcaption></code>元素显示为图的标题。</li> +</ul> + +<h2 id="例子">例子</h2> + +<h3 id="图像">图像</h3> + +<pre class="brush: html"><!-- Just an image --> +<figure> + <img + src="https://developer.cdn.mozilla.net/media/img/mdn-logo-sm.png" + alt="A robotic monster over the letters MDN."> +</figure> + +<!-- Image with a caption --> +<figure> + <img + src="https://developer.cdn.mozilla.net/media/img/mdn-logo-sm.png" + alt="A robotic monster over the letters MDN."> + <figcaption>MDN Logo</figcaption> +</figure> +</pre> + +<div>{{EmbedLiveSample("Images", "100%", 250)}}</div> + +<h3 id="代码段">代码段</h3> + +<pre class="brush: html"><figure> + <figcaption>Get browser details using <code>navigator</code>.</figcaption> + <pre> +function NavigatorExample() { + var txt; + txt = "Browser CodeName: " + navigator.appCodeName; + txt+= "Browser Name: " + navigator.appName; + txt+= "Browser Version: " + navigator.appVersion ; + txt+= "Cookies Enabled: " + navigator.cookieEnabled; + txt+= "Platform: " + navigator.platform; + txt+= "User-agent header: " + navigator.userAgent; +}</pre> +</figure></pre> + +<div>{{EmbedLiveSample("Code_snippets", "100%", 250)}}</div> + +<h3 id="引用内容">引用内容</h3> + +<pre class="brush: html"><figure> + <figcaption><cite>Edsger Dijkstra:</cite></figcaption> + <blockquote>If debugging is the process of removing software bugs, + then programming must be the process of putting them in.</blockquote> +</figure> +</pre> + +<div>{{EmbedLiveSample("Quotations")}}</div> + +<h3 id="诗歌">诗歌</h3> + +<pre class="brush: html"><figure> + <p style="white-space:pre"> +Bid me discourse, I will enchant thine ear, + Or like a fairy trip upon the green, +Or, like a nymph, with long dishevell'd hair, + Dance on the sands, and yet no footing seen: +Love is a spirit all compact of fire, + Not gross to sink, but light, and will aspire.</p> + <figcaption><cite>Venus and Adonis</cite>, + by William Shakespeare</figcaption> +</figure></pre> + +<div>{{EmbedLiveSample("Poems", "100%", 250)}}</div> + +<h2 id="Specifications" name="Specifications">规范</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">规范</th> + <th scope="col">状态</th> + <th scope="col">备注</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'semantics.html#the-figure-element', '<figure>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'grouping-content.html#the-figure-element', '<figure>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + + + +<p>{{Compat("html.elements.figure")}}</p> + +<h2 id="参见">参见</h2> + +<ul> + <li>The {{HTMLElement("figcaption")}} element.</li> +</ul> diff --git a/files/zh-cn/web/html/element/font/index.html b/files/zh-cn/web/html/element/font/index.html new file mode 100644 index 0000000000..326372c54e --- /dev/null +++ b/files/zh-cn/web/html/element/font/index.html @@ -0,0 +1,47 @@ +--- +title: <font> +slug: Web/HTML/Element/font +translation_of: Web/HTML/Element/font +--- +<div>{{Deprecated_header}}</div> + +<h2 id="概要">概要</h2> + +<p><em>HTML Font 元素</em>（<code><font></code>）定义了该内容的字体大小、顏色与表现。</p> + +<div class="note"> +<p><em>注意：</em></p> + +<p><strong>不要使用这个元素！</strong>尽管它在 HTML 3.2 规范化，但在 HTML 4.01 中已废除，因为该元件只和样式相关，接着在 HTML5 过时。</p> + +<p>从 HTML 4 开始，HTML 不能在 {{HTMLElement("style")}} 元素，或各元素 <strong>style</strong> 属性以外，表现任何样式信息。今后的网页开发，样式只能使用 <a href="/zh-TW/docs/CSS" title="CSS">CSS</a> 来编写。</p> + +<p>{{HTMLElement("font")}} 元素的行为，可以通过 <a href="/zh-TW/docs/CSS" title="CSS">CSS</a> 属性实现，以及更好控制。</p> +</div> + +<h2 id="属性">属性</h2> + +<p>如同其他 HTML 元素，这个元素支持<a href="/en-US/docs/HTML/Global_attributes" title="HTML/Global attributes">全局属性</a>。</p> + +<dl> + <dt>{{htmlattrdef("color")}}</dt> + <dd>这个属性使用颜色名称或是十六进制的 #RRGGBB 格式，来设置文字的颜色。</dd> + <dt>{{htmlattrdef("face")}}</dt> + <dd>这个属性列出了一个或多个逗号分隔的字体名称。 默认样式中的文档文字，会使用客户端浏览器所支持的，第一个字体风格来渲染。如果本地系统中并没有安装列出的字体，浏览器会使用系统预设的均衡（proportional）或等宽（fixed-width）字体。</dd> + <dt>{{htmlattrdef("size")}}</dt> + <dd>这个属性使用数字或相对值指定文字大小。数字在最小的7到最大的7之间，默认值为3。也可以用诸如 <span style="font-family: courier new;">+2</span> 或 <span style="font-family: courier new;">-3</span> 的相对值指定，这会将其设置为，相对于 {{HTMLElement("basefont")}} 元素 {{htmlattrxref("size", "basefont")}}属性的值，或者如果不存在，则是相对于 <span style="font-family: courier new;">3</span> 也就是默认值的值。</dd> +</dl> + +<h2 id="DOM_接口">DOM 接口</h2> + +<p>这个元素实现了 {{domxref("HTMLFontElement")}} 接口。</p> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<h3 id="Gecko_注解">Gecko 注解</h3> + +<p>在 Gecko 15.0 {{geckoRelease("15.0")}} 之前的版本， Gecko 并不能正确处理 <code>size</code> 属性的超出范围的数值。对于相对大小，它并不接受超出范围的数值。现在，它已经能够将其正确截断为 -10 到 +10 之内的范围。</p> + +<p>Gecko 15.0 还移除了 <code><font></code> 元素对 <code>font-weight</code> 与 <code>point-size</code> 属性的支持：这些非标准属性只受 Gecko 引擎支持。</p> + +<div>{{HTMLRef}}</div> diff --git a/files/zh-cn/web/html/element/footer/index.html b/files/zh-cn/web/html/element/footer/index.html new file mode 100644 index 0000000000..537dd2ed03 --- /dev/null +++ b/files/zh-cn/web/html/element/footer/index.html @@ -0,0 +1,84 @@ +--- +title: <footer> +slug: Web/HTML/Element/footer +tags: + - Element + - HTML + - HTML sections +translation_of: Web/HTML/Element/footer +--- +<p>{{HTMLRef}}</p> + +<p><strong>HTML <footer> 元素</strong>表示最近一个<a href="/en-US/docs/Web/Guide/HTML/Sections_and_Outlines_of_an_HTML5_document#Defining_Sections_in_HTML5">章节内容</a>或者<a href="/en-US/docs/Web/Guide/HTML/Sections_and_Outlines_of_an_HTML5_document#Sectioning_root" title="Sections and Outlines of an HTML5 document#Sectioning root">根节点</a>（sectioning root ）元素的页脚。一个页脚通常包含该章节作者、版权数据或者与文档相关的链接等信息。</p> + +<p> </p> + +<p>{{EmbedInteractiveExample("pages/tabbed/footer.html", "tabbed-standard")}}</p> + +<p> </p> + +<ul class="htmlelt"> + <li><dfn><a href="/en-US/docs/HTML/Content_categories" title="HTML/Content_categories">内容分类</a></dfn> <a href="/zh-CN/docs/HTML/Content_categories#Flow_content" title="HTML/Content categories#Flow content">流内容</a>, 可触内容。</li> + <li><dfn>允许的内容</dfn> <a href="/zh-CN/docs/HTML/Content_categories#Flow_content" title="HTML/Content categories#Flow content">流内容</a>，但是不能包含<footer>或者{{HTMLElement("header")}}。</li> + <li><dfn>标签省略</dfn> {{no_tag_omission}}</li> + <li><dfn>允许的父元素</dfn>任何接收<a href="/zh-CN/docs/HTML/Content_categories#Flow_content" title="HTML/Content categories#Flow content">流内容</a>的元素。注意<footer>元素必须不能是 {{HTMLElement("address")}}, {{HTMLElement("header")}} 或者另一个<code><footer></code> 元素的后代元素。</li> + <li><dfn>DOM 接口</dfn> {{domxref("HTMLElement")}}</li> +</ul> + +<h2 id="属性">属性</h2> + +<p>该元素仅包含 <a href="/en-US/docs/HTML/Global_attributes">全局属性</a>。</p> + +<h2 id="使用说明">使用说明</h2> + +<ul> + <li><footer>元素内的作者信息应包含在{{HTMLElement("address")}} 元素中。</li> + <li><footer>元素不是章节内容，因此在<a href="/en-US/docs/Sections_and_Outlines_of_an_HTML5_document" title="Sections and Outlines of an HTML5 document">outline</a>中不能包含新的章节。</li> +</ul> + +<h2 id="例子">例子</h2> + +<pre class="brush: html"><footer> + Some copyright info or perhaps some author info for an &lt;article&gt;? +</footer> +</pre> + +<h2 id="Specifications" name="Specifications">规范</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">规范</th> + <th scope="col">状态</th> + <th scope="col">备注</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'sections.html#the-footer-element', '<footer>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'sections.html#the-footer-element', '<footer>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<p> </p> + +<p>{{Compat("html.elements.footer")}}</p> + +<p> </p> + +<h2 id="参见">参见</h2> + +<ul> + <li>其他section相关的元素: {{HTMLElement("body")}}, {{HTMLElement("nav")}}, {{HTMLElement("article")}}, {{HTMLElement("aside")}}, {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}}, {{HTMLElement("hgroup")}}, {{HTMLElement("header")}}, {{HTMLElement("section")}}, {{HTMLElement("address")}};</li> + <li class="last"><a href="/en-US/docs/Sections_and_Outlines_of_an_HTML5_document" title="Sections and Outlines of an HTML5 document">Sections and outlines of an HTML5 document</a>.</li> + <li><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/Contentinfo_role">ARIA: Contentinfo role</a></li> +</ul> diff --git a/files/zh-cn/web/html/element/form/index.html b/files/zh-cn/web/html/element/form/index.html new file mode 100644 index 0000000000..e7c0e43048 --- /dev/null +++ b/files/zh-cn/web/html/element/form/index.html @@ -0,0 +1,215 @@ +--- +title: form +slug: Web/HTML/Element/form +tags: + - Forms + - HTML + - HTML表单 + - Web + - 元素 + - 参考 + - 表单 +translation_of: Web/HTML/Element/form +--- +<div>{{HTMLRef}}</div> + +<p><strong>HTML <code><form></code> 元素</strong>表示文档中的一个区域，此区域包含交互控件，用于向 Web 服务器提交信息。</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/form.html", "tabbed-standard")}}</div> + +<div class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples </a> and send us a pull request.</div> + +<p>可以用 {{cssxref(':valid')}} 和 {{cssxref(':invalid')}} CSS 伪类来设置 <code><form></code> 元素的样式，此时样式的表现取决于表单中的 {{domxref("HTMLFormElement.elements", "elements")}} 是否有效。</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/en-US/docs/Web/HTML/Content_categories">内容类别</a></th> + <td><a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">Flow content</a>, palpable content</td> + </tr> + <tr> + <th scope="row"><dfn>可包含内容</dfn></th> + <td><a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">Flow content</a>, but not containing <code><form></code> elements</td> + </tr> + <tr> + <th scope="row"><dfn>标签省略</dfn></th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th scope="row">允许的父级元素</th> + <td>可以是HTML的<a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">任何标签</a></td> + </tr> + <tr> + <th scope="row">Implicit ARIA role</th> + <td><code><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/Form_Role">form</a></code> if the form has an <a href="https://www.w3.org/TR/accname-1.1/#dfn-accessible-name">accessible name</a>, otherwise <a href="https://www.w3.org/TR/html-aria/#dfn-no-corresponding-role">no corresponding role</a></td> + </tr> + <tr> + <th scope="row">Permitted ARIA roles</th> + <td><code><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/Search_role">search</a></code>, {{ARIARole("group")}}, {{ARIARole("presentation")}}</td> + </tr> + <tr> + <th scope="row">DOM 接口</th> + <td>{{domxref("HTMLFormElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="属性">属性</h2> + +<p>此元素拥有 <a href="https://developer.mozilla.org/en-US/docs/HTML/Global_attributes">全局属性</a>。</p> + +<dl> + <dt>{{htmlattrdef("accept")}}{{obsolete_inline}}</dt> + <dd>一个逗号分隔的列表，包括服务器能接受的内容类型。 + <div class="note"><strong>此属性已在 HTML5 中被移除并且不再被使用。</strong>作为替代，可以使用 <code><input type=file></code> 元素中的<span class="st"> {{htmlattrxref("accept", "input")}}</span> 属性。</div> + </dd> + <dt>{{htmlattrdef("accept-charset")}}</dt> + <dd>一个空格分隔或逗号分隔的列表，此列表包括了服务器支持的字符编码。浏览器以这些编码被列举的顺序使用它们。默认值是一个保留字符串 <code>"UNKNOWN"</code>。此字符串指的是，和包含此表单元素的文档相同的编码。<br> + 在之前版本的 HTML 中，不同的字符编码可以用空格或逗号分隔。在 HTML5 中，只有空格可以允许作为分隔符。</dd> + <dt>{{htmlattrdef("autocapitalize")}} {{non-standard_inline}}</dt> + <dd>这是一个被 iOS Safari 使用的非标准属性。当用户在一些表单的文本后代控件中，输入/编辑一些文本值时，此属性控制了这些文本值的首字母是否大写或者使用其他的大写样式。如果 <code>autocapitalize</code> 属性在某个单独的表单后代控件被指定的话，那么此单独的设定会覆盖原来表单范围内的 <code>autocapitalize</code> 设定。默认值为 <code>sentences</code>。可以选择的值如下： + <ul> + <li><code>none</code>：完全禁用自动首字母大写。</li> + <li><code>sentences</code>：自动对每句话首字母大写。</li> + <li><code>words</code>：自动对每个单词首字母大写。</li> + <li><code>characters</code>：自动大写所有的字母。</li> + </ul> + </dd> + <dt>{{htmlattrdef("autocomplete")}}</dt> + <dd>用于指示 input 元素是否能够拥有一个默认值，此默认值是由浏览器自动补全的。此设定可以被属于此表单的子元素的 <code>autocomplete</code> 属性覆盖。 可能的值有： + <ul> + <li><code>off</code>：浏览器可能不会自动补全条目（在疑似登录表单中，浏览器倾向于忽略该值，而提供密码自动填充功能，参见 <a href="https://wiki.developer.mozilla.org/zh-CN/docs/Web/Security/Securing_your_site/Turning_off_form_autocompletion#禁用自动填充">自动填充属性和登录</a>）</li> + <li><code>on</code>：浏览器可自动补全条目</li> + </ul> + + + </dd> + <dt>{{htmlattrdef("name")}}</dt> + <dd>表单的名称。HTML 4中不推荐（应使用 <code>id</code>）。在 HTML 5 中，该值必须是所有表单中独一无二的，而且不能是空字符串。</dd> + <dt>{{htmlattrdef("rel")}}</dt> + <dd>根据 value 创建一个超链接或Creates a hyperlink or annotation depending on the value, see the <a href="https://wiki.developer.mozilla.org/docs/Web/HTML/Attributes/rel">{{htmlattrdef("rel")}}</a> attribute for details.</dd> +</dl> + +<h3 id="关于提交表单的属性">关于提交表单的属性</h3> + +<p>下列属性控制提交表单时的行为。</p> + +<dl> + <dt>{{htmlattrdef("action")}}</dt> + <dd>处理表单提交的 URL。这个值可被 {{HTMLElement("button")}}、<code><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/HTML/Element/input/submit"><input type="submit"></a></code> 或 <code><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/HTML/Element/input/image"><input type="image"></a></code> 元素上的 {{htmlattrxref("formaction", "button")}} 属性覆盖。</dd> +</dl> + +<dl> + <dt>{{htmlattrdef("enctype")}}</dt> + <dd>当 <code>method</code> 属性值为 <code>post</code> 时，<code>enctype</code> 就是将表单的内容提交给服务器的 <a href="http://en.wikipedia.org/wiki/Mime_type">MIME 类型</a> 。可能的取值有： + <ul> + <li><code>application/x-www-form-urlencoded</code>：未指定属性时的默认值。</li> + <li><code>multipart/form-data</code>：当表单包含 <code>type=file</code> 的 {{HTMLElement("input")}} 元素时使用此值。</li> + <li><code>text/plain</code>：出现于 HTML5，用于调试。</li> + </ul> + + <p>这个值可被 {{HTMLElement("button")}}、<code><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/HTML/Element/input/submit"><input type="submit"></a></code> 或 <code><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/HTML/Element/input/image"><input type="image"></a></code> 元素上的 {{htmlattrxref("formaction", "button")}} 属性覆盖。</p> + </dd> + <dt>{{htmlattrdef("method")}}</dt> + <dd>浏览器使用这种 <a href="/en-US/docs/HTTP">HTTP</a> 方式来提交 表单. 可能的值有： + <ul> + <li><code>post</code>：指的是 HTTP <a href="http://www.w3.org/Protocols/rfc2616/rfc2616-sec9.html#sec9.5">POST 方法</a>；表单数据会包含在表单体内然后发送给服务器.</li> + <li><code>get</code>：指的是 HTTP <a href="http://www.w3.org/Protocols/rfc2616/rfc2616-sec9.html#sec9.3">GET 方法</a>；表单数据会附加在 <code>action</code> 属性的 URL 中，并以 '?' 作为分隔符，<a href="https://wiki.developer.mozilla.org/en-US/docs/Glossary/Idempotent">没有副作用</a> 时使用这个方法。</li> + <li><code>dialog</code>：如果表单在 {{HTMLElement("dialog")}} 元素中，提交时关闭对话框。</li> + </ul> + + <p>此值可以被 {{HTMLElement("button")}}、<code><a href="/zh-CN/docs/Web/HTML/Element/input/submit"><input type="submit"></a></code> 或 <code><a href="/zh-CN/docs/Web/HTML/Element/input/image"><input type="image"></a></code> 元素中的 {{htmlattrxref("formmethod", "button")}} 属性覆盖。</p> + </dd> + <dt>{{htmlattrdef("novalidate")}}</dt> + <dd>此布尔值属性表示提交表单时不需要验证表单。 如果没有声明该属性 （因此表单需要通过验证）。该属性可以被表单中的 {{HTMLElement("button")}}、<code><a href="/zh-CN/docs/Web/HTML/Element/input/submit"><input type="submit"></a></code> 或 <code><a href="/zh-CN/docs/Web/HTML/Element/input/image"><input type="image"></a></code> 元素中的 {{htmlattrxref("formnovalidate", "button")}} 属性覆盖。</dd> + <dt>{{htmlattrdef("target")}}</dt> + <dd>表示在提交表单之后，在哪里显示响应信息。在 HTML 4 中, 这是一个 frame 的名字/关键字对。在 HTML5 里，这是一个<em>浏览上下文</em> 的名字/关键字（如标签页、窗口或 iframe）。下述关键字有特别含义： + <ul> + <li><code>_self</code>：默认值。在相同浏览上下文中加载。</li> + <li><code>_blank</code>：在新的未命名的浏览上下文中加载。</li> + <li><code>_parent</code>：在当前上下文的父级浏览上下文中加载，如果没有父级，则与 _self 表现一致。</li> + <li><code>_top</code>：在最顶级的浏览上下文中（即当前上下文的一个没有父级的祖先浏览上下文），如果没有父级，则与 _self 表现一致。</li> + </ul> + + <p>此值可以被 {{HTMLElement("button")}}、 <code><a href="/zh-CN/docs/Web/HTML/Element/input/submit"><input type="submit"></a></code> 或 <code><a href="/zh-CN/docs/Web/HTML/Element/input/image"><input type="image"></a></code> 元素中的 {{htmlattrxref("formtarget", "button")}} 属性覆盖。</p> + </dd> +</dl> + +<h2 id="Examples" name="Examples">示例</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="notranslate"><!-- Form which will send a GET request to the current URL --> +<form> + <label>Name: + <input name="submitted-name" autocomplete="name"> + </label> + <button>Save</button> +</form> + +<!-- Form which will send a POST request to the current URL --> +<form method="post"> + <label>Name: + <input name="submitted-name" autocomplete="name"> + </label> + <button>Save</button> +</form> + +<!-- Form with fieldset, legend, and label --> +<form method="post"> + <fieldset> + <legend>Title</legend> + <label><input type="radio" name="radio"> Select me</label> + </fieldset> +</form></pre> + +<p><iframe class="live-sample-frame sample-code-frame" frameborder="0" height="110" id="frame_Examples" src="https://mdn.mozillademos.org/en-US/docs/Web/HTML/Element/form$samples/Examples?revision=1623519" width="100%"></iframe></p> + +<h2 id="规范">规范</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">规范</th> + <th scope="col">状态</th> + <th scope="col">备注</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'forms.html#the-form-element', '<form>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'forms.html#the-form-element', '<form>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'interact/forms.html#h-17.3', '<form>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + + + +<p>{{Compat("html.elements.form")}}</p> + +<h3 id="Google_Chrome_备注"><label>Google Chrome 备注</label></h3> + +<p>对于自动完成的请求，Google Chrome UI 是不一样的，取决于在 <code>input</code> 元素及其表单上，<strong><code>autocomplete</code></strong> 是否设为 <code>off</code> 。特别是，如果表单的 <code>autocomplete</code> 设为 <code>off</code> ，并且它的输入元素的 <code>autocomplete</code> 字段<strong>没有</strong>设置，如果用户请求该输入元素的自动填充建议，Chrome 就可能展示一个消息，“自动完成已关闭”。另一方面，如果表单和输入元素的 <code>autocomplete</code> 都设为 <code>off</code>，浏览器就不会展示此消息。出于此原因，你应该将每个拥有自定义自动完成的输入元素的 <code>autocomplete</code> 设为 <code>off</code> 。</p> + +<h2 id="参见">参见</h2> + +<ul> + <li><a href="/en-US/docs/Web/Guide/HTML/Forms">HTML 表单指南</a></li> + <li>还有其他的一些元素也用于创建表单：{{HTMLElement("button")}}、{{HTMLElement("datalist")}}、{{HTMLElement("fieldset")}}、{{HTMLElement("input")}},{{HTMLElement("keygen")}}、{{HTMLElement("label")}}、{{HTMLElement("legend")}}、{{HTMLElement("meter")}}、{{HTMLElement("optgroup")}}、{{HTMLElement("option")}}、{{HTMLElement("output")}}、{{HTMLElement("progress")}}、{{HTMLElement("select")}}、{{HTMLElement("textarea")}}</li> + <li>Getting a list of the elements in the form: {{domxref("HTMLFormElement.elements")}}</li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Form_Role">ARIA: Form role</a></li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Search_role">ARIA: Search role</a></li> +</ul> diff --git a/files/zh-cn/web/html/element/frame/index.html b/files/zh-cn/web/html/element/frame/index.html new file mode 100644 index 0000000000..3b72727464 --- /dev/null +++ b/files/zh-cn/web/html/element/frame/index.html @@ -0,0 +1,50 @@ +--- +title: <frame> +slug: Web/HTML/Element/frame +translation_of: Web/HTML/Element/frame +--- +<div>{{Deprecated_header}}</div> + +<h2 id="概述">概述</h2> + +<p><code><frame></code> 是 HTML 元素，它定义了一个特定区域，另一个 HTML 文档可以在里面展示。帧应该在 {{HTMLElement("frameset")}} 中使用。</p> + +<p><code><frame> </code>的使用不应提倡，因为有一些缺点，比如性能问题，以及使用屏幕阅读器的用户缺少可访问性。比起 <code><frame></code>，{{HTMLElement("iframe")}} 更应该提倡。</p> + +<h2 id="属性">属性</h2> + +<p>就像其他 HTML 元素一样，这个元素支持 <a href="/en-US/docs/HTML/Global_attributes" title="HTML/Global attributes">全局属性</a>。</p> + +<dl> + <dt>{{htmlattrdef("src")}}</dt> + <dd> 这个属性指定了由帧展示的文档。</dd> + <dt>{{htmlattrdef("name")}}</dt> + <dd>这个属性用于给帧添加标签。如果没有标签，所有链接都会在它们所在的帧中打开。</dd> + <dt>{{htmlattrdef("noresize")}}</dt> + <dd>这个属性避免让用户改变帧的大小。</dd> + <dt>{{htmlattrdef("scrolling")}}</dt> + <dd>这个属性定义了滚动条的存在。如果不使用这个属性，浏览器会按需放置滚动条。有两个选择：<code>"yes"</code> 用于展示滚动条，即使是多余的；<code>"no"</code> 用于不展示滚动条，即使它是必要的。</dd> + <dt>{{htmlattrdef("marginheight")}}</dt> + <dd>这个属性定义了帧之间的边距有多高。</dd> + <dt>{{htmlattrdef("marginwidth")}}</dt> + <dd>这个属性定义了帧之间的边距有多宽。</dd> + <dt>{{htmlattrdef("frameborder")}}</dt> + <dd>这个属性允许你为帧添加边框。</dd> +</dl> + +<h2 id="示例">示例</h2> + +<pre class="brush: html"><frameset cols="50%,50%"> + <frame src="https://developer.mozilla.org/en/HTML/Element/iframe" /> + <frame src="https://developer.mozilla.org/en/HTML/Element/frame" /> +</frameset> +</pre> + +<h2 id="另见">另见</h2> + +<ul> + <li>{{HTMLElement("frameset")}}</li> + <li>{{HTMLElement("iframe")}}</li> +</ul> + +<p>{{HTMLRef}}</p> diff --git a/files/zh-cn/web/html/element/frameset/index.html b/files/zh-cn/web/html/element/frameset/index.html new file mode 100644 index 0000000000..fca2dc7107 --- /dev/null +++ b/files/zh-cn/web/html/element/frameset/index.html @@ -0,0 +1,51 @@ +--- +title: <frameset> +slug: Web/HTML/Element/frameset +tags: + - Deprecated + - Element + - HTML + - Reference + - Web +translation_of: Web/HTML/Element/frameset +--- +<div>{{Deprecated_header}}</div> + +<h2 id="概述">概述</h2> + +<p><code><frameset></code> 是一个用于包含 {{HTMLElement("frame")}} 的 HTML 元素。</p> + +<div class="note"><strong>注意:</strong> 现在不鼓励使用 frame，而是用{{HTMLElement("iframe")}}。现今的网站一般都不使用 frame。</div> + +<h2 id="属性">属性</h2> + +<p>像所有其他的HTML元素一样，这个元素支持<a href="/en-US/HTML/Global_attributes" title="HTML/Global attributes">全局属性</a>。</p> + +<dl> + <dt>{{htmlattrdef("cols")}}</dt> + <dd>这个属性指定一个框架集中列的数目和尺寸。</dd> + <dt>{{htmlattrdef("rows")}}</dt> + <dd>这个属性指定一个框架集中行的数目和尺寸。</dd> +</dl> + +<h2 id="例子">例子</h2> + +<pre class="brush:html"><frameset cols="50%,50%"> + <frame src="https://developer.mozilla.org/en/HTML/Element/frameset" /> + <frame src="https://developer.mozilla.org/en/HTML/Element/frame" /> +</frameset></pre> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<div class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</div> + +<p>{{Compat("html.elements.frameset")}}</p> + +<h2 id="参见">参见</h2> + +<ul> + <li>{{HTMLElement("frame")}}</li> + <li>{{HTMLElement("iframe")}}</li> +</ul> + +<p>{{HTMLRef}}</p> diff --git a/files/zh-cn/web/html/element/head/index.html b/files/zh-cn/web/html/element/head/index.html new file mode 100644 index 0000000000..338521df1f --- /dev/null +++ b/files/zh-cn/web/html/element/head/index.html @@ -0,0 +1,92 @@ +--- +title: <head> +slug: Web/HTML/Element/head +tags: + - HTML + - HTML 文档元数据 + - Web + - head + - 元素 + - 参考 +translation_of: Web/HTML/Element/head +--- +<h2 id="概述">概述</h2> + +<p><strong>HTML head 元素 </strong>规定文档相关的配置信息（元数据），包括文档的标题，引用的文档样式和脚本等。</p> + +<ul class="htmlelt"> + <li><dfn><a href="/en-US/docs/HTML/Content_categories" title="HTML/Content_categories">内容类别</a></dfn> 无</li> + <li><dfn>允许内容</dfn>至少包含一个{{HTMLElement("title")}} 元素来指定文档的标题信息，除非标题已经从更高等级协议中指定（{{HTMLElement("iframe")}} ）。</li> + <li><dfn>允许父元素</dfn>{{HTMLElement("html")}} 元素</li> + <li><dfn>DOM 接口</dfn> {{domxref("HTMLHeadElement")}}</li> +</ul> + +<h2 id="属性">属性</h2> + +<p><span style="line-height: 21px;">该元素包含</span><a href="https://developer.mozilla.org/zh-CN/docs/HTML/Global_attributes" style="line-height: 21px;" title="HTML/Global attributes">全局属性</a><span style="line-height: 21px;">。</span></p> + +<dl> + <dt>{{htmlattrdef("profile")}} {{HTMLVersionInline(4)}} only, {{obsolete_inline}} in {{HTMLVersionInline(5)}}</dt> + <dd>一个由空格分隔的 URL 列表，这些 URL 包含着有关页面的配置信息。</dd> +</dl> + +<h2 id="示例">示例</h2> + +<pre class="brush: html"><html> + <head> + <title>文档标题</title> + </head> +</html> +</pre> + +<h2 id="附注">附注</h2> + +<p>如果在文档中忽略了 <code><head></code> 标签，则大部分浏览器会自动创建一个 <code><head></code> 元素。<a class="external" href="http://www.stevesouders.com/blog/2010/05/12/autohead-my-first-browserscope-user-test/" title="http://www.stevesouders.com/blog/2010/05/12/autohead-my-first-browserscope-user-test/">当然，有一些不会</a>。<br> + 下面这些浏览器经测试不会自动创建一个 head 元素：Android <=1.6, iPhone <=3.1.3, Nokia 90, Opera <=9.27, and Safari <=3.2.1。</p> + +<h2 id="Specifications" name="Specifications">规范</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'semantics.html#the-head-element', '<head>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>自上一次快照后未改变</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'document-metadata.html#the-head-element', '<head>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>废弃 <code>profile</code></td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/global.html#h-7.4.1', '<head>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">浏览器兼容性</h2> + +<p>{{Compat("html.elements.head")}}</p> + +<h2 id="相关链接">相关链接</h2> + +<ul> + <li> + <div id="main"> + <div class="main_right"> + <div class="target_lang" id="targetlang" style="BACKGROUND: none transparent scroll repeat 0% 0%;">可用于<head>元素内的元素有: {{HTMLElement("title")}}, {{HTMLElement("base")}}, {{HTMLElement("link")}}, {{HTMLElement("style")}}, {{HTMLElement("meta")}}, {{HTMLElement("script")}}, {{HTMLElement("noscript")}}, {{HTMLElement("command")}}</div> + </div> + </div> + </li> +</ul> + +<div>{{HTMLRef}}</div> diff --git a/files/zh-cn/web/html/element/header/index.html b/files/zh-cn/web/html/element/header/index.html new file mode 100644 index 0000000000..61041c1b18 --- /dev/null +++ b/files/zh-cn/web/html/element/header/index.html @@ -0,0 +1,113 @@ +--- +title: <header> +slug: Web/HTML/Element/header +tags: + - HTML + - HTML sections + - 元素 +translation_of: Web/HTML/Element/header +--- +<div>{{HTMLRef}}</div> + +<p><strong>HTML <code><header></code> 元素</strong>用于展示介绍性内容，通常包含一组介绍性的或是辅助导航的实用元素。它可能包含一些标题元素，但也可能包含其他元素，比如 Logo、搜索框、作者名称，等等。</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/header.html", "tabbed-standard")}}</div> + +<p class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples </a> and send us a pull request.</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/zh-CN/docs/HTML/Content_categories">内容类型</a></th> + <td><a href="/zh-CN/docs/HTML/Content_categories#Flow_content">Flow content</a>，palpable content。</td> + </tr> + <tr> + <th scope="row">许可内容</th> + <td><a href="/zh-CN/docs/HTML/Content_categories#Flow_content">Flow content</a>，但是不允许 <code><header></code> 或{{HTMLElement("footer")}} 成为子元素</td> + </tr> + <tr> + <th scope="row">标记省略</th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th scope="row">允许的父元素</th> + <td>任何接受 <a href="/zh-CN/docs/HTML/Content_categories#Flow_content">flow content</a> 的元素。注意 <code><header></code> 元素不能作为 {{HTMLElement("address")}}、{{HTMLElement("footer")}} 或另一个 {{HTMLElement("header")}} 元素的子元素。</td> + </tr> + <tr> + <th scope="row">允许的 ARIA 角色</th> + <td>{{ARIARole("group")}}，{{ARIARole("presentation")}}</td> + </tr> + <tr> + <th scope="row">DOM 接口</th> + <td>{{domxref("HTMLElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="使用提示">使用提示</h2> + +<p><code><header></code> 元素不是分段内容，因此不会往 <a href="/zh-CN/docs/Web/Guide/HTML/Sections_and_Outlines_of_an_HTML5_document">大纲</a> 中引入新的段落。也就是说，<code><header></code> 元素通常用于包含周围部分的标题（<code>h1</code> 至 <code>h6</code> 元素），但这<strong>不是</strong>必需的。</p> + +<h2 id="属性">属性</h2> + +<p>此元素仅拥有 <a href="/zh-CN/docs/HTML/Global_attributes"> 全局属性</a>。</p> + +<h2 id="示例">示例</h2> + +<h3 id="页面的_Header">页面的 Header</h3> + +<pre class="brush: html"><header> + <h1>主页标题</h1> + <img src="mdn-logo-sm.png" alt="MDN logo"> +</header> + +</pre> + +<h3 id="文章的_Header">文章的 Header</h3> + +<pre class="brush: html"><article> + <header> + <h2>The Planet Earth</h2> + <p>Posted on Wednesday, 4 October 2017 by Jane Smith</p> + </header> + <p>We live on a planet that's blue and green, with so many things still unseen.</p> + <p><a href="https://janesmith.com/the-planet-earth/">Continue reading....</a></p> +</article> +</pre> + +<h2 id="规范">规范</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">规范</th> + <th scope="col">状态</th> + <th scope="col">备注</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'semantics.html#the-header-element', '<header>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'sections.html#the-header-element', '<header>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + + + +<p>{{Compat("html.elements.header")}}</p> + +<h2 id="参见">参见</h2> + +<ul> + <li>Others section-related elements: {{HTMLElement("body")}}, {{HTMLElement("nav")}}, {{HTMLElement("article")}}, {{HTMLElement("aside")}}, {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}}, {{HTMLElement("hgroup")}}, {{HTMLElement("footer")}}, {{HTMLElement("section")}}, {{HTMLElement("address")}};</li> + <li class="last"><a class="deki-ns current" href="/en-US/docs/Web/Guide/HTML/Sections_and_Outlines_of_an_HTML5_document">Sections and outlines of an HTML5 document</a>.</li> +</ul> diff --git a/files/zh-cn/web/html/element/heading_elements/index.html b/files/zh-cn/web/html/element/heading_elements/index.html new file mode 100644 index 0000000000..8c1146e2f0 --- /dev/null +++ b/files/zh-cn/web/html/element/heading_elements/index.html @@ -0,0 +1,255 @@ +--- +title: <h1>–<h6>：HTML 区域标题元素 +slug: Web/HTML/Element/Heading_Elements +tags: + - Element + - HTML + - HTML sections + - Web + - 元素 + - 标题 +translation_of: Web/HTML/Element/Heading_Elements +--- +<p id="Summary"><span class="seoSummary"><strong>HTML <code><h1></code>–<code><h6></code> 标题(Heading)元素</strong>呈现了六个不同的级别的标题，<code><h1></code> 级别最高，而 <code><h6></code> 级别最低。</span></p> + +<div>{{EmbedInteractiveExample("pages/tabbed/h1-h6.html", "tabbed-standard")}}</div> + +<p class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples </a> and send us a pull request.</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/zh-CN/docs/Web/HTML/Content_categories">内容类别</a></th> + <td><a href="/zh-CN/docs/Web/Guide/HTML/Content_categories#流式元素（Flow_content）">流式内容</a>， 标题内容，可触知的内容。</td> + </tr> + <tr> + <th scope="row">允许内容</th> + <td><a href="/zh-CN/docs/Web/HTML/Content_categories#Phrasing_content">短语内容</a></td> + </tr> + <tr> + <th scope="row">标签省略</th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th scope="row">允许的父元素</th> + <td>任何接受流内容的元素；不要把它作为 {{HTMLElement("hgroup")}} 元素的子元素, 这种做法已经被废弃了。</td> + </tr> + <tr> + <th scope="row">允许的 ARIA roles</th> + <td>{{ARIARole("tab")}}, {{ARIARole("presentation")}}</td> + </tr> + <tr> + <th scope="row">DOM 接口</th> + <td>{{domxref("HTMLHeadingElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="属性">属性</h2> + +<p>该元素包含所有<a href="/zh-CN/docs/Web/HTML/Global_attributes">全局特性</a>。</p> + +<div class="blockIndicator note"> +<p>align属性已废弃；不要继续使用它。</p> +</div> + +<h2 id="使用要点">使用要点</h2> + +<ul> + <li>用户代理可以使用标题信息，例如自动构建文档的目录。</li> + <li>不要为了减小标题的字体而使用低级别的标题， 而是使用 <a href="/en-US/docs/Web/CSS">CSS</a> {{cssxref("font-size")}} 属性。</li> + <li>避免跳过某级标题：始终要从 <code><h1></code> 开始，接下来依次使用 <code><h2></code> 等等。</li> + <li>使用 {{HTMLElement("section")}} 元素时，为了方便起见，你应该考虑避免在同一个页面上重复使用 <h1>，<h1> 应被用于表示页面的标题，其他的标题当从 <h2> 开始。在使用 section 时，应当为每个 section 都使用一个 <code><h2></code>。详情请参考 {{SectionOnPage("/zh-CN/docs/Web/Guide/HTML/Using_HTML_sections_and_outlines", "Defining sections")}}。</li> +</ul> + +<p> </p> + +<h2 id="示例">示例</h2> + +<h3 id="所有标题">所有标题</h3> + +<p>下面的代码展示了所有可用的标题级别。</p> + +<pre class="brush: html"><h1>一级标题</h1> +<h2>二级标题</h2> +<h3>三级标题</h3> +<h4>四级标题</h4> +<h5>五级标题</h5> +<h6>六级标题</h6> +</pre> + +<p>下面是这些代码的结果：</p> + +<p>{{ EmbedLiveSample('All_headings', '280', '300', '') }}</p> + +<h3 id="示例页面">示例页面</h3> + +<p>下面的代码展示了几个具有部分内容的标题。</p> + +<pre class="brush: html"><h1>Heading elements</h1> +<h2>Summary</h2> +<p>Some text here...</p> + +<h2>Examples</h2> +<h3>Example 1</h3> +<p>Some text here...</p> + +<h3>Example 2</h3> +<p>Some text here...</p> + +<h2>See also</h2> +<p>Some text here...</p> +</pre> + +<p>下面是代码的运行结果：</p> + +<p>{{ EmbedLiveSample('Example_page', '280', '480', '') }}</p> + +<h2 id="可访问性问题">可访问性问题</h2> + +<h3 id="导航">导航</h3> + +<p>A common navigation technique for users of screen reading software is jumping from heading to heading to quickly determine the content of the page. Because of this, it is important to not skip one or more heading levels. Doing so may create confusion, as the person navigating this way may be left wondering where the missing heading is.</p> + +<h4 id="错误用法">错误用法</h4> + +<pre class="brush: html example-bad"><h1>Heading level 1</h1> +<h3>Heading level 3</h3> +<h4>Heading level 4</h4> +</pre> + +<h4 id="正确用法">正确用法</h4> + +<pre class="brush: html example-good"><h1>Heading level 1</h1> +<h2>Heading level 2</h2> +<h3>Heading level 3</h3> +</pre> + +<h4 id="嵌套">嵌套</h4> + +<p>Headings may be nested as subsections to reflect the organization of the content of the page. Most screen readers can also generate an ordered list of all the headings on a page, which can help a person quickly determine the hierarchy of the content:</p> + +<ol> + <li><code>h1</code> Beetles + + <ol> + <li><code>h2</code> Etymology</li> + <li><code>h2</code> Distribution and Diversity</li> + <li><code>h2</code> Evolution + <ol> + <li><code>h3</code> Late Paleozoic</li> + <li><code>h3</code> Jurassic</li> + <li><code>h3</code> Cretaceous</li> + <li><code>h3</code> Cenozoic</li> + </ol> + </li> + <li><code>h2</code> External Morphology + <ol> + <li><code>h3</code> Head + <ol> + <li><code>h4</code> Mouthparts</li> + </ol> + </li> + <li><code>h3</code> Thorax + <ol> + <li><code>h4</code> Prothorax</li> + <li><code>h4</code> Pterothorax</li> + </ol> + </li> + <li><code>h3</code> Legs</li> + <li><code>h3</code> Wings</li> + <li><code>h3</code> Abdomen</li> + </ol> + </li> + </ol> + </li> +</ol> + +<p>When headings are nested, heading levels may be "skipped" when closing a subsection.</p> + +<ul> + <li><a href="https://www.w3.org/WAI/tutorials/page-structure/headings/">Headings • Page Structure • WAI Web Accessibility Tutorials</a></li> + <li><a href="/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.3_—_Create_content_that_can_be_presented_in_different_ways">MDN Understanding WCAG, Guideline 1.3 explanations</a></li> + <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/content-structure-separation-programmatic.html">Understanding Success Criterion 1.3.1 | W3C Understanding WCAG 2.0</a></li> + <li><a href="/en-US/docs/Web/Accessibility/Understanding_WCAG/Operable#Guideline_2.4_—_Navigable_Provide_ways_to_help_users_navigate_find_content_and_determine_where_they_are">MDN Understanding WCAG, Guideline 2.4 explanations</a></li> + <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms-skip.html">Understanding Success Criterion 2.4.1 | W3C Understanding WCAG 2.0</a></li> + <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms-descriptive.html">Understanding Success Criterion 2.4.6 | W3C Understanding WCAG 2.0</a></li> + <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms-headings.html">Understanding Success Criterion 2.4.10 | W3C Understanding WCAG 2.0</a></li> +</ul> + +<h3 id="Labeling_section_content">Labeling section content</h3> + +<p>Another common navigation technique for users of screen reading software is to generate a list of <a href="/en-US/docs/Web/HTML/Element#Content_sectioning">sectioning content</a> and use it to determine the page's layout.</p> + +<p>Sectioning content can be labeled using a combination of the <code><a href="/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-labelledby_attribute">aria-labelledby</a></code> and {{htmlattrxref("id")}} attributes, with the label concisely describing the purpose of the section. This technique is useful for situations where there is more than one sectioning element on the same page.</p> + +<h4 id="示例_2">示例</h4> + +<pre class="brush: html"><header> + <nav aria-labelledby="primary-navigation"> + <h2 id="primary-navigation">Primary navigation</h2> + <!-- navigation items --> + </nav> +</header> + +<!-- page content --> + +<footer> + <nav aria-labelledby="footer-navigation"> + <h2 id="footer-navigation">Footer navigation</h2> + <!-- navigation items --> + </nav> +</footer> +</pre> + +<p>In this example, screen reading technology would announce that there are two {{HTMLElement("nav")}} sections, one called "Primary navigation" and one called "Footer navigation". If labels were not provided, the person using screen reading software may have to investigate each <code>nav</code> element's contents to determine their purpose.</p> + +<ul> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-labelledby_attribute">Using the aria-labelledby attribute</a></li> + <li><a href="https://www.w3.org/WAI/tutorials/page-structure/labels/#using-aria-labelledby">Labeling Regions • Page Structure • W3C WAI Web Accessibility Tutorials</a></li> +</ul> + +<h2 id="Specifications" name="Specifications">规范</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">规范</th> + <th scope="col">状态</th> + <th scope="col">注释</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'sections.html#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements', '<h1>, <h2>, <h3>, <h4>, <h5>, and <h6>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'sections.html#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements', '<h1>, <h2>, <h3>, <h4>, <h5>, and <h6>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/global.html#h-7.5.5', '<h1>, <h2>, <h3>, <h4>, <h5>, and <h6>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + + + +<p>{{Compat("html.elements.h1")}}</p> + +<h2 id="参见">参见</h2> + +<ul> + <li>{{HTMLElement("p")}}</li> + <li>{{HTMLElement("div")}}</li> + <li>{{HTMLElement("section")}}</li> +</ul> + +<div>{{HTMLRef}}</div> diff --git a/files/zh-cn/web/html/element/hgroup/index.html b/files/zh-cn/web/html/element/hgroup/index.html new file mode 100644 index 0000000000..99a782ad8c --- /dev/null +++ b/files/zh-cn/web/html/element/hgroup/index.html @@ -0,0 +1,171 @@ +--- +title: <hgroup> +slug: Web/HTML/Element/hgroup +tags: + - Element + - Experimental + - HTML + - HTML sections + - HTML5 + - Web + - 实验性 +translation_of: Web/HTML/Element/hgroup +--- +<div>{{HTMLRef}}</div> + +<div></div> + +<div><strong>HTML <code><hgroup></code> element</strong>代表文档章节所属的多级别的目录，它将多个<h1>至<h6>的子元素组装到一起。</div> + +<div></div> + +<div>{{EmbedInteractiveExample("pages/tabbed/hgroup.html", "tabbed-standard")}}</div> + +<div></div> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/en-US/docs/HTML/Content_categories" title="HTML/Content_categories">Content categories</a></th> + <td><a href="/en-US/docs/HTML/Content_categories#Flow_content" title="HTML/Content categories#Flow content">Flow content</a>, heading content, palpable content.</td> + </tr> + <tr> + <th scope="row">Permitted content</th> + <td>One or more {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, and/or {{HTMLElement("h6")}}.</td> + </tr> + <tr> + <th scope="row">Tag omission</th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th scope="row">Permitted parent elements</th> + <td>Any element that accepts <a href="/en-US/docs/HTML/Content_categories#Flow_content" title="HTML/Content categories#Flow content">flow content</a>.</td> + </tr> + <tr> + <th scope="row">Permitted ARIA roles</th> + <td>{{ARIARole("tab")}}, {{ARIARole("presentation")}}</td> + </tr> + <tr> + <th scope="row">DOM interface</th> + <td>{{domxref("HTMLElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="属性">属性</h2> + +<p>这个元素仅包含全局属性。</p> + +<h2 id="使用笔记">使用笔记</h2> + +<div class="note"> +<p><strong>注意: </strong>本元素已经从HTML5（W3C）规范中删除，但是它仍旧在 WHATWG 的 HTML 版本里。大多数浏览器都部分地实现，所以它不太可能消失。 <br> + 然而，考虑到<hgroup>元素的一个关键存在目标是明确HTML规范中如何显示标题的轮廓算法，但因为其轮廓算法(outline algorithm)未在任何浏览器中实现，因此 <code><hgroup> 语义仍旧是理论上的建议。</code><br> + HTML5 (W3C) 规范提供了如何标记<a href="http://www.w3.org/TR/html5/common-idioms.html#sub-head">副标题，小标题，可选标题和标语</a>（Subheadings, subtitles, alternative titles and taglines）的建议。</p> +</div> + +<p>The <code><hgroup></code> element allows the primary heading for a document section to be grouped with any secondary headings—such as subheadings or alternative titles—to form a <em>multi-level</em> heading.</p> + +<p>In other words, the <code><hgroup></code> element prevents any of its secondary <code><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/HTML/Element/Heading_Elements"><h1>–<h6></a></code> children from creating separate sections of their own in the outline—as those <code><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/HTML/Element/Heading_Elements"><h1>–<h6></a></code> elements otherwise normally would if they were not children of any <code><hgroup></code>.</p> + +<p>So in the abstract outline produced by the <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/Guide/HTML/Using_HTML_sections_and_outlines#The_HTML5_outline_algorithm">HTML outline algorithm defined in the HTML specification</a>, the <code><hgroup></code> as a whole forms a single logical heading, with the entire set of <code><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/HTML/Element/Heading_Elements"><h1>–<h6></a></code> children of the <code><hgroup></code> going into the outline as one <em>multi-level</em> unit, to comprise that single logical heading in the abstract outline.</p> + +<p>To produce any (non-abstract) <em>rendered</em> view of such an outline, some choice must be made in the design of the rendering tool about how to render <code><hgroup></code> headings in such a way as to convey their multi-level nature. There are a variety of ways an <code><hgroup></code> might be shown in a rendered outline; for example:</p> + +<ul> + <li>an <code><hgroup></code> might be shown in a rendered outline in with a colon character and space (“<code>: </code>”) or other such punctuation after the primary heading and before the first secondary heading (and with the same or similar punctuation before any other secondary headings</li> + <li>an <code><hgroup></code> might be shown in a rendered outline in with the primary heading followed by parentheses around the secondary heading(s)</li> +</ul> + +<p>Consider the following HTML document:</p> + +<pre class="notranslate"><!DOCTYPE html> +<title>HTML Standard</title> +<body> + <hgroup id="document-title"> + <h1>HTML</h1> + <h2>Living Standard — Last Updated 12 August 2016</h2> + </hgroup> + <p>Some intro to the document.</p> + <h2>Table of contents</h2> + <ol id=toc>...</ol> + <h2>First section</h2> + <p>Some intro to the first section.</p> +</body></pre> + +<p>A rendered outline for that document might look like the following:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/14599/outline-colon.png"></p> + +<p>That is, the rendered outline might show the primary title, <em>HTML</em>, followed by a colon and space, followed by the secondary title, <em>Living Standard — Last Updated 12 August 2016</em>.</p> + +<p>Or, the rendered outline for that document might instead look like the following:</p> + +<p><img alt="Rendered outline that includes an <hgroup> element, with parens around the secondary heading" src="https://mdn.mozillademos.org/files/14601/outline-paren.png"></p> + +<p>That is, the rendered outline might show the primary title, <em>HTML</em>, followed by the secondary title shown in parentheses:<em> (Living Standard — Last Updated 12 August 2016)</em>.</p> + +<h2 id="示例">示例</h2> + +<pre class="brush: html notranslate"><hgroup> + <h1>Main title</h1> + <h2>Secondary title</h2> +</hgroup> +</pre> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>5</td> + <td>{{CompatGeckoDesktop("2.0")}}</td> + <td>9.0</td> + <td>11.10</td> + <td>4.1</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>2.2</td> + <td>{{CompatGeckoMobile("2.0")}}</td> + <td>9.0</td> + <td>11.0</td> + <td>5.0</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="参阅">参阅</h2> + +<ul> + <li>Others section-related elements: {{HTMLElement("body")}}, {{HTMLElement("article")}}, {{HTMLElement("section")}}, {{HTMLElement("aside")}}, {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}}, {{HTMLElement("nav")}}, {{HTMLElement("header")}}, {{HTMLElement("footer")}}, {{HTMLElement("address")}};</li> + <li><a class="deki-ns current" href="/en-US/docs/Sections_and_Outlines_of_an_HTML5_document" title="Sections and Outlines of an HTML5 document">Sections and outlines of an HTML5 document</a>.</li> +</ul> diff --git a/files/zh-cn/web/html/element/hr/index.html b/files/zh-cn/web/html/element/hr/index.html new file mode 100644 index 0000000000..0cb5efd486 --- /dev/null +++ b/files/zh-cn/web/html/element/hr/index.html @@ -0,0 +1,120 @@ +--- +title: <hr> +slug: Web/HTML/Element/hr +tags: + - Element + - HTML + - HTML grouping content + - Reference + - 元素 + - 参考 +translation_of: Web/HTML/Element/hr +--- +<div>{{HTMLRef}}</div> + +<p><strong>HTML <code><hr></code> 元素</strong>表示段落级元素之间的主题转换（例如，一个故事中的场景的改变，或一个章节的主题的改变）。</p> + + + +<p>在HTML的早期版本中，它是一个水平线。现在它仍能在可视化浏览器中表现为水平线，但目前被定义为语义上的，而不是表现层面上。所以如果想画一条横线，请使用适当的css样式来修饰。</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/hr.html", "tabbed-shorter")}}</div> + +<div class="note"> +<p>要更改 <hr> 与段落之间的间隙或样式，请使用 <a href="/en-US/docs/CSS">CSS</a>。</p> +</div> + +<ul class="htmlelt"> + <li><dfn><a href="/zh-cn/docs/HTML/Content_categories" title="HTML/Content_categories">内容分类</a></dfn> <a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">流式元素</a>.</li> + <li><dfn>允许的内容</dfn>无, 是一个 {{Glossary("空元素")}}.</li> + <li><dfn>标签省略</dfn>必须有开始标签, 不能有结束标签。</li> + <li><dfn>允许的父元素</dfn> 所有接受<a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">流式元素</a>的元素。</li> + <li><dfn>DOM接口</dfn> {{domxref("HTMLHRElement")}}</li> +</ul> + +<h2 id="属性">属性</h2> + +<p>该元素包含<a href="zh-CN/docs/Web/HTML/Global_attributes">全局属性</a></p> + +<dl> + <dt>{{htmlattrdef("align")}} {{deprecated_inline}}</dt> + <dd>设置对齐方式. 如果没有值, 默认值为 <code>left。</code></dd> + <dt>{{htmlattrdef("color")}} {{Non-standard_inline}}</dt> + <dd>使用颜色名或十六进制设置颜色。</dd> + <dt>{{htmlattrdef("noshade")}} {{deprecated_inline}}</dt> + <dd>去除阴影。</dd> + <dt>{{htmlattrdef("size")}} {{deprecated_inline}}</dt> + <dd>使用像素设置高度。</dd> + <dt>{{htmlattrdef("width")}} {{deprecated_inline}}</dt> + <dd>使用像素或者百分比设置宽度。</dd> +</dl> + +<h2 id="示例">示例</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="notranslate"><code><p> + This is the first paragraph of text. + This is the first paragraph of text. + This is the first paragraph of text. + This is the first paragraph of text. +</p> + +<hr> + +<p> + This is the second paragraph of text. + This is the second paragraph of text. + This is the second paragraph of text. + This is the second paragraph of text. +</p></code></pre> + +<h3 id="结果">结果</h3> + +<p>{{EmbedLiveSample("Example")}}</p> + +<h2 id="Specifications" name="Specifications">规范</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">规范</th> + <th scope="col">状态</th> + <th scope="col">备注</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'grouping-content.html#the-hr-element', '<hr>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>Definition of the <code>hr</code> element</td> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', 'rendering.html#the-hr-element-0')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>Suggested default rendering of the <code>hr</code> element</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'grouping-content.html#the-hr-element', '<hr>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'present/graphics.html#h-15.3', '<hr>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">浏览器兼容性</h2> + + + +<p>{{Compat("html.elements.hr")}}</p> + +<h2 id="相关内容">相关内容</h2> + +<ul> + <li>{{HTMLElement('p')}}</li> +</ul> diff --git a/files/zh-cn/web/html/element/html/index.html b/files/zh-cn/web/html/element/html/index.html new file mode 100644 index 0000000000..5cec5dc19f --- /dev/null +++ b/files/zh-cn/web/html/element/html/index.html @@ -0,0 +1,122 @@ +--- +title: <html> +slug: Web/HTML/Element/html +tags: + - HTML + - 元素 + - 根元素 + - 顶级元素 +translation_of: Web/HTML/Element/html +--- +<p>{{HTMLRef}}</p> + +<p><strong>HTML <code><html></code> 元素 </strong>表示一个HTML文档的根（顶级元素），所以它也被称为<em>根元素</em>。所有其他元素必须是此元素的后代。</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/zh-CN/docs/Web/HTML/Content_categories">内容分类</a></th> + <td>无</td> + </tr> + <tr> + <th scope="row">允许的内容</th> + <td>一个 {{HTMLElement("head")}} 元素，后跟一个 {{HTMLElement("body")}} 元素</td> + </tr> + <tr> + <th scope="row">忽略标签</th> + <td>如果元素中的第一个元素不是注释，则可以忽略标签。</td> + </tr> + <tr> + <th scope="row">允许的父元素</th> + <td>无（这是文档的根元素）</td> + </tr> + <tr> + <th scope="row">允许的 ARIA roles</th> + <td>无</td> + </tr> + <tr> + <th scope="row">DOM 接口</th> + <td>{{domxref("HTMLHtmlElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="属性">属性</h2> + +<p>元素包含 <a href="/zh-CN/docs/Web/HTML/Global_attributes">全局属性</a><span style="line-height: 21px;">。</span></p> + +<dl> + <dt>{{htmlattrdef("manifest")}} {{obsolete_inline}}</dt> + <dd>指定一个 资源清单的URI，指示应在本地缓存的资源。请参阅 <a href="/zh-CN/docs/HTML/Using_the_application_cache">使用应用程序缓存</a> 获取详细信息。</dd> + <dt>{{htmlattrdef("version")}} {{obsolete_inline}}</dt> + <dd>指定控制当前文档的HTML版本{{glossary("DTD", "文档类型定义")}} 。这个属性已不再需要，因为这在文档类型声明中是多余的版本信息。</dd> + <dt>{{htmlattrdef("xmlns")}} </dt> + <dd> + <p>指派文档的 XML 命名空间。默认的值是<code>"http://www.w3.org/1999/xhtml"</code>。这在 XHTML 中是必要的，而在 HTML 中则是可选的。</p> + </dd> +</dl> + +<h2 id="示例">示例</h2> + +<pre class="brush: html"><!DOCTYPE html> +<html lang="zh"> + <head>...</head> + <body>...</body> +</html> + +</pre> + +<h2 id="可访问性">可访问性</h2> + +<p><font><font>在</font></font><code>html</code><font><font>元素</font><font>上</font></font><font><font>提供具有</font></font><a href="https://www.ietf.org/rfc/bcp/bcp47.txt" rel="noopener"><font><font>有效IETF标识语言标记</font></font></a><font><font>的</font></font><code><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes#attr-lang">lang</a></code><font><font>属性，将有助于屏幕阅读技术确定要陈述的正确语言。标识语言标签应描述页面大部分内容使用的语言。没有它，屏幕阅读器通常会默认使用操作系统的设置语言，这可能会导致错误陈述。</font></font></p> + +<h2 id="Specifications" name="Specifications">规范</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">规范</th> + <th scope="col">状态</th> + <th scope="col">注释</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'semantics.html#the-html-element', '<html>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td><em>（自上一次快照后没有改变）</em></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'semantics.html#the-html-element', '<html>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>为manifest属性增加支持 （后来不赞成）。弃用 <code>version</code> 属性</td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/global.html#h-7.3', '<html>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td>不赞成 <code>version</code> 属性</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">浏览器兼容性</h2> + +<p>{{Compat("html.elements.html")}}</p> + +<h2 id="注意事项">注意事项</h2> + +<ul> + <li>尽管在 {{glossary("HTML")}} 里<html>元素不是必需的，可以是隐含的，但是在 {{glossary("XHTML")}} 里必须明确给出它的开标签和闭标签。</li> + <li>严格意义上，<strong>标签</strong>是指开始标签（例如 <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);"><p></span></font> 标签）或结束标签（例如 <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);"></p></span></font> 标签）；<strong>元素</strong>（例如 <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">p</span></font> 元素或者称为<code><p></code>元素）则包括开始标签（自然也包括标签中定义的属性）、结束标签以及中间的内容（<code>Content</code>）。<img alt="标签和元素的区别" src="https://mdn.mozillademos.org/files/16129/et.PNG" style="height: 168px; width: 412px;"></li> +</ul> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<p>{{Compat("html.elements.html")}}</p> + +<h2 id="参见">参见</h2> + +<ul> + <li>MathML 顶级元素: {{MathMLElement("math")}}</li> + <li>SVG 顶级元素: {{SVGElement("svg")}}</li> +</ul> diff --git a/files/zh-cn/web/html/element/i/index.html b/files/zh-cn/web/html/element/i/index.html new file mode 100644 index 0000000000..f2f858af56 --- /dev/null +++ b/files/zh-cn/web/html/element/i/index.html @@ -0,0 +1,127 @@ +--- +title: <i> +slug: Web/HTML/Element/i +translation_of: Web/HTML/Element/i +--- +<h2 id="概述">概述</h2> + +<p><strong>HTML元素 <code><i></code></strong> 用于表现因某些原因需要区分普通文本的一系列文本。例如技术术语、外文短语或是小说中人物的思想活动等，它的内容通常以斜体显示。</p> + +<ul class="htmlelt"> + <li><dfn><a href="/en-US/docs/Web/HTML/Content_categories">Content catergories</a></dfn> <a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">Flow content</a>, <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Content_categories#Phrasing_content">phrasing content</a>, palpable content.</li> + <li><dfn>允许量</dfn> <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Content_categories#Phrasing_content">phrasing content</a>.</li> + <li><dfn>标签忽略</dfn> {{no_tag_omission}}</li> + <li><dfn>Permitted parent elements</dfn> Any element that accepts <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Content_categories#Phrasing_content">phrasing content</a>.</li> + <li><dfn>DOM interface</dfn> {{domxref("HTMLElement")}} Up to Gecko 1.9.2 (Firefox 4) inclusive, Firefox implements the {{domxref("HTMLSpanElement")}} interface for this element.</li> +</ul> + +<h2 id="属性">属性</h2> + +<p>该元素只包含 <a href="/en-US/docs/Web/HTML/Global_attributes">全局属性</a>。</p> + +<h2 id="示例">示例</h2> + +<pre class="brush: html"><p>The Latin phrase <i class="latin">Veni, vidi, vici</i> is often +mentioned in music, art, and literature</p> +</pre> + +<h3 id="Result" name="Result">效果</h3> + +<p>The Latin phrase <em>Veni, vidi, vici</em> is often mentioned in music, art, and literature</p> + +<h2 id="注释">注释</h2> + +<p>在较早版本的 HTML 技术参数声明中，<code><i></code> 标签只是一个用于将文本显示为斜体的表示性元素，很像 {{HTMLElement("b")}} 标签被用来将文本显示为粗体。情况不再是这样了，因为这些标签现在定义了更多的语义而不只是排版外观。<code><i></code> 标签应表现一系列带有不同语义的文本，它的典型样式显示为斜体。这意味着浏览器通常任会将内容显示为斜体，但是，根据定义，不再是必须的。</p> + +<p>该元素只在没有更适合的语义元素表示时使用。例如：</p> + +<ul> + <li>使用 {{HTMLElement("em")}} 表示强调或重读。</li> + <li>使用 {{HTMLElement("strong")}} 表示重要性。</li> + <li>使用 {{HTMLElement("mark")}} 表示相关性。</li> + <li>使用 {{HTMLElement("cite")}} 标记著作名，如一本书、剧本或是一首歌。</li> + <li>使用 {{HTMLElement("dfn")}} 标记术语的定义实例。</li> +</ul> + +<p>使用<strong>class</strong>属性用来识别为何使用该元素是一个很好的办法，这样的话，如果该表示以后需要改变，就可以有选择性地改变样式表。</p> + +<h2 id="Specifications" name="Specifications">技术参数</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'text-level-semantics.html#the-i-element', '<i>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'text-level-semantics.html#the-i-element', '<i>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'present/graphics.html#h-15.2.1', '<b>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">浏览器兼容性</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Basic support</td> + <td>1.0</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<p>{{HTMLRef}}</p> diff --git a/files/zh-cn/web/html/element/iframe/index.html b/files/zh-cn/web/html/element/iframe/index.html new file mode 100644 index 0000000000..c25323e8f6 --- /dev/null +++ b/files/zh-cn/web/html/element/iframe/index.html @@ -0,0 +1,262 @@ +--- +title: <iframe> +slug: Web/HTML/Element/iframe +tags: + - <iframe> + - CORS + - Content + - HTML5 + - iframe.contentWindow.document +translation_of: Web/HTML/Element/iframe +--- +<div>{{HTMLRef}}</div> + +<p><strong>HTML内联框架元素 (<code><iframe></code>)</strong> 表示嵌套的<span class="seoSummary">{{Glossary("browsing context")}}</span>。它能够将另一个HTML页面嵌入到当前页面中。</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/iframe.html", "tabbed-standard")}}</div> + +<div class="hidden">这个示例的源代码存储在GitHub仓库中。如果你想给这个项目贡献代码，请克隆 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples </a>仓库并给我们提交 pull request。</div> + +<p>每个嵌入的浏览上下文（embedded browsing context）都有自己的<a href="/zh-CN/docs/Web/API/History">会话历史记录(session history)</a>和<a href="/zh-CN/docs/Web/API/Document">DOM树</a>。包含嵌入内容的浏览上下文称为<em><dfn>父级</dfn>浏览上下文</em>。顶级浏览上下文（没有父级）通常是由 {{domxref("Window")}} 对象表示的浏览器窗口。</p> + +<div class="blockIndicator warning"> +<p>页面上的每个<code><iframe></code>都需要增加内存和其它计算资源，这是因为每个浏览上下文都拥有完整的文档环境。虽然理论上来说你能够在代码中写出来无限多的<code><iframe></code>，但是你最好还是先看看这么做会不会导致某些性能问题。</p> +</div> + +<h2 id="属性">属性</h2> + +<p>该元素包含<a href="/zh-CN/docs/Web/HTML/Global_attributes" title="Global_attributes">全局属性</a>。</p> + +<dl> + <dt>{{htmlattrdef("allow")}}</dt> + <dd>用于为<code><iframe></code>指定其<a href="/zh-CN/docs/Web/HTTP/策略特征">特征策略</a>.</dd> +</dl> + +<dl> + <dt>{{htmlattrdef("allowfullscreen")}}</dt> + <dd>设置为<code>true</code>时，可以通过调用 <code><iframe></code> 的 {{domxref("Element.requestFullscreen", "requestFullscreen()")}} 方法激活全屏模式。</dd> + <dd> + <div class="note">这是一个历史遗留属性，已经被重新定义为 <code>allow="fullscreen"</code>。</div> + </dd> + <dt>{{htmlattrdef("allowpaymentrequest")}}</dt> + <dd>设置为<code>true</code>时，跨域的 <code><iframe></code> 就可以调用 <a href="https://developer.mozilla.org/en-US/docs/Web/API/Payment_Request_API">Payment Request API</a>。</dd> + <dd> + <div class="note">这是一个历史遗留属性，已经被重新定义为 <code>allow="payment"</code>.</div> + </dd> + <dt>{{htmlattrdef("csp")}} {{experimental_inline}}</dt> + <dd>对嵌入的资源配置<a href="/zh-CN/docs/Web/HTTP/CSP">内容安全策略</a>。 查看 {{domxref("HTMLIFrameElement.csp")}} 获取详情。</dd> + <dt>{{htmlattrdef("height")}}</dt> + <dd>以CSS像素格式<span style="line-height: inherit;">{{HTMLVersionInline(5)}}，或像素格式{{HTMLVersionInline(4.01)}}，或百分比格式指定frame的高度。默认值为<code>150</code>。</span></dd> + <dt id="name-attribute">{{htmlattrdef("importance")}} {{experimental_inline}}</dt> + <dd>表示 <code><iframe> </code>的 <code>src</code> 属性指定的资源的加载优先级。允许的值有： + <dl> + <dt><code>auto</code> (default)</dt> + <dd>不指定优先级。浏览器根据自身情况决定资源的加载顺序</dd> + <dt><code>high</code></dt> + <dd>资源的加载优先级较高</dd> + <dt><code>low</code></dt> + <dd>资源的加载优先级较低</dd> + </dl> + </dd> + <dt>{{htmlattrdef("name")}}</dt> + <dd>用于定位嵌入的浏览上下文的名称。该名称可以用作 <span style="line-height: inherit;">{{HTMLElement("a")}} 标签与 {{HTMLElement("form")}} 标签的 <code>target</code> 属性值，也可以用作 {{HTMLElement("input")}} 标签和 {{HTMLElement("button")}} 标签的 <code>formtarget</code> 属性值，还可以用作</span> {{domxref("Window.open()","window.open()")}} 方法的 <code>windowName</code> 参数值。</dd> + <dt id="attr-referrer">{{htmlattrdef("referrerpolicy")}}</dt> + <dd>表示在获取 iframe 资源时如何发送 <a href="https://developer.mozilla.org/en-US/docs/Web/API/Document/referrer">referrer</a> 首部： + <ul> + <li><code>no-referrer</code>: 不发送 {{HTTPHeader("Referer")}} 首部。</li> + <li><code>no-referrer-when-downgrade</code> (default): 向不受 {{Glossary("TLS")}} ({{Glossary("HTTPS")}}) 保护的 {{Glossary("origin")}} 发送请求时，不发送 {{HTTPHeader("Referer")}} 首部。</li> + <li><code>origin</code>: referrer 首部中仅包含来源页面的源。换言之，仅包含来源页面的 <a href="https://developer.mozilla.org/en-US/docs/Archive/Mozilla/URIScheme">scheme</a>, {{Glossary("host")}}, 以及 {{Glossary("port")}}。</li> + <li><code>origin-when-cross-origin</code>: 发起跨域请求时，仅在 referrer 中包含来源页面的源。发起同源请求时，仍然会在 referrer 中包含来源页面在服务器上的路径信息。</li> + <li><code>same-origin</code>: 对于 {{Glossary("Same-origin policy", "same origin")}} （同源）请求，发送 referrer 首部，否则不发送。</li> + <li><code>strict-origin</code>: 仅当被请求页面和来源页面具有相同的协议安全等级时才发送 referrer 首部（比如从采用 HTTPS 协议的页面请求另一个采用 HTTPS 协议的页面）。如果被请求页面的协议安全等级较低，则不会发送 referrer 首部（比如从采用 HTTPS 协议的页面请求采用 HTTP 协议的页面）。</li> + <li><code>strict-origin-when-cross-origin</code>: 当发起同源请求时，在 referrer 首部中包含完整的 URL。当被请求页面与来源页面不同源但是有相同协议安全等级时（比如 HTTPS→HTTPS），在 referrer 首部中仅包含来源页面的源。当被请求页面的协议安全等级较低时（比如 HTTPS→HTTP），不发送 referrer 首部。</li> + <li><code>unsafe-url</code>: 始终在 referrer 首部中包含源以及路径 （但不包括 <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLHyperlinkElementUtils/hash">fragment</a>，<a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLHyperlinkElementUtils/password">密码</a>，或<a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLHyperlinkElementUtils/username">用户名</a>）。<strong>这个值是不安全的</strong>, 因为这样做会暴露受 TLS 保护的资源的源和路径信息。</li> + </ul> + </dd> + <dt>{{htmlattrdef("sandbox")}}</dt> + <dd>该属性对呈现在 iframe 框架中的内容启用一些额外的限制条件。属性值可以为空字符串（这种情况下会启用所有限制），也可以是用空格分隔的一系列指定的字符串。有效的值有： + <ul> + <li><code>allow-downloads-without-user-activation</code> {{experimental_inline}}: 允许在没有征求用户同意的情况下下载文件.</li> + <li><code>allow-forms</code>: 允许嵌入的浏览上下文提交表单。如果没有使用该关键字，则无法提交表单。</li> + <li><code>allow-modals</code>: 允许嵌入的浏览上下文打开模态窗口。</li> + <li><code>allow-orientation-lock</code>: 允许嵌入的浏览上下文锁定屏幕方向（译者注：比如智能手机、平板电脑的水平朝向或垂直朝向）。</li> + <li><code>allow-pointer-lock</code>: 允许嵌入的浏览上下文使用 <a href="/zh-CN/docs/API/Pointer_Lock_API">Pointer Lock API</a>.</li> + <li><code>allow-popups</code>: 允许弹窗 (例如 window.open, target="_blank", <code>showModalDialog</code>)。如果没有使用该关键字，相应的功能将自动被禁用。</li> + <li><code>allow-popups-to-escape-sandbox</code>: 允许沙箱化的文档打开新窗口，并且新窗口不会继承沙箱标记。例如，安全地沙箱化一个广告页面，而不会在广告链接到的新页面中启用相同的限制条件。</li> + <li><code>allow-presentation</code>: 允许嵌入的浏览上下文开始一个<a href="https://developer.mozilla.org/en-US/docs/Web/API/PresentationRequest"> presentation session</a>。</li> + <li><code>allow-same-origin</code>: 如果没有使用该关键字，嵌入的浏览上下文将被视为来自一个独立的源，这将使 {{Glossary("same-origin policy")}} 同源检查失败。</li> + <li><code>allow-scripts</code>: 允许嵌入的浏览上下文运行脚本（但不能创建弹窗）。如果没有使用该关键字，就无法运行脚本。</li> + <li><code>allow-storage-access-by-user-activation</code> {{experimental_inline}}: 允许嵌入的浏览上下文通过 <a href="https://developer.mozilla.org/en-US/docs/Web/API/Storage_Access_API">Storage Access API</a> 使用父级浏览上下文的存储功能。</li> + <li><code>allow-top-navigation</code>: 允许嵌入的浏览上下文导航（加载）内容到顶级的浏览上下文。</li> + <li><code>allow-top-navigation-by-user-activation</code>: 允许嵌入的浏览上下文<u><strong>在经过用户允许后</strong></u>导航（加载）内容到顶级的浏览上下文。</li> + </ul> + + <div class="note"> + <p><strong>注意:</strong></p> + + <ul> + <li>当被嵌入的文档与主页面同源时，强烈建议不要同时使用 <code>allow-scripts</code> 和 <code>allow-same-origin</code>。如果同时使用，嵌入的文档就可以通过代码删除 <code>sandbox</code> 属性，如此，就安全性而言还不如不用<code>sandbox</code>。</li> + <li>如果攻击者可以在沙箱化的 <code>iframe</code> 之外展示内容，例如用户在新标签页中打开内联框架，那么沙箱化也就没有意义了。建议把这种内容放置到独立的专用域中，以减小可能的损失。</li> + <li>沙箱属性(sandbox)在Internet Explorer 9及更早的版本上不被支持。</li> + </ul> + </div> + </dd> + <dt>{{htmlattrdef("src")}}</dt> + <dd>被嵌套的页面的 URL 地址。使用 <code>about:blank</code> 值可以嵌入一个遵从<a href="/zh-CN/docs/Web/Security/Same-origin_policy">同源策略</a>的空白页。在 Firefox （version 65及更高版本）、基于 Chromium 的浏览器、Safari/iOS 中使用代码移除 <code>iframe</code> 的 <code>src</code> 属性（例如通过 {{domxref("Element.removeAttribute()")}} ）会导致 <code>about:blank</code> 被载入 frame。</dd> + <dt>{{htmlattrdef("srcdoc")}} {{HTMLVersionInline(5)}} only</dt> + <dd>该属性是一段HTML代码，这些代码会被渲染到 iframe 中。如果浏览器不支持 <code>srcdoc</code> 属性，则会渲染 <code>src</code> 属性表示的内容。</dd> + <dt>{{htmlattrdef("width")}}</dt> + <dd>以CSS像素格式<span style="line-height: inherit;">{{HTMLVersionInline(5)}}</span><span style="line-height: inherit;">，或以像素格式</span><span style="line-height: inherit;">{{HTMLVersionInline(4.01)}}，或以百分比格式指定的 frame 的宽度。默认值是<code>300</code>。</span></dd> +</dl> + +<h3 id="不赞成使用的属性"><span style="line-height: inherit;">不赞成使用的属性</span></h3> + +<p>下面这些属性已不赞成使用，并且可能不再被所有的浏览器支持。你应避免在新项目里面使用它们，也应尽量从旧项目中移除它们。</p> + +<dl> + <dt>{{htmlattrdef("align")}} {{deprecated_inline("html4.01")}}, {{obsolete_inline("html5")}}</dt> + <dd>此元素相对于周围元素的对齐方式。</dd> + <dt>{{htmlattrdef("frameborder")}} {{obsolete_inline("html5")}}</dt> + <dd>值为<code>1</code>（默认值）时，显示此框架的边框。值为<code>0</code>时移除边框。此属性已不赞成使用，请使用 CSS 属性 {{cssxref("border")}} 代替。</dd> + <dt>{{htmlattrdef("longdesc")}} {{obsolete_inline("html5")}}</dt> + <dd>表示框架内容的长描述的 URL。由于广泛的误用，该属性对于无图形界面的浏览器不起作用。</dd> + <dt>{{htmlattrdef("marginheight")}} {{obsolete_inline("html5")}}</dt> + <dd>这个属性定义了框架的内容距其上边框与下边框的距离，单位是像素。</dd> + <dt>{{htmlattrdef("marginwidth")}} {{obsolete_inline("html5")}}</dt> + <dd>这个属性定义了框架的内容距其左边框和右边框的距离，单位是像素。</dd> + <dt>{{htmlattrdef("scrolling")}} {{obsolete_inline("html5")}}</dt> + <dd>这个属性控制是否要在框架内显示滚动条，允许的值包括： + <ul> + <li><code>auto</code>: 仅当框架的内容超出框架的范围时显示滚动条。</li> + <li><code>yes</code>: 始终显示滚动条。</li> + <li><code>no</code>: 从不显示滚动条。</li> + </ul> + </dd> +</dl> + +<h3 id="非标准属性_non-standard_inline">非标准属性 {{non-standard_inline}}<span style="display: none;"> </span><span style="display: none;"> </span></h3> + +<dl> + <dt><strong>{{htmlattrdef("mozbrowser")}} {{non-standard_inline}} </strong><span style="display: none;"> </span><span style="display: none;"> </span></dt> +</dl> + +<div class="blockIndicator note"> +<p>查看 {{bug(1318532)}} 了解如何在 Firefox 的 WebExtensions 中使用此属性。</p> +</div> + +<p>这个属性可以让 <code><iframe></code> 变得像顶级浏览器窗口，详情请参看 <a href="/zh-CN/docs/Web/API/Using_the_Browser_API">Browser API</a>。这个属性<strong>只能</strong>在 <a href="/zh-CN/docs/Mozilla/Add-ons/WebExtensions">WebExtensions</a> 中使用。</p> + +<h2 id="脚本">脚本</h2> + +<p>内联的框架，就像 {{HTMLElement("frame")}} 元素一样，会被包含在 {{domxref("window.frames")}} 伪数组（类数组的对象）中。</p> + +<p>有了 DOM {{domxref("HTMLIFrameElement")}} 对象，脚本可以通过 {{domxref("HTMLIFrameElement.contentWindow", "contentWindow")}} 访问内联框架的 {{domxref("window")}} 对象。 {{domxref("HTMLIFrameElement.contentDocument", "contentDocument")}} 属性则引用了 <code><iframe></code> 内部的 <code>document</code> 元素，(等同于使用contentWindow.document），但IE8-不支持。</p> + +<p>在框架内部，脚本可以通过 {{domxref("window.parent")}} 引用父窗口对象。</p> + +<p>脚本访问框架内容必须遵守<a href="/zh-CN/docs/Web/Security/Same-origin_policy" title="/en-US/docs/Same_origin_policy_for_JavaScript">同源策略</a>，并且无法访问非同源的 <code>window</code> 对象的几乎所有属性。同源策略同样适用于子窗体访问父窗体的 <code>window</code> 对象。跨域通信可以通过 <a href="/zh-CN/docs/Web/API/Window/postMessage" title="/zh-CN/docs/Web/API/Window/postMessage">window.postMessage</a> 来实现。</p> + +<h2 id="定位和缩放">定位和缩放</h2> + +<p>作为一个<a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/Replaced_element">可替换元素</a>， 可以使用 {{cssxref("object-position")}} 和 {{cssxref("object-fit")}} 来定位、对齐、缩放 <code><iframe></code> 元素内的文档。</p> + +<h2 id="示例">示例</h2> + +<h3 id="Example1" name="Example1">一个简单的 <code><iframe></code></h3> + +<p>下面的例子中，我们创建了一个框架。当用户点击框架中的按钮时，浏览器会弹出一个提示框。</p> + +<h4 id="HTML">HTML</h4> + +<pre><code><iframe src="https://mdn-samples.mozilla.org/snippets/html/iframe-simple-contents.html" title="iframe example 1" width="400" height="300"> + <p>Your browser does not support iframes.</p> +</iframe></code></pre> + +<h4 id="Result">Result</h4> + +<p>{{ EmbedLiveSample('Example1', '', '', '', 'Web/HTML/Element/iframe') }}</p> + +<h3 id="Example2" name="Example2">在新标签页中打开 <code><iframe></code> 里面的链接</h3> + +<p>下面的例子演示了在框架中展示谷歌地图。</p> + +<h4 id="HTML_2">HTML</h4> + +<pre><code><base target="_blank"> +<iframe id="Example2" + title="Example2" + width="400" + height="300" + frameborder="0" + scrolling="no" + marginheight="0" + marginwidth="0" + src="https://maps.google.com/maps?f=q&amp;source=s_q&amp;hl=es-419&amp;geocode=&amp;q=buenos+aires&amp;sll=37.0625,-95.677068&amp;sspn=38.638819,80.859375&amp;t=h&amp;ie=UTF8&amp;hq=&amp;hnear=Buenos+Aires,+Argentina&amp;z=11&amp;ll=-34.603723,-58.381593&amp;output=embed"> +</iframe> + +<br> +<small> + <a href="https://maps.google.com/maps?f=q&amp;source=embed&amp;hl=es-419&amp;geocode=&amp;q=buenos+aires&amp;sll=37.0625,-95.677068&amp;sspn=38.638819,80.859375&amp;t=h&amp;ie=UTF8&amp;hq=&amp;hnear=Buenos+Aires,+Argentina&amp;z=11&amp;ll=-34.603723,-58.381593" style="color:#0000FF;text-align:left"> See bigger map </a> +</small></code></pre> + +<h4 id="Result_2">Result</h4> + +<p>{{ EmbedLiveSample('Example2', '', '', '', 'Web/HTML/Element/iframe') }}</p> + +<h2 id="无障碍环境">无障碍环境</h2> + +<p>使用 <code>iframe</code> 的 <a href="/zh-CN/docs/Web/HTML/Global_attributes/title">title</a> 属性来标识框架的主要内容，这样可以极大方便使用辅助技术（例如屏幕阅读器）浏览网页的人。框架的标题应该清楚地描述框架的内容，例如：</p> + +<pre class="brush: html line-numbers language-html"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>iframe</span> <span class="attr-name token">title</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>Wikipedia page for Avocados<span class="punctuation token">"</span></span> <span class="attr-name token">src</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>https://en.wikipedia.org/wiki/Avocado<span class="punctuation token">"</span></span><span class="punctuation token">></span></span><span class="tag token"><span class="tag token"><span class="punctuation token"></</span>iframe</span><span class="punctuation token">></span></span></code></pre> + +<p>如果没有标题，他们就只能浏览每一个框架来获取需要的内容。这非常耗时间，也很容易让人迷惑，尤其是当页面中包含很多框架或者互动内容如音视频等的时候。</p> + +<h2 id="Specifications" name="Specifications">规范</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">规范</th> + <th scope="col">状态</th> + <th scope="col">说明</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('Referrer Policy', '#referrer-policy-delivery-referrer-attribute', 'referrerpolicy attribute')}}</td> + <td>{{Spec2('Referrer Policy')}}</td> + <td>新增属性: <code>referrerpolicy</code></td> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', 'iframe-embed-object.html#the-iframe-element', '<iframe>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'embedded-content-0.html#the-iframe-element', '<iframe>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'present/frames.html#h-16.5', '<iframe>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('Screen Orientation')}}</td> + <td>{{Spec2('Screen Orientation')}}</td> + <td>Adds <code>allow-orientation-lock</code> to the <code>sandbox</code> attribute.</td> + </tr> + <tr> + <td>{{SpecName('Presentation','#sandboxing-and-the-allow-presentation-keyword','allow-presentation')}}</td> + <td>{{Spec2('Presentation')}}</td> + <td>Adds <code>allow-presentation</code> to the <code>sandbox</code> attribute</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">浏览器兼容性</h2> + +<article> +<p>{{Compat("html.elements.iframe", 3)}}</p> +</article> diff --git a/files/zh-cn/web/html/element/image/index.html b/files/zh-cn/web/html/element/image/index.html new file mode 100644 index 0000000000..e8d260adec --- /dev/null +++ b/files/zh-cn/web/html/element/image/index.html @@ -0,0 +1,16 @@ +--- +title: <image> +slug: Web/HTML/Element/image +translation_of: Web/HTML/Element/image +--- +<div>{{non-standard_header}}</div> + +<h2 id="概要">概要</h2> + +<p>HTML <code><image>元素曾经是一个试验性的元素，用来显示图片。它从未被实现过，请使用标准的</code>{{HTMLElement("img")}}元素。</p> + +<div class="note"> +<p><strong>不要使用它!<em> </em></strong>要显示图片，请使用标准的{{HTMLElement("img")}}.</p> +</div> + +<p>直到Firefox 22，虽然image仍然没有被支持，但是该元素被关联到{{domxref("HTMLSpanElement")}}。现在已经修正，image按照规范要求，被关联到{{domxref("HTMLElement")}} 。</p> diff --git a/files/zh-cn/web/html/element/img/index.html b/files/zh-cn/web/html/element/img/index.html new file mode 100644 index 0000000000..a1f6530952 --- /dev/null +++ b/files/zh-cn/web/html/element/img/index.html @@ -0,0 +1,410 @@ +--- +title: <img>：图像嵌入元素 +slug: Web/HTML/Element/img +tags: + - HTML + - Web + - 元素 + - 参考 + - 图像 + - 图片 + - 多媒体 + - 照片 + - 相片 +translation_of: Web/HTML/Element/img +--- +<div>{{HTMLRef}}</div> + +<p><span class="seoSummary"><strong>HTML <code><img></code> 元素</strong>将一份图像嵌入文档。</span></p> + +<div>{{EmbedInteractiveExample("pages/tabbed/img.html", "tabbed-standard")}}</div> + +<div class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples </a> and send us a pull request.</div> + +<p>上面的例子展示了 <code><img></code> 元素的用法：</p> + +<ul> + <li><code>src</code> 属性是<strong>必须的</strong>，它包含了你想嵌入的图片的文件路径。</li> + <li><code>alt</code> 属性包含一条对图像的文本描述，这不是强制性的，但对可访问性而言，它<strong>难以置信地有用</strong>——屏幕阅读器会将这些描述读给需要使用阅读器的使用者听，让他们知道图像的含义。如果由于某种原因无法加载图像，普通浏览器也会在页面上显示<code>alt</code> 属性中的备用文本：例如，网络错误、内容被屏蔽或链接过期时。</li> +</ul> + +<p>还有很多其他属性，可以实现各种不同的目的：</p> + +<ul> + <li><a href="/zh-CN/docs/Web/HTTP/Headers/Referrer-Policy">Referrer</a>/{{glossary("CORS")}} 控制，保证安全与隐私：详见 {{htmlattrxref("crossorigin", "img")}} 属性和 {{htmlattrxref("referrerpolicy", "img")}} 属性。</li> + <li>使用 {{htmlattrxref("width", "img")}}、{{htmlattrxref("height", "img")}} 和 {{htmlattrxref("intrinsicsize", "img")}} 设置 {{glossary("intrinsic size", "原始分辨率")}}：这将设置图像应占用的空间，以确保图像被加载之前页面的布局是稳定的。</li> + <li>使用 {{htmlattrxref("sizes", "img")}} 和 {{htmlattrxref("srcset", "img")}} 设置响应式图像（亦可参考 {{htmlelement("picture")}} 元素和我们的<a href="/zh-CN/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images">响应式图像</a>教程）。</li> +</ul> + +<h2 id="支持的图像格式">支持的图像格式</h2> + +<p>HTML 标准并没有给出需要支持的图像格式的列表，因此每个{{glossary("user agent", "用户代理")}}支持一组不同的格式。MDN 另有一份完整的<a href="/zh-CN/docs/Web/Media/Formats/Image_types">网页浏览器图像格式指南</a>可供参考。</p> + +<p>{{page("/zh-CN/docs/Web/Media/Formats/Image_types", "table-of-image-file-types")}}</p> + +<h2 id="图像加载错误">图像加载错误</h2> + +<p>如果在加载或渲染图像时发生错误，且设置了至少一个 {{htmlattrxref("onerror")}} 事件处理器来处理 {{event("error")}} 事件，那么设置的事件处理器就会被调用。这样的错误可能发生在各种不同的情况下，包括：</p> + +<ul> + <li><code>src</code> 属性的属性值为空（<code>""</code>）或者 <code>null</code>。</li> + <li><code>src</code> 属性的 {{glossary("URL")}} 和用户正在浏览的页面的 URL 完全相同。</li> + <li>图像出于某些原因损坏了，从而无法加载。</li> + <li>图像的元数据被破坏了，无法检索它的分辨率/宽高，而且在 <code><img></code> 元素的属性中没有指定宽度和/或高度。</li> + <li>{{glossary("user agent", "用户代理")}}尚未支持该图片所用的格式。</li> +</ul> + +<h2 id="属性">属性</h2> + +<p>此元素支持<a href="/zh-CN/docs/HTML/Global_attributes">全局属性</a>。</p> + +<dl> + <dt>{{htmlattrdef("alt")}}</dt> + <dd>定义了图像的备用文本描述。 + <div class="note"> + <p><strong>注意：</strong>浏览器并非总是会显示图像。比如：</p> + + <ul> + <li>非可视化浏览器（Non-visual browsers）（比如有视力障碍的人使用的音频浏览器）</li> + <li>用户选择不显示图像（比如为了节省带宽，或出于隐私等考虑不加载包括图片在内的第三方资源文件）</li> + <li>图像文件无效，或是使用了<a href="#Supported_image_formats">不支持的格式</a></li> + </ul> + + <p>在这些情况下，浏览器很可能会将图像替换为图像所属 <code><img></code> 元素的 <code>alt</code> 属性所提供的文本。基于上面罗列的原因，以及更多尚未列出的原因，建议尽可能地通过 <code>alt</code> 属性提供一些有用的信息。</p> + </div> + + <p>如果省略 <code>alt</code> 属性，则表明该图像是内容的关键部分，但没有等效的文本可用。<br> + 如果把这个属性设置为空字符串（<code>alt=""</code>），则表明该图像<em>不是</em>内容的关键部分（这是一种装饰或者一个追踪像素点），非可视化浏览器在{{glossary("Rendering engine", "渲染")}}的时候可能会忽略它。而且，如果图片加载失败，可视化浏览器会隐藏表示图片损坏的图标。</p> + + <p>将图像复制并粘贴为文本，或是将图像的链接保存为浏览器书签时，也会用到此属性。</p> + </dd> + <dt>{{htmlattrdef("crossorigin")}}</dt> + <dd>这个枚举属性表明是否必须使用 CORS 完成相关图像的抓取。<a href="/zh-CN/docs/CORS_Enabled_Image">启用 CORS 的图像</a> 可以在 {{HTMLElement("canvas")}} 元素中重复使用，而不会被<a href="/zh-CN/docs/Web/HTML/CORS_enabled_image#What_is_a_tainted_canvas">污染</a>（tainted）。允许的值有： + <dl> + <dt><code>anonymous</code></dt> + <dd>执行一个跨域请求（比如，有 {{httpheader("Origin")}} {{glossary("HTTP")}} header）。但是没有发送证书（比如，没有 cookie，没有 <a href="https://tools.ietf.org/html/rfc5280">X.509 证书</a>，没有 <a href="/zh-CN/docs/Web/HTTP/Authentication#Basic_authentication_scheme">HTTP 基本授权认证</a>）。如果服务器没有把证书给到源站（没有设置 {{httpheader("Access-Control-Allow-Origin")}} HTTP 头），图像会被污染，而且它的使用会被限制。</dd> + <dt><code>use-credentials</code></dt> + <dd>一个有证书的跨域请求（比如，有 <code>Origin</code> HTTP header）被发送 （比如，cookie, 一份证书，或者 HTTP 基本验证信息）。如果服务器没有给源站发送证书（通过 <code>Access-Control-Allow-Credentials</code> HTTP header），图像将会被污染，且它的使用会受限制。</dd> + </dl> + 当用户并未显式使用本属性时，默认不使用 CORS 发起请求（例如，不会向服务器发送<code>原有的</code>HTTP 头部信息），可防止其在 {{HTMLElement('canvas')}} 中的使用。如果无效，默认当做 <code>anonymous</code> 关键字生效。更多信息，请查看 <a href="mailto:hamoda.alhayek@msn.com">CORS 属性设置</a> 。</dd> + <dt>{{htmlattrdef("decoding")}}</dt> + <dd> + <p>为浏览器提供图像解码方式上的提示。允许的值：</p> + + <dl> + <dt><code>sync</code></dt> + <dd>同步解码图像，实现与其他内容的显示相互斥的原子显示。 + <div class="standardNoteBlock"> + <p><strong>译者注：</strong>这里的原文是：</p> + + <p>Decode the image synchronously, for atomic presentation with other content.</p> + + <p>此图像的解码将是一个原子操作，在完成解码显示之前，不被其他内容的显示而打断，因此其他内容的显示会被延迟。</p> + </div> + </dd> + <dt><code>async</code></dt> + <dd>异步解码图像，以减少其他内容的显示延迟。</dd> + <dt><code>auto</code></dt> + <dd>默认值：不指定解码方式，由浏览器决定哪一种对用户来说是最合适的。</dd> + </dl> + </dd> + <dt>{{htmlattrdef("height")}}</dt> + <dd>图像的高度，在 {{HTMLVersionInline(5)}} 中的单位是 CSS 像素，在 {{HTMLVersionInline(4)}} 中既可以是像素，也可以是百分比。可以只指定 <code>width</code> 和 <code>height</code> 中的一个值，浏览器会根据原始图像进行缩放。</dd> + <dt>{{htmlattrdef("importance")}} {{experimental_inline}}</dt> + <dd>指示下载资源时相对重要性，或者说优先级。允许的值： + <dl> + <dt><code>auto</code></dt> + <dd><strong>不指定优先级。</strong>浏览器可以使用自己的算法来为图像选择优先级。</dd> + <dt><code>high</code></dt> + <dd>此图像在下载时优先级<strong>较高</strong>。</dd> + <dt><code>low</code></dt> + <dd>此图像在下载时优先级<strong>较低</strong>。</dd> + </dl> + </dd> + <dt>{{htmlattrdef("intrinsicsize")}} {{deprecated_inline}}</dt> + <dd>This attribute tells the browser to ignore the actual {{glossary("intrinsic size")}} of the image and pretend it’s the size specified in the attribute. Specifically, the image would raster at these dimensions and <code>naturalWidth</code>/<code>naturalHeight</code> on images would return the values specified in this attribute. <a class="external" href="https://github.com/ojanvafai/intrinsicsize-attribute">Explainer</a>, <a class="external" href="https://googlechrome.github.io/samples/intrinsic-size/index.html">examples</a></dd> + <dt>{{htmlattrdef("ismap")}}</dt> + <dd>这个布尔属性表示图像是否是<a href="https://en.wikipedia.org/wiki/Image_map#Server-side">服务器端 map</a> 的一部分。如果是，那么点击图片的精准坐标将会被发送到服务器。 + <div class="note"> + <p><strong>使用说明：</strong>只有在 <code><img></code> 元素是一个拥有有效 {{htmlattrxref("href","a")}} 属性的 {{htmlelement("a")}} 元素的后代元素的情况下，这个属性才会被允许使用。</p> + </div> + </dd> + <dt>{{htmlattrdef("loading")}} {{experimental_inline}}</dt> + <dd>指示浏览器应当如何加载该图像。允许的值： + <dl> + <dt><code>eager</code></dt> + <dd>立即加载图像，不管它是否在可视视口（visible viewport）之外（默认值）。</dd> + <dt><code>lazy</code></dt> + <dd>延迟加载图像，直到它和视口接近到一个计算得到的距离，由浏览器定义。</dd> + </dl> + </dd> + <dt>{{htmlattrdef("referrerpolicy")}} {{experimental_inline}}</dt> + <dd>A string indicating which referrer to use when fetching the resource: + <ul> + <li><code>no-referrer</code>: The {{httpheader("Referer")}} header will not be sent.</li> + <li><code>no-referrer-when-downgrade</code>: No <code>Referer</code> header is sent when navigating to an origin without {{glossary("HTTPS")}}. This is the default if no policy is otherwise specified.</li> + <li><code>origin</code>: The <code>Referer</code> header will include the page's origin ({{glossary("scheme")}}, {{glossary("host")}}, and {{glossary("port")}}).</li> + <li><code>origin-when-cross-origin</code>: Navigating to other origins will limit the included referral data to the scheme, host, and port, while navigating from the same origin will include the full path and query string.</li> + <li><code>unsafe-url</code>: The <code>Referer</code> header will always include the origin, path and query string, but not the fragment, password, or username. <strong>This is unsafe</strong> because it can leak information from TLS-protected resources to insecure origins.</li> + </ul> + </dd> + <dt>{{htmlattrdef("sizes")}}</dt> + <dd>表示资源大小的、以逗号隔开的一个或多个字符串。每一个资源大小包括： + <ol> + <li>一个<a href="/zh-CN/docs/Web/CSS/Media_Queries/Using_media_queries#Syntax">媒体条件</a>。最后一项一定是被忽略的。</li> + <li>一个资源尺寸的值。</li> + </ol> + + <p>Media Conditions describe properties of the <em>viewport</em>, not of the <em>image</em>. For example, <code>(max-height: 500px) 1000px</code> proposes to use a source of 1000px width, if the <em>viewport </em>is not higher than 500px.</p> + + <p>资源尺寸的值被用来指定图像的预期尺寸。当 <code>srcset</code> 中的资源使用了宽度描述符 <code>w</code> 时，{{glossary("User agent", "用户代理")}}会使用当前图像大小来选择 <code>srcset</code> 中合适的一个图像 URL。被选中的尺寸影响图像的{{glossary("intrinsic size", "显示大小")}}（如果没有影响大小的 {{glossary("CSS")}} 样式被应用的话）。如果没有设置 <code>srcset</code> 属性，或者没有属性值，那么 <code>sizes</code> 属性也将不起作用。</p> + </dd> + <dt>{{htmlattrdef("src")}}</dt> + <dd>图像的 {{glossary("URL")}}，这个属性对 <code><img></code> 元素来说是必需的。在支持 <code>srcset</code> 的浏览器中，<code>src</code> 被当做拥有一个像素密度的描述符 <code>1x</code> 的候选图像处理，除非一个图像拥有这个像素密度描述符已经被在 <code>srcset</code> 或者 <code>srcset</code> 包含 <code>w</code> 描述符中定义了。</dd> + <dt>{{htmlattrdef("srcset")}}</dt> + <dd>以逗号分隔的一个或多个字符串列表表明一系列用户代理使用的可能的图像。每一个字符串由以下组成： + <ol> + <li>指向图像的 {{glossary("URL")}}。</li> + <li>可选地，再加一个空格之后，附加以下的其一： + <ul> + <li>一个宽度描述符，这是一个正整数，后面紧跟 '<code>w</code>' 符号。该整数宽度除以sizes属性给出的资源（source）大小来计算得到有效的像素密度，即换算成和x描述符等价的值。</li> + <li>一个像素密度描述符，这是一个正浮点数，后面紧跟 '<code>x</code>' 符号。</li> + </ul> + </li> + </ol> + + <p>如果没有指定源描述符，那它会被指定为默认的 <code>1x</code>。</p> + + <p>在相同的 <code>srcset</code> 属性中混合使用宽度描述符和像素密度描述符时，会导致该值无效。重复的描述符（比如，两个源在相同的 <code>srcset</code> 两个源都是 <code>2x</code>）也是无效的。</p> + + <p>The user agent selects any of the available sources at its discretion. This provides them with significant leeway to tailor their selection based on things like user preferences or {{glossary("bandwidth")}} conditions. See our <a href="/zh-CN/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images">Responsive images</a> tutorial for an example.</p> + </dd> + <dt>{{htmlattrdef("width")}}</dt> + <dd>图像的宽度，在 {{HTMLVersionInline(5)}} 中单位是 CSS 像素， 在 {{HTMLVersionInline(4)}} 中可以是像素也可以是百分比。</dd> + <dt>{{htmlattrdef("usemap")}}</dt> + <dd>与元素相关联的 <a href="/zh-CN/docs/HTML/Element/map">image map</a> 的部分 URL（以 '#' 开始的部分）。 + <div class="note"> + <p><strong>使用说明： </strong>如果 <code><img></code> 元素是 {{htmlelement("a")}} 或 {{HTMLElement("button")}} 元素的后代元素则不能使用这个属性。</p> + </div> + </dd> +</dl> + +<h3 id="已废弃的属性">已废弃的属性</h3> + +<dl> + <dt>{{htmlattrdef("align")}} {{Obsolete_Inline}} 使用 {{cssxref('vertical-align')}} CSS 属性</dt> + <dd>图像相对于它周围上下文的对齐。使用 {{cssxref('float')}} 和/或 {{cssxref('vertical-align')}} 这两个 {{glossary("CSS")}} 属性作为代替，而不是这个废弃的属性。允许的值： + <dl> + <dt><code>top</code></dt> + <dd>等价于 <code style="white-space: nowrap;">vertical-align: top</code> 或 <code style="white-space: nowrap;">vertical-align: text-top</code></dd> + <dt><code>middle</code></dt> + <dd>等价于 <code style="white-space: nowrap;">vertical-align: -moz-middle-with-baseline</code></dd> + <dt><code>bottom</code></dt> + <dd>默认值，等价于 <code style="white-space: nowrap;">vertical-align: unset</code> 或 <code style="white-space: nowrap;">vertical-align: initial</code></dd> + <dt><code>left</code></dt> + <dd>等价于 <code style="white-space: nowrap;">float: left</code></dd> + <dt><code>right</code></dt> + <dd>等价于 <code style="white-space: nowrap;">float: right</code></dd> + </dl> + </dd> + <dt>{{htmlattrdef("border")}} {{Obsolete_Inline}}</dt> + <dd>图像周围的边框宽度。使用 {{glossary("CSS")}} 属性 {{cssxref('border')}} 代替此废弃属性。</dd> + <dt>{{htmlattrdef("hspace")}} {{Obsolete_Inline}}</dt> + <dd>插入到图像的左侧和右侧的空白像素的值。使用 CSS 属性 {{cssxref('margin')}} 代替此废弃属性。</dd> + <dt>{{htmlattrdef("longdesc")}} {{Obsolete_Inline}}</dt> + <dd>一个指向更详细的图像描述的链接。可能的值是一个 {{glossary("URL")}} 或一个页面上其他元素的 {{htmlattrxref("id")}}。 + <div class="note"> + <p><strong>备注：</strong> 此属性的当前最新的 {{glossary("W3C")}} 版本，<a class="external" href="https://www.w3.org/TR/html52/obsolete.html#element-attrdef-img-longdesc">HTML 5.2</a> 中被提到，但在 {{glossary("WHATWG")}} 组织的 <a class="external" href="https://html.spec.whatwg.org/multipage/embedded-content.html#the-img-element">HTML Living Standard</a> 中依然处于被移除的状态。它的未来尚无定数；authors should use a {{glossary("WAI")}}-{{glossary("ARIA")}} alternative such as <a class="external" href="https://www.w3.org/TR/wai-aria-1.1/#aria-describedby"><code>aria-describedby</code></a> or <a class="external" href="https://www.w3.org/TR/wai-aria-1.1/#aria-details"><code>aria-details</code></a>.</p> + </div> + </dd> + <dt>{{htmlattrdef("name")}} {{Obsolete_Inline}}</dt> + <dd>元素的名字。使用 {{htmlattrxref("id")}} 属性代替此废弃属性。</dd> + <dt>{{htmlattrdef("vspace")}} {{Obsolete_Inline}}</dt> + <dd>插入到图像的上方和下方的空白像素的数组。使用 CSS 属性 {{cssxref('margin')}} 代替此废弃属性。</dd> +</dl> + +<h2 id="使用_CSS_为_<img>_附加样式">使用 CSS 为 <code><img></code> 附加样式</h2> + +<p><code><img></code> 是一个<a href="/zh-CN/docs/Web/CSS/Replaced_element">可替换元素</a>。它的 {{cssxref("display")}} 属性的默认值是 <code>inline</code>，但是它的默认分辨率是由被嵌入的图片的原始宽高来确定的，使得它就像 <code>inline-block</code> 一样。你可以为 <code><img></code> 设置 {{cssxref("border")}}/{{cssxref("border-radius")}}、{{cssxref("padding")}}/{{cssxref("margin")}}、{{cssxref("width")}}、{{cssxref("height")}} 等等的 CSS 属性。</p> + +<p><code><img></code> 没有基线（baseline），这意味着，当在一个行内格式的上下文（an inline formatting context）中使用 {{cssxref("vertical-align")}}<code>: baseline</code> 时，图像的底部将会与容器的文字基线对齐。</p> + +<p>You can use the {{cssxref("object-position")}} property to position the image within the element's box, and the {{cssxref("object-fit")}} property to adjust the sizing of the image within the box (for example, whether the image should fit the box or fill it even if clipping is required).</p> + +<p>根据图像文件的类型，图像可能会有一个原始分辨率（intrinsic dimension）或者叫原始宽高。对于一些类型的图像，原始分辨率并不是必要的。比如说，{{glossary("SVG")}} 图像，如果它们的根 {{SVGElement("svg")}} 元素没有 <code>width</code> 或 <code>height</code> 属性，SVG 图像就可以没有原始分辨率。</p> + +<div class="standardNoteBlock"> +<p><strong>译者注：</strong>原始分辨率/原始宽高是图像的固有属性，基本上就是图像本身的分辨率/宽高。只与图像本身有关，与 <code><img></code> 元素的属性、显示分辨率等等无关。点阵图像通常有且只有一个随图片宽高变化的原始分辨率，而矢量图像可以没有。不过，编辑矢量图像时，通常可以手动/编辑器自动为其设置原始分辨率。</p> +</div> + +<h2 id="示例">示例</h2> + +<h3 id="备用文字">备用文字</h3> + +<p>下面的示例将图像嵌入到页面中，且包含用于改善可访问性的备用文本。</p> + +<pre class="brush: html notranslate"><img src="https://developer.mozilla.org/static/img/favicon144.png" + alt="MDN logo"> +</pre> + +<p>{{ EmbedLiveSample('Alternative_text', '100%', '160') }}</p> + +<h3 id="图像链接">图像链接</h3> + +<p>此示例建立在前一个示例的基础上，展示了如何将图像转换为链接。为做到这一点，将 <code><img></code> 标签嵌套在 {{HTMLElement("a")}} 之内。这时，备用文本应当描述链接所指向的资源，就像是文本链接一样。</p> + +<pre class="brush: html notranslate"><a href="https://developer.mozilla.org"> + <img src="https://developer.mozilla.org/static/img/favicon144.png" + alt="Visit the MDN site"> +</a></pre> + +<p>{{ EmbedLiveSample('Image_link', '100%', '160') }}</p> + +<h3 id="使用_srcset_属性">使用 <code>srcset</code> 属性</h3> + +<p>在这个例子中，我们包含了一个 <code>srcset</code> 属性，它引用了 MDN 标志高清版本；在高分辨率设备上，它将被优先加载，取代 <code>src</code> 属性中的图像。在支持 <code>srcset</code> 的{{glossary("User agent", "用户代理")}}中，<code>src</code> 属性中的图片被作为 <code>1x</code> 候选项。</p> + +<pre class="brush: html notranslate"> <img src="https://developer.mozilla.org/static/img/favicon72.png" + alt="MDN logo" + srcset="https://developer.mozilla.org/static/img/favicon144.png 2x"></pre> + +<p>{{EmbedLiveSample("Using_the_srcset_attribute", "100%", "160")}}</p> + +<h3 id="使用_srcset_和_sizes_属性">使用 <code>srcset</code> 和 <code>sizes</code> 属性</h3> + +<p>在支持 <code>srcset</code> 的用户代理中，当使用 <code>w</code> 描述符时，src 属性会被忽略。当匹配了媒体条件 <code>(min-width: 600px)</code> 时，图像将宽 200px，否则宽 50vw（视图宽度的50%）。</p> + +<pre class="brush: html notranslate"> <img src="/files/16864/clock-demo-200px.png" + alt="Clock" + srcset="/files/16864/clock-demo-200px.png 200w, + /files/16797/clock-demo-400px.png 400w" + sizes="(max-width: 600px) 200px, 50vw"></pre> + +<p>{{EmbedLiveSample("Using_the_srcset_and_sizes_attributes", "100%", 350)}}</p> + +<div class="blockIndicator note"> +<p>若要看到大小调整的效果，请<a href="https://mdn.mozillademos.org/en-US/docs/Web/HTML/Element/img$samples/Using_the_srcset_and_sizes_attributes">打开单独的页面查看示例</a>，以便拖动窗口，调整内容区域的大小。</p> +</div> + +<h2 id="安全与隐私方面的考量">安全与隐私方面的考量</h2> + +<p>虽然 <code><img></code> 元素的用途是很单纯（原文：innocent）的，但是它们可对用户安全和隐私造成不良的后果。See <a href="/zh-CN/docs/Web/Security/Referer_header:_privacy_and_security_concerns">Referer header: privacy and security concerns</a> for more information and mitigations.</p> + +<h2 id="可访问性考量">可访问性考量</h2> + +<h3 id="使用有实际意义的备用描述">使用有实际意义的备用描述</h3> + +<p><code>alt</code> 属性的值应该清晰、简洁地描述图像的内容。它不应该描述“图像的存在”，或仅仅包含图像的文件名。如果因为图像没有等价的文本描述， <code>alt</code> 属性只得不写或留白，那么可以考虑使用其他方法来呈现图像试图传递的内容。</p> + +<h4 id="不要">不要</h4> + +<pre class="brush: html example-bad notranslate"><img alt="图片" src="penguin.jpg"> +</pre> + +<h4 id="而是">而是</h4> + +<pre class="brush: html example-good notranslate"><img alt="一只站在沙滩上的跳岩企鹅。" src="penguin.jpg"> +</pre> + +<p>当图像上没有 <code>alt</code> 属性时，一些屏幕阅读器可能会读出图像的文件名。如果文件名不能代表图像的内容，甚至是一团乱码，这可只能造成令人迷惑的体验。</p> + +<ul> + <li><a class="external" href="https://www.w3.org/WAI/tutorials/images/decision-tree/">An alt Decision Tree • Images • WAI Web Accessibility Tutorials</a></li> + <li><a class="external" href="https://axesslab.com/alt-texts/">Alt-texts: The Ultimate Guide — Axess Lab</a></li> + <li><a class="external" href="https://www.deque.com/blog/great-alt-text-introduction/">How to Design Great Alt Text: An Introduction | Deque</a></li> + <li><a href="/zh-CN/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.1_—_Providing_text_alternatives_for_non-text_content">MDN Understanding WCAG, Guideline 1.1 explanations</a></li> + <li><a class="external" href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/text-equiv-all.html">Understanding Success Criterion 1.1.1 | W3C Understanding WCAG 2.0</a></li> +</ul> + +<h3 id="title_属性"><code>title</code> 属性</h3> + +<p>{{htmlattrxref("title")}} 属性不是 <code>alt</code> 属性可接受的替代品。并且，避免将 <code>alt</code> 属性的值直接复制到同一幅图片的<code>title</code> 属性上。这样可能会让一些屏幕阅读器把同一段描述读两遍，造成一定程度上的困扰。</p> + +<p><code>title</code> 属性也不该被用作一幅图片在 <code>alt</code> 之外的补充说明信息。如果一幅图片需要小标题，使用 <code><a href="/zh-CN/docs/Web/HTML/Element/figure">figure</a></code> 或 <code><a href="/zh-CN/docs/Web/HTML/Element/figcaption">figcaption</a></code> 元素。</p> + +<p><code>title</code> 元素的值一般作为提示条(tooltip)呈现给用户，在光标于图片上停下后显示出来。尽管这<em>确实</em>能给用户提供更多的信息，您不该假定用户真的能看到：用户可能只有键盘或触摸屏。如果要把特别重要的信息提供给用户，选择上面提供的一种方法将其内联显示，而不是使用 <code>title</code> 。</p> + +<ul> + <li><a class="external" href="https://developer.paciellogroup.com/blog/2013/01/using-the-html-title-attribute-updated/">Using the HTML title attribute – updated | The Paciello Group</a></li> +</ul> + +<h2 id="技术信息">技术信息</h2> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/zh-CN/docs/Web/Guide/HTML/Content_categories">内容类别</a></th> + <td><a href="/zh-CN/docs/Web/Guide/HTML/Content_categories#Flow_content">流式内容</a>、<a href="/zh-CN/docs/Web/Guide/HTML/Content_categories#Phrasing_content">短语内容</a>、<a href="/zh-CN/docs/Web/Guide/HTML/Content_categories#Embedded_content">嵌入内容</a>, <a href="/zh-CN/docs/Web/Guide/HTML/Content_categories#Palpable_content">palpable content</a>. If the element has a <code>usemap</code> attribute, it also is a part of the interactive content category.</td> + </tr> + <tr> + <th scope="row">允许的内容</th> + <td>无，它是一个 {{Glossary("empty element", "空元素")}}。</td> + </tr> + <tr> + <th scope="row">标签省略</th> + <td>必须有开始标签，不可有结束标签。</td> + </tr> + <tr> + <th scope="row">允许的父元素</th> + <td>接受嵌入内容的任意元素。</td> + </tr> + <tr> + <th scope="row">允许的 ARIA 角色</th> + <td>任意</td> + </tr> + <tr> + <th scope="row">DOM 接口</th> + <td>{{domxref("HTMLImageElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="规范">规范</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">规范</th> + <th scope="col">状态</th> + <th scope="col">说明</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('Referrer Policy', '#referrer-policy-delivery-referrer-attribute', 'referrer attribute')}}</td> + <td>{{Spec2('Referrer Policy')}}</td> + <td>Added the <code>referrerpolicy</code> attribute.</td> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', 'embedded-content.html#the-img-element', '<img>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'embedded-content-0.html#the-img-element', '<img>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/objects.html#h-13.2', '<img>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + + + +<p>{{Compat("html.elements.img")}}</p> + +<h2 id="另见">另见</h2> + +<ul> + <li><a href="/zh-CN/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML">HTML 中的图片</a></li> + <li><a href="/zh-CN/docs/Web/Media/Formats/Image_types">图像文件类型与格式指南</a></li> + <li><a href="/zh-CN/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images">响应式图片</a></li> + <li>{{HTMLElement("picture")}}、{{HTMLElement("object")}} 和 {{HTMLElement("embed")}} 元素</li> + <li>其他与图像相关的 CSS 属性：{{cssxref("object-fit")}}、{{cssxref("object-position")}}、{{cssxref("image-orientation")}}、{{cssxref("image-rendering")}}，和 {{cssxref("image-resolution")}}。</li> +</ul> diff --git a/files/zh-cn/web/html/element/index.html b/files/zh-cn/web/html/element/index.html new file mode 100644 index 0000000000..fcacea3cfa --- /dev/null +++ b/files/zh-cn/web/html/element/index.html @@ -0,0 +1,107 @@ +--- +title: HTML 元素参考 +slug: Web/HTML/Element +tags: + - Element + - HTML + - Reference + - Web + - 元素 + - 参考 +translation_of: Web/HTML/Element +--- +<p>{{HTMLSidebar("Elements")}}</p> + +<p>此页面列出了所有使用{{Glossary("Tag","标签")}}创建的 {{Glossary("HTML")}} {{Glossary("Element","元素")}}。它们已被按照功能进行分组，以便您更轻松地找到想要的内容。同时，侧边栏中也按照字母排序列出了所有元素。</p> + +<div class="note"> +<p>若想获知更多关于HTML元素、属性的基本信息，请查阅 <a href="/zh-CN/docs/learn/HTML/Introduction_to_HTML">HTML 介绍</a>中的相关内容。</p> +</div> + +<h2 id="主根元素">主根元素</h2> + +<p>{{HTMLRefTable("HTML Root Element")}}</p> + +<h2 id="文档元数据">文档元数据</h2> + +<p>元数据（Metadata）含有页面的相关信息，包括样式、脚本及数据，能帮助一些软件（例如 {{Glossary("search engine", "搜索引擎")}}、{{Glossary("Browser","浏览器")}} 等等）更好地运用和渲染页面。对于样式和脚本的元数据，可以直接在网页里定义，也可以链接到包含相关信息的外部文件。</p> + +<p>{{HTMLRefTable("HTML Document Metadata")}}</p> + +<h2 id="分区根元素">分区根元素</h2> + +<p>{{HTMLRefTable("Sectioning Root Element")}}</p> + +<h2 id="内容分区">内容分区</h2> + +<p>内容分区元素允许你将文档内容从逻辑上进行组织划分。使用包括页眉(header)、页脚(footer)、导航(nav)和标题(h1~h6)等分区元素，来为页面内容创建明确的大纲，以便区分各个章节的内容。</p> + +<p>{{HTMLRefTable("HTML Sections")}}</p> + +<h2 id="文本内容">文本内容</h2> + +<p>使用 HTML 文本内容元素来组织在开标签 {{HTMLElement("body")}} 和闭标签 <code></body></code> 里的块或章节的内容。这些元素能标识内容的宗旨或结构，而这对于 {{Glossary("accessibility")}} 和 {{Glossary("SEO")}} 很重要。</p> + +<p>{{HTMLRefTable("HTML Grouping Content")}}</p> + +<h2 id="内联文本语义">内联文本语义</h2> + +<p>使用 HTML 内联文本语义（Inline text semantics）定义一个单词、一行内容，或任意文字的语义、结构或样式。</p> + +<p>{{HTMLRefTable("HTML Text-Level Semantics")}}</p> + +<h2 id="图片和多媒体">图片和多媒体</h2> + +<p>HTML 支持各种多媒体资源，例如图像、音频和视频。</p> + +<p>{{HTMLRefTable("multimedia")}}</p> + +<h2 id="内嵌内容">内嵌内容</h2> + +<p>除了常规的多媒体内容，HTML 可以包括各种其他的内容，即使它并不容易交互。</p> + +<p>{{HTMLRefTable({"include":["HTML embedded content"], "exclude":["multimedia"]})}}</p> + +<h2 id="脚本">脚本</h2> + +<p>为了创建动态内容和 Web 应用程序，HTML 支持使用脚本语言，最突出的就是 JavaScript。某些元素用于支持此功能。</p> + +<p>{{HTMLRefTable("HTML Scripting")}}</p> + +<h2 id="编辑标识">编辑标识</h2> + +<p>这些元素能标示出某个文本被更改过的部分。</p> + +<p>{{HTMLRefTable("HTML Edits")}}</p> + +<h2 id="表格内容">表格内容</h2> + +<p>这里的元素用于创建和处理表格数据。</p> + +<p>{{HTMLRefTable("HTML tabular data")}}</p> + +<h2 id="表单">表单</h2> + +<p>HTML 提供了许多可一起使用的元素，这些元素能用来创建一个用户可以填写并提交到网站或应用程序的表单。详情请参阅 <a href="/zh-CN/docs/Web/Guide/HTML/Forms">HTML 表单指南</a>。</p> + +<p>{{HTMLRefTable({"include": ["HTML forms"], "exclude":["Deprecated"]})}}</p> + +<h2 id="交互元素">交互元素</h2> + +<p>HTML 提供了一系列有助于创建交互式用户界面对象的元素。</p> + +<p>{{HTMLRefTable("HTML interactive elements")}}</p> + +<h2 id="Web_组件">Web 组件</h2> + +<p>Web 组件是一种与 HTML 相关联（HTML-related）的技术，简单来说，它允许开发者创建自定义元素，并如同普通的 HTML 一样使用它们。另外，也可以创建经过自定义的标准 HTML 元素。</p> + +<p>{{HTMLRefTable({"include":["Web Components"],"elements":["shadow"]})}}</p> + +<h2 id="过时的和弃用的元素">过时的和弃用的元素</h2> + +<div class="warning"> +<p><strong>警告：</strong>下面这些旧的 HTML 元素已被弃用，且不应再被使用。<strong>千万不要在新的项目中使用它们，并且要尽快替换旧项目中的残余。</strong>在此列出，仅供参考。</p> +</div> + +<p>{{HTMLRefTable({"include":["Deprecated","Obsolete"]})}}</p> diff --git a/files/zh-cn/web/html/element/input/button/index.html b/files/zh-cn/web/html/element/input/button/index.html new file mode 100644 index 0000000000..de6f8031bb --- /dev/null +++ b/files/zh-cn/web/html/element/input/button/index.html @@ -0,0 +1,251 @@ +--- +title: <input type="button"> +slug: Web/HTML/Element/Input/button +translation_of: Web/HTML/Element/input/button +--- +<p>{{HTMLRef}}</p> + +<p><span class="seoSummary"><code><strong>元素<input type="button"></strong></code> 是 <strong><code><input></code></strong> 元素的特殊版本，被用来创建一个没有默认值的可点击按钮。 它已经在HTML5被 <strong><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button"><button></a>元素取代</strong></span></p> + +<p>浏览器生成一个控件没有默认值的可点击按钮。该按钮上可有任何标签。该控件在不同的浏览器上，可能有不同的样式。</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="https://developer.mozilla.org/en-US/docs/HTML/Content_categories" title="HTML/Content_categories">Content categories</a></th> + <td><a href="https://developer.mozilla.org/en-US/docs/HTML/Content_categories#Flow_content" title="HTML/Content categories#Flow content">Flow content</a>, <a href="https://developer.mozilla.org/en-US/docs/HTML/Content_categories#Phrasing_content" title="HTML/Content categories#Phrasing content">phrasing content</a>, <a href="https://developer.mozilla.org/en-US/docs/HTML/Content_categories#Interactive_content" title="HTML/Content categories#Interactive content">Interactive content</a>, <a href="https://developer.mozilla.org/en-US/docs/HTML/Content_categories#Form_listed" title="HTML/Content categories#Form listed">listed</a>, <a href="https://developer.mozilla.org/en-US/docs/HTML/Content_categories#Form_labelable" title="HTML/Content categories#Form labelable">labelable</a>, and <a href="https://developer.mozilla.org/en-US/docs/HTML/Content_categories#Form_submittable" title="HTML/Content categories#Form submittable">submittable</a> <a href="https://developer.mozilla.org/en-US/docs/HTML/Content_categories#Form-associated_" title="HTML/Content categories#Form-associated ">form-associated</a> element, palpable content.</td> + </tr> + <tr> + <th scope="row">Permitted content</th> + <td><a href="https://developer.mozilla.org/en-US/docs/HTML/Content_categories#Phrasing_content" title="HTML/Content_categories#Phrasing_content">Phrasing content</a>.</td> + </tr> + <tr> + <th scope="row">Tag omission</th> + <td>None, both the starting and ending tag are mandatory.</td> + </tr> + <tr> + <th scope="row">Permitted parent elements</th> + <td>Any element that accepts <a href="https://developer.mozilla.org/en-US/docs/HTML/Content_categories#Phrasing_content" title="HTML/Content_categories#Phrasing_content">phrasing content</a>.</td> + </tr> + <tr> + <th scope="row">DOM interface</th> + <td><a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLButtonElement" title="The HTMLButtonElement interface provides properties and methods (beyond the <button> object interface it also has available to them by inheritance) for manipulating the layout and presentation of button elements."><code>HTMLButtonElement</code></a></td> + </tr> + <tr> + <th scope="row">元素属性</th> + <td>行内元素</td> + </tr> + </tbody> +</table> + +<h2 id="Attributes">Attributes</h2> + +<p>This element can have any of the <a href="/en-US/docs/HTML/Global_attributes">global attributes</a> in addition to the following:</p> + +<dl> + <dt>{{htmlattrdef("disabled")}}</dt> + <dd> + <p>This Boolean attribute indicates that the user cannot interact with the button. If this attribute is not specified, the button inherits its setting from the containing element, for example {{HTMLElement("fieldset")}}; if there is no containing element with the <code><strong>disabled</strong></code> attribute set, then the button is enabled. The disabled control's value isn't submitted with the form and the <code>click</code> event <a class="external" href="https://html.spec.whatwg.org/multipage/forms.html#enabling-and-disabling-form-controls:-the-disabled-attribute">will not be dispatched</a> on disabled controls.</p> + </dd> + <dd> + <p>Firefox will, unlike other browsers, by default, <a href="http://stackoverflow.com/questions/5985839/bug-with-firefox-disabled-attribute-of-input-not-resetting-when-refreshing">persist the dynamic disabled state</a> of a {{HTMLElement("button")}} across page loads. Use the {{htmlattrxref("autocomplete","button")}} attribute to control this feature.</p> + </dd> + <dt>{{htmlattrdef("autofocus")}} {{HTMLVersionInline(5)}}</dt> + <dd>This Boolean attribute lets you specify that the button should have input focus when the page loads, unless the user overrides it, for example by typing in a different control. Only one form-associated element in a document can have this attribute specified.</dd> + <dt>{{htmlattrdef("autocomplete")}} {{non-standard_inline}}</dt> + <dd>The use of this attribute on a {{HTMLElement("button")}} is nonstandard and Firefox-specific. By default, unlike other browsers, <a href="http://stackoverflow.com/questions/5985839/bug-with-firefox-disabled-attribute-of-input-not-resetting-when-refreshing">Firefox persists the dynamic disabled state</a> of a {{HTMLElement("button")}} across page loads. Setting the value of this attribute to <code>off</code> (i.e., <code>autocomplete="off"</code>) disables this feature.</dd> + <dt>{{htmlattrdef("form")}} {{HTMLVersionInline(5)}}</dt> + <dd>The form element that the button is associated with (its <em>form owner</em>). The value of the attribute must be the <strong>id</strong> attribute of a {{HTMLElement("form")}} element in the same document. If this attribute is not specified, the <code><button></code> element must be a descendent of a form element. This attribute enables you to place <code><button></code> elements anywhere within a document, not just as descendents of their {{HTMLElement("form")}} elements.</dd> + <dt>{{htmlattrdef("formenctype")}}</dt> + <dd>Since the input element is a submit button, the <code><strong>formenctype</strong></code> attribute specifies the type of content that is used to submit the form to the server. Possible values are: + <ul> + <li><code>application/x-www-form-urlencoded</code>: The default value if the attribute is not specified.</li> + <li><code>multipart/form-data</code>: This value is used if an {{HTMLElement("input")}} element is used with the {{htmlattrxref("type","input")}} attribute set to <code>file</code>.</li> + <li><code>text/plain</code></li> + </ul> + + <p>If this attribute is specified, it overrides the {{htmlattrxref("enctype","form")}} attribute of the element's form owner.</p> + </dd> + <dt>{{htmlattrdef("formaction")}} {{HTMLVersionInline(5)}}</dt> + <dd>The URI of a program that processes the information submitted by the button. If specified, it overrides the {{htmlattrxref("action","form")}} attribute of the button's form owner.</dd> + <dt>{{htmlattrdef("formmethod")}}</dt> + <dd>Since the input element is a submit button, the <code><strong>formmethod</strong></code> attribute specifies the HTTP method that the browser uses to submit the form. Possible values are: + <ul> + <li><code>post</code>: The data from the form is included in the body of the form and is sent to the server.</li> + <li><code>get</code>: The data from the form is appended to the <strong>form</strong> attribute URI, with a '?' as a separator, and the resulting URI is sent to the server. Use this method when the form has no side-effects and contains only ASCII characters.</li> + </ul> + + <p>If specified, this attribute overrides the {{htmlattrxref("method","form")}} attribute of the element's form owner.</p> + </dd> + <dt>{{htmlattrdef("formnovalidate")}}</dt> + <dd>Since the input element is a submit button, the <code><strong>formnovalidate </strong></code>attribute specifies that the form is not to be validated when it is submitted. If this attribute is specified, it overrides the {{htmlattrxref("novalidate","form")}} attribute of the element's form owner. This is a Boolean attribute.</dd> + <dt>{{htmlattrdef("formtarget")}}</dt> + <dd>Since the input element is a submit button, the <code><strong>formtarget</strong></code> attribute is a name or keyword indicating where to display the response that is received after submitting the form. This is a name of, or keyword for, a <em>browsing context</em> (for example, tab, window, or inline frame). If this attribute is specified, it overrides the {{htmlattrxref("target", "form")}} attribute of the element's form owner. The following keywords have special meanings: + <ul> + <li>_<code>self</code>: Load the response into the same browsing context as the current one. This value is the default if the attribute is not specified.</li> + <li><code>_blank</code>: Load the response into a new unnamed browsing context.</li> + <li><code>_parent</code>: Load the response into the parent browsing context of the current one. If there is no parent, this option behaves the same way as <code>_self</code>.</li> + <li><code>_top</code>: Load the response into the top-level browsing context (that is, the browsing context that is an ancestor of the current one, and has no parent). If there is no parent, this option behaves the same way as <code>_self</code>.</li> + </ul> + </dd> + <dt>{{htmlattrdef("name")}}</dt> + <dd>The name of the button, which is submitted with the form data.</dd> + <dt>{{htmlattrdef("type")}}</dt> + <dd>The type of the button. Possible values are: + <ul> + <li><code>submit</code>: The button submits the form data to the server. This is the default if the attribute is not specified, or if the attribute is dynamically changed to an empty or invalid value.</li> + <li><code>reset</code>: The button resets all the controls to their initial values.</li> + <li><code>button</code>: The button has no default behavior. It can have client-side scripts associated with the element's events, which are triggered when the events occur.</li> + </ul> + </dd> + <dt>{{htmlattrdef("value")}}</dt> + <dd>The initial value of the button.</dd> +</dl> + +<h2 id="举例">举例</h2> + +<p>这创建一个新的按钮<input>元素，文本显示出 'Click me'。</p> + +<pre class="brush: html"><input type="button" value="Click me"></pre> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table" style="height: 137px; width: 1065px;"> + <tbody> + <tr> + <td>Specification</td> + <td>Status</td> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', 'the-button-element.html#the-button-element', '<button>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'forms.html#the-button-element', '<button>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'interact/forms.html#h-17.5', '<button>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Google Chrome</th> + <th>Firefox (Gecko)</th> + <th> + <p>IE</p> + </th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>1.0</td> + <td>{{CompatGeckoDesktop("1.0")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>formenctype</code> attribute</td> + <td>9.0</td> + <td>{{CompatGeckoDesktop("2.0")}}</td> + <td>10</td> + <td>10.6</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>formmethod</code> attribute</td> + <td>9.0</td> + <td>{{CompatGeckoDesktop("2.0")}}</td> + <td>10</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>autofocus</code> attribute</td> + <td>9.0</td> + <td>{{CompatGeckoDesktop("2.0")}}</td> + <td>10</td> + <td>9.6</td> + <td>5.0</td> + </tr> + <tr> + <td><code>formaction</code> attribute</td> + <td>9.0</td> + <td>{{CompatGeckoDesktop("2.0")}}</td> + <td>10</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox 移动版(Gecko)</th> + <th>IE 移动版</th> + <th>Opera 移动版</th> + <th>Safari 移动版</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("1.0")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>formenctype</code> attribute</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("2.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>formmethod</code> attribute</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("2.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>formaction</code> attribute</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("2.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<p> </p> + +<h2 id="更多">更多</h2> + +<p> </p> + +<ul> + <li>The generic {{HTMLElement("input")}} element and the interface used to manipulate it, {{domxref("HTMLInputElement")}}</li> + <li>HTML5的替代方式为 <strong><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button"><button></a></strong> 元素</li> +</ul> diff --git a/files/zh-cn/web/html/element/input/checkbox/index.html b/files/zh-cn/web/html/element/input/checkbox/index.html new file mode 100644 index 0000000000..14a0d21aef --- /dev/null +++ b/files/zh-cn/web/html/element/input/checkbox/index.html @@ -0,0 +1,137 @@ +--- +title: <input type="checkbox"> +slug: Web/HTML/Element/Input/checkbox +translation_of: Web/HTML/Element/input/checkbox +--- +<p><span class="seoSummary">HTML input元素 <strong><code><input type="checkbox"></code></strong> 允许你为表单中（或不在表单中）的提交项选择一个单一值。</span></p> + +<div class="note"> +<p><strong>注意</strong>： 若表单提交时，checkbox未勾选，则提交的值并非为value=unchecked；此时的值不会被提交到服务器。</p> +</div> + +<h2 id="属性">属性</h2> + +<p>该元素包含<a href="https://developer.mozilla.org/zh-CN/docs/Web/HTML/Global_attributes">全局属性</a>。</p> + +<dl> + <dt>{{htmlattrdef("checked")}}</dt> + <dd> + <p>当<strong>type</strong>属性的值为<code>checkbox时</code>, 这个属性的存在表示input是否默认被选中。你可以将该属性设置为<code>checked="checked"，</code>或更简单地只设置为<code>checked。</code></p> + </dd> + <dt>{{htmlattrdef("value")}}</dt> + <dd>指定input的值。如果省略，获取该元素的值的结果为字符串"on"。<br> + 请注意，如果value值发生改变后页面重新加载，Gecko和IE<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=46845#c186">会忽略HTML源代码中设置的value值</a>。</dd> + <dt>{{htmlattrdef("indeterminate")}}</dt> + <dd>指定checkbox处于不定状态（在大多数平台，这样会产生一个划过checkbox的横线）。</dd> +</dl> + +<h2 id="示例">示例</h2> + +<pre class="brush: html"><p> + <input type="checkbox" id="cbox1" value="first_checkbox"> + <label for="cbox1">This is the first checkbox</label> +</p> +<p> + <input type="checkbox" id="cbox2" value="second_checkbox" checked="checked"> + <label for="cbox2">This is the second checkbox, which is checked</label> +</p> +</pre> + +<p>以上代码将产生2个checkbox，如下所示：</p> + +<p>{{EmbedLiveSample("Example")}}</p> + +<h2 id="规范">规范</h2> + +<table class="standard-table"> + <tbody> + <tr> + <td>规范</td> + <td>状态</td> + </tr> + <tr> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', 'forms.html#checkbox-state-(type=checkbox)', '<checkbox>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'forms.html#checkbox-state-(type=checkbox)', '<checkbox>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'interact/forms.html#checkbox', '<checkbox>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>特性</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>基本支持</td> + <td>1.0</td> + <td>{{CompatGeckoDesktop("1.7 or earlier")}}</td> + <td>2 or earlier</td> + <td>1.0</td> + <td>1.0</td> + </tr> + <tr> + <td>type=checkbox</td> + <td>1.0</td> + <td>{{CompatGeckoDesktop("1.7 or earlier")}}<br> + {{CompatGeckoDesktop("1.9.2")}} for <code>indeterminate</code> value</td> + <td>2</td> + <td>1.0</td> + <td>1.0</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>特性</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>基本支持</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("2.0")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>type=checkbox</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> diff --git a/files/zh-cn/web/html/element/input/color/index.html b/files/zh-cn/web/html/element/input/color/index.html new file mode 100644 index 0000000000..0645e125e6 --- /dev/null +++ b/files/zh-cn/web/html/element/input/color/index.html @@ -0,0 +1,220 @@ +--- +title: <input type="color"> +slug: Web/HTML/Element/Input/color +translation_of: Web/HTML/Element/input/color +--- +<p><strong><code><input type="color"></code>元素</strong>是{{HTMLElement("input")}}元素中的一个特定种类，用来创建一个允许用户使用颜色选择器，或输入兼容CSS语法的颜色代码的区域。（不支持Alpha通道）</p> + +<p>此元素的外观会因浏览器不同而不同，可能是简单的验证颜色输入格式的文本框，也可能使用平台原生或自定义样式的颜色选择器。其UI除要能接收文本格式的颜色外，未要求其他特性。（<a href="https://www.w3.org/TR/html5/forms.html#color-state-%28type=color%29">更多信息</a>）</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/zh-CN/docs/Web/Guide/HTML/Content_categories">内容分类</a></th> + <td><a href="/zh-CN/docs/Web/Guide/HTML/Content_categories#Flow_content">流动区域</a>, <a href="/zh-CN/docs/Web/Guide/HTML/Content_categories#Form_listed">列表</a>, <a href="/zh-CN/docs/Web/Guide/HTML/Content_categories#Form_submittable">可提交</a>, <a href="https://developer.mozilla.org/zh-CN/docs/Web/Guide/HTML/Content_categories#Form_resettable">可重置</a>, <a href="/zh-CN/docs/Web/Guide/HTML/Content_categories#Form-associated_content">表单相关元素</a>, <a href="/zh-CN/docs/Web/Guide/HTML/Content_categories#Phrasing_content">短语内容</a>, 可标记元素, 可触摸元素。</td> + </tr> + <tr> + <th scope="row">允许的内容</th> + <td>无，这是一个 {{Glossary("empty element")}}。</td> + </tr> + <tr> + <th scope="row">标签省略</th> + <td>必须有开始标签，必须没有结束标签。</td> + </tr> + <tr> + <th scope="row">允许的父级元素</th> + <td>任何接受<a href="/zh-CN/docs/Web/Guide/HTML/Content_categories#Phrasing_content">短语内容</a>的元素。</td> + </tr> + <tr> + <th scope="row">DOM接口</th> + <td>{{domxref("HTMLInputElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="属性">属性</h2> + +<p>该元素具有下面属性及其他的<a href="/zh-CN/docs/Web/HTML/Global_attributes">全局属性</a>。</p> + +<dl> + <dt>{{htmlattrdef("autocomplete")}}{{HTMLVersionInline("5")}}</dt> + <dd>设置颜色区域的autocomplete值。如果为true，则将自动填充颜色选择器上次存储的值。</dd> + <dt>{{htmlattrdef("autofocus")}}{{HTMLVersionInline("5")}}</dt> + <dd>此布尔值属性使你可以指定当页面加载时，表单区域是否应当获得输入焦点。除非用户的操作覆盖这个属性，例如：在其他区域内进行输入。在整个文档中，只有一个元素可以拥有<strong>autofocus</strong>属性，值为布尔值。</dd> + <dt>{{htmlattrdef("disabled")}}</dt> + <dd> + <p>此布尔值标明颜色选择其是否不可用于交互。另外，disabled时的值不会随表单提交。</p> + </dd> + <dt>{{htmlattrdef("name")}}</dt> + <dd>随表单一起提交的颜色选择器的name。</dd> + <dt>{{htmlattrdef("value")}}</dt> + <dd>颜色选择器的value，指定颜色选择器默认选择的颜色。input的value值必须是长度为7的字符串，以#开始，包含16进制格式的颜色值。例如：#FF0000为红色的16进制值。</dd> +</dl> + +<h2 id="使用">使用</h2> + +<p><code>"color"</code>类型的输入内容比较简单。</p> + +<pre class="brush: html"><input type="color" /> +</pre> + +<h3 id="默认值">默认值</h3> + +<p>你可以给上面的例子添加一个默认值，对元素本身和选色器都生效。</p> + +<pre class="brush: html"><input type="color" value="#ff0000" /> +</pre> + +<p>上述代码会创建一个默认选择红色的颜色选择器。</p> + +<p>{{EmbedLiveSample("Providing_a_default_color", 700, 30)}}</p> + +<p>下面的图片展示了macOS平台Chrome浏览器的颜色选择器：</p> + +<p><img alt="This is how an input type color looks on Mac and within Chrome" src="https://mdn.mozillademos.org/files/12311/Input_Type_Color_sample.png" style="height: 400px; width: 318px;"></p> + +<p>如果你没有手动指定的话，元素的默认值为<code>"#000000"</code>，即黑色。输入必须为7个字符，以"#"符号开始，后跟代表红、绿、蓝的十六进制字符各2个，形如<code>"#rrggbb"</code>。如果你想输入的颜色是其他格式（比如CSS中的<code>rgb()</code>或<code>rgba()</code>记法），在设定<code>value</code>值时必须将其转换为这种格式。</p> + +<h3 id="监听颜色变化">监听颜色变化</h3> + +<p>正如其他类型的{{HTMLElement("input")}}元素，有两个和值的改变相关的事件，{{event("input")}}和{{event("change")}}：</p> + +<ul> + <li>每次颜色变更都会触发元素上的<code>input</code>事件。</li> + <li>用户关闭选色器之后会触发<code>change</code>事件。</li> +</ul> + +<p>对于这两个事件，都可以通过{{domxref("HTMLInputElement.value", "value")}}属性获取新值。</p> + +<pre class="brush: js line-numbers language-js"><code class="language-js">colorPicker<span class="punctuation token">.</span><span class="function token">addEventListener</span><span class="punctuation token">(</span><span class="string token">"input"</span><span class="punctuation token">,</span> updateFirst<span class="punctuation token">,</span> <span class="keyword token">false</span><span class="punctuation token">)</span><span class="punctuation token">;</span> +colorPicker<span class="punctuation token">.</span><span class="function token">addEventListener</span><span class="punctuation token">(</span><span class="string token">"change"</span><span class="punctuation token">,</span> watchColorPicker<span class="punctuation token">,</span> <span class="keyword token">false</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + +<span class="keyword token">function</span> <span class="function token">watchColorPicker</span><span class="punctuation token">(</span>event<span class="punctuation token">)</span> <span class="punctuation token">{</span> + document<span class="punctuation token">.</span><span class="function token">querySelectorAll</span><span class="punctuation token">(</span><span class="string token">"p"</span><span class="punctuation token">)</span><span class="punctuation token">.</span><span class="function token">forEach</span><span class="punctuation token">(</span><span class="keyword token">function</span><span class="punctuation token">(</span>p<span class="punctuation token">)</span> <span class="punctuation token">{</span> + p<span class="punctuation token">.</span>style<span class="punctuation token">.</span>color <span class="operator token">=</span> event<span class="punctuation token">.</span>target<span class="punctuation token">.</span>value<span class="punctuation token">;</span> + <span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span> +<span class="punctuation token">}</span></code></pre> + +<h3 id="选取值">选取值</h3> + +<p>如果浏览器的实现不支持为<code>"color"</code>类型的{{HTMLElement("input")}}元素提供选色器而只有一个文本框，可以使用{{domxref("HTMLInputElement.select", "select()")}}方法选取输入内容。如果浏览器提供了选色器，<code>select()</code>方法将会什么也不做。因此，需要留心这两种情况下方法行为的差异。</p> + +<pre class="brush: js">colorWell.select();</pre> + +<h3 id="实现差异">实现差异</h3> + +<p>如上文所说，如果浏览器不提供选色器，此元素将会显示为一个具备输入验证功能的文本框。例如，在Safari 10.1中，你将会看到以下内容：</p> + +<p><img alt="Screenshot of the example taken in Safari." src="https://mdn.mozillademos.org/files/14899/input-color-safari.png" style="border-style: solid; border-width: 1px; height: 160px; width: 598px;"></p> + +<p>而相同的内容在Firefox 55下则会显示成：</p> + +<p><img alt="Screenshot of the example taken in Firefox 55 for macOS" src="https://mdn.mozillademos.org/files/14901/input-color-firefox.png" style="border-style: solid; border-width: 1px; height: 160px; width: 598px;"></p> + +<p>如果点击元素，则会弹出选色器，在此例中，为macOS平台的选色器。</p> + +<p><img alt="Screenshot of the element with the color picker open in Firefox Mac." src="https://mdn.mozillademos.org/files/14903/input-with-picker-firefox-mac.png" style="border-style: solid; border-width: 1px; height: 405px; width: 682px;"></p> + +<h2 id="验证">验证</h2> + +<p>如果当前的{{Glossary("user agent")}}下，用户输入无法转换为7个字符的十六进制RGB形式，会被判定为非法输入。在这种情况下，{{cssxref(":invalid")}}伪类会生效。</p> + +<h2 id="规范">规范</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">规范</th> + <th scope="col">状态</th> + <th scope="col">注释</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'the-input-element.html#the-input-element')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'forms.html#the-input-element')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'interact/forms.html#h-17.4')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td>初始定义</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>特性</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>基本支持</td> + <td>1.0</td> + <td>12</td> + <td>{{CompatGeckoDesktop("1.0")}}</td> + <td>2</td> + <td>1.0</td> + <td>1.0</td> + </tr> + <tr> + <td>type="color"</td> + <td>20.0</td> + <td>38</td> + <td>{{CompatGeckoDesktop("29.0")}} <sup><a href="#footnote_1">[1]</a></sup></td> + <td>{{CompatNo}}</td> + <td>11.01</td> + <td>10</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>特性</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>基本支持</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("2.0")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>type=color</td> + <td>4.4</td> + <td>{{CompatGeckoDesktop("27.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<p id="footnote_1">[1] 在Windows Touch上尚未实现。</p> diff --git a/files/zh-cn/web/html/element/input/date/index.html b/files/zh-cn/web/html/element/input/date/index.html new file mode 100644 index 0000000000..70199c42e2 --- /dev/null +++ b/files/zh-cn/web/html/element/input/date/index.html @@ -0,0 +1,505 @@ +--- +title: <input type="date"> +slug: Web/HTML/Element/Input/date +translation_of: Web/HTML/Element/input/date +--- +<p>{{HTMLRef}}</p> + +<p>日期类{{htmlelement("input")}}元素会创建一个让用户输入一个日期的输入区域，可以使用自动验证内容的文本框，也可以使用特殊的日期选择器界面。结果值包括年份，月份和日期，但不包括时间。<a href="/en-US/docs/Web/HTML/Element/input/time">time</a> 和 <a href="/en-US/docs/Web/HTML/Element/input/datetime-local">datetime-local</a>输入类支持time 和 date/time 输入。</p> + +<p>通常来说控件的UI界面因浏览器的不同而有变化，到目前为止此控件还不被所有浏览器支持，具体细节请参阅{{anch("Browser compatibility")}}（浏览器兼容性）。在不支持的浏览器当中，控件因此会被优雅的降级为普通的<a href="/en-US/docs/Web/HTML/Element/input/text"><input type="text"></a>输入框。</p> + +<div id="Basic_example"> +<pre class="brush: html"><input id="date" type="date"></pre> + +<p>{{ EmbedLiveSample('Basic_example', 600, 40) }}</p> +</div> + +<p>其中，Chrome/Opera浏览器为用户选择日期提供了一个普通的操作界面，看起来是下面的样子：</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/14909/date-picker-chrome.png" style="display: block; height: 220px; margin: 0px auto; width: 275px;"></p> + +<p>Edge的日期控件看起来是这样子的:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/14911/date-picker-edge.png" style="display: block; margin: 0 auto;"></p> + +<p>Firefox的日期控件看起来是这样子的:</p> + +<p><img alt="Datepicker UI in firefox" src="https://mdn.mozillademos.org/files/15644/firefox_datepicker.png" style="display: block; margin: 0 auto;"></p> + +<table class="properties"> + <tbody> + <tr> + <td><strong>{{anch("Value")}}</strong></td> + <td>一个代表按照 YYYY-MM-DD 格式化过的日期 {{domxref("DOMString")}}，或者是为空</td> + </tr> + <tr> + <td><strong>Events</strong></td> + <td>{{event("change")}} 事件和 {{event("input")}}事件</td> + </tr> + <tr> + <td><strong>Supported Common Attributes</strong></td> + <td>{{htmlattrxref("autocomplete", "input")}}, {{htmlattrxref("list", "input")}}, {{htmlattrxref("readonly", "input")}}, 和 {{htmlattrxref("step", "input")}}</td> + </tr> + <tr> + <td><strong>IDL attributes</strong></td> + <td><code>list</code>, <code>value</code>, <code>valueAsDate</code>, <code>valueAsNumber</code>.</td> + </tr> + <tr> + <td><strong>Methods</strong></td> + <td>{{domxref("HTMLInputElement.select", "select()")}}, {{domxref("HTMLInputElement.stepDown", "stepDown()")}}, {{domxref("HTMLInputElement.stepUp", "stepUp()")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Value">Value</h2> + +<p>一个 {{domxref("DOMString")}} 代表着输入到输入框的日期值。您可以通过在 {{htmlattrxref("value", "input")}} 属性中包含日期来为输入设置默认值，如下所示：</p> + +<pre class="brush: html"><input id="date" type="date" value="2017-06-01"></pre> + +<p>{{ EmbedLiveSample('Value', 600, 40) }}</p> + +<p>有一点需要注意的是，在格式方面显示的日期与实际的不一样 — 显示的日期格式取决于用户浏览器的区域设定，而日期值的格式始终为 <code>yyyy-mm-dd。</code></p> + +<p>当然你也可以在JavaScript中通过input元素的 {{domxref("HTMLInputElement.value", "value")}} 属性获取和设置日期值，例如:</p> + +<pre class="brush: js">var dateControl = document.querySelector('input[type="date"]'); +dateControl.value = '2017-06-01';</pre> + +<p>这行代码查找类型为date的第一个input元素，并且将其值设置为2017-06-01（2017年6月1日）</p> + +<h2 id="使用日期输入控件">使用日期输入控件</h2> + +<p>日期控件，一开始听起来可能觉得很方便。它们不仅提供了一个简单的日期选择UI界面，还规范了发往后台的数据格式，无论用户在什么区域。但是，由于浏览器支持的限制，<input type="date"> 仍然存在一些问题。</p> + +<p>我们将探寻一些关于 <input type="date"> 基础的和更复杂的的用法，然后就以后减轻浏览器支持问题提供建议（请参阅{{anch("Handling browser support")}}）。</p> + +<h3 id="日期控件基本用法">日期控件基本用法</h3> + +<p>一个基础的 <input> 和 {{htmlelement("label")}} 元素组合是 <input type="date"> 最简单的使用方法，如下所示：</p> + +<pre class="brush: html"><form> + <div> + <label for="bday">Enter your birthday:</label> + <input type="date" id="bday" name="bday"> + </div> +</form></pre> + +<p>{{ EmbedLiveSample('Basic_uses_of_date', 600, 40) }}</p> + +<h3 id="设置日期最大和最小值">设置日期最大和最小值</h3> + +<p>你可以通过 {{htmlattrxref("min", "input")}} 和 {{htmlattrxref("max", "input")}} 属性去限制用户的可选日期范围。在随后的例子中，我们将设定日期最小值为 <code>2017-04-01</code> 最大值为 <code>2017-04-30 </code>。</p> + +<pre class="brush: html"><form> + <div> + <label for="party">Choose your preferred party date:</label> + <input type="date" id="party" name="party" min="2017-04-01" max="2017-04-30"> + </div> +</form></pre> + +<p>{{ EmbedLiveSample('Setting_maximum_and_minimum_dates', 600, 40) }}</p> + +<p>在结果中我们可以看到，只有2017年4月份的日期可选 — 输入框中可以编辑的部分只有 “日” 这部分，并且超出4月份以外的日期不能通过日期控件的选择小部件选择。</p> + +<div class="note"> +<p><strong>注意</strong>: 您应该可以使用step属性来改变每次最佳日期时步进（增加值）的天数（例如：或许你只希望使周六可以选）。但是，在编写本文的任何实现中，这似乎并不奏效。</p> +</div> + +<h3 id="控制输入框大小">控制输入框大小</h3> + +<p><code><input type="date"></code> 不支持表单属性 {{htmlattrxref("size", "input")}}. 对于大小需求，你必须祈求于 <a href="/en-US/docs/Web/CSS">CSS</a> 的帮助.</p> + +<h2 id="验证">验证</h2> + +<p>默认情况下, <code><input type="date"></code> 对输入的值不会做任何校验。 UI实现通常不会让你输入任何不适日期的东西 — 这一点很有帮助 — 但是你任然可以留空或者 (在被优雅降级为 <code>text</code> 类型的输入框) 输入一个不合法的值 (例如： 4月32号)。</p> + +<p>如果你使用 {{htmlattrxref("min", "input")}} 和 {{htmlattrxref("min", "input")}} 属性去限制可用日期 (参见 {{anch("Setting maximum and minimum dates")}}),对于支持的浏览器来说如果你尝试提交一个超出给定范围的日期，那么它将抛出一个错误。然而, 你必须检查这些结果以确保他们在这些日期范围内, 因为只有在用户设备上完全支持日期选择器的情况下，才能执行这些操作。</p> + +<p>另外， 您可以使用 {{htmlattrxref("required", "input")}} 属性强制填写日期, 如果你尝试提交一个未填写日期的域那么将会抛出错误。 至少在大多数浏览器是可以工作的。</p> + +<p>让我们看一个例子 — 我们设置了日期的最大和最小值, 并且设定为必填:</p> + +<pre class="brush: html"><form> + <div> + <label for="party">Choose your preferred party date (required, April 1st to 20th):</label> + <input type="date" id="party" name="party" min="2017-04-01" max="2017-04-20" required> + <span class="validity"></span> + </div> + <div> + <input type="submit"> + </div> +</form></pre> + +<p>如果你尝试提交一个不完整日期的表单 (或者超出日期选择设定范围), 浏览器将会出现一个错误。 尝试一下这个例子:</p> + +<p>{{ EmbedLiveSample('Validation', 600, 100) }}</p> + +<p>这个截图是为那些浏览器不支持的人准备的:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/14913/date-picker-chrome-error-message.png" style="border-style: solid; border-width: 1px; display: block; margin: 0px auto;"></p> + +<p>这是上面例子使用的css。我们用 {{cssxref(":valid")}} and {{cssxref(":invalid")}} 属性去命名，以区别当前值的有效性 。我们必须把图标放在 input 旁边的 {{htmlelement("span")}}里面，而并不是它本身, 因为在Chrome中被放置在表单中生成的内容不能有效的样式化或者显示。</p> + +<pre class="brush: css">div { + margin-bottom: 10px; + display: flex; + align-items: center; +} + +label { + display: inline-block; + width: 300px; +} + +input:invalid+span:after { + content: '✖'; + padding-left: 5px; +} + +input:valid+span:after { + content: '✓'; + padding-left: 5px; +}</pre> + +<div class="warning"> +<p><strong>重要</strong>: HTML表单验证并不能替代脚本去确保输入值是有效的格式。一些人很容易调整HTML绕过验证，或者完全移除验证.。当然一些人也可能很容易的绕过你的验证，直接把数据提交到你的服务器。如果你的服务器无法验证它接收到的数据，当提交了不正确的数据之后可能会导致灾难性的后果 (或者数据量太大，错误的类型等等).</p> +</div> + +<h2 id="手持設備浏览器支持">手持設備浏览器支持</h2> + +<p>正如刚才提到的，在编写本文时使用日期输入的主要问题就是 {anch("Browser compatibility", "browser support")}} （浏览器支持）. 举一个例子, 在安卓系统的Firefox中选择器是这样子的:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/14915/date-picker-fxa.png" style="display: block; margin: 0 auto;"></p> + +<p>在不支持的浏览器上会被降级为文本输入框, 但这同时带来了用户界面不统一（呈现的控件不同）和数据处理方面的问题。</p> + +<p>第二个问题更为严重；正如我们早些时候提到的，对于日期输入框， 实际值总是会被格式化微 <code>yyyy-mm-dd</code>. 另一方面对于文本输入框，默认情况下浏览器并不知道日期格式应该怎么样被格式化， 而且人们书写日期格式的方式有很多，例如:</p> + +<ul> + <li><code>ddmmyyyy</code></li> + <li><code>dd/mm/yyyy</code></li> + <li><code>mm/dd/yyyy</code></li> + <li><code>dd-mm-yyyy</code></li> + <li><code>mm-dd-yyyy</code></li> + <li><code>Month dd yyyy</code></li> +</ul> + +<p> 解决这些问题的方法之一就是放置一个 {{htmlattrxref("pattern", "input")}} 属性在日期控件上 。即使日期输入不使用它，文本输入将会用到。例如， 请尝试在不支持的浏览器上看下面的例子:</p> + +<pre class="brush: html"><form> + <div> + <label for="bday">Enter your birthday:</label> + <input type="date" id="bday" name="bday" required pattern="[0-9]{4}-[0-9]{2}-[0-9]{2}"> + <span class="validity"></span> + </div> + <div> + <input type="submit"> + </div> +</form></pre> + +<p>{{ EmbedLiveSample('Handling_browser_support', 600, 100) }}</p> + +<p>如果你尝试提交，如果你的输入不符合正则表达式 <code>nnn-nn-nn</code>（<code>n</code> 是0到9的数字）， 你将会看到浏览器显示一个错误(并且高亮显示输入无效) 。 当然，这并不能阻止人们输入无效的日期或者格式不正确的日期，例如<code>yyyy-dd-mm</code> (而我们想要的 <code>yyyy-mm-dd</code>)。因此我们仍然有一个问题。</p> + +<div class="hidden"> +<pre class="brush: css">div { + margin-bottom: 10px; +} + +input:invalid + span { + position: relative; +} + +input:invalid + span:after { + content: '✖'; + position: absolute; + right: -18px; +} + +input:valid + span { + position: relative; +} + +input:valid + span:after { + content: '✓'; + position: absolute; + right: -18px; +}</pre> +</div> + +<p>目前以跨浏览器方式处理表单中日期的最佳方式是让用户在单独的控件中输入 日 ， 月 和 年 ({{htmlelement("select")}} 元素正越来越受欢迎; 请看下面的实现), 或者使用JavaScript库， 例如 <a href="https://jqueryui.com/datepicker/">jQuery date picker</a>.</p> + +<h2 id="例子">例子</h2> + +<p>在这个例子中，我们创建了两组用于选择日期的UI元素: 一个本地 <code><input type="date"></code> 选择器 和 一组三个 {{htmlelement("select")}} 元素用于选择不支持本地输入的旧浏览器中的日期。</p> + +<p>{{ EmbedLiveSample('Examples', 600, 100) }}</p> + +<h3 id="HTML">HTML</h3> + +<p>HTML看起来像这样:</p> + +<pre class="brush: html"><form> + <div class="nativeDatePicker"> + <label for="bday">Enter your birthday:</label> + <input type="date" id="bday" name="bday"> + <span class="validity"></span> + </div> + <p class="fallbackLabel">Enter your birthday:</p> + <div class="fallbackDatePicker"> + <span> + <label for="day">Day:</label> + <select id="day" name="day"> + </select> + </span> + <span> + <label for="month">Month:</label> + <select id="month" name="month"> + <option selected>January</option> + <option>February</option> + <option>March</option> + <option>April</option> + <option>May</option> + <option>June</option> + <option>July</option> + <option>August</option> + <option>September</option> + <option>October</option> + <option>November</option> + <option>December</option> + </select> + </span> + <span> + <label for="year">Year:</label> + <select id="year" name="year"> + </select> + </span> + </div> +</form></pre> + +<p>月份是写死的 (因为月份是固定的), 而日和年的值是根据当前选择的月份和年份（日的判定需要月份和年份）以及当年 动态生成的(请参阅下面的代码注释，他们详细的阐释了这些功能是如何工作的。)</p> + +<div class="hidden"> +<pre class="brush: css">input:invalid+span:after { + content: '✖'; + padding-left: 5px; +} + +input:valid+span:after { + content: '✓'; + padding-left: 5px; +}</pre> +</div> + +<h3 id="JavaScript">JavaScript</h3> + +<p>代码的另一部分也可能是最有意思的部分那就是特征检验代码 — 去检测浏览器是否支持 <code><input type="date"></code>, 我们创建一个新的 {{htmlelement("input")}} 元素, 设置它的 <code>type</code> 为 <code>date</code>,然后立刻检查它的类型 —不支持的浏览器将会返回 <code>text</code>, 因为 <code>date</code> 类型会被优雅的降级为<code>text</code>。如果 <code><input type="date"></code> 不被浏览器支持, 我们隐藏本地选取器并用备用选取器UI ({{htmlelement("select")}}) 替代.</p> + +<pre class="brush: js">// define variables +var nativePicker = document.querySelector('.nativeDatePicker'); +var fallbackPicker = document.querySelector('.fallbackDatePicker'); +var fallbackLabel = document.querySelector('.fallbackLabel'); + +var yearSelect = document.querySelector('#year'); +var monthSelect = document.querySelector('#month'); +var daySelect = document.querySelector('#day'); + +// hide fallback initially +fallbackPicker.style.display = 'none'; +fallbackLabel.style.display = 'none'; + +// test whether a new date input falls back to a text input or not +var test = document.createElement('input'); +test.type = 'date'; + +// if it does, run the code inside the if() {} block +if(test.type === 'text') { + // hide the native picker and show the fallback + nativePicker.style.display = 'none'; + fallbackPicker.style.display = 'block'; + fallbackLabel.style.display = 'block'; + + // populate the days and years dynamically + // (the months are always the same, therefore hardcoded) + populateDays(monthSelect.value); + populateYears(); +} + +function populateDays(month) { + // delete the current set of <option> elements out of the + // day <select>, ready for the next set to be injected + while(daySelect.firstChild){ + daySelect.removeChild(daySelect.firstChild); + } + + // Create variable to hold new number of days to inject + var dayNum; + + // 31 or 30 days? + if(month === 'January' || month === 'March' || month === 'May' || month === 'July' || month === 'August' || month === 'October' || month === 'December') { + dayNum = 31; + } else if(month === 'April' || month === 'June' || month === 'September' || month === 'November') { + dayNum = 30; + } else { + // If month is February, calculate whether it is a leap year or not + var year = yearSelect.value; + (year - 2016) % 4 === 0 ? dayNum = 29 : dayNum = 28; + } + + // inject the right number of new <option> elements into the day <select> + for(i = 1; i <= dayNum; i++) { + var option = document.createElement('option'); + option.textContent = i; + daySelect.appendChild(option); + } + + // if previous day has already been set, set daySelect's value + // to that day, to avoid the day jumping back to 1 when you + // change the year + if(previousDay) { + daySelect.value = previousDay; + + // If the previous day was set to a high number, say 31, and then + // you chose a month with less total days in it (e.g. February), + // this part of the code ensures that the highest day available + // is selected, rather than showing a blank daySelect + if(daySelect.value === "") { + daySelect.value = previousDay - 1; + } + + if(daySelect.value === "") { + daySelect.value = previousDay - 2; + } + + if(daySelect.value === "") { + daySelect.value = previousDay - 3; + } + } +} + +function populateYears() { + // get this year as a number + var date = new Date(); + var year = date.getFullYear(); + + // Make this year, and the 100 years before it available in the year <select> + for(var i = 0; i <= 100; i++) { + var option = document.createElement('option'); + option.textContent = year-i; + yearSelect.appendChild(option); + } +} + +// when the month or year <select> values are changed, rerun populateDays() +// in case the change affected the number of available days +yearSelect.onchange = function() { + populateDays(monthSelect.value); +} + +monthSelect.onchange = function() { + populateDays(monthSelect.value); +} + +//preserve day selection +var previousDay; + +// update what day has been set to previously +// see end of populateDays() for usage +daySelect.onchange = function() { + previousDay = daySelect.value; +}</pre> + +<div class="note"> +<p><strong>注意</strong>: 请记住有些年份有53周 (请看 <a href="https://en.wikipedia.org/wiki/ISO_week_date#Weeks_per_year">Weeks per year</a>)! 当你开发应用程序时需要考虑到这一点。</p> +</div> + +<h2 id="规范">规范</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comments</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'forms.html#date-state-(type=date)', '<input type="date">')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'forms.html#date-state-(type=date)', '<input type="date">')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>20</td> + <td>12</td> + <td>{{CompatGeckoDesktop(57)}}</td> + <td>{{CompatNo}}</td> + <td>10.62</td> + <td>{{CompatNo}}<sup>[1]</sup></td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Edge</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile(57)}}</td> + <td>{{CompatUnknown}}</td> + <td>10.62</td> + <td>5</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] It is recognized but there is no UI.</p> + +<h2 id="也可以参见">也可以参见</h2> + +<ul> + <li>通用的 {{HTMLElement("input")}} 元素 和 用于操作他的接口, {{domxref("HTMLInputElement")}}</li> + <li><a href="https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Forms/The_native_form_widgets#Date_and_time_picker">Date and Time picker tutorial</a></li> +</ul> diff --git a/files/zh-cn/web/html/element/input/datetime-local/index.html b/files/zh-cn/web/html/element/input/datetime-local/index.html new file mode 100644 index 0000000000..5f94c41650 --- /dev/null +++ b/files/zh-cn/web/html/element/input/datetime-local/index.html @@ -0,0 +1,537 @@ +--- +title: <input type="datetime-local"> +slug: Web/HTML/Element/Input/datetime-local +translation_of: Web/HTML/Element/input/datetime-local +--- +<div>{{HTMLRef}}</div> + +<p>{{htmlelement("input")}} 元素的 <code><strong>datetime-local </strong></code>类型创建让用户便捷输入日期和时间的输入控件，包括“年”、“月”、“日”，以及“时”和“分”。</p> + +<p>{{EmbedInteractiveExample("pages/tabbed/input-datetime-local.html", "tabbed-shorter")}}</p> + +<p>所使用的是用户所在时区。此控件的样式因浏览器而异；目前支持的浏览器为数不多，桌面端仅有 Chrome/Opera 和 Edge，移动端大多数较新版本的览器提供能使用的实现方案。在其它的浏览器中，此类型会降级显示为简单的 <code><a href="/en-US/docs/Web/HTML/Element/input/text"><input type="text"></a></code> 控件.</p> + +<p>控件不支持输入秒。</p> + +<p>由于 <code>datetime-local</code> 类型受限于浏览器支持，并且不同浏览器在输入方法上存在差异，目前最好是使用第三方框架或库来展示，或者实现一个自己的输入控件。另一个方法是拆分为 <code>date</code> 和 <code>time</code> 输入控件，这两个的支持都比 <code>datetime-local</code> 更广泛。</p> + +<p>一部分浏览器可能会用一个普通的文本输入元素代替显示，并在输入内容提交到服务器之前验证它们是否是合法的日期/时间格式，但你不可信赖于此行为，因为用户使用的浏览器不可预知的。</p> + +<p>如果你们没有在使用支持此功能的浏览器，下面的 Chrome/Opera <code>datetime-local</code> 控件截图样式可作参考。点击输入框右侧的向下箭头弹出的日期选择器可选择日期；时间需要手动地输入。</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/14949/datetime-local-chrome.png" style="display: block; height: 224px; margin: 0px auto; width: 280px;"></p> + +<p>Edge 浏览器的 <code>datetime-local</code> 控件样式如下；点击日期和时间数值的部分会分别显示两个独立的控件，这样你可以轻松地设定日期和时间。这有点像为你创建了一个将 <code>date</code> 和 <code>time</code> 拼接在一起的控件。</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/14953/datetime-local-picker-edge1.png" style="display: block; height: 398px; margin: 0px auto; width: 320px;"></p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/14955/datetime-local-picker-edge2.png" style="display: block; height: 394px; margin: 0px auto; width: 264px;"></p> + +<table class="properties"> + <tbody> + <tr> + <td><strong>{{anch("Value")}}</strong></td> + <td>一个表示日期和时间的 {{domxref("DOMString")}} （本地时区）或空值。</td> + </tr> + <tr> + <td><strong>事件</strong></td> + <td>{{event("change")}} 及 {{event("input")}}.</td> + </tr> + <tr> + <td><strong>支持的通用属性</strong></td> + <td>{{htmlattrxref("autocomplete", "input")}}, {{htmlattrxref("list", "input")}}, {{htmlattrxref("readonly", "input")}}, 及 {{htmlattrxref("step", "input")}}.</td> + </tr> + <tr> + <td><strong>IDL 属性</strong></td> + <td><code>list</code>, <code>value</code>, <code>valueAsNumber</code>.</td> + </tr> + <tr> + <td><strong>方法</strong></td> + <td>{{domxref("HTMLInputElement.select", "select()")}}, {{domxref("HTMLInputElement.stepDown", "stepDown()")}}, {{domxref("HTMLInputElement.stepUp", "stepUp()")}}.</td> + </tr> + </tbody> +</table> + +<h2 id="取值">取值</h2> + +<p>一个输入到控件上的表示日期的 {{domxref("DOMString")}} 。你可以将一个包含日期和时间的值放在 {{htmlattrxref("value", "input")}} 属性中以为控件设置一个默认值，像这样：</p> + +<pre class="brush: html notranslate"><label for="party">输入预订宴会的日期和时间：</label> +<input id="party" type="datetime-local" name="partydate" value="2017-06-01T08:30"></pre> + +<p>{{ EmbedLiveSample('取值', 600, 60) }}</p> + +<p>一件需要注意的事情是显示的日期时间的格式与实际 <code>value</code> 里的格式不同，显示的日期和时间格式以用户操作系统所的区域设置信息为准，而控件的日期/时间值 <code>value</code> 总是 <code>yyyy-MM-ddThh:mm</code> 格式。例如，当上例中的值被提供到服务器之后，将会像这样 <code>partydate=2017-06-01T08:30</code>.</p> + +<div class="note"> +<p>另外请注意，如果这样的数据以 HTTP <code><a href="/en-US/docs/Web/HTTP/Methods/GET">GET</a></code> 提交，时间部分的冒号“:”需要编码之后才能放在 URL 参数中，例如 <code>partydate=2017-06-01T08%3A30</code>。编码方法请参见 {{jsxref("Global_Objects/encodeURI", "encodeURI()")}} 。</p> +</div> + +<p>你也可以在 JavaScript中使用 {{domxref("HTMLInputElement.value")}} 属性来获取和设置日期的值，例如：</p> + +<pre class="brush: js notranslate">var dateControl = document.querySelector('input[type="datetime-local"]'); +dateControl.value = '2017-06-01T08:30';</pre> + +<h2 id="使用_datetime-local_输入控件">使用 datetime-local 输入控件</h2> + +<p>Date/time 输入控件乍看非常实用；它们提供了方便的用户接口来选择日期和时间，并且无论用户端是什么样的本地化设置，都会以标准化数据发送给服务器。但是受限于浏览器的支持， <code><input type="datetime-local"></code> 也有不少问题。</p> + +<p>我们先来看看 <code><input type="datetime-local"></code> 基本的和高级的用法，之后在（参见{{anch("处理浏览器支持")}}）会提供一些减少浏览器兼容问题的建议。</p> + +<h3 id="datetime-local_的基本用法">datetime-local 的基本用法</h3> + +<p><code><input type="datetime-local"></code> 最简单的用法是将 <code><input></code> 和 {{htmlelement("label")}} 组合在一起，像下面这样：</p> + +<pre class="brush: html notranslate"><form> + <label for="party">输入预订宴会的日期和时间：</label> + <input id="party" type="datetime-local" name="partydate"> +</form></pre> + +<p>{{ EmbedLiveSample('datetime-local_的基本用法', 600, 40) }}</p> + +<h3 id="设定日期时间的最大值和最小值">设定日期时间的最大值和最小值</h3> + +<p>你可以使用 {{htmlattrxref("min", "input")}} 和 {{htmlattrxref("max", "input")}} 属性来限制用户可选择的日期/时间。在下面的例子中我们设定最小的日期时间 <code>2017-06-01T08:30</code> 和最大的日期时间 <code>2017-06-30T16:30</code>：</p> + +<pre class="brush: html notranslate"> <form> + <label for="party">输入预订宴会的日期和时间：</label> + <input id="party" type="datetime-local" name="partydate" min="2017-06-01T08:30" max="2017-06-30T16:30"> + </form></pre> + +<p>{{ EmbedLiveSample('设定日期时间的最大值和最小值', 600, 40) }}</p> + +<p>结果如下：</p> + +<ul> + <li>只有“2017年6月”可供选择 —— 只有“日期”部分的值可修改，并且6月以外的日期不能被选到日期控件内</li> + <li>视你所使用的浏览器，你或许会发现时间选择控件中特定值以外的时间可能不可选（如 Edge），或是无效（参见 {{anch("校验")}}）但仍可选（如Chrome）</li> +</ul> + +<div class="note"> +<p><strong>注意：</strong>你可以使用 {{htmlattrxref("step", "input")}} 属性设置不同值来控制日期每次增减的天数（例如，或许你希望只有星期六可选）。但是，截止到本文档编写之时，好像还没有浏览器实现此功能。</p> +</div> + +<h3 id="控制输入框大小">控制输入框大小</h3> + +<p><code><input type="datetime-local"></code> 并不支持如 {{htmlattrxref("size", "input")}} 这样的表单大小属性。你可使用 <a href="/en-US/docs/Web/CSS">CSS</a> 来控制大小。</p> + +<h3 id="设置时区">设置时区</h3> + +<p><code>datetime-local</code> 控件并没有地方可以设置日期/时间的时区和/或区域属性。在 <code><a href="/en-US/docs/Web/HTML/Element/input/datetime">datetime</a></code> 输入类型上提供过此功能，但这个类型现在已被废弃，业已从标准中移除。这项被移除的主要原因是缺少浏览器的支持，以及出于用户交互/用户体验方法的考量。相比之下，仅使用一个（或多个）控件来设置日期/时间，然后单独在另一控件处理时区，这样更容易一些。</p> + +<p>例如，如果你在开发一套系统，某位用户可能已经登录进来，并且已经设置了时区，你可以把时区放在一个 <code><a href="/en-US/docs/Web/HTML/Element/input/hidden">hidden</a></code> 输入控件里。例如：</p> + +<pre class="brush: html notranslate"><input type="hidden" id="timezone" name="timezone" value="-08:00"></pre> + +<p>另一方面，如果你被要求在用户输入日期时间时提供时区输入，你可以提供给用户一种输入方式，例如 {{htmlelement("select")}} 元素：</p> + +<pre class="brush: html notranslate"><select name="timezone_offset" id="timezone-offset" class="span5"> + <option value="-12:00">(GMT -12:00) Eniwetok, Kwajalein</option> + <option value="-11:00">(GMT -11:00) Midway Island, Samoa</option> + <option value="-10:00">(GMT -10:00) Hawaii</option> + <option value="-09:50">(GMT -9:30) Taiohae</option> + <option value="-09:00">(GMT -9:00) Alaska</option> + <option value="-08:00">(GMT -8:00) Pacific Time (US &amp; Canada)</option> + + ... + +</select></pre> + +<p>以上两例中，日期/时间和时区可以独立的数据提交到服务器，之后你需要做的就是把它们保存到服务器数据库恰当的位置。</p> + +<div class="note"> +<p><strong>注意：以上代码来自</strong> <a href="https://gist.github.com/nodesocket/3919205">All world timezones in an HTML select element</a>.</p> +</div> + +<h2 id="校验">校验</h2> + +<p>默认情况下 <code><input type="datetime-local"></code> 不对输入内容进行验证。用户交互（UI）的实现通常不允许你输入不是日期/时间的值 —— 这非常有用 —— 但用户也仍会在不填写任何值的情况下提交数据，或者输入一个不无效的日期/时间（如：4月32日）。</p> + +<p>你可以使用 {{htmlattrxref("min", "input")}} 及 {{htmlattrxref("max", "input")}} 来限制可选择的日期（参见 anch("设定日期时间的最大值和最小值")），并且使用 {{htmlattrxref("required", "input")}} 属性使日期/时间为强制的输入项。这样做的结果是，可以使相应的浏览器在你输入一个超出范围的日期或不输入时显示一个错误信息。</p> + +<p>让我们来看个例子，这里我们设置日期/时间的最小值和最大值，并且设置该项为必填：</p> + +<pre class="brush: html notranslate"><form> + <div> + <label for="party">Choose your preferred party date and time (required, June 1st 8.30am to June 30th 4.30pm):</label> + <input id="party" type="datetime-local" name="partydate" min="2017-06-01T08:30" max="2017-06-30T16:30" required> + <span class="validity"></span> + </div> + <div> + <input type="submit" value="Book party!"> + </div> +</form></pre> + +<p>如果你试图提交一个不完整的日期（或者日期超出设定范围），浏览器会显示一条错误信息。来试试这个例子：</p> + +<p>{{ EmbedLiveSample('校验', 600, 120) }}</p> + +<p>如果你不在使用相应支持的浏览器，这里有一个截图供参考：</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/14957/datetime-local-error.png" style="display: block; height: 100px; margin: 0px auto; width: 558px;"></p> + +<p>这里有上面例子的CSS。在这里我们使用 {{cssxref(":valid")}} 和 {{cssxref(":invalid")}} CSS 属性来控制当前值正确和错误的样式。我们需要这两个图标放一个 {{htmlelement("span")}} 到输入元素后面，而非使用输入元素本身，因为在 Chrome 下生成的内容会被放在表单控件里面，不能设置样式或显示出来。</p> + +<pre class="brush: css notranslate">div { + margin-bottom: 10px; + display: flex; + align-items: center; +} + +label { + display: inline-block; + width: 300px; +} + +input:invalid+span:after { + content: '✖'; + padding-left: 5px; +} + +input:valid+span:after { + content: '✓'; + padding-left: 5px; +}</pre> + +<div class="warning"> +<p><strong>重要提示：</strong>HTML 表单验证并不能取代脚本校验输入数据是否符合格式要求。有人可以非常容易地修改 HTML 以绕过验证，亦或是完全删除这个元素。同样可能的是，有人可以非常轻易做到完全绕过 HTML 而直接向你的服务器提交数据。如果你服务器代码不对接收到的数据进行校验，灾难性的打击就可能发生在这些错误格式数据提交的时候 （或是数据太大，或是格式错误，等等）。</p> +</div> + +<h2 id="处理浏览器支持">处理浏览器支持</h2> + +<p>正如前面所提到的，当前使用日期/时间输入控件最主要的问题是浏览器支持 —— 只有桌面端的 Chrome、Opera 和 Edge 浏览器，以及移动端大多数的现代浏览器支持它。举例来说，安卓系统上的 Firefox 的 <code>datetime-local</code> 选择器看上去像这样：</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/14951/datetime-local-fxa.png" style="display: block; height: 640px; margin: 0px auto; width: 360px;"></p> + +<p>不支持此特性的浏览器会降级显示为文件输入框，但这在用户界面的一致性方面（呈现的控件不一样），以及数据处理方面造成了问题。</p> + +<p>第二个问题是最严重的。正如我们之前提到的，采用 <code>datetime-local</code> 输入，实际值总是会被转换成 <code>yyyy-mm-ddThh:mm</code> 格式。但换成文本输入框之后，浏览器默认情况下无知道应当输入什么格式的日期，人们有很多不同的书写日期和时间的方式，如：</p> + +<ul> + <li><code>ddmmyyyy</code></li> + <li><code>dd/mm/yyyy</code></li> + <li><code>mm/dd/yyyy</code></li> + <li><code>dd-mm-yyyy</code></li> + <li><code>mm-dd-yyyy</code></li> + <li><code>mm-dd-yyyy hh:mm</code> （12小时制）</li> + <li><code>mm-dd-yyyy HH:mm</code> （24小时制）</li> + <li>等等</li> +</ul> + +<p>一个变通的方法是放一个 {{htmlattrxref("pattern", "input")}} 属性在 <code>datetime-local</code> 输入元素里。虽然 <code>datetime-local</code> 输入控件本身不使用这个属性，但降级显示的文本输入框将会用到。例如，在不支持的浏览器上试一下这个例子：</p> + +<pre class="brush: html notranslate"><form> + <div> + <label for="party">Choose your preferred party date and time (required, June 1st 8.30am to June 30th 4.30pm):</label> + <input id="party" type="datetime-local" name="partydate" + min="2017-06-01T08:30" max="2017-06-30T16:30" + pattern="[0-9]{4}-[0-9]{2}-[0-9]{2}T[0-9]{2}:[0-9]{2}" required> + <span class="validity"></span> + </div> + <div> + <input type="submit" value="Book party!"> + </div> + <input type="hidden" id="timezone" name="timezone" value="-08:00"> +</form></pre> + +<p>{{ EmbedLiveSample('处理浏览器支持', 600, 100) }}</p> + +<p>你试一下提交数据，如果你输入的内容不满足 <code>nnnn-nn-nnTnn:nn</code> 格式（n为0 ~ 9的数字），你会看到浏览器显示一条错误信息（并高亮输入框标记为无效），但这并不能妨碍用户输入无效的日期或是不正确的日期和时间。</p> + +<p>然而什么样的用户会去理解这样一个他们要输入的日期和时间格式呢？</p> + +<p>我们仍有问题待解决。</p> + +<div class="hidden"> +<pre class="brush: css notranslate">div { + margin-bottom: 10px; +} + +input:invalid + span { + position: relative; +} + +input:invalid + span:after { + content: '✖'; + position: absolute; + right: -18px; +} + +input:valid + span { + position: relative; +} + +input:valid + span:after { + content: '✓'; + position: absolute; + right: -18px; +}</pre> +</div> + +<p>目前处理跨浏览器表单中输入日期的最好办法是让用户分别在不同的控件中输入年、月、日和时间（{{htmlelement("select")}} 元素很流行 —— 参见下面的实现），或者使用 JavaScript库，如 <a href="https://jqueryui.com/datepicker/">jQuery date picker</a> 及 <a href="http://timepicker.co/">jQuery timepicker plugin</a>。</p> + +<h2 id="例子">例子</h2> + +<p>在这个例子中，我们创建两套UI元素来选择日期时间 —— 一套原生的 <code><input type="datetime-local"></code> ，另一套是一系列 {{htmlelement("select")}} 元素以在不支持原生控件的浏览器下选择日期和时间。</p> + +<p>{{ EmbedLiveSample('例子', 600, 140) }}</p> + +<p>HTML代码如下：</p> + +<pre class="brush: html notranslate"><form> + <div class="nativeDateTimePicker"> + <label for="party">Choose a date and time for your party:</label> + <input type="datetime-local" id="party" name="bday"> + <span class="validity"></span> + </div> + <p class="fallbackLabel">Choose a date and time for your party:</p> + <div class="fallbackDateTimePicker"> + <div> + <span> + <label for="day">Day:</label> + <select id="day" name="day"> + </select> + </span> + <span> + <label for="month">Month:</label> + <select id="month" name="month"> + <option selected>January</option> + <option>February</option> + <option>March</option> + <option>April</option> + <option>May</option> + <option>June</option> + <option>July</option> + <option>August</option> + <option>September</option> + <option>October</option> + <option>November</option> + <option>December</option> + </select> + </span> + <span> + <label for="year">Year:</label> + <select id="year" name="year"> + </select> + </span> + </div> + <div> + <span> + <label for="hour">Hour:</label> + <select id="hour" name="hour"> + </select> + </span> + <span> + <label for="minute">Minute:</label> + <select id="minute" name="minute"> + </select> + </span> + </div> + </div> +</form></pre> + +<p>月份是固定写死的（它们是不变的），日期和年份的值是依据选中的月和年动态生成的，并且目前的年份顺序排列（代码的注释以详细解释了解这些函数是如何工作的），我们也决定动态生成小时和分种，它们的数量实在是多了点！</p> + +<div class="hidden"> +<pre class="brush: css notranslate">div { + margin-bottom: 10px; + position: relative; +} + +input[type="number"] { + width: 100px; +} + +input + span { + padding-right: 30px; +} + +input:invalid+span:after { + position: absolute; + content: '✖'; + padding-left: 5px; +} + +input:valid+span:after { + position: absolute; + content: '✓'; + padding-left: 5px; +}</pre> +</div> + +<p>代码的另一部分也许会引起一定的兴趣，那就是功能检查代码 —— 检查浏览器是否支持 <code><input type="datetime-local"></code>，我们可以创建一个新的 {{htmlelement("input")}} 元素，设置它的 <code>type</code> 为 <code>datetime-local</code>，然后立即检查它被设置的类型。不支持 <code>datetime-local</code> 的浏览器返回 <code>text</code>，因为这就是 <code>datetime-local</code> 要回退的类型。 如果 <code><input type="datetime-local"></code> 不被支持，我们隐藏原生的控件并显示备用的控件UI （{{htmlelement("select")}}）来替代。</p> + +<pre class="brush: js notranslate">// define variables +var nativePicker = document.querySelector('.nativeDateTimePicker'); +var fallbackPicker = document.querySelector('.fallbackDateTimePicker'); +var fallbackLabel = document.querySelector('.fallbackLabel'); + +var yearSelect = document.querySelector('#year'); +var monthSelect = document.querySelector('#month'); +var daySelect = document.querySelector('#day'); +var hourSelect = document.querySelector('#hour'); +var minuteSelect = document.querySelector('#minute'); + +// hide fallback initially +fallbackPicker.style.display = 'none'; +fallbackLabel.style.display = 'none'; + +// test whether a new datetime-local input falls back to a text input or not +var test = document.createElement('input'); +test.type = 'datetime-local'; +// if it does, run the code inside the if() {} block +if(test.type === 'text') { + // hide the native picker and show the fallback + nativePicker.style.display = 'none'; + fallbackPicker.style.display = 'block'; + fallbackLabel.style.display = 'block'; + + // populate the days and years dynamically + // (the months are always the same, therefore hardcoded) + populateDays(monthSelect.value); + populateYears(); + populateHours(); + populateMinutes(); +} + +function populateDays(month) { + // delete the current set of <option> elements out of the + // day <select>, ready for the next set to be injected + while(daySelect.firstChild){ + daySelect.removeChild(daySelect.firstChild); + } + + // Create variable to hold new number of days to inject + var dayNum; + + // 31 or 30 days? + if(month === 'January' | month === 'March' | month === 'May' | month === 'July' | month === 'August' | month === 'October' | month === 'December') { + dayNum = 31; + } else if(month === 'April' | month === 'June' | month === 'September' | month === 'November') { + dayNum = 30; + } else { + // If month is February, calculate whether it is a leap year or not + var year = yearSelect.value; + (year - 2016) % 4 === 0 ? dayNum = 29 : dayNum = 28; + } + + // inject the right number of new <option> elements into the day <select> + for(i = 1; i <= dayNum; i++) { + var option = document.createElement('option'); + option.textContent = i; + daySelect.appendChild(option); + } + + // if previous day has already been set, set daySelect's value + // to that day, to avoid the day jumping back to 1 when you + // change the year + if(previousDay) { + daySelect.value = previousDay; + + // If the previous day was set to a high number, say 31, and then + // you chose a month with less total days in it (e.g. February), + // this part of the code ensures that the highest day available + // is selected, rather than showing a blank daySelect + if(daySelect.value === "") { + daySelect.value = previousDay - 1; + } + + if(daySelect.value === "") { + daySelect.value = previousDay - 2; + } + + if(daySelect.value === "") { + daySelect.value = previousDay - 3; + } + } +} + +function populateYears() { + // get this year as a number + var date = new Date(); + var year = date.getFullYear(); + + // Make this year, and the 100 years before it available in the year <select> + for(var i = 0; i <= 100; i++) { + var option = document.createElement('option'); + option.textContent = year-i; + yearSelect.appendChild(option); + } +} + +function populateHours() { + // populate the hours <select> with the 24 hours of the day + for(var i = 0; i <= 23; i++) { + var option = document.createElement('option'); + option.textContent = (i < 10) ? ("0" + i) : i; + hourSelect.appendChild(option); + } +} + +function populateMinutes() { + // populate the minutes <select> with the 60 hours of each minute + for(var i = 0; i <= 59; i++) { + var option = document.createElement('option'); + option.textContent = (i < 10) ? ("0" + i) : i; + minuteSelect.appendChild(option); + } +} + +// when the month or year <select> values are changed, rerun populateDays() +// in case the change affected the number of available days +yearSelect.onchange = function() { + populateDays(monthSelect.value); +} + +monthSelect.onchange = function() { + populateDays(monthSelect.value); +} + +//preserve day selection +var previousDay; + +// update what day has been set to previously +// see end of populateDays() for usage +daySelect.onchange = function() { + previousDay = daySelect.value; +}</pre> + +<div class="note"> +<p><strong>注意：请记住某些年份有53个星期（见</strong><a href="https://en.wikipedia.org/wiki/ISO_week_date#Weeks_per_year">Weeks per year</a><strong>）！当你在开发产品应用时应当考虑这个问题。</strong></p> +</div> + +<h2 id="规范">规范</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">技术规范</th> + <th scope="col">状态</th> + <th scope="col">备注</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'forms.html#local-date-and-time-state-(type=datetime-local)', '<input type="datetime-local">')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'forms.html##local-date-and-time-state-(type=datetime-local)', '<input type="datetime-local">')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<p>{{Compat("html.elements.input.input-datetime-local")}}</p> + +<h2 id="参考">参考</h2> + +<ul> + <li>通用 {{HTMLElement("input")}} 元素以及操作它的接口 {{domxref("HTMLInputElement")}}</li> + <li><code><a href="/en-US/docs/Web/HTML/Element/input/date"><input type="date"></a></code> and <code><a href="/en-US/docs/Web/HTML/Element/input/time"><input type="time"></a></code></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Forms/The_native_form_widgets#Date_and_time_picker">Date and Time picker tutorial</a></li> +</ul> diff --git a/files/zh-cn/web/html/element/input/datetime/index.html b/files/zh-cn/web/html/element/input/datetime/index.html new file mode 100644 index 0000000000..4cdfbf0764 --- /dev/null +++ b/files/zh-cn/web/html/element/input/datetime/index.html @@ -0,0 +1,16 @@ +--- +title: <input type="datetime"> +slug: Web/HTML/Element/Input/datetime +translation_of: Web/HTML/Element/input/datetime +--- +<div>{{HTMLRef}}{{obsolete_header}}</div> + +<p>HTML <code><input type="datetime"></code> 是一个控件，用于输入日期和时间（小时、分钟、秒和秒的小数）以及时区。这个特性已经 <strong><a class="external external-icon" href="https://github.com/whatwg/html/issues/336">从 WHATWG HTML 中移除</a></strong>，并且不再受浏览器支持。</p> + +<p>反之，浏览器实现了（并且提倡开发者使用）<code>{{HTMLElement("input/datetime-local", "datetime-local")}}</code> 输入类型。</p> + +<h2 id="另见">另见</h2> + +<ul> + <li>{{HTMLElement("input")}} 元素</li> +</ul> diff --git a/files/zh-cn/web/html/element/input/email/index.html b/files/zh-cn/web/html/element/input/email/index.html new file mode 100644 index 0000000000..98fa9af208 --- /dev/null +++ b/files/zh-cn/web/html/element/input/email/index.html @@ -0,0 +1,339 @@ +--- +title: <input type="email"> +slug: Web/HTML/Element/Input/email +tags: + - HTML + - HTML forms + - Input Type + - 参考 + - 电子邮件 + - 表单 +translation_of: Web/HTML/Element/input/email +--- +<div>{{HTMLRef}}</div> + +<p><span class="seoSummary">带有 <code><strong>"email"</strong></code> (电子邮箱)类型标记的输入框元素({{HTMLElement("input")}})能够让用户输入或编辑一个电子邮箱地址，此外，如果指定了{{htmlattrxref("multiple", "input")}}属性，用户还可以输入多个电子邮箱地址。在表单提交前，输入框会自动验证输入值是否是一个或多个合法的电子邮箱地址(非空值且符合电子邮箱地址格式).</span> CSS伪标签 {{cssxref(":valid")}} 和 {{cssxref(":invalid")}} 能够在校验后自动应用。</p> + +<div class="note"> +<p><strong>注意</strong>: 不支持“电子邮件”类型的浏览器可以回退为标准的“文本”输入。</p> +</div> + +<div>{{EmbedInteractiveExample("pages/tabbed/input-email.html", "tabbed-standard")}}</div> + +<p class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples +<https://github.com/mdn/interactive-examples>">https://github.com/mdn/interactive-examples </a> and send us a pull request.</p> + +<table class="properties"> + <tbody> + <tr> + <td><strong>{{anch("值")}}</strong></td> + <td>一个邮箱地址格式的{{domxref("DOMString")}} 或空值</td> + </tr> + <tr> + <td><strong>事件</strong></td> + <td>{{event("change")}} 和 {{event("input")}}</td> + </tr> + <tr> + <td> + <p><strong>支持的属性</strong></p> + + <p><strong>通用的属性</strong></p> + </td> + <td>{{htmlattrxref("autocomplete", "input")}}, {{htmlattrxref("list", "input")}}, {{htmlattrxref("maxlength", "input")}}, {{htmlattrxref("minlength", "input")}}, {{htmlattrxref("multiple", "input")}}, {{htmlattrxref("pattern", "input")}}, {{htmlattrxref("placeholder", "input")}}, {{htmlattrxref("readonly", "input")}}, and {{htmlattrxref("size", "input")}}</td> + </tr> + <tr> + <td><strong>IDL 属性</strong></td> + <td><code>list</code> and <code>value</code></td> + </tr> + <tr> + <td><strong>方法</strong></td> + <td>{{domxref("HTMLInputElement.select", "select()")}}</td> + </tr> + </tbody> +</table> + +<h2 id="值">值</h2> + +<p>{{HTMLElement("input")}} 元素的 {{htmlattrxref("value", "input")}} 属性包含一个会自动验证是否符合电子邮件语法的 {{domxref("DOMString")}}。具体来说，此处有三个格式可以通过验证：</p> + +<ol> + <li>一个空字符串（“”），表示用户未输入值或该值已被删除。</li> + <li> + <p>单个符合格式的电子邮件地址。并不代表该邮件地址存在，而是说它至少在格式上是正确的，简单地讲就是 <code>"username@domain"</code> 或者 <code>"username@domain.tld"</code>，当然并不局限于此。关于匹配电子邮件地址验证算法的 {{Glossary("regular expression")}}，参见 {{anch("Validation")}}。</p> + </li> + <li> + <p>当且仅当明确 {{htmlattrxref("multiple", "input")}} 属性时，值可以是一个列表，该列表包含一串符合格式的电子邮件地址，且每个地址之间用逗号分隔。列表中，位于每个地址之前和之后的任何空白字符都会被移除。</p> + </li> +</ol> + +<p>关于如何验证电子邮件地址以保证其格式正确的细节，参见 {{anch("Validation")}}。</p> + +<h2 id="Using_email_inputs">Using email inputs</h2> + + + +<p>电子邮件地址是网络上最频繁输入的文本数据表格; 登录网站，请求信息，允许订单确认，网络邮件等时使用它们。 因此，“电子邮件”输入类型可以使您作为Web开发人员的工作变得更加容易，因为它可以在构建电子邮件地址的用户界面和逻辑时帮助简化您的工作。 当您使用正确的类型值“email”创建电子邮件输入时，您将自动验证输入的文本是否至少以正确的形式可能是合法的电子邮件地址。 这有助于避免用户输错地址或提供无效地址的情况。</p> + +<p>然而，重要的是要注意，这不足以确保指定的文本是实际存在的电子邮件地址，对应于站点的用户，或者以任何其他方式可接受。 它只是确保将字段的值正确格式化为电子邮件地址。</p> + + + +<div class="note"> +<p><strong>注意：记住用户可以在幕后修改HTML也很重要，因此您的站点不得出于任何安全目的使用此验证。 您必须验证所提供文本可能具有任何安全隐患的任何事务的服务器端的电子邮件地址。</strong></p> +</div> + +<h3 id="A_simple_email_input">A simple email input</h3> + +<p>目前，所有实现此元素的浏览器都将其实现为具有基本验证功能的标准文本输入字段。 但是，该规范允许浏览器对此进行纬度调整。 例如，该元素可以与用户设备的内置地址簿集成，以允许从该列表中挑选电子邮件地址。 在最基本的形式中，电子邮件输入可以像这样实现：</p> + +<pre class="brush: html"><input id="emailAddress" type="email"></pre> + +<p>{{ EmbedLiveSample('A_simple_email_input', 600, 40) }}</p> + +<p>Notice that it's considered valid when empty and when a single validly-formatted email address is entered, but is otherwise not considered valid. By adding the {{htmlattrxref("required", "input")}} attribute, only validly-formed email addresses are allowed; the input is no longer considered valid when empty.</p> + +<h3 id="Allowing_multiple_email_addresses">Allowing multiple email addresses</h3> + +<p>By adding the {{htmlattrxref("multiple", "input")}} Boolean attribute, the input can be configured to accept multiple email addresses.</p> + +<pre class="brush: html"><input id="emailAddress" type="email" multiple></pre> + +<p>{{ EmbedLiveSample('Allowing_multiple_email_addresses', 600, 40) }}</p> + +<p>The input is now considered valid when a single email address is entered, or when any number of email addresses separated by commas and, optionally, some number of whitespace characters are present.</p> + +<div class="note"> +<p><strong>Note</strong>: When <code>"multiple"</code> is used, the value <em>is</em> allowed to be empty.</p> +</div> + +<p>Some examples of valid strings when <code>"multiple"</code> is specified:</p> + +<ul> + <li><code>""</code></li> + <li><code>"me@example"</code></li> + <li><code>"me@example.org"</code></li> + <li><code>"me@example.org,you@example.org"</code></li> + <li><code>"me@example.org, you@example.org"</code></li> + <li><code>"me@example.org,you@example.org, us@example.org"</code></li> +</ul> + +<p>Some examples of invalid strings:</p> + +<ul> + <li><code>","</code></li> + <li><code>"me"</code></li> + <li><code>"me@example.org you@example.org"</code></li> +</ul> + +<h3 id="Placeholders">Placeholders</h3> + +<p>Sometimes it's helpful to offer an in-context hint as to what form the input data should take. This can be especially important if the page design doesn't offer descriptive labels for each {{HTMLElement("input")}}. This is where <strong>placeholders</strong> come in. A placeholder is a value that demonstrates the form the <code>value</code> should take by presenting an example of a valid value, which is displayed inside the edit box when the element's <code>value</code> is <code>""</code>. Once data is entered into the box, the placeholder disappears; if the box is emptied, the placeholder reappears.</p> + +<p>Here, we have an <code>"email"</code> input with the placeholder <code>"sophie@example.com"</code>. Note how the placeholder disappears and reappears as you manipulate the contents of the edit field.</p> + +<pre class="brush: html"><input type="email" placeholder="sophie@example.com"></pre> + +<p>{{ EmbedLiveSample('Placeholders', 600, 40) }}</p> + +<h3 id="Controlling_the_input_size">Controlling the input size</h3> + +<p>You can control not only the physical length of the input box, but also the minimum and maximum lengths allowed for the input text itself.</p> + +<h4 id="Physical_input_element_size">Physical input element size</h4> + +<p>The physical size of the input box can be controlled using the {{htmlattrxref("size", "input")}} attribute. With it, you can specify the number of characters the input box can display at a time. In this example the email edit box is 15 characters wide:</p> + +<pre class="brush: html"><input type="email" size="15"></pre> + +<p>{{ EmbedLiveSample('Physical_input_element_size', 600, 40) }}</p> + +<h4 id="Element_value_length">Element value length</h4> + +<p>The <code>size</code> is separate from the length limitation on the entered email address itself so that you can have fields fit in a small space while still allowing longer email address strings to be entered. You can specify a minimum length, in characters, for the entered email address using the {{htmlattrxref("minlength", "input")}} attribute; similarly, use {{htmlattrxref("maxlength", "input")}} to set the maximum length of the entered email address.</p> + +<p>The example below creates a 32 character-wide email address entry box, requiring that the contents be no shorter than 3 characters and no longer than 64 characters.</p> + +<pre class="brush: html"><input type="email" size="32" minlength="3" maxlength="64"></pre> + +<p>{{EmbedLiveSample("Element_value_length", 600, 40) }}</p> + +<h3 id="Providing_default_options">Providing default options</h3> + +<p>As always, you can provide a default value for an <code>"email"</code> input box by setting its {{htmlattrxref("value", "input")}} attribute:</p> + +<div id="Default_value"> +<pre class="brush: html"><input type="email" value="default@example.com"></pre> +</div> + +<p>{{EmbedLiveSample("Default_value", 600, 40)}}</p> + +<h4 id="Offering_suggested_values">Offering suggested values</h4> + +<p>Taking it a step farther, you can provide a list of default options from which the user can select by specifying the {{htmlattrxref("list", "input")}} attribute. This doesn't limit the user to those options, but does allow them to select commonly-used email addresses more quickly. This also offers hints to {{htmlattrxref("autocomplete", "input")}}. The <code>list</code> attribute specifies the ID of a {{HTMLElement("datalist")}}, which in turn contains one {{HTMLElement("option")}} element per suggested value; each <code>option</code>'s <code>value</code> is the corresponding suggested value for the email entry box.</p> + +<pre class="brush: html"><input type="email" size="40" list="defaultEmails"> + +<datalist id="defaultEmails"> + <option value="jbond007@mi6.defence.gov.uk"> + <option value="jbourne@unknown.net"> + <option value="nfury@shield.org"> + <option value="tony@starkindustries.com"> + <option value="hulk@grrrrrrrr.arg"> +</datalist></pre> + +<p>{{EmbedLiveSample("Offering_suggested_values", 600, 40)}}</p> + +<p>With the {{HTMLElement("datalist")}} element and its {{HTMLElement("option")}}s in place, the browser will offer the specified values as potential values for the email address; this is typically presented as a popup or drop-down menu containing the suggestions. While the specific user experience may vary from one browser to another, typically clicking in the edit box presents a drop-down of the suggested email addresses. Then, as the user types, the list is filtered to show only matching values. Each typed character narrows down the list until the user makes a selection or types a custom value.</p> + +<p><img alt="Animation: Using keyboard entry to filter the list of suggested email addresses" src="https://mdn.mozillademos.org/files/14831/html-input-email1.gif" style="border-style: solid; border-width: 1px; height: 168px; width: 352px;"></p> + +<h2 id="Validation">Validation</h2> + +<p>There are two levels of content validation available for <code>"email"</code> inputs. First, there's the standard level of validation offered to all {{HTMLElement("input")}}s, which automatically ensures that the contents meet the requirements to be a valid email address. But there's also the option to add additional filtering to ensure that your own specialized needs are met, if you have any.</p> + +<div class="warning"> +<p><strong>重要提示：HTML表单验证不能替代确保输入的数据格式正确的脚本。 对于某些人来说，调整HTML非常容易，因为它允许他们绕过验证，或者完全删除它。 某人也可以完全绕过您的HTML并将数据直接提交给您的服务器。 如果您的服务器端代码无法验证它收到的数据，则当数据格式不正确（或数据太大，类型错误等等）输入数据库时，灾难可能会发生。</strong></p> +</div> + +<h3 id="Basic_validation">Basic validation</h3> + +<p>支持“电子邮件”输入类型的浏览器会自动提供验证，以确保只有符合Internet电子邮件地址标准格式的文本才会输入到输入框中。 实现规范的浏览器应使用与以下正则表达式等效的算法：</p> + +<pre class="brush: js">/^[a-zA-Z0-9.!#$%&'*+\/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61} + [a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/ +</pre> + +<p>To learn more about how form validation works and how to take advantage of the {{cssxref(":valid")}} and {{cssxref(":invalid")}} CSS properties to style the input based on whether or not the current value is valid, see <a href="/en-US/docs/Learn/HTML/Forms/Form_validation">Form data validation</a>.</p> + +<div class="note"> +<p><strong>Note</strong>: There are known specification issues related to international domain names and the validation of email addresses in HTML. See <a href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=15489">W3C bug 15489</a> for details.</p> +</div> + +<h3 id="Pattern_validation">Pattern validation</h3> + +<p>If you need the entered email address to be restricted further than just "any string that looks like an email address," you can use the {{htmlattrxref("pattern", "input")}} attribute to specify a <a href="/en-US/docs/Web/JavaScript/Guide/Regular_Expressions">regular expression</a> the value must match for it to be valid. If the {{htmlattrxref("multiple", "input")}} attribute is specified, each individual item in the comma-delineated list of values must match the {{jsxref("regexp")}}.</p> + +<p>For example, let's say you're building a page for employees of Best Startup Ever, Inc. which will let them contact their IT department for help. In our simplified form, the user needs to enter their email address and a message describing the problem they need help with. We want to ensure that not only does the user provide a valid email address, but for security purposes, we require that the address be an internal corporate email address.</p> + +<p>Since inputs of type <code>"email"</code> validate against both the standard email address validation <em>and</em> the specified {{htmlattrxref("pattern", "input")}}, you can implement this easily. Let's see how:</p> + +<div class="hidden"> +<pre class="brush: css">body { + font: 16px sans-serif; +} + +.emailBox { + padding-bottom: 20px; +} + +.messageBox { + padding-bottom: 20px; +} + +label { + line-height: 22px; +} + +label::after { + content: ":"; +}</pre> +</div> + +<pre class="brush: html"><form> + <div class="emailBox"> + <label for="emailAddress">Your email address</label><br> + <input id="emailAddress" type="email" size="64" maxLength="64" required + placeholder="username@beststartupever.com" pattern=".+@beststartupever.com" + title="Please provide only a Best Startup Ever corporate email address"> + </div> + + <div class="messageBox"> + <label for="message">Request</label><br> + <textarea id="message" cols="80" rows="8" required + placeholder="My shoes are too tight, and I have forgotten how to dance."></textarea> + </div> + <input type="submit" value="Send Request"> +</form> +</pre> + +<p>{{EmbedLiveSample("Pattern_validation", 700, 275)}}</p> + +<p>Our {{HTMLElement("form")}} contains one {{HTMLElement("input")}} of type <code>"email"</code> for the user's email address, a {{HTMLElement("textarea")}} to enter their message for IT into, and an <code><input></code> of type <code><a href="/en-US/docs/Web/HTML/Element/input/submit">"submit"</a></code>, which creates a button to submit the form. Each text entry box has a {{HTMLElement("label")}} associated with it to let the user know what's expected of them.</p> + +<p>Let's take a closer look at the email address entry box. Its {{htmlattrxref("size", "input")}} and {{htmlattrxref("maxlength", "input")}} attributes are both set to 64 in order to show room for 64 characters worth of email address, and to limit the number of characters actually entered to a maximum of 64. The {{htmlattrxref("required", "input")}} attribute is specified, making it mandatory that a valid email address be provided.</p> + +<p>An appropriate {{htmlattrxref("placeholder", "input")}} is provided—<code>"username@beststartupever.com"</code>—to demonstrate what constitutes a valid entry. This string demonstrates both that an email address should be entered, and suggests that it should be a corporate beststartupever.com account. This is in addition to the fact that using type <code>"email"</code> will validate the text to ensure that it's formatted like an email address. If the text in the input box isn't an email address, you'll get an error message that looks something like this:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/14855/enter-valid-email-address.png" style="height: 125px; width: 530px;"></p> + +<p>If we left things at that, we would at least be validating on legitimate email addresses. But we want to go one step farther: we want to make sure that the email address is in fact in the form "<em>username</em>@beststartupever.com". This is where we'll use {{htmlattrxref("pattern", "input")}}. We set <code>pattern</code> to <code>".+@beststartupever.com"</code>. This simple regular expression requests a string that consists of at least one character of any kind, then an "@" followed by the domain name "beststartupever.com".</p> + +<p>Note that this is not even close to an adequate filter for valid email addresses; it would allow things such as " @beststartupever.com" (note the leading space) or "@@beststartupever.com", neither of which is valid. However, the browser runs both the standard email address filter <em>and</em> our custom pattern against the specified text. As a result, we wind up with a validation which says "make sure this is a valid email address, and if it is, make sure it's also a beststartupever.com address."</p> + +<p>It's advisable to use the {{htmlattrxref("title")}} attribute along with <code>pattern</code>. If you do, the <code>title</code> <em>must</em> describe the pattern. That is, it should explain what format the data should take on, rather than any other information. That's because the <code>title</code> may be displayed or spoken as part of a validation error message. For example, the browser might present the message "The entered text doesn't match the required pattern." followed by your specified <code>title</code>. If your <code>title</code> is something like "Email address", the result would be the message "The entered text doesn't match the required pattern. Email address", which isn't very good.</p> + +<p>That's why, instead, we specify the string "Please provide only a Best Startup Ever corporate email address" By doing that, the resulting full error message might be something like "The entered text doesn't match the required pattern. Please provide only a Best Startup Ever corporate email address."</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/14853/email-pattern-match-bad.png" style="height: 140px; width: 536px;"></p> + +<div class="note"> +<p><strong>Note</strong>: If you run into trouble while writing your validation regular expressions and they're not working properly, check your browser's console; there may be helpful error messages there to aid you in solving the problem.</p> +</div> + +<h2 id="Examples">Examples</h2> + +<p>Here we have an email input with the ID <code>"emailAddress"</code> which is allowed to be up to a maximum of 256 characters long. The input box itself is physically 64 characters wide, and displays the text <code>"user@example.gov"</code> as a placeholder anytime the field is empty. In addition, by using the {{htmlattrxref("multiple", "input")}} attribute, the box is configured to allow the user to enter zero or more email addresses, separated by commas, as described in {{anch("Allowing multiple email addresses")}}. As a final touch, the {{htmlattrxref("list", "input")}} attribute contains the ID of a {{HTMLElement("datalist")}} whose {{HTMLElement("option")}}s specify a set of suggested values the user can choose from.</p> + +<p>As an added touch, the {{HTMLElement("label")}} element is used to establish a label for the email entry box, with its {{htmlattrxref("for", "label")}} attribute referencing the <code>"emailAddress"</code> ID of the {{HTMLElement("input")}} element. By associating the two elements in this way, clicking on the label will focus the input element.</p> + +<pre class="brush: html"><label for="emailAddress">Email</label><br/> +<input id="emailAddress" type="email" placeholder="user@example.gov" + list="defaultEmails" size="64" maxlength="256" multiple> + +<datalist id="defaultEmails"> + <option value="jbond007@mi6.defence.gov.uk"> + <option value="jbourne@unknown.net"> + <option value="nfury@shield.org"> + <option value="tony@starkindustries.com"> + <option value="hulk@grrrrrrrr.arg"> +</datalist></pre> + +<p>{{EmbedLiveSample('Examples', 600, 50)}}</p> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'forms.html#e-mail-state-(type=email)', '<input type="email">')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>Initial definition</td> + </tr> + <tr> + <td>{{SpecName('HTML5.1', 'sec-forms.html#email-state-typeemail', '<input type="email">')}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + + + +<p>{{Compat("html.elements.input.input-email")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/en-US/docs/Learn/HTML/Forms">HTML forms guide</a></li> + <li>{{HTMLElement("input")}}</li> + <li><code><a href="/en-US/docs/Web/HTML/Element/input/tel"><input type="tel"></a></code></li> +</ul> diff --git a/files/zh-cn/web/html/element/input/file/index.html b/files/zh-cn/web/html/element/input/file/index.html new file mode 100644 index 0000000000..adfdb38b95 --- /dev/null +++ b/files/zh-cn/web/html/element/input/file/index.html @@ -0,0 +1,515 @@ +--- +title: <input type="file"> +slug: Web/HTML/Element/Input/file +tags: + - HTML + - HTML 表单 + - 多个文件 + - 文件 + - 文件选择器 + - 目录选择器 + - 表单输入 + - 输入类型 +translation_of: Web/HTML/Element/input/file +--- +<div>{{HTMLRef}}</div> + +<p>使用 <strong><code>type="file"</code> </strong>的 {{HTMLElement("input")}} 元素使得用户可以选择一个或多个元素以<a href="/zh-CN/docs/Learn/HTML/Forms">提交表单</a>的方式上传到服务器上，或者通过 Javascript 的 <a href="/zh-CN/docs/Web/API/File/Using_files_from_web_applications">File API</a> 对文件进行操作。</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/input-file.html", "tabbed-shorter")}}</div> + +<div class="hidden">这个交互式示例的源代码存储在 GitHub 存储库中。如果你想为互动范例项目作出贡献，请克隆 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> 并发送给我们发送一个拉取请求。</div> + +<table class="properties"> + <tbody> + <tr> + <td><strong>{{anch("Value")}}</strong></td> + <td>A {{domxref("DOMString")}} 表示已选择文件的路径</td> + </tr> + <tr> + <td><strong>事件</strong></td> + <td>{{domxref("HTMLElement/change_event", "change")}} 和 {{domxref("HTMLElement/input_event", "input")}}</td> + </tr> + <tr> + <td><strong>支持的公共属性</strong></td> + <td>{{htmlattrxref("required", "input")}}</td> + </tr> + <tr> + <td> + <p><strong>附加属性</strong></p> + </td> + <td>{{htmlattrxref("accept", "input/file")}}, {{htmlattrxref("capture", "input/file")}}, {{htmlattrxref("files", "input/file")}}, {{htmlattrxref("multiple", "input/file")}}</td> + </tr> + <tr> + <td><strong>IDL 属性</strong></td> + <td><code>files</code> 和 <code>value</code></td> + </tr> + <tr> + <td><strong>DOM 接口</strong></td> + <td> + <p>{{domxref("HTMLInputElement")}}</p> + </td> + </tr> + <tr> + <td><strong>属性</strong></td> + <td> + <p><a href="/zh-CN/docs/Web/API/HTMLInputElement">仅适用于类型为 <code>file</code> 元素的属性</a></p> + </td> + </tr> + <tr> + <td><strong>方法</strong></td> + <td>{{domxref("HTMLInputElement.select", "select()")}}</td> + </tr> + </tbody> +</table> + +<h2 id="值">值</h2> + +<p>文件 input 的 {{htmlattrxref("value", "input")}} 属性包括了一个 {{domxref("DOMString")}}，表示已选择文件的路径。如果用户选择了多个文件，则 <code>value</code> 表示他们选择的文件列表中的第一个文件。 可以使用 input 的 <code>HTMLInputElement.files</code> 属性标识其他文件。</p> + +<div class="note"><strong>Note:</strong> + +<ol> + <li>如果选择了多个文件, 这个值表示第一个已选择文件的路径。JavaScript 可以<a href="/zh-CN/docs/Web/API/File/Using_files_from_web_applications#Getting_information_about_selected_files">通过 input 的 files 属性访问其他文件</a>。</li> + <li>如果没有选择文件，该值为空字符串 <code>""</code>。</li> + <li>为了阻止恶意软件猜测文件路径，字符串<a href="https://html.spec.whatwg.org/multipage/input.html#fakepath-srsly">以 C:\fakepath\ 为前缀</a>。</li> +</ol> +</div> + +<h2 id="附加属性">附加属性</h2> + +<p>除了被所有 {{HTMLElement("input")}} 元素共享的公共属性，<code>file</code> 类型的 input 还支持下列属性：</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">属性</th> + <th scope="col">说明</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>{{anch("accept")}}</code></td> + <td>一个或多个 {{anch("Unique file type specifiers", "unique file type specifiers")}} 描述允许的文件类型</td> + </tr> + <tr> + <td><code>{{anch("capture")}}</code></td> + <td>捕获图像或视频数据的源</td> + </tr> + <tr> + <td><code>{{anch("files")}}</code></td> + <td>{{domxref("FileList")}} 列出了已选择的文件</td> + </tr> + <tr> + <td><code>{{anch("multiple")}}</code></td> + <td>布尔值，如果出现，则表示用户可以选择多个文件</td> + </tr> + </tbody> +</table> + +<h3 id="htmlattrdefaccept">{{htmlattrdef("accept")}}</h3> + +<p><code><a href="/zh-CN/docs/Web/HTML/Attributes/accept">accept</a></code> 属性是一个字符串，它定义了文件 input 应该接受的文件类型。这个字符串是一个以逗号为分隔的 <strong>{{anch("Unique file type specifiers", "</strong>唯一文件类型说明符<strong>")}} </strong>列表。由于给定的文件类型可以用多种方式指定，因此当你需要给定格式的文件时，提供一组完整的类型指定符是非常有用的。</p> + +<p>例如，有许多方法可以识别 Microsoft Word 文件，所以接受 Word 文件的站点可以使用一个<code><input></code>：</p> + +<pre class="brush: html"><input type="file" id="docpicker" + accept=".doc,.docx,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document"></pre> + +<h3 id="htmlattrdefcapture">{{htmlattrdef("capture")}}</h3> + +<p><a href="/zh-CN/docs/Web/HTML/Attributes/capture"><code>capture</code></a> 属性是一个字符串，如果 <code><a href="/zh-CN/docs/Web/HTML/Attributes/accept">accept</a></code> 属性指出了 input 是图片或者视频类型，则它指定了使用哪个摄像头去这些数据。值 <code>user</code> 表示应该使用前置摄像头和/或麦克风。值 <code>environment</code> 表示应该使用后置摄像头和/或麦克风。如果缺少此属性，则 {{Glossary("user agent")}} 可以自由决定做什么。如果请求的前置模式不可用，则用户代理可能退回到其首选的默认模式。</p> + +<div class="note"><strong>Note:</strong> <code>capture</code> 以前是一个布尔类型的属性，如果存在，则请求使用设备的媒体捕获设备（如：摄像机），而不是请求一个文件输入。</div> + +<h3 id="htmlattrdeffiles">{{htmlattrdef("files")}}</h3> + +<p>{{domxref("FileList")}} 对象每个已选择的文件。如果 {{htmlattrxref("multiple", "input/file")}} 属性没有指定，则这个列表只有一个成员。</p> + +<h3 id="htmlattrdefmultiple">{{htmlattrdef("multiple")}}</h3> + +<p>当指定布尔类型属性 <a href="/zh-CN/docs/Web/HTML/Attributes/multiple"><code>multiple</code></a>, 文件 input 允许用户选择多个文件。</p> + +<h2 id="非标准属性">非标准属性</h2> + +<p>除了上面列出来的属性，下面的非标准属性在某些浏览器中可用。你应该尽量避免使用它们，因为这样做将限制代码在没有实现它们的浏览器中的运行能力。</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">属性</th> + <th scope="col">描述</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>{{anch("webkitdirectory")}}</code></td> + <td>一个布尔值，表示是否仅允许用户选择一个目录（或多个目录，如果 <code>{{anch("multiple")}}</code> 也出现的话）</td> + </tr> + </tbody> +</table> + +<h3 id="htmlattrdefwebkitdirectory_non-standard_inline">{{htmlattrdef("webkitdirectory")}} {{non-standard_inline}}</h3> + +<div id="webkitdirectory-include"> +<p>如果出现布尔属性 <code>webkitdirectory，</code>表示在文件选择器界面中用户只能选择目录。更多细节和示例见 {{domxref("HTMLInputElement.webkitdirectory")}}。</p> + +<div class="note"> +<p><strong>Note:</strong> 尽管 <code>webkitdirectory</code> 最初仅为基于webkit的浏览器实现，它还在Microsoft Edge和Firefox 50及其后版本中可用。然而，尽管它有相对广泛的支持，它仍然是非标准的。除非你别无选择，否则不要使用它。</p> +</div> +</div> + +<h2 id="唯一文件类型说明符">唯一文件类型说明符</h2> + +<p><strong>唯一文件类型说明符</strong>是一个字符串，表示在 <code>file</code> 类型的 {{HTMLElement("input")}} 元素中用户可以选择的文件类型。每个唯一文件类型说明符可以采用下列形式之一：</p> + +<ul> + <li>一个以英文句号（"."）开头的合法的不区分大小写的文件名扩展名。例如： <code>.jpg</code>，<code>.pdf</code> 或 <code>.doc</code>。</li> + <li>一个不带扩展名的 MIME 类型字符串。</li> + <li>字符串 <code>audio/*</code>， 表示“任何音频文件”。</li> + <li>字符串 <code>video/*</code>，表示 “任何视频文件”。</li> + <li>字符串 <code>image/*</code>，表示 “任何图片文件”。</li> +</ul> + +<p><code>accept</code> 属性的值是一个包含一个或多个（用逗号分隔）这种唯一文件类型说明符的字符串。 例如，一个文件选择器需要能被表示成一张图片的内容，包括标准的图片格式和 PDF 文件，大概是这样的：</p> + +<pre class="brush: html"><input type="file" accept="image/*,.pdf"></pre> + +<h2 id="使用文件输入">使用文件输入</h2> + +<h3 id="基本示例">基本示例</h3> + +<pre class="brush: html"><form method="post" enctype="multipart/form-data"> + <div> + <label for="file">Choose file to upload</label> + <input type="file" id="file" name="file" multiple> + </div> + <div> + <button>Submit</button> + </div> +</form></pre> + +<div class="hidden"> +<pre class="brush: css">div { + margin-bottom: 10px; +}</pre> +</div> + +<p>产生如下结果：</p> + +<p>{{EmbedLiveSample('基本示例', 650, 60)}}</p> + +<div class="note"> +<p><strong>Note</strong>: 你也可以在 GitHub 中找到这个示例 — <a href="https://github.com/mdn/learning-area/blob/master/html/forms/file-examples/simple-file.html">源代码</a>和<a href="https://mdn.github.io/learning-area/html/forms/file-examples/simple-file.html">在线运行</a>。</p> +</div> + +<p>无论用户的设备或操作系统是什么，文件输入都提供一个按钮，打开一个允许用户选择文件的文件选择对话框。</p> + +<p>包含上述的 {{htmlattrxref("multiple", "input/file")}} 属性，指定可以一次选择多个文件。 用户可以用他们选择的平台允许的任何方式从文件选择器中选择多个文件（如，按住 <kbd>Shift</kbd> or <kbd>Control</kbd>，然后单击）。如果您只想让用户为每个 <code><input></code> 选择一个文件，那么省略 <code>multiple</code> 属性。</p> + +<h3 id="获取已选择文件的信息">获取已选择文件的信息</h3> + +<p>被选择的文件以 <code>HTMLInputElement.files</code> 属性返回，它是一个包含一列 {{domxref("File")}} 对象的 {{domxref("FileList")}} 对象。<code>FileList</code> 的行为像一个数组，所以你可以检查 <code>length</code> 属性来获得已选择文件的数量。</p> + +<p>每个 <code>File</code> 包含下列信息：</p> + +<dl> + <dt><code>name</code></dt> + <dd>文件名。</dd> + <dt><code>lastModified</code></dt> + <dd>一个数字，指定文件最后一次修改的日期和时间，以 UNIX 新纪元（1970年1月1日午夜）以来的毫秒数表示。</dd> + <dt><code>lastModifiedDate</code> {{deprecated_inline}}</dt> + <dd>一个 {{jsxref("Date")}} 对象，表示文件最后一次修改的日期和时间。<em>这被弃用，并且不应使用。使用 <code>lastModified</code> 作为替代</em>。</dd> + <dt><code>size</code></dt> + <dd>以字节数为单位的文件大小。</dd> + <dt><code>type</code></dt> + <dd>文件的 <a href="/zh-CN/docs/Web/HTTP/Basics_of_HTTP/MIME_types">MIME 类型</a>。</dd> + <dt><code>webkitRelativePath</code> {{non-standard_inline}}</dt> + <dd>一个字符串，指定了相对于在目录选择器中选择的基本目录的文件路径（即，一个设置了 {{htmlattrxref("webkitdirectory", "input/file")}} 属性的 <code>file</code> 选择器）。 <em>这是非标准的，应该谨慎使用。</em></dd> +</dl> + +<div class="note"> +<p><strong>Note</strong>: 你可以在所有现代浏览器中读写 <code>HTMLInputElement.files</code> 的值；最近这被添加到 Firefox 57 中（见 {{bug(1384030)}}）。</p> +</div> + +<h3 id="限制可接受的文件类型">限制可接受的文件类型</h3> + +<p>通常，你不希望用户能够选择任意类型的文件；相反，你通常希望它们选择特定类型的文件。例如，如果你的文件输入让用户上传个人资料图片，您可能希望他们选择 Web 兼容的图像格式，如 {{Glossary("JPEG")}} 或 {{Glossary("PNG")}}。</p> + +<p>可以用 {{htmlattrxref("accept","input/file")}} 属性指定可接受的文件类型，它是一个以逗号间隔的文件扩展名和 MIME 类型列表。一些例子：</p> + +<ul> + <li><code>accept="image/png"</code> 或 <code>accept=".png"</code> — 接受 PNG 文件。</li> + <li><code>accept="image/png, image/jpeg"</code> 或 <code>accept=".png, .jpg, .jpeg"</code> — 接受 PNG 或 JPEG 文件。</li> + <li><code>accept="image/*"</code> — 接受带有一个 <code>image/*</code> MIME 类型的任何文件。（许多移动设备也允许用户在使用它时用摄像头拍照。）</li> + <li><code>accept=".doc,.docx,.xml,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document"</code> — 接受 MS Word 文档之类的任何文件。</li> +</ul> + +<p>让我们来看一个更完整的例子：</p> + +<pre class="brush: html"><form method="post" enctype="multipart/form-data"> + <div> + <label for="profile_pic">Choose file to upload</label> + <input type="file" id="profile_pic" name="profile_pic" + accept=".jpg, .jpeg, .png"> + </div> + <div> + <button>Submit</button> + </div> +</form></pre> + +<div class="hidden"> +<pre class="brush: css">div { + margin-bottom: 10px; +}</pre> +</div> + +<p>上述代码产生和之前示例相似的结果：</p> + +<p>{{EmbedLiveSample('限制可接受的文件类型', 650, 60)}}</p> + +<div class="note"> +<p><strong>Note</strong>: 你也可以在 GitHub 中找到这个示例 — <a href="https://github.com/mdn/learning-area/blob/master/html/forms/file-examples/file-with-accept.html">源代码</a>和<a href="https://mdn.github.io/learning-area/html/forms/file-examples/file-with-accept.html">在线运行</a>。</p> +</div> + +<p>这可能看起来很相似，但是如果你尝试用该输入选择一个文件，你将看到文件选择器只允许你选择 <code>accept</code> 值指定的文件类型（实际特性会按不同的浏览器和操作系统有所不同）。</p> + +<p><img alt="Screenshot of a macOS file picker dialog. Files other than JPEG are grayed-out and unselectable." src="https://mdn.mozillademos.org/files/15183/file-chooser.png" style="margin: 0 auto;"></p> + +<p><code>accept</code> 属性不验证所选文件的类型；它只是为浏览器提供提示来引导用户选择正确的文件类型。用户仍然可以（在大多数情况下）在文件选择器中切换一个选项，使其能够覆盖此选项并选择他们希望的任何文件，然后选择不正确的文件类型。</p> + +<p>因此，您应该确保 <code>accept</code> 属性得到适当的服务器端验证的支持。</p> + +<h3 id="注意事项">注意事项</h3> + +<ol> + <li> + <p>你不能从脚本中设置文件选取器的值 — You cannot set the value of a file picker from a script — 做下面这样的事情是没有效果的：</p> + + <pre class="brush: js">const input = document.querySelector("input[type=file]"); +input.value = "foo"; +</pre> + </li> + <li> + <p>当使用一个 <code><input type="file"></code> 选择一个文件，When a file is chosen using an <code><input type="file"></code>，出于明显的安全原因，源文件的实际路径没有显示在 input 的 <code>value</code> 属性中。相反，显示了文件名，并用 <code>C:\fakepath\</code> 附加在路径的开头。这种怪癖有一些历史原因，但它在所有现代浏览器中都受到支持，而且实际上<a href="https://html.spec.whatwg.org/multipage/forms.html#fakepath-srsly">在规范中也有定义</a>。</p> + </li> +</ol> + +<h2 id="示例">示例</h2> + +<p>在本例中，我们将展示一个稍微高级一点的文件选择器，它利用了在 <code>HTMLInputElement.files</code> 属性中可用的文件信息，并且展示了一些聪明的技巧。</p> + +<div class="note"> +<p><strong>Note</strong>: 你可以在 GitHub 中查看本示例的完整源代码 — <a href="https://github.com/mdn/learning-area/blob/master/html/forms/file-examples/file-example.html">file-example.html</a> （<a href="https://mdn.github.io/learning-area/html/forms/file-examples/file-example.html">在线运行</a>）。我们不会解释 CSS；JavaScript是主要的关注点。</p> +</div> + +<p>首先，让我们看看 HTML：</p> + +<pre class="brush: html"><form method="post" enctype="multipart/form-data"> + <div> + <label for="image_uploads">Choose images to upload (PNG, JPG)</label> + <input type="file" id="image_uploads" name="image_uploads" accept=".jpg, .jpeg, .png" multiple> + </div> + <div class="preview"> + <p>No files currently selected for upload</p> + </div> + <div> + <button>Submit</button> + </div> +</form></pre> + +<div class="hidden"> +<pre class="brush: css">html { + font-family: sans-serif; +} + +form { + width: 580px; + background: #ccc; + margin: 0 auto; + padding: 20px; + border: 1px solid black; +} + +form ol { + padding-left: 0; +} + +form li, div > p { + background: #eee; + display: flex; + justify-content: space-between; + margin-bottom: 10px; + list-style-type: none; + border: 1px solid black; +} + +form img { + height: 64px; + order: 1; +} + +form p { + line-height: 32px; + padding-left: 10px; +} + +form label, form button { + background-color: #7F9CCB; + padding: 5px 10px; + border-radius: 5px; + border: 1px ridge black; + font-size: 0.8rem; + height: auto; +} + +form label:hover, form button:hover { + background-color: #2D5BA3; + color: white; +} + +form label:active, form button:active { + background-color: #0D3F8F; + color: white; +}</pre> +</div> + +<p>这和我们之前看到的类似 — 没有什么要说明的。</p> + +<p>接下来，让我们看一下JavaScript。</p> + +<p>在脚本的第一行，我们获得了对表单 input 本身和拥有 <code>.preview</code> 类的 {{htmlelement("div")}} 元素的引用。然后，我们隐藏了 {{htmlelement("input")}} 元素 — 我们这样做是因为文件输入往往很难看，难于设计样式，而且在跨浏览器中对它们的设计不一致。你可以通过单击 <code>input</code> 元素来激活它，因此，最好在视觉上隐藏 input 并将 label 设计成按钮的样式，这样用户如果想上传文件就会知道如何与之交互。</p> + +<pre class="brush: js">const input = document.querySelector('input'); +const preview = document.querySelector('.preview'); + +input.style.opacity = 0;</pre> + +<div class="note"> +<p><strong>Note:</strong> 使用{{cssxref("opacity")}} 来隐藏文件输入，而不是使用 {{cssxref("visibility", "visibility: hidden")}} 或者 {{cssxref("display", "display: none")}}，因为辅助技术将后两种样式解释为文件 input 是不可交互的。</p> +</div> + +<p>接下来，我们将<a href="/zh-CN/docs/Web/API/EventTarget/addEventListener">事件监听器</a>添加到 input 中，以监听选择的值的更改（在本例中，当选择文件时）。事件监听器调用我们定制的 <code>updateImageDisplay()</code> 函数。</p> + +<pre class="brush: js">input.addEventListener('change', updateImageDisplay);</pre> + +<p>每当 <code>updateImageDisplay()</code> 函数被调用时，我们：</p> + +<ul> + <li>使用一个 {{jsxref("Statements/while", "while")}} 循环来清空preview <code><div></code> 留下的内容。</li> + <li>获取包含所有已选择文件信息的 {{domxref("FileList")}} 对象，并将其用一个变量 <code>curFiles</code> 保存。</li> + <li>通过检查 <code>curFiles.length</code> 是否等于0来检查是否没有文件被选择。如果是，则用 preview <code><div></code> 输出一条消息，来表示没有选择文件。</li> + <li>如果<em>选择</em>了文件，我们将循环遍历每个文件，并将关于它的信息输出到 preview <code><div></code>。注意事项：</li> + <li>我们使用定制的 <code>validFileType()</code> 函数来检查文件的类型是否正确。（例如，用 <code>accept</code> 属性指定的图片类型）。</li> + <li>如果是，我们： + <ul> + <li>将其名称和文件大小输出到到 <span style="font-size: 1rem; letter-spacing: -0.00278rem;">previous </span><code style="font-size: 1rem; letter-spacing: -0.00278rem;"><div></code> 的一个列表项中（<span style="font-size: 1rem; letter-spacing: -0.00278rem;">从 </span><code style="font-size: 1rem; letter-spacing: -0.00278rem;">file.name</code><span style="font-size: 1rem; letter-spacing: -0.00278rem;"> 和 </span><code style="font-size: 1rem; letter-spacing: -0.00278rem;">file.size</code>获取）。定制的 <code style="font-size: 1rem; letter-spacing: -0.00278rem;">returnFileSize()</code><span style="font-size: 1rem; letter-spacing: -0.00278rem;"> 函数返回一个用 bytes/KB/MB 表示的</span>格式良好的大小（默认情况下，浏览器以绝对字节数报告大小）。</li> + <li>通过调用 {{domxref("URL.createObjectURL", "URL.createObjectURL(curFiles[i])")}} 来生成图片的一张缩略预览图。然后，通过创建一个新的 {{htmlelement("img")}} 来将这张图片也插入到列表项，并且将它的 {{htmlattrxref("src", "img")}} 设置为缩略图。</li> + </ul> + </li> + <li>如果文件类型无效，则在列表项中显示一条消息，告诉用户需要选择一个其它的文件类型。</li> +</ul> + +<pre class="brush: js">function updateImageDisplay() { + while(preview.firstChild) { + preview.removeChild(preview.firstChild); + } + + const curFiles = input.files; + if(curFiles.length === 0) { + const para = document.createElement('p'); + para.textContent = 'No files currently selected for upload'; + preview.appendChild(para); + } else { + const list = document.createElement('ol'); + preview.appendChild(list); + + for(const file of curFiles) { + const listItem = document.createElement('li'); + const para = document.createElement('p'); + if(validFileType(file)) { + para.textContent = `File name ${file.name}, file size ${returnFileSize(file.size)}.`; + const image = document.createElement('img'); + image.src = URL.createObjectURL(file); + + listItem.appendChild(image); + listItem.appendChild(para); + } else { + para.textContent = `File name ${file.name}: Not a valid file type. Update your selection.`; + listItem.appendChild(para); + } + + list.appendChild(listItem); + } + } +}</pre> + +<p>定制的 <code>validFileType()</code> 函数接受一个 {{domxref("File")}} 对象作为参数，然后使用 {{jsxref("Array.prototype.includes()")}} 检查 <code>fileTypes</code> 中是否有值和文件的 <code>type</code> 属性匹配。如果找到匹配项，函数返回 <code>true</code>。如果没找到，返回 <code>false</code>。</p> + +<pre class="brush: js">const fileTypes = [ + 'image/jpeg', + 'image/pjpeg', + 'image/png' +]; + +function validFileType(file) { + return fileTypes.includes(file.type); +}</pre> + +<p><code>returnFileSize()</code> 函数接受一个数字（字节数，取自当前文件的 <code>size</code> 属性）作为参数，并且将其转化为用 bytes/KB/MB 表示的格式良好的大小。</p> + +<pre class="brush: js">function returnFileSize(number) { + if(number < 1024) { + return number + 'bytes'; + } else if(number >= 1024 && number < 1048576) { + return (number/1024).toFixed(1) + 'KB'; + } else if(number >= 1048576) { + return (number/1048576).toFixed(1) + 'MB'; + } +}</pre> + +<p>这个例子是这样的；演示一下：</p> + +<p>{{EmbedLiveSample('示例', '100%', 200)}}</p> + +<h2 id="规范">规范</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">规范</th> + <th scope="col">状态</th> + <th scope="col">注释</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'input.html#file-upload-state-(type=file)', '<input type="file">')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>Initial definition</td> + </tr> + <tr> + <td>{{SpecName('HTML5.1', 'sec-forms.html#file-upload-state-typefile', '<input type="file">')}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td>Initial definition</td> + </tr> + <tr> + <td>{{SpecName('HTML Media Capture', '#the-capture-attribute','capture attribute')}}</td> + <td>{{Spec2('HTML Media Capture')}}</td> + <td>initial <code>capture</code> attribute</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<div class="hidden">本页面上的兼容性表格是由结构化数据生成的。如果你想为数据作出贡献的话，请查看 <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> 并给我们发送一个拉取请求。</div> + +<p>{{Compat("html.elements.input.input-file")}}</p> + +<h2 id="相关链接">相关链接</h2> + +<ul> + <li><a href="/zh-CN/docs/Web/API/File/Using_files_from_web_applications">在 web 应用中使用文件</a> — 包含许多其它关于 <code><input type="file"></code> 和 <a href="/zh-CN/docs/Web/API/File">File API</a> 的有用示例。</li> + <li><a href="zh-CN/docs/Learn/HTML/Forms/Property_compatibility_table_for_form_widgets">CCSS属性兼容性</a></li> +</ul> diff --git a/files/zh-cn/web/html/element/input/hidden/index.html b/files/zh-cn/web/html/element/input/hidden/index.html new file mode 100644 index 0000000000..0139486c72 --- /dev/null +++ b/files/zh-cn/web/html/element/input/hidden/index.html @@ -0,0 +1,227 @@ +--- +title: <input type="hidden"> +slug: Web/HTML/Element/Input/hidden +tags: + - HTML + - Input + - 表单 + - 输入框 + - 输入框属性 + - 隐藏表单 +translation_of: Web/HTML/Element/input/hidden +--- +<div>{{HTMLRef}}</div> + +<p><span class="seoSummary"><code><strong>"hidden"</strong></code> 类型的 <code>{{HTMLElement("input")}}</code> 元素允许 Web 开发者存放一些用户不可见、不可改的数据，在用户提交表单时，这些数据会一并发送出。比如，正被请求或编辑的内容的 ID，或是一个唯一的安全令牌。这些隐藏的 </span><code><a href="https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/input"><input></a></code><span class="seoSummary">元素在渲染完成的页面中完全不可见，而且没有方法可以使它重新变为可见。</span></p> + +<div class="note"> +<p><strong>注意：</strong>本警告框下面的代码下，就有一个 <code><input type="hidden"></code> 的 live example 可交互示例——如果它正常运作的话，你应当什么也看不到！</p> +</div> + +<div id="Basic_example"> +<pre class="brush: html"><input id="prodId" name="prodId" type="hidden" value="xm234jq"></pre> + +<p>{{ EmbedLiveSample('Basic_example', 600, 40) }}</p> +</div> + +<table class="properties"> + <tbody> + <tr> + <td><strong>{{anch("值")}}</strong></td> + <td><code>{{domxref("DOMString")}}</code>代表您要传递回服务器的隐藏数据的值</td> + </tr> + <tr> + <td><strong>事件</strong></td> + <td>无</td> + </tr> + <tr> + <td><strong>支持的公共属性</strong></td> + <td><code>{{htmlattrxref("autocomplete", "input")}}</code></td> + </tr> + <tr> + <td><strong>IDL 属性</strong></td> + <td><code>value</code></td> + </tr> + <tr> + <td><strong>方法</strong></td> + <td>无</td> + </tr> + </tbody> +</table> + +<div class="blockIndicator note"> +<p><strong>注意：</strong><code>{{HTMLElement("input")}}</code>和<code><a href="https://developer.mozilla.org/zh-CN/docs/Web/Events/change">change</a></code>事件不适用于此输入类型。隐藏的输入无法获得焦点, 即使使用JavaScript 例如(e.g. <code>hiddenInput.focus()</code>)</p> +</div> + +<h2 id="属性值">属性值</h2> + +<p><code>{{HTMLElement("input")}}</code>元素的<code>{{htmlattrxref("value", "input")}}</code>属性有<code>{{domxref("DOMString")}}</code>，其中包含您想提交到服务器的隐藏数据尽管您可以通过浏览器开发人员工具编辑该值，但明确的是，用户不能通过用户界面对其编辑或看到。</p> + +<div class="warning"> +<p><strong>重要提示：</strong>尽管该值未在页面内容中显示给用户，但可以使用任何浏览器的开发人员工具或“查看源代码”功能来查看并进行编辑。 请不要依赖 <code>hidden</code> 输入作为安全表单。</p> +</div> + +<h2 id="额外属性">额外属性</h2> + +<p>除所有 <code>{{HTMLElement("input")}}</code>元素所共有的属性之外，带有 <code>hidden</code> 属性的 <code>{{HTMLElement("input")}}</code>提供以下额外属性：</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">属性</th> + <th scope="col">描述</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>{{anch("name")}}</code></td> + <td>与所有输入类型一样，这可以是提交表单时反馈给服务器的 <code>{{HTMLElement("input")}}</code> 的名称；使用特殊属性值 <code>_charset_</code> 则会使当前隐藏 <code>{{HTMLElement("input")}}</code> 的值被反馈为表单内容的字符编码</td> + </tr> + </tbody> +</table> + +<h3 id="htmlattrdefname">{{htmlattrdef("name")}}</h3> + +<p>这实际上是常见属性之一，但它对于隐藏的 <code>{{HTMLElement("input")}}</code> 具有一个特殊含义。一般来说，<code>{{htmlattrxref("name", "input")}}</code> 的属性在隐藏 <code>{{HTMLElement("input")}}</code> 上的作用和任何其他 <code>{{HTMLElement("input")}}</code> 上的一样；但是，在提交表单时， <code>name</code> 属性被设置为 <code>_charset_</code> 的隐藏 <code>{{HTMLElement("input")}}</code>，其值会被自动设置为被提交表单的字符编码。</p> + +<h2 id="使用隐藏_<input>">使用隐藏 <code><a href="https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/input"><input></a></code></h2> + +<p>如上所述，隐藏的 <code>{{HTMLElement("input")}}</code> 可以用于任何有需要提交给服务器的、用户无法查看或编辑的数据的地方。让我们看一些说明其用法的例子吧。</p> + +<h3 id="跟踪被编辑的内容">跟踪被编辑的内容</h3> + +<p>隐藏输入的最常见用途之一是当被编辑的表单提交时，保持跟踪数据库数据的更新。<br> + 典型的工作流程如下所示：</p> + +<ol> + <li>用户决定编辑他们可以控制的某些内容，例如博客文章或产品条目。 他们可以通过按编辑按钮开始。</li> + <li>要被编辑的内容从数据库中提取并加载到HTML表单中，以允许用户进行更改。</li> + <li>编辑后，用户提交表单，并将更新后的被数据发送回服务器以在数据库中进行更新。</li> +</ol> + +<p>在这里的步骤2思路中，要被更新的ID记录保留在隐藏的输入中。 在步骤3中提交表单后，该ID随记录内容自动发送回服务器。 该ID使站点的服务器端组件确切知道哪些记录需要被提交的数据更新的。</p> + +<p>您可以在下面的 <a href="https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/input/hidden#例子">{{anch("例子")}}</a> 部分中看到完整的<a href="https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/input/hidden#例子">示例</a>。</p> + +<h3 id="改善网站安全性">改善网站安全性</h3> + +<p>隐藏输入表单还用于存储和提交安全令牌或机密信息，以提高网站的安全性。基本思路是，如果用户填写敏感表格，例如在其银行网站上将某笔款项转入另一个帐户的表格，他们将被提供的密钥和证明他们就是他们所说的真实身份，并且他们使用正确的表单来提交转移请求。</p> + +<p>这将阻止恶意用户创建伪造的表单，伪装成银行，然后通过电子邮件将表单发送给毫无戒备心的用户，以诱骗他们将钱转入错误的位置。 这种攻击称为<a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/Server-side/First_steps/Website_security#Cross-Site_Request_Forgery_(CSRF)">跨站点请求伪造（CSRF）</a>；几乎任何信誉良好的服务器端框架都使用隐藏机密来防止此类攻击。</p> + +<div class="note"> +<p>如前所述，将密钥放置在隐藏的输入中并不能使其固有安全性。 密钥的组成和编码已经可以做到这一点。隐藏输入的值是保持它与数据关联性，并在将表单发送到服务器时自动将其包含在内。 您需要使用精心设计的密钥来真正保护您的网站。</p> +</div> + +<h2 id="验证">验证</h2> + +<p>隐藏的 <code>{{HTMLElement("input")}}</code> 不参与约束验证；他们没有可受到约束的属性值。</p> + +<h2 id="例子">例子</h2> + +<p>让我们看一下如何使用隐藏输入保存正在被编辑的记录的ID，实现我们先前描述的编辑表单的简单版本（请参阅 <code><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/hidden#Tracking_edited_content">{{anch("Tracking edited content")}}</a></code>）。</p> + +<p>编辑表单的HTML可能看起来像这样：</p> + +<pre class="brush: html"><form> + <div> + <label for="title">Post title:</label> + <input type="text" id="title" name="title" value="My excellent blog post"> + </div> + <div> + <label for="content">Post content:</label> + <textarea id="content" name="content" cols="60" rows="5"> +This is the content of my excellent blog post. I hope you enjoy it! + </textarea> + </div> + <div> + <button type="submit">Update post</button> + </div> + <input type="hidden" id="postId" name="postId" value="34657"> +</form></pre> + +<p>我们还添加一些简单的CSS：</p> + +<pre class="brush: css">html { + font-family: sans-serif; +} + +form { + width: 500px; +} + +div { + display: flex; + margin-bottom: 10px; +} + +label { + flex: 2; + line-height: 2; + text-align: right; + padding-right: 20px; +} + +input, textarea { + flex: 7; + font-family: sans-serif; + font-size: 1.1rem; + padding: 5px; +} + +textarea { + height: 60px; +}</pre> + +<p>在将表单发送给用户的浏览器之前，服务器会将ID <code>"postID"</code>的隐藏输入的值设置为其数据库中发送的ID，并在返回表单时使用该信息来知道要向哪个数据库记录更新改变后的信息。 内容中无需脚本即可处理。</p> + +<p>输出看起来像这样：</p> + +<p>{{ EmbedLiveSample('Examples', '100%', 200) }}</p> + +<div class="note"> +<p>注意：您还可以在GitHub上找到示例（请参见<a href="https://github.com/mdn/learning-area/blob/master/html/forms/hidden-input-example/index.html">源代码</a>，并可以<a href="https://mdn.github.io/learning-area/html/forms/hidden-input-example/index.html">实时运行</a>）。</p> +</div> + +<p>提交后，发送到服务器的表单数据将如下所示：</p> + +<p><code>title=My+excellent+blog+post&content=This+is+the+content+of+my+excellent+blog+post.+I+hope+you+enjoy+it!&postId=34657</code></p> + +<p>即使根本看不到隐藏的 <code>{{HTMLElement("input")}}</code>，它所包含的数据仍然会被提交给服务器。</p> + +<h2 id="规范">规范</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">规范</th> + <th scope="col">状态</th> + <th scope="col">备注</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'forms.html#hidden-state-(type=hidden)', '<input type="hidden">')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>初始化定义</td> + </tr> + <tr> + <td>{{SpecName('HTML5.1', 'forms.html#hidden-state-(type=hidden)', '<input type="hidden">')}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td>初始化定义</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<div class="hidden">此页面上的兼容性表是根据结构化数据生成的。 如果您想贡献数据，请查看https://github.com/mdn/browser-compat-data，向我们发送一个拉取请求。</div> + +<p>{{Compat("html.elements.input.input-hidden")}}</p> + +<h2 id="参见">参见</h2> + +<ul> + <li><a href="/en-US/docs/Learn/HTML/Forms">HTML forms guide</a></li> + <li>{{HTMLElement("input")}} and the {{domxref("HTMLInputElement")}} interface it's based upon</li> +</ul> diff --git a/files/zh-cn/web/html/element/input/image/index.html b/files/zh-cn/web/html/element/input/image/index.html new file mode 100644 index 0000000000..1889701480 --- /dev/null +++ b/files/zh-cn/web/html/element/input/image/index.html @@ -0,0 +1,123 @@ +--- +title: <input type="image"> +slug: Web/HTML/Element/Input/image +translation_of: Web/HTML/Element/input/image +--- +<div>{{HTMLRef}}</div> +<p><code><input type="image"> 标签是一个图片提交按钮</code>。 你必须使用 <strong>src</strong> 属性来定义图片的源，并且使用<strong>alt</strong>来定义当图片无法显示的时候的替代文字。 <strong>height</strong> 和<strong>width</strong>属性是用来定义图片的高和宽的。</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row">Permitted content</th> + <td>None, it is an {{Glossary("empty element")}}.</td> + </tr> + <tr> + <th scope="row">Tag omission</th> + <td>Must have a start tag and must not have an end tag.</td> + </tr> + <tr> + <th scope="row">Permitted parent elements</th> + <td>Any element that accepts <a href="/en-US/docs/HTML/Content_categories#Phrasing_content">phrasing content</a>.</td> + </tr> + <tr> + <th scope="row">DOM interface</th> + <td>{{domxref("HTMLInputElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Attributes">Attributes</h2> + +<p>This element includes the <a href="/en-US/docs/HTML/Global_attributes">global attributes</a>.</p> + +<p>{{htmlattrdef("type")}}</p> + +<dl> + <dt>{{htmlattrdef("formaction")}} {{HTMLVersionInline("5")}}</dt> + <dd>The URI of a program that processes the information submitted by the input element, here image if specified, it overrides the {{htmlattrxref("action","form")}} attribute of the element's form owner.</dd> +</dl> + +<dl> + <dt>{{htmlattrdef("formenctype")}} {{HTMLVersionInline("5")}}</dt> + <dd>If the input element is an image, this attribute specifies the type of content that is used to submit the form to the server. Possible values are: + <ul> + <li><code>application/x-www-form-urlencoded</code>: The default value if the attribute is not specified.</li> + <li><code>multipart/form-data</code>: Use this value if you are using an {{HTMLElement("input")}} element with the {{htmlattrxref("type","input")}} attribute set to <code>file</code>.</li> + <li><code>text/plain</code></li> + </ul> + + <p>If this attribute is specified, it overrides the {{htmlattrxref("enctype","form")}} attribute of the element's form owner.</p> + </dd> + <dt>{{htmlattrdef("formmethod")}} {{HTMLVersionInline("5")}}</dt> + <dd>In image input element, this attribute specifies the HTTP method that the browser uses to submit the form. Possible values are: + <ul> + <li><code>post</code>: The data from the form is included in the body of the form and is sent to the server.</li> + <li><code>get</code>: The data from the form is appended to the <strong>form</strong> attribute URI, with a '?' as a separator, and the resulting URI is sent to the server. Use this method when the form has no side-effects and contains only ASCII characters.</li> + </ul> + + <p>If specified, this attribute overrides the {{htmlattrxref("method","form")}} attribute of the element's form owner.</p> + </dd> + <dt>{{htmlattrdef("formnovalidate")}} {{HTMLVersionInline("5")}}</dt> + <dd>This Boolean attribute specifies that the form is not to be validated when it is submitted. If this attribute is specified, it overrides the {{htmlattrxref("novalidate","form")}} attribute of the element's form owner.</dd> + <dt>{{htmlattrdef("formtarget")}} {{HTMLVersionInline("5")}}</dt> + <dd>This attribute is a name or keyword indicating where to display the response that is received after submitting the form. This is a name of, or keyword for, a <em>browsing context</em> (for example, tab, window, or inline frame). If this attribute is specified, it overrides the {{htmlattrxref("target", "form")}} attribute of the element's form owner. The following keywords have special meanings: + <ul> + <li>_<code>self</code>: Load the response into the same browsing context as the current one. This value is the default if the attribute is not specified.</li> + <li><code>_blank</code>: Load the response into a new unnamed browsing context.</li> + <li><code>_parent</code>: Load the response into the parent browsing context of the current one. If there is no parent, this option behaves the same way as <code>_self</code>.</li> + <li><code>_top</code>: Load the response into the top-level browsing context (that is, the browsing context that is an ancestor of the current one, and has no parent). If there is no parent, this option behaves the same way as <code>_self</code>.</li> + </ul> + </dd> + <dt>{{htmlattrdef("height")}} {{HTMLVersionInline("5")}}</dt> + <dd>This attribute defines the height of the image displayed for the button.</dd> + <dt>{{htmlattrdef("required")}} {{HTMLVersionInline("5")}}</dt> + <dd>This attribute specifies that the user must fill in a value before submitting a form but it cannot be used when the <strong>type</strong> attribute is <code>image</code> type (<code>submit</code>, <code>reset</code>, or <code>button</code>). The {{cssxref(":optional")}} and {{cssxref(":required")}} CSS pseudo-classes will be applied to the field as appropriate.</dd> + <dt>{{htmlattrdef("src")}}</dt> + <dd>This attribute specifies a URI for the location of an image to display on the graphical submit button; otherwise it is ignored.</dd> + <dt>{{htmlattrdef("usemap")}} {{HTMLVersionInline(4)}} only, {{obsoleteGeneric("inline", "HTML5")}}</dt> + <dd>The name of a {{HTMLElement("map")}} element as an image map.</dd> + <dt>{{htmlattrdef("width")}} {{HTMLVersionInline("5")}}</dt> + <dd>This attribute defines the width of the image displayed for the button.</dd> + <dt> + <h2 id="Examples">Examples</h2> + </dt> +</dl> + +<h3 id="simple_input_image_example" name="simple_input_image_example">Firefox logo input image example</h3> + +<pre class="brush: html notranslate"><input type="image" name="image" src="/files/2917/fxlogo.png" width="50"></pre> + +<h4 id="Result">Result</h4> + +<p>{{ EmbedLiveSample('simple_input_image_example') }}</p> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', 'https://html.spec.whatwg.org/multipage/forms.html#image-button-state-%28type=image%29', '<input type="image">')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'http://www.w3.org/TR/html5/forms.html#image-button-state-%28type=image%29', '<input type="image">')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'interact/forms.html#h-17.4', '<form>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + </tr> + </tbody> +</table> + + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<div class="hidden">The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</div> + +<p>{{Compat("html.elements.input.input-image")}}</p> diff --git a/files/zh-cn/web/html/element/input/index.html b/files/zh-cn/web/html/element/input/index.html new file mode 100644 index 0000000000..c275b7891c --- /dev/null +++ b/files/zh-cn/web/html/element/input/index.html @@ -0,0 +1,1883 @@ +--- +title: <input>：输入（表单输入）元素 +slug: Web/HTML/Element/Input +tags: + - Element + - Forms + - HTML + - HTML forms + - HTML input tag + - Input + - Reference + - Web +translation_of: Web/HTML/Element/input +--- +<p id="概述">{{HTMLRef}}</p> + +<p><strong>HTML <code><input></code> 元素</strong>用于为基于Web的表单创建交互式控件，以便接受来自用户的数据; 可以使用各种类型的输入数据和控件小部件，具体取决于设备和{{Glossary("user agent")}}。</p> + +<p>{{EmbedInteractiveExample("pages/tabbed/input-text.html", "tabbed-shorter")}}</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/en-US/docs/HTML/Content_categories">内容分类</a></th> + <td>流动区域; 内容区域; 交互式内容（如果不是处于<code>hiddenhidden</code>状态）; 列表，可标签，可提交，可重置，与表单相关的元素。</td> + </tr> + <tr> + <th scope="row">允许的内容</th> + <td>无，这是一个{{Glossary("empty element","空元素")}}。</td> + </tr> + <tr> + <th scope="row">标签省略</th> + <td> + <p>必须有开始标签但不必有结束标签。</p> + </td> + </tr> + <tr> + <th scope="row">允许的祖先元素</th> + <td>任何元素都可以包含语句型元素。</td> + </tr> + <tr> + <th scope="row">允许的无障碍网络应用</th> + <td> + <ul> + <li><code>type=button</code>: {{ARIARole("link")}}, {{ARIARole("menuitem")}}, {{ARIARole("menuitemcheckbox")}}, {{ARIARole("menuitemradio")}}, {{ARIARole("radio")}}, {{ARIARole("switch")}}, {{ARIARole("tab")}}</li> + <li><code>type=checkbox</code>: {{ARIARole("button")}}, {{ARIARole("menuitemcheckbox")}}, {{ARIARole("option")}}, {{ARIARole("switch")}}</li> + <li><code>type=image</code>: {{ARIARole("link")}}, {{ARIARole("menuitem")}}, {{ARIARole("menuitemcheckbox")}}, {{ARIARole("menuitemradio")}}, {{ARIARole("radio")}}, {{ARIARole("switch")}}</li> + <li><code>type=radio</code>: {{ARIARole("menuitemradio")}}</li> + <li><code>type=color|date|datetime|datetime-local|email|file</code>: None</li> + <li><code>type=hidden|month|number|password|range|research</code>: None</li> + <li><code>type=search|submit|tel|text|url|week</code>: None</li> + </ul> + </td> + </tr> + <tr> + <th scope="row">DOM 接口</th> + <td>{{domxref("HTMLInputElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="<input>_types"><code><input></code> types</h2> + +<p><code><input></code>的工作方式相当程度上取决于{{htmlattrxref("type", "input")}}属性的值，不同的 type 值会在各自的参考页中进行介绍。如果未指定此属性，则采用的默认类型为 <code>text</code>。</p> + +<p>可用的值包括：</p> + +<table class="standard-table"> + <colgroup> + <col> + <col style="width: 50%;"> + <col> + </colgroup> + <thead> + <tr> + <th>Type</th> + <th>描述</th> + <th>基础例子</th> + <th>Spec</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{HTMLElement("input/button", "button")}}</td> + <td>没有默认行为的按钮，上面显示 {{anch('value')}} 属性的值，默认为空。</td> + <td id="examplebutton"> + <pre class="brush: html hidden"> +<input type="button" name="button" /></pre> + <iframe class="live-sample-frame nobutton" frameborder="0" height="55" id="frame_examplebutton" src="https://mdn.mozillademos.org/en-US/docs/Web/HTML/Element/input$samples/examplebutton?revision=1612291" width="200"></iframe></td> + <td></td> + </tr> + <tr> + <td>{{HTMLElement("input/checkbox", "checkbox")}}</td> + <td>复选框，可设为选中或未选中。</td> + <td id="examplecheckbox"> + <pre class="brush: html hidden"> +<input type="checkbox" name="checkbox"/></pre> + <iframe class="live-sample-frame nobutton" frameborder="0" height="55" id="frame_examplecheckbox" src="https://mdn.mozillademos.org/en-US/docs/Web/HTML/Element/input$samples/examplecheckbox?revision=1612291" width="200"></iframe></td> + <td></td> + </tr> + <tr> + <td>{{HTMLElement("input/color", "color")}}</td> + <td>用于指定颜色的控件；在支持的浏览器中，激活时会打开取色器。</td> + <td id="examplecolor"> + <pre class="brush: html hidden"> +<input type="color" name="color"/></pre> + <iframe class="live-sample-frame nobutton" frameborder="0" height="55" id="frame_examplecolor" src="https://mdn.mozillademos.org/en-US/docs/Web/HTML/Element/input$samples/examplecolor?revision=1612291" width="200"></iframe></td> + <td>{{HTMLVersionInline("5")}}</td> + </tr> + <tr> + <td>{{HTMLElement("input/date", "date")}}</td> + <td>输入日期的控件（年、月、日，不包括时间）。在支持的浏览器激活时打开日期选择器或年月日的数字滚轮。</td> + <td id="exampledate"> + <pre class="brush: html hidden"> +<input type="date" name="date"/></pre> + <iframe class="live-sample-frame nobutton" frameborder="0" height="55" id="frame_exampledate" src="https://mdn.mozillademos.org/en-US/docs/Web/HTML/Element/input$samples/exampledate?revision=1612291" width="200"></iframe></td> + <td> {{HTMLVersionInline("5")}}</td> + </tr> + <tr> + <td>{{HTMLElement("input/datetime-local", "datetime-local")}}</td> + <td>输入日期和时间的控件，不包括时区。在支持的浏览器激活时打开日期选择器或年月日的数字滚轮。</td> + <td id="exampledtl"> + <pre class="brush: html hidden"> +<input type="datetime-local" name="datetime-local"/></pre> + <iframe class="live-sample-frame nobutton" frameborder="0" height="55" id="frame_exampledtl" src="https://mdn.mozillademos.org/en-US/docs/Web/HTML/Element/input$samples/exampledtl?revision=1612291" width="200"></iframe></td> + <td>{{HTMLVersionInline("5")}}</td> + </tr> + <tr> + <td>{{HTMLElement("input/email", "email")}}</td> + <td>编辑邮箱地址的区域。类似 <code>text</code> 输入，但在支持的浏览器和带有动态键盘的设备上会有确认参数和相应的键盘。</td> + <td id="exampleemail"> + <pre class="brush: html hidden"> +<input type="email" name="email"/></pre> + <iframe class="live-sample-frame nobutton" frameborder="0" height="55" id="frame_exampleemail" src="https://mdn.mozillademos.org/en-US/docs/Web/HTML/Element/input$samples/exampleemail?revision=1612291" width="200"></iframe></td> +<td></td> + </tr> + <tr> + <td>{{HTMLElement("input/file", "file")}}</td> + <td>让用户选择文件的控件。使用{{anch('accept')}}属性规定控件能选择的文件类型。</td> + <td id="examplefile"> + <pre class="brush: html hidden"> +<input type="file" accept="image/*, text/*" name="file"/></pre> + <iframe class="live-sample-frame nobutton" frameborder="0" height="55" id="frame_examplefile" src="https://mdn.mozillademos.org/en-US/docs/Web/HTML/Element/input$samples/examplefile?revision=1612291" width="100%"></iframe></td> + <td></td> + </tr> + <tr> + <td>{{HTMLElement("input/hidden", "hidden")}}</td> + <td>不显示的控件，其值仍会提交到服务器。举个例子，右边就是一个隐形的控件。</td> + <td></td> + <td></td> + </tr> + <tr> + <td>{{HTMLElement("input/image", "image")}}</td> + <td>带图像的 <code>submit</code> 按钮。显示的图像由 <code>src</code> 属性规定。如果 {{anch('src')}} 缺失，{{anch('alt')}} 属性就会显示。</td> + <td id="exampleimage"> + <pre class="brush: html hidden"> +<input type="image" name="image" src="" alt="image input"/></pre> + <iframe class="live-sample-frame nobutton" frameborder="0" height="55" id="frame_exampleimage" src="https://mdn.mozillademos.org/en-US/docs/Web/HTML/Element/input$samples/exampleimage?revision=1612291" width="200"></iframe></td> + <td></td> + </tr> + <tr> + <td>{{HTMLElement("input/month", "month")}}</td> + <td>输入年和月的控件，没有时区。</td> + <td id="examplemonth"> + <pre class="brush: html hidden"> +<input type="month" name="month"/></pre> + <iframe class="live-sample-frame nobutton" frameborder="0" height="55" id="frame_examplemonth" src="https://mdn.mozillademos.org/en-US/docs/Web/HTML/Element/input$samples/examplemonth?revision=1612291" width="200"></iframe></td> + <td>{{HTMLVersionInline("5")}}</td> + </tr> + <tr> + <td>{{HTMLElement("input/number", "number")}}</td> + <td>用于输入数字的控件。如果支持的话，会显示滚动按钮并提供缺省验证（即只能输入数字）。拥有动态键盘的设备上会显示数字键盘。</td> + <td id="examplenumber"> + <pre class="brush: html hidden"> +<input type="number" name="number"/></pre> + <iframe class="live-sample-frame nobutton" frameborder="0" height="55" id="frame_examplenumber" src="https://mdn.mozillademos.org/en-US/docs/Web/HTML/Element/input$samples/examplenumber?revision=1612291" width="200"></iframe></td> +<td></td> + </tr> + <tr> + <td>{{HTMLElement("input/password", "password")}}</td> + <td>单行的文本区域，其值会被遮盖。如果站点不安全，会警告用户。</td> + <td id="examplepassword"> + <pre class="brush: html hidden"> +<input type="password" name="password"/></pre> + <iframe class="live-sample-frame nobutton" frameborder="0" height="55" id="frame_examplepassword" src="https://mdn.mozillademos.org/en-US/docs/Web/HTML/Element/input$samples/examplepassword?revision=1612291" width="200"></iframe></td> + <td></td> + </tr> + <tr> + <td>{{HTMLElement("input/radio", "radio")}}</td> + <td>单选按钮，允许在多个拥有相同 {{anch('name')}} 值的选项中选中其中一个。</td> + <td id="exampleradio"> + <pre class="brush: html hidden"> +<input type="radio" name="radio"/></pre> + <iframe class="live-sample-frame nobutton" frameborder="0" height="55" id="frame_exampleradio" src="https://mdn.mozillademos.org/en-US/docs/Web/HTML/Element/input$samples/exampleradio?revision=1612291" width="200"></iframe></td> + <td></td> + </tr> + <tr> + <td>{{HTMLElement("input/range", "range")}}</td> + <td>此控件用于输入不需要精确的数字。控件是一个范围组件，默认值为正中间的值。同时使用{{anch('htmlattrdefmin')}} 和 {{anch('htmlattrdefmax')}}来规定值的范围。</td> + <td id="examplerange"> + <pre class="brush: html hidden"> +<input type="range" name="range" min="0" max="25"/></pre> + <iframe class="live-sample-frame nobutton" frameborder="0" height="55" id="frame_examplerange" src="https://mdn.mozillademos.org/en-US/docs/Web/HTML/Element/input$samples/examplerange?revision=1612291" width="200"></iframe></td> + <td> {{HTMLVersionInline("5")}}</td> + </tr> + <tr> + <td>{{HTMLElement("input/reset", "reset")}}</td> + <td>此按钮将表单的所有内容重置为默认值。不推荐。</td> + <td id="examplereset"> + <pre class="brush: html hidden"> +<input type="reset" name="reset"/></pre> + <iframe class="live-sample-frame nobutton" frameborder="0" height="55" id="frame_examplereset" src="https://mdn.mozillademos.org/en-US/docs/Web/HTML/Element/input$samples/examplereset?revision=1612291" width="200"></iframe></td> + <td></td> + </tr> + <tr> + <td>{{HTMLElement("input/search", "search")}}</td> + <td>用于搜索字符串的单行文字区域。输入文本中的换行会被自动去除。在支持的浏览器中可能有一个删除按钮，用于清除整个区域。拥有动态键盘的设备上的回车图标会变成搜索图标。</td> + <td id="examplesearch"> + <pre class="brush: html hidden"> +<input type="search" name="search"/></pre> + <iframe class="live-sample-frame nobutton" frameborder="0" height="55" id="frame_examplesearch" src="https://mdn.mozillademos.org/en-US/docs/Web/HTML/Element/input$samples/examplesearch?revision=1612291" width="200"></iframe></td> + <td>{{HTMLVersionInline("5")}}</td> + </tr> + <tr> + <td>{{HTMLElement("input/submit", "submit")}}</td> + <td>用于提交表单的按钮。</td> + <td id="examplesubmit"> + <pre class="brush: html hidden"> +<input type="submit" name="submit"/></pre> + <iframe class="live-sample-frame nobutton" frameborder="0" height="55" id="frame_examplesubmit" src="https://mdn.mozillademos.org/en-US/docs/Web/HTML/Element/input$samples/examplesubmit?revision=1612291" width="200"></iframe></td> + <td></td> + </tr> + <tr> + <td>{{HTMLElement("input/tel", "tel")}}</td> + <td>用于输入电话号码的控件。拥有动态键盘的设备上会显示电话数字键盘。</td> + <td id="exampletel"> + <pre class="brush: html hidden"> +<input type="tel" name="tel"/></pre> + <iframe class="live-sample-frame nobutton" frameborder="0" height="55" id="frame_exampletel" src="https://mdn.mozillademos.org/en-US/docs/Web/HTML/Element/input$samples/exampletel?revision=1612291" width="200"></iframe></td> + <td>{{HTMLVersionInline("5")}}</td> + </tr> + <tr> + <td>{{HTMLElement("input/text", "text")}}</td> + <td>默认值。单行的文本区域，输入中的换行会被自动去除。</td> + <td id="exampletext"> + <pre class="brush: html hidden"> +<input type="text" name="text"/></pre> + <iframe class="live-sample-frame nobutton" frameborder="0" height="55" id="frame_exampletext" src="https://mdn.mozillademos.org/en-US/docs/Web/HTML/Element/input$samples/exampletext?revision=1612291" width="200"></iframe></td> + <td></td> + </tr> + <tr> + <td>{{HTMLElement("input/time", "time")}}</td> + <td>用于输入时间的控件，不包括时区。</td> + <td id="exampletime"> + <pre class="brush: html hidden"> +<input type="time" name="time"/></pre> + <iframe class="live-sample-frame nobutton" frameborder="0" height="55" id="frame_exampletime" src="https://mdn.mozillademos.org/en-US/docs/Web/HTML/Element/input$samples/exampletime?revision=1612291" width="200"></iframe></td> + <td>{{HTMLVersionInline("5")}}</td> + </tr> + <tr> + <td>{{HTMLElement("input/url", "url")}}</td> + <td> + <p>用于输入 URL 的控件。类似 <code>text</code> 输入，但有验证参数，在支持动态键盘的设备上有相应的键盘。</p> + </td> + <td id="exampleurl"> + <pre class="brush: html hidden"> +<input type="url" name="url"/></pre> + <iframe class="live-sample-frame nobutton" frameborder="0" height="55" id="frame_exampleurl" src="https://mdn.mozillademos.org/en-US/docs/Web/HTML/Element/input$samples/exampleurl?revision=1612291" width="200"></iframe></td> + <td>{{HTMLVersionInline("5")}}</td> + </tr> + <tr> + <td>{{HTMLElement("input/week", "week")}}</td> + <td>用于输入以年和周数组成的日期，不带时区。</td> + <td id="exampleweek"> + <pre class="brush: html hidden"> +<input type="week" name="week"/></pre> + <iframe class="live-sample-frame nobutton" frameborder="0" height="55" id="frame_exampleweek" src="https://mdn.mozillademos.org/en-US/docs/Web/HTML/Element/input$samples/exampleweek?revision=1612291" width="200"></iframe></td> +<td></td> + </tr> + <tr> + <th colspan="4">废弃的值</th> + </tr> + <tr> + <td>{{HTMLElement("input/datetime", "datetime")}}</td> + <td>{{deprecated_inline}} {{obsolete_inline}} 用于输入基于UTC时区的日期和时间（时、分、秒及秒的小数部分）。</td> + <td id="exampledatetime"> + <pre class="brush: html hidden"> +<input type="datetime" name="datetime"/></pre> + <iframe class="live-sample-frame nobutton" frameborder="0" height="75" id="frame_exampledatetime" src="https://mdn.mozillademos.org/en-US/docs/Web/HTML/Element/input$samples/exampledatetime?revision=1612291" width="200"></iframe></td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="属性"><span style='font-family: x-locale-heading-primary,zillaslab,Palatino,"Palatino Linotype",x-locale-heading-secondary,serif; font-size: 2.33333rem; letter-spacing: -0.00278rem;'>属性</span></h2> + +<p><code><input></code>元素由于拥有诸多属性而异常强大，其中前文举例说明的{{htmlattrxref("type", "input")}}属性尤其重要。由于所有<code><input></code>元素，无论是哪种 <code>type</code> ，都基于{{domxref("HTMLInputElement")}}接口，所以理论上说，它们共享一套相同的属性。但实际上大部分属性只作用于特定一组 <code>type</code>。此外，一些属性作用于<code><input></code>的方式取决于<code><input></code>的<code>type</code>属性，不同的<code>type</code>有不同的效果。</p> + +<p>下面的表格列出了所有属性，每个属性都有简短的描述。表格后的列表更详细地描述了各个属性及它们与哪些<code><input></code> <code>type</code>相关。与大部分或者全部<code><input></code> <code>type</code>都相关的属性会讲述更多细节。一些针对特定<code><input></code> <code>type</code>的属性，或者所有<code><input></code> <code>type</code>都有，但在特定的<code><input></code> <code>type</code>上有特定表现的属性，会在相应的<code>type</code>页面中说明。这个元素包含全局属性，一些针对<code><input></code>元素有额外意义的全局属性也会特别说明。</p> + +<table> + <caption> + <p>{{htmlelement('input')}}元素的属性包括<a href="https://wiki.developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes">全局HTML属性</a>和以下属性：</p> + + <table> + <thead> + <tr> + <th scope="col">属性</th> + <th scope="col">相关的 type</th> + <th scope="col">描述</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{anch('htmlattrdefaccept', 'accept')}}</td> + <td>file</td> + <td>用于规定文件上传控件中期望的文件类型</td> + </tr> + <tr> + <td>{{anch('htmlattrdefalt', 'alt')}}</td> + <td>image</td> + <td>image type的alt属性，是可访问性的要求。</td> + </tr> + <tr> + <td>{{anch('htmlattrdefautocomplete', 'autocomplete')}}</td> + <td>所有</td> + <td>用于表单的自动填充功能</td> + </tr> + <tr> + <td>{{anch('htmlattrdefautofocus', 'autofocus')}}</td> + <td>所有</td> + <td>页面加载时自动聚焦到此表单控件</td> + </tr> + <tr> + <td>{{anch('htmlattrdefcapture', 'capture')}}</td> + <td>file</td> + <td>文件上传控件中媒体拍摄的方式</td> + </tr> + <tr> + <td>{{anch('htmlattrdefchecked', 'checked')}}</td> + <td>radio, checkbox</td> + <td>用于控制控件是否被选中</td> + </tr> + <tr> + <td>{{anch('htmlattrdefdirname', 'dirname')}}</td> + <td>text, search</td> + <td>表单区域的一个名字，用于在提交表单时发送元素的方向性</td> + </tr> + <tr> + <td>{{anch('htmlattrdefdisabled', 'disabled')}}</td> + <td>所有</td> + <td>表单控件是否被禁用</td> + </tr> + <tr> + <td>{{anch('htmlattrdefform', 'form')}}</td> + <td>所有</td> + <td>将控件和一个form元素联系在一起</td> + </tr> + <tr> + <td>{{anch('htmlattrdefformaction', 'formaction')}}</td> + <td>image, submit</td> + <td>用于提交表单的URL</td> + </tr> + <tr> + <td>{{anch('htmlattrdefformenctype', 'formenctype')}}</td> + <td>image, submit</td> + <td>表单数据集的编码方式，用于表单提交</td> + </tr> + <tr> + <td>{{anch('htmlattrdefformmethod', 'formmethod')}}</td> + <td>image, submit</td> + <td>用于表单提交的HTTP方法 </td> + </tr> + <tr> + <td>{{anch('htmlattrdefformnovalidate', 'formnovalidate')}}</td> + <td>image, submit</td> + <td>提交表单时绕过对表单控件的验证</td> + </tr> + <tr> + <td>{{anch('htmlattrdefformtarget', 'formtarget')}}</td> + <td>image, submit</td> + <td>表单提交的浏览上下文</td> + </tr> + <tr> + <td>{{anch('htmlattrdefheight', 'height')}}</td> + <td>image</td> + <td> + <p>和 {{htmlelement('img')}} 的 <code>height</code> 属性相同；垂直方向</p> + </td> + </tr> + <tr> + <td>{{anch('htmlattrdeflist', 'list')}}</td> + <td>绝大部分</td> + <td>自动填充选项的{{htmlelement('datalist')}} 的id值</td> + </tr> + <tr> + <td>{{anch('htmlattrdefmax', 'max')}}</td> + <td>数字 type</td> + <td>最大值</td> + </tr> + <tr> + <td>{{anch('htmlattrdefmaxlength', 'maxlength')}}</td> + <td>password, search, tel, text, url</td> + <td><code>value</code> 的最大长度（最多字符数目）</td> + </tr> + <tr> + <td>{{anch('htmlattrdefmin', 'min')}}</td> + <td>数字 type</td> + <td>最小值</td> + </tr> + <tr> + <td>{{anch('htmlattrdefminlength', 'minlength')}}</td> + <td>password, search, tel, text, url</td> + <td><code>value</code> 的最小长度（最少字符数目）</td> + </tr> + <tr> + <td>{{anch('htmlattrdefmultiple', 'multiple')}}</td> + <td>email, file</td> + <td>布尔值。 是否允许多个值</td> + </tr> + <tr> + <td>{{anch('htmlattrdefname', 'name')}}</td> + <td>所有</td> + <td>input表单控件的名字。以名字/值对的形式随表单一起提交</td> + </tr> + <tr> + <td>{{anch('htmlattrdefpattern', 'pattern')}}</td> + <td>password, text, tel</td> + <td>匹配有效 <code>value</code> 的模式（pattern）</td> + </tr> + <tr> + <td>{{anch('htmlattrdefplaceholder', 'placeholder')}}</td> + <td>password, search, tel, text, url</td> + <td>当表单控件为空时，控件中显示的内容</td> + </tr> + <tr> + <td><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/HTML/Attributes/readonly">readonly</a></td> + <td>绝大部分</td> + <td>布尔值。存在时表示控件的值不可编辑</td> + </tr> + <tr> + <td><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/HTML/Attributes/required">required</a></td> + <td>绝大部分</td> + <td>布尔值。表示此值为必填项或者提交表单前必须先检查该值</td> + </tr> + <tr> + <td>{{anch('htmlattrdefsize', 'size')}}</td> + <td>email, password, tel, text</td> + <td>控件的大小</td> + </tr> + <tr> + <td>{{anch('htmlattrdefsrc', 'src')}}</td> + <td>image</td> + <td>和{{htmlelement('img')}} 的 <code>src</code> 属性一样；图像资源的地址</td> + </tr> + <tr> + <td>{{anch('htmlattrdefstep', 'step')}}</td> + <td>数字type</td> + <td>有效的递增值</td> + </tr> + <tr> + <td>{{anch('htmlattrdeftype', 'type')}}</td> + <td>所有</td> + <td>input表单控件的type</td> + </tr> + <tr> + <td>{{anch('htmlattrdefvalue', 'value')}}</td> + <td>所有</td> + <td>表单控件的值。以名字/值对的形式随表单一起提交</td> + </tr> + <tr> + <td>{{anch('htmlattrdefwidth', 'width')}}</td> + <td>image</td> + <td>与 {{htmlelement('img')}} 的 <code>width</code> 属性一样</td> + </tr> + </tbody> + </table> + </caption> +</table> + +<p>一些额外的非标准属性会在标准属性后面列出。</p> + +<h3 id="属性各论">属性各论</h3> + +<dl> + <dt>{{ htmlattrdef("accept") }}</dt> + <dd>如果该元素的 <strong>type</strong> 属性的值<code>是file</code>,则该属性表明了服务器端可接受的文件类型；否则它将被忽略。该属性的值必须为一个逗号分割的列表,包含了多个唯一的内容类型声明： + <ul> + <li>以 STOP 字符 (U+002E) 开始的文件扩展名。（例如：".jpg,.png,.doc"）</li> + <li>一个有效的 MIME 类型，但没有扩展名</li> + <li><code>audio/*</code> 表示音频文件 {{ HTMLVersionInline(5) }}</li> + <li><code>video/*</code> 表示视频文件 {{ HTMLVersionInline(5) }}</li> + <li><code>image/*</code> 表示图片文件 {{ HTMLVersionInline(5) }}</li> + </ul> + </dd> + <dt>{{ htmlattrdef("accesskey") }} {{ HTMLVersionInline(4) }} only, {{ obsoleteGeneric("inline", "HTML5") }}</dt> + <dd>用户按下后可以获得此控件焦点的单个字符。这是 HTML5 全局属性。</dd> + <dt>{{ htmlattrdef("autocomplete") }} {{ HTMLVersionInline(5) }}</dt> + <dd>这个属性表示这个控件的值是否可被浏览器自动填充。如果<strong>type</strong>属性的值是hidden、checkbox、radio、file，或为按钮类型（button、submit、reset、image），则本属性被忽略。可用的值是: + <ul> + <li><code>off</code>: 用户必须手动填值，或者该页面提供了自己的自动补全方法。浏览器不对此字段自动填充。</li> + <li><code>on</code>: 浏览器可以根据用户先前的填表情况对此字段自动填值。</li> + <li><code>name</code>: 完整的姓名</li> + <li><code>honorific-prefix: </code>Prefix or title (e.g. "Mr.", "Ms.", "Dr.", "Mlle")</li> + <li><code>given-name </code>：名</li> + <li><code>additional-name</code></li> + <li><code>family-name</code>：姓</li> + <li><code>honorific-suffix</code>: Suffix (e.g. "Jr.", "B.Sc.", "MBASW", "II")</li> + <li><code>nickname</code></li> + <li><code>email</code></li> + <li><code>username</code></li> + <li><code>new-password</code>: 新密码（如创建帐号或更改密码时使用）</li> + <li><code>current-password</code></li> + <li><code>organization-title</code>: Job title (e.g. "Software Engineer", "Senior Vice President", "Deputy Managing Director")</li> + <li><code>organization</code></li> + <li><code>street-address</code></li> + <li><code>address-line1, <code>address-line2, <code>address-line3, <code>address-level4, <code>address-level3, <code>address-level2, <code>address-level1</code></code></code></code></code></code></code></li> + <li><code>country</code></li> + <li><code>country-name</code></li> + <li><code>postal-code</code></li> + <li><code>cc-name</code>: Full name as given on the payment instrument</li> + <li><code>cc-given-name</code></li> + <li><code>cc-additional-name</code></li> + <li><code>cc-family-name</code></li> + <li><code>cc-number</code>: Code identifying the payment instrument (e.g. the credit card number)</li> + <li><code>cc-exp:</code> Expiration date of the payment instrument</li> + <li><code>cc-exp-month</code></li> + <li><code>cc-exp-year</code></li> + <li><code>cc-csc</code>: Security code for the payment instrument </li> + <li><code>cc-type</code>: Type of payment instrument (e.g. Visa)</li> + <li><code>transaction-currency</code></li> + <li><code>transaction-amount</code></li> + <li><code>language</code>: Preferred language; Valid BCP 47 language tag</li> + <li><code>bday</code></li> + <li><code>bday-day</code></li> + <li><code>bday-month</code></li> + <li><code>bday-year</code></li> + <li><code>sex</code>: Gender identity (e.g. Female, Fa'afafine); Free-form text, no newlines</li> + <li><code>tel</code></li> + <li><code>url</code>: Home page or other Web page corresponding to the company, person, address, or contact information in the other fields associated with this field</li> + <li><code>photo</code>: Photograph, icon, or other image corresponding to the company, person, address, or contact information in the other fields associated with this field</li> + <li> + <p>参考 <a href="https://html.spec.whatwg.org/multipage/forms.html#autofill">WHATWG 标准</a> 获取更多详细内容。</p> + </li> + </ul> + + <p>如果<code><input></code>元素上没有<strong>autocomplete</strong>属性，浏览器可使用包含该input元素的表单（<code><form></code>）或通过input的<strong>form</strong>属性指定的表单的<strong>autocomplete</strong>属性值。更多信息请参见{{ HTMLElement("form") }}的<code>autocomplete</code>属性。</p> + + <p>与其他浏览器不同，<strong>autocomplete </strong>还控制着Firefox浏览器 对 <input> 持久化动态禁用状态和（如果适用）跨页面加载的动态检查。持久化特性默认是开启的。设置<strong>autocomplete</strong>的值为<strong>off </strong>可以关闭该特性<strong>。</strong>即使autocomplete属性通常不应用于<input>的type，它也可以工作。具体可以查看{{bug(654072)}}。</p> + </dd> + <dt>{{ htmlattrdef("autofocus") }} {{ HTMLVersionInline(5) }}</dt> + <dd>这个布尔属性允许您指定的表单控件在页面加载时具有焦点（自动获得焦点），除非用户将其覆盖，例如通过键入不同的控件。文档中只有一个表单元素可以具有autofocus属性，它是一个布尔值。 如果type属性设置为隐藏则不能应用（即您不能自动获得焦点的属性设置为隐藏的控件）。</dd> + <dt id="htmlattrdefcapture">{{htmlattrdef("capture")}}</dt> + <dd> + <p>Introduced in the HTML Media Capture specification and valid for the <code>file</code> input type only, the <code>capture</code> attribute defines which media—microphone, video, or camera—should be used to capture a new file for upload with <code>file</code> upload control in supporting scenarios. See the {{HTMLElement("input/file", "file")}} input type.</p> + </dd> + <dt>{{ htmlattrdef("checked") }}</dt> + <dd>如果该元素的<strong>type</strong>属性的值为<span style="font-family: courier new;">radio或者</span><span style="font-family: courier new;">checkbox</span>,则该布尔属性的存在与否表明了该控件是否是默认选择状态。 + <p>If present on a <code>checkbox</code> type, it indicates that the checkbox is checked by default (when the page loads). It does <em>not</em> indicate whether this checkbox is currently checked: if the checkbox’s state is changed, this content attribute does not reflect the change. (Only the <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement"><code>HTMLInputElement</code>’s <code>checked</code> IDL attribute</a> is updated.)</p> + + <div class="note"> + <p><strong>Note:</strong> Unlike other input controls, a checkboxes and radio buttons value are only included in the submitted data if they are currently <code>checked</code>. If they are, the name and the value(s) of the checked controls are submitted.</p> + + <p>For example, if a checkbox whose <code>name</code> is <code>fruit</code> has a <code>value</code> of <code>cherry</code>, and the checkbox is checked, the form data submitted will include <code>fruit=cherry</code>. If the checkbox isn't active, it isn't listed in the form data at all. The default <code>value</code> for checkboxes and radio buttons is <code>on</code>.</p> + </div> + </dd> + <dt id="htmlattrdefdirname">{{htmlattrdef("dirname")}}</dt> + <dd> + <p>Valid for <code>text</code> and <code>search</code> input types only, the <code>dirname</code> attribute enables the submission of the directionality of the element. When included, the form control will submit with two name/value pairs: the first being the {{anch('name')}} and {{anch('value')}}, the second being the value of the <code>dirname</code> as the name with the value of <code>ltr</code> or <code>rtl</code> being set by the browser.</p> + + <pre><code><form action="page.html" method="post"> + <label>Fruit: <input type="text" name="fruit" dirname="fruit.dir" value="cherry"></label> + <input type="submit"/> +</form> +<!-- page.html?fruit=cherry&fruit.dir=ltr --></code> +</pre> + + <p>When the form above is submitted, the input cause both the <code>name</code> / <code>value</code> pair of <code>fruit=cherry</code> and the <code>dirname</code> / direction pair of <code>fruit.dir=ltr</code> to be sent.</p> + </dd> + <dt>{{ htmlattrdef("disabled") }}</dt> + <dd>这个布尔属性表示此表单控件不可用。 特别是在禁用的控件中， <code>click</code> 事件 <a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/association-of-controls-and-forms.html#enabling-and-disabling-form-controls" title="http://www.whatwg.org/specs/web-apps/current-work/multipage/association-of-controls-and-forms.html#enabling-and-disabling-form-controls">将不会被分发</a> 。 并且，禁用的控件的值在提交表单时也不会被提交。如果 <strong>type</strong> 属性为 <span style="font-family: courier new;">hidden</span>，此属性将被忽略。</dd> +</dl> + +<div class="note"><strong>Note:</strong> Although not required by the specification, Firefox will by default <a href="https://stackoverflow.com/questions/5985839/bug-with-firefox-disabled-attribute-of-input-not-resetting-when-refreshing">persist the dynamic disabled state</a> of an <code><input></code> across page loads. Use the {{htmlattrxref("autocomplete","input")}} attribute to control this feature.</div> + +<dl> + <dt></dt> + <dt>{{ htmlattrdef("form") }} {{ HTMLVersionInline(5) }}</dt> + <dd> + <p>A string specifying the {{HTMLElement("form")}} element with which the input is associated (that is, its <strong>form owner</strong>). This string's value, if present, must match the {{htmlattrxref("id")}} of a <code><form></code> element in the same document. If this attribute isn't specified, the <code><input></code> element is associated with the nearest containing form, if any.</p> + + <p>The <code>form</code> attribute lets you place an input anywhere in the document but have it included with a form elsewhere in the document.</p> + + <p>Note: An input can only be associated with one form.</p> + </dd> + <dt id="htmlattrdefformaction">{{htmlattrdef('formaction')}}</dt> + <dd> + <p>Valid for the <code>image</code> and <code>submit</code> input types only. See the {{HTMLElement("input/submit", "submit")}} input type for more information.</p> + </dd> + <dt id="htmlattrdefformenctype">{{htmlattrdef('formenctype')}}</dt> + <dd> + <p>Valid for the <code>image</code> and <code>submit</code> input types only. See the {{HTMLElement("input/submit", "submit")}} input type for more information.</p> + </dd> + <dt id="htmlattrdefformmethod">{{htmlattrdef('formmethod')}}</dt> + <dd> + <p>Valid for the <code>image</code> and <code>submit</code> input types only. See the {{HTMLElement("input/submit", "submit")}} input type for more information.</p> + </dd> + <dt id="htmlattrdefformnovalidate">{{htmlattrdef('formnovalidate')}}</dt> + <dd> + <p>Valid for the <code>image</code> and <code>submit</code> input types only. See the {{HTMLElement("input/submit", "submit")}} input type for more information.</p> + </dd> + <dt id="htmlattrdefformtarget">{{htmlattrdef('formtarget')}}</dt> + <dd> + <p>Valid for the <code>image</code> and <code>submit</code> input types only. See the {{HTMLElement("input/submit", "submit")}} input type for more information.</p> + </dd> + <dt>{{ htmlattrdef("height") }} {{ HTMLVersionInline(5) }}</dt> + <dd>如果<strong>type</strong>属性的值是<span style="font-family: courier new;">image，这个属性定义了按钮图片的高度。</span></dd> + <dt id="htmlattrdefheight">{{htmlattrdef("id")}}</dt> + <dd> + <p>Global attribute valid for all elements, including all the input types, it defines a unique identifier (ID) which must be unique in the whole document. Its purpose is to identify the element when linking. The value is used as the value of the {{htmlelement('label')}}'s <code>for</code> attribute to link the label with the form control. See the {{anch('the label element')}} below.</p> + </dd> + <dt id="htmlattrdefheight">{{htmlattrdef("inputmode")}}</dt> + <dd> + <p>Global value valid for all elements, it provides a hint to browsers as to the type of virtual keyboard configuration to use when editing this element or its contents. Values include none<br> + <code>text</code>, <code>tel</code>, <code>url</code>, <code>email</code>, <code>numeric</code>, <code>decimal</code>, and <code>search</code>.</p> + </dd> + <dt id="htmlattrdeflist">{{htmlattrdef("list")}}</dt> +</dl> + +<p>The values of the list attribute is the {{domxref("Element.id", "id")}} of a {{HTMLElement("datalist")}} element located in the same document. The <code><datalist></code> provides a list of predefined values to suggest to the user for this input. Any values in the list that are not compatible with the {{htmlattrxref("type", "input")}} are not included in the suggested options. The values provided are suggestions, not requirements: users can select from this predefined list or provide a different value.</p> + +<pre><datalist id="colorsxx"> + <option>#ff0000</option> + <option>#ee0000</option> + <option>#dd0000</option> + <option>#cc0000</option> + <option>#bb0000</option> +</datalist> +<datalist id="numbersxx"> + <option>0</option> + <option>2</option> + <option>4</option> + <option>8</option> + <option>16</option> + <option>32</option> + <option>64</option> +</datalist> +<datalist id="fruitsxx"> + <option>cherry</option> + <option>banana</option> + <option>mango</option> + <option>orange</option> + <option>blueberry</option> +</datalist> +<datalist id="urlsxx"> + <option>https://developer.mozilla.org</option> + <option>https://caniuse.com/</option> + <option>https://mozilla.com</option> + <option>https://mdn.github.io</option> + <option>https://www.youtube.com/user/firefoxchannel</option> +</datalist> + +<p><label for="textx">Text</label> <input type="text" list="fruitsxx" id="textx"/></p> +<p><label for="colorx">Color</label> <input type="color" list="colorsxx" id="colorx"/></p> +<p><label for="rangex">Range</label> <input type="range" min="0" max="64" list="numbersxx" id="rangex"/></p> +<p><label for="numberx">Number</label> <input type="number" min="0" max="64" list="numbersxx" id="numberx"/></p> +<p><label for="urlx">URL</label> <input type="url" list="urlsxx" id="urlx"/></p></pre> + +<p>{{EmbedLiveSample("datalist",400,275,"","", "nobutton")}}</p> + +<p>It is valid on <code>text</code>, <code>search</code>, <code>url</code>, <code>tel</code>, <code>email</code>, <code>date</code>, <code>month</code>, <code>week</code>, <code>time</code>, <code>datetime-local</code>, <code>number</code>, <code>range</code>, and <code>color</code>. </p> + +<p>Per the specifications, the <code>list</code> attribute is not supported by the <code>hidden</code>, <code>password</code>, <code>checkbox</code>, <code>radio</code>, <code>file</code>, or any of the button types.</p> + +<p>Depending on the browser, the user may see a custom color palette suggested, tic marks along a range, or even a input that opens like a select but allows for non-listed values. Check out the <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/HTML/Element/datalist#Browser_compatibility">browser compatibility table</a> for the other input types.</p> + +<p>See the {{htmlelement('datalist')}} element.</p> + +<dl> + <dt>{{ htmlattrdef("max") }} {{ HTMLVersionInline(5) }} </dt> + <dd>此项目的最大（数字或日期时间）值，且不得小于其最小值（<strong>min</strong>属性）值。</dd> + <dt>{{ htmlattrdef("maxlength") }} {{ HTMLVersionInline(5) }}</dt> + <dd>如果 <strong>type</strong> 的值是 <span style="font-family: courier new;">text</span>, <span style="font-family: courier new;">email</span>, <span style="font-family: courier new;">search</span>, <span style="font-family: courier new;">password</span>, <span style="font-family: courier new;">tel</span>, 或 <span style="font-family: courier new;">url，那么这个属性指明了用户最多可以输入的字符个数（按照Unicode编码方式计数）；对于其他类型的输入框，该属性被忽略。它可以大于 </span><strong>size</strong> 属性的值。如果不指定这个属性，那么用户可以输入任意多的字符。如果指定为一个负值，那么元素表现出默认行为，即用户可以输入任意多的字符。本属性的约束规则，仅在元素的 value 属性发生变化时才会执行。译者注:ie10+</dd> + <dt>{{ htmlattrdef("min") }} {{ HTMLVersionInline(5) }} </dt> + <dd>此项目的最小（数字或日期时间）值，且不得大于其最大值（最大属性）值。</dd> + <dt id="htmlattrdefminlength">{{htmlattrdef("minlength")}}</dt> + <dd> + <p>Valid for <code>text</code>, <code>search</code>, <code>url</code>, <code>tel</code>, <code>email</code>, and <code>password</code>, it defines the minimum number of characters (as UTF-16 code units) the user can enter into the entry field. This must be an non-negative integer value smaller than or equal to the value specified by <code>maxlength</code>. If no <code>minlength</code> is specified, or an invalid value is specified, the input has no minimum length.</p> + + <p>The input will fail <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation">constraint validation</a> if the length of the text entered into the field is fewer than <code>minlength</code> UTF-16 code units long, preventing form submission. See {{anch("Client-side validation")}} for more information.</p> + </dd> + <dt>{{ htmlattrdef("multiple") }}{{ HTMLVersionInline(5) }}</dt> + <dd>This Boolean attribute indicates whether the user can enter more than one value.这个属性指示用户能否输入多个值。这个属性仅在<strong>type</strong>属性为email或file的时候生效 ; 否则被忽视.</dd> + <dt>{{ htmlattrdef("name") }}</dt> + <dd>控件的名称，与表单数据一起提交。</dd> + <dt>{{ htmlattrdef("pattern") }}{{ HTMLVersionInline(5) }}</dt> + <dd>检查控件值的正则表达式.。pattern必须匹配整个值，而不仅仅是某些子集.。使用title属性来描述帮助用户的模式.。当类型属性的值为<span style="font-family: courier new;">text</span>, <span style="font-family: courier new;">search</span>, <span style="font-family: courier new;">tel</span>, <span style="font-family: courier new;">url</span> 或 <span style="font-family: courier new;">email</span>时，此属性适用，否则将被忽略。译者注:ie10+</dd> + <dt>{{ htmlattrdef("placeholder") }} {{ HTMLVersionInline(5) }}</dt> + <dd>提示用户输入框的作用。用于提示的占位符文本不能包含回车或换行。仅适用于当<strong>type</strong> 属性为<span style="font-family: courier new;">text</span>, <span style="font-family: courier new;">search</span>, <span style="font-family: courier new;">tel</span>, <span style="font-family: courier new;">url</span> or <span style="font-family: courier new;">email时</span>; 否则会被忽略。 + <div class="note"><strong>Note:</strong> 请不要用<code>placeholder</code> 属性替换 {{ HTMLElement("label") }} 元素。他们的作用不同: {{ HTMLElement("label") }} 属性描述表单元素的角色; 也就是说，它展示预期的信息，而<code>placeholder</code> 属性是提示用户内容的输入格式。某些情况下 <code>placeholder</code> 属性对用户不可见, 所以当没有它时也需要保证form能被理解。</div> + </dd> + <dt>{{ htmlattrdef("readonly") }}</dt> + <dd>这个布尔属性用于指明用户无法修改控件的值。 + <p>{{ HTMLVersionInline(5) }} 如果控件的 <strong>type</strong> 属性为<span style="font-family: courier new;">hidden</span>, <span style="font-family: courier new;">range</span>, <span style="font-family: courier new;">color</span>, <span style="font-family: courier new;">checkbox</span>, <span style="font-family: courier new;">radio</span>, <span style="font-family: courier new;">file 或 </span>type时，此属性会被忽略。</p> + </dd> + <dt>{{ htmlattrdef("required") }} {{ HTMLVersionInline(5) }}</dt> + <dd>这个属性指定用户在提交表单之前必须为该元素填充值. 当type属性是hidden,image或者按钮类型(submit,reset,button)时不可使用. {{ cssxref(":optional") }} 和 {{ cssxref(":required") }} CSS 伪元素的样式将可以被该字段应用作外观.</dd> + <dt>{{ htmlattrdef("selectionDirection") }} {{ HTMLVersionInline(5) }}</dt> + <dd>The direction in which selection occurred. This is "forward" if the selection was made from left-to-right in an LTR locale or right-to-left in an RTL locale, or "backward" if the selection was made in the opposite direction. This can be "none" if the selection direction is unknown.</dd> + <dt>{{ htmlattrdef("size") }}</dt> + <dd>控件的初始大小。以像素为单位。但当<strong>type</strong> 属性为<span style="font-family: courier new;">text</span> 或 <span style="font-family: courier new;">password时</span>, 它表示输入的字符的长度。从HTML5开始, 此属性仅适用于当 <strong>type</strong> 属性为 <span style="font-family: courier new;">text</span>, <span style="font-family: courier new;">search</span>, <span style="font-family: courier new;">tel</span>, <span style="font-family: courier new;">url</span>, <span style="font-family: courier new;">email</span>,或 <span style="font-family: courier new;">password；</span>否则会被忽略。 此外，它的值必须大于0。 如果未指定大小，则使用默认值20。 HTML5 概述 "用户代理应该确保至少大部分字符是可见的", 但是不同的字符的用不同的字体表示可能会导致宽度不同。在某些浏览器中，一串带有x的字符即使定义了到x的大小也将显示不完整。 。</dd> + <dt>{{ htmlattrdef("spellcheck") }} {{ HTMLVersionInline(5) }}</dt> + <dd>将此属性的值设置为<code>true</code>表示元素需要检查其拼写和语法。值<code>default</code> 表示该元素将根据默认行为进行操作，可能基于父元素自己的<code>spellcheck</code>值。值<code>false</code>表示不应该检查元素</dd> + <dt>{{ htmlattrdef("src") }}</dt> + <dd>如果<strong>type</strong>属性的值是<span style="font-family: courier new;">image</span>, 这个属性指定了按钮图片的路径; 否则它被忽视.</dd> + <dt>{{ htmlattrdef("step") }} {{ HTMLVersionInline(5) }}</dt> + <dd>使用<strong>min</strong>和<strong>max</strong> 属性来限制可以设置数字或日期时间值的增量。它可以是任意字符串或是正浮点数。如果此属性未设置为任何，则控件仅接受大于最小步长值的倍数的值。</dd> + <dt>{{ htmlattrdef("tabindex") }} element-specific in {{ HTMLVersionInline(4) }}, global in {{ HTMLVersionInline(5) }}</dt> + <dd>元素在当前文档的Tab导航顺序中的位置。</dd> + <dt id="htmlattrdefformenctype">{{htmlattrdef('title')}}</dt> + <dd> + <p>Global attribute valid for all elements, including all input types, containing a text representing advisory information related to the element it belongs to. Such information can typically, but not necessarily, be presented to the user as a tooltip. The title should NOT be used as the primary explanation of the purpose of the form control. Instead, use the {{htmlelement('label')}} element with a <code>for</code> attribute set to the form control's {{htmlattrdef('id')}} attribute. See {{anch("Labels")}} below.</p> + </dd> + <dt>{{ htmlattrdef("type") }}</dt> + <dd>要呈现的控件类型。有关各个类型的信息，请参阅 {{anch("Form <input> types")}}，其中包含指向每个类型的更多信息的链接。</dd> + <dt>{{ htmlattrdef("usemap") }} {{ HTMLVersionInline(4) }} only, {{ obsoleteGeneric("inline", "HTML5") }}</dt> + <dd>作为图像映射的{{ HTMLElement("map") }}元素的名称.</dd> + <dt>{{ htmlattrdef("value") }}</dt> + <dd>控件的初始值. 此属性是可选的，除非<strong>type</strong> 属性是<code>radio</code>或<code>checkbox</code><span style="font-family: courier new;">。</span>注意，当重新加载页面时，如果在重新加载之前更改了值，<a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=46845#c186" title="https://bugzilla.mozilla.org/show_bug.cgi?id=46845#c186">Gecko和IE将忽略HTML源代码中指定的值</a>。</dd> + <dt>{{ htmlattrdef("width") }} {{ HTMLVersionInline(5) }}</dt> + <dd>如果<strong>type</strong>属性的值是<span style="font-family: courier new;">image，这个属性定义了按钮图片的宽度。</span></dd> + <dt> + <h3 id="非标准_<input>_属性">非标准 <code><input></code> 属性</h3> + </dt> + <dt>{{htmlattrdef("autocorrect")}} {{non-standard_inline}}</dt> + <dd>This is a non-standard attribute supported by Safari that is used to control whether autocorrection should be enabled when the user is entering/editing the text value of the <code><input></code>. Possible attribute values are: + <ul> + <li><code>on</code>: Enable autocorrection.</li> + <li><code>off</code>: Disable autocorrection.</li> + </ul> + <a href="https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariHTMLRef/Articles/Attributes.html#//apple_ref/doc/uid/TP40008058-autocorrect"><code>autocorrect</code> documentation</a> in the Safari HTML Reference.</dd> + <dt>{{ htmlattrdef("mozactionhint") }} {{ non-standard_inline() }}</dt> + <dd>Specifies an "action hint" used to determine how to label the enter key on mobile devices with virtual keyboards. Supported values are <code>go</code>, <code>done</code>, <code>next</code>, <code>search</code>, and <code>send</code>; these automatically get mapped to the appropriate string (and are case-insensitive).</dd> + <dt>{{htmlattrdef("autocapitalize")}} {{non-standard_inline}}</dt> + <dd>This is a nonstandard attribute used by iOS Safari Mobile which controls whether and how the text value should be automatically capitalized as it is entered/edited by the user. The non-deprecated values are available in iOS 5 and later. Possible values are: + <ul> + <li><code>none</code>: Completely disables automatic capitalization</li> + <li><code>sentences</code>: Automatically capitalize the first letter of sentences.</li> + <li><code>words</code>: Automatically capitalize the first letter of words.</li> + <li><code>characters</code>: Automatically capitalize all characters.</li> + <li><code>on</code>: {{deprecated_inline()}} Deprecated since iOS 5.</li> + <li><code>off</code>: {{deprecated_inline()}} Deprecated since iOS 5.</li> + </ul> + <a href="https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariHTMLRef/Articles/Attributes.html#//apple_ref/doc/uid/TP40008058-autocapitalize"><code>autocapitalize</code> documentation in the Safari HTML Reference</a></dd> + <dt>{{htmlattrdef("incremental")}} {{non-standard_inline}}</dt> + <dd>This is a nonstandard attribute supported by WebKit (Safari) and Blink (Chrome) that only applies when the <strong>type</strong> is <code>search</code>. If the attribute is present, regardless of what its value is, the <code><input></code> fires <a href="https://developer.mozilla.org/en-US/docs/Web/Events/search"><code>search</code></a> events as the user edits the text value. The event is only fired after an implementation-defined timeout has elapsed since the most recent keystroke, and new keystrokes reset the timeout. In other words, the event firing is debounced. If the attribute is absent, the <a href="https://developer.mozilla.org/en-US/docs/Web/Events/search"><code>search</code></a> event is only fired when the user explicitly initiates a search (e.g. by pressing the Enter key while within field). <a href="https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariHTMLRef/Articles/Attributes.html#//apple_ref/doc/uid/TP40008058-incremental"><code>incremental</code> documentation in the Safari HTML Reference</a></dd> + <dt>{{htmlattrdef("mozactionhint")}} {{non-standard_inline}}</dt> + <dd>Specifies an "action hint" used to determine how to label the enter key on mobile devices with virtual keyboards. Supported values are <code>go</code>, <code>done</code>, <code>next</code>, <code>search</code>, and <code>send</code>. These automatically get mapped to the appropriate string and are case-insensitive.</dd> + <dt>{{htmlattrdef("results")}} {{non-standard_inline}}</dt> + <dd>This is a nonstandard attribute supported by Safari that only applies when the <strong>type</strong> is <code>search</code>. It is used to control the maximum number of entries that should be displayed in the <code><input></code>'s native dropdown list of past search queries. Its value should be a nonnegative decimal integer.</dd> + <dt>{{htmlattrdef("webkitdirectory")}} {{non-standard_inline}}</dt> + <dd>This Boolean attribute indicates if the selector used when the <strong>type</strong> attribute is <code>file</code>has to allow for the selection of directories only.</dd> + <dt>{{htmlattrdef("x-moz-errormessage")}} {{non-standard_inline}}</dt> + <dd>This Mozilla extension allows you to specify the error message to display when a field doesn't successfully validate.</dd> +</dl> + +<h2 id="Methods">Methods</h2> + +<p>The following methods are provided by the <a href="/en-US/docs/Web/API/HTMLInputElement"><code>HTMLInputElement</code></a> interface which represents <code><input></code> elements in the DOM. Also available are those methods specified by the parent interfaces, <a href="/en-US/docs/Web/API/HTMLElement"><code>HTMLElement</code></a>, <a href="/en-US/docs/Web/API/Element"><code>Element</code></a>, <a href="/en-US/docs/Web/API/Node"><code>Node</code></a>, and <a href="/en-US/docs/Web/API/EventTarget"><code>EventTarget</code></a>.</p> + +<dl> + <dt><a class="new" href="/en-US/docs/Web/API/HTMLInputElement/checkValidity" rel="nofollow"><code>checkValidity()</code></a></dt> + <dd>Immediately runs the validity check on the element, triggering the document to fire the <a href="/en-US/docs/Web/API/HTMLInputElement/invalid_event"><code>invalid</code></a> event at the element if the value isn't valid.</dd> + <dt><a href="/en-US/docs/Web/API/HTMLFormElement/reportValidity"><code>reportValidity()</code></a></dt> + <dd>Returns <code>true</code> if the element's value passes validity checks; otherwise, returns <code>false</code>.</dd> + <dt><a href="/en-US/docs/Web/API/HTMLInputElement/select"><code>select()</code></a></dt> + <dd>Selects the entire content of the <code><input></code> element, if the element's content is selectable. For elements with no selectable text content (such as a visual color picker or calendar date input), this method does nothing.</dd> + <dt><a class="new" href="/en-US/docs/Web/API/HTMLInputElement/setCustomValidity" rel="nofollow"><code>setCustomValidity()</code></a></dt> + <dd>Sets a custom message to display if the input element's value isn't valid.</dd> + <dt><a href="/en-US/docs/Web/API/HTMLInputElement/setRangeText"><code>setRangeText()</code></a></dt> + <dd>Sets the contents of the specified range of characters in the input element to a given string. A <code>selectMode</code> parameter is available to allow controlling how the existing content is affected.</dd> + <dt><a href="/en-US/docs/Web/API/HTMLInputElement/setSelectionRange"><code>setSelectionRange()</code></a></dt> + <dd>Selects the specified range of characters within a textual input element. Does nothing for inputs which aren't presented as text input fields.</dd> + <dt><a href="/en-US/docs/Web/API/HTMLInputElement/stepDown"><code>stepDown()</code></a></dt> + <dd>Decrements the value of a numeric input by one, by default, or by the specified number of units.</dd> + <dt><a href="/en-US/docs/Web/API/HTMLInputElement/stepUp"><code>stepUp()</code></a></dt> + <dd>Increments the value of a numeric input by one or by the specified number of units.</dd> +</dl> + +<h2 id="CSS">CSS</h2> + +<p>Inputs, being replaced elements, have a few features not applicable to non form elements. There are CSS selectors that can specification target form controls based on their UI features, also known as UI pseudo-classes. The input element can also be targeted by type with attribute selectors. There are some properties that are especially useful as well.</p> + +<h3 id="UI_pseudo-classes">UI pseudo-classes</h3> + +<table class="standard-table"> + <caption>Captions super relevant to the <a href="/en-US/docs/Web/HTML/Element/input" title="The HTML <input> element is used to create interactive controls for web-based forms in order to accept data from the user; a wide variety of types of input data and control widgets are available, depending on the device and user agent. "><code><input></code></a> element:</caption> + <thead> + <tr> + <th>Pseudo-class</th> + <th>Description</th> + </tr> + </thead> + <tbody> + <tr> + <td><a href="/en-US/docs/Web/CSS/:enabled" title="The :enabled CSS pseudo-class represents any enabled element. An element is enabled if it can be activated (selected, clicked on, typed into, etc.) or accept focus. The element also has a disabled state, in which it can't be activated or accept focus."><code>:enabled</code></a></td> + <td>Any currently enabled element that can be activated (selected, clicked on, typed into, etc.) or accept focus and also has a disabled state, in which it can't be activated or accept focus.</td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/CSS/:disabled" title="The :disabled CSS pseudo-class represents any disabled element. An element is disabled if it can't be activated (selected, clicked on, typed into, etc.) or accept focus. The element also has an enabled state, in which it can be activated or accept focus."><code>:disabled</code></a></td> + <td>Any currently disabled element that has an enabled state, meaing it otherwise could be activated (selected, clicked on, typed into, etc.) or accept focus were it not disabled.</td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/CSS/:read-only" title="The :read-only CSS pseudo-class represents an element (such as input or textarea) that is not editable by the user."><code>:read-only</code></a></td> + <td>Element not editable by the user</td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/CSS/:read-write" title="The :read-write CSS pseudo-class represents an element (such as input or textarea) that is editable by the user."><code>:read-write</code></a></td> + <td>Element that is editable by the user.</td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/CSS/:placeholder-shown" title="The :placeholder-shown CSS pseudo-class represents any <input> or <textarea> element that is currently displaying placeholder text."><code>:placeholder-shown</code></a></td> + <td>Element that is currently displaying <a class="external" href="https://wiki.developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-placeholder" rel="noopener">placeholder text</a>, including input elements with the <a href="#htmlattrdefplaceholder">placeholder</a> attribute present that has, as of yet, no value.</td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/CSS/:default" title="The :default CSS pseudo-class selects form elements that are the default in a group of related elements."><code>:default</code></a></td> + <td>Form elements that are the default in a group of related elements. Matches <a href="/en-US/docs/Web/HTML/Element/input/checkbox" title="<input> elements of type checkbox are rendered by default as boxes that are checked (ticked) when activated, like you might see in an official government paper form. The exact appearance depends upon the operating system configuration under which the browser is running. Generally this is a square but it may have rounded corners. A checkbox allows you to select single values for submission in a form (or not).">checkbox</a> and <a href="/en-US/docs/Web/HTML/Element/input/radio" title="<input> elements of type radio are generally used in radio groups—collections of radio buttons describing a set of related options.">radio</a> input types that were checked on page load or render.</td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/CSS/:checked" title='The :checked CSS pseudo-class selector represents any radio (&lt;input type="radio">), checkbox (&lt;input type="checkbox">), or option (&lt;option> in a &lt;select>) element that is checked or toggled to an on state.'><code>:checked</code></a></td> + <td>Matches <a href="/en-US/docs/Web/HTML/Element/input/checkbox" title="<input> elements of type checkbox are rendered by default as boxes that are checked (ticked) when activated, like you might see in an official government paper form. The exact appearance depends upon the operating system configuration under which the browser is running. Generally this is a square but it may have rounded corners. A checkbox allows you to select single values for submission in a form (or not).">checkbox</a> and <a href="/en-US/docs/Web/HTML/Element/input/radio" title="<input> elements of type radio are generally used in radio groups—collections of radio buttons describing a set of related options.">radio</a> input types that are currently checked (and the (<a href="/en-US/docs/Web/HTML/Element/option" title="The HTML <option> element is used to define an item contained in a <select>, an <optgroup>, or a <datalist> element. As such, <option> can represent menu items in popups and other lists of items in an HTML document."><code><option></code></a> in a <a href="/en-US/docs/Web/HTML/Element/select" title="The HTML <select> element represents a control that provides a menu of options"><code><select></code></a> that is currently selected).</td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/CSS/:indeterminate" title="The :indeterminate CSS pseudo-class represents any form element whose state is indeterminate."><code>:indeterminate</code></a></td> + <td><a href="/en-US/docs/Web/HTML/Element/input/checkbox" title="<input> elements of type checkbox are rendered by default as boxes that are checked (ticked) when activated, like you might see in an official government paper form. The exact appearance depends upon the operating system configuration under which the browser is running. Generally this is a square but it may have rounded corners. A checkbox allows you to select single values for submission in a form (or not).">checkbox</a> elements whose indeterminate property is set to true by JavaScript, <a href="/en-US/docs/Web/HTML/Element/input/radio" title="<input> elements of type radio are generally used in radio groups—collections of radio buttons describing a set of related options.">radio</a> elements, when all radio buttons with the same name value in the form are unchecked, and <a href="/en-US/docs/Web/HTML/Element/progress" title="The HTML <progress> element displays an indicator showing the completion progress of a task, typically displayed as a progress bar."><code><progress></code></a> elements in an indeterminate state</td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/CSS/:valid" title="The :valid CSS pseudo-class represents any <input> or other <form> element whose contents validate successfully. This allows to easily make valid fields adopt an appearance that helps the user confirm that their data is formatted properly."><code>:valid</code></a></td> + <td>Form controls that can have constraint validation applied and are currently valid.</td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/CSS/:invalid" title="The :invalid CSS pseudo-class represents any <input> or other <form> element whose contents fail to validate."><code>:invalid</code></a></td> + <td>Form controls that have constraint validation applied and are currently not valid. Matches a form control whose value doesn't match the constraints set on it by it's attributes, such as <a href="#htmlattrdefrequired">required</a>, <a href="#htmlattrdefpattern">pattern</a> , <a href="#htmlattrdefstep">step</a> and <a href="#htmlattrdefmax">max</a>.</td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/CSS/:in-range" title="The :in-range CSS pseudo-class represents an <input> element whose current value is within the range limits specified by the min and max attributes."><code>:in-range</code></a></td> + <td>A non-empty input whose current value is within the range limits specified by the <a href="#htmlattrdefmin">min</a> and <a href="#htmlattrdefmax">max</a> attributes and the <a href="#htmlattrdefstep">step</a> .</td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/CSS/:out-of-range" title="The :out-of-range CSS pseudo-class represents an <input> element whose current value is outside the range limits specified by the min and max attributes."><code>:out-of-range</code></a></td> + <td>A non-empty input whose current value is NOT within the range limits specified by the <a href="#htmlattrdefmin">min</a> and <a href="#htmlattrdefmax">max</a> attributes or does not adher to the <a href="#htmlattrdefstep">step</a> constraint.</td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/CSS/:placeholder-shown" title="The :placeholder-shown CSS pseudo-class represents any <input> or <textarea> element that is currently displaying placeholder text."><code>:placeholder-shown</code></a></td> + <td>An <a href="/en-US/docs/Web/HTML/Element/input" title="The HTML <input> element is used to create interactive controls for web-based forms in order to accept data from the user; a wide variety of types of input data and control widgets are available, depending on the device and user agent. "><code><input></code></a> or <a href="/en-US/docs/Web/HTML/Element/textarea" title="The HTML <textarea> element represents a multi-line plain-text editing control, useful when you want to allow users to enter a sizeable amount of free-form text, for example a comment on a review or feedback form."><code><textarea></code></a> element that is currently displaying placeholder text.</td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/CSS/:required" title="The :required CSS pseudo-class represents any <input>, <select>, or <textarea> element that has the required attribute set on it."><code>:required</code></a></td> + <td><a href="/en-US/docs/Web/HTML/Element/input" title="The HTML <input> element is used to create interactive controls for web-based forms in order to accept data from the user; a wide variety of types of input data and control widgets are available, depending on the device and user agent. "><code><input></code></a>, <a href="/en-US/docs/Web/HTML/Element/select" title="The HTML <select> element represents a control that provides a menu of options"><code><select></code></a>, or <a href="/en-US/docs/Web/HTML/Element/textarea" title="The HTML <textarea> element represents a multi-line plain-text editing control, useful when you want to allow users to enter a sizeable amount of free-form text, for example a comment on a review or feedback form."><code><textarea></code></a> element that has the <code><a href="/en-US/docs/Web/HTML/Element/input#attr-required">required</a></code> attribute set on it. Only matches elements that can be required. The attribute included on a non-requirable element will not make for a match.</td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/CSS/:optional" title="The :optional CSS pseudo-class represents any <input>, <select>, or <textarea> element that does not have the required attribute set on it."><code>:optional</code></a></td> + <td><a href="/en-US/docs/Web/HTML/Element/input" title="The HTML <input> element is used to create interactive controls for web-based forms in order to accept data from the user; a wide variety of types of input data and control widgets are available, depending on the device and user agent. "><code><input></code></a>, <a href="/en-US/docs/Web/HTML/Element/select" title="The HTML <select> element represents a control that provides a menu of options"><code><select></code></a>, or <a href="/en-US/docs/Web/HTML/Element/textarea" title="The HTML <textarea> element represents a multi-line plain-text editing control, useful when you want to allow users to enter a sizeable amount of free-form text, for example a comment on a review or feedback form."><code><textarea></code></a> element that does NOT have the <code><a href="/en-US/docs/Web/HTML/Element/input#attr-required">required</a></code> attribute set on it. Does not match elements that can't be required.</td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/CSS/:blank" title="The :blank CSS pseudo-class selects empty user input elements (eg. <input> or <textarea>)."><code>:blank</code></a></td> + <td><a href="/en-US/docs/Web/HTML/Element/input" title="The HTML <input> element is used to create interactive controls for web-based forms in order to accept data from the user; a wide variety of types of input data and control widgets are available, depending on the device and user agent. "><code><input></code></a> and <a href="/en-US/docs/Web/HTML/Element/textarea" title="The HTML <textarea> element represents a multi-line plain-text editing control, useful when you want to allow users to enter a sizeable amount of free-form text, for example a comment on a review or feedback form."><code><textarea></code></a> elements that currently have no value.</td> + </tr> + <tr> + <td><a class="new" href="/en-US/docs/Web/CSS/:user-invalid" rel="nofollow" title="The documentation about this has not yet been written; please consider contributing!"><code>:user-invalid</code></a></td> + <td>Similar to <code>:invalid</code>, but is activated on blur. Matches invalid input but only after the user interaction, such as by focusing on the control, leaving the control, or attempting to submit the form containing the invalid control.</td> + </tr> + </tbody> +</table> + +<div id="checkbox_label"> +<h4 id="Examples">Examples</h4> + +<p>We can style a checkbox label based on whether the checkbox is checked or not. In this example, we are styling the <a href="/en-US/docs/Web/CSS/color" title="The color CSS property sets the foreground color value of an element's text and text decorations, and sets the currentcolor value."><code>color</code></a> and <a href="/en-US/docs/Web/CSS/font-weight" title="The font-weight CSS property sets the weight (or boldness) of the font. The weights available depend on the font-family you are using."><code>font-weight</code></a> of the <a href="/en-US/docs/Web/HTML/Element/label" title="The HTML <label> element represents a caption for an item in a user interface."><code><label></code></a> that comes immediately after a checked input. We haven't applied any styles if the <code>input</code> is not checked.</p> + +<pre class="brush: html hidden"><input id="checkboxInput" type="checkbox"> +<label for="checkboxInput">Toggle the checkbox on and off</label> +</pre> + +<pre class="brush: css">input:checked + label { + color: red; + font-weight: bold; +} +</pre> +</div> + +<h3 id="Attribute_selectors">Attribute selectors</h3> + +<p>It is possible to target different types of form controls based on their <a href="#htmlattrdeftype">type</a> using <a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">attribute selectors</a>. CSS attribute selectors match elements based on either just the presence of a attribute or the value of a given attribute.</p> + +<pre class="brush: css">/* matches a password input */ +input[type="password"] {} + +/* matches a form control whose valid values are limited to a range of values*/ +input[min][max] {} + +/* matches a form control with with a pattern attribute */ + input[pattern] {}</pre> + +<h3 id="placeholder">::placeholder</h3> + +<p>By default, the appearance of placeholder text is a translucent or light gray. The <a href="/en-US/docs/Web/CSS/::placeholder" title="The ::placeholder CSS pseudo-element represents the placeholder text in an <input> or <textarea> element."><code>::placeholder</code></a> pseudo-element is the input's <a href="/en-US/docs/Web/HTML/Forms_in_HTML#The_placeholder_attribute">placeholder text</a>. It can be styled with a limited subset of CSS properties.</p> + +<pre class="brush: css no-line-numbers">::placeholder { + color: blue; +}</pre> + +<p>Only the subset of CSS properties that apply to the <a href="/en-US/docs/Web/CSS/::first-line" title="The ::first-line CSS pseudo-element applies styles to the first line of a block-level element."><code>::first-line</code></a> pseudo-element can be used in a rule using <code>::placeholder</code> in its selector.</p> + +<h3 id="appearance"><a href="/en-US/docs/Web/CSS/appearance" title="The -moz-appearance CSS property is used in Gecko (Firefox) to display an element using platform-native styling based on the operating system's theme."><code>appearance</code></a></h3> + +<p>The <a href="/en-US/docs/Web/CSS/appearance" title="The -moz-appearance CSS property is used in Gecko (Firefox) to display an element using platform-native styling based on the operating system's theme."><code>appearance</code></a> property enables the displaying of (almost) any element as a platform-native style based on the operating system's theme as well as the removal of any platform-native styling with the <code>none</code> value.</p> + +<p>You could make a <code><div></code> look like a radio button with <code>div {appearance: radio;} </code>or a radio look like a checkbox with <code>[type="checkbox] {appearance: checkbox;}</code>, but don't.</p> + +<p>Setting <code>appearance: none</code> removes platform native borders, but not functionality.</p> + +<h3 id="caret-color"><a href="/en-US/docs/Web/CSS/caret-color" title="The caret-color CSS property sets the color of the insertion caret, the visible marker where the next character typed will be inserted."><code>caret-color</code></a></h3> + +<p>A property specific to text entry-related elements is the CSS <a href="/en-US/docs/Web/CSS/caret-color" title="The caret-color CSS property sets the color of the insertion caret, the visible marker where the next character typed will be inserted."><code>caret-color</code></a> property, which lets you set the color used to draw the text input caret:</p> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><label for="textInput">Note the red caret:</label> +<input id="textInput" class="custom" size="32"> +</pre> + +<h4 id="CSS_2">CSS</h4> + +<pre class="brush: css">input.custom { + caret-color: red; + font: 16px "Helvetica", "Arial", "sans-serif" +} +</pre> + +<h4 id="Result">Result</h4> + +<h3 id="object-position_and_object-fit"><a href="/en-US/docs/Web/CSS/object-position" title="The object-position CSS property specifies the alignment of the selected replaced element's contents within the element's box."><code>object-position</code></a> and <a href="/en-US/docs/Web/CSS/object-fit" title="The object-fit CSS property sets how the content of a replaced element, such as an <img> or <video>, should be resized to fit its container."><code>object-fit</code></a></h3> + +<p>In certain cases (typically involving non-textual inputs and specialized interfaces), the <code><input></code> element is a <a href="/en-US/docs/Web/CSS/Replaced_element">replaced element</a>. When it is, the position and size of the element's size and positioning within its frame can be adjusted using the CSS <a href="/en-US/docs/Web/CSS/object-position" title="The object-position CSS property specifies the alignment of the selected replaced element's contents within the element's box."><code>object-position</code></a> and <a href="/en-US/docs/Web/CSS/object-fit" title="The object-fit CSS property sets how the content of a replaced element, such as an <img> or <video>, should be resized to fit its container."><code>object-fit</code></a> properties</p> + +<h3 id="Styling">Styling</h3> + +<p>For more information about adding color to elements in HTML, see:</p> + +<ul> + <li><a href="/en-US/docs/Web/HTML/Applying_color">Applying color to HTML elements using CSS</a>.</li> +</ul> + +<p>Also see:</p> + +<ul> + <li><a href="/en-US/docs/Learn/HTML/Forms/Styling_HTML_forms">Styling HTML forms,</a> <a href="/en-US/docs/Learn/HTML/Forms/Advanced_styling_for_HTML_forms">advanced styling for HTML forms</a>, and</li> + <li>the<a href="/en-US/docs/Learn/HTML/Forms/Property_compatibility_table_for_form_widgets"> compatibility table of CSS properties</a>.</li> +</ul> + +<h2 id="Additional_Features">Additional Features</h2> + +<h3 id="Labels">Labels</h3> + +<p>Labels are needed to associate assistive text with an <code><input></code>. The <a href="/en-US/docs/Web/HTML/Element/label" title="The HTML <label> element represents a caption for an item in a user interface."><code><label></code></a> element provides explanatory information about a form field that is <em>always</em> appropriate (aside from any layout concerns you have). It's never a bad idea to use a <code><label></code> to explain what should be entered into an <code><input></code> or <a href="/en-US/docs/Web/HTML/Element/textarea" title="The HTML <textarea> element represents a multi-line plain-text editing control, useful when you want to allow users to enter a sizeable amount of free-form text, for example a comment on a review or feedback form."><code><textarea></code></a>.</p> + +<h4 id="Associated_labels">Associated labels</h4> + +<p>The semantic pairing of <code><input></code> and <code><label></code> elements is useful for assistive technologies such as screen readers. By pairing them using the <code><label></code>'s <code><a href="/en-US/docs/Web/HTML/Element/label#attr-for">for</a></code> attribute, you bond the label to the input in a way that lets screen readers describe inputs to users more precisely.</p> + +<p>It does not suffice to have plain text adjacent to the <code><input></code> element,. Rather, usability and accessibility requires the inclusion of either implicit or explicit <a href="/en-US/docs/Web/HTML/Element/label" title="The HTML <label> element represents a caption for an item in a user interface."><code><label></code></a>:</p> + +<pre class="brush: html"><!-- inaccessible --> +<p>Enter your name: <input id="name" type="text" size="30"></p> + +<!-- implicit label --> +<p><label>Enter your name: <input id="name" type="text" size="30"></label></p> + +<!-- explicit label --> +<p><label for="name">Enter your name: </label><input id="name" type="text" size="30"></p></pre> + +<p>The first example is inaccessible: no relationship exists between the prompt and the <code><input></code> element.</p> + +<p>In addition to an accessible name, the label provides a larger 'hit' area for mouse and touch screen users to click on or touch. By pairing a <code><label></code> with an <code><input></code>, clicking on either one will focus the <code><input></code>. If you use plain text to "label" your input, this won't happen. Having the prompt part of the activation area for the input is helpful for people with motor control conditions.</p> + +<p>As web developers, it's important that we never assume that people will know all the things that we know. The diversity of people using the web—and by extension your web site—practically guarantees that some of your site's visitors will have some variation in thought processes and/or circumstances that leads them to interpret your forms very differently from you without clear and properly-presented labels.</p> + +<h4 id="Placeholders_are_not_accessible">Placeholders are not accessible</h4> + +<p>The <code><a href="/en-US/docs/Web/HTML/Element/input#attr-placeholder">placeholder</a></code> attribute lets you specify a text that appears within the <code><input></code> element's content area itself when empty. The placeholder should never be required in order to understand your forms. It is not a label, and should not be used as a substitute, because it isn't. The placeholder is used to show an example input, not an explanation or prompt. Not only is the placeholder not accessible to screen readers, but once the user enters any text into the form control, or if the form control already has a value, there is no placeholder. Browsers with automatic page translation features may skip over attributes when translating, meaning the <code>placeholder</code> may not get translated.</p> + +<div class="blockIndicator note"> +<p>Don't use the <code><a href="/en-US/docs/Web/HTML/Element/input#attr-placeholder">placeholder</a></code> attribute if you can avoid it. If you need to label an <code><input></code> element, use the <a href="/en-US/docs/Web/HTML/Element/label" title="The HTML <label> element represents a caption for an item in a user interface."><code><label></code></a> element</p> +</div> + +<h3 id="Client-side_validation">Client-side validation</h3> + +<p>In addition to using CSS to style inputs based on the <a href="/en-US/docs/Web/CSS/:valid" title="The :valid CSS pseudo-class represents any <input> or other <form> element whose contents validate successfully. This allows to easily make valid fields adopt an appearance that helps the user confirm that their data is formatted properly."><code>:valid</code></a> or <a href="/en-US/docs/Web/CSS/:invalid" title="The :invalid CSS pseudo-class represents any <input> or other <form> element whose contents fail to validate."><code>:invalid</code></a> UI states based on the current state of each input, as noted in the <a href="#UI_pseudo-classes">UI pseudo-classes</a> section above, the browser provides for client-side validation on (attempted) form submission. On form submission, if their is a form control that fails constraint validation, supporting browsers will display an error message on the first invalid form control; displaying a default message based on the error type, or a message set by you.</p> + +<p>Some input types and other attributes place limits on what values are valid for a given input. For example, <code><input type="number" min="2" max="10" step="2"></code> means only the number 2, 4, 6, 8, or 10 are valid. Several errors could occur, including a <code>rangeUnderflow</code> error if the value is less than 2, <code>rangeOverflow</code> if greater than 10, <code>stepMismatch</code> if the value is a number between 2 and 10, but not an even integer (does not match the requirements of the <code>step</code> attribute), or <code>typeMismatch</code> if the value is not a number.</p> + +<p>Specific attributes and their values can lead to specific error <a href="/en-US/docs/Web/API/ValidityState"><code>ValidityState</code></a></p> + +<table class="standard-table"> + <caption>Validity object errors depend on the <a href="/en-US/docs/Web/HTML/Element/input" title="The HTML <input> element is used to create interactive controls for web-based forms in order to accept data from the user; a wide variety of types of input data and control widgets are available, depending on the device and user agent. "><code><input></code></a> attributes and their values:</caption> + <thead> + <tr> + <th scope="col">Attribute</th> + <th scope="col">Relevent property</th> + <th scope="col">Description</th> + </tr> + </thead> + <tbody> + <tr> + <td><a href="#htmlattrdefmax">max</a></td> + <td><a href="/en-US/docs/Web/API/ValidityState/rangeOverflow"><code>validityState.rangeOverflow</code></a></td> + <td>Occurs when the value is greater than the maximum value as defined by the <code>max</code> attribute</td> + </tr> + <tr> + <td><a href="#htmlattrdefmaxlength">maxlength</a></td> + <td><a href="/en-US/docs/Web/API/ValidityState/tooLong"><code>validityState.tooLong</code></a></td> + <td>Occurs when the number of characters is greater than the number allowed by the <code>maxlength</code> property</td> + </tr> + <tr> + <td><a href="#htmlattrdefmin">min</a></td> + <td><a href="/en-US/docs/Web/API/ValidityState/rangeUnderflow"><code>validityState.rangeUnderflow</code></a></td> + <td>Occurs when the value is less than the minimum value as defined by the <code>min</code> attribute</td> + </tr> + <tr> + <td><a href="#htmlattrdefminlength">minlength</a></td> + <td><a href="/en-US/docs/Web/API/ValidityState/tooShort"><code>validityState.tooShort</code></a></td> + <td>Occurs when the number of characters is less than the number required by the <code>minlength</code> property</td> + </tr> + <tr> + <td><a href="#htmlattrdefpattern">pattern</a></td> + <td><a href="/en-US/docs/Web/API/ValidityState/patternMismatch"><code>validityState.patternMismatch</code></a></td> + <td>Occurs when a pattern attribute is included with a valid regular expression and the <code>value</code> does not match it.</td> + </tr> + <tr> + <td><a href="#htmlattrdefrequired">required</a></td> + <td><a class="new" href="/en-US/docs/Web/API/ValidityState/valueMissing" rel="nofollow"><code>validityState.valueMissing</code></a></td> + <td>Occurs when the <code>required</code> attribute is present but the value is <code>null</code> or radio or checkbox is not checked.</td> + </tr> + <tr> + <td><a href="#htmlattrdefstep">step</a></td> + <td><a href="/en-US/docs/Web/API/ValidityState/stepMismatch"><code>validityState.stepMismatch</code></a></td> + <td>The value doesn't match the step increment. Increment default is <code>1</code>, so only integers are valid on<code> type="number"</code> is step is not included. <code>step="any"</code> will never throw this error.</td> + </tr> + <tr> + <td><a href="#htmlattrdeftyoe">type</a></td> + <td><a href="/en-US/docs/Web/API/ValidityState/typeMismatch"><code>validityState.typeMismatch</code></a></td> + <td>Occurs when the value is not of the correct type, for example a email does not contain an <code>@</code> or a url doesn't contain a protocol.</td> + </tr> + </tbody> +</table> + +<p>If a form control doesn't have the required attribute, no value, or an empty string, is not invalid. Even if the above attributes are present, with the exception of <code>'required'</code>, and empty string will not lead to an error.</p> + +<p>We can set limits on what values we accept, and supporting browsers will natively validate these form values and alert the user if there is a mistake when the form is submitted.</p> + +<p>In addition to the errors described in the table above, the <code>validityState</code> interface contains the <code>badInput</code>, <code>valid</code>, and <code>customError</code> boolean readonly properties. The validity object includes:</p> + +<ul> + <li><a class="new" href="/en-US/docs/Web/API/ValidityState/valueMissing" rel="nofollow"><code>validityState.valueMissing</code></a></li> + <li><a href="/en-US/docs/Web/API/ValidityState/typeMismatch"><code>validityState.typeMismatch</code></a></li> + <li><a href="/en-US/docs/Web/API/ValidityState/patternMismatch"><code>validityState.patternMismatch</code></a></li> + <li><a href="/en-US/docs/Web/API/ValidityState/tooLong"><code>validityState.tooLong</code></a></li> + <li><a href="/en-US/docs/Web/API/ValidityState/tooShort"><code>validityState.tooShort</code></a></li> + <li><a href="/en-US/docs/Web/API/ValidityState/rangeUnderflow"><code>validityState.rangeUnderflow</code></a></li> + <li><a href="/en-US/docs/Web/API/ValidityState/rangeOverflow"><code>validityState.rangeOverflow</code></a></li> + <li><a href="/en-US/docs/Web/API/ValidityState/stepMismatch"><code>validityState.stepMismatch</code></a></li> + <li><a href="/en-US/docs/Web/API/ValidityState/badInput"><code>validityState.badInput</code></a></li> + <li><a class="new" href="/en-US/docs/Web/API/ValidityState/valid" rel="nofollow"><code>validityState.valid</code></a></li> + <li><a class="new" href="/en-US/docs/Web/API/ValidityState/customError" rel="nofollow"><code>validityState.customError</code></a></li> +</ul> + +<p>For each of these Boolean properties, a value of <code>true</code> indicates that the specified reason validation may have failed is true, with the exception of the <code>valid</code> property, which is <code>true</code> if the element's value obeys all constraints.</p> + +<p>If there is an error, supporting browsers will both alert the user and prevent the form from being submitted. A word of caution: if a custom error is set to a truthy value (anything other than the empty string or <code>null</code>), the form will be be prevented from being submitted. If there is no custom error message, and none of the other properties return true, <code>valid</code> will be true, and the form can be submitted.</p> + +<pre class="brush: js">function validate(input) { + let validityState_object = input.validity; + if(validityState_object.valueMissing) { + input.setCustomValidity('A value is required'); + } else if (input.rangeUnderflow) { + input.setCustomValidity('Your value is too low'); + } else if (input.rangeOverflow) { + input.setCustomValidity('Your value is too high'); + } else { + input.setCustomValidity(''); + } +}</pre> + +<p>The last line, setting the custom validity message to the error string is vital. If the user makes an error, and the validity is set, it will fail to submit, even if all of the values are valid, until the message is <code>null</code>.</p> + +<h4 id="Example">Example</h4> + +<p>If you want to present a custom error message when a field fails to validate, you need to use the <a href="/en-US/docs/Web/API/Constraint_validation#Constraint_validation_interfaces">Constraint validation features</a> available on <code><input></code> (and related) elements. Take the following form:</p> + +<pre class="brush: html"><form> + <label for="name">Enter username (upper and lowercase letters): </label> + <input type="text" name="name" id="name" required pattern="[A-Za-z]+"> + <button>Submit</button> +</form></pre> + +<p>The basic HTML form validation features will cause this to produce a default error message if you try to submit the form with either no valid filled in, or a value that does not match the <code>pattern</code>.</p> + +<p>If you wanted to instead display custom error messages, you could use JavaScript like the following:</p> + +<pre class="brush: js">const nameInput = document.querySelector('input'); +const form = document.querySelector('form'); + +nameInput.addEventListener('input', () => { + nameInput.setCustomValidity(''); + nameInput.checkValidity(); +}); + +nameInput.addEventListener('invalid', () => { + if(nameInput.value === '') { + nameInput.setCustomValidity('Enter your username!'); + } else { + nameInput.setCustomValidity('Usernames can only contain upper and lowercase letters. Try again!'); + } +});</pre> + +<p>The example renders like so:</p> + +<p>In brief:</p> + +<ul> + <li>We check the valid state of the input element every time its value is changed by running the <code>checkValidity()</code> method via the <code>input</code> event handler.</li> + <li>If the value is invalid, an <code>invalid</code> event is raised, and the <code>invalid</code> event handler function is run. Inside this function we work out whether the value is invalid because it is empty, or because it doesn't match the pattern, using an <code>if()</code> block, and set a custom validity error message.</li> + <li>As a result, if the input value is invalid when the submit button is pressed, one of the custom error messages will be shown.</li> + <li>If it is valid, it will submit as you'd expect. For this to happen, the custom validity has to be cancelled, by invoking <code>setCustomValidity()</code> with an empty string value. We therefore do this every time the <code>input</code> event is raised. If you don't do this, and a custom validity was previously set, the input will register as invalid, even if it current contains a valid value on submission.</li> +</ul> + +<div class="blockIndicator note"> +<p><strong>Note:</strong> Always validate input constraints both client side and server side. Constraint validation doesn't remove the need for validation on the <em>server side</em>. Invalid values can still be sent by older browsers or by bad actors.</p> +</div> + +<div class="blockIndicator note"> +<p><strong>Note</strong>: Firefox supported a proprietary error attribute — <code>x-moz-errormessage</code> — for many versions, which allowed you set custom error messages in a similar way. This has been removed as of version 66 (see <a class="external" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1513890" rel="noopener">bug 1513890</a>).</p> +</div> + +<h3 id="Localization">Localization</h3> + +<p>The allowed inputs for certain <code><input></code> types depend on the locale. In some locales, 1,000.00 is a valid number, while in other locales the valid way to enter this number is 1.000,00.</p> + +<p>Firefox uses the following heuristics to determine the locale to validate the user's input (at least for <code>type="number"</code>):</p> + +<ul> + <li>Try the language specified by a <code>lang</code>/<code>xml:lang</code> attribute on the element or any of its parents.</li> + <li>Try the language specified by any <code>Content-Language</code> HTTP header. Or,</li> + <li>If none specified, use the browser's locale.</li> +</ul> + +<h3 id="Technical_summary">Technical summary</h3> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/en-US/docs/Web/HTML/Content_categories">Content categories</a></th> + <td><a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">Flow content</a>, listed, submittable, resettable, form-associated element, <a href="/en-US/docs/Web/HTML/Content_categories#Phrasing_content">phrasing content</a>. If the <code><a href="/en-US/docs/Web/HTML/Element/input#attr-type">type</a></code> is not <code>hidden</code>, then labelable element, palpable content.</td> + </tr> + <tr> + <th scope="row">Permitted content</th> + <td>None, it is an <a href="/en-US/docs/Glossary/empty_element">empty element</a>.</td> + </tr> + <tr> + <th scope="row">Tag omission</th> + <td>Must have a start tag and must not have an end tag.</td> + </tr> + <tr> + <th scope="row">Permitted parents</th> + <td>Any element that accepts <a href="/en-US/docs/Web/HTML/Content_categories#Phrasing_content">phrasing content</a>.</td> + </tr> + <tr> + <th scope="row">Permitted ARIA roles</th> + <td> + <ul> + <li><code>type=button</code>: <code><a class="external" href="https://w3c.github.io/aria/#link" rel="noopener">link</a></code>, <code><a class="external" href="https://w3c.github.io/aria/#menuitem" rel="noopener">menuitem</a></code>, <code><a class="external" href="https://w3c.github.io/aria/#menuitemcheckbox" rel="noopener">menuitemcheckbox</a></code>, <code><a class="external" href="https://w3c.github.io/aria/#menuitemradio" rel="noopener">menuitemradio</a></code>, <code><a class="external" href="https://w3c.github.io/aria/#radio" rel="noopener">radio</a></code>, <code><a class="external" href="https://w3c.github.io/aria/#switch" rel="noopener">switch</a></code>, <code><a class="external" href="https://w3c.github.io/aria/#tab" rel="noopener">tab</a></code></li> + <li><code>type=checkbox</code>: <code><a class="external" href="https://w3c.github.io/aria/#button" rel="noopener">button</a></code>, <code><a class="external" href="https://w3c.github.io/aria/#menuitemcheckbox" rel="noopener">menuitemcheckbox</a></code>, <code><a class="external" href="https://w3c.github.io/aria/#option" rel="noopener">option</a></code>, <code><a class="external" href="https://w3c.github.io/aria/#switch" rel="noopener">switch</a></code></li> + <li><code>type=image</code>: <code><a class="external" href="https://w3c.github.io/aria/#link" rel="noopener">link</a></code>, <code><a class="external" href="https://w3c.github.io/aria/#menuitem" rel="noopener">menuitem</a></code>, <code><a class="external" href="https://w3c.github.io/aria/#menuitemcheckbox" rel="noopener">menuitemcheckbox</a></code>, <code><a class="external" href="https://w3c.github.io/aria/#menuitemradio" rel="noopener">menuitemradio</a></code>, <code><a class="external" href="https://w3c.github.io/aria/#radio" rel="noopener">radio</a></code>, <code><a class="external" href="https://w3c.github.io/aria/#switch" rel="noopener">switch</a></code></li> + <li><code>type=radio</code>: <code><a class="external" href="https://w3c.github.io/aria/#menuitemradio" rel="noopener">menuitemradio</a></code></li> + <li><code>type=color|date|datetime|datetime-local|email|file</code>: None</li> + <li><code>type=hidden|month|number|password|range|reset</code>: None</li> + <li><code>type=search|submit|tel|text|url|week</code>: None</li> + </ul> + </td> + </tr> + <tr> + <th scope="row">DOM interface</th> + <td><a href="/en-US/docs/Web/API/HTMLInputElement"><code>HTMLInputElement</code></a></td> + </tr> + </tbody> +</table> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td><a class="external" href="https://html.spec.whatwg.org/multipage/forms.html#the-input-element" hreflang="en" lang="en" rel="noopener">HTML Living Standard<br> + <small lang="en-US">The definition of '<input>' in that specification.</small></a></td> + <td><span class="spec-Living">Living Standard</span></td> + <td></td> + </tr> + <tr> + <td><a class="external" href="https://w3c.github.io/html-media-capture/#the-capture-attribute" hreflang="en" lang="en" rel="noopener">HTML Media Capture<br> + <small lang="en-US">The definition of 'capture attribute' in that specification.</small></a></td> + <td><span class="spec-REC">Recommendation</span></td> + <td>Adds the <code>capture</code> attribute</td> + </tr> + <tr> + <td><a class="external" href="https://www.w3.org/TR/html52/sec-forms.html#the-input-element" hreflang="en" lang="en" rel="noopener">HTML5<br> + <small lang="en-US">The definition of '<input>' in that specification.</small></a></td> + <td><span class="spec-REC">Recommendation</span></td> + <td></td> + </tr> + <tr> + <td><a class="external" href="https://www.w3.org/TR/html401/interact/forms.html#h-17.4" hreflang="en" lang="en" rel="noopener">HTML 4.01 Specification<br> + <small lang="en-US">The definition of '<form>' in that specification.</small></a></td> + <td><span class="spec-REC">Recommendation</span></td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Accessibility_concerns">Accessibility concerns</h2> + +<h3 id="Labels_2">Labels</h3> + +<p>When including inputs, it is an accessibilty requirement to add labels along side. This is needed so those who use assistive technologies can tell what the input is for. Also, clicking or touching a label gives focus to the label's associated form control. This improves the accessibility and usability for sighted users, increases the area a user can click or touch to activate the form control. this is especially useful (and even needed) for radio buttons and checkboxes, which are tiny. For more information about labels in general see <a href="#Labels">Labels</a> .</p> + +<p>The following is an example of how to associate the <code><label></code> with an <code><input></code> element in the above style. You need to give the <code><input></code> an <code>id</code> attribute. The <code><label></code> then needs a <code>for</code> attribute whose value is the same as the input's <code>id</code>.</p> + +<pre><label for="peas">Do you like peas?</label> +<input type="checkbox" name="peas" id="peas"> +</pre> + +<h3 id="Size">Size</h3> + +<p>Interactive elements such as form input should provide an area large enough that it is easy to activate them. This helps a variety of people, including people with motor control issues and people using non-precise forms of input such as a stylus or fingers. A minimum interactive size of 44×44 <a class="external" href="https://www.w3.org/TR/WCAG21/#dfn-css-pixels" rel="noopener">CSS pixels</a> is recommended.</p> + +<ul> + <li><a class="external" href="https://www.w3.org/WAI/WCAG21/Understanding/target-size.html" rel="noopener">Understanding Success Criterion 2.5.5: Target Size | W3C Understanding WCAG 2.1</a></li> + <li><a class="external" href="http://adrianroselli.com/2019/06/target-size-and-2-5-5.html" rel="noopener">Target Size and 2.5.5 | Adrian Roselli</a></li> + <li><a class="external" href="https://a11yproject.com/posts/large-touch-targets/" rel="noopener">Quick test: Large touch targets - The A11Y Project</a></li> +</ul> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<div class="hidden">The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a class="external" href="https://github.com/mdn/browser-compat-data" rel="noopener">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</div> + +<div> +<div class="bc-data" id="bcd:html.elements.input"><a class="bc-github-link external" href="https://github.com/mdn/browser-compat-data" rel="noopener">Update compatibility data on GitHub</a> + +<table class="bc-table bc-table-web"> + <thead> + <tr class="bc-platforms"> + <td></td> + <th class="bc-platform-desktop" colspan="6"><span>Desktop</span></th> + <th class="bc-platform-mobile" colspan="6"><span>Mobile</span></th> + </tr> + <tr class="bc-browsers"> + <td></td> + <th class="bc-browser-chrome"><span class="bc-head-icon-chrome bc-head-txt-label">Chrome</span></th> + <th class="bc-browser-edge"><span class="bc-head-icon-edge bc-head-txt-label">Edge</span></th> + <th class="bc-browser-firefox"><span class="bc-head-icon-firefox bc-head-txt-label">Firefox</span></th> + <th class="bc-browser-ie"><span class="bc-head-icon-ie bc-head-txt-label">Internet Explorer</span></th> + <th class="bc-browser-opera"><span class="bc-head-icon-opera bc-head-txt-label">Opera</span></th> + <th class="bc-browser-safari"><span class="bc-head-icon-safari bc-head-txt-label">Safari</span></th> + <th class="bc-browser-webview_android"><span class="bc-head-icon-webview_android bc-head-txt-label">Android webview</span></th> + <th class="bc-browser-chrome_android"><span class="bc-head-icon-chrome_android bc-head-txt-label">Chrome for Android</span></th> + <th class="bc-browser-firefox_android"><span class="bc-head-icon-firefox_android bc-head-txt-label">Firefox for Android</span></th> + <th class="bc-browser-opera_android"><span class="bc-head-icon-opera_android bc-head-txt-label">Opera for Android</span></th> + <th class="bc-browser-safari_ios"><span class="bc-head-icon-safari_ios bc-head-txt-label">Safari on iOS</span></th> + <th class="bc-browser-samsunginternet_android"><span class="bc-head-icon-samsunginternet_android bc-head-txt-label">Samsung Internet</span></th> + </tr> + </thead> + <tbody> + <tr> + <th scope="row"><code>input</code></th> + <td class="bc-supports-yes bc-browser-chrome"><span class="bc-browser-name">Chrome</span><abbr class="bc-level-yes only-icon" title="Full support"> <span>Full support</span> </abbr> Yes</td> + <td class="bc-supports-yes bc-browser-edge"><span class="bc-browser-name">Edge</span><abbr class="bc-level-yes only-icon" title="Full support"> <span>Full support</span> </abbr> 12</td> + <td class="bc-supports-yes bc-browser-firefox"><span class="bc-browser-name">Firefox</span><abbr class="bc-level-yes only-icon" title="Full support"> <span>Full support</span> </abbr> 1</td> + <td class="bc-supports-yes bc-browser-ie"><span class="bc-browser-name">IE</span><abbr class="bc-level-yes only-icon" title="Full support"> <span>Full support</span> </abbr> Yes</td> + <td class="bc-supports-yes bc-browser-opera"><span class="bc-browser-name">Opera</span><abbr class="bc-level-yes only-icon" title="Full support"> <span>Full support</span> </abbr> Yes</td> + <td class="bc-supports-yes bc-browser-safari"><span class="bc-browser-name">Safari</span><abbr class="bc-level-yes only-icon" title="Full support"> <span>Full support</span> </abbr> 1</td> + <td class="bc-supports-yes bc-browser-webview_android"><span class="bc-browser-name">WebView Android</span><abbr class="bc-level-yes only-icon" title="Full support"> <span>Full support</span> </abbr> 1</td> + <td class="bc-supports-yes bc-browser-chrome_android"><span class="bc-browser-name">Chrome Android</span><abbr class="bc-level-yes only-icon" title="Full support"> <span>Full support</span> </abbr> Yes</td> + <td class="bc-supports-yes bc-browser-firefox_android"><span class="bc-browser-name">Firefox Android</span><abbr class="bc-level-yes only-icon" title="Full support"> <span>Full support</span> </abbr> 4</td> + <td class="bc-supports-yes bc-browser-opera_android"><span class="bc-browser-name">Opera Android</span><abbr class="bc-level-yes only-icon" title="Full support"> <span>Full support</span> </abbr> Yes</td> + <td class="bc-supports-yes bc-browser-safari_ios"><span class="bc-browser-name">Safari iOS</span><abbr class="bc-level-yes only-icon" title="Full support"> <span>Full support</span> </abbr> 1</td> + <td class="bc-supports-yes bc-browser-samsunginternet_android"><span class="bc-browser-name">Samsung Internet Android</span><abbr class="bc-level-yes only-icon" title="Full support"> <span>Full support</span> </abbr> Yes</td> + </tr> + <tr> + <th scope="row"><a href="/en-US/docs/Web/HTML/Element/input/button"><code>type="button"</code></a></th> + <td class="bc-supports-yes bc-browser-chrome"><span class="bc-browser-name">Chrome</span><abbr class="bc-level-yes only-icon" title="Full support"> <span>Full support</span> </abbr> 1</td> + <td class="bc-supports-yes bc-browser-edge"><span class="bc-browser-name">Edge</span><abbr class="bc-level-yes only-icon" title="Full support"> <span>Full support</span> </abbr> 12</td> + <td class="bc-supports-yes bc-browser-firefox"><span class="bc-browser-name">Firefox</span><abbr class="bc-level-yes only-icon" title="Full support"> <span>Full support</span> </abbr> 1</td> + <td class="bc-supports-yes bc-browser-ie"><span class="bc-browser-name">IE</span><abbr class="bc-level-yes only-icon" title="Full support"> <span>Full support</span> </abbr> Yes</td> + <td class="bc-supports-yes bc-browser-opera"><span class="bc-browser-name">Opera</span><abbr class="bc-level-yes only-icon" title="Full support"> <span>Full support</span> </abbr> Yes</td> + <td class="bc-supports-yes bc-browser-safari"><span class="bc-browser-name">Safari</span><abbr class="bc-level-yes only-icon" title="Full support"> <span>Full support</span> </abbr> 1</td> + <td class="bc-supports-yes bc-browser-webview_android"><span class="bc-browser-name">WebView Android</span><abbr class="bc-level-yes only-icon" title="Full support"> <span>Full support</span> </abbr> Yes</td> + <td class="bc-supports-yes bc-browser-chrome_android"><span class="bc-browser-name">Chrome Android</span><abbr class="bc-level-yes only-icon" title="Full support"> <span>Full support</span> </abbr> 18</td> + <td class="bc-supports-yes bc-browser-firefox_android"><span class="bc-browser-name">Firefox Android</span><abbr class="bc-level-yes only-icon" title="Full support"> <span>Full support</span> </abbr> 4</td> + <td class="bc-supports-yes bc-browser-opera_android"><span class="bc-browser-name">Opera Android</span><abbr class="bc-level-yes only-icon" title="Full support"> <span>Full support</span> </abbr> Yes</td> + <td class="bc-supports-yes bc-browser-safari_ios"><span class="bc-browser-name">Safari iOS</span><abbr class="bc-level-yes only-icon" title="Full support"> <span>Full support</span> </abbr> Yes</td> + <td class="bc-supports-yes bc-browser-samsunginternet_android"><span class="bc-browser-name">Samsung Internet Android</span><abbr class="bc-level-yes only-icon" title="Full support"> <span>Full support</span> </abbr> 1.0</td> + </tr> + <tr> + <th scope="row"><a href="/en-US/docs/Web/HTML/Element/input/checkbox"><code>type="checkbox"</code></a></th> + <td class="bc-supports-yes bc-browser-chrome"><span class="bc-browser-name">Chrome</span><abbr class="bc-level-yes only-icon" title="Full support"> <span>Full support</span> </abbr> Yes</td> + <td class="bc-supports-yes bc-browser-edge"><span class="bc-browser-name">Edge</span><abbr class="bc-level-yes only-icon" title="Full support"> <span>Full support</span> </abbr> 12</td> + <td class="bc-supports-yes bc-browser-firefox"><span class="bc-browser-name">Firefox</span><abbr class="bc-level-yes only-icon" title="Full support"> <span>Full support</span> </abbr> Yes</td> + <td class="bc-supports-yes bc-browser-ie"><span class="bc-browser-name">IE</span><abbr class="bc-level-yes only-icon" title="Full support"> <span>Full support</span> </abbr> Yes</td> + <td class="bc-supports-yes bc-browser-opera"><span class="bc-browser-name">Opera</span><abbr class="bc-level-yes only-icon" title="Full support"> <span>Full support</span> </abbr> Yes</td> + <td class="bc-supports-yes bc-browser-safari"><span class="bc-browser-name">Safari</span><abbr class="bc-level-yes only-icon" title="Full support"> <span>Full support</span> </abbr> Yes</td> + <td class="bc-supports-yes bc-browser-webview_android"><span class="bc-browser-name">WebView Android</span><abbr class="bc-level-yes only-icon" title="Full support"> <span>Full support</span> </abbr> Yes</td> + <td class="bc-supports-yes bc-browser-chrome_android"><span class="bc-browser-name">Chrome Android</span><abbr class="bc-level-yes only-icon" title="Full support"> <span>Full support</span> </abbr> Yes</td> + <td class="bc-supports-yes bc-browser-firefox_android"><span class="bc-browser-name">Firefox Android</span><abbr class="bc-level-yes only-icon" title="Full support"> <span>Full support</span> </abbr> 4</td> + <td class="bc-supports-yes bc-browser-opera_android"><span class="bc-browser-name">Opera Android</span><abbr class="bc-level-yes only-icon" title="Full support"> <span>Full support</span> </abbr> Yes</td> + <td class="bc-supports-yes bc-browser-safari_ios"><span class="bc-browser-name">Safari iOS</span><abbr class="bc-level-yes only-icon" title="Full support"> <span>Full support</span> </abbr> Yes</td> + <td class="bc-supports-yes bc-browser-samsunginternet_android"><span class="bc-browser-name">Samsung Internet Android</span><abbr class="bc-level-yes only-icon" title="Full support"> <span>Full support</span> </abbr> Yes</td> + </tr> + <tr> + <th scope="row"><a href="/en-US/docs/Web/HTML/Element/input/color"><code>type="color"</code></a></th> + <td class="bc-supports-yes bc-browser-chrome"><span class="bc-browser-name">Chrome</span><abbr class="bc-level-yes only-icon" title="Full support"> <span>Full support</span> </abbr> 20</td> + <td class="bc-supports-yes bc-browser-edge"><span class="bc-browser-name">Edge</span><abbr class="bc-level-yes only-icon" title="Full support"> <span>Full support</span> </abbr> 14</td> + <td class="bc-supports-yes bc-browser-firefox bc-has-history"><span class="bc-browser-name">Firefox</span><abbr class="bc-level-yes only-icon" title="Full support"> <span>Full support</span> </abbr> 29 + <div class="bc-icons"><abbr class="only-icon" title="See implementation notes"><span>Notes</span></abbr></div> + + <section class="bc-history" id="sect1"> + <dl> + <dt class="bc-supports-yes bc-supports"><abbr class="bc-level-yes only-icon" title="Full support"><span>Full support</span> </abbr> 29 + + <div class="bc-icons"><abbr class="only-icon" title="See implementation notes"><span>Notes</span></abbr></div> + </dt> + <dd><abbr class="only-icon" title="See implementation notes"><span>Notes</span></abbr> Firefox doesn't yet support inputs of type <code>color</code> on Windows Touch.</dd> + </dl> + </section> + </td> + <td class="bc-supports-no bc-browser-ie"><span class="bc-browser-name">IE</span><abbr class="bc-level-no only-icon" title="No support"> <span>No support</span> </abbr> No</td> + <td class="bc-supports-yes bc-browser-opera"><span class="bc-browser-name">Opera</span><abbr class="bc-level-yes only-icon" title="Full support"> <span>Full support</span> </abbr> 12</td> + <td class="bc-supports-yes bc-browser-safari"><span class="bc-browser-name">Safari</span><abbr class="bc-level-yes only-icon" title="Full support"> <span>Full support</span> </abbr> 12.1</td> + <td class="bc-supports-yes bc-browser-webview_android"><span class="bc-browser-name">WebView Android</span><abbr class="bc-level-yes only-icon" title="Full support"> <span>Full support</span> </abbr> 4.4</td> + <td class="bc-supports-yes bc-browser-chrome_android"><span class="bc-browser-name">Chrome Android</span><abbr class="bc-level-yes only-icon" title="Full support"> <span>Full support</span> </abbr> 25</td> + <td class="bc-supports-yes bc-browser-firefox_android"><span class="bc-browser-name">Firefox Android</span><abbr class="bc-level-yes only-icon" title="Full support"> <span>Full support</span> </abbr> 27</td> + <td class="bc-supports-yes bc-browser-opera_android"><span class="bc-browser-name">Opera Android</span><abbr class="bc-level-yes only-icon" title="Full support"> <span>Full support</span> </abbr> 12</td> + <td class="bc-supports-yes bc-browser-safari_ios"><span class="bc-browser-name">Safari iOS</span><abbr class="bc-level-yes only-icon" title="Full support"> <span>Full support</span> </abbr> 12.2</td> + <td class="bc-supports-yes bc-browser-samsunginternet_android"><span class="bc-browser-name">Samsung Internet Android</span><abbr class="bc-level-yes only-icon" title="Full support"> <span>Full support</span> </abbr> 1.5</td> + </tr> + <tr> + <th scope="row"><a href="/en-US/docs/Web/HTML/Element/input/date"><code>type="date"</code></a></th> + <td class="bc-supports-yes bc-browser-chrome"><span class="bc-browser-name">Chrome</span><abbr class="bc-level-yes only-icon" title="Full support"> <span>Full support</span> </abbr> 20</td> + <td class="bc-supports-yes bc-browser-edge"><span class="bc-browser-name">Edge</span><abbr class="bc-level-yes only-icon" title="Full support"> <span>Full support</span> </abbr> 12</td> + <td class="bc-supports-yes bc-browser-firefox"><span class="bc-browser-name">Firefox</span><abbr class="bc-level-yes only-icon" title="Full support"> <span>Full support</span> </abbr> 57</td> + <td class="bc-supports-no bc-browser-ie"><span class="bc-browser-name">IE</span><abbr class="bc-level-no only-icon" title="No support"> <span>No support</span> </abbr> No</td> + <td class="bc-supports-yes bc-browser-opera"><span class="bc-browser-name">Opera</span><abbr class="bc-level-yes only-icon" title="Full support"> <span>Full support</span> </abbr> 11</td> + <td class="bc-supports-no bc-browser-safari bc-has-history"><span class="bc-browser-name">Safari</span><abbr class="bc-level-no only-icon" title="No support"> <span>No support</span> </abbr> No + <div class="bc-icons"><abbr class="only-icon" title="See implementation notes"><span>Notes</span></abbr></div> + + <section class="bc-history" id="sect2"> + <dl> + <dt class="bc-supports-no bc-supports"><abbr class="bc-level-no only-icon" title="No support"><span>No support</span> </abbr> No + + <div class="bc-icons"><abbr class="only-icon" title="See implementation notes"><span>Notes</span></abbr></div> + </dt> + <dd><abbr class="only-icon" title="See implementation notes"><span>Notes</span></abbr> The input type is recognized, but there is no date-specific control. See <a class="external" href="https://webkit.org/b/119175" rel="noopener">bug 119175</a>.</dd> + </dl> + </section> + </td> + <td class="bc-supports-yes bc-browser-webview_android"><span class="bc-browser-name">WebView Android</span><abbr class="bc-level-yes only-icon" title="Full support"> <span>Full support</span> </abbr> Yes</td> + <td class="bc-supports-yes bc-browser-chrome_android"><span class="bc-browser-name">Chrome Android</span><abbr class="bc-level-yes only-icon" title="Full support"> <span>Full support</span> </abbr> Yes</td> + <td class="bc-supports-yes bc-browser-firefox_android"><span class="bc-browser-name">Firefox Android</span><abbr class="bc-level-yes only-icon" title="Full support"> <span>Full support</span> </abbr> 57</td> + <td class="bc-supports-yes bc-browser-opera_android"><span class="bc-browser-name">Opera Android</span><abbr class="bc-level-yes only-icon" title="Full support"> <span>Full support</span> </abbr> 11</td> + <td class="bc-supports-yes bc-browser-safari_ios"><span class="bc-browser-name">Safari iOS</span><abbr class="bc-level-yes only-icon" title="Full support"> <span>Full support</span> </abbr> 5</td> + <td class="bc-supports-yes bc-browser-samsunginternet_android"><span class="bc-browser-name">Samsung Internet Android</span><abbr class="bc-level-yes only-icon" title="Full support"> <span>Full support</span> </abbr> Yes</td> + </tr> + <tr> + <th scope="row"><a href="/en-US/docs/Web/HTML/Element/input/datetime-local"><code>type="datetime-local"</code></a></th> + <td class="bc-supports-yes bc-browser-chrome"><span class="bc-browser-name">Chrome</span><abbr class="bc-level-yes only-icon" title="Full support"> <span>Full support</span> </abbr> 20</td> + <td class="bc-supports-yes bc-browser-edge"><span class="bc-browser-name">Edge</span><abbr class="bc-level-yes only-icon" title="Full support"> <span>Full support</span> </abbr> 12</td> + <td class="bc-supports-no bc-browser-firefox bc-has-history"><span class="bc-browser-name">Firefox</span><abbr class="bc-level-no only-icon" title="No support"> <span>No support</span> </abbr> No + <div class="bc-icons"><abbr class="only-icon" title="See implementation notes"><span>Notes</span></abbr></div> + + <section class="bc-history" id="sect3"> + <dl> + <dt class="bc-supports-no bc-supports"><abbr class="bc-level-no only-icon" title="No support"><span>No support</span> </abbr> No + + <div class="bc-icons"><abbr class="only-icon" title="See implementation notes"><span>Notes</span></abbr></div> + </dt> + <dd><abbr class="only-icon" title="See implementation notes"><span>Notes</span></abbr> See <a class="external" href="https://bugzil.la/888320" rel="noopener">bug 888320</a> and <a class="external" href="https://wiki.mozilla.org/TPE_DOM/Date_time_input_types" rel="noopener">TPE DOM/Date time input types</a>.</dd> + </dl> + </section> + </td> + <td class="bc-supports-no bc-browser-ie"><span class="bc-browser-name">IE</span><abbr class="bc-level-no only-icon" title="No support"> <span>No support</span> </abbr> No</td> + <td class="bc-supports-yes bc-browser-opera"><span class="bc-browser-name">Opera</span><abbr class="bc-level-yes only-icon" title="Full support"> <span>Full support</span> </abbr> 11</td> + <td class="bc-supports-no bc-browser-safari bc-has-history"><span class="bc-browser-name">Safari</span><abbr class="bc-level-no only-icon" title="No support"> <span>No support</span> </abbr> No + <div class="bc-icons"><abbr class="only-icon" title="See implementation notes"><span>Notes</span></abbr></div> + + <section class="bc-history" id="sect4"> + <dl> + <dt class="bc-supports-no bc-supports"><abbr class="bc-level-no only-icon" title="No support"><span>No support</span> </abbr> No + + <div class="bc-icons"><abbr class="only-icon" title="See implementation notes"><span>Notes</span></abbr></div> + </dt> + <dd><abbr class="only-icon" title="See implementation notes"><span>Notes</span></abbr> The input type is recognized, but there is no date-specific control. See <a class="external" href="https://webkit.org/b/200416" rel="noopener">bug 200416</a>.</dd> + </dl> + </section> + </td> + <td class="bc-supports-yes bc-browser-webview_android"><span class="bc-browser-name">WebView Android</span><abbr class="bc-level-yes only-icon" title="Full support"> <span>Full support</span> </abbr> Yes</td> + <td class="bc-supports-yes bc-browser-chrome_android"><span class="bc-browser-name">Chrome Android</span><abbr class="bc-level-yes only-icon" title="Full support"> <span>Full support</span> </abbr> Yes</td> + <td class="bc-supports-yes bc-browser-firefox_android"><span class="bc-browser-name">Firefox Android</span><abbr class="bc-level-yes only-icon" title="Full support"> <span>Full support</span> </abbr> Yes</td> + <td class="bc-supports-yes bc-browser-opera_android"><span class="bc-browser-name">Opera Android</span><abbr class="bc-level-yes only-icon" title="Full support"> <span>Full support</span> </abbr> 11</td> + <td class="bc-supports-yes bc-browser-safari_ios"><span class="bc-browser-name">Safari iOS</span><abbr class="bc-level-yes only-icon" title="Full support"> <span>Full support</span> </abbr> Yes</td> + <td class="bc-supports-yes bc-browser-samsunginternet_android"><span class="bc-browser-name">Samsung Internet Android</span><abbr class="bc-level-yes only-icon" title="Full support"> <span>Full support</span> </abbr> Yes</td> + </tr> + <tr> + <th scope="row"><a href="/en-US/docs/Web/HTML/Element/input/email"><code>type="email"</code></a></th> + <td class="bc-supports-yes bc-browser-chrome"><span class="bc-browser-name">Chrome</span><abbr class="bc-level-yes only-icon" title="Full support"> <span>Full support</span> </abbr> 5</td> + <td class="bc-supports-yes bc-browser-edge"><span class="bc-browser-name">Edge</span><abbr class="bc-level-yes only-icon" title="Full support"> <span>Full support</span> </abbr> 12</td> + <td class="bc-supports-yes bc-browser-firefox"><span class="bc-browser-name">Firefox</span><abbr class="bc-level-yes only-icon" title="Full support"> <span>Full support</span> </abbr> Yes</td> + <td class="bc-supports-yes bc-browser-ie"><span class="bc-browser-name">IE</span><abbr class="bc-level-yes only-icon" title="Full support"> <span>Full support</span> </abbr> 10</td> + <td class="bc-supports-yes bc-browser-opera"><span class="bc-browser-name">Opera</span><abbr class="bc-level-yes only-icon" title="Full support"> <span>Full support</span> </abbr> 11</td> + <td class="bc-supports-yes bc-browser-safari"><span class="bc-browser-name">Safari</span><abbr class="bc-level-yes only-icon" title="Full support"> <span>Full support</span> </abbr> Yes</td> + <td class="bc-supports-unknown bc-browser-webview_android"><span class="bc-browser-name">WebView Android</span><abbr title="Compatibility unknown; please update this."> ? </abbr></td> + <td class="bc-supports-unknown bc-browser-chrome_android"><span class="bc-browser-name">Chrome Android</span><abbr title="Compatibility unknown; please update this."> ? </abbr></td> + <td class="bc-supports-yes bc-browser-firefox_android"><span class="bc-browser-name">Firefox Android</span><abbr class="bc-level-yes only-icon" title="Full support"> <span>Full support</span> </abbr> 4</td> + <td class="bc-supports-yes bc-browser-opera_android"><span class="bc-browser-name">Opera Android</span><abbr class="bc-level-yes only-icon" title="Full support"> <span>Full support</span> </abbr> Yes</td> + <td class="bc-supports-yes bc-browser-safari_ios bc-has-history"><span class="bc-browser-name">Safari iOS</span><abbr class="bc-level-yes only-icon" title="Full support"> <span>Full support</span> </abbr> 3.1 + <div class="bc-icons"><abbr class="only-icon" title="See implementation notes"><span>Notes</span></abbr></div> + + <section class="bc-history" id="sect5"> + <dl> + <dt class="bc-supports-yes bc-supports"><abbr class="bc-level-yes only-icon" title="Full support"><span>Full support</span> </abbr> 3.1 + + <div class="bc-icons"><abbr class="only-icon" title="See implementation notes"><span>Notes</span></abbr></div> + </dt> + <dd><abbr class="only-icon" title="See implementation notes"><span>Notes</span></abbr> Doesn't do validation, but instead offers a custom 'email' keyboard, which is designed to make entering email addresses easier.</dd> + <dd><abbr class="only-icon" title="See implementation notes"><span>Notes</span></abbr> The custom 'email' keyboard does not provide a comma key, so users cannot enter multiple email addresses.</dd> + <dd><abbr class="only-icon" title="See implementation notes"><span>Notes</span></abbr> Automatically applies a default style of <code>opacity: 0.4</code> to disable textual <code><input></code> elements, including those of type 'email'. Other major browsers don't currently share this particular default style.</dd> + </dl> + </section> + </td> + <td class="bc-supports-unknown bc-browser-samsunginternet_android"><span class="bc-browser-name">Samsung Internet Android</span><abbr title="Compatibility unknown; please update this."> ? </abbr></td> + </tr> + <tr> + <th scope="row"><a href="/en-US/docs/Web/HTML/Element/input/file"><code>type="file"</code></a></th> + <td class="bc-supports-yes bc-browser-chrome"><span class="bc-browser-name">Chrome</span><abbr class="bc-level-yes only-icon" title="Full support"> <span>Full support</span> </abbr> 1</td> + <td class="bc-supports-yes bc-browser-edge"><span class="bc-browser-name">Edge</span><abbr class="bc-level-yes only-icon" title="Full support"> <span>Full support</span> </abbr> 12</td> + <td class="bc-supports-yes bc-browser-firefox bc-has-history"><span class="bc-browser-name">Firefox</span><abbr class="bc-level-yes only-icon" title="Full support"> <span>Full support</span> </abbr> 1 + <div class="bc-icons"><abbr class="only-icon" title="See implementation notes"><span>Notes</span></abbr></div> + + <section class="bc-history" id="sect6"> + <dl> + <dt class="bc-supports-yes bc-supports"><abbr class="bc-level-yes only-icon" title="Full support"><span>Full support</span> </abbr> 1 + + <div class="bc-icons"><abbr class="only-icon" title="See implementation notes"><span>Notes</span></abbr></div> + </dt> + <dd><abbr class="only-icon" title="See implementation notes"><span>Notes</span></abbr> You can set as well as get the value of <code>HTMLInputElement.files</code> in all modern browsers; this was most recently added to Firefox, in version 57 (see <a class="external" href="https://bugzil.la/1384030" rel="noopener">bug 1384030</a>).</dd> + </dl> + </section> + </td> + <td class="bc-supports-yes bc-browser-ie"><span class="bc-browser-name">IE</span><abbr class="bc-level-yes only-icon" title="Full support"> <span>Full support</span> </abbr> Yes</td> + <td class="bc-supports-yes bc-browser-opera"><span class="bc-browser-name">Opera</span><abbr class="bc-level-yes only-icon" title="Full support"> <span>Full support</span> </abbr> 11</td> + <td class="bc-supports-yes bc-browser-safari"><span class="bc-browser-name">Safari</span><abbr class="bc-level-yes only-icon" title="Full support"> <span>Full support</span> </abbr> 1</td> + <td class="bc-supports-yes bc-browser-webview_android"><span class="bc-browser-name">WebView Android</span><abbr class="bc-level-yes only-icon" title="Full support"> <span>Full support</span> </abbr> Yes</td> + <td class="bc-supports-yes bc-browser-chrome_android"><span class="bc-browser-name">Chrome Android</span><abbr class="bc-level-yes only-icon" title="Full support"> <span>Full support</span> </abbr> Yes</td> + <td class="bc-supports-yes bc-browser-firefox_android"><span class="bc-browser-name">Firefox Android</span><abbr class="bc-level-yes only-icon" title="Full support"> <span>Full support</span> </abbr> 4</td> + <td class="bc-supports-yes bc-browser-opera_android"><span class="bc-browser-name">Opera Android</span><abbr class="bc-level-yes only-icon" title="Full support"> <span>Full support</span> </abbr> 11</td> + <td class="bc-supports-yes bc-browser-safari_ios"><span class="bc-browser-name">Safari iOS</span><abbr class="bc-level-yes only-icon" title="Full support"> <span>Full support</span> </abbr> Yes</td> + <td class="bc-supports-yes bc-browser-samsunginternet_android"><span class="bc-browser-name">Samsung Internet Android</span><abbr class="bc-level-yes only-icon" title="Full support"> <span>Full support</span> </abbr> Yes</td> + </tr> + <tr> + <th scope="row"><a href="/en-US/docs/Web/HTML/Element/input/hidden"><code>type="hidden"</code></a></th> + <td class="bc-supports-yes bc-browser-chrome"><span class="bc-browser-name">Chrome</span><abbr class="bc-level-yes only-icon" title="Full support"> <span>Full support</span> </abbr> 1</td> + <td class="bc-supports-yes bc-browser-edge"><span class="bc-browser-name">Edge</span><abbr class="bc-level-yes only-icon" title="Full support"> <span>Full support</span> </abbr> 12</td> + <td class="bc-supports-yes bc-browser-firefox"><span class="bc-browser-name">Firefox</span><abbr class="bc-level-yes only-icon" title="Full support"> <span>Full support</span> </abbr> 1</td> + <td class="bc-supports-yes bc-browser-ie"><span class="bc-browser-name">IE</span><abbr class="bc-level-yes only-icon" title="Full support"> <span>Full support</span> </abbr> Yes</td> + <td class="bc-supports-yes bc-browser-opera"><span class="bc-browser-name">Opera</span><abbr class="bc-level-yes only-icon" title="Full support"> <span>Full support</span> </abbr> 2</td> + <td class="bc-supports-yes bc-browser-safari"><span class="bc-browser-name">Safari</span><abbr class="bc-level-yes only-icon" title="Full support"> <span>Full support</span> </abbr> 1</td> + <td class="bc-supports-yes bc-browser-webview_android"><span class="bc-browser-name">WebView Android</span><abbr class="bc-level-yes only-icon" title="Full support"> <span>Full support</span> </abbr> Yes</td> + <td class="bc-supports-yes bc-browser-chrome_android"><span class="bc-browser-name">Chrome Android</span><abbr class="bc-level-yes only-icon" title="Full support"> <span>Full support</span> </abbr> Yes</td> + <td class="bc-supports-yes bc-browser-firefox_android"><span class="bc-browser-name">Firefox Android</span><abbr class="bc-level-yes only-icon" title="Full support"> <span>Full support</span> </abbr> 4</td> + <td class="bc-supports-yes bc-browser-opera_android"><span class="bc-browser-name">Opera Android</span><abbr class="bc-level-yes only-icon" title="Full support"> <span>Full support</span> </abbr> Yes</td> + <td class="bc-supports-yes bc-browser-safari_ios"><span class="bc-browser-name">Safari iOS</span><abbr class="bc-level-yes only-icon" title="Full support"> <span>Full support</span> </abbr> Yes</td> + <td class="bc-supports-yes bc-browser-samsunginternet_android"><span class="bc-browser-name">Samsung Internet Android</span><abbr class="bc-level-yes only-icon" title="Full support"> <span>Full support</span> </abbr> Yes</td> + </tr> + <tr> + <th scope="row"><a href="/en-US/docs/Web/HTML/Element/input/image"><code>type="image"</code></a></th> + <td class="bc-supports-yes bc-browser-chrome"><span class="bc-browser-name">Chrome</span><abbr class="bc-level-yes only-icon" title="Full support"> <span>Full support</span> </abbr> Yes</td> + <td class="bc-supports-yes bc-browser-edge"><span class="bc-browser-name">Edge</span><abbr class="bc-level-yes only-icon" title="Full support"> <span>Full support</span> </abbr> 12</td> + <td class="bc-supports-yes bc-browser-firefox"><span class="bc-browser-name">Firefox</span><abbr class="bc-level-yes only-icon" title="Full support"> <span>Full support</span> </abbr> Yes</td> + <td class="bc-supports-yes bc-browser-ie"><span class="bc-browser-name">IE</span><abbr class="bc-level-yes only-icon" title="Full support"> <span>Full support</span> </abbr> Yes</td> + <td class="bc-supports-yes bc-browser-opera"><span class="bc-browser-name">Opera</span><abbr class="bc-level-yes only-icon" title="Full support"> <span>Full support</span> </abbr> Yes</td> + <td class="bc-supports-yes bc-browser-safari"><span class="bc-browser-name">Safari</span><abbr class="bc-level-yes only-icon" title="Full support"> <span>Full support</span> </abbr> Yes</td> + <td class="bc-supports-yes bc-browser-webview_android"><span class="bc-browser-name">WebView Android</span><abbr class="bc-level-yes only-icon" title="Full support"> <span>Full support</span> </abbr> Yes</td> + <td class="bc-supports-unknown bc-browser-chrome_android"><span class="bc-browser-name">Chrome Android</span><abbr title="Compatibility unknown; please update this."> ? </abbr></td> + <td class="bc-supports-yes bc-browser-firefox_android"><span class="bc-browser-name">Firefox Android</span><abbr class="bc-level-yes only-icon" title="Full support"> <span>Full support</span> </abbr> Yes</td> + <td class="bc-supports-yes bc-browser-opera_android"><span class="bc-browser-name">Opera Android</span><abbr class="bc-level-yes only-icon" title="Full support"> <span>Full support</span> </abbr> Yes</td> + <td class="bc-supports-yes bc-browser-safari_ios"><span class="bc-browser-name">Safari iOS</span><abbr class="bc-level-yes only-icon" title="Full support"> <span>Full support</span> </abbr> Yes</td> + <td class="bc-supports-unknown bc-browser-samsunginternet_android"><span class="bc-browser-name">Samsung Internet Android</span><abbr title="Compatibility unknown; please update this."> ? </abbr></td> + </tr> + <tr> + <th scope="row"><code>x-moz-errormessage</code> attribute + <div class="bc-icons"><abbr class="only-icon" title="Experimental. Expect behavior to change in the future."><span>Experimental</span></abbr><abbr class="only-icon" title="Deprecated. Not for use in new websites."><span>Deprecated</span></abbr><abbr class="only-icon" title="Non-standard. Expect poor cross-browser support."><span>Non-standard</span></abbr></div> + </th> + <td class="bc-supports-no bc-browser-chrome"><span class="bc-browser-name">Chrome</span><abbr class="bc-level-no only-icon" title="No support"> <span>No support</span> </abbr> No</td> + <td class="bc-supports-no bc-browser-edge"><span class="bc-browser-name">Edge</span><abbr class="bc-level-no only-icon" title="No support"> <span>No support</span> </abbr> No</td> + <td class="bc-supports-no bc-browser-firefox"><span class="bc-browser-name">Firefox</span><abbr class="bc-level-no only-icon" title="No support"> <span>No support</span> </abbr>? — 66</td> + <td class="bc-supports-no bc-browser-ie"><span class="bc-browser-name">IE</span><abbr class="bc-level-no only-icon" title="No support"> <span>No support</span> </abbr> No</td> + <td class="bc-supports-no bc-browser-opera"><span class="bc-browser-name">Opera</span><abbr class="bc-level-no only-icon" title="No support"> <span>No support</span> </abbr> No</td> + <td class="bc-supports-no bc-browser-safari"><span class="bc-browser-name">Safari</span><abbr class="bc-level-no only-icon" title="No support"> <span>No support</span> </abbr> No</td> + <td class="bc-supports-no bc-browser-webview_android"><span class="bc-browser-name">WebView Android</span><abbr class="bc-level-no only-icon" title="No support"> <span>No support</span> </abbr> No</td> + <td class="bc-supports-no bc-browser-chrome_android"><span class="bc-browser-name">Chrome Android</span><abbr class="bc-level-no only-icon" title="No support"> <span>No support</span> </abbr> No</td> + <td class="bc-supports-no bc-browser-firefox_android"><span class="bc-browser-name">Firefox Android</span><abbr class="bc-level-no only-icon" title="No support"> <span>No support</span> </abbr>? — 66</td> + <td class="bc-supports-no bc-browser-opera_android"><span class="bc-browser-name">Opera Android</span><abbr class="bc-level-no only-icon" title="No support"> <span>No support</span> </abbr> No</td> + <td class="bc-supports-no bc-browser-safari_ios"><span class="bc-browser-name">Safari iOS</span><abbr class="bc-level-no only-icon" title="No support"> <span>No support</span> </abbr> No</td> + <td class="bc-supports-no bc-browser-samsunginternet_android"><span class="bc-browser-name">Samsung Internet Android</span><abbr class="bc-level-no only-icon" title="No support"> <span>No support</span> </abbr> No</td> + </tr> + <tr> + <th scope="row"><a href="/en-US/docs/Web/HTML/Element/input/month"><code>type="month"</code></a></th> + <td class="bc-supports-yes bc-browser-chrome"><span class="bc-browser-name">Chrome</span><abbr class="bc-level-yes only-icon" title="Full support"> <span>Full support</span> </abbr> 20</td> + <td class="bc-supports-yes bc-browser-edge"><span class="bc-browser-name">Edge</span><abbr class="bc-level-yes only-icon" title="Full support"> <span>Full support</span> </abbr> 12</td> + <td class="bc-supports-no bc-browser-firefox bc-has-history"><span class="bc-browser-name">Firefox</span><abbr class="bc-level-no only-icon" title="No support"> <span>No support</span> </abbr> No + <div class="bc-icons"><abbr class="only-icon" title="See implementation notes"><span>Notes</span></abbr></div> + + <section class="bc-history" id="sect7"> + <dl> + <dt class="bc-supports-no bc-supports"><abbr class="bc-level-no only-icon" title="No support"><span>No support</span> </abbr> No + + <div class="bc-icons"><abbr class="only-icon" title="See implementation notes"><span>Notes</span></abbr></div> + </dt> + <dd><abbr class="only-icon" title="See implementation notes"><span>Notes</span></abbr> See <a class="external" href="https://bugzil.la/888320" rel="noopener">bug 888320</a>.</dd> + </dl> + </section> + </td> + <td class="bc-supports-no bc-browser-ie"><span class="bc-browser-name">IE</span><abbr class="bc-level-no only-icon" title="No support"> <span>No support</span> </abbr> No</td> + <td class="bc-supports-yes bc-browser-opera"><span class="bc-browser-name">Opera</span><abbr class="bc-level-yes only-icon" title="Full support"> <span>Full support</span> </abbr> 11</td> + <td class="bc-supports-no bc-browser-safari bc-has-history"><span class="bc-browser-name">Safari</span><abbr class="bc-level-no only-icon" title="No support"> <span>No support</span> </abbr> No + <div class="bc-icons"><abbr class="only-icon" title="See implementation notes"><span>Notes</span></abbr></div> + + <section class="bc-history" id="sect8"> + <dl> + <dt class="bc-supports-no bc-supports"><abbr class="bc-level-no only-icon" title="No support"><span>No support</span> </abbr> No + + <div class="bc-icons"><abbr class="only-icon" title="See implementation notes"><span>Notes</span></abbr></div> + </dt> + <dd><abbr class="only-icon" title="See implementation notes"><span>Notes</span></abbr> The input type is recognized, but there is no month-specific control. See <a class="external" href="https://webkit.org/b/200416" rel="noopener">bug 200416</a>.</dd> + </dl> + </section> + </td> + <td class="bc-supports-yes bc-browser-webview_android"><span class="bc-browser-name">WebView Android</span><abbr class="bc-level-yes only-icon" title="Full support"> <span>Full support</span> </abbr> Yes</td> + <td class="bc-supports-yes bc-browser-chrome_android"><span class="bc-browser-name">Chrome Android</span><abbr class="bc-level-yes only-icon" title="Full support"> <span>Full support</span> </abbr> Yes</td> + <td class="bc-supports-no bc-browser-firefox_android"><span class="bc-browser-name">Firefox Android</span><abbr class="bc-level-no only-icon" title="No support"> <span>No support</span> </abbr> No</td> + <td class="bc-supports-yes bc-browser-opera_android"><span class="bc-browser-name">Opera Android</span><abbr class="bc-level-yes only-icon" title="Full support"> <span>Full support</span> </abbr> Yes</td> + <td class="bc-supports-yes bc-browser-safari_ios"><span class="bc-browser-name">Safari iOS</span><abbr class="bc-level-yes only-icon" title="Full support"> <span>Full support</span> </abbr> Yes</td> + <td class="bc-supports-yes bc-browser-samsunginternet_android"><span class="bc-browser-name">Samsung Internet Android</span><abbr class="bc-level-yes only-icon" title="Full support"> <span>Full support</span> </abbr> Yes</td> + </tr> + <tr> + <th scope="row"><a href="/en-US/docs/Web/HTML/Element/input/number"><code>type="number"</code></a></th> + <td class="bc-supports-yes bc-browser-chrome"><span class="bc-browser-name">Chrome</span><abbr class="bc-level-yes only-icon" title="Full support"> <span>Full support</span> </abbr> Yes</td> + <td class="bc-supports-yes bc-browser-edge"><span class="bc-browser-name">Edge</span><abbr class="bc-level-yes only-icon" title="Full support"> <span>Full support</span> </abbr> 12</td> + <td class="bc-supports-yes bc-browser-firefox"><span class="bc-browser-name">Firefox</span><abbr class="bc-level-yes only-icon" title="Full support"> <span>Full support</span> </abbr> Yes</td> + <td class="bc-supports-yes bc-browser-ie"><span class="bc-browser-name">IE</span><abbr class="bc-level-yes only-icon" title="Full support"> <span>Full support</span> </abbr> 10</td> + <td class="bc-supports-yes bc-browser-opera"><span class="bc-browser-name">Opera</span><abbr class="bc-level-yes only-icon" title="Full support"> <span>Full support</span> </abbr> Yes</td> + <td class="bc-supports-yes bc-browser-safari"><span class="bc-browser-name">Safari</span><abbr class="bc-level-yes only-icon" title="Full support"> <span>Full support</span> </abbr> Yes</td> + <td class="bc-supports-yes bc-browser-webview_android"><span class="bc-browser-name">WebView Android</span><abbr class="bc-level-yes only-icon" title="Full support"> <span>Full support</span> </abbr> Yes</td> + <td class="bc-supports-yes bc-browser-chrome_android"><span class="bc-browser-name">Chrome Android</span><abbr class="bc-level-yes only-icon" title="Full support"> <span>Full support</span> </abbr> Yes</td> + <td class="bc-supports-yes bc-browser-firefox_android"><span class="bc-browser-name">Firefox Android</span><abbr class="bc-level-yes only-icon" title="Full support"> <span>Full support</span> </abbr> Yes</td> + <td class="bc-supports-yes bc-browser-opera_android"><span class="bc-browser-name">Opera Android</span><abbr class="bc-level-yes only-icon" title="Full support"> <span>Full support</span> </abbr> Yes</td> + <td class="bc-supports-yes bc-browser-safari_ios"><span class="bc-browser-name">Safari iOS</span><abbr class="bc-level-yes only-icon" title="Full support"> <span>Full support</span> </abbr> Yes</td> + <td class="bc-supports-yes bc-browser-samsunginternet_android"><span class="bc-browser-name">Samsung Internet Android</span><abbr class="bc-level-yes only-icon" title="Full support"> <span>Full support</span> </abbr> Yes</td> + </tr> + <tr> + <th scope="row"><a href="/en-US/docs/Web/HTML/Element/input/password"><code>type="password"</code></a></th> + <td class="bc-supports-yes bc-browser-chrome"><span class="bc-browser-name">Chrome</span><abbr class="bc-level-yes only-icon" title="Full support"> <span>Full support</span> </abbr> 1</td> + <td class="bc-supports-yes bc-browser-edge"><span class="bc-browser-name">Edge</span><abbr class="bc-level-yes only-icon" title="Full support"> <span>Full support</span> </abbr> 12</td> + <td class="bc-supports-yes bc-browser-firefox"><span class="bc-browser-name">Firefox</span><abbr class="bc-level-yes only-icon" title="Full support"> <span>Full support</span> </abbr> 1</td> + <td class="bc-supports-yes bc-browser-ie"><span class="bc-browser-name">IE</span><abbr class="bc-level-yes only-icon" title="Full support"> <span>Full support</span> </abbr> 2</td> + <td class="bc-supports-yes bc-browser-opera"><span class="bc-browser-name">Opera</span><abbr class="bc-level-yes only-icon" title="Full support"> <span>Full support</span> </abbr> 2</td> + <td class="bc-supports-yes bc-browser-safari"><span class="bc-browser-name">Safari</span><abbr class="bc-level-yes only-icon" title="Full support"> <span>Full support</span> </abbr> 1</td> + <td class="bc-supports-unknown bc-browser-webview_android"><span class="bc-browser-name">WebView Android</span><abbr title="Compatibility unknown; please update this."> ? </abbr></td> + <td class="bc-supports-yes bc-browser-chrome_android"><span class="bc-browser-name">Chrome Android</span><abbr class="bc-level-yes only-icon" title="Full support"> <span>Full support</span> </abbr> Yes</td> + <td class="bc-supports-yes bc-browser-firefox_android"><span class="bc-browser-name">Firefox Android</span><abbr class="bc-level-yes only-icon" title="Full support"> <span>Full support</span> </abbr> 4</td> + <td class="bc-supports-yes bc-browser-opera_android"><span class="bc-browser-name">Opera Android</span><abbr class="bc-level-yes only-icon" title="Full support"> <span>Full support</span> </abbr> Yes</td> + <td class="bc-supports-yes bc-browser-safari_ios"><span class="bc-browser-name">Safari iOS</span><abbr class="bc-level-yes only-icon" title="Full support"> <span>Full support</span> </abbr> Yes</td> + <td class="bc-supports-yes bc-browser-samsunginternet_android"><span class="bc-browser-name">Samsung Internet Android</span><abbr class="bc-level-yes only-icon" title="Full support"> <span>Full support</span> </abbr> Yes</td> + </tr> + <tr> + <th scope="row"><a href="/en-US/docs/Web/HTML/Element/input/radio"><code>type="radio"</code></a></th> + <td class="bc-supports-yes bc-browser-chrome"><span class="bc-browser-name">Chrome</span><abbr class="bc-level-yes only-icon" title="Full support"> <span>Full support</span> </abbr> Yes</td> + <td class="bc-supports-yes bc-browser-edge"><span class="bc-browser-name">Edge</span><abbr class="bc-level-yes only-icon" title="Full support"> <span>Full support</span> </abbr> 12</td> + <td class="bc-supports-yes bc-browser-firefox"><span class="bc-browser-name">Firefox</span><abbr class="bc-level-yes only-icon" title="Full support"> <span>Full support</span> </abbr> Yes</td> + <td class="bc-supports-yes bc-browser-ie"><span class="bc-browser-name">IE</span><abbr class="bc-level-yes only-icon" title="Full support"> <span>Full support</span> </abbr> Yes</td> + <td class="bc-supports-yes bc-browser-opera"><span class="bc-browser-name">Opera</span><abbr class="bc-level-yes only-icon" title="Full support"> <span>Full support</span> </abbr> Yes</td> + <td class="bc-supports-yes bc-browser-safari"><span class="bc-browser-name">Safari</span><abbr class="bc-level-yes only-icon" title="Full support"> <span>Full support</span> </abbr> Yes</td> + <td class="bc-supports-yes bc-browser-webview_android"><span class="bc-browser-name">WebView Android</span><abbr class="bc-level-yes only-icon" title="Full support"> <span>Full support</span> </abbr> Yes</td> + <td class="bc-supports-yes bc-browser-chrome_android"><span class="bc-browser-name">Chrome Android</span><abbr class="bc-level-yes only-icon" title="Full support"> <span>Full support</span> </abbr> Yes</td> + <td class="bc-supports-yes bc-browser-firefox_android"><span class="bc-browser-name">Firefox Android</span><abbr class="bc-level-yes only-icon" title="Full support"> <span>Full support</span> </abbr> 4</td> + <td class="bc-supports-yes bc-browser-opera_android"><span class="bc-browser-name">Opera Android</span><abbr class="bc-level-yes only-icon" title="Full support"> <span>Full support</span> </abbr> Yes</td> + <td class="bc-supports-yes bc-browser-safari_ios"><span class="bc-browser-name">Safari iOS</span><abbr class="bc-level-yes only-icon" title="Full support"> <span>Full support</span> </abbr> Yes</td> + <td class="bc-supports-yes bc-browser-samsunginternet_android"><span class="bc-browser-name">Samsung Internet Android</span><abbr class="bc-level-yes only-icon" title="Full support"> <span>Full support</span> </abbr> Yes</td> + </tr> + <tr> + <th scope="row"><a href="/en-US/docs/Web/HTML/Element/input/range"><code>type="range"</code></a></th> + <td class="bc-supports-yes bc-browser-chrome"><span class="bc-browser-name">Chrome</span><abbr class="bc-level-yes only-icon" title="Full support"> <span>Full support</span> </abbr> 4</td> + <td class="bc-supports-yes bc-browser-edge"><span class="bc-browser-name">Edge</span><abbr class="bc-level-yes only-icon" title="Full support"> <span>Full support</span> </abbr> 12</td> + <td class="bc-supports-yes bc-browser-firefox"><span class="bc-browser-name">Firefox</span><abbr class="bc-level-yes only-icon" title="Full support"> <span>Full support</span> </abbr> 23</td> + <td class="bc-supports-yes bc-browser-ie"><span class="bc-browser-name">IE</span><abbr class="bc-level-yes only-icon" title="Full support"> <span>Full support</span> </abbr> 10</td> + <td class="bc-supports-yes bc-browser-opera"><span class="bc-browser-name">Opera</span><abbr class="bc-level-yes only-icon" title="Full support"> <span>Full support</span> </abbr> 11</td> + <td class="bc-supports-yes bc-browser-safari"><span class="bc-browser-name">Safari</span><abbr class="bc-level-yes only-icon" title="Full support"> <span>Full support</span> </abbr> 3.1</td> + <td class="bc-supports-yes bc-browser-webview_android bc-has-history"><span class="bc-browser-name">WebView Android</span><abbr class="bc-level-yes only-icon" title="Full support"> <span>Full support</span> </abbr> 4.4 + <div class="bc-icons"></div> + + <section class="bc-history" id="sect9"> + <dl> + <dt class="bc-supports-yes bc-supports"><abbr class="bc-level-yes only-icon" title="Full support"><span>Full support</span> </abbr> 4.4 + + <div class="bc-icons"></div> + </dt> + <dd></dd> + <dt class="bc-supports-no bc-supports"><abbr class="bc-level-no only-icon" title="No support"><span>No support</span> </abbr>2 — 4.4 + <div class="bc-icons"><abbr class="only-icon" title="See implementation notes"><span>Notes</span></abbr></div> + </dt> + <dd><abbr class="only-icon" title="See implementation notes"><span>Notes</span></abbr> Pre-Chromium Android WebView recognizes the <code>range</code> type, but doesn't implement a range-specific control.</dd> + </dl> + </section> + </td> + <td class="bc-supports-yes bc-browser-chrome_android"><span class="bc-browser-name">Chrome Android</span><abbr class="bc-level-yes only-icon" title="Full support"> <span>Full support</span> </abbr> 57</td> + <td class="bc-supports-yes bc-browser-firefox_android"><span class="bc-browser-name">Firefox Android</span><abbr class="bc-level-yes only-icon" title="Full support"> <span>Full support</span> </abbr> 52</td> + <td class="bc-supports-yes bc-browser-opera_android"><span class="bc-browser-name">Opera Android</span><abbr class="bc-level-yes only-icon" title="Full support"> <span>Full support</span> </abbr> Yes</td> + <td class="bc-supports-yes bc-browser-safari_ios"><span class="bc-browser-name">Safari iOS</span><abbr class="bc-level-yes only-icon" title="Full support"> <span>Full support</span> </abbr> 5.1</td> + <td class="bc-supports-yes bc-browser-samsunginternet_android"><span class="bc-browser-name">Samsung Internet Android</span><abbr class="bc-level-yes only-icon" title="Full support"> <span>Full support</span> </abbr> 7.0</td> + </tr> + <tr> + <th scope="row"><a href="/en-US/docs/Web/HTML/Element/input/reset"><code>type="reset"</code></a></th> + <td class="bc-supports-yes bc-browser-chrome"><span class="bc-browser-name">Chrome</span><abbr class="bc-level-yes only-icon" title="Full support"> <span>Full support</span> </abbr> 1</td> + <td class="bc-supports-yes bc-browser-edge"><span class="bc-browser-name">Edge</span><abbr class="bc-level-yes only-icon" title="Full support"> <span>Full support</span> </abbr> 12</td> + <td class="bc-supports-yes bc-browser-firefox bc-has-history"><span class="bc-browser-name">Firefox</span><abbr class="bc-level-yes only-icon" title="Full support"> <span>Full support</span> </abbr> 1 + <div class="bc-icons"><abbr class="only-icon" title="See implementation notes"><span>Notes</span></abbr></div> + + <section class="bc-history" id="sect10"> + <dl> + <dt class="bc-supports-yes bc-supports"><abbr class="bc-level-yes only-icon" title="Full support"><span>Full support</span> </abbr> 1 + + <div class="bc-icons"><abbr class="only-icon" title="See implementation notes"><span>Notes</span></abbr></div> + </dt> + <dd><abbr class="only-icon" title="See implementation notes"><span>Notes</span></abbr> Unlike other browsers, Firefox by default <a class="external" href="http://stackoverflow.com/questions/5985839/bug-with-firefox-disabled-attribute-of-input-not-resetting-when-refreshing" rel="noopener">persists the dynamic disabled state</a> of a <code><button></code> across page loads. Use the <code><a href="https://developer.mozilla.org/docs/Web/HTML/Element/button#attr-autocomplete">autocomplete</a></code> attribute to control this feature.</dd> + </dl> + </section> + </td> + <td class="bc-supports-yes bc-browser-ie"><span class="bc-browser-name">IE</span><abbr class="bc-level-yes only-icon" title="Full support"> <span>Full support</span> </abbr> Yes</td> + <td class="bc-supports-yes bc-browser-opera"><span class="bc-browser-name">Opera</span><abbr class="bc-level-yes only-icon" title="Full support"> <span>Full support</span> </abbr> Yes</td> + <td class="bc-supports-yes bc-browser-safari"><span class="bc-browser-name">Safari</span><abbr class="bc-level-yes only-icon" title="Full support"> <span>Full support</span> </abbr> 1</td> + <td class="bc-supports-yes bc-browser-webview_android"><span class="bc-browser-name">WebView Android</span><abbr class="bc-level-yes only-icon" title="Full support"> <span>Full support</span> </abbr> Yes</td> + <td class="bc-supports-yes bc-browser-chrome_android"><span class="bc-browser-name">Chrome Android</span><abbr class="bc-level-yes only-icon" title="Full support"> <span>Full support</span> </abbr> Yes</td> + <td class="bc-supports-yes bc-browser-firefox_android bc-has-history"><span class="bc-browser-name">Firefox Android</span><abbr class="bc-level-yes only-icon" title="Full support"> <span>Full support</span> </abbr> 4 + <div class="bc-icons"><abbr class="only-icon" title="See implementation notes"><span>Notes</span></abbr></div> + + <section class="bc-history" id="sect11"> + <dl> + <dt class="bc-supports-yes bc-supports"><abbr class="bc-level-yes only-icon" title="Full support"><span>Full support</span> </abbr> 4 + + <div class="bc-icons"><abbr class="only-icon" title="See implementation notes"><span>Notes</span></abbr></div> + </dt> + <dd><abbr class="only-icon" title="See implementation notes"><span>Notes</span></abbr> Unlike other browsers, Firefox by default <a class="external" href="http://stackoverflow.com/questions/5985839/bug-with-firefox-disabled-attribute-of-input-not-resetting-when-refreshing" rel="noopener">persists the dynamic disabled state</a> of a <code><button></code> across page loads. Use the <code><a href="https://developer.mozilla.org/docs/Web/HTML/Element/button#attr-autocomplete">autocomplete</a></code> attribute to control this feature.</dd> + </dl> + </section> + </td> + <td class="bc-supports-yes bc-browser-opera_android"><span class="bc-browser-name">Opera Android</span><abbr class="bc-level-yes only-icon" title="Full support"> <span>Full support</span> </abbr> Yes</td> + <td class="bc-supports-yes bc-browser-safari_ios"><span class="bc-browser-name">Safari iOS</span><abbr class="bc-level-yes only-icon" title="Full support"> <span>Full support</span> </abbr> Yes</td> + <td class="bc-supports-yes bc-browser-samsunginternet_android"><span class="bc-browser-name">Samsung Internet Android</span><abbr class="bc-level-yes only-icon" title="Full support"> <span>Full support</span> </abbr> Yes</td> + </tr> + <tr> + <th scope="row"><a href="/en-US/docs/Web/HTML/Element/input/search"><code>type="search"</code></a></th> + <td class="bc-supports-yes bc-browser-chrome"><span class="bc-browser-name">Chrome</span><abbr class="bc-level-yes only-icon" title="Full support"> <span>Full support</span> </abbr> 5</td> + <td class="bc-supports-yes bc-browser-edge"><span class="bc-browser-name">Edge</span><abbr class="bc-level-yes only-icon" title="Full support"> <span>Full support</span> </abbr> 12</td> + <td class="bc-supports-yes bc-browser-firefox"><span class="bc-browser-name">Firefox</span><abbr class="bc-level-yes only-icon" title="Full support"> <span>Full support</span> </abbr> 4</td> + <td class="bc-supports-yes bc-browser-ie"><span class="bc-browser-name">IE</span><abbr class="bc-level-yes only-icon" title="Full support"> <span>Full support</span> </abbr> 10</td> + <td class="bc-supports-yes bc-browser-opera"><span class="bc-browser-name">Opera</span><abbr class="bc-level-yes only-icon" title="Full support"> <span>Full support</span> </abbr> 10.6</td> + <td class="bc-supports-yes bc-browser-safari"><span class="bc-browser-name">Safari</span><abbr class="bc-level-yes only-icon" title="Full support"> <span>Full support</span> </abbr> 5</td> + <td class="bc-supports-yes bc-browser-webview_android"><span class="bc-browser-name">WebView Android</span><abbr class="bc-level-yes only-icon" title="Full support"> <span>Full support</span> </abbr> Yes</td> + <td class="bc-supports-yes bc-browser-chrome_android"><span class="bc-browser-name">Chrome Android</span><abbr class="bc-level-yes only-icon" title="Full support"> <span>Full support</span> </abbr> Yes</td> + <td class="bc-supports-yes bc-browser-firefox_android"><span class="bc-browser-name">Firefox Android</span><abbr class="bc-level-yes only-icon" title="Full support"> <span>Full support</span> </abbr> Yes</td> + <td class="bc-supports-yes bc-browser-opera_android"><span class="bc-browser-name">Opera Android</span><abbr class="bc-level-yes only-icon" title="Full support"> <span>Full support</span> </abbr> Yes</td> + <td class="bc-supports-yes bc-browser-safari_ios"><span class="bc-browser-name">Safari iOS</span><abbr class="bc-level-yes only-icon" title="Full support"> <span>Full support</span> </abbr> Yes</td> + <td class="bc-supports-yes bc-browser-samsunginternet_android"><span class="bc-browser-name">Samsung Internet Android</span><abbr class="bc-level-yes only-icon" title="Full support"> <span>Full support</span> </abbr> Yes</td> + </tr> + <tr> + <th scope="row"><a href="/en-US/docs/Web/HTML/Element/input/submit"><code>type="submit"</code></a></th> + <td class="bc-supports-yes bc-browser-chrome"><span class="bc-browser-name">Chrome</span><abbr class="bc-level-yes only-icon" title="Full support"> <span>Full support</span> </abbr> 1</td> + <td class="bc-supports-yes bc-browser-edge"><span class="bc-browser-name">Edge</span><abbr class="bc-level-yes only-icon" title="Full support"> <span>Full support</span> </abbr> 12</td> + <td class="bc-supports-yes bc-browser-firefox bc-has-history"><span class="bc-browser-name">Firefox</span><abbr class="bc-level-yes only-icon" title="Full support"> <span>Full support</span> </abbr> 1 + <div class="bc-icons"><abbr class="only-icon" title="See implementation notes"><span>Notes</span></abbr></div> + + <section class="bc-history" id="sect12"> + <dl> + <dt class="bc-supports-yes bc-supports"><abbr class="bc-level-yes only-icon" title="Full support"><span>Full support</span> </abbr> 1 + + <div class="bc-icons"><abbr class="only-icon" title="See implementation notes"><span>Notes</span></abbr></div> + </dt> + <dd><abbr class="only-icon" title="See implementation notes"><span>Notes</span></abbr> Unlike other browsers, Firefox by default <a class="external" href="http://stackoverflow.com/questions/5985839/bug-with-firefox-disabled-attribute-of-input-not-resetting-when-refreshing" rel="noopener">persists the dynamic disabled state</a> of a <code><button></code> across page loads. Use the <code><a href="https://developer.mozilla.org/docs/Web/HTML/Element/button#attr-autocomplete">autocomplete</a></code> attribute to control this feature.</dd> + </dl> + </section> + </td> + <td class="bc-supports-yes bc-browser-ie"><span class="bc-browser-name">IE</span><abbr class="bc-level-yes only-icon" title="Full support"> <span>Full support</span> </abbr> Yes</td> + <td class="bc-supports-yes bc-browser-opera"><span class="bc-browser-name">Opera</span><abbr class="bc-level-yes only-icon" title="Full support"> <span>Full support</span> </abbr> Yes</td> + <td class="bc-supports-yes bc-browser-safari"><span class="bc-browser-name">Safari</span><abbr class="bc-level-yes only-icon" title="Full support"> <span>Full support</span> </abbr> 1</td> + <td class="bc-supports-yes bc-browser-webview_android"><span class="bc-browser-name">WebView Android</span><abbr class="bc-level-yes only-icon" title="Full support"> <span>Full support</span> </abbr> Yes</td> + <td class="bc-supports-yes bc-browser-chrome_android"><span class="bc-browser-name">Chrome Android</span><abbr class="bc-level-yes only-icon" title="Full support"> <span>Full support</span> </abbr> Yes</td> + <td class="bc-supports-yes bc-browser-firefox_android bc-has-history"><span class="bc-browser-name">Firefox Android</span><abbr class="bc-level-yes only-icon" title="Full support"> <span>Full support</span> </abbr> 4 + <div class="bc-icons"><abbr class="only-icon" title="See implementation notes"><span>Notes</span></abbr></div> + + <section class="bc-history" id="sect13"> + <dl> + <dt class="bc-supports-yes bc-supports"><abbr class="bc-level-yes only-icon" title="Full support"><span>Full support</span> </abbr> 4 + + <div class="bc-icons"><abbr class="only-icon" title="See implementation notes"><span>Notes</span></abbr></div> + </dt> + <dd><abbr class="only-icon" title="See implementation notes"><span>Notes</span></abbr> Unlike other browsers, Firefox by default <a class="external" href="http://stackoverflow.com/questions/5985839/bug-with-firefox-disabled-attribute-of-input-not-resetting-when-refreshing" rel="noopener">persists the dynamic disabled state</a> of a <code><button></code> across page loads. Use the <code><a href="https://developer.mozilla.org/docs/Web/HTML/Element/button#attr-autocomplete">autocomplete</a></code> attribute to control this feature.</dd> + </dl> + </section> + </td> + <td class="bc-supports-yes bc-browser-opera_android"><span class="bc-browser-name">Opera Android</span><abbr class="bc-level-yes only-icon" title="Full support"> <span>Full support</span> </abbr> Yes</td> + <td class="bc-supports-yes bc-browser-safari_ios"><span class="bc-browser-name">Safari iOS</span><abbr class="bc-level-yes only-icon" title="Full support"> <span>Full support</span> </abbr> Yes</td> + <td class="bc-supports-yes bc-browser-samsunginternet_android"><span class="bc-browser-name">Samsung Internet Android</span><abbr class="bc-level-yes only-icon" title="Full support"> <span>Full support</span> </abbr> Yes</td> + </tr> + <tr> + <th scope="row"><a href="/en-US/docs/Web/HTML/Element/input/tel"><code>type="tel"</code></a></th> + <td class="bc-supports-yes bc-browser-chrome"><span class="bc-browser-name">Chrome</span><abbr class="bc-level-yes only-icon" title="Full support"> <span>Full support</span> </abbr> Yes</td> + <td class="bc-supports-yes bc-browser-edge"><span class="bc-browser-name">Edge</span><abbr class="bc-level-yes only-icon" title="Full support"> <span>Full support</span> </abbr> 12</td> + <td class="bc-supports-yes bc-browser-firefox"><span class="bc-browser-name">Firefox</span><abbr class="bc-level-yes only-icon" title="Full support"> <span>Full support</span> </abbr> Yes</td> + <td class="bc-supports-yes bc-browser-ie"><span class="bc-browser-name">IE</span><abbr class="bc-level-yes only-icon" title="Full support"> <span>Full support</span> </abbr> 10</td> + <td class="bc-supports-yes bc-browser-opera"><span class="bc-browser-name">Opera</span><abbr class="bc-level-yes only-icon" title="Full support"> <span>Full support</span> </abbr> 11</td> + <td class="bc-supports-yes bc-browser-safari"><span class="bc-browser-name">Safari</span><abbr class="bc-level-yes only-icon" title="Full support"> <span>Full support</span> </abbr> Yes</td> + <td class="bc-supports-yes bc-browser-webview_android"><span class="bc-browser-name">WebView Android</span><abbr class="bc-level-yes only-icon" title="Full support"> <span>Full support</span> </abbr> Yes</td> + <td class="bc-supports-yes bc-browser-chrome_android"><span class="bc-browser-name">Chrome Android</span><abbr class="bc-level-yes only-icon" title="Full support"> <span>Full support</span> </abbr> Yes</td> + <td class="bc-supports-yes bc-browser-firefox_android"><span class="bc-browser-name">Firefox Android</span><abbr class="bc-level-yes only-icon" title="Full support"> <span>Full support</span> </abbr> Yes</td> + <td class="bc-supports-yes bc-browser-opera_android"><span class="bc-browser-name">Opera Android</span><abbr class="bc-level-yes only-icon" title="Full support"> <span>Full support</span> </abbr> Yes</td> + <td class="bc-supports-yes bc-browser-safari_ios"><span class="bc-browser-name">Safari iOS</span><abbr class="bc-level-yes only-icon" title="Full support"> <span>Full support</span> </abbr> Yes</td> + <td class="bc-supports-yes bc-browser-samsunginternet_android"><span class="bc-browser-name">Samsung Internet Android</span><abbr class="bc-level-yes only-icon" title="Full support"> <span>Full support</span> </abbr> Yes</td> + </tr> + <tr> + <th scope="row"><a href="/en-US/docs/Web/HTML/Element/input/text"><code>type="text"</code></a></th> + <td class="bc-supports-yes bc-browser-chrome"><span class="bc-browser-name">Chrome</span><abbr class="bc-level-yes only-icon" title="Full support"> <span>Full support</span> </abbr> 1</td> + <td class="bc-supports-yes bc-browser-edge"><span class="bc-browser-name">Edge</span><abbr class="bc-level-yes only-icon" title="Full support"> <span>Full support</span> </abbr> 12</td> + <td class="bc-supports-yes bc-browser-firefox"><span class="bc-browser-name">Firefox</span><abbr class="bc-level-yes only-icon" title="Full support"> <span>Full support</span> </abbr> 1</td> + <td class="bc-supports-yes bc-browser-ie"><span class="bc-browser-name">IE</span><abbr class="bc-level-yes only-icon" title="Full support"> <span>Full support</span> </abbr> Yes</td> + <td class="bc-supports-yes bc-browser-opera"><span class="bc-browser-name">Opera</span><abbr class="bc-level-yes only-icon" title="Full support"> <span>Full support</span> </abbr> Yes</td> + <td class="bc-supports-yes bc-browser-safari"><span class="bc-browser-name">Safari</span><abbr class="bc-level-yes only-icon" title="Full support"> <span>Full support</span> </abbr> 1</td> + <td class="bc-supports-yes bc-browser-webview_android"><span class="bc-browser-name">WebView Android</span><abbr class="bc-level-yes only-icon" title="Full support"> <span>Full support</span> </abbr> Yes</td> + <td class="bc-supports-yes bc-browser-chrome_android"><span class="bc-browser-name">Chrome Android</span><abbr class="bc-level-yes only-icon" title="Full support"> <span>Full support</span> </abbr> Yes</td> + <td class="bc-supports-yes bc-browser-firefox_android"><span class="bc-browser-name">Firefox Android</span><abbr class="bc-level-yes only-icon" title="Full support"> <span>Full support</span> </abbr> 4</td> + <td class="bc-supports-yes bc-browser-opera_android"><span class="bc-browser-name">Opera Android</span><abbr class="bc-level-yes only-icon" title="Full support"> <span>Full support</span> </abbr> Yes</td> + <td class="bc-supports-yes bc-browser-safari_ios"><span class="bc-browser-name">Safari iOS</span><abbr class="bc-level-yes only-icon" title="Full support"> <span>Full support</span> </abbr> Yes</td> + <td class="bc-supports-yes bc-browser-samsunginternet_android"><span class="bc-browser-name">Samsung Internet Android</span><abbr class="bc-level-yes only-icon" title="Full support"> <span>Full support</span> </abbr> Yes</td> + </tr> + <tr> + <th scope="row"><a href="/en-US/docs/Web/HTML/Element/input/time"><code>type="time"</code></a></th> + <td class="bc-supports-yes bc-browser-chrome"><span class="bc-browser-name">Chrome</span><abbr class="bc-level-yes only-icon" title="Full support"> <span>Full support</span> </abbr> 20</td> + <td class="bc-supports-yes bc-browser-edge"><span class="bc-browser-name">Edge</span><abbr class="bc-level-yes only-icon" title="Full support"> <span>Full support</span> </abbr> 12</td> + <td class="bc-supports-yes bc-browser-firefox"><span class="bc-browser-name">Firefox</span><abbr class="bc-level-yes only-icon" title="Full support"> <span>Full support</span> </abbr> 57</td> + <td class="bc-supports-no bc-browser-ie"><span class="bc-browser-name">IE</span><abbr class="bc-level-no only-icon" title="No support"> <span>No support</span> </abbr> No</td> + <td class="bc-supports-yes bc-browser-opera"><span class="bc-browser-name">Opera</span><abbr class="bc-level-yes only-icon" title="Full support"> <span>Full support</span> </abbr> 10</td> + <td class="bc-supports-no bc-browser-safari bc-has-history"><span class="bc-browser-name">Safari</span><abbr class="bc-level-no only-icon" title="No support"> <span>No support</span> </abbr> No + <div class="bc-icons"><abbr class="only-icon" title="See implementation notes"><span>Notes</span></abbr></div> + + <section class="bc-history" id="sect14"> + <dl> + <dt class="bc-supports-no bc-supports"><abbr class="bc-level-no only-icon" title="No support"><span>No support</span> </abbr> No + + <div class="bc-icons"><abbr class="only-icon" title="See implementation notes"><span>Notes</span></abbr></div> + </dt> + <dd><abbr class="only-icon" title="See implementation notes"><span>Notes</span></abbr> See <a class="external" href="https://webkit.org/b/200416" rel="noopener">bug 200416</a>.</dd> + </dl> + </section> + </td> + <td class="bc-supports-yes bc-browser-webview_android"><span class="bc-browser-name">WebView Android</span><abbr class="bc-level-yes only-icon" title="Full support"> <span>Full support</span> </abbr> Yes</td> + <td class="bc-supports-yes bc-browser-chrome_android"><span class="bc-browser-name">Chrome Android</span><abbr class="bc-level-yes only-icon" title="Full support"> <span>Full support</span> </abbr> 25</td> + <td class="bc-supports-yes bc-browser-firefox_android"><span class="bc-browser-name">Firefox Android</span><abbr class="bc-level-yes only-icon" title="Full support"> <span>Full support</span> </abbr> 57</td> + <td class="bc-supports-yes bc-browser-opera_android"><span class="bc-browser-name">Opera Android</span><abbr class="bc-level-yes only-icon" title="Full support"> <span>Full support</span> </abbr> Yes</td> + <td class="bc-supports-yes bc-browser-safari_ios"><span class="bc-browser-name">Safari iOS</span><abbr class="bc-level-yes only-icon" title="Full support"> <span>Full support</span> </abbr> Yes</td> + <td class="bc-supports-yes bc-browser-samsunginternet_android"><span class="bc-browser-name">Samsung Internet Android</span><abbr class="bc-level-yes only-icon" title="Full support"> <span>Full support</span> </abbr> 1.5</td> + </tr> + <tr> + <th scope="row"><a href="/en-US/docs/Web/HTML/Element/input/url"><code>type="url"</code></a></th> + <td class="bc-supports-yes bc-browser-chrome"><span class="bc-browser-name">Chrome</span><abbr class="bc-level-yes only-icon" title="Full support"> <span>Full support</span> </abbr> 1</td> + <td class="bc-supports-yes bc-browser-edge"><span class="bc-browser-name">Edge</span><abbr class="bc-level-yes only-icon" title="Full support"> <span>Full support</span> </abbr> 12</td> + <td class="bc-supports-yes bc-browser-firefox"><span class="bc-browser-name">Firefox</span><abbr class="bc-level-yes only-icon" title="Full support"> <span>Full support</span> </abbr> Yes</td> + <td class="bc-supports-yes bc-browser-ie"><span class="bc-browser-name">IE</span><abbr class="bc-level-yes only-icon" title="Full support"> <span>Full support</span> </abbr> 10</td> + <td class="bc-supports-yes bc-browser-opera"><span class="bc-browser-name">Opera</span><abbr class="bc-level-yes only-icon" title="Full support"> <span>Full support</span> </abbr> 11</td> + <td class="bc-supports-yes bc-browser-safari"><span class="bc-browser-name">Safari</span><abbr class="bc-level-yes only-icon" title="Full support"> <span>Full support</span> </abbr> Yes</td> + <td class="bc-supports-yes bc-browser-webview_android"><span class="bc-browser-name">WebView Android</span><abbr class="bc-level-yes only-icon" title="Full support"> <span>Full support</span> </abbr> Yes</td> + <td class="bc-supports-yes bc-browser-chrome_android"><span class="bc-browser-name">Chrome Android</span><abbr class="bc-level-yes only-icon" title="Full support"> <span>Full support</span> </abbr> Yes</td> + <td class="bc-supports-yes bc-browser-firefox_android"><span class="bc-browser-name">Firefox Android</span><abbr class="bc-level-yes only-icon" title="Full support"> <span>Full support</span> </abbr> Yes</td> + <td class="bc-supports-yes bc-browser-opera_android"><span class="bc-browser-name">Opera Android</span><abbr class="bc-level-yes only-icon" title="Full support"> <span>Full support</span> </abbr> Yes</td> + <td class="bc-supports-yes bc-browser-safari_ios"><span class="bc-browser-name">Safari iOS</span><abbr class="bc-level-yes only-icon" title="Full support"> <span>Full support</span> </abbr> Yes</td> + <td class="bc-supports-yes bc-browser-samsunginternet_android"><span class="bc-browser-name">Samsung Internet Android</span><abbr class="bc-level-yes only-icon" title="Full support"> <span>Full support</span> </abbr> Yes</td> + </tr> + <tr> + <th scope="row"><a href="/en-US/docs/Web/HTML/Element/input/week"><code>type="week"</code></a></th> + <td class="bc-supports-yes bc-browser-chrome"><span class="bc-browser-name">Chrome</span><abbr class="bc-level-yes only-icon" title="Full support"> <span>Full support</span> </abbr> 20</td> + <td class="bc-supports-yes bc-browser-edge"><span class="bc-browser-name">Edge</span><abbr class="bc-level-yes only-icon" title="Full support"> <span>Full support</span> </abbr> 12</td> + <td class="bc-supports-no bc-browser-firefox bc-has-history"><span class="bc-browser-name">Firefox</span><abbr class="bc-level-no only-icon" title="No support"> <span>No support</span> </abbr> No + <div class="bc-icons"><abbr class="only-icon" title="See implementation notes"><span>Notes</span></abbr></div> + + <section class="bc-history" id="sect15"> + <dl> + <dt class="bc-supports-no bc-supports"><abbr class="bc-level-no only-icon" title="No support"><span>No support</span> </abbr> No + + <div class="bc-icons"><abbr class="only-icon" title="See implementation notes"><span>Notes</span></abbr></div> + </dt> + <dd><abbr class="only-icon" title="See implementation notes"><span>Notes</span></abbr> See <a class="external" href="https://bugzil.la/888320" rel="noopener">bug 888320</a>.</dd> + </dl> + </section> + </td> + <td class="bc-supports-no bc-browser-ie"><span class="bc-browser-name">IE</span><abbr class="bc-level-no only-icon" title="No support"> <span>No support</span> </abbr> No</td> + <td class="bc-supports-yes bc-browser-opera"><span class="bc-browser-name">Opera</span><abbr class="bc-level-yes only-icon" title="Full support"> <span>Full support</span> </abbr> 11</td> + <td class="bc-supports-no bc-browser-safari bc-has-history"><span class="bc-browser-name">Safari</span><abbr class="bc-level-no only-icon" title="No support"> <span>No support</span> </abbr> No + <div class="bc-icons"><abbr class="only-icon" title="See implementation notes"><span>Notes</span></abbr></div> + + <section class="bc-history" id="sect16"> + <dl> + <dt class="bc-supports-no bc-supports"><abbr class="bc-level-no only-icon" title="No support"><span>No support</span> </abbr> No + + <div class="bc-icons"><abbr class="only-icon" title="See implementation notes"><span>Notes</span></abbr></div> + </dt> + <dd><abbr class="only-icon" title="See implementation notes"><span>Notes</span></abbr> See <a class="external" href="https://webkit.org/b/200416" rel="noopener">bug 200416</a>.</dd> + </dl> + </section> + </td> + <td class="bc-supports-yes bc-browser-webview_android"><span class="bc-browser-name">WebView Android</span><abbr class="bc-level-yes only-icon" title="Full support"> <span>Full support</span> </abbr> Yes</td> + <td class="bc-supports-yes bc-browser-chrome_android"><span class="bc-browser-name">Chrome Android</span><abbr class="bc-level-yes only-icon" title="Full support"> <span>Full support</span> </abbr> Yes</td> + <td class="bc-supports-yes bc-browser-firefox_android"><span class="bc-browser-name">Firefox Android</span><abbr class="bc-level-yes only-icon" title="Full support"> <span>Full support</span> </abbr> Yes</td> + <td class="bc-supports-yes bc-browser-opera_android"><span class="bc-browser-name">Opera Android</span><abbr class="bc-level-yes only-icon" title="Full support"> <span>Full support</span> </abbr> Yes</td> + <td class="bc-supports-yes bc-browser-safari_ios"><span class="bc-browser-name">Safari iOS</span><abbr class="bc-level-yes only-icon" title="Full support"> <span>Full support</span> </abbr> Yes</td> + <td class="bc-supports-yes bc-browser-samsunginternet_android"><span class="bc-browser-name">Samsung Internet Android</span><abbr class="bc-level-yes only-icon" title="Full support"> <span>Full support</span> </abbr> Yes</td> + </tr> + </tbody> +</table> + +<section class="bc-legend" id="sect17"> +<h3 class="offscreen" id="Legend">Legend</h3> + +<dl> + <dt><span class="bc-supports bc-supports-yes"><abbr class="bc-level bc-level-yes only-icon" title="Full support"><span>Full support</span> </abbr></span></dt> + <dd>Full support</dd> + <dt><span class="bc-supports bc-supports-no"><abbr class="bc-level bc-level-no only-icon" title="No support"><span>No support</span> </abbr></span></dt> + <dd>No support</dd> + <dt><span class="bc-supports bc-supports-unknown"><abbr class="bc-level bc-level-unknown only-icon" title="Compatibility unknown"><span>Compatibility unknown</span> </abbr></span></dt> + <dd>Compatibility unknown</dd> + <dt><abbr class="only-icon" title="Experimental. Expect behavior to change in the future."><span>Experimental. Expect behavior to change in the future.</span></abbr></dt> + <dd>Experimental. Expect behavior to change in the future.</dd> + <dt><abbr class="only-icon" title="Non-standard. Expect poor cross-browser support."><span>Non-standard. Expect poor cross-browser support.</span></abbr></dt> + <dd>Non-standard. Expect poor cross-browser support.</dd> + <dt><abbr class="only-icon" title="Deprecated. Not for use in new websites."><span>Deprecated. Not for use in new websites.</span></abbr></dt> + <dd>Deprecated. Not for use in new websites.</dd> + <dt><abbr class="only-icon" title="See implementation notes."><span>See implementation notes.</span></abbr></dt> + <dd>See implementation notes.</dd> +</dl> +</section> +</div> +</div> + +<h2 id="参见">参见</h2> + +<ul> + <li>Other form-related elements: {{HTMLElement("form")}}, {{HTMLElement("button")}}, {{HTMLElement("datalist")}}, {{HTMLElement("legend")}}, {{HTMLElement("label")}}, {{HTMLElement("select")}}, {{HTMLElement("optgroup")}}, {{HTMLElement("option")}}, {{HTMLElement("textarea")}}, {{HTMLElement("keygen")}}, {{HTMLElement("fieldset")}}, {{HTMLElement("output")}}, {{HTMLElement("progress")}} and {{HTMLElement("meter")}}.</li> + <li><a href="http://webdesignerwall.com/tutorials/cross-browser-html5-placeholder-text">Cross-browser HTML5 placeholder text</a></li> + <li>The CSS {{cssxref("caret-color")}} property</li> + <li>In certain cases (typically involving non-textual inputs and specialized interfaces), the <code><input></code> element is a <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Replaced_element">replaced element</a>. When it is, the position and size of the elemnt's size and positioning within its frame can be adjusted using the CSS {{cssxref("object-position")}} and {{cssxref("object-fit")}} properties</li> +</ul> diff --git a/files/zh-cn/web/html/element/input/number/index.html b/files/zh-cn/web/html/element/input/number/index.html new file mode 100644 index 0000000000..ef7aec6323 --- /dev/null +++ b/files/zh-cn/web/html/element/input/number/index.html @@ -0,0 +1,415 @@ +--- +title: <input type="number"> +slug: Web/HTML/Element/Input/number +tags: + - Element + - Forms + - HTML + - HTML forms + - Input + - Number + - 参考 +translation_of: Web/HTML/Element/input/number +--- +<div>{{HTMLRef}}</div> + +<p><code><strong>"number"</strong></code>类型的 {{HTMLElement("input")}} 元素用于让用户输入一个数字。其包括内置验证以拒绝非数字输入。浏览器可能会选择提供步进箭头，让用户可以使用鼠标增加和减少输入的值，或者只需用指尖敲击即可。</p> + +<div class="note"> +<p><strong>注意：</strong>不支持 <code>"number"</code> 类型的浏览器会改用标准的 <code><a href="/en-US/docs/Web/HTML/Element/input/text">"text"</a></code> 输入框。</p> +</div> + +<div id="Basic_example"> +<pre class="brush: html"><input id="number" type="number"> +</pre> + +<p>{{ EmbedLiveSample('Basic_example', 600, 40) }}</p> +</div> + +<table class="properties"> + <tbody> + <tr> + <td><strong>{{anch("Value")}}</strong></td> + <td>表示一个数字的 {{jsxref("Number")}} ，或 空</td> + </tr> + <tr> + <td><strong>事件</strong></td> + <td>{{event("change")}} 和 {{event("input")}}</td> + </tr> + <tr> + <td><strong>支持的公共属性</strong></td> + <td>{{htmlattrxref("autocomplete", "input")}}, {{htmlattrxref("list", "input")}}, {{htmlattrxref("placeholder", "input")}}, {{htmlattrxref("readonly", "input")}}</td> + </tr> + <tr> + <td><strong>IDL 属性</strong></td> + <td><code>list</code>, <code>value</code>, <code>valueAsNumber</code></td> + </tr> + <tr> + <td><strong>方法</strong></td> + <td>{{domxref("HTMLInputElement.select", "select()")}}, {{domxref("HTMLInputElement.stepUp", "stepUp()")}}, {{domxref("HTMLInputElement.stepDown", "stepDown()")}}</td> + </tr> + </tbody> +</table> + +<h2 id="值">值</h2> + +<p>填写到输入框中的数值文字的{{jsxref("Number")}}表示。你可以通过把一个数字放在{{htmlattrxref("value", "input")}} 属性中来设置输入框的默认值，如下:</p> + +<pre class="brush: html"><input id="number" type="number" value="42"></pre> + +<p>{{ EmbedLiveSample('值', 600, 40) }}</p> + +<h2 id="使用_number_输入框">使用 number 输入框</h2> + +<p><code><input type ="number"></code>元素可以帮助您在构建用户界面和将数字输入到表单中的逻辑时简化你的工作。 当你使用正确的 type 值 <code>"number"</code> 创建数字输入时，会自动验证你输入的文本是否为数字，通常是一组向上和向下按钮。</p> + +<div class="note"> +<p><strong>注意：</strong>记住用户可以在幕后修改HTML是至关重要的，因此您的网站不得使用简单的客户端验证来实现任何安全目的。 您必须在服务器端验证所提供的值可能具有任何安全含义的任何事务。</p> +</div> + +<p>此外，移动浏览器通过在用户尝试输入值时显示更适合输入数字的特殊键盘，进一步帮助用户体验。 以下屏幕截图来自Firefox for Android：</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/14963/number-keyboard-fxa.png" style="border-style: solid; border-width: 1px; display: block; margin: 0px auto;"></p> + +<h3 id="一个简单的_number_输入框">一个简单的 number 输入框</h3> + +<p>在最基本的形式中，数字输入可以像这样实现：</p> + +<pre class="brush: html"><label for="ticketNum">Number of tickets you would like to buy:</label> +<input id="ticketNum" type="number" name="ticketNum" value="0"></pre> + +<p>{{ EmbedLiveSample('一个简单的_number_输入框', 600, 40) }}</p> + +<p>数字输入在为空的时候以及输入单个数字时被认为是有效的，但是否则是无效的。 如果使用{{htmlattrxref("required","input")}}属性，则输入在空时不再被视为有效。</p> + +<div class="note"> +<p><strong>注：</strong>任何数字都是可接受的值，只要它是<a href="https://html.spec.whatwg.org/multipage/infrastructure.html#valid-floating-point-number">有效的浮点数</a>（即不是 <a href="/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/NaN">NaN</a> 或 <a href="/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Infinity">Infinity</a>）。</p> +</div> + +<h3 id="占位符">占位符</h3> + +<p>有时，提供一个如何输入表单数据的上下文提示是非常友好的。尤其当页面所有{{HTMLElement("input")}} 元素都没有说明标签时，会非常重要。这就是使用<strong>占位符</strong>的原因。占位符是一个通常用于说明一个输入框的 <code>value</code> 应该如何输入的提示值，当元素的 <code>value</code> 为 <code>""</code> 时，该提示将出现在编辑框里面。 一旦有数据输入到编辑框中，占位符就会消失；如果该框被清空，占位符将重新出现。</p> + +<p>这里，我们有一个占位符为"Multiple of 10"的<code>"number"</code> 输入框。请注意当你在编辑字段内容时占位符是如何消失的又是如何重现的。</p> + +<pre class="brush: html"><input type="number" placeholder="Multiple of 10"></pre> + +<p>{{ EmbedLiveSample('占位符', 600, 40) }}</p> + +<h3 id="控制步进大小">控制步进大小</h3> + +<p>默认情况下，向上和向下按钮可以将值增加或减小1。您可以通过使用{{htmlattrxref("step","input")}} 属性来更改此步长值。 我们上面的例子中的占位符提示我们其值是10的倍数，所以设置 <code>step</code> 的值为10是合理的：</p> + +<pre class="brush: html"><input type="number" placeholder="multiple of 10" step="10"></pre> + +<p>{{ EmbedLiveSample('控制步进大小', 600, 40) }}</p> + +<p>在这个例子中，你会发现上下箭头每次会将其值增加和减少10，而不是1。你仍然可以手动输入一个不是10的倍数的数字，但它会被认为是无效的。</p> + +<h3 id="指定最小和最大值">指定最小和最大值</h3> + +<p>可以使用{{htmlattrxref("min","input")}} 和{{htmlattrxref("max","input")}} 属性指定该字段可以具有的最小值和最大值。 例如，给例子指定最小值为0，最大值为100：</p> + +<pre class="brush: html"><input type="number" placeholder="multiple of 10" step="10" min="0" max="100"></pre> + +<p>{{ EmbedLiveSample('指定最小和最大值', 600, 40) }}</p> + +<p>修改过后，你会发现点击上下按钮不会让你低于0或高于100 . 可以在这些界限之外手动输入数字，但它将被视为无效。</p> + +<h3 id="允许小数值">允许小数值</h3> + +<p>数字输入的一个问题是，步长默认为1——如果你尝试输入带小数的数字，例如"1.0"，则它将被视为无效。 如果要输入一个需要小数的值，则需要修改 <code>step</code> 值（例如，<code>step="0.01"</code> 以允许2位小数）。 这里有一个简单的例子：</p> + +<pre class="brush: html"><input type="number" placeholder="1.0" step="0.01" min="0" max="10"></pre> + +<p>{{EmbedLiveSample("允许小数值", 600, 40)}}</p> + +<p>你可以看到这个例子允许0.0到10.0之间的任何值，小数点为2位。本例中，"9.52" 是有效的，但" 9.521" 无效。</p> + +<h3 id="控制输入框大小">控制输入框大小</h3> + +<p>类型为<code>"number"</code> 的 {{HTMLElement("input")}} 元素不支持像 {{htmlattrxref("size", "input")}} 之类的调整大小属性。你必须通过借助 <a href="/en-US/docs/Web/CSS">CSS</a> 来改变它们的尺寸大小。</p> + +<p>例如，要调整输入框的宽度为仅可输入3位数字的宽度，我们可以在HTML中添加 一个ID并缩短很长的占位符文本，如下：</p> + +<pre class="brush: html"><input type="number" placeholder="x10" step="10" min="0" max="100" id="number"></pre> + +<p>然后我们添加一些 CSS 来缩小 id 为 <code>"number"</code> 的元素的宽度:</p> + +<pre class="brush: css">#number { + width: 3em; +}</pre> + +<p>效果如下：</p> + +<p>{{ EmbedLiveSample('控制输入框大小', 600, 40) }}</p> + +<h3 id="提供建议值">提供建议值</h3> + +<p>You can provide a list of default options from which the user can select by specifying the {{htmlattrxref("list", "input")}} attribute, which contains as its value the ID of a {{HTMLElement("datalist")}}, which in turn contains one {{HTMLElement("option")}} element per suggested value; each <code>option</code>'s <code>value</code> is the corresponding suggested value for the number entry box.</p> + +<pre class="brush: html"><input id="ticketNum" type="number" name="ticketNum" list="defaultNumbers"> +<span class="validity"></span> + +<datalist id="defaultNumbers"> + <option value="10045678"> + <option value="103421"> + <option value="11111111"> + <option value="12345678"> + <option value="12999922"> +</datalist></pre> + +<p>{{EmbedLiveSample("提供建议值", 600, 40)}}</p> + +<div class="note"> +<p>并非所有浏览器都支持<code>"number"</code> 输入框的 {{htmlattrxref("list", "input")}} 属性。它在 Chrome 和 Opera 中有效，但在 Firefox 中无效。</p> +</div> + +<h2 id="验证">验证</h2> + +<p>We have alread mentioned a number of validation features of number inputs, but let's review them now:</p> + +<ul> + <li><code><input type="number"></code> elements automatically invalidate any entry that isn't a number (or empty, unless <code>required</code> is specified).</li> + <li>You can use the {{htmlattrxref("required", "input")}} attribute to make an empty entry invalid, i.e. the input has to be filled in.</li> + <li>You can use the {{htmlattrxref("step", "input")}} attribute to constrain valid values to a certain set of steps (e.g. multiples of 10).</li> + <li>You can use the {{htmlattrxref("min", "input")}} and {{htmlattrxref("max", "input")}} attributes to constrain valid values to lower and upper bounds.</li> +</ul> + +<p>The following example exhibits all of the above features, as well as using some CSS to display valid and invalid icons when the input value is valid/invalid:</p> + +<pre class="brush: html"><form> + <div> + <label for="balloons">Number of balloons to order (multiples of 10):</label> + <input id="balloons" type="number" name="balloons" step="10" min="0" max="100" required> + <span class="validity"></span> + </div> + <div> + <input type="submit"> + </div> +</form></pre> + +<p>{{EmbedLiveSample("验证", 600, 80)}}</p> + +<p>Try submitting the form with different invalid values entered — e.g. no value, a value below 0 or above 100, a value that is not a multiple of 10, or a non-numerical value — and see how the error messages the browser gives you differ with different ones.</p> + +<p>The CSS applied to this example is as follows:</p> + +<pre class="brush: css">div { + margin-bottom: 10px; +} + +input:invalid+span:after { + content: '✖'; + padding-left: 5px; +} + +input:valid+span:after { + content: '✓'; + padding-left: 5px; +}</pre> + +<p>Here we use the {{cssxref(":invalid")}} and {{cssxref(":valid")}} pseudo classes to display an appropriate invalid or valid icon as generated content on the adjacent {{htmlelement("span")}} element, indicating if the current value is valid. We put it on a separate <code><span></code> element for added flexibility; some browsers don't display generated content very effectively on some types of form inputs (read for example the section on <a href="/en-US/docs/Web/HTML/Element/input/date#Validation"><code><input type="date"></code> validation</a>).</p> + +<div class="warning"> +<p><strong>Important</strong>: HTML form validation is <em>not</em> a substitute for server-side scripts that ensure that the entered data is in the proper format. It's far too easy for someone to make adjustments to the HTML that allow them to bypass the validation, or to remove it entirely. It's also possible for someone to bypass your HTML and submit the data directly to your server. If your server-side code fails to validate the data it receives, disaster could strike when improperly-formatted data is submitted (or data which is too large, is of the wrong type, and so forth).</p> +</div> + +<h3 id="验证模式">验证模式</h3> + +<p><code><input type="number"></code> elements do not support use of the {{htmlattrxref("pattern", "input")}} attribute for making entered values conform to a specific regex pattern. The rationale for this is that number inputs can't contain anything except numbers, and you can constrain the minimum and maximum number of valid digits using the {{htmlattrxref("min", "input")}} and {{htmlattrxref("max", "input")}} attributes, as explained above.</p> + +<h2 id="示例">示例</h2> + +<p>We've already covered the fact that by default, the increment is 1, and you can use the {{htmlattrxref("step", "input")}} attribute to allow decimal inputs. Let's take a closer look. In the following example we've set up a form for entering the user's height; it defaults to accepting a height in meters, but you can click the relevant button to change the form to accept feet and inches instead. The input for the height in meters accepts decimals to two places.</p> + +<p>{{EmbedLiveSample("示例", 600, 100)}}</p> + +<p>The HTML looks like this:</p> + +<pre class="brush: html"><form> + <div class="metersInputGroup"> + <label for="meters">Enter your height — meters:</label> + <input id="meters" type="number" name="meters" step="0.01" min="0" placeholder="e.g. 1.78" required> + <span class="validity"></span> + </div> + <div class="feetInputGroup" style="display: none;"> + <span>Enter your height — </span> + <label for="feet">feet:</label> + <input id="feet" type="number" name="feet" min="0" step="1"> + <span class="validity"></span> + <label for="inches">inches:</label> + <input id="inches" type="number" name="inches" min="0" max="11" step="1"> + <span class="validity"></span> + </div> + <div> + <input type="button" class="meters" value="Enter height in feet and inches"> + </div> + <div> + <input type="submit" value="Submit form"> + </div> +</form></pre> + +<p>You'll see that we are using many of the attributes we've already looked at in the article earlier on. Since we want to accept a meter value in centimeters, we've set the <code>step</code> value to <code>0.01</code>, so that values like 1.78 are not seen as invalid. We've also provided a placeholder for that input.</p> + +<p>We've hidden the feet and inches inputs initially using <code>style="display: none;"</code> so that meters is the default entry type.</p> + +<p>Now on to the CSS — this looks very similar to the validation styling we saw before; nothing remarkable here:</p> + +<pre class="brush: css">div { + margin-bottom: 10px; + position: relative; +} + +input[type="number"] { + width: 100px; +} + +input + span { + padding-right: 30px; +} + +input:invalid+span:after { + position: absolute; + content: '✖'; + padding-left: 5px; +} + +input:valid+span:after { + position: absolute; + content: '✓'; + padding-left: 5px; +}</pre> + +<p>And finally, the JavaScript:</p> + +<pre class="brush: js">var metersInputGroup = document.querySelector('.metersInputGroup'); +var feetInputGroup = document.querySelector('.feetInputGroup'); +var metersInput = document.querySelector('#meters'); +var feetInput = document.querySelector('#feet'); +var inchesInput = document.querySelector('#inches'); +var switchBtn = document.querySelector('input[type="button"]'); + +switchBtn.addEventListener('click', function() { + if(switchBtn.getAttribute('class') === 'meters') { + switchBtn.setAttribute('class', 'feet'); + switchBtn.value = 'Enter height in meters'; + + metersInputGroup.style.display = 'none'; + feetInputGroup.style.display = 'block'; + + feetInput.setAttribute('required', ''); + inchesInput.setAttribute('required', ''); + metersInput.removeAttribute('required'); + + metersInput.value = ''; + } else { + switchBtn.setAttribute('class', 'meters'); + switchBtn.value = 'Enter height in feet and inches'; + + metersInputGroup.style.display = 'block'; + feetInputGroup.style.display = 'none'; + + feetInput.removeAttribute('required'); + inchesInput.removeAttribute('required'); + metersInput.setAttribute('required', ''); + + feetInput.value = ''; + inchesInput.value = ''; + } +});</pre> + +<p>After declaring a few variables, we add an event listener to the button to control the switching mechanism. This is pretty simple, mostly involving changing over the button class and label, and updating the display values of the two sets of inputs when the button is pressed. Note that we're not converting back and forth between meters and feet/inches here, which a real-life web application would probably do.</p> + +<div class="note"> +<p>Note that when the user clicks the button, we remove the <code>required</code> attribute(s) from the input(s) we are hiding, and empty the <code>value</code> attribute(s). This is so that we can submit the form if both input sets aren't filled in, and won't submit data that we didn't mean to submit. If we didn't do this, you'd have to fill in both feet/inches <strong>and</strong> meters to submit the form!</p> +</div> + +<h2 id="规范">规范</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'forms.html#number-state-(type=number)', '<input type="number">')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>Initial definition</td> + </tr> + <tr> + <td>{{SpecName('HTML5.1', 'sec-forms.html#number-state-typenumber', '<input type="number">')}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>10</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Edge</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>iOS WebKit<br> + <sup><sub>(Safari/Chrome/Firefox/etc.)</sub></sup></th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="相关链接">相关链接</h2> + +<ul> + <li><a href="/en-US/docs/Learn/HTML/Forms">HTML forms guide</a></li> + <li>{{HTMLElement("input")}}</li> + <li><code><a href="/en-US/docs/Web/HTML/Element/input/tel"><input type="tel"></a></code></li> +</ul> diff --git a/files/zh-cn/web/html/element/input/password/index.html b/files/zh-cn/web/html/element/input/password/index.html new file mode 100644 index 0000000000..25cdda81c0 --- /dev/null +++ b/files/zh-cn/web/html/element/input/password/index.html @@ -0,0 +1,232 @@ +--- +title: <input type="password"> +slug: Web/HTML/Element/Input/password +translation_of: Web/HTML/Element/input/password +--- +<div>{{HTMLRef}}</div> + +<p><span class="seoSummary"><code><input></code> 元素 里有一种叫做 <strong><code>"password"</code></strong> 的值，给我们一个方法让用户更加安全的输入密码。</span>这个元素是作为一行纯文本编辑器控件呈现的，其中文本被遮蔽以致于无法读取，通常通过用诸如星号（“*”）或点（“•”）等符号替换每个字符来实现。）这个符号会根据用户的浏览器和操作系统来具体显示哪个。</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/input-password.html", "tabbed-standard")}}</div> + + + +<p>入门过程的具体细节可能因浏览器而异; 例如，移动设备经常在隐藏它之前显示键入的字符一段时间，以允许用户确定他们按下了他们意图按下的键; 考虑到按键的小尺寸以及可以轻松按下错误的按键（特别是在虚拟键盘上），这是有帮助的。</p> + + + +<div class="note"> +<p>任何涉及密码等敏感信息的表格（例如登录表格）都应通过HTTPS提供; 许多浏览器现在都实现了警告不安全登录表单的机制; 请参阅<a href="https://developer.mozilla.org/en-US/docs/Web/Security/Insecure_passwords">Insecure passwords</a>。</p> +</div> + +<table class="properties"> + <tbody> + <tr> + <td><strong>{{anch("Value")}}</strong></td> + <td>A {{domxref("DOMString")}} representing a password, or empty</td> + </tr> + <tr> + <td><strong>事件</strong></td> + <td>{{event("change")}} and {{event("input")}}</td> + </tr> + <tr> + <td><strong>Supported Common Attributes</strong></td> + <td>{{htmlattrxref("autocomplete", "input")}}, {{htmlattrxref("inputmode", "input")}}, {{htmlattrxref("maxlength", "input")}}, {{htmlattrxref("minlength", "input")}}, {{htmlattrxref("pattern", "input")}}, {{htmlattrxref("placeholder", "input")}}, {{htmlattrxref("readonly", "input")}}, {{htmlattrxref("required", "input")}}, and {{htmlattrxref("size", "input")}}</td> + </tr> + <tr> + <td><strong>IDL attributes</strong></td> + <td><code>selectionStart</code>, <code>selectionEnd</code>, <code>selectionDirection</code>, and <code>value</code></td> + </tr> + <tr> + <td><strong>Methods</strong></td> + <td>{{domxref("HTMLInputElement.select", "select()")}}, {{domxref("HTMLInputElement.setRangeText", "setRangeText()")}}, and {{domxref("HTMLInputElement.setSelectionRange", "setSelectionRange()")}}</td> + </tr> + </tbody> +</table> + +<h2 id="值">值</h2> + +<p>The {{htmlattrxref("value", "input")}} attribute contains a {{domxref("DOMString")}} whose value is the current contents of the text editing control being used to enter the password. 如果用户还没有输入任何内容，则此值为空字符串（“”）。 If the {{htmlattrxref("required")}} property is specified, then the password edit box must contain a value other than an empty string to be valid.</p> + +<p>If the {{htmlattrxref("pattern", "input")}} attribute is specified, the content of a <code>"password"</code> control is only considered valid if the value passes validation; see {{anch("Validation")}} for more information.</p> + +<div class="note"> +<p>The line feed (U+000A) and carriage return (U+000D) characters are not permitted in a <code>"password"</code> value. When setting the value of a password control, line feed and carriage return characters are stripped out of the value.</p> +</div> + +<h2 id="使用密码输入框">使用密码输入框</h2> + +<p>密码输入框通常与其他文本输入框一样工作; 主要区别在于内容模糊，以防止用户附近的人阅读密码。</p> + +<h3 id="一个简单的密码输入框">一个简单的密码输入框</h3> + +<p>在这里，我们看到了最基本的密码输入，并使用了 {{HTMLElement("label")}} 元素.</p> + +<pre class="brush: html"><label for="userPassword">Password: </label> +<input id="userPassword" type="password"></pre> + +<p>{{EmbedLiveSample("A_simple_password_input", 600, 40)}}</p> + +<h3 id="允许自动补全">允许自动补全</h3> + +<p>为了让用户的密码管理器自动输入密码，specify the {{htmlattrxref("autocomplete", "input")}} attribute. For passwords, this should typically be one of the following:</p> + +<dl> + <dt><code>"on"</code></dt> + <dd>允许浏览器或密码管理器自动填写密码字段。 这不像使用“current-password”或“new-password”那样提供信息。</dd> + <dt><code>"off"</code></dt> + <dd>不让浏览器或密码管理器自动填写密码字段。 请注意，某些软件会忽略此值，因为它通常会损害用户维护安全密码操作的能力。</dd> + <dt><code>"current-password"</code></dt> + <dd>允许浏览器或密码管理器输入网站的当前密码。 这提供了比“on”更多的信息，因为它允许浏览器或密码管理器自动在该字段中输入当前已知的网站密码，但不建议新密码。</dd> + <dt><code>"new-password"</code></dt> + <dd>允许浏览器或密码管理器自动输入网站的新密码; 这用于“更改密码”和“新用户”表单，在该字段询问用户新密码。 新密码可能以多种方式生成，具体取决于使用的密码管理器。 它可能只是填写新的建议密码，或者它可能会向用户显示创建密码的界面。</dd> +</dl> + +<div id="Autocomplete_sample1"> +<pre class="brush: html"><label for="userPassword">Password:</label> +<input id="userPassword" type="password" autocomplete="current-password"></pre> +</div> + +<p>{{EmbedLiveSample("Autocomplete_sample1", 600, 40)}}</p> + +<h3 id="让密码必须输入">让密码必须输入</h3> + +<p>To tell the user's browser that the password field must have a valid value before the form can be submitted, simply specify the Boolean {{htmlattrxref("required", "input")}} attribute.</p> + +<pre class="brush: html"><label for="userPassword">Password: </label> +<input id="userPassword" type="password" required> +<input type="submit" value="Submit"></pre> + +<p>{{EmbedLiveSample("Making_the_password_mandatory", 600, 40)}}</p> + +<h3 id="指定输入模式">指定输入模式</h3> + +<p>If your recommended (or required) password syntax rules would benefit from an alternate text entry interface than the standard keyboard, you can use the {{htmlattrxref("inputmode", "input")}} attribute to request a specific one. 最明显的用例是密码必须是数字（例如PIN）。 例如，带有虚拟键盘的移动设备可能会选择切换到数字键盘布局而不是全键盘，以便更轻松地输入密码。</p> + +<pre class="brush: html"><label for="pin">PIN: </label> +<input id="pin" type="password" inputmode="numeric"></pre> + +<p>{{EmbedLiveSample("Specifying_an_input_mode", 600, 40)}}</p> + +<h3 id="设置长度要求">设置长度要求</h3> + +<p>As usual, you can use the {{htmlattrxref("minlength", "input")}} and {{htmlattrxref("maxlength", "input")}} attributes to establish minimum and maximum acceptable lengths for the password.此示例通过指定用户的PIN必须至少为4且不超过8位来扩展前一个示例。The {{htmlattrxref("size", "input")}} attribute is used to ensure that the password entry control is eight characters wide.</p> + +<pre class="brush: html"><label for="pin">PIN:</label> +<input id="pin" type="password" inputmode="numeric" minlength="4" + maxlength="8" size="8"></pre> + +<p>{{EmbedLiveSample("Setting_length_requirements", 600, 40)}}</p> + +<h3 id="选中字符">选中字符</h3> + +<p>As with other textual entry controls, you can use the {{domxref("HTMLInputElement.select", "select()")}} method to select all the text in the password field.</p> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><label for="userPassword">Password: </label> +<input id="userPassword" type="password" size="12"> +<button id="selectAll">Select All</button> +</pre> + +<h4 id="JavaScript">JavaScript</h4> + +<pre class="brush: js">document.getElementById("selectAll").onclick = function() { + document.getElementById("userPassword").select(); +}</pre> + +<h4 id="结果：">结果：</h4> + +<p>{{EmbedLiveSample("Selecting_text", 600, 40)}}</p> + +<p>You can also use {{domxref("HTMLInputElement.selectionStart", "selectionStart")}} and {{domxref("HTMLInputElement.selectionEnd", "selectionEnd")}} to get (or set) what range of characters in the control are currently selected, and {{domxref("HTMLInputElement.selectionDirection", "selectionDirection")}} to know which direction selection occurred in (or will be extended in, depending on your platform; see its documentation for an explanation). However, given that the text is obscured, the usefulness of these is somewhat limited.</p> + +<h2 id="验证">验证</h2> + +<p>If your application has character set restrictions or any other requirement for the actual content of the entered password, you can use the {{htmlattrxref("pattern", "input")}} attribute to establish a regular expression to be used to automatically ensure that your passwords meet those requirements.</p> + +<p>在这个例子中，只有包含至少四个和不超过八个十六进制数字的值才是有效的。</p> + +<div id="Validation_sample1"> +<pre class="brush: html"><label for="hexId">Hex ID: </label> +<input id="hexId" type="password" pattern="[0-9a-fA-F]{4,8}" + title="Enter an ID consisting of 4-8 hexadecimal digits"></pre> +</div> + +<p>{{EmbedLiveSample("Validation_sample1", 600, 40)}}</p> + +<dl> + <dt>{{htmlattrdef("disabled")}}</dt> + <dd> + <p>此布尔属性指示密码字段不可用于交互。 此外，禁用的字段值不会与表单一起提交。</p> + </dd> +</dl> + +<h2 id="实例">实例</h2> + +<h3 id="申请社会安全号码">申请社会安全号码</h3> + +<p>此示例仅接受与有效的美国社会安全号码格式相匹配的输入。这些用于美国税务和识别目的的数字的格式为“123-45-6789”。 还存在针对每个组中允许的值的各种规则。</p> + +<h4 id="HTML版本的实例">HTML版本的实例</h4> + +<pre class="brush: html"><label for="ssn">SSN:</label> +<input type="password" id="ssn" inputmode="number" minlength="9" maxlength="12" + pattern="(?!000)([0-6]\d{2}|7([0-6]\d|7[012]))([ -])?(?!00)\d\d\3(?!0000)\d{4}" + required autocomplete="off"> +<br> +<label for="ssn">Value:</label> +<span id="current"></span></pre> + +<p>This uses a {{htmlattrxref("pattern", "input")}} which limits the entered value to strings representing legal Socal Security numbers. 很显然，这个正则表达式并不能保证有效的SSN（因为我们没有进入社会保障局的数据库），但它确实保证数量可能是一个号; 它通常会避免无效的值。 此外，它允许三组数字由空格，短划线（“ - ”）分隔，或者什么也不分。</p> + +<div class="note"> +<p>Isn't that regular expression just <em>beautiful</em>?</p> +</div> + +<p>The {{htmlattrxref("inputmode", "input")}} is set to <code>"number"</code> to encourage devices with virtual keyboards to switch to a numeric keypad layout for easier entry. The {{htmlattrxref("minlength", "input")}} and {{htmlattrxref("maxlength", "input")}} attributes are set to 9 and 12, respectively, to require that the value be at least nine and no more than 12 characters (the former without separating characters between the groups of digits and the latter with them). The {{htmlattrxref("required", "input")}} attribute is used to indicate that this control must have a value. Finally, {{htmlattrxref("autocomplete", "input")}} is set to <code>"off"</code> to avoid password managers trying to set its value, since this isn't a password at all.</p> + +<h4 id="JavaScript版本的实例">JavaScript版本的实例</h4> + +<p>这只是一些简单的代码，用于在屏幕上显示输入的SSN，以便您可以看到它。 显然这会破坏密码字段的目的，但它有助于试验模式。</p> + +<pre class="brush: js">var ssn = document.getElementById("ssn"); +var current = document.getElementById("current"); + +ssn.oninput = function(event) { + current.innerHTML = ssn.value; +}</pre> + +<h4 id="结果：_2">结果：</h4> + +<p>{{EmbedLiveSample("Requesting_a_Social_Security_number", 600, 60)}}</p> + +<h2 id="规格">规格</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">规格</th> + <th scope="col">情况</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'forms.html#password-state-(type=password)', '<input type="password">')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>Initial definition</td> + </tr> + <tr> + <td>{{SpecName('HTML5.1', 'forms.html#password-state-(type=password)', '<input type="password">')}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + + + +<p>{{Compat("html.elements.input.input-password")}}</p> diff --git a/files/zh-cn/web/html/element/input/radio/index.html b/files/zh-cn/web/html/element/input/radio/index.html new file mode 100644 index 0000000000..cb52590a2f --- /dev/null +++ b/files/zh-cn/web/html/element/input/radio/index.html @@ -0,0 +1,342 @@ +--- +title: <input type="radio"> +slug: Web/HTML/Element/Input/radio +tags: + - Choosing Options + - Element + - Form Options + - HTML +translation_of: Web/HTML/Element/input/radio +--- +<p>{{HTMLRef}}</p> + +<p>{{htmlelement("input")}} 的 <strong><code>radio</code></strong> 类型元素默认渲染为小型圆圈图表，填充即为激活，类似于之前描述额复选框（checkbox）类型。单选按钮允许你选择单一的值来提交表单。</p> + +<p>{{EmbedInteractiveExample("pages/tabbed/input-radio.html", "tabbed-standard")}}</p> + +<p>它们被称为单选按钮，因为它们的外观和操作方式与老式无线电上的按钮类似，如下图所示。</p> + +<p><img alt="Shows what radio buttons looked like in the olden days." src="https://mdn.mozillademos.org/files/15610/old-radio.jpg" title="Photo of an old-time radio"></p> + +<div class="note"> +<p><span style="font-size: 14px;"><strong>注意：</strong></span><a href="/en-US/docs/Web/HTML/Element/input/checkbox">复选框</a>类似于单选按钮，但是有个重要的区别 -- 单选按钮为选择其中一项而设计，然而复选框允许你开启或关闭单个值。每个独立的单选按钮大致上是 {{domxref("Boolean")}} 控件 -- 是或不是。</p> +</div> + +<table class="properties"> + <tbody> + <tr> + <td><strong>{{anch("Value")}}</strong></td> + <td>A {{domxref("DOMString")}} representing the value of the radio button.</td> + </tr> + <tr> + <td><strong>Events</strong></td> + <td>{{event("change")}} and {{event("input")}}</td> + </tr> + <tr> + <td><strong>Supported common attributes</strong></td> + <td>{{htmlattrxref("checked", "input")}}</td> + </tr> + <tr> + <td><strong>IDL attributes</strong></td> + <td><code>checked</code> and <code>value</code></td> + </tr> + <tr> + <td><strong>Methods</strong></td> + <td>{{domxref("HTMLInputElement.select", "select()")}}</td> + </tr> + </tbody> +</table> + +<h2 id="值">值</h2> + +<p>A {{domxref("DOMString")}} 表示单选按钮的值。它永远不会在客户端看到，但是在服务器上，这就是使用单选按钮 <code>name</code> 提交的数据的 <code>value</code>。查看以下示例：</p> + +<h3 id="定义一个单选按钮组节">定义一个单选按钮组<a href="https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/Input/radio$edit#Defining_a_radio_group">节</a></h3> + +<p>一个单选按钮组由具有相同 {{htmlattrxref("name", "input")}}属性的单选按钮组成。 一旦单选按钮组被建立, 选择那按钮组的任何单选按钮将会自动取消同组当前选择的任何按钮。</p> + +<p>你可以在一个页面上创建任何你喜欢的单选按钮组, 只要每一组都有一个独特的 <code>name</code>属性。</p> + +<p>举个例子，如果你需要在表单中询问用户的首选联系方式，你可以创建三个 <code>name</code> 属性都为 <code>contact</code> 的单选按钮，不过一个按钮的 {{htmlattrxref("value", "input")}}属性为 <code>email</code> ，另一个的<code>value</code> 属性为 <code>phone</code>，还有一个的<code>value</code> 属性为 <code>mail</code>。用户不会看见 <code>value</code> 属性或 <code>name</code> 属性（除非你故意用代码显示它们）。</p> + +<p>最终的 HTML 可能看起来像这样：</p> + +<pre class="brush: html notranslate"><form> + <p>Please select your preferred contact method:</p> + <div> + <input type="radio" id="contactChoice1" + name="contact" value="email"> + <label for="contactChoice1">Email</label> + + <input type="radio" id="contactChoice2" + name="contact" value="phone"> + <label for="contactChoice2">Phone</label> + + <input type="radio" id="contactChoice3" + name="contact" value="mail"> + <label for="contactChoice3">Mail</label> + </div> + <div> + <button type="submit">Submit</button> + </div> +</form> +</pre> + +<p>你可以在这里看到三个单选按钮，每个按钮的 <code>name</code> 属性都设置为 <code>contact</code> 并且都含有在单选按钮组中唯一的 <code>value</code> 属性。 每一个单选按钮也有一个给{{HTMLElement("label")}} 元素的 {{htmlattrxref("for", "label")}}属性使用的{{domxref("Element.id", "id")}}，将 <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">label</span></font> 元素和点选按钮关联。</p> + +<p><em>译者注：你可以用 <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">label</span></font> 元素把 <code>input</code> 元素包裹起来，以减少 <code>id</code> 的使用。</em></p> + +<p>你可以在这里查看这个例子：</p> + +<p>{{EmbedLiveSample('Defining_a_radio_group', 600, 130)}}</p> + +<h3 id="Data_representation_of_a_radio_group">Data representation of a radio group</h3> + +<p>当上面的表单在提交时选择了一个单选框，表单的数据就包括了<code>contact=<em>value</em></code>一行。例如，若用户点击 "Phone "单选框，然后提交表单，提交的数据中将包括<code>contact=phone</code>一行。</p> + +<p>如果你在HTML中忘记了value属性，那么提交的表单数据就会将该值分配到<code>on</code>上。在这种情况下，如果用户选中了 "Phone "选项并提交了表单，提交的表单数据将是<code>contact=on</code>，这并没有什么卵用。所以别忘了设置你的<code>value</code>属性！</p> + +<p><strong>Note</strong>: 如果在提交表单时没有选择任何单选按钮，则提交的表格数据中根本不包括单选组，因为没有值要报告。</p> + +<p>It's fairly uncommon to actually want to allow the form to be submitted without any of the radio buttons in a group selected, so it is usually wise to have one default to the <code>checked</code> state. See {{anch("Selecting a radio button by default")}} below.</p> + +<p>Let's add a little bit of code to our example so we can examine the data generated by this form. The HTML is revised to add a {{HTMLElement("pre")}} block to output the form data into:</p> + +<pre class="brush: html notranslate"><form> + <p>Please select your preferred contact method:</p> + <div> + <input type="radio" id="contactChoice1" + name="contact" value="email"> + <label for="contactChoice1">Email</label> + <input type="radio" id="contactChoice2" + name="contact" value="phone"> + <label for="contactChoice2">Phone</label> + <input type="radio" id="contactChoice3" + name="contact" value="mail"> + <label for="contactChoice3">Mail</label> + </div> + <div> + <button type="submit">Submit</button> + </div> +</form> +<pre id="log"> +</pre></pre> + +<p>Then we add some <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript">JavaScript</a> to set up an event listener on the {{event("submit")}} event, which is sent when the user clicks the "Submit" button:</p> + +<pre class="brush: js notranslate">var form = document.querySelector("form"); +var log = document.querySelector("#log"); + +form.addEventListener("submit", function(event) { + var data = new FormData(form); + var output = ""; + for (const entry of data) { + output = entry[0] + "=" + entry[1] + "\r"; + }; + log.innerText = output; + event.preventDefault(); +}, false);</pre> + +<p>Try this example out and see how there's never more than one result for the <code>contact</code> group.</p> + +<p>{{EmbedLiveSample("Data_representation_of_a_radio_group", 600, 130)}}</p> + +<h2 id="Additional_attributes">Additional attributes</h2> + +<p>In addition to the common attributes shared by all {{HTMLElement("input")}} elements, <code>radio</code>inputs support the following attributes:</p> + +<table> + <thead> + <tr> + <th scope="col">Attribute</th> + <th scope="col">Description</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>{{anch("checked")}}</code></td> + <td>A Boolean indicating whether or not this radio button is the currently-selected item in the group</td> + </tr> + </tbody> +</table> + +<h3 id="htmlattrdefchecked">{{htmlattrdef("checked")}}</h3> + +<p>A Boolean attribute which, if present, indicates that this radio button is the currently selected one in the group.</p> + +<p>Unlike other browsers, Firefox by default <a href="https://stackoverflow.com/questions/5985839/bug-with-firefox-disabled-attribute-of-input-not-resetting-when-refreshing">persists the dynamic checked state</a> of an <code><input></code>across page loads. Use the {{htmlattrxref("autocomplete","input")}} attribute to control this feature.</p> + +<h2 id="Using_radio_inputs">Using radio inputs</h2> + +<p>We already covered the fundamentals of radio buttons above. Let's now look at the other common radio-button-related features and techniques you may need to know about.</p> + +<h3 id="Selecting_a_radio_button_by_default">Selecting a radio button by default</h3> + +<p>To make a radio button selected by default, you simply include <code>checked</code> attribute, as shown in this revised version of the previous example:</p> + +<pre class="brush: html notranslate"><form> + <p>Please select your preferred contact method:</p> + <div> + <input type="radio" id="contactChoice1" + name="contact" value="email" checked> + <label for="contactChoice1">Email</label> + + <input type="radio" id="contactChoice2" + name="contact" value="phone"> + <label for="contactChoice2">Phone</label> + + <input type="radio" id="contactChoice3" + name="contact" value="mail"> + <label for="contactChoice3">Mail</label> + </div> + <div> + <button type="submit">Submit</button> + </div> +</form></pre> + +<p>{{EmbedLiveSample('Selecting_a_radio_button_by_default', 600, 130)}}</p> + +<p>In this case, the first radio button is now selected by default.</p> + +<p><strong>Note</strong>: If you put the <code>checked</code> attribute on more than one radio button, later instances will override earlier ones; that is, the last <code>checked</code> radio button will be the one that is selected. This is because only one radio button in a group can ever be selected at once, and the user agent automatically deselects others each time a new one is marked as checked.</p> + +<h3 id="Providing_a_bigger_hit_area_for_your_radio_buttons">Providing a bigger hit area for your radio buttons</h3> + +<p>In the above examples, you may have noticed that you can select a radio button by clicking on its associated {{htmlelement("label")}} element, as well as on the radio button itself. This is a really useful feature of HTML form labels that makes it easier for users to click the option they want, especially on small-screen devices like smartphones.</p> + +<p>Beyond accessibility, this is another good reason to properly set up <code><label></code> elements on your forms.</p> + +<h2 id="Validation">Validation</h2> + +<p>Radio buttons don't participate in constraint validation; they have no real value to be constrained.</p> + +<h2 id="Styling_radio_inputs">Styling radio inputs</h2> + +<p>The following example shows a slightly more thorough version of the example we've seen throughout the article, with some additional styling, and with better semantics established through use of specialized elements. The HTML looks like this:</p> + +<pre class="brush: html notranslate"><form> + <fieldset> + <legend>Please select your preferred contact method:</legend> + <div> + <input type="radio" id="contactChoice1" + name="contact" value="email" checked> + <label for="contactChoice1">Email</label> + + <input type="radio" id="contactChoice2" + name="contact" value="phone"> + <label for="contactChoice2">Phone</label> + + <input type="radio" id="contactChoice3" + name="contact" value="mail"> + <label for="contactChoice3">Mail</label> + </div> + <div> + <button type="submit">Submit</button> + </div> + </fieldset> +</form></pre> + +<p>There's not much new to note here except for the addition of {{htmlelement("fieldset")}} and {{htmlelement("legend")}} elements, which help to group the functionality nicely and in a semantic way.</p> + +<p>The CSS involved is a bit more significant:</p> + +<pre class="brush: css notranslate">html { + font-family: sans-serif; +} + +div:first-of-type { + display: flex; + align-items: flex-start; + margin-bottom: 5px; +} + +label { + margin-right: 15px; + line-height: 32px; +} + +input { + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + + border-radius: 50%; + width: 16px; + height: 16px; + + border: 2px solid #999; + transition: 0.2s all linear; + outline: none; + margin-right: 5px; + + position: relative; + top: 4px; +} + +input:checked { + border: 6px solid black; +} + +button, +legend { + color: white; + background-color: black; + padding: 5px 10px; + border-radius: 0; + border: 0; + font-size: 14px; +} + +button:hover, +button:focus { + color: #999; +} + +button:active { + background-color: white; + color: black; + outline: 1px solid black; +}</pre> + +<p>Most notable here is the use of the {{cssxref("-moz-appearance")}} property (with prefixes needed to support some browsers). By default, radio buttons (and <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox">checkboxes</a>) are styled with the operating system's native styles for those controls. By specifying <code>appearance: none</code>, you can remove the native styling altogether, and create your own styles for them. Here we've used a {{cssxref("border")}} along with {{cssxref("border-radius")}} and a {{cssxref("transition")}} to create a nice animating radio selection. Notice also how the {{cssxref(":checked")}} pseudo-class is used to specify the styles for the radio button's appearance when selected.</p> + +<p><strong>Compatibility note</strong>: If you wish to use the {{cssxref("appearance")}} property, you should test it very carefully. Although it is supported in most modern browsers, its implementation varies widely. In older browsers, even the keyword <code>none</code> does not have the same effect across different browsers, and some do not support it at all. The differences are smaller in the newest browsers.</p> + +<p>{{EmbedLiveSample('Styling_radio_inputs', 600, 120)}}</p> + +<p>Notice that when clicking on a radio button, there's a nice, smooth fade out/in effect as the two buttons change state. In addition, the style and coloring of the legend and submit button are customized to have strong contrast. This might not be a look you'd want in a real web application, but it definitely shows off the possibilities.</p> + +<h2 id="规范">规范</h2> + +<table class="standard-table"> + <thead> + <tr> + <th>Specification</th> + <th>Status</th> + <th></th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'forms.html#radio-button-state-(type=radio)', '<input type="radio">')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'forms.html#radio-button-state-(type=radio)', '<input type="radio">')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<p>{{Compat("html.elements.input.input-radio")}}</p> + +<h2 id="参见">参见</h2> + +<ul> + <li>{{HTMLElement("input")}} and the {{domxref("HTMLInputElement")}} interface which implements it.</li> + <li>{{domxref("RadioNodeList")}}: the interface that describes a list of radio buttons</li> +</ul> diff --git a/files/zh-cn/web/html/element/input/reset/index.html b/files/zh-cn/web/html/element/input/reset/index.html new file mode 100644 index 0000000000..089f3c7778 --- /dev/null +++ b/files/zh-cn/web/html/element/input/reset/index.html @@ -0,0 +1,169 @@ +--- +title: <input type="reset"> +slug: Web/HTML/Element/Input/reset +tags: + - Element + - Form Button + - Form input + - HTML + - HTML forms + - Input + - Input Types + - reset +translation_of: Web/HTML/Element/input/reset +--- +<p><span class="seoSummary"><span style="font-size: 1rem; letter-spacing: -0.00278rem;"><code>{{HTMLElement("input")}}</code> type 类型为 </span><strong style="font-size: 1rem; letter-spacing: -0.00278rem;"><code>"reset"</code></strong><span style="font-size: 1rem; letter-spacing: -0.00278rem;"> 元素呈现为按钮，且带有默认的 </span><span style="font-size: 1rem; letter-spacing: -0.00278rem;"><code>{{event("click")}}</code> </span><span style="font-size: 1rem; letter-spacing: -0.00278rem;">事件，用于将表单中的所有输入重置为其初始值。</span></span></p> + +<div>{{EmbedInteractiveExample("pages/tabbed/input-reset.html", "tabbed-standard")}}</div> + +<p class="hidden">该交互式示例的源代码存储在GitHub存储库中。 如果您想为交互式示例项目做出贡献，请克隆 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a>，并发起拉取请求。</p> + +<div class="note"> +<p>您通常应该尽量避免在表单中包含重置按钮。 它们很少有实用性，事实上更有可能使用户误点而感到沮丧（通常是在尝试单击“<a href="https://wiki.developer.mozilla.org/zh-CN/docs/Web/HTML/Element/Input/submit">提交</a>”按钮时）。</p> +</div> + +<table class="properties"> + <tbody> + <tr> + <td><strong>{{anch("值")}}</strong></td> + <td><code>{{domxref("DOMString")}}</code>用做按钮标签</td> + </tr> + <tr> + <td><strong>事件</strong></td> + <td><code>{{event("click")}}</code></td> + </tr> + <tr> + <td><strong>支持的常用属性</strong></td> + <td><code>{{htmlattrxref("type", "input")}}</code> 和 <code>{{htmlattrxref("value", "input")}}</code></td> + </tr> + <tr> + <td><strong>IDL 属性</strong></td> + <td><code>value</code></td> + </tr> + <tr> + <td><strong>方法</strong></td> + <td>无</td> + </tr> + </tbody> +</table> + +<h2 id="值">值</h2> + +<p><code><input type="reset"></code> 元素的 <code>{{htmlattrxref("value", "input")}}</code> 属性包含一个用做按钮标签的 <code>{{domxref("DOMString")}}</code>，诸如 <code>reset</code>之类的按钮没有其他值.</p> + +<div id="summary-example3"> +<pre class="brush: html"><input type="reset" value="Reset the form"></pre> +</div> + +<p>{{EmbedLiveSample("summary-example3", 650, 30)}}</p> + +<p>如果您未指定 <code>value</code>，则会获得一个带有默认标签的按钮（通常为“重置”，但这将根据 {{Glossary("user agent")}} 而有所不同：</p> + +<div id="summary-example1"> +<pre class="brush: html"><input type="reset"></pre> +</div> + +<p>{{EmbedLiveSample("summary-example1", 650, 30)}}</p> + +<h2 id="使用重置按钮">使用重置按钮</h2> + +<p><code><input type =“ reset”></code> 按钮用于重置表单。 如果您要创建自定义按钮，则使用JavaScript自定义行为，您需要使用 <code><a href="https://wiki.developer.mozilla.org/zh-CN/docs/Web/HTML/Element/Input/button"><input type="button"></a></code>，或者最好使用 <code>{{htmlelement("button")}}</code> 元素。</p> + +<h3 id="一个简单的重置按钮">一个简单的重置按钮</h3> + +<p>我们将从创建一个简单的重置按钮开始：</p> + +<pre class="brush: html"><form> + <div> + <label for="example">Type in some sample text</label> + <input id="example" type="text"> + </div> + <div> + <input type="reset" value="Reset the form"> + </div> +</form> +</pre> + +<p>如下所示:</p> + +<p>{{EmbedLiveSample("A_simple_reset_button", 650, 100)}}</p> + +<p>尝试在文本字段中输入一些文本，然后点击重置按钮。</p> + +<h3 id="添加重置键盘快捷键">添加重置键盘快捷键</h3> + +<p>添加键盘快捷键到提交按钮 — 就像您使用 <code>{{HTMLElement("input")}}</code> 一样做一些事情 — 请使用 <code>{{htmlattrxref("accesskey")}}</code> 全局属性。</p> + +<p>在这个例子中， <kbd>r</kbd> 被指定为访问键 （您需要按 <kbd>r</kbd> 键与浏览器或操作系统的特定键相组合； 关于这些命令请参见 <code>{{htmlattrxref("accesskey")}}</code> ）。</p> + +<pre class="brush: html"><form> + <div> + <label for="example">Type in some sample text</label> + <input id="example" type="text"> + </div> + <div> + <input type="reset" value="Reset the form" + accesskey="r"> + </div> +</form></pre> + +<p>{{EmbedLiveSample("Adding_a_reset_keyboard_shortcut", 650, 100)}}</p> + +<p>上面的示例的问题在于，用户无法知道访问键是什么！事实上，是因为修饰符通常是非标准的以避免与系统和软件快捷键冲突。 在构建网站时，请确保以不干扰网站设计的方式提供此信息（例如，通过提供易于访问的链接来指向有关网站访问键的信息）。向按钮添加提示（也可以使用 <code>{{htmlattrxref("title")}}</code> 属性）, 尽管这并不是出于可访问性目的的完善的解决方案。</p> + +<h3 id="禁用和启用重置按钮">禁用和启用重置按钮</h3> + +<p>要禁用重置按钮，只需在其上指定 <code>{{htmlattrxref("disabled")}}</code> 的全局属性，如下所示：</p> + +<div id="disable-example1"> +<pre class="brush: html"><input type="reset" value="Disabled" disabled></pre> +</div> + +<p>您可以在运行时通过简单地将 <code>disable</code> 设置为 <code>true</code> 或 <code>false</code> 来启用和禁用按钮。在 JavaScript 中，使用<code>btn.disabled = true</code> 或 <code>btn.disabled = false</code>。</p> + +<div class="note"> +<p>注意：有关启用和禁用按钮的更多想法，请参见 <code><a href="/en-US/docs/Web/HTML/Element/input/button#Disabling_and_enabling_a_button"><input type="button"></a></code> 页面。</p> +</div> + +<h2 id="验证方式"><font face="x-locale-heading-primary, zillaslab, Palatino, Palatino Linotype, x-locale-heading-secondary, serif"><span style="font-size: 37.33327865600586px;"><strong>验证方式</strong></span></font></h2> + +<p>按钮并不参与约束性验证；他们并没有实际的约束价值。</p> + +<h2 id="例子">例子</h2> + +<p>我们在上面已经提供了一些简单的示例。 实际上关于重置按钮并没有更多的内容了。</p> + +<h2 id="技术规格">技术规格</h2> + +<table class="standard-table"> + <tbody> + <tr> + <td>规范</td> + <td>状态</td> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', 'forms.html#reset-button-state-(type=reset)', '<input type="reset">')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'forms.html#reset-button-state-(type=reset)', '<input type="reset">')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<div class="hidden">此页面上的兼容性表是根据结构化数据生成的。 如果您想贡献数据，请查看 <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> 并向我们发起拉取请求</div> + +<p>{{Compat("html.elements.input.input-reset")}}</p> + +<h2 id="参见">参见</h2> + +<ul> + <li>{{HTMLElement("input")}} 和 {{domxref("HTMLInputElement")}} 实现接口</li> + <li><a href="/en-US/docs/Learn/HTML/Forms_and_buttons">Forms and buttons</a></li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/forms">Forms (accessibility)</a></li> + <li><a href="/en-US/docs/Learn/HTML/Forms">HTML forms</a></li> + <li>The {{HTMLElement("button")}} element</li> +</ul> diff --git a/files/zh-cn/web/html/element/input/search/index.html b/files/zh-cn/web/html/element/input/search/index.html new file mode 100644 index 0000000000..284557ac79 --- /dev/null +++ b/files/zh-cn/web/html/element/input/search/index.html @@ -0,0 +1,475 @@ +--- +title: <input type="search"> +slug: Web/HTML/Element/Input/search +tags: + - HTML + - HTML表单 + - 参考 + - 搜索 + - 表单 + - 表单输入 + - 输入类型 +translation_of: Web/HTML/Element/input/search +--- +<div>{{HTMLRef}}</div> + +<p><span class="seoSummary"><code>{{HTMLElement("input")}}</code> 元素的 <code><strong>search</strong></code> 类型是 </span>专为用户输入搜索查询而设计的文本字段。功能上与<span class="seoSummary"> <code><a href="/en-US/docs/Web/HTML/Element/input/text">text</a></code> 输入相同, 但是可以通过 <code>{{Glossary("user agent")}}</code> 进行不同样式的设置。</span></p> + +<div>{{EmbedInteractiveExample("pages/tabbed/input-search.html", "tabbed-standard")}}</div> + +<div class="hidden">该交互式示例的源存储在GitHub存储库中。 如果您想为交互式示例项目做出贡献，请克隆 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> 并向我们发起拉取请求。</div> + +<table class="properties"> + <tbody> + <tr> + <td><strong>{{anch("值")}}</strong></td> + <td><code>{{domxref("DOMString")}}</code> 代表搜索字段中包含的值。</td> + </tr> + <tr> + <td><strong>事件</strong></td> + <td><code>{{domxref("HTMLElement/change_event", "change")}}</code> 和 <code>{{domxref("HTMLElement/input_event", "input")}}</code></td> + </tr> + <tr> + <td><strong>支持的通用属性</strong></td> + <td><code>{{htmlattrxref("autocomplete", "input")}}</code>, <code>{{htmlattrxref("list", "input")}}</code>, <code>{{htmlattrxref("maxlength", "input")}}</code>, <code>{{htmlattrxref("minlength", "input")}}</code>, <code>{{htmlattrxref("pattern", "input")}}</code>, <code>{{htmlattrxref("placeholder", "input")}}</code>, <code>{{htmlattrxref("required", "input")}}</code>, <code>{{htmlattrxref("size", "input")}}</code>。</td> + </tr> + <tr> + <td><strong>IDL 属性</strong></td> + <td><code>value</code></td> + </tr> + <tr> + <td><strong>方法</strong></td> + <td><code>{{domxref("HTMLInputElement.select", "select()")}}</code>, <code>{{domxref("HTMLInputElement.setRangeText", "setRangeText()")}}</code>, <code>{{domxref("HTMLInputElement.setSelectionRange", "setSelectionRange()")}}</code>。</td> + </tr> + </tbody> +</table> + +<h2 id="值">值</h2> + +<p><code>{{htmlattrxref("value", "input")}}</code> 属性包含 <code>{{domxref("DOMString")}}</code> 代表搜索字段中包含的值。 您可以在JavaScript使用 <code>{{domxref("HTMLInputElement.value")}}</code> 属性。</p> + +<pre class="brush: js notranslate">searchTerms = mySearch.value; +</pre> + +<p>如果没有针对输入的验证约束 (请参见 <code>{{anch("Validation")}}</code>)，该值可以是任何文本字符串或空字符串 (<code>""</code>)。</p> + +<h2 id="其他属性">其他属性</h2> + +<p>除了可在所有 <code>{{HTMLElement("input")}}</code> 上的属性（无论其类型）之外，搜索字段输入还支持以下属性：</p> + +<table> + <thead> + <tr> + <th scope="col">属性</th> + <th scope="col">描述</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>{{anch("list")}}</code></td> + <td><code><datalist></code> 元素的ID，其中包含可选的预定义自动完成选项。</td> + </tr> + <tr> + <td><code>{{anch("maxlength")}}</code></td> + <td>输入应接受的最大字符数。</td> + </tr> + <tr> + <td><code>{{anch("minlength")}}</code></td> + <td>输入可以且仍被认为有效的最小字符数。</td> + </tr> + <tr> + <td><code>{{anch("pattern")}}</code></td> + <td>输入内容必须匹配的正则表达式才能有效。</td> + </tr> + <tr> + <td><code>{{anch("placeholder")}}</code></td> + <td>空时在输入字段中显示的示例值。</td> + </tr> + <tr> + <td><code>{{anch("readonly")}}</code></td> + <td>一个布尔属性，指示输入的内容是否应为只读。</td> + </tr> + <tr> + <td><code>{{anch("size")}}</code></td> + <td>一个数字，指示输入字段应宽多少个字符。</td> + </tr> + <tr> + <td><code>{{anch("spellcheck")}}</code></td> + <td>控制是否对输入字段启用拼写检查，或者是否应使用默认拼写检查配置。</td> + </tr> + </tbody> +</table> + +<p id="htmlattrdeflist">{{page("/zh-CN/docs/Web/HTML/Element/input/text", "list", 0, 1, 2)}}</p> + +<h3 id="htmlattrdefmaxlength">{{htmlattrdef("maxlength")}}</h3> + +<p>用户可以在搜索字段中输入的最大字符数（以UTF-16代码为单位）。 必须为0或更高的整数。 如果未指定 <code>maxlength</code> 或指定了无效值，则搜索字段没有最大长度。 此值还必须大于或等于 <code>minlength</code> 的值。</p> + +<p>如果输入到字段中的文本的长度大于 <code>maxlength</code> UTF-16代码单元的长度，则输入无法通过约束验证（<a href="/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation">constraint validation</a>）。</p> + +<h3 id="htmlattrdefminlength">{{htmlattrdef("minlength")}}</h3> + +<p>用户可以在搜索字段中输入的最小字符数（以UTF-16代码为单位）。 该值必须是小于或等于 <code>maxlength</code> 指定的值的非负整数值。 如果未指定 <code>minlength</code> 或指定了无效值，则搜索输入没有最小长度。</p> + +<p>如果在字段中输入的文本的长度小于 <code>minlength</code> UTF-16代码单元的长度，则搜索字段将无法通过约束验证（<a href="/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation">constraint validation</a>）。</p> + +<h3 id="htmlattrdefpattern">{{htmlattrdef("pattern")}}</h3> + +<p>{{page("/zh-CN/docs/Web/HTML/Element/input/text", "pattern-include")}}</p> + +<p>有关详细信息和示例，请参见 {{anch("Specifying a pattern")}} 部分。</p> + +<p>{{page("/zh-CN/docs/Web/HTML/Element/input/text", "placeholder", 0, 1, 2)}}</p> + +<p>{{page("/zh-CN/docs/Web/HTML/Element/input/text", "readonly", 0, 1, 2)}}</p> + +<p>{{page("/zh-CN/docs/Web/HTML/Element/input/text", "size", 0, 1, 2)}}</p> + +<h3 id="htmlattrdefspellcheck">{{htmlattrdef("spellcheck")}}</h3> + +<p>{{page("/zh-CN/docs/Web/HTML/Element/input/text", "spellcheck-include")}}</p> + +<h2 id="非标准属性">非标准属性</h2> + +<p>以下非标准属性可用于搜索输入字段。 通常，除非没有帮助，否则应避免使用它们。</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">属性</th> + <th scope="col">描述</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>{{anch("autocorrect")}}</code></td> + <td>编辑此输入字段时是否允许自动更正。<strong>Safari only.</strong></td> + </tr> + <tr> + <td><code>{{anch("incremental")}}</code></td> + <td>是否发送重复的 {{event("search")}} 事件以允许在用户仍在编辑字段的值时更新实时搜索结果。<strong>WebKit and Blink only (Safari, Chrome, Opera, etc.).</strong></td> + </tr> + <tr> + <td><code>{{anch("mozactionhint")}}</code></td> + <td>一个字符串，指示当用户在编辑字段时按 <kbd>Enter</kbd> 或 <kbd>Return</kbd> 键时将执行的操作类型； 用于确定虚拟键盘上该键的适当标签。<strong>Firefox for Android only.</strong></td> + </tr> + <tr> + <td><code>{{anch("results")}}</code></td> + <td>先前搜索查询的下拉列表中应显示的最大项目数。<strong>Safari only.</strong></td> + </tr> + </tbody> +</table> + +<h3 id="htmlattrdefautocorrect_non-standard_inline">{{htmlattrdef("autocorrect")}} {{non-standard_inline}}</h3> + +<p>{{page("/zh-CN/docs/Web/HTML/Element/input/text", "autocorrect-include")}}</p> + +<h3 id="htmlattrdefincremental_non-standard_inline">{{htmlattrdef("incremental")}} {{non-standard_inline}}</h3> + +<div id="incremental-include"> +<p>布尔值 <code>incremental</code> 属性是 WebKit 和 Blink 扩展 （因此被 Safari, Opera, Chrome 等支持）如果存在，它会告诉 {{Glossary("user agent")}} 将输入作为实时搜索进行处理。 当用户编辑字段的值时，用户代理将 <code>{{event("search")}}</code> 事件发送到代表搜索框的 <code>{{domxref("HTMLInputElement")}}</code> 对象。这允许您的代码在用户编辑搜索时实时更新搜索结果。</p> + +<p>如果 <code>incremental</code> 没有被指定，则仅当用户显式启动搜索时（例如，在编辑字段时按 <kbd>Enter</kbd> 或 <kbd>Return</kbd> ）才发送 <code>{{event("search")}}</code> 事件。</p> + +<p><code>search</code> 事件受速率限制，因此发送事件的频率不会超过实现定义的间隔。</p> +</div> + +<h3 id="htmlattrdefmozactionhint_non-standard_inline">{{htmlattrdef("mozactionhint")}} {{non-standard_inline}}</h3> + +<p>{{page("/zh-CN/docs/Web/HTML/Element/input/text", "mozactionhint-include")}}</p> + +<h3 id="htmlattrdefresults_non-standard_inline">{{htmlattrdef("results")}} {{non-standard_inline}}</h3> + +<div id="results-include"> +<p><code>results</code> 属性是一个数字值（仅受Safari支持），可让您覆盖要在 <code>{{HTMLElement("input")}}</code> 元素的本机提供的先前搜索查询的下拉菜单中显示的最大条目数。</p> + +<p>该值必须是非负十进制数字。 如果未提供或给出了无效值，则使用浏览器的默认最大条目数。</p> +</div> + +<h2 id="使用搜索输入">使用搜索输入</h2> + +<p><code><input></code> 元素 <code>search</code> 类型与 <code>text</code> 类型的元素非常相似，不同之处在于它们专门用于处理搜索项。 它们的行为基本相同，但是用户代理可以默认选择不同的样式（当然，站点可以使用样式表向其应用自定义样式）。</p> + +<h3 id="基本例子">基本例子</h3> + +<pre class="brush: html notranslate"><form> + <div> + <input type="search" id="mySearch" name="q"> + <button>Search</button> + </div> +</form></pre> + +<p>如下：</p> + +<p>{{EmbedLiveSample("Basic_example", 600, 40)}}</p> + +<p><code>q</code> 是搜索输入中最常用 <code>name</code> ，尽管不是强制性的。提交后，发送到服务器的键值对数据将为 <code>q=searchterm</code>。</p> + +<div class="note"> +<p>你一定要记住设置 <code>{{htmlattrxref("name", "input")}}</code> 输入，否则不会提交任何内容。</p> +</div> + +<h3 id="搜索类型和文本类型之间的差异">搜索类型和文本类型之间的差异</h3> + +<p>主要的基本区别在于浏览器处理它们的方式。 首先要注意的是，某些浏览器显示一个十字图标，如果需要，可以单击该十字图标以立即删除搜索词。 以下屏幕截图来自Chrome：</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/15235/chrome-cross-icon.png" style="display: block; height: 31px; margin: 0px auto; width: 144px;"></p> + +<p>此外，现代浏览器还倾向于自动存储先前在各个域中输入的搜索词，然后在该域的搜索输入中执行后续搜索时，这些搜索词会作为自动完成选项出现。 这有助于随着时间的流逝倾向于在相同或相似搜索查询上进行搜索的用户。 此屏幕截图来自Firefox：</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/15237/firefox-auto-complete.png" style="display: block; height: 83px; margin: 0px auto; width: 171px;">现在，让我们看看可以应用于搜索表单的一些有用的技巧。</p> + +<h3 id="设置占位符">设置占位符</h3> + +<p>您可以在搜索输入中提供一个有用的占位符，使用<code>{{htmlattrxref("placeholder","input")}}</code> 属性来提示要做什么。看下面的例子：</p> + +<pre class="brush: html notranslate"><form> + <div> + <input type="search" id="mySearch" name="q" + placeholder="Search the site..."> + <button>Search</button> + </div> +</form></pre> + +<p>您可以在下面看到占位符的呈现方式：</p> + +<p>{{EmbedLiveSample("Setting_placeholders", 600, 40)}}</p> + +<h3 id="搜索表单标签和辅助功能">搜索表单标签和辅助功能</h3> + +<p>搜索表单的一个问题是它们的可访问性。 常见的设计惯例是不为搜索字段提供标签（尽管可能会有放大镜图标或类似图标），因为由于放置位置的原因，搜索表单的目的通常对于视力正常的用户而言相当明显 （<a href="https://mdn.github.io/learning-area/accessibility/aria/website-aria-roles/">这个例子展示了一个典型的模式</a>）。</p> + +<p>但是，这可能会使屏幕阅读器用户感到困惑，因为他们不会对搜索输入内容有任何口头指示。 解决此问题而不会影响您的视觉设计的一种方法是使用 <a href="/en-US/docs/Learn/Accessibility/WAI-ARIA_basics">WAI-ARIA</a> 功能：</p> + +<ul> + <li><code><form></code> 元素上， <code>search</code> 值的 <code>role</code> 属性 使屏幕阅读器用户声明该表单是搜索表单。</li> + <li>您还可以在 <code>{{HTMLElement("input")}}</code> 上使用 <code>aria-label</code> 属性。这应该是一个描述性的文本标签，屏幕阅读器会读出该标签； 它用作 <code><label></code>的非可视等效项。</li> +</ul> + +<p>让我们看一个例子：</p> + +<pre class="brush: html notranslate"><form role="search"> + <div> + <input type="search" id="mySearch" name="q" + placeholder="Search the site..." + aria-label="Search through site content"> + <button>Search</button> + </div> +</form></pre> + +<p>您可以在下面看到它的呈现方式：</p> + +<p>{{EmbedLiveSample("Search_form_labels_and_accessibility", 600, 40)}}</p> + +<p>与上一个示例没有视觉上的区别，但是屏幕阅读器用户可以使用更多信息。</p> + +<div class="note"> +<p><strong>注意：</strong>有关此类辅助功能的更多信息，请参见 <a href="/en-US/docs/Learn/Accessibility/WAI-ARIA_basics#SignpostsLandmarks">Signposts/Landmarks</a> 。</p> +</div> + +<h3 id="输入框元素大小">输入框元素大小</h3> + +<p>可以使用 <code>{{htmlattrxref("size", "input")}}</code> 属性来控制输入框的尺寸。 使用它，您可以指定输入框一次可以显示的字符数。 例如，在此示例中，搜索框为30个字符宽：</p> + +<pre class="brush: html notranslate"><form> + <div> + <input type="search" id="mySearch" name="q" + placeholder="Search the site..." size="30"> + <button>Search</button> + </div> +</form></pre> + +<p>结果是这个更宽的输入框：</p> + +<p>{{ EmbedLiveSample('Physical_input_element_size', 600, 40) }}</p> + +<h2 id="验证方式">验证方式</h2> + +<p><code><input></code> 元素的 <code>search</code> 类型具有与常规文本 <code>text</code> 输入相同的验证功能。 通常，您不太可能希望对搜索框使用验证功能。 在许多情况下，应该只允许用户搜索任何内容，但是有几种情况需要考虑，例如搜索已知格式的数据。</p> + +<div class="note"> +<p><strong>注意：</strong>HTML表单验证不能替代确保输入数据格式正确的脚本。 对于某人来说，对HTML进行调整以使其绕过验证或完全删除验证太容易了。 有人也可以完全绕开您的HTML并将数据直接提交到您的服务器。 如果服务器端代码无法验证接收到的数据，则当将格式不正确的数据（或太大，类型错误的数据等等）输入数据库时，灾难可能会发生。</p> +</div> + +<h3 id="样式注意事项">样式注意事项</h3> + +<p>有一些有用的伪类可用于设置有效/无效表单元素的样式： <code>{{cssxref(":valid")}}</code> 和 <code>{{cssxref(":invalid")}}</code>。在本节中，我们将使用以下CSS，它将在包含有效值的输入旁边放置一个复选标记（勾号），并在包含无效值的输入旁边放置一个叉号。</p> + +<pre class="brush: css notranslate">input:invalid ~ span:after { + content: '✖'; + padding-left: 5px; + position: absolute; +} + +input:valid ~ span:after { + content: '✓'; + padding-left: 5px; + position: absolute; +}</pre> + +<p>该技巧还需要将 <code>{{htmlelement("span")}}</code> 元素放置在<code>form</code>元素之后，该<code>form</code>元素充当图标的持有者。 这是必要的，因为某些浏览器上的某些输入类型不能很好地显示直接位于其后的图标。</p> + +<h3 id="输入要求">输入要求</h3> + +<p>您可以使用 <code>{{htmlattrxref("required", "input")}}</code> 属性作为在允许提交表单之前输入所需值的简单方法：</p> + +<pre class="brush: html notranslate"><form> + <div> + <input type="search" id="mySearch" name="q" + placeholder="Search the site..." required> + <button>Search</button> + <span class="validity"></span> + </div> +</form></pre> + +<div class="hidden"> +<pre class="brush: css notranslate">input { + margin-right: 10px; +} + +input:invalid ~ span:after { + content: '✖'; + padding-left: 5px; + position: absolute; +} + +input:valid ~ span:after { + content: '✓'; + padding-left: 5px; + position: absolute; +}</pre> +</div> + +<p>如下所示：</p> + +<p>{{ EmbedLiveSample('Making_input_required', 600, 40) }}</p> + +<p>另外，如果您尝试在未输入搜索词的情况下提交表单，浏览器将显示一条消息。 以下示例来自Firefox：</p> + +<p><img alt="form field with attached message that says Please fill out this field" src="https://mdn.mozillademos.org/files/15241/firefox-required-message.png" style="display: block; margin: 0 auto;"></p> + +<p>当您尝试使用输入中包含的不同类型的无效数据提交表单时，将显示不同的消息； 请参阅以下示例。</p> + +<h3 id="输入值长度">输入值长度</h3> + +<p>您可以使用 <code>{{htmlattrxref("minlength", "input")}}</code> 属性为输入的值指定最小长度（以字符为单位）； 同样，使用 <code>{{htmlattrxref("maxlength", "input")}}</code> 设置输入值的最大长度。</p> + +<p>下面的示例要求输入的值的长度为4–8个字符。</p> + +<pre class="brush: html notranslate"><form> + <div> + <label for="mySearch">Search for user</label> + <input type="search" id="mySearch" name="q" + placeholder="User IDs are 4–8 characters in length" required + size="30" minlength="4" maxlength="8"> + <button>Search</button> + <span class="validity"></span> + </div> +</form></pre> + +<div class="hidden"> +<pre class="brush: css notranslate">input { + margin-right: 10px; +} + +input:invalid ~ span:after { + content: '✖'; + padding-left: 5px; + position: absolute; +} + +input:valid ~ span:after { + content: '✓'; + padding-left: 5px; + position: absolute; +}</pre> +</div> + +<p>如下所示：</p> + +<p>{{ EmbedLiveSample('Input_value_length', 600, 40) }}</p> + +<p>如果您尝试提交少于4个字符的表单，则会收到相应的错误消息（不同的浏览器会有所不同）。 如果尝试超过8个字符，浏览器将不允许您访问。</p> + +<h3 id="指定模式">指定模式</h3> + +<p>您可以使用 <code>{{htmlattrxref("pattern", "input")}}</code> 属性指定一个正则表达式，输入值必须遵循该正则表达式才能被视为有效 (请参照 <a href="/en-US/docs/Learn/HTML/Forms/Form_validation#Validating_against_a_regular_expression">Validating against a regular expression</a>).</p> + +<p>让我们看一个例子。 假设我们想提供一个产品ID搜索表格，这些ID都是由两个字母和四个数字组成的代码。 以下示例对此进行了介绍：</p> + +<pre class="brush: html notranslate"><form> + <div> + <label for="mySearch">Search for product by ID:</label> + <input type="search" id="mySearch" name="q" + placeholder="two letters followed by four numbers" required + size="30" pattern="[A-z]{2}[0-9]{4}"> + <button>Search</button> + <span class="validity"></span> + </div> +</form></pre> + +<div class="hidden"> +<pre class="brush: css notranslate">input { + margin-right: 10px; +} + +input:invalid ~ span:after { + content: '✖'; + padding-left: 5px; + position: absolute; +} + +input:valid ~ span:after { + content: '✓'; + padding-left: 5px; + position: absolute; +}</pre> +</div> + +<p>如下所示：</p> + +<p>{{ EmbedLiveSample('Specifying_a_pattern', 600, 40) }}</p> + +<h2 id="例子">例子</h2> + +<p>您可以在我们的网站 <a class="external external-icon" href="https://github.com/mdn/learning-area/tree/master/accessibility/aria/website-aria-roles">website-aria-roles</a> 示例中看到一个在上下文中使用搜索表单的一个好例子 (<a class="external external-icon" href="http://mdn.github.io/learning-area/accessibility/aria/website-aria-roles/">see it live</a>).</p> + +<h2 id="规范">规范</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'input.html#text-(type=text)-state-and-search-state-(type=search)', '<input type="search">')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>初始化定义</td> + </tr> + <tr> + <td>{{SpecName('HTML5.1', 'sec-forms.html#text-typetext-state-and-search-state-typesearch', '<input type="search">')}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td>初始化定义</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<div class="hidden">此页面上的兼容性表是根据结构化数据生成的。 如果您想提供数据，请查看 <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> 并向我们发送拉取请求。</div> + +<p>{{Compat("html.elements.input.input-search")}}</p> + +<p><font face="x-locale-heading-primary, zillaslab, Palatino, Palatino Linotype, x-locale-heading-secondary, serif"><span style="font-size: 37.33327865600586px;"><strong>参见</strong></span></font></p> + +<ul> + <li><a href="/en-US/docs/Learn/HTML/Forms">HTML 表单</a></li> + <li>{{HTMLElement("input")}} 及其所基于的接口 {{domxref("HTMLInputElement")}} </li> + <li><code><a href="/en-US/docs/Web/HTML/Element/input/text"><input type="text"></a></code></li> + <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/HTML/Forms/Property_compatibility_table_for_form_widgets">CSS 属性的兼容性</a></li> +</ul> diff --git a/files/zh-cn/web/html/element/input/submit/index.html b/files/zh-cn/web/html/element/input/submit/index.html new file mode 100644 index 0000000000..74547b0445 --- /dev/null +++ b/files/zh-cn/web/html/element/input/submit/index.html @@ -0,0 +1,281 @@ +--- +title: <input type="submit"> +slug: Web/HTML/Element/Input/submit +tags: + - HTML + - Input + - Input Type + - submit + - 元素 + - 按钮 + - 表单 + - 表单按钮 + - 表单输入 +translation_of: Web/HTML/Element/input/submit +--- +<div>{{HTMLRef}}</div> + +<p><span class="seoSummary"><strong><code>submit</code></strong> 类型的 {{HTMLElement("input")}} 元素被渲染成按钮. 当 {{event("click")}} 事件发生时(用户点击按钮是一个典型的点击事件), {{Glossary("用户代理")}} 试图提交表单到服务器.</span></p> + +<div id="summary-example2"> +<pre class="brush: html"><input type="submit" value="发送请求"></pre> +</div> + +<p>{{EmbedLiveSample("summary-example2", 650, 30)}}</p> + +<table class="properties"> + <tbody> + <tr> + <td><strong>{{anch("值")}}</strong></td> + <td>{{domxref("DOMString")}} 展示在按钮的标签内</td> + </tr> + <tr> + <td><strong>事件</strong></td> + <td>{{event("click")}}</td> + </tr> + <tr> + <td><strong>支持的公共属性</strong></td> + <td>{{htmlattrxref("type", "input")}} and {{htmlattrxref("value", "input")}}</td> + </tr> + <tr> + <td><strong>IDL 属性</strong></td> + <td><code>value</code></td> + </tr> + <tr> + <td><strong>方法</strong></td> + <td>无</td> + </tr> + </tbody> +</table> + +<h2 id="Value">Value</h2> + +<p><code><input type="submit"></code> 元素的 {{htmlattrxref("value", "input")}} 属性 包含一个展示在按钮标签上的 {{domxref("DOMString")}}，否则按钮没有正确的 value 值。</p> + +<div id="summary-example3"> +<pre class="brush: html"><input type="submit" value="发送请求"></pre> +</div> + +<p>{{EmbedLiveSample("summary-example3", 650, 30)}}</p> + +<p>如果没有指定一个<code>value</code> 值, 按钮将会有一个通过用户代理选择的默认label。 这个label可能是 "Submit" 或者"Submit Query." 这里有一个默认label的提交按钮:</p> + +<div id="summary-example1"> +<pre class="brush: html"><input type="submit"></pre> +</div> + +<p>{{EmbedLiveSample("summary-example1", 650, 30)}}</p> + +<h2 id="额外属性值">额外属性值</h2> + +<p>除了所有 {{HTMLElement("input")}} 元素共享的属性外，提交 <code>submit</code> 按钮输入还支持以下属性：</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">属性</th> + <th scope="col">描述</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>{{anch("formaction")}}</code></td> + <td>提交表单数据的URL； 覆盖表单的{{htmlattrxref("action", "form")}} 属性（如果有）</td> + </tr> + <tr> + <td><code>{{anch("formenctype")}}</code></td> + <td>一个字符串，指定用于表单数据的编码类型</td> + </tr> + <tr> + <td><code>{{anch("formmethod")}}</code></td> + <td>提交表单时使用的HTTP方法 ({{HTTPMethod("get")}} 或 {{HTTPMethod("post")}}) </td> + </tr> + <tr> + <td><code>{{anch("formnovalidate")}}</code></td> + <td>一个布尔值，如果存在，则意味着在将数据提交给服务器之前，表单的字段将不受约束验证（<a href="/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation">constraint validation</a>）</td> + </tr> + <tr> + <td><code>{{anch("formtarget")}}</code></td> + <td>提交表单后，将服务器返回的响应加载到 {{Glossary("browsing context")}} 中</td> + </tr> + </tbody> +</table> + +<h3 id="htmlattrdefformaction">{{htmlattrdef("formaction")}}</h3> + +<p>一个字符串，指示要将数据提交到的URL。 这优先于拥有 {{HTMLElement("input")}} 的 {{HTMLElement("form")}} 元素上的 {{htmlattrxref("action", "form")}} 属性。</p> + +<p>此属性在 <code><a href="/en-US/docs/Web/HTML/Element/input/image"><input type="image"></a></code> 元素和{{HTMLElement("button")}} 元素上也可用。</p> + +<h3 id="htmlattrdefformenctype">{{htmlattrdef("formenctype")}}</h3> + +<p>一个字符串，标识在将表单数据提交到服务器时要使用的编码方法。 有三个允许的值：</p> + +<dl> + <dt><code>application/x-www-form-urlencoded</code></dt> + <dd>这是默认值，它使用 {{jsxref("encodeURI", "encodeURI()")}} 之类的算法对文本进行URL编码后，以字符串形式发送表单数据。</dd> + <dt><code>multipart/form-data</code></dt> + <dd>使用 {{domxref("FormData")}} API来管理数据，从而允许将文件提交到服务器。 如果您的表单包含 {{htmlattrxref("type", "input")}} <code>file</code> (<code><a href="/en-US/docs/Web/HTML/Element/input/file"><input type="file"></a></code>) 的任何 {{HTMLElement("input")}} 元素，则必须使用此编码类型。</dd> + <dt><code>text/plain</code></dt> + <dd>纯文本; 通常仅对调试有用，因此您可以轻松查看要提交的数据。</dd> +</dl> + +<p>如果指定，则 <code>formenctype</code> 属性的值将覆盖拥有表单的 {{htmlattrxref("action", "form")}}属性。</p> + +<p>此属性在 <code><a href="/en-US/docs/Web/HTML/Element/input/image"><input type="image"></a></code> 元素和{{HTMLElement("button")}} 元素上也可用。</p> + +<h3 id="htmlattrdefformmethod">{{htmlattrdef("formmethod")}}</h3> + +<p>一个字符串，指示提交表单数据时要使用的HTTP方法； 此值将覆盖拥有表单上给出的任何 {{htmlattrxref("method", "form")}} 属性。 允许的值为：</p> + +<dl> + <dt><code>get</code></dt> + <dd>通过从 <code>formaction</code> 或 {{htmlattrxref("action", "form")}} 通过从 ("?") 字符，然后附加表单数据，按照如下所述进行编码来构造URL 通过 <code>formenctype</code> 或表单的 {{htmlattrxref("enctype", "form")}} 属性。 然后，使用HTTP {{HTTPMethod("get")}}请求将该URL发送到服务器。 此方法适用于仅包含ASCII字符且没有副作用的简单形式。 这是默认值。</dd> + <dt><code>post</code></dt> + <dd>表单的数据包含在请求的正文中，该请求的正文使用HTTP {{HTTPMethod("post")}} 发送到由 <code>formaction</code> 或 {{htmlattrxref("action", "form")}} 属性指定的URL 请求。 此方法支持复杂的数据和文件附件。</dd> + <dt><code>dialog</code></dt> + <dd>此方法用于指示按钮仅关闭与输入关联的对话框，而根本不传输表单数据。</dd> +</dl> + +<p>此属性在 <code><a href="/en-US/docs/Web/HTML/Element/input/image"><input type="image"></a></code> 元素和{{HTMLElement("button")}} 元素上也可用。</p> + +<h3 id="htmlattrdefformnovalidate">{{htmlattrdef("formnovalidate")}}</h3> + +<p>布尔属性，如果存在，则指定在提交给服务器之前不应对表单进行验证。 这将覆盖元素拥有表单上的 {{htmlattrxref("novalidate", "form")}} 属性的值。</p> + +<p>此属性在 <code><a href="/en-US/docs/Web/HTML/Element/input/image"><input type="image"></a></code> 元素和{{HTMLElement("button")}} 元素上也可用。</p> + +<h3 id="htmlattrdefformtarget">{{htmlattrdef("formtarget")}}</h3> + +<p>一个字符串，它指定一个名称或关键字，该名称或关键字指示提交表单后在何处显示收到的响应。 该字符串必须是<strong>浏览上下文</strong>的名称 (即选项卡，窗口或 {{HTMLElement("iframe")}}。 此处指定的值将覆盖 {{HTMLElement("form")}} 上拥有此输入的 {{htmlattrxref("target", "form")}} 属性。</p> + +<p>除了选项卡，窗口或嵌入式框架的实际名称之外，还可以使用一些特殊的关键字：</p> + +<dl> + <dt><code>_self</code></dt> + <dd>将响应加载到与包含表单的浏览上下文相同的浏览上下文中。 这将用接收到的数据替换当前文档。 如果未指定，则使用默认值。</dd> + <dt><code>_blank</code></dt> + <dd>将响应加载到新的未命名浏览上下文中。 这通常是一个与当前文档相同的窗口中的新选项卡，但是根据 {{Glossary("user agent")}} 的配置可能会有所不同。</dd> + <dt><code>_parent</code></dt> + <dd>将响应加载到当前浏览器的父浏览上下文中。 如果没有父上下文，则其行为与 <code>_self</code> 相同。</dd> + <dt><code>_top</code></dt> + <dd>将响应加载到顶级浏览上下文中； 这是浏览上下文，它是当前上下文的最高级祖先。 如果当前上下文是最顶层的上下文，则其行为与 <code>_self</code>相同。</dd> +</dl> + +<p>此属性在 <code><a href="/en-US/docs/Web/HTML/Element/input/image"><input type="image"></a></code> 元素和{{HTMLElement("button")}} 元素上也可用。</p> + +<h2 id="使用提交按钮">使用提交按钮</h2> + +<p><code><input type="submit"></code> 按钮用于提交form表单. 如果你想要创建一个自定义的按钮，然后通过JavaScript自定义按钮的行为，你需要使用 <code><a href="/en-US/docs/Web/HTML/Element/input/button"><input type="button"></a></code>, 或者使用更好的 {{htmlelement("button")}} 元素.</p> + +<p>如果你选择使用<code><button></code> 在你的form表单里创建按钮, 请记住: 它只是在{{HTMLElement("form")}}内部的 <code><button></code> ， 应该被当作 "submit" 按钮来处理。 所以你应该有一个明确指定哪一个按钮是提交按钮的习惯。</p> + +<h3 id="一个简单的提交按钮">一个简单的提交按钮</h3> + +<p>我们将通过创建含有一个简单的提交按钮的表单来开始：</p> + +<pre class="brush: html"><form> + <div> + <label for="example">Let's submit some text</label> + <input id="example" type="text" name="text"> + </div> + <div> + <input type="submit" value="Send"> + </div> +</form> +</pre> + +<p>渲染效果如下:</p> + +<p>{{EmbedLiveSample("A_simple_submit_button", 650, 100)}}</p> + +<p>试着输入一些文字到文本字段, 然后提交表单.</p> + +<p>在提交时，键值对数据将会被发送到服务端。在此列子中，字符串将会是 <code>"text=<em>usertext</em>"</code>, "usertext" 是用户输入的字符在转换为被保护的特殊字符. 数据被如何提交、提交到哪都由 <code><form>的设置决定</code>; 到<a href="/en-US/docs/Learn/HTML/Forms/Sending_and_retrieving_form_data">Sending form data</a> 获取更多细节.</p> + +<h3 id="添加提交的快捷键">添加提交的快捷键</h3> + +<p>键盘快捷键就是使用键盘上的按键, 让用户使用按键或组合按键来触发按钮。 为了在提交按钮上添加键盘快捷键— 就像使用任何有实际意义的 {{HTMLElement("input")}} 一样，您可以使用 {{htmlattrxref("accesskey")}} 全局属性。</p> + +<p>在此示例中，将 <kbd>s</kbd> 指定为访问键 (指定为访问键 <kbd>s</kbd> p键加上浏览器/操作系统组合的特定修饰键。为了避免与用户代理自身的键盘快捷键冲突，请使用不同的修饰键 而不是主机上其他快捷方式的访问键。有关更多详细信息，请参见 {{htmlattrxref("accesskey")}}。</p> + +<p>这是添加了 <kbd>s</kbd> 访问密钥的上一个示例：</p> + +<pre class="brush: html"><form> + <div> + <label for="example">Let's submit some text</label> + <input id="example" type="text" name="text"> + </div> + <div> + <input type="submit" value="Send" + accesskey="s"> + </div> +</form></pre> + +<p>例如，在Mac版Firefox中，按 <kbd>Control</kbd>-<kbd>Option</kbd>-<kbd>S</kbd> 会触发“发送”按钮，而Windows上的Chrome使用 <kbd>Alt</kbd>+<kbd>S</kbd>.</p> + +<p>{{EmbedLiveSample("Adding_a_submit_keyboard_shortcut", 650, 100)}}</p> + +<p>上面示例的问题是用户将不知道访问密钥是什么！ 尤其如此，因为修饰符通常是非标准的以避免冲突。 在构建网站时，请确保以不干扰网站设计的方式提供此信息（例如，通过提供易于访问的链接来指向有关网站访问密钥的信息）。 向按钮添加工具提示 (使用 {{htmlattrxref("title")}} 属性) 也可以有所帮助，尽管这并不是出于可访问性目的的完整解决方案。</p> + +<h3 id="禁用和启用提交按钮">禁用和启用提交按钮</h3> + +<p>要禁用提交按钮，只需在其上指定 {{htmlattrxref("disabled")}} 全局属性，如下所示：</p> + +<div id="disable-example1"> +<pre class="brush: html"><input type="submit" value="Disabled" disabled></pre> +</div> + +<p>您可以在运行时通过简单地将<code>disable</code>设置为<code>true</code>或<code>false</code>来启用和禁用按钮。 在JavaScript中，这看起来像 <code>btn.disabled = true</code> or <code>btn.disabled = false</code>.</p> + +<div class="note"> +<p>有关启用和禁用按钮的更多想法，请参见 <code><a href="/en-US/docs/Web/HTML/Element/input/button#Disabling_and_enabling_a_button"><input type="button"></a></code> 。</p> +</div> + +<h2 id="验证方式">验证方式</h2> + +<p>提交按钮不参与约束验证； 他们没有约束的真实价值。</p> + +<h2 id="例子">例子</h2> + +<p>我们在上面提供了一些简单的示例。 关于提交按钮，实际上没有什么可说的。 有时将这种控件称为“简单按钮”是有原因的。</p> + +<h2 id="规范">规范</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">规范</th> + <th scope="col">状态</th> + <th scope="col">备注</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'forms.html#submit-button-state-(type=submit)', '<input type="submit">')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'forms.html#submit-button-state-(type=submit)', '<input type="submit">')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<div class="hidden">此页面上的兼容性表是根据结构化数据生成的。 如果您想贡献数据，请查看 <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> 并向我们发送拉取请求。</div> + +<p>{{Compat("html.elements.input.input-submit")}}</p> + +<h2 id="参见">参见</h2> + +<ul> + <li>{{HTMLElement("input")}} and the {{domxref("HTMLInputElement")}} interface which implements it.</li> + <li><a href="/en-US/docs/Learn/HTML/Forms_and_buttons">Forms and buttons</a></li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/forms">Forms (accessibility)</a></li> + <li><a href="/en-US/docs/Learn/HTML/Forms">HTML forms</a></li> + <li>{{HTMLElement("button")}} 元素</li> +</ul> diff --git a/files/zh-cn/web/html/element/input/tel/index.html b/files/zh-cn/web/html/element/input/tel/index.html new file mode 100644 index 0000000000..8c5eb25600 --- /dev/null +++ b/files/zh-cn/web/html/element/input/tel/index.html @@ -0,0 +1,491 @@ +--- +title: <input type="tel"> +slug: Web/HTML/Element/Input/tel +tags: + - HTML + - HTML 标签 + - 元素 + - 电话号码 + - 表单 + - 表单输入元素 + - 输入框 + - 输入类型 +translation_of: Web/HTML/Element/input/tel +--- +<div>{{HTMLRef}}</div> + +<p><span class="seoSummary">{{HTMLElement("input")}} <code><strong>"tel"</strong></code> 类型的元素用于让用户输入和编辑电话号码。 Unli不同于<code><a href="/en-US/docs/Web/HTML/Element/input/email"><input type="email"></a></code> 和 <code><a href="/en-US/docs/Web/HTML/Element/input/url"><input type="url"></a></code> , 在提交表格之前，输入值不会被自动验证为特定格式，因为世界各地的电话号码格式差别很大。</span></p> + +<p>尽管 <code>tel</code> 类型的输入在功能上和 <code>text</code> 输入一致, 但它们确实有用; 其中最明显的就是移动浏览器— 特别是在手机上 — 可能会选择提供为输入电话号码而优化的自定义键盘。使用电话号码的特定输入类型也使添加自定义验证和处理电话号码更方便。</p> + +<div class="note"> +<p>不支持 <code>"tel"</code> 类型的浏览器会默认使用 <code><a href="/en-US/docs/Web/HTML/Element/input/text">"text"</a></code> 类型输入.</p> +</div> + +<div id="Basic_example"> +<pre class="brush: html"><input id="telNo" type="tel"></pre> + +<p>{{ EmbedLiveSample('Basic_example', 600, 40) }}</p> +</div> + +<table class="properties"> + <tbody> + <tr> + <td><strong>{{anch("Value")}}</strong></td> + <td>A {{domxref("DOMString")}} representing a telephone number, or empty</td> + </tr> + <tr> + <td><strong>Events</strong></td> + <td>{{event("change")}} and {{event("input")}}</td> + </tr> + <tr> + <td><strong>Supported Common Attributes</strong></td> + <td>{{htmlattrxref("autocomplete", "input")}}, {{htmlattrxref("list", "input")}}, {{htmlattrxref("maxlength", "input")}}, {{htmlattrxref("minlength", "input")}}, {{htmlattrxref("pattern", "input")}}, {{htmlattrxref("placeholder", "input")}}, {{htmlattrxref("readonly", "input")}}, and {{htmlattrxref("size", "input")}}</td> + </tr> + <tr> + <td><strong>IDL attributes</strong></td> + <td><code>list</code>, <code>selectionStart</code>, <code>selectionEnd</code>, <code>selectionDirection</code>, and <code>value</code></td> + </tr> + <tr> + <td><strong>Methods</strong></td> + <td>{{domxref("HTMLInputElement.select", "select()")}}, {{domxref("HTMLInputElement.setRangeText", "setRangeText()")}}, {{domxref("HTMLInputElement.setSelectionRange", "setSelectionRange()")}}</td> + </tr> + </tbody> +</table> + +<h2 id="值">值</h2> + +<p>{{HTMLElement("input")}} 元素的 {{htmlattrxref("value", "input")}} 属性包含一个{{domxref("DOMString")}} 表示一个电话号码或者一个空字符串 (<code>""</code>).</p> + +<h2 id="使用_tel_输入">使用 tel 输入</h2> + +<p>电话号码是网络上非常普遍收集的数据类型。例如，在创建任何类型的注册或电子商务网站时，无论出于商业目的还是出于紧急联系目的，您都可能需要向用户索要电话号码。鉴于通常输入的电话号码是多少，不幸的是，用于验证电话号码的“一刀切”解决方案是不实际的。</p> + +<p>幸运的是，您可以考虑自己网站的要求，并自行实施适当的验证级别。有关详细信息，请参阅下面的 {{anch("Validation")}}</p> + +<h3 id="自定义键盘">自定义键盘</h3> + +<p><code><input type="tel"></code> 主要优势是它可以在移动浏览器显示一个特殊的电话号码输入键盘, For 例如，这是键盘在几种设备上的外观。</p> + +<table class="standard-table"> + <caption>移动设备上自定义键盘的示例。</caption> + <thead> + <tr> + <th scope="col">Firefox for Android</th> + <th scope="col">WebKit iOS (Safari/Chrome/Firefox)</th> + </tr> + </thead> + <tbody> + <tr> + <td><img alt="Firefox for Android screen shot" src="https://mdn.mozillademos.org/files/15441/fx-android-tel.png" style="height: 640px; width: 360px;"></td> + <td><img alt="Firefox for iOS screenshot" src="https://mdn.mozillademos.org/files/15603/iphone-tel-keyboard-50pct.png" style="height: 640px; width: 360px;"></td> + </tr> + </tbody> +</table> + +<h3 id="一个简单的tel输入">一个简单的tel输入</h3> + +<p>在最基本的形式中，tel输入可以这样实现：</p> + +<pre class="brush: html"><label for="telNo">Phone number:</label> +<input id="telNo" name="telNo" type="tel"></pre> + +<p>{{ EmbedLiveSample('A_simple_tel_input', 600, 40) }}</p> + +<p>这里没有什么神奇的事情发生。当提交给服务器时，上述输入的数据将被表示为 <code>"telNo=+12125553151"</code>.</p> + +<h3 id="占位字符">占位字符</h3> + +<p>有时候提供关于输入数据应该采用什么形式的上下文提示是很有帮助的。如果页面设计没有为每个{{HTMLElement("input")}}页面提供描述性标签，这可能是特别重要的 。所以需要占位符。一个占位符是一个值，它通过提供一个有效值的例子来演示值的形式，当元素的值是“”时，它显示在编辑框中。一旦数据输入框中，占位符消失;如果该框被清空，占位符重新出现。</p> + +<p>在这里，我们有<code>"tel"</code> 输入的占位符<code>"123-4567-8901"</code>。请注意占位符如何消失并在编辑字段内容时重新出现。</p> + +<pre class="brush: html"><input id="telNo" name="telNo" type="tel" + placeholder="123-4567-8901"></pre> + +<p>{{ EmbedLiveSample('Placeholders', 600, 40) }}</p> + +<h3 id="控制输入大小">控制输入大小</h3> + +<p>您不仅可以控制输入框的物理长度，还可以控制输入文本自身允许的最小和最大长度。</p> + +<h4 id="物理输入元素大小">物理输入元素大小</h4> + +<p>可以使用 {{htmlattrxref("size", "input")}} 属性来控制输入框的物理大小, 使用它,你可以指定输入框一次可显示的字符数,在下面的例子中 <code>tel</code> 编辑框是20个字符的宽度:</p> + +<pre class="brush: html"><input id="telNo" name="telNo" type="tel" + size="20"></pre> + +<p>{{ EmbedLiveSample('Physical_input_element_size', 600, 40) }}</p> + +<h4 id="元素值的长度">元素值的长度</h4> + +<p><code>size</code> 和电话号码的长度限制是分开的, 你可以使用 {{htmlattrxref("minlength", "input")}} 属性为输入电话的最小长度;同样使用 {{htmlattrxref("maxlength", "input")}} 设置输入电话号码的最大长度.</p> + +<p>下面的示例创建了一个20个字符的电话号码输入框，要求内容不少于9个字符且不超过14个字符。</p> + +<pre class="brush: html"><input id="telNo" name="telNo" type="tel" + size="20" minlength="9" maxlength="14"></pre> + +<p>{{EmbedLiveSample("Element_value_length", 600, 40) }}</p> + +<div class="note"> +<p><strong>注意</strong>: 上述属性确实会影响 {{anch("validation", "Validation")}} — 如果值的长度小于9个字符，或者大于14个，上述示例的输入将被视为无效。甚至不会让你输入超过最大长度的值。</p> +</div> + +<h3 id="提供默认选项">提供默认选项</h3> + +<p>与往常一样, 你可以通过设置其 {{htmlattrxref("value", "input")}} 属性为<code>"tel"</code>输入框提供默认值:</p> + +<div id="Default_value"> +<pre class="brush: html"><input id="telNo" name="telNo" type="tel" + value="333-4444-4444"></pre> +</div> + +<p>{{EmbedLiveSample("Default_value", 600, 40)}}</p> + +<h4 id="提供建议值">提供建议值</h4> + +<p>Taking it a step farther, you can provide a list of default phone number values from which the user can select. To do this, use the {{htmlattrxref("list", "input")}} attribute. This doesn't limit the user to those options, but does allow them to select commonly-used telephone numbers more quickly. This also offers hints to {{htmlattrxref("autocomplete", "input")}}. The <code>list</code> attribute specifies the ID of a {{HTMLElement("datalist")}} element, which in turn contains one {{HTMLElement("option")}} element per suggested value; each <code>option</code>'s <code>value</code> is the corresponding suggested value for the telephone number entry box.</p> + +<pre class="brush: html"><label for="telNo">Phone number: </label> +<input id="telNo" name="telNo" type="tel" list="defaultTels"> + +<datalist id="defaultTels"> + <option value="111-1111-1111"> + <option value="122-2222-2222"> + <option value="333-3333-3333"> + <option value="344-4444-4444"> +</datalist></pre> + +<p>{{EmbedLiveSample("Offering_suggested_values", 600, 40)}}</p> + +<p>With the {{HTMLElement("datalist")}} element and its {{HTMLElement("option")}}s in place, the browser will offer the specified values as potential values for the email address; this is typically presented as a popup or drop-down menu containing the suggestions. While the specific user experience may vary from one browser to another, typically clicking in the edit box presents a drop-down of the suggested email addresses. Then, as the user types, the list is adjusted to show only filtered matching values. Each typed character narrows down the list until the user makes a selection or types a custom value.</p> + +<p>Here's a screenshot of what that might look like:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/15605/phone-number-with-options.png" style="border-style: solid; border-width: 1px; height: 150px; width: 684px;"></p> + +<h2 id="验证">验证</h2> + +<p>正如我们之前谈到的那样，为电话号码提供一种通用的客户端验证解决方案是相当困难的。所以，我们能做些什么？让我们考虑一些选项。</p> + +<div class="warning"> +<p><strong>重要</strong>: HTML表单验证不能替代服务器端脚本，以确保输入的数据在被允许进入数据库之前是正确的格式。对于有些人来说，调整html是非常容易的，这样他们就可以绕过验证，或者完全删除它。也有人可能完全绕过你的html，直接提交数据到你的服务器。如果您的服务器端代码无法验证接收到的数据，那么当格式不正确的数据（或数据太大，类型错误等等）输入到数据库时，可能会导致灾难。</p> +</div> + +<h3 id="要求电话号码必填">要求电话号码必填</h3> + +<p>You can make it so that an empty input is invalid and won't be submitted to the server using the {{htmlattrxref("required", "input")}} attribute. For example, let's use this HTML:</p> + +<pre class="brush: html"><form> + <div> + <label for="telNo">Enter a telephone number (required): </label> + <input id="telNo" name="telNo" type="tel" required> + <span class="validity"></span> + </div> + <div> + <button>Submit</button> + </div> +</form></pre> + +<p>And let's include the following CSS to highlight valid entries with a checkmark and invalid entries with a cross:</p> + +<pre class="brush: css">div { + margin-bottom: 10px; + position: relative; +} + +input[type="number"] { + width: 100px; +} + +input + span { + padding-right: 30px; +} + +input:invalid+span:after { + position: absolute; content: '✖'; + padding-left: 5px; + color: #8b0000; +} + +input:valid+span:after { + position: absolute; + content: '✓'; + padding-left: 5px; + color: #009000; +}</pre> + +<p>The output looks like this:</p> + +<p>{{EmbedLiveSample("Making_telephone_numbers_required", 700, 70)}}</p> + +<h3 id="Pattern_validation">Pattern validation</h3> + +<p>If you want to further restrict entered numbers so they also have to conform to a specific pattern, you can use the {{htmlattrxref("pattern","input")}} attribute, which takes as its value a {{Glossary("regular expression")}} that entered values have to match.</p> + +<p>In this example we'll use the same CSS as before, but our HTML is changed to look like this:</p> + +<pre class="brush: html"><form> + <div> + <label for="telNo">Enter a telephone number (in the form xxx-xxx-xxxx): </label> + <input id="telNo" name="telNo" type="tel" required + pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}"> + <span class="validity"></span> + </div> + <div> + <button>Submit</button> + </div> +</form></pre> + +<div class="hidden"> +<pre class="brush: css">div { + margin-bottom: 10px; + position: relative; +} + +input[type="number"] { + width: 100px; +} + +input + span { + padding-right: 30px; +} + +input:invalid+span:after { + position: absolute; content: '✖'; + padding-left: 5px; + color: #8b0000; +} + +input:valid+span:after { + position: absolute; + content: '✓'; + padding-left: 5px; + color: #009000; +}</pre> +</div> + +<p>{{EmbedLiveSample("Pattern_validation", 700, 70)}}</p> + +<p>Notice how the entered value is reported as invalid unless the pattern xxx-xxx-xxxx is matched; for instance, 41-323-421 won't be accepted. Neither will 800-MDN-ROCKS. However, 865-555-6502 will be accepted. This particular pattern is obviously only useful for certain locales — in a real application you'd probably have to vary the pattern used depending on the locale of the user.</p> + +<h2 id="Examples">Examples</h2> + +<p>In this example, we present a simple interface with a {{htmlelement("select")}} element that lets the user choose which country they're in, and a set of <code><input type="tel"></code> elements to let them enter each part of their phone number; there is no reason why you can't have multiple <code>tel</code> inputs.</p> + +<p>Each input has a {{htmlattrxref("placeholder","input")}} attribute to show a hint to sighted users about what to enter into it, a {{htmlattrxref("pattern","input")}} to enforce a specific number of characters for the desired section, and an <code>aria-label</code> attribute to contain a hint to be read out to screenreader users about what to enter into it.</p> + +<pre class="brush: html"><form> + <div> + <label for="country">Choose your country:</label> + <select id="country" name="country"> + <option>UK</option> + <option selected>US</option> + <option>Germany</option> + </select> + </div> + <div> + <p>Enter your telephone number: </p> + <span class="areaDiv"> + <input id="areaNo" name="areaNo" type="tel" required + placeholder="Area code" pattern="[0-9]{3}" + aria-label="Area code"> + <span class="validity"></span> + </span> + <span class="number1Div"> + <input id="number1" name="number1" type="tel" required + placeholder="First part" pattern="[0-9]{3}" + aria-label="First part of number"> + <span class="validity"></span> + </span> + <span class="number2Div"> + <input id="number2" name="number2" type="tel" required + placeholder="Second part" pattern="[0-9]{4}" + aria-label="Second part of number"> + <span class="validity"></span> + </span> + </div> + <div> + <button>Submit</button> + </div> +</form></pre> + +<p>The JavaScript is relatively simple — it contains an {{domxref("GlobalEventHandlers.onchange", "onchange")}} event handler that, when the <code><select></code> value is changed, updates the <code><input></code> element's <code>pattern</code>, <code>placeholder</code>, and <code>aria-label</code> to suit the format of telephone numbers in that country/territory.</p> + +<pre class="brush: js">var selectElem = document.querySelector("select"); +var inputElems = document.querySelectorAll("input"); + +selectElem.onchange = function() { + for(var i = 0; i < inputElems.length; i++) { + inputElems[i].value = ""; + } + + if(selectElem.value === "US") { + inputElems[2].parentNode.style.display = "inline"; + + inputElems[0].placeholder = "Area code"; + inputElems[0].pattern = "[0-9]{3}"; + + inputElems[1].placeholder = "First part"; + inputElems[1].pattern = "[0-9]{3}"; + inputElems[1].setAttribute("aria-label","First part of number"); + + inputElems[2].placeholder = "Second part"; + inputElems[2].pattern = "[0-9]{4}"; + inputElems[2].setAttribute("aria-label","Second part of number"); + } else if(selectElem.value === "UK") { + inputElems[2].parentNode.style.display = "none"; + + inputElems[0].placeholder = "Area code"; + inputElems[0].pattern = "[0-9]{3,6}"; + + inputElems[1].placeholder = "Local number"; + inputElems[1].pattern = "[0-9]{4,8}"; + inputElems[1].setAttribute("aria-label","Local number"); + } else if(selectElem.value === "Germany") { + inputElems[2].parentNode.style.display = "inline"; + + inputElems[0].placeholder = "Area code"; + inputElems[0].pattern = "[0-9]{3,5}"; + + inputElems[1].placeholder = "First part"; + inputElems[1].pattern = "[0-9]{2,4}"; + inputElems[1].setAttribute("aria-label","First part of number"); + + inputElems[2].placeholder = "Second part"; + inputElems[2].pattern = "[0-9]{4}"; + inputElems[2].setAttribute("aria-label","Second part of number"); + } +}</pre> + +<p>The example looks like this:</p> + +<p>{{EmbedLiveSample('Examples', 600, 140)}}</p> + +<p>这是一个有趣的想法，它显示了处理国际电话号码问题的潜在解决方案。你将不得不扩大这个范例，为潜在的每个国家提供正确的模式，这将是很多工作，并且仍然没有万无一失的保证，用户将正确地输入他们的号码。</p> + +<p>它让你想知道是否值得在客户端面对所有这些麻烦，当你可以让用户以他们想要的任何格式在客户端输入他们的号码，然后在服务器上验证和审查。但是这个选择是你的。</p> + +<div class="hidden"> +<pre class="brush: css">div { +margin-bottom: 10px; +position: relative; +} + +input[type="number"] { + width: 100px; +} + +input + span { + padding-right: 30px; +} + +input:invalid+span:after { + position: absolute; content: '✖'; + padding-left: 5px; + color: #8b0000; +} + +input:valid+span:after { + position: absolute; + content: '✓'; + padding-left: 5px; + color: #009000; +}</pre> +</div> + +<h2 id="规范">规范</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'forms.html#tel-state-(type=tel)', '<input type="tel">')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>Initial definition</td> + </tr> + <tr> + <td>{{SpecName('HTML5.1', 'sec-forms.html#tel-state-typetel', '<input type="tel">')}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>10</td> + <td>10.62</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Edge</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>iOS WebKit<br> + <sup><sub>(Safari/Chrome/Firefox/etc)</sub></sup></th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="参见">参见</h2> + +<ul> + <li><a href="/en-US/docs/Learn/HTML/Forms">HTML forms guide</a></li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/forms">Forms and accessibility</a></li> + <li>{{HTMLElement("input")}} + <ul> + <li><code><a href="/en-US/docs/Web/HTML/Element/input/text"><input type="text"></a></code></li> + <li><code><a href="/en-US/docs/Web/HTML/Element/input/email"><input type="email"></a></code></li> + </ul> + </li> +</ul> diff --git a/files/zh-cn/web/html/element/input/text/index.html b/files/zh-cn/web/html/element/input/text/index.html new file mode 100644 index 0000000000..4f042ccd48 --- /dev/null +++ b/files/zh-cn/web/html/element/input/text/index.html @@ -0,0 +1,458 @@ +--- +title: <input type="text"> +slug: Web/HTML/Element/Input/text +tags: + - HTML + - HTML 表单 + - Text + - 文本输入 + - 表单 + - 输入表单 +translation_of: Web/HTML/Element/input/text +--- +<div>{{HTMLRef}}</div> + +<p><span class="seoSummary"><code>{{HTMLElement("input")}}</code> 元素的<code><strong>text</strong></code> 类型创建基础的单行文本框.</span></p> + +<div>{{EmbedInteractiveExample("pages/tabbed/input-text.html", "tabbed-shorter")}}</div> + +<p class="hidden">交互示例的资源储存在一个github的仓库。如果你想为示例项目做贡献，请clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> 并给我们发送 pull request.</p> + +<table class="properties"> + <tbody> + <tr> + <td><strong>{{anch("值")}}</strong></td> + <td>input的一个属性，代表包含在文本框中的文字</td> + </tr> + <tr> + <td><strong>事件</strong></td> + <td>{{event("change")}} 和 {{event("input")}}</td> + </tr> + <tr> + <td><strong>支持的公共属性</strong></td> + <td>{{htmlattrxref("autocomplete", "input")}}, {{htmlattrxref("list", "input")}}, {{htmlattrxref("maxlength", "input")}}, {{htmlattrxref("minlength", "input")}}, {{htmlattrxref("pattern", "input")}}, {{htmlattrxref("placeholder", "input")}}, {{htmlattrxref("readonly", "input")}}, {{htmlattrxref("required", "input")}} and {{htmlattrxref("size", "input")}}</td> + </tr> + <tr> + <td><strong>IDL 属性</strong></td> + <td><code>value</code></td> + </tr> + <tr> + <td><strong>方法</strong></td> + <td>{{domxref("HTMLInputElement.select", "select()")}}, {{domxref("HTMLInputElement.setRangeText", "setRangeText()")}} and {{domxref("HTMLInputElement.setSelectionRange", "setSelectionRange()")}}.</td> + </tr> + </tbody> +</table> + +<h2 id="值">值</h2> + +<p><code>{{htmlattrxref("value", "input")}}</code> 属性是一个包含了文本框当前文字的<code>{{domxref("DOMString")}}</code>。 你可以在Javascript中获取 <code>{{domxref("HTMLInputElement.value")}}</code> 特性的用途。</p> + +<pre class="brush: js">let theText = myTextInput.value; +</pre> + +<p>如何输入没有验证约束 (查看 {{anch("Validation")}} 获取更多详细信息), <code>value</code>值应该是空字符串("").</p> + +<h2 id="其他属性">其他属性</h2> + +<p>除了所有 <code>{{HTMLElement("input")}}</code> 元素上共有的可操作的属性，以及忽略type属性, 文本输入框还支持以下属性:</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">属性</th> + <th scope="col">描述</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>{{anch("maxlength")}}</code></td> + <td>文本框能接受的最大字符数。</td> + </tr> + <tr> + <td><code>{{anch("minlength")}}</code></td> + <td>文本框能输入的最小字符数，并且仍然被认为是有效的。</td> + </tr> + <tr> + <td><code>{{anch("pattern")}}</code></td> + <td> 验证文本框内容的正则表达式。</td> + </tr> + <tr> + <td><code>{{anch("placeholder")}}</code></td> + <td>文本框为空时显示的一个示例值。</td> + </tr> + <tr> + <td><code>{{anch("readonly")}}</code></td> + <td>一个布尔属性，指示文本框中的内容是否应该为只读。</td> + </tr> + <tr> + <td><code>{{anch("size")}}</code></td> + <td>一个数字，指示文本框有多少个字符宽度。</td> + </tr> + <tr> + <td><code>{{anch("spellcheck")}}</code></td> + <td>控制是否可以检查文本框的拼写,或者默认的拼写检查配置是否应该使用。 </td> + </tr> + </tbody> +</table> + +<h3 id="htmlattrdefmaxlength">{{htmlattrdef("maxlength")}}</h3> + +<p>用户可以输入<code>文本</code>输入框中的最大字符(参考UTF-16编码单元)数。 必须为整数，值等于0或者更大。 如果没有规定 <code>maxlength</code> ， 或者规定的值无效, 文本输入框就没有最大值。这个值也必须更大或者等于<code>minlength</code>的值。</p> + +<p>如果文本框中的字符数大于 <code><font color="#333333" face="Consolas">maxlength</font></code><span style="background-color: transparent; color: #333333; display: inline !important; float: none; font-family: Arial,x-locale-body,sans-serif; font-size: 16px; font-style: normal; font-variant: normal; font-weight: 400; letter-spacing: 0px; text-align: left; text-decoration: none; text-indent: 0px; text-transform: none; white-space: normal;"> UTF-16编码单元，输入框的</span><a href="/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation">验证</a>就会失败。 约束验证仅作用于用户输入值的时候。</p> + +<h3 id="htmlattrdefminlength">{{htmlattrdef("minlength")}}</h3> + +<p>用户可以输入到 <code>text</code> 中的最小字符数（以UTF-16代码为单位）。 该值必须是小于或等于 <code>maxlength</code> 指定的值的非负整数值。 如果未指定 <code>minlength</code> 或指定了无效的值，则 <code>text</code> 将没有最小长度。</p> + +<p>如果输入到字段中的文本的长度小于 <code>minlength</code> UTF-16代码单元的长度，则输入将无法通过约束验证(<a href="/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation">constraint validation</a>) 约束验证仅在用户更改值时应用。</p> + +<h3 id="htmlattrdefpattern">{{htmlattrdef("pattern")}}</h3> + +<div id="pattern-include"> +<p>如果指定了 <code>pattern</code> 属性，则它是输入的 <code>{{htmlattrxref("value")}}</code> 必须匹配正则表达式，以使该值通过约束验证（<a href="/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation">constraint validation</a>）。它必须是 <code>{{jsxref("RegExp")}}</code> 类型使用有效 JavaScript 正则表达式，并且已在我们的正则表达式指南（<a href="/en-US/docs/Web/JavaScript/Guide/Regular_Expressions">guide on regular expressions</a>）中进行了说明；在编译正则表达式时指定了 <code>'u'</code> 标志，因此该模式被视为Unicode代码点的序列，而不是ASCII。 模式文本周围不能指定正斜杠。</p> + +<p>如果指定的模式未指定或无效，则不应用任何正则表达式，并且将完全忽略此属性。</p> + +<div class="note"> +<p><strong>提示：</strong>使用 <code>{{htmlattrxref("title", "input")}}</code> 属性指定大多数浏览器将显示为文本的工具提示，以说明与模式匹配的要求。 您还应该在附近添加其他说明性文字。</p> +</div> +</div> + +<p>请参照 {{anch("Specifying a pattern")}} 更多内容和例子。</p> + +<h3 id="htmlattrdefplaceholder">{{htmlattrdef("placeholder")}}</h3> + +<p><code>placeholder</code> 属性是一个字符串，可向用户提供有关该字段中需要什么样的信息的简短提示。 它应该是一个单词或短语来说明预期的数据类型，而不是说明性消息。 文本中不得包含回车符或换行符。</p> + +<p>如果控件的内容具有一个方向性的 ({{Glossary("LTR")}} 或 {{Glossary("RTL")}}) ，但需要以相反的方向性来显示占位符则可以使用Unicode双向算法格式化字符来 在占位符中覆盖方向性；请参见 {{SectionOnPage("/en-US/docs/Web/Localization/Unicode_Bidirectional_Text_Algorithm", "Overriding BiDi using Unicode control characters")}}。</p> + +<div class="note"> +<p><strong>注意：</strong>如果可以，请避免使用占位符属性。 它在语义上没有其他解释表单的方式有用，并且可能导致内容出现意外的问题。 请参见 {{SectionOnPage("/en-US/docs/Web/HTML/Element/input", "Labels and placeholders")}}。</p> +</div> + +<h3 id="htmlattrdefreadonly">{{htmlattrdef("readonly")}}</h3> + +<p>一个布尔属性，如果存在，则表示该字段不能由用户编辑。 但是，仍可以通过JavaScript代码直接设置 {{domxref("HTMLInputElement.value")}} 属性来更改其 <code>value</code>。</p> + +<div class="note"> +<p><strong>注意：</strong>因为只读字段不能有值，所以 <code>required</code> 也对指定了 <code>readonly</code> 属性的输入没有任何影响。</p> +</div> + +<h3 id="htmlattrdefsize">{{htmlattrdef("size")}}</h3> + +<p><code>size</code> 属性是一个数字值，指示输入字段应有多少个字符宽。 该值必须是一个大于零的数字，默认值是20。 根据字符和字体 (使用 {{cssxref("font")}} 设置)，结果输入可能比指定的字符数窄或宽。</p> + +<p>这并不限制用户可以在该字段中输入多少个字符。 它仅指定一次可以看到多少个。 要设置输入数据长度的上限，使用 <code>{{anch("maxlength")}}</code> 属性。</p> + +<h3 id="htmlattrdefspellcheck">{{htmlattrdef("spellcheck")}}</h3> + +<p><code>spellcheck</code> 是一个全局属性，用于指示是否启用元素的拼写检查。 它可以用于任何可编辑的内容，但是这里我们考虑与在 {{HTMLElement("input")}} 元素上使用 <code>spellcheck</code> 细节. 则 <code>spellcheck</code> 的允许值为：</p> + +<dl> + <dt><code>false</code></dt> + <dd>禁用此元素的拼写检查。</dd> + <dt><code>true</code></dt> + <dd>对此元素启用拼写检查。</dd> + <dt>"" (empty string) or no value</dt> + <dd>遵循元素的默认行为进行拼写检查。 这可能基于父元素 <code>spellcheck</code> 设置或其他因素。</dd> +</dl> + +<p>如果输入字段没有设置 {{anch("readonly")}} 属性且未禁用，则可以启用拼写检查。</p> + +<p>如果 {{Glossary("user agent", "user agent's")}} 首选项覆盖了设置，则通过读取 <code>spellcheck</code> 返回的值可能无法反映控件中拼写检查的实际状态。</p> + +<h2 id="非标准属性">非标准属性</h2> + +<p>以下非标准属性在某些浏览器上也可用。 通常应避免使用它们。</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">属性</th> + <th scope="col">描述</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>{{anch("autocorrect")}}</code></td> + <td>一个字符串，指示是否 <code>on</code> 或 <code>off</code> 自动更正。 <strong>Safari only.</strong></td> + </tr> + <tr> + <td><code>{{anch("mozactionhint")}}</code></td> + <td>一个字符串，指示当用户在编辑字段时按 <kbd>Enter</kbd> 或 <kbd>Return</kbd> 键时将执行的操作类型； 用于确定虚拟键盘上该键的适当标签。 <strong>Firefox for Android only.</strong></td> + </tr> + </tbody> +</table> + +<h3 id="htmlattrdefautocorrect_non-standard_inline">{{htmlattrdef("autocorrect")}} {{non-standard_inline}}</h3> + +<div id="autocorrect-include"> +<p>Safari扩展， the <code>autocorrect</code> 属性是一个字符串，它指示在用户编辑此字段时是否激活自动更正。 允许的值为：</p> + +<dl> + <dt><code>on</code></dt> + <dd>启用拼写错误的自动更正，以及配置文本替换（如果已配置）的处理。</dd> + <dt><code>off</code></dt> + <dd>禁用自动更正和文本替换。</dd> +</dl> +</div> + +<h3 id="htmlattrdefmozactionhint_non-standard_inline">{{htmlattrdef("mozactionhint")}} {{non-standard_inline}}</h3> + +<div id="mozactionhint-include"> +<p>一个Mozilla扩展程序，由Firefox for Android支持，它提供了一个提示，提示用户在编辑字段时按 <kbd>Enter</kbd> 或 <kbd>Return</kbd> 键将采取何种操作。 此信息用于确定在虚拟键盘上的 <kbd>Enter</kbd> 键上使用哪种标签。</p> + +<div class="note"> +<p><strong>注意:</strong> 注意：<a href="https://html.spec.whatwg.org/#input-modalities:-the-enterkeyhint-attribute">已将其标准化</a>为全局属性 {{htmlattrxref("enterkeyhint")}}，但尚未广泛实现。 要查看Firefox中正在实施的更改的状态，请参阅 {{bug(1490661)}}.</p> +</div> + +<p>允许的值为： <code>go</code>, <code>done</code>, <code>next</code>, <code>search</code>, 和 <code>send</code>. 浏览器使用此提示来决定在回车键上放置什么标签。</p> +</div> + +<h2 id="运用文本输入框">运用文本输入框</h2> + +<p><code><input></code> 元素的 <code>text</code> 类型创建基本的单行输入。 您应该在希望用户输入单行值的任何地方使用它们，并且没有更具体的输入类型可用于收集该值 (例如，如果是 <a href="/en-US/docs/Web/HTML/Element/input/datetime-local">date</a>, <a href="/en-US/docs/Web/HTML/Element/input/url">URL</a>, <a href="/en-US/docs/Web/HTML/Element/input/email">email</a>, 或 <a href="/en-US/docs/Web/HTML/Element/input/search">search term</a>, 则表示拥有更好的选择).</p> + +<h3 id="基础例子">基础例子</h3> + +<pre class="brush: html"><form> + <div> + <label for="uname">Choose a username: </label> + <input type="text" id="uname" name="name"> + </div> + <div> + <button>Submit</button> + </div> +</form></pre> + +<p>如下所示：</p> + +<p>{{EmbedLiveSample("Basic_example", 600, 50)}}</p> + +<p>提交后，发送到服务器的键值对数据将为 <code>uname=Chris</code> (如果在提交之前输入了 "Chris" 作为输入值). 您必须记住在 {{HTMLElement("input")}} 元素上包含 {{htmlattrxref("name", "input")}} 属性，否则文本字段的值将不包含在提交的数据中。</p> + +<h3 id="设置占位符">设置占位符</h3> + +<p>您可以在文本输入中提供一个有用的占位符，通过使用 {{htmlattrxref("placeholder","input")}} 属性，可以提示输入内容。 看下面的例子</p> + +<pre class="brush: html"><form> + <div> + <label for="uname">Choose a username: </label> + <input type="text" id="uname" name="name" + placeholder="Lower case, all one word"> + </div> + <div> + <button>Submit</button> + </div> +</form></pre> + +<p>您可以在下面看到占位符的呈现方式：</p> + +<p>{{EmbedLiveSample("Setting_placeholders", 600, 50)}}</p> + +<p>占位符通常以比元素的前景色更浅的颜色呈现，并且在用户开始向字段中输入文本时（或者每当字段通过设置其<code>value</code>属性以编程方式设置的值时）就自动消失。</p> + +<h3 id="输入框元素大小">输入框元素大小</h3> + +<p>可以使用 {{htmlattrxref("size", "input")}} 属性来控制输入框的尺寸。 使用它，您可以指定文本输入一次可以显示的字符数。 这会影响元素的宽度，使您可以按字符而不是像素指定宽度。 例如，在此示例中，输入为30个字符宽：</p> + +<pre class="brush: html"><form> + <div> + <label for="uname">Choose a username: </label> + <input type="text" id="uname" name="name" + placeholder="Lower case, all one word" + size="30"> + </div> + <div> + <button>Submit</button> + </div> +</form></pre> + +<p>{{ EmbedLiveSample('Physical_input_element_size', 600, 50) }}</p> + +<h2 id="验证">验证</h2> + +<p><code><input></code> 元素的 <code>text</code> 属性没有应用自动验证（因为基本文本输入需要能够接受任意字符串），但是有一些客户端验证选项可用，我们将在下面讨论。</p> + +<div class="note"> +<p><strong>注意：</strong>HTML表单验证不能替代服务器脚本，以确保输入的数据格式正确。 对于某人来说，对HTML进行调整以使其绕过验证或完全删除验证太容易了。 有人也可以完全绕开您的HTML并将数据直接提交到您的服务器。 如果服务器端代码无法验证接收到的数据，则当将格式不正确的数据（或太大，类型错误的数据等等）输入数据库时，灾难可能会发生。</p> +</div> + +<h3 id="样式注意事项">样式注意事项</h3> + +<p>有一些有用的伪类可用于设置表单元素的样式，以帮助用户查看其值是有效还是无效。 它们是 {{cssxref(":valid")}} 和 {{cssxref(":invalid")}}。 在本节中，我们将使用以下CSS，它将在包含有效值的输入旁边放置一个复选标记（tick），并在包含无效值的输入旁边放置一个叉号（X）。</p> + +<pre class="brush: css">div { + margin-bottom: 10px; + position: relative; +} + +input + span { + padding-right: 30px; +} + +input:invalid+span:after { + position: absolute; content: '✖'; + padding-left: 5px; +} + +input:valid+span:after { + position: absolute; + content: '✓'; + padding-left: 5px; +}</pre> + +<p>该技术还需要将 {{htmlelement("span")}} 元素放置在<code>form</code>元素之后，该<code>form</code>元素充当图标的持有者。 这是必要的，因为某些浏览器上的某些输入类型不能很好地显示直接位于其后的图标。</p> + +<h3 id="输入要求">输入要求</h3> + +<p>您可以使用 {{htmlattrxref("required","input")}} 属性作为在允许提交表单之前输入所需值的简单方法：</p> + +<pre class="brush: html"><form> + <div> + <label for="uname">Choose a username: </label> + <input type="text" id="uname" name="name" required> + <span class="validity"></span> + </div> + <div> + <button>Submit</button> + </div> +</form></pre> + +<div class="hidden"> +<pre class="brush: css">div { margin-bottom: 10px; position: relative; } input + span { padding-right: 30px; } input:invalid+span:after { position: absolute; content: '✖'; padding-left: 5px; } input:valid+span:after { position: absolute; content: '✓'; padding-left: 5px; }</pre> +</div> + +<p>如下所示：</p> + +<p>{{ EmbedLiveSample('Making_input_required', 600, 70) }}</p> + +<p>如果您尝试在未输入搜索词的情况下提交表单，浏览器将显示一条错误消息。</p> + +<h3 id="输入值长度">输入值长度</h3> + +<p>您可以使用 {{htmlattrxref("minlength", "input")}} 属性指定输入值的最小长度（以字符为单位）； 同样，请使用 {{htmlattrxref("maxlength", "input")}} 设置输入值的最大长度（以字符为单位）。</p> + +<p>下面的示例要求输入的值的长度为4–8个字符。</p> + +<pre class="brush: html"><form> + <div> + <label for="uname">Choose a username: </label> + <input type="text" id="uname" name="name" required size="10" + placeholder="Username" + minlength="4" maxlength="8"> + <span class="validity"></span> + </div> + <div> + <button>Submit</button> + </div> +</form></pre> + +<div class="hidden"> +<pre class="brush: css">div { margin-bottom: 10px; position: relative; } input + span { padding-right: 30px; } input:invalid+span:after { position: absolute; content: '✖'; padding-left: 5px; } input:valid+span:after { position: absolute; content: '✓'; padding-left: 5px; }</pre> +</div> + +<p>如下所示：</p> + +<p>{{ EmbedLiveSample('Input_value_length', 600, 70) }}</p> + +<p>如果您尝试提交少于4个字符的表单，则会收到一条相应的错误消息（不同的浏览器会有所不同）。 如果您尝试输入8个以上的字符，浏览器将不允许您输入。</p> + +<div class="note"> +<p><strong>注意：</strong> 如果您指定了 <code>minlength</code> 但未指定 <code>required</code>, 则输入被视为有效，因为不需要用户指定值。</p> +</div> + +<h3 id="指定模式">指定模式</h3> + +<p>您可以使用 {{htmlattrxref("pattern","input")}} 属性指定输入值必须匹配才能被认为是有效的正则表达式 (请参照 <a href="/en-US/docs/Learn/HTML/Forms/Form_validation#Validating_against_a_regular_expression">Validating against a regular expression</a>).</p> + +<p>下面的示例将值限制为4-8个字符，并要求该值仅包含小写字母。</p> + +<pre class="brush: html"><form> + <div> + <label for="uname">Choose a username: </label> + <input type="text" id="uname" name="name" required size="45" + pattern="[a-z]{4,8}"> + <span class="validity"></span> + <p>Usernames must be lowercase and 4-8 characters in length.</p> + </div> + <div> + <button>Submit</button> + </div> +</form></pre> + +<div class="hidden"> +<pre class="brush: css">div { + margin-bottom: 10px; + position: relative; +} + +p { + font-size: 80%; + color: #999; +} + +input + span { + padding-right: 30px; +} + +input:invalid+span:after { + position: absolute; + content: '✖'; + padding-left: 5px; +} + +input:valid+span:after { + position: absolute; + content: '✓'; + padding-left: 5px; +}</pre> +</div> + +<p>如下所示：</p> + +<p>{{ EmbedLiveSample('Specifying_a_pattern', 600, 110) }}</p> + +<h2 id="示例">示例</h2> + +<p>您可以在 <a href="/en-US/docs/Learn/HTML/Forms/Your_first_HTML_form">Your first HTML form</a> 和 <a href="/en-US/docs/Learn/HTML/Forms/How_to_structure_an_HTML_form">How to structure an HTML form</a> 文章中看到一些好的示例。</p> + +<h2 id="规定">规定</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">规定</th> + <th scope="col">现状</th> + <th scope="col">注释</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'input.html#text-(type=text)-state-and-search-state-(type=search)', '<input type="text">')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>初始化定义</td> + </tr> + <tr> + <td>{{SpecName('HTML5.1', 'sec-forms.html#text-typetext-state-and-search-state-typesearch', '<input type="text">')}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td>初始化定义</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器支持">浏览器支持</h2> + +<div class="hidden">此页面上的兼容性表是根据结构化数据生成的。 如果您想贡献数据，请查看 <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> 并向我们发送拉取请求。</div> + +<p>{{Compat("html.elements.input.input-text")}}</p> + +<h2 id="参阅">参阅</h2> + +<ul> + <li><a href="/en-US/docs/Learn/HTML/Forms">HTML Forms</a></li> + <li>{{HTMLElement("input")}} and the {{domxref("HTMLInputElement")}} interface it's based upon.</li> + <li><code><a href="/en-US/docs/Web/HTML/Element/input/search"><input type="search"></a></code></li> + <li>{{HTMLElement("textarea")}}: Multi-line text input<font face="Consolas">maxlength</font></li> +</ul> diff --git a/files/zh-cn/web/html/element/input/time/index.html b/files/zh-cn/web/html/element/input/time/index.html new file mode 100644 index 0000000000..2b47737ba7 --- /dev/null +++ b/files/zh-cn/web/html/element/input/time/index.html @@ -0,0 +1,520 @@ +--- +title: <input type="time"> +slug: Web/HTML/Element/Input/time +tags: + - HTML + - HTML表单 + - INPUT元素 + - Input + - Time + - 元素 + - 表单 +translation_of: Web/HTML/Element/input/time +--- +<div>{{HTMLRef("Input_types")}}</div> + +<p><span class="seoSummary">类型为time的输入元素{{htmlelement("input")}} ，旨在让用户轻松输入时间（小时和分钟，以及可选的秒）。</span></p> + +<p>控件的用户界面因浏览器而异。在现代浏览器中，支持是很好的，因为Safari是唯一尚未实现的主要浏览器；在Safari和任何其他不支持<code><time></code>的浏览器中，它会优雅地降级为<code><input type=“text”></code>。</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/input-time.html", "tabbed-standard")}}</div> + +<p class="hidden">这个交互式示例的源代码存储在GitHub存储库中。如果您想对交互式示例项目作出贡献，请克隆https://github.com/mdn/interactive-examples并向我们发送请求。</p> + +<h2 id="Appearance">Appearance</h2> + +<h3 id="Chrome_and_Opera">Chrome and Opera</h3> + +<p>在chrome/opera中，选择时间很简单，根据操作系统区域设置，插槽以12或24小时格式输入小时和分钟，上下箭头用于递增和递减当前选定的组件。在某些版本中，会提供一个“x”按钮来清除控件的值。</p> + +<p><img alt="12-hour Chrome time input" src="https://mdn.mozillademos.org/files/16417/chrome_time.PNG" style="height: 30px; width: 93px;"> 12-hour</p> + +<p><img alt="24-hour Chrome time input" src="https://mdn.mozillademos.org/files/15399/chrome-time.png" style="height: 30px; width: 79px;"> 24-hour</p> + +<h3 id="Firefox">Firefox</h3> + +<p>火狐的时间选择和Chrome非常相似，只是它没有上下箭头。它还使用12或24小时格式输入时间，基于系统区域设置。提供“X”按钮以清除控件的值。</p> + +<p><img alt="12-hour Firefox time input" src="https://mdn.mozillademos.org/files/15403/firefox-time.png" style="height: 29px; width: 106px;"> 12-hour</p> + +<p><img alt="24-hour Firefox time input" src="https://mdn.mozillademos.org/files/16461/firefox-time-24.png" style="height: 29px; width: 80px;"> 24-hour</p> + +<h3 id="Edge">Edge</h3> + +<p>Edgede 时间选择有点复杂，打开一个小时和分钟的滚动区域。它和chrome一样，使用12或24小时格式输入时间，基于系统区域设置：</p> + +<p><img alt="12-hour Edge time input" src="https://mdn.mozillademos.org/files/16418/edge_time.PNG" style="display: block; height: 290px; width: 188px;"> 12-hour</p> + +<p><img alt="24-hour Edge time input" src="https://mdn.mozillademos.org/files/15401/edge-time.png" style="display: block; height: 290px; width: 129px;"> 24-hour</p> + +<table class="properties"> + <tbody> + <tr> + <td><strong>{{anch("Value")}}</strong></td> + <td>A {{domxref("DOMString")}} representing a time, or empty.</td> + </tr> + <tr> + <td><strong>Events</strong></td> + <td>{{event("change")}} and {{event("input")}}</td> + </tr> + <tr> + <td><strong>Supported common attributes</strong></td> + <td>{{htmlattrxref("autocomplete", "input")}}, {{htmlattrxref("list", "input")}}, {{htmlattrxref("readonly", "input")}}, and {{htmlattrxref("step", "input")}}</td> + </tr> + <tr> + <td><strong>IDL attributes</strong></td> + <td><code>value</code>, <code>valueAsDate</code>, <code>valueAsNumber</code>, and <code>list</code>.</td> + </tr> + <tr> + <td><strong>Methods</strong></td> + <td>{{domxref("HTMLInputElement.select", "select()")}}, {{domxref("HTMLInputElement.stepDown", "stepDown()")}}, and {{domxref("HTMLInputElement.stepUp", "stepUp()")}}.</td> + </tr> + </tbody> +</table> + +<h2 id="Value">Value</h2> + +<div id="value-sample1"> +<p>A {{domxref("DOMString")}} containing the value of the time entered into the input. You can set a default value for the input by including a valid time in the {{htmlattrxref("value", "input")}} attribute when creating the <code><input></code> element, like so:</p> + +<pre class="brush: html notranslate"><label for="appt-time">Choose an appointment time: </label> +<input id="appt-time" type="time" name="appt-time" value="13:30"></pre> +</div> + +<p>{{ EmbedLiveSample('value-sample1', 600, 60) }}</p> + +<p>You can also get and set the date value in JavaScript using the {{domxref("HTMLInputElement.value")}} property, for example:</p> + +<pre class="brush: js notranslate">var timeControl = document.querySelector('input[type="time"]'); +timeControl.value = '15:30';</pre> + +<h3 id="Time_value_format">Time value format</h3> + +<p>The <code>value</code> of the <code>time</code> input is always in 24-hour format: <code>hh:mm</code>, regardless of the input format, which is likely to be selected based on the user's locale (or by the user agent). If the time includes seconds (see {{anch("Using the step attribute")}}), the format is always <code>hh:mm:ss</code>. You can learn more about the format of the time value used by this input type in {{SectionOnPage("/en-US/docs/Web/HTML/Date_and_time_formats", "Time strings")}}.</p> + +<p>在此示例中，您可以通过输入时间并查看之后如何更改来查看时间输入的值。</p> + +<p>首先，看一下HTML。这很简单，带有我们之前看到的标签和输入，但添加了额外的元素<code>p</code>和<code>span</code>用来显示时间值</p> + +<pre class="brush: html notranslate"><form> + <label for="startTime">Start time: </label> + <input type="time" id="startTime"> + <p> + Value of the <code>time</code> input: <code> + "<span id="value">n/a</span>"</code>. + </p> +</form></pre> + +<p>The JavaScript code adds code to the time input to watch for the {{event("input")}} event, which is triggered every time the contents of an input element change. When this happens, the contents of the <code><span></code> are replaced with the new value of the input element.</p> + +<pre class="brush: js notranslate">var startTime = document.getElementById("startTime"); +var valueSpan = document.getElementById("value"); + +startTime.addEventListener("input", function() { + valueSpan.innerText = startTime.value; +}, false);</pre> + +<p>{{EmbedLiveSample("Time_value_format", 600, 80)}}</p> + +<p>When a form including a <code>time</code> input is submitted, the value is encoded before being included in the form's data. The form's data entry for a time input will always be in the form <code>name=hh%3Amm</code>, or <code>name=hh%3Amm%3ass</code> if seconds are included (see {{anch("Using the step attribute")}}).</p> + +<h2 id="Additional_attributes">Additional attributes</h2> + +<p>In addition to the attributes common to all {{HTMLElement("input")}} elements, <code>time</code> inputs offer the following attributes:</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Attribute</th> + <th scope="col">Description</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>{{anch("max")}}</code></td> + <td>The latest time to accept, in the syntax described under {{anch("Time value format")}}</td> + </tr> + <tr> + <td><code>{{anch("min")}}</code></td> + <td>The earliest time to accept as a valid input</td> + </tr> + <tr> + <td><code>{{anch("readonly")}}</code></td> + <td>A Boolean attribute which, if present, indicates that the contents of the <code>time</code> input should not be user-editable</td> + </tr> + <tr> + <td><code>{{anch("step")}}</code></td> + <td>The stepping interval to use both for user interfaces purposes and during constraint validation</td> + </tr> + </tbody> +</table> + +<div class="callout-box">Unlike many data types, time values have a <strong>periodic domain</strong>, meaning that the values reach the highest possible value, then wrap back around to the beginning again. For example, specifying a <code>min</code> of <code>14:00</code> and a <code>max</code> of <code>2:00</code> means that the permitted time values start at 2:00 PM, run through midnight to the next day, ending at 2:00 AM.</div> + +<h3 id="htmlattrdefmax">{{htmlattrdef("max")}}</h3> + +<p>A string indicating the latest time to accept, specified in the same {{anch("Time value format", "time value format")}} as described above. If the specified string isn't a valid time, no maximum value is set.</p> + +<h3 id="htmlattrdefmin">{{htmlattrdef("min")}}</h3> + +<p>A string specifying the earliest time to accept, given in the {{anch("Time value format", "time value format")}} described previously. If the value specified isn't a valid time string, no minimum value is set.</p> + +<p>{{page("/en-US/docs/Web/HTML/Element/input/text", "readonly", 0, 1, 2)}}</p> + +<h3 id="htmlattrdefstep">{{htmlattrdef("step")}}</h3> + +<p>{{page("/en-US/docs/Web/HTML/Element/input/number", "step-include")}}</p> + +<p>For <code>time</code> inputs, the value of <code>step</code> is given in seconds, with a scaling factor of 1000 (since the underlying numeric value is in milliseconds). The default value of <code>step</code> is 60, indicating 60 seconds (or 1 minute, or 60,000 milliseconds).</p> + +<p><em>At this time, it's unclear what a value of <code>any</code> means for <code>step</code> when used with <code>time</code> inputs. This will be updated as soon as that information is determined.</em></p> + +<h2 id="Using_time_inputs">Using time inputs</h2> + +<p>虽然data和time输入类型中的时间具有最广泛的浏览器支持，但它尚未接近普及，因此您可能需要提供一种替代方法来输入日期和时间，以便Safari用户（和用户）其他非支持浏览器）仍然可以轻松输入时间值。</p> + +<p>We'll look at basic and more complex uses of <code><input type="time"></code>, then offer advice on mitigating the browser support issue later on (see {{anch("Handling browser support")}}).</p> + +<h3 id="Basic_uses_of_time">Basic uses of time</h3> + +<p>The simplest use of <code><input type="time"></code> involves a basic <code><input></code> and {{htmlelement("label")}} element combination, as seen below:</p> + +<pre class="brush: html notranslate"><form> + <label for="appt-time">Choose an appointment time: </label> + <input id="appt-time" type="time" name="appt-time"> +</form></pre> + +<p>{{EmbedLiveSample('Basic_uses_of_time', 600, 40)}}</p> + +<h3 id="Controlling_input_size">Controlling input size</h3> + +<p><code><input type="time"></code> doesn't support form sizing attributes such as {{htmlattrxref("size", "input")}}, since times are always about the same number of characters long. You'll have to resort to <a href="/en-US/docs/Web/CSS">CSS</a> for sizing needs.</p> + +<h3 id="Using_the_step_attribute">Using the step attribute</h3> + +<p>You can use the {{htmlattrxref("step", "input")}} attribute to vary the amount of time jumped whenever the time is incremented or decremented (for example, so the time moves by 10 minutes at a time when clicking the little arrow widgets).</p> + +<div class="note"> +<p>This property has some strange effects across browsers, so is not completely reliable.</p> +</div> + +<p>It takes an integer value that equates to the number of seconds you want to increment by; the default value is 60 seconds, or one minute. If you specify a value of less than 60 seconds (1 minute), the <code>time</code> input will show a seconds input area alongside the hours and minutes:</p> + +<pre class="brush: html notranslate"><form> + <label for="appt-time">Choose an appointment time: </label> + <input id="appt-time" type="time" name="appt-time" step="2"> +</form></pre> + +<p>{{EmbedLiveSample('Using_the_step_attribute', 600, 40)}}</p> + +<p>In Chrome and Opera, which are the only browsers to show up/down iteration arrows, clicking the arrows changes the seconds value by two seconds, but doesn't affect the hours or minutes. Minutes (or hours) can only be used for stepping when you specify a number of minutes (or hours) in seconds, such as 120 for 2 minutes, or 7200 for 2 hours).</p> + +<p>In Firefox, there are no arrows, so the <code>step</code> value isn't used. However, providing it <em>does</em> add the seconds input area adjacent to the minutes section.</p> + +<p>The steps value seems to have no effect in Edge.</p> + +<div class="note"> +<p>Using <code>step</code> seems to cause validation to not work properly (as seen in the next section).</p> +</div> + +<h2 id="Validation">Validation</h2> + +<p>By default, <code><input type="time"></code> does not apply any validation to entered values, other than the user agent's interface generally not allowing you to enter anything other than a time value. This is helpful (assuming the <code>time</code> input is fully supported by the user agent), but you can't entirely rely on the value to be a proper time string, since it might be an empty string (<code>""</code>), which is allowed. It's also possible for the value to look roughly like a valid time but not be correct, such as <code>25:05</code>.</p> + +<h3 id="Setting_maximum_and_minimum_times">Setting maximum and minimum times</h3> + +<p>You can use the {{htmlattrxref("min", "input")}} and {{htmlattrxref("max", "input")}} attributes to restrict the valid times that can be chosen by the user. In the following example we are setting a minimum time of <code>12:00</code> and a maximum time of <code>18:00</code>:</p> + +<pre class="brush: html notranslate"><form> + <label for="appt-time">Choose an appointment time (opening hours 12:00 to 18:00): </label> + <input id="appt-time" type="time" name="appt-time" + min="12:00" max="18:00"> + <span class="validity"></span> +</form></pre> + +<p>{{ EmbedLiveSample('Setting_maximum_and_minimum_times', 600, 40) }}</p> + +<p>Here's the CSS used in the above example. Here we make use of the {{cssxref(":valid")}} and {{cssxref(":invalid")}} CSS properties to style the input based on whether or not the current value is valid. We had to put the icons on a {{htmlelement("span")}} next to the input, not on the input itself, because in Chrome the generated content is placed inside the form control, and can't be styled or shown effectively.</p> + +<pre class="brush: css notranslate">div { + margin-bottom: 10px; + position: relative; +} + +input[type="number"] { + width: 100px; +} + +input + span { + padding-right: 30px; +} + +input:invalid+span:after { + position: absolute; + content: '✖'; + padding-left: 5px; +} + +input:valid+span:after { + position: absolute; + content: '✓'; + padding-left: 5px; +}</pre> + +<p>The result here is that:</p> + +<ul> + <li>Only times between 12:00 and 18:00 will be seen as valid; times outside that range will be denoted as invalid.</li> + <li>Depending on what browser you're using, you might find that times outside the specified range might not even be selectable in the time picker (e.g. Edge).</li> +</ul> + +<h3 id="Making_times_required">Making times required</h3> + +<p>In addition, you can use the {{htmlattrxref("required", "input")}} attribute to make filling in the time mandatory. As a result, supporting browsers will display an error if you try to submit a time that is outside the set bounds, or an empty time field.</p> + +<p>Let's look at an example; here we've set minimum and maximum times, and also made the field required:</p> + +<pre class="brush: html notranslate"><form> + <div> + <label for="appt-time">Choose an appointment time (opening hours 12:00 to 18:00): </label> + <input id="appt-time" type="time" name="appt-time" + min="12:00" max="18:00" required> + <span class="validity"></span> + </div> + <div> + <input type="submit" value="Submit form"> + </div> +</form></pre> + +<p>If you try to submit the form with an incomplete time (or with a time outside the set bounds), the browser displays an error. Try playing with the example now:</p> + +<p>{{ EmbedLiveSample('Making_times_required', 600, 120) }}</p> + +<p>Here's a screenshot for those of you who aren't using a browser that supports <code>time</code> inputs:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/15405/firefox-validation-message.png" style="display: block; margin: 0 auto;"></p> + +<div class="warning"> +<p><strong>Important</strong>: HTML form validation is <em>not</em> a substitute for scripts that ensure that the entered data is in the proper format. It's far too easy for someone to make adjustments to the HTML that allow them to bypass the validation, or to remove it entirely. It's also possible for someone to simply bypass your HTML entirely and submit the data directly to your server. If your server-side code fails to validate the data it receives, disaster could strike when improperly-formatted data is submitted (or data which is too large, of the wrong type, and so forth).</p> +</div> + +<h2 id="Handling_browser_support">Handling browser support</h2> + +<p>As mentioned above, Safari and a few other, less common, browsers don't yet support time inputs natively. In general, otherwise, support is good — especially on mobile platforms, which tend to have very nice user interfaces for specifying a time value. For example, the <code>time</code> picker on Chrome for Android looks like this:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/15407/chrome-android-time.png" style="display: block; margin: 0 auto;"></p> + +<p>Browsers that don't support time inputs gracefully degrade to a text input, but this creates problems both in terms of consistency of user interface (the presented control will be different), and data handling.</p> + +<p>The second problem is the more serious; as mentioned previously, <code>time</code> inputs' values are always normalized to the format <code>hh:mm</code> or <code>hh:mm:ss</code>. With a text input, on the other hand, by default the browser has no idea of what format the time should be in, and there multiple ways in which people write times, such as:</p> + +<ul> + <li><code>3.00 pm</code></li> + <li><code>3:00pm</code></li> + <li><code>15:00</code></li> + <li><code>3 o'clock in the afternoon</code></li> + <li>etc.</li> +</ul> + +<p>One way around this is to put a {{htmlattrxref("pattern", "input")}} attribute on your <code>time</code> input. Even though the <code>time</code> input doesn't use it, the <code>text</code> input fallback will. For example, try viewing the following demo in a browser that doesn't support time inputs:</p> + +<pre class="brush: html notranslate"><form> + <div> + <label for="appt-time">Choose an appointment time (opening hours 12:00 to 18:00): </label> + <input id="appt-time" type="time" name="appt-time" + min="12:00" max="18:00" required + pattern="[0-9]{2}:[0-9]{2}"> + <span class="validity"></span> + </div> + <div> + <input type="submit" value="Submit form"> + </div> +</form></pre> + +<p>{{ EmbedLiveSample('Handling_browser_support', 600, 100) }}</p> + +<p>If you try submitting it, you'll see that non-supporting browsers now display an error message (and highlight the input as invalid) if your entry doesn't match the pattern <code>nn:nn</code>, where <code>n</code> is a number from 0 to 9. Of course, this doesn't stop people from entering invalid times, or incorrectly formatted times that follow the pattern.</p> + +<p>Then there's the problem of the user having no idea exactly what format the time is expected to be in.</p> + +<div class="hidden"> +<pre class="brush: css notranslate">div { + margin-bottom: 10px; + position: relative; +} + +input[type="number"] { + width: 100px; +} + +input + span { + padding-right: 30px; +} + +input:invalid+span:after { + position: absolute; + content: '✖'; + padding-left: 5px; +} + +input:valid+span:after { + position: absolute; + content: '✓'; + padding-left: 5px; +}</pre> +</div> + +<p>The best way to deal with times in forms in a cross-browser way, for the time being, is to get the user to enter the hours and minutes (and seconds if required) in separate controls ({{htmlelement("select")}} elements are popular; see below for an example), or use JavaScript libraries such as the <a href="http://timepicker.co/">jQuery timepicker plugin</a>.</p> + +<h2 id="Examples">Examples</h2> + +<p>In this example, we create two sets of interface elements for choosing times: a native picker created with <code><input type="time"></code>, and a set of two {{htmlelement("select")}} elements for choosing hours/minutes in older browsers that don't support the native input.</p> + +<p>{{ EmbedLiveSample('Examples', 600, 140) }}</p> + +<p>The HTML looks like so:</p> + +<pre class="brush: html notranslate"><form> + <div class="nativeTimePicker"> + <label for="appt-time">Choose an appointment time (opening hours 12:00 to 18:00): </label> + <input id="appt-time" type="time" name="appt-time" + min="12:00" max="18:00" required> + <span class="validity"></span> + </div> + <p class="fallbackLabel">Choose an appointment time (opening hours 12:00 to 18:00):</p> + <div class="fallbackTimePicker"> + <div> + <span> + <label for="hour">Hour:</label> + <select id="hour" name="hour"> + </select> + </span> + <span> + <label for="minute">Minute:</label> + <select id="minute" name="minute"> + </select> + </span> + </div> + </div> +</form></pre> + +<p>The hour and minutes values for their <code><select></code> elements are dynamically generated.</p> + +<div class="hidden"> +<pre class="brush: css notranslate">div { + margin-bottom: 10px; + position: relative; +} + +input[type="number"] { + width: 100px; +} + +input + span { + padding-right: 30px; +} + +input:invalid+span:after { + position: absolute; + content: '✖'; + padding-left: 5px; +} + +input:valid+span:after { + position: absolute; + content: '✓'; + padding-left: 5px; +}</pre> +</div> + +<p>The other part of the code that may be of interest is the feature detection code — to detect whether the browser supports <code><input type="time"></code>, we create a new {{htmlelement("input")}} element, set its <code>type</code> to <code>time</code>, then immediately check what its type is set to — non-supporting browsers will return <code>text</code>, because the <code>time</code> type falls back to type <code>text</code>. If <code><input type="time"></code> is not supported, we hide the native picker and show the fallback picker UI ({{htmlelement("select")}}s) instead.</p> + +<pre class="brush: js notranslate">// define variables +var nativePicker = document.querySelector('.nativeTimePicker'); +var fallbackPicker = document.querySelector('.fallbackTimePicker'); +var fallbackLabel = document.querySelector('.fallbackLabel'); + +var hourSelect = document.querySelector('#hour'); +var minuteSelect = document.querySelector('#minute'); + +// hide fallback initially +fallbackPicker.style.display = 'none'; +fallbackLabel.style.display = 'none'; + +// test whether a new date input falls back to a text input or not +var test = document.createElement('input'); +test.type = 'time'; +// if it does, run the code inside the if() {} block +if(test.type === 'text') { + // hide the native picker and show the fallback + nativePicker.style.display = 'none'; + fallbackPicker.style.display = 'block'; + fallbackLabel.style.display = 'block'; + + // populate the hours and minutes dynamically + populateHours(); + populateMinutes(); +} + +function populateHours() { + // populate the hours <select> with the 6 open hours of the day + for(var i = 12; i <= 18; i++) { + var option = document.createElement('option'); + option.textContent = i; + hourSelect.appendChild(option); + } +} + +function populateMinutes() { + // populate the minutes <select> with the 60 hours of each minute + for(var i = 0; i <= 59; i++) { + var option = document.createElement('option'); + option.textContent = (i < 10) ? ("0" + i) : i; + minuteSelect.appendChild(option); + } +} + +// make it so that if the hour is 18, the minutes value is set to 00 +// — you can't select times past 18:00 + function setMinutesToZero() { + if(hourSelect.value === '18') { + minuteSelect.value = '00'; + } + } + + hourSelect.onchange = setMinutesToZero; + minuteSelect.onchange = setMinutesToZero;</pre> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comments</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'forms.html#time-state-(type=time)', '<input type="time">')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + + + +<p>{{Compat("html.elements.input.input-time")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li>The generic {{HTMLElement("input")}} element and the interface used to manipulate it, {{domxref("HTMLInputElement")}}</li> + <li><a href="/en-US/docs/Web/HTML/Date_and_time_formats">Date and time formats used in HTML</a></li> + <li><a href="/en-US/docs/Web/Guide/HTML/Forms/The_native_form_widgets#Date_and_time_picker">Date and Time picker tutorial</a></li> + <li><code><a href="/en-US/docs/Web/HTML/Element/input/datetime-local"><input type="datetime-local"></a></code>, <code><a href="/en-US/docs/Web/HTML/Element/input/date"><input type="date"></a></code>, <code><a href="/en-US/docs/Web/HTML/Element/input/week"><input type="week"></a></code>, and <code><a href="/en-US/docs/Web/HTML/Element/input/month"><input type="month"></a></code></li> +</ul> diff --git a/files/zh-cn/web/html/element/input/url/index.html b/files/zh-cn/web/html/element/input/url/index.html new file mode 100644 index 0000000000..7431e5f3e9 --- /dev/null +++ b/files/zh-cn/web/html/element/input/url/index.html @@ -0,0 +1,411 @@ +--- +title: <input type="url"> +slug: Web/HTML/Element/Input/url +translation_of: Web/HTML/Element/input/url +--- +<div>{{HTMLRef}}</div> + +<p><span class="seoSummary">{{HTMLElement("input")}} 元素有一个 <code><strong>url</strong></code> 来让用户输入URL</span>{{EmbedInteractiveExample("pages/tabbed/input-url.html", "tabbed-shorter")}}</p> + + + +<p>The input value is automatically validated to ensure that it's either empty or a properly-formatted URL before the form can be submitted. The {{cssxref(":valid")}} and {{cssxref(":invalid")}} CSS pseudo-classes are automatically applied as appropriate to visually denote whether the current value of the field is a valid URL or not.</p> + +<p>On browsers that don't support inputs of type <code>url</code>, a <code>url</code> input falls back to being a standard {{HTMLElement("input/text", "text")}} input.</p> + +<table class="properties"> + <tbody> + <tr> + <td><strong>{{anch("Value")}}</strong></td> + <td>A {{domxref("DOMString")}} representing a URL, or empty</td> + </tr> + <tr> + <td><strong>Events</strong></td> + <td>{{event("change")}} and {{event("input")}}</td> + </tr> + <tr> + <td><strong>Supported Common Attributes</strong></td> + <td>{{htmlattrxref("autocomplete", "input")}}, {{htmlattrxref("list", "input")}}, {{htmlattrxref("maxlength", "input")}}, {{htmlattrxref("minlength", "input")}}, {{htmlattrxref("pattern", "input")}}, {{htmlattrxref("placeholder", "input")}}, {{htmlattrxref("readonly", "input")}}, {{htmlattrxref("required", "input")}} and {{htmlattrxref("size", "input")}}</td> + </tr> + <tr> + <td><strong>IDL attributes</strong></td> + <td><code>list</code>, <code>value</code>, <code>selectionEnd</code>, <code>selectionDirection</code></td> + </tr> + <tr> + <td><strong>Methods</strong></td> + <td>{{domxref("HTMLInputElement.select", "select()")}}, {{domxref("HTMLInputElement.setRangeText", "setRangeText()")}} and {{domxref("HTMLInputElement.setSelectionRange", "setSelectionRange()")}}.</td> + </tr> + </tbody> +</table> + +<h2 id="Value">Value</h2> + +<p>The {{HTMLElement("input")}} element's {{htmlattrxref("value", "input")}} attribute contains a {{domxref("DOMString")}} which is automatically validated as conforming to URL syntax. More specifically, there are two possible value formats that will pass validation:</p> + +<ol> + <li>An empty string ("") indicating that the user did not enter a value or that the value was removed.</li> + <li>A single properly-formed absolute URL. This doesn't necessarily mean the URL address exists, but it is at least formatted correctly. In simple terms, this means <code>urlscheme://restofurl</code>.</li> +</ol> + +<p>See {{anch("Validation")}} for details on how URLs are validated to ensure that they're formatted properly.</p> + +<h2 id="Additional_attributes">Additional attributes</h2> + +<p>In addition to the attributes that operate on all {{HTMLElement("input")}} elements regardless of their type, <code>url</code> inputs support the following attributes:</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Attribute</th> + <th scope="col">Description</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>{{anch("list")}}</code></td> + <td>The id of the <datalist> element that contains the optional pre-defined autocomplete options</td> + </tr> + <tr> + <td><code>{{anch("maxlength")}}</code></td> + <td>The maximum number of characters the input should accept</td> + </tr> + <tr> + <td><code>{{anch("minlength")}}</code></td> + <td>The minimum number of characters long the input can be and still be considered valid</td> + </tr> + <tr> + <td><code>{{anch("pattern")}}</code></td> + <td>A regular expression the input's contents must match in order to be valid</td> + </tr> + <tr> + <td><code>{{anch("placeholder")}}</code></td> + <td>An exemplar value to display in the input field whenever it is empty</td> + </tr> + <tr> + <td><code>{{anch("readonly")}}</code></td> + <td>A Boolean attribute indicating whether or not the contents of the input should be read-only</td> + </tr> + <tr> + <td><code>{{anch("size")}}</code></td> + <td>A number indicating how many characters wide the input field should be</td> + </tr> + <tr> + <td><code>{{anch("spellcheck")}}</code></td> + <td>Controls whether or not to enable spell checking for the input field, or if the default spell checking configuration should be used</td> + </tr> + </tbody> +</table> + +<p id="htmlattrdeflist">{{page("/en-US/docs/Web/HTML/Element/input/text", "list", 0, 1, 2)}}</p> + +<h3 id="htmlattrdefmaxlength">{{htmlattrdef("maxlength")}}</h3> + +<p>The maximum number of characters (as UTF-16 code units) the user can enter into the <code>url</code> input. This must be an integer value 0 or higher. If no <code>maxlength</code> is specified, or an invalid value is specified, the <code>url</code> input has no maximum length. This value must also be greater than or equal to the value of <code>minlength</code>.</p> + +<p>The input will fail <a href="/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation">constraint validation</a> if the length of the text value of the field is greater than <code>maxlength</code> UTF-16 code units long. Constraint validation is only applied when the value is changed by the user.</p> + +<h3 id="htmlattrdefminlength">{{htmlattrdef("minlength")}}</h3> + +<p>The minimum number of characters (as UTF-16 code units) the user can enter into the <code>url</code> input. This must be an non-negative integer value smaller than or equal to the value specified by <code>maxlength</code>. If no <code>minlength</code> is specified, or an invalid value is specified, the <code>url</code> input has no minimum length.</p> + +<p>The input will fail <a href="/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation">constraint validation</a> if the length of the text entered into the field is fewer than <code>minlength</code> UTF-16 code units long. Constraint validation is only applied when the value is changed by the user.</p> + +<h3 id="htmlattrdefpattern">{{htmlattrdef("pattern")}}</h3> + +<p>{{page("/en-US/docs/Web/HTML/Element/input/text", "pattern-include")}}</p> + +<p>See the section {{anch("Pattern validation")}} for details and an example.</p> + +<p>{{page("/en-US/docs/Web/HTML/Element/input/text", "placeholder", 0, 1, 2)}}</p> + +<p>{{page("/en-US/docs/Web/HTML/Element/input/text", "readonly", 0, 1, 2)}}</p> + +<p>{{page("/en-US/docs/Web/HTML/Element/input/text", "size", 0, 1, 2)}}</p> + +<p>{{page("/en-US/docs/Web/HTML/Element/input/text", "spellcheck", 0, 1, 2)}}</p> + +<h2 id="Non-standard_attributes">Non-standard attributes</h2> + +<p>The following non-standard attributes are also available on some browsers. As a general rule, you should avoid using them unless it can't be helped.</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Attribute</th> + <th scope="col">Description</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>{{anch("autocorrect")}}</code></td> + <td>A string indicating whether or not autocorrect is <code>on</code> or <code>off</code>. <strong>Safari only.</strong></td> + </tr> + <tr> + <td><code>{{anch("mozactionhint")}}</code></td> + <td>A string indicating the type of action that will be taken when the user presses the <kbd>Enter</kbd> or <kbd>Return</kbd> key while editing the field; this is used to determine an appropriate label for that key on a virtual keyboard. <strong>Firefox for Android only.</strong></td> + </tr> + </tbody> +</table> + +<p>{{page("/en-US/docs/Web/HTML/Element/input/text", "autocorrect", 0, 1, 2)}}</p> + +<p>{{page("/en-US/docs/Web/HTML/Element/input/text", "mozactionhint", 0, 1, 2)}}</p> + +<h2 id="Using_URL_inputs">Using URL inputs</h2> + +<p>When you create a URL input with the proper <code>type</code> value, <code>url</code>, you get automatic validation that the entered text is at least in the correct form to potentially be a legitimate URL. This can help avoid cases in which the user mis-types their web site's address, or provides an invalid one.</p> + +<p>It's important, however, to note that this is not enough to ensure that the specified text is a URL which actually exists, corresponds to the user of the site, or is acceptable in any other way. It simply ensures that the value of the field is properly formatted to be a URL.</p> + +<div class="note"> +<p><strong>Note</strong>: It's also crucial to remember that a user can tinker with your HTML behind the scenes, so your site <em>must not</em> use this validation for any security purposes. You <em>must</em> verify the URL on the server-side of any transaction in which the provided text may have any security implications of any kind.</p> +</div> + +<h3 id="A_simple_URL_input">A simple URL input</h3> + +<p>Currently, all browsers which implement this element implement it as a standard text input field with basic validation features. In its most basic form, a URL input can be implemented like this:</p> + +<pre class="brush: html notranslate"><input id="myURL" name="myURL" type="url"></pre> + +<p>{{ EmbedLiveSample('A_simple_URL_input', 600, 40) }}</p> + +<p>Notice that it's considered valid when empty and when a single validly-formatted URL address is entered, but is otherwise not considered valid. By adding the {{htmlattrxref("required", "input")}} attribute, only properly-formed URLs are allowed; the input is no longer considered valid when empty.</p> + +<p>There is nothing magical going on here. Submitting this form would cause the following data to be sent to the server: <code>myURL=http%3A%2F%2Fwww.example.com</code>. Note how characters are escaped as necessary.</p> + +<h3 id="Placeholders">Placeholders</h3> + +<p>Sometimes it's helpful to offer an in-context hint as to what form the input data should take. This can be especially important if the page design doesn't offer descriptive labels for each {{HTMLElement("input")}}. This is where <strong>placeholders</strong> come in. A placeholder is a value that demonstrates the form the <code>value</code> should take by presenting an example of a valid value, which is displayed inside the edit box when the element's <code>value</code> is "". Once data is entered into the box, the placeholder disappears; if the box is emptied, the placeholder reappears.</p> + +<p>Here, we have a <code>url</code> input with the placeholder <code>http://www.example.com</code>. Note how the placeholder disappears and reappears as you manipulate the contents of the edit field.</p> + +<pre class="brush: html notranslate"><input id="myURL" name="myURL" type="url" + placeholder="http://www.example.com"></pre> + +<p>{{ EmbedLiveSample('Placeholders', 600, 40) }}</p> + +<h3 id="Controlling_the_input_size">Controlling the input size</h3> + +<p>You can control not only the physical length of the input box, but also the minimum and maximum lengths allowed for the input text itself.</p> + +<h4 id="Physical_input_element_size">Physical input element size</h4> + +<p>The physical size of the input box can be controlled using the {{htmlattrxref("size", "input")}} attribute. With it, you can specify the number of characters the input box can display at a time. In this example, for instance, the <code>url</code> edit box is 30 characters wide:</p> + +<pre class="brush: html notranslate"><input id="myURL" name="myURL" type="url" + size="30"></pre> + +<p>{{ EmbedLiveSample('Physical_input_element_size', 600, 40) }}</p> + +<h4 id="Element_value_length">Element value length</h4> + +<p>The <code>size</code> is separate from the length limitation on the entered URL itself. You can specify a minimum length, in characters, for the entered URL using the {{htmlattrxref("minlength", "input")}} attribute; similarly, use {{htmlattrxref("maxlength", "input")}} to set the maximum length of the entered URL. If <code>maxLength</code> exceeds <code>size</code>, the input box's contents will scroll as needed to show the current selection or insertion point as the content is manipulated.</p> + +<p>The example below creates a 30-character wide URL address entry box, requiring that the contents be no shorter than 10 characters and no longer than 80 characters.</p> + +<pre class="brush: html notranslate"><input id="myURL" name="myURL" type="url" + size="30" minlength="10" maxlength="80"> +</pre> + +<p>{{EmbedLiveSample("Element_value_length", 600, 40) }}</p> + +<div class="note"> +<p><strong>Note</strong>: These attributes also affect validation; a value shorter or longer than the specified minimum/maximum lengths will be classified as invalid; in addition most browsers will simply refuse to let the user enter a value longer than the specified maximum length.</p> +</div> + +<h3 id="Providing_default_options">Providing default options</h3> + +<p>As always, you can provide a default value for a <code>url</code> input box by setting its {{htmlattrxref("value", "input")}} attribute:</p> + +<div id="Default_value"> +<pre class="brush: html notranslate"><input id="myURL" name="myURL" type="url" + value="http://www.example.com"></pre> +</div> + +<p>{{EmbedLiveSample("Default_value", 600, 40)}}</p> + +<h4 id="Offering_suggested_values">Offering suggested values</h4> + +<p>Taking it a step farther, you can provide a list of default options from which the user can select by specifying the {{htmlattrxref("list", "input")}} attribute. This doesn't limit the user to those options, but does allow them to select commonly-used URLs more quickly. This also offers hints to {{htmlattrxref("autocomplete", "input")}}. The <code>list</code> attribute specifies the ID of a {{HTMLElement("datalist")}}, which in turn contains one {{HTMLElement("option")}} element per suggested value; each <code>option</code>'s <code>value</code> is the corresponding suggested value for the URL entry box.</p> + +<pre class="brush: html notranslate"><input id="myURL" name="myURL" type="url" + list="defaultURLs"> + +<datalist id="defaultURLs"> + <option value="https://developer.mozilla.org/"> + <option value="http://www.google.com/"> + <option value="http://www.microsoft.com/"> + <option value="https://www.mozilla.org/"> + <option value="http://w3.org/"> +</datalist></pre> + +<p>{{EmbedLiveSample("Offering_suggested_values", 600, 40)}}</p> + +<p>With the {{HTMLElement("datalist")}} element and its {{HTMLElement("option")}}s in place, the browser will offer the specified values as potential values for the URL; this is typically presented as a popup or drop-down menu containing the suggestions. While the specific user experience may vary from one browser to another, typically clicking in the edit box presents a drop-down of the suggested URLs. Then, as the user types, the list is adjusted to show only matching values. Each typed character narrows down the list until the user makes a selection or types a custom value.</p> + +<h4 id="Using_labels_for_suggested_values">Using labels for suggested values</h4> + +<p>You can opt to include the {{htmlattrxref("label", "option")}} attribute on one or all of your <code><option></code> elements to provide textual labels. Some browsers may display only the labels, while others may display both the label and the URL.</p> + +<pre class="brush: html notranslate"><input id="myURL" name="myURL" type="url" + list="defaultURLs"> + +<datalist id="defaultURLs"> + <option value="https://developer.mozilla.org/" label="MDN Web Docs"> + <option value="http://www.google.com/" label="Google"> + <option value="http://www.microsoft.com/" label="Microsoft"> + <option value="https://www.mozilla.org/" label="Mozilla"> + <option value="http://w3.org/" label="W3C"> +</datalist></pre> + +<p>{{EmbedLiveSample("Using_labels_for_suggested_values", 600, 40)}}</p> + +<h2 id="Validation">Validation</h2> + +<p>There are two levels of content validation available for <code>url</code> inputs. First, there's the standard level of validation offered to all {{HTMLElement("input")}}s, which automatically ensures that the contents meet the requirements to be a valid URL. But there's also the option to add additional filtering to ensure that your own specialized needs are met, if you have any.</p> + +<div class="warning"> +<p><strong>Important</strong>: HTML form validation is <em>not</em> a substitute for scripts that ensure that the entered data is in the proper format. It's far too easy for someone to make adjustments to the HTML that allow them to bypass the validation, or to remove it entirely. It's also possible for someone to simply bypass your HTML entirely and submit the data directly to your server. If your server-side code fails to validate the data it receives, disaster could strike when improperly-formatted data (or data which is too large, is of the wrong type, and so forth) is entered into your database.</p> +</div> + +<h3 id="Basic_validation">Basic validation</h3> + +<p>Browsers that support the <code>url</code> input type automatically provide validation to ensure that only text that matches the standard format for URLs is entered into the input box.</p> + +<p>The syntax of a URL is fairly intricate. It's defined by WHATWG's <a href="https://url.spec.whatwg.org/">URL Living Standard</a> and is described for newcomers in our article <a href="/en-US/docs/Learn/Common_questions/What_is_a_URL">What is a URL?</a></p> + +<h3 id="Making_a_URL_required">Making a URL required</h3> + +<p>As mentioned earlier, to make a URL entry required before the form can be submitted (you can't leave the field blank), you just need to include the {{htmlattrxref("required", "input")}} attribute on the input.</p> + +<div id="Default_value"> +<pre class="brush: html notranslate"><form> + <input id="myURL" name="myURL" type="url" required> + <button>Submit</button> +</form></pre> +</div> + +<p>{{EmbedLiveSample("Making_a_URL_required", 600, 40)}}</p> + +<p>Try submitting the above form with no value entered to see what happens.</p> + +<h3 id="Pattern_validation">Pattern validation</h3> + +<p>If you need the entered URL to be restricted further than just "any string that looks like a URL," you can use the {{htmlattrxref("pattern", "input")}} attribute to specify a {{Glossary("regular expression")}} the value must match for the value to be valid.</p> + +<p>For example, let's say you're building a support page for employees of Myco, Inc. which will let them contact their IT department for help if one of their pages has a problem. In our simplified form, the user needs to enter the URL of the page that has a problem, and a message describing what is wrong. But we want the URL to only successfully validate if the entered URL is in a Myco domain.</p> + +<p>Since inputs of type <code>url</code> validate against both the standard URL validation <em>and</em> the specified {{htmlattrxref("pattern", "input")}}, you can implement this easily. Let's see how:</p> + +<div class="hidden"> +<pre class="brush: css notranslate">div { + margin-bottom: 10px; + position: relative; + } + + input[type="number"] { + width: 100px; + } + + input + span { + padding-right: 30px; + } + + input:invalid+span:after { + position: absolute; content: '✖'; + padding-left: 5px; + } + + input:valid+span:after { + position: absolute; + content: '✓'; + padding-left: 5px; + }</pre> +</div> + +<pre class="brush: html notranslate"><form> + <div> + <label for="myURL">Enter the problem website address:</label> + <input id="myURL" name="myURL" type="url" + required pattern=".*\.myco\..*" + title="The URL must be in a Myco domain"> + <span class="validity"></span> + </div> + <div> + <label for="myComment">What is the problem?</label> + <input id="myComment" name="myComment" type="text" + required> + <span class="validity"></span> + </div> + <div> + <button>Submit</button> + </div> +</form> +</pre> + +<p>{{EmbedLiveSample("Pattern_validation", 700, 150)}}</p> + +<p>First of all, the {{htmlattrxref("required", "input")}} attribute is specified, making it mandatory that a valid email address be provided.</p> + +<p>Second, in the <code>url</code> input we set <code>pattern</code> to <code>".*\.myco\..*"</code>. This simple regular expression requests a string that has any number of characters, followed by a dot, followed by "myco", followed by a dot, followed by any number of characters. And because the browser runs both the standard URL filter <em>and</em> our custom pattern against the specified text, we wind up with a validation which says "make sure this is a valid URL, and also in a Myco domain."</p> + +<p>This isn't perfect, but it is good enough for this simple demo's requirements.</p> + +<p>It's advisable to use the {{htmlattrxref("title")}} attribute along with <code>pattern</code>. If you do, the <code>title</code> <em>must</em> describe the pattern; it should explain what format the data should take on, rather than any other information. That's because the <code>title</code> may be displayed or spoken as part of a validation error message. For example, the browser might present the message "The entered text doesn't match the required pattern." followed by your specified <code>title</code>. If your <code>title</code> is something like "URL", the result would be the message "The entered text doesn't match the required pattern. URL", which is not a good user experience.</p> + +<p>That's why, instead, we specify the string "The URL must be in a myco domain". By doing that, the resulting full error message might be something like "The entered text doesn't match the required pattern. The URL should be in a myco domain."</p> + +<div class="note"> +<p><strong>Note</strong>: If you run into trouble while writing your validation regular expressions and they're not working properly, check your browser's console; there may be helpful error messages there to aid you in solving the problem.</p> +</div> + +<h2 id="Examples">Examples</h2> + +<p>There's not much else to say about <code>url</code> type inputs; check the {{anch("Pattern validation")}} and {{anch("Using URL inputs")}} sections for numerous examples.</p> + +<p>You can also find our <a href="https://github.com/mdn/learning-area/blob/master/html/forms/url-example/index.html">pattern validation example on GitHub</a> (see it <a href="https://mdn.github.io/learning-area/html/forms/url-example/">running live also</a>).</p> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'forms.html#url-state-(type=url)', '<input type="url">')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>Initial definition</td> + </tr> + <tr> + <td>{{SpecName('HTML5.1', 'sec-forms.html#url-state-typeurl', '<input type="url">')}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td>Initial definition</td> + </tr> + <tr> + <td>{{SpecName("URL", "#urls", "URL syntax")}}</td> + <td>{{Spec2("URL")}}</td> + <td>Living Standard</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + + + +<p>{{Compat("html.elements.input.input-url")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/en-US/docs/Learn/HTML/Forms">HTML forms guide</a></li> + <li>{{HTMLElement("input")}}</li> + <li><code><a href="/en-US/docs/Web/HTML/Element/input/tel"><input type="tel"></a></code></li> + <li><code><a href="/en-US/docs/Web/HTML/Element/input/email"><input type="email"></a></code></li> + <li><a href="/en-US/docs/Learn/HTML/Forms/Property_compatibility_table_for_form_widgets">Compatibility of CSS properties</a></li> +</ul> diff --git a/files/zh-cn/web/html/element/input/week/index.html b/files/zh-cn/web/html/element/input/week/index.html new file mode 100644 index 0000000000..4cd68e200e --- /dev/null +++ b/files/zh-cn/web/html/element/input/week/index.html @@ -0,0 +1,388 @@ +--- +title: <input type="week"> +slug: Web/HTML/Element/Input/week +tags: + - HTML + - 元素 + - 参考 + - 周 + - 输出类型 +translation_of: Web/HTML/Element/input/week +--- +<div>{{HTMLRef("Input_types")}}</div> + +<p><span class="seoSummary">{{HTMLElement("input")}} 类型为 <strong><code>week</code></strong> 的元素会创建输入字段，以便轻松输入年份以及该年（即第1周到<a href="https://en.wikipedia.org/wiki/ISO_8601#Week_dates">52 or 53</a>周）的<a href="https://en.wikipedia.org/wiki/ISO_8601#Week_dates">ISO 8601 week number</a> </span></p> + +<div>{{EmbedInteractiveExample("pages/tabbed/input-week.html", "tabbed-shorter")}}</div> + +<div class="hidden">该交互式示例的源存储在GitHub存储库中。 如果您想为交互式示例项目做出贡献，请克隆 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> 并向我们发送请求请求。</div> + +<p>控件的用户界面因浏览器而异； 跨浏览器的支持目前受到限制，目前只有Chrome / Opera和Microsoft Edge支持。 在不支持的浏览器中，该控件会正常降级，使其功能与 <code><a href="/en-US/docs/Web/HTML/Element/input/text"><input type="text"></a></code>相同。</p> + +<p> 在Chrome / Opera中，在<code>week</code>控件提供了用于填写周和年值的插槽，弹出式日历界面（可以更直观地选择它们）以及“ X”按钮以清除控件的值。</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/15409/week-control-chrome.png" style="display: block; height: 235px; margin: 0px auto; width: 320px;"></p> + +<p>Edge的<code>week</code>控制更加精细，使用滚动的滚轮打开周和年的选择器。</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/15411/week-control-edge.png" style="display: block; height: 391px; margin: 0px auto; width: 227px;"></p> + +<table class="properties"> + <tbody> + <tr> + <td><strong>{{anch("Value")}}</strong></td> + <td>A {{domxref("DOMString")}} representing a week and year, or empty</td> + </tr> + <tr> + <td><strong>事件</strong></td> + <td>{{domxref("HTMLElement/change_event", "change")}} and {{domxref("HTMLElement/input_event", "input")}}</td> + </tr> + <tr> + <td><strong>支持的常用属性</strong></td> + <td>{{htmlattrxref("autocomplete", "input")}}, {{htmlattrxref("list", "input")}}, {{htmlattrxref("readonly", "input")}}, and {{htmlattrxref("step", "input")}}</td> + </tr> + <tr> + <td><strong>IDL 属性</strong></td> + <td><code>value</code>, <code>valueAsDate</code>, <code>valueAsNumber</code>, 和 <code>list</code>.</td> + </tr> + <tr> + <td><strong>方法</strong></td> + <td>{{domxref("HTMLInputElement.select", "select()")}}, {{domxref("HTMLInputElement.stepDown", "stepDown()")}}, and {{domxref("HTMLInputElement.stepUp", "stepUp()")}}</td> + </tr> + </tbody> +</table> + +<h2 id="价值">价值</h2> + +<p>一个 {{domxref("DOMString")}} 代表输入到输入中的星期/年的值。{{SectionOnPage("/en-US/docs/Web/HTML/Date_and_time_formats", "Format of a valid week string")}} 中描述了此输入类型使用的日期和时间值的格式。</p> + +<p>您可以通过在 {{htmlattrxref("value", "input")}} 属性中包含一个值来为输入设置默认值，如下所示：</p> + +<pre class="brush: html"><label for="week">What week would you like to start?</label> +<input id="week" type="week" name="week" value="2017-W01"></pre> + +<p>{{EmbedLiveSample('Value', 600, 60)}}</p> + +<p>要注意的一件事是，显示的格式可能与<code>value</code>不同，后者始终采用 <code>yyyy-Www</code>格式。 例如，当将上述值提交给服务器时，浏览器可能会将其显示为 <code>Week 01, 2017</code>, 但是提交的值始终看起来像<code>week=2017-W01</code>.</p> + +<p>您还可以使用输入元素的 {{domxref("HTMLInputElement.value", "value")}} 属性获取并设置JavaScript中的值，例如：</p> + +<pre class="brush: js">var weekControl = document.querySelector('input[type="week"]'); +weekControl.value = '2017-W45';</pre> + +<h2 id="其他属性">其他属性</h2> + +<p>除了 {{HTMLElement("input")}} 元素共有的属性外，周输入还提供以下属性：</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">属性</th> + <th scope="col">描述</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>{{anch("max")}}</code></td> + <td>接受为有效输入的最新年份和星期</td> + </tr> + <tr> + <td><code>{{anch("min")}}</code></td> + <td>最早的年和周接受为有效输入</td> + </tr> + <tr> + <td><code>{{anch("readonly")}}</code></td> + <td>一个布尔值（如果存在），指示用户无法编辑字段的内容</td> + </tr> + <tr> + <td><code>{{anch("step")}}</code></td> + <td>用于用户界面和约束验证的步进间隔（允许值之间的距离）</td> + </tr> + </tbody> +</table> + +<h3 id="htmlattrdefmax">{{htmlattrdef("max")}}</h3> + +<p>接受以上 {{anch("Value")}} 部分中讨论的字符串格式的最新（按时间）年份和星期数。 如果输入到元素中的 {{htmlattrxref("value", "input")}} 超过此值，则元素将无法通过<a href="/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation">约束验证</a>。 如果<code>max</code>属性的值不是有效的周字符串，则该元素没有最大值。</p> + +<p>此值必须大于或等于<code>min</code> 属性指定的年和周。</p> + +<h3 id="htmlattrdefmin">{{htmlattrdef("min")}}</h3> + +<p>最早接受的年和周。 如果元素的 {{htmlattrxref("value", "input")}}小于此值，则该元素将无法通过 <a href="/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation">约束验证</a>。 如果为<code>min</code>指定的值不是有效的星期字符串，则输入没有最小值。</p> + +<p>该值必须小于或等于 <code>max</code> 属性的值。</p> + +<p>{{page("/en-US/docs/Web/HTML/Element/input/text", "readonly", 0, 1, 2)}}</p> + +<h3 id="htmlattrdefstep">{{htmlattrdef("step")}}</h3> + +<p>{{page("/en-US/docs/Web/HTML/Element/input/number", "step-include")}}</p> + +<p>对于<code>week</code> 输入， <code>step</code> 的值以周为单位，比例因子为604,800,000（因为基础数值以毫秒为单位）。 <code>step</code>的默认值为1，表示1周。 默认的步进基数是-259,200,000，这是1970年第一周的开始 (<code>"1970-W01"</code>).</p> + +<p><em>目前，尚不清楚当与<code>week</code>输入一起使用时，<code>"any"</code> 的值对<code>step</code> 意味着什么。 确定该信息后，将对其进行更新。</em></p> + +<h2 id="使用星期输入">使用星期输入</h2> + +<p>乍看之下，周输入听起来很方便，因为它们提供了用于选择周的简单UI，并且它们标准化了发送到服务器的数据格式，而与用户的浏览器或区域设置无关。 但是， <code><input type="week"></code> 存在问题，因为不能保证所有浏览器都支持浏览器。</p> + +<p>我们将研究 <code><input type="week"></code>的基本和更复杂的用法，然后在以后提供有关缓解浏览器支持问题的建议（请参阅 {{anch("Handling browser support")}}).</p> + +<h3 id="周的基本用途">周的基本用途</h3> + +<p><code><input type="week"></code> 的最简单用法涉及基本的 <code><input></code> 和{{htmlelement("label")}} 元素组合，如下所示：</p> + +<pre class="brush: html"><form> + <label for="week">What week would you like to start?</label> + <input id="week" type="week" name="week"> +</form></pre> + +<p>{{EmbedLiveSample('Basic_uses_of_week', 600, 40)}}</p> + +<h3 id="控制输入大小">控制输入大小</h3> + +<p><code><input type="week"></code> 不支持 {{htmlattrxref("size", "input")}}. 您必须依靠<a href="/en-US/docs/Web/CSS">CSS</a>来确定大小 。</p> + +<h3 id="使用step属性">使用step属性</h3> + +<p>您应该能够使用{{htmlattrxref("step", "input")}} 属性来更改每次递增或递减的跳转周数，但是这似乎对支持浏览器没有任何影响。</p> + +<h2 id="验证方式">验证方式</h2> + +<p>默认情况下，<code><input type="week"></code> 不会对输入的值应用任何验证。 UI实现通常不允许您指定不是有效的周/年的任何内容，这很有用，但是仍然可以在字段为空的情况下提交，并且您可能希望限制可选择的周数范围。</p> + +<h3 id="设置最大和最小星期">设置最大和最小星期</h3> + +<p>您可以使用 {{htmlattrxref("min", "input")}} 和 {{htmlattrxref("max", "input")}} 属性来限制用户可以选择的有效周数。 在以下示例中，我们设置了 <code>Week 01, 2017</code> 的最小值和 <code>Week 52, 2017</code>的最大值：</p> + +<pre class="brush: html"><form> + <label for="week">What week would you like to start?</label> + <input id="week" type="week" name="week" + min="2017-W01" max="2017-W52"> + <span class="validity"></span> +</form></pre> + +<p>{{EmbedLiveSample('Setting_maximum_and_minimum_weeks', 600, 40)}}</p> + +<p>这是上面示例中使用的CSS。 在这里，我们利用{{cssxref(":valid")}} and {{cssxref(":invalid")}} CSS属性根据当前值是否有效来设置输入的样式。 我们必须将图标放在输入旁边的 {{htmlelement("span")}} 上，而不是输入本身上，因为在Chrome中，生成的内容位于表单控件内，无法设置样式或显示 有效。</p> + +<pre class="brush: css">div { + margin-bottom: 10px; + position: relative; +} + +input[type="number"] { + width: 100px; +} + +input + span { + padding-right: 30px; +} + +input:invalid+span:after { + position: absolute; + content: '✖'; + padding-left: 5px; +} + +input:valid+span:after { + position: absolute; + content: '✓'; + padding-left: 5px; +}</pre> + +<p>结果是，在2017年W01到W52之间只有几周才被视为有效，并且可以在支持的浏览器中选择。</p> + +<h3 id="使周值成为必需">使周值成为必需</h3> + +<p>另外，您可以使用 {{htmlattrxref("required", "input")}} }属性来强制填写星期。 因此，如果您尝试提交空白的星期字段，则支持的浏览器将显示错误。</p> + +<p>让我们看一个例子； 在这里，我们设置了最小和最大周数，并设置了必填字段：</p> + +<pre class="brush: html"><form> + <div> + <label for="week">What week would you like to start?</label> + <input id="week" type="week" name="week" + min="2017-W01" max="2017-W52" required> + <span class="validity"></span> + </div> + <div> + <input type="submit" value="Submit form"> + </div> +</form></pre> + +<p>如果您尝试提交不带任何值的表单，浏览器将显示错误。 现在尝试使用示例：</p> + +<p>{{EmbedLiveSample('Making_week_values_required', 600, 120)}}</p> + +<p>这是不使用支持的浏览器的屏幕截图：</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/15415/week-validation-chrome.png" style="display: block; height: 85px; margin: 0px auto; width: 473px;"></p> + +<div class="warning"> +<p><strong>重要提示：</strong>HTML表单验证不能代替脚本来确保输入的数据采用正确的格式。 对于某人来说，对HTML进行调整以使其绕过验证或完全删除验证太容易了。 有人也可以完全绕开您的HTML并将数据直接提交到您的服务器。 如果您的服务器端代码无法验证其接收到的数据，则在提交格式不正确的数据（或太大，类型错误的数据等）时，灾难可能会发生。</p> +</div> + +<h2 id="处理浏览器支持">处理浏览器支持</h2> + +<p>如上所述，现在使用星期输入的主要问题是浏览器支持：Safari和Firefox在桌面上不支持它，而旧版本的IE不支持它。</p> + +<p><br> + 诸如Android和iOS之类的移动平台确实很好地利用了这种输入类型，提供了专门的UI控件，使在触摸屏环境中选择值变得非常容易。 例如，Android版Chrome上的周选择器如下所示：<img alt="" src="https://mdn.mozillademos.org/files/15413/week-chrome-android.png" style="display: block; margin: 0 auto;"></p> + +<p>不支持的浏览器会优雅地降级为文本输入，但这在用户界面的一致性（所提供的控件将有所不同）和数据处理方面都产生了问题。</p> + +<p>第二个问题是更严重的。 如前所述，在输入一个<code>week</code> 的情况下，实际值始终会归一化为 <code>yyyy-Www</code>格式。当浏览器退回通用文本输入时，没有什么可以指导用户正确格式化输入的格式（这肯定是不直观的）。 人们可以通过多种方式来写星期值。 例如：</p> + +<ul> + <li><code>2017年第1周</code></li> + <li><code>2017年1月2日至8日</code></li> + <li><code>2017-W01</code></li> + <li>等等。</li> +</ul> + +<p>目前，以跨浏览器方式处理星期/年的最佳方法是让用户在单独的控件中输入星期数和年份 ({{htmlelement("select")}} 元素很流行； 参见下面的示例），或使用JavaScript库（例如 <a href="https://jqueryui.com/datepicker/">jQuery日期选择器</a>。</p> + +<h2 id="例子">例子</h2> + +<p>在此示例中，我们创建了两组用于选择星期的UI元素：使用 <code><input type="week"></code>，创建的本机选择器，以及两个用于选择星期/年的 {{htmlelement("select")}} 元素的集合 不支持<code>week</code>输入类型的旧版浏览器。 </p> + +<p>{{EmbedLiveSample('Examples', 600, 140)}}</p> + +<p>HTML看起来像这样：</p> + +<pre class="brush: html"><form> + <div class="nativeWeekPicker"> + <label for="week">What week would you like to start?</label> + <input id="week" type="week" name="week" + min="2017-W01" max="2018-W52" required> + <span class="validity"></span> + </div> + <p class="fallbackLabel">What week would you like to start?</p> + <div class="fallbackWeekPicker"> + <div> + <span> + <label for="week">Week:</label> + <select id="fallbackWeek" name="week"> + </select> + </span> + <span> + <label for="year">Year:</label> + <select id="year" name="year"> + <option value="2017" selected>2017</option> + <option value="2018">2018</option> + </select> + </span> + </div> + </div> +</form></pre> + +<p>周值由下面的JavaScript代码动态生成。</p> + +<div class="hidden"> +<pre class="brush: css">div { + margin-bottom: 10px; + position: relative; +} + +input[type="number"] { + width: 100px; +} + +input + span { + padding-right: 30px; +} + +input:invalid+span:after { + position: absolute; + content: '✖'; + padding-left: 5px; +} + +input:valid+span:after { + position: absolute; + content: '✓'; + padding-left: 5px; +}</pre> +</div> + +<p>该代码中可能感兴趣的另一部分是特征检测代码。 要检测浏览器是否支持<code><input type="week"></code>, 我们创建一个新的 {{htmlelement("input")}} 元素，尝试将其 <code>type</code> 设置为 <code>week</code>, 然后立即检查其 <code>type</code> 设置为。 不支持的浏览器将返回<code>text</code>，因为<code>week</code>类型回退为<code>text</code>类型。 如果不支持 , <code><input type="week"></code> 我们将隐藏本机选择器并显示后备选择器 UI ({{htmlelement("select")}}s) .</p> + +<pre class="brush: js">// define variables +var nativePicker = document.querySelector('.nativeWeekPicker'); +var fallbackPicker = document.querySelector('.fallbackWeekPicker'); +var fallbackLabel = document.querySelector('.fallbackLabel'); + +var yearSelect = document.querySelector('#year'); +var weekSelect = document.querySelector('#fallbackWeek'); + +// hide fallback initially +fallbackPicker.style.display = 'none'; +fallbackLabel.style.display = 'none'; + +// test whether a new date input falls back to a text input or not +var test = document.createElement('input'); + +try { + test.type = 'week'; +} catch (e) { + console.log(e.description); +} + +// if it does, run the code inside the if() {} block +if(test.type === 'text') { + // hide the native picker and show the fallback + nativePicker.style.display = 'none'; + fallbackPicker.style.display = 'block'; + fallbackLabel.style.display = 'block'; + + // populate the weeks dynamically + populateWeeks(); +} + +function populateWeeks() { + // Populate the week select with 52 weeks + for(var i = 1; i <= 52; i++) { + var option = document.createElement('option'); + option.textContent = (i < 10) ? ("0" + i) : i; + weekSelect.appendChild(option); + } +}</pre> + +<div class="note"> +<p><strong>注意：</strong> 请记住，有些年份有53周（请参阅 <a href="https://en.wikipedia.org/wiki/ISO_week_date#Weeks_per_year">每年的周数</a>)！ 在开发生产应用程序时，您需要考虑到这一点。</p> +</div> + +<h2 id="技术指标">技术指标</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">规格</th> + <th scope="col">状态</th> + <th scope="col">评论</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'forms.html#week-state-(type=week)', '<input type="week">')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<div class="hidden">此页面上的兼容性表是根据结构化数据生成的。 如果您想贡献数据，请查看<a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> 并向我们发送请求请求。</div> + +<p>{{Compat("html.elements.input.input-week")}}</p> + +<h2 id="另请详见">另请详见</h2> + +<ul> + <li>通用 {{HTMLElement("input")}} 元素和用于操作该元素的接口 {{domxref("HTMLInputElement")}}</li> + <li><a href="/en-US/docs/Web/HTML/Date_and_time_formats">HTML中使用的日期和时间格式</a></li> + <li><code><a href="/en-US/docs/Web/HTML/Element/input/datetime-local"><input type="datetime-local"></a></code>, <code><a href="/en-US/docs/Web/HTML/Element/input/date"><input type="date"></a></code>, <code><a href="/en-US/docs/Web/HTML/Element/input/time"><input type="time"></a></code>, 和 <code><a href="/en-US/docs/Web/HTML/Element/input/month"><input type="month"></a></code></li> +</ul> diff --git a/files/zh-cn/web/html/element/input/月份/index.html b/files/zh-cn/web/html/element/input/月份/index.html new file mode 100644 index 0000000000..9a2fbb6f2a --- /dev/null +++ b/files/zh-cn/web/html/element/input/月份/index.html @@ -0,0 +1,457 @@ +--- +title: <input type="month"> +slug: Web/HTML/Element/Input/月份 +tags: + - HTML + - Input + - 表单 +translation_of: Web/HTML/Element/input/month +--- +<p>{{HTMLRef}}</p> + +<p>类型为 <strong><code>month</code></strong> 的 {{htmlelement("input")}} 可以让你容易地创建一个方便输入年份或月份的一个 {{htmlelement("input")}}。</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/input-month.html", "tabbed-shorter")}}</div> + + + +<p>这个控件在各个浏览器支持都不同，目前是支持部分浏览器。在桌面上支持情况为 Chrome/Opera 和 Edge 。在移动端支持大部分现代浏览器。在其他浏览器中，这个控件会被优雅的降级到<code><a href="/en-US/docs/Web/HTML/Element/input/text"><input type="text"></a></code>.</p> + +<p>对于那些使用不支持的浏览器的用户，Chrome / Opera月份控制如下图所示。单击右侧的向下箭头会显示日期选择器，以便您选择日期;你必须手动输入时间。</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/15391/month-control-chrome.png" style="display: block; height: 216px; margin: 0px auto; width: 273px;"></p> + +<p>Edge的 <code>month</code> 看起来像这样的:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/15393/month-control-edge.png" style="display: block; height: 389px; margin: 0px auto; width: 227px;"></p> + +<table class="properties"> + <tbody> + <tr> + <td><strong>{{anch("Value")}}</strong></td> + <td>一个 {{domxref("DOMString")}} 代表一个月，一年，或者是空。</td> + </tr> + <tr> + <td><strong>Events</strong></td> + <td>{{event("change")}} 和 {{event("input")}}.</td> + </tr> + <tr> + <td><strong>Supported Common Attributes</strong></td> + <td>{{htmlattrxref("autocomplete", "input")}}, {{htmlattrxref("list", "input")}}, {{htmlattrxref("readonly", "input")}}, 和 {{htmlattrxref("step", "input")}}.</td> + </tr> + <tr> + <td><strong>IDL attributes</strong></td> + <td><code>value</code>.</td> + </tr> + <tr> + <td><strong>Methods</strong></td> + <td>{{domxref("HTMLInputElement.select", "select()")}}, {{domxref("HTMLInputElement.stepDown", "stepDown()")}}, {{domxref("HTMLInputElement.stepUp", "stepUp()")}}.</td> + </tr> + </tbody> +</table> + +<h2 id="Value">Value</h2> + +<p>{{domxref("DOMString")}} 表示输入输入的月份和年份的值, in the form YYYY-MM (four or more digit year, then a hyphen ("<code>-</code>"), followed by the two-digit month). The format of the month string used by this input type is described in {{SectionOnPage("/en-US/docs/Web/HTML/Date_and_time_formats", "Format of a valid local month string")}}.</p> + +<p>你可以设置一个默认的属性值插入到 {{htmlattrxref("value", "input")}} 里, 像这样:</p> + +<pre class="brush: html"><label for="bday-month">What month were you both in?</label> +<input id="bday-month" type="month" name="bday-month" value="2017-06"></pre> + +<p>{{EmbedLiveSample('value-example-1', 600, 60)}}</p> + +<p>需要注意的是显示的如期格式不同于实际的<code>value</code> — 日期显示的格式将根据用户的操作系统的时区设置, 而时间的格式通常会格式化为 <code>yyyy-MM</code>。</p> + +<p>在向服务器提交上述值的时候他们看起来像这样：<code>bday-month=1978-06</code>.</p> + +<p>你也可以使用JavaScript 的 {{domxref("HTMLInputElement.value")}} 来设置日期的值 。例如：</p> + +<pre class="brush: js">var monthControl = document.querySelector('input[type="month"]'); +monthControl.value = '1978-06';</pre> + +<p>{{EmbedLiveSample("value-example-2", 600, 60)}}</p> + +<p> </p> + +<h2 id="Additional_attributes">Additional attributes</h2> + +<p>In addition to the attributes common to {{HTMLElement("input")}} elements, month inputs offer the following attributes:</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Attribute</th> + <th scope="col">Description</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>{{anch("max")}}</code></td> + <td>The latest year and month to accept as a valid input</td> + </tr> + <tr> + <td><code>{{anch("min")}}</code></td> + <td>The earliest year and month to accept as a valid input</td> + </tr> + <tr> + <td><code>{{anch("readonly")}}</code></td> + <td>A Boolean which, if present, indicates that the input's value can't be edited</td> + </tr> + <tr> + <td><code>{{anch("step")}}</code></td> + <td>A stepping interval to use when incrementing and decrementing the value of the input field</td> + </tr> + </tbody> +</table> + +<h3 id="htmlattrdef(max)">{{htmlattrdef("max")}}</h3> + +<p>The latest year and month, in the string format discussed in the {{anch("Value")}} section above, to accept. If the {{htmlattrxref("value", "input")}} entered into the element exceeds this, the element fails <a href="https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation">constraint validation</a>. If the value of the <code>max</code> attribute isn't a valid string in "<code>yyyy-MM</code>" format, then the element has no maximum value.</p> + +<p>This value must specify a year-month pairing later than or equal to the one specified by the <code>min</code> attribute.</p> + +<h3 id="htmlattrdef(min)">{{htmlattrdef("min")}}</h3> + +<p>The latest year and month to accept, in the same "<code>yyyy-MM</code>" format described above. If the {{htmlattrxref("value", "input")}} of the element is less than this, the element fails <a href="https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation">constraint validation</a>. If a value is specified for <code>min</code> that isn't a valid year and month string, the input has no minimum value.</p> + +<p>This value must be a year-month pairing which is earlier than or equal to the one specified by the <code>max</code> attribute.</p> + +<h3 id="htmlattrdef(readonly)">{{htmlattrdef("readonly")}}</h3> + +<p>A Boolean attribute which, if present, means this field cannot be edited by the user. Its <code>value</code> can, however, still be changed from JavaScript code that directly sets the value of the {{domxref("HTMLInputElement.value")}} property.</p> + +<div class="note"> +<p><strong>Note:</strong> Because a read-only field cannot have a value, <code>required</code> does not have any effect on inputs with the <code>readonly</code> attribute also specified.</p> +</div> + +<h3 id="htmlattrdef(step)">{{htmlattrdef("step")}}</h3> + +<p>{{page("/en-US/docs/Web/HTML/Element/input/number", "step-include")}}</p> + +<p>For <code>month</code> inputs, the value of <code>step</code> is given in months, with a scaling factor of 1 (since the underlying numeric value is also in months). The default value of <code>step</code> is 1 month.</p> + +<p> </p> + +<h2 id="Using_month_inputs">Using month inputs</h2> + +<p>与日期相关的输入乍一看很方便，它们提供了一个简单的用户界面来选择日期，并且它们将发送到服务器的数据格式规范化，而不考虑用户的本地环境。但是, 由于浏览器支持有限，所以这个 <code><input type="month"></code>还是存在兼容性问题。</p> + +<p>我们在往下看更多关于<code><input type="month"></code>基础和更多的高级的用法</p> + +<p>, 下面将讲有关缓解浏览器支持问题的建议 (请参阅{{anch("Handling browser support")}}).</p> + +<h3 id="Basic_uses_of_month">Basic uses of month</h3> + +<p>最简单的<code><input type="month"></code> 涉及到基础的 <code><input></code> 和 {{htmlelement("label")}} 的元素组合, 像下面这样:</p> + +<pre class="brush: html"><form> + <label for="bday-month">What month were you both in?</label> + <input id="bday-month" type="month" name="bday-month"> +</form></pre> + +<p>{{ EmbedLiveSample('Basic_uses_of_month', 600, 40) }}</p> + +<h3 id="设置最长和最短日期">设置最长和最短日期</h3> + +<p>你可以使用{{htmlattrxref("min", "input")}} 和 {{htmlattrxref("max", "input")}} 属性 来限制用户选择日期. 在下列的例子中我们设置最小月份<code>1900-01</code> 最大月份到 <code>2017-08</code>:</p> + +<pre class="brush: html"><form> + <label for="bday-month">What month were you both in?</label> + <input id="bday-month" type="month" name="bday-month" + min="1900-01" max="2017-08"> +</form></pre> + +<p>{{ EmbedLiveSample('Setting_maximum_and_minimum_dates', 600, 40) }}</p> + +<p>结果是这样:</p> + +<ul> + <li>月份只有在2017年八月份到1900年一月可以选择 — 在这个控件里这个范围以外的月份不能滚动选择。</li> + <li>Depending on what browser you are using, you might find that times outside the specified values might not be selectable in the time picker (e.g. Edge), or invalid (see {{anch("Validation")}}) but still available (e.g. Chrome).</li> +</ul> + +<div class="note"> +<p><strong>Note</strong>: You should be able to use the {{htmlattrxref("step", "input")}} attribute to vary the number of days jumped each time the date is incremented (e.g. maybe you only want to make Saturdays selectable). However, this does not seem to work effectively in any implementation at the time of writing.</p> +</div> + +<h3 id="Controlling_input_size">Controlling input size</h3> + +<p><code><input type="month"></code> doesn't support form sizing attributes such as {{htmlattrxref("size", "input")}}. You'll have to resort to <a href="/en-US/docs/Web/CSS">CSS</a> for sizing needs.</p> + +<h2 id="Validation">Validation</h2> + +<p>By default, <code><input type="month"></code> does not apply any validation to entered values. The UI implementations generally don't let you enter anything that isn't a date — which is helpful — but you can still not fill in a date and submit, or enter an invalid date (e.g. the 32th of April).</p> + +<p>You can use {{htmlattrxref("min", "input")}} and {{htmlattrxref("max", "input")}} to restrict the available dates (see anch("Setting maximum and minimum dates")), and in addition use the {{htmlattrxref("required", "input")}} attribute to make filling in the date mandatory. As a result, supporting browsers will display an error if you try to submit a date that is outside the set bounds, or an empty date field.</p> + +<p>Let's look at an example — here we've set minimum and maximum dates, and also made the field required:</p> + +<pre class="brush: html"><form> + <div> + <label for="month">What Month would you like to visit us? (Summer months only.)</label> + <input id="month" type="month" name="month" + min="2017-06" max="2017-09" required> + <span class="validity"></span> + </div> + <div> + <input type="submit" value="Submit form"> + </div> +</form></pre> + +<p>If you try to submit the form with an incomplete date (or with a date outside the set bounds), the browser displays an error. Try playing with the example now:</p> + +<p>{{ EmbedLiveSample('Validation', 600, 120) }}</p> + +<p>Here's'a screenshot for those of you who aren't using a supporting browser:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/15395/month-required.png" style="display: block; margin: 0 auto;"></p> + +<p>Here's the CSS used in the above example. Here we make use of the {{cssxref(":valid")}} and {{cssxref(":invalid")}} CSS properties to style the input based on whether or not the current value is valid. We had to put the icons on a {{htmlelement("span")}} next to the input, not on the input itself, because in Chrome the generated content is placed inside the form control, and can't be styled or shown effectively.</p> + +<pre class="brush: css">div { + margin-bottom: 10px; + position: relative; +} + +input[type="number"] { + width: 100px; +} + +input + span { + padding-right: 30px; +} + +input:invalid+span:after { + position: absolute; + content: '✖'; + padding-left: 5px; +} + +input:valid+span:after { + position: absolute; + content: '✓'; + padding-left: 5px; +}</pre> + +<div class="warning"> +<p><strong>Important</strong>: HTML form validation is <em>not</em> a substitute for scripts that ensure that the entered data is in the proper format. It's far too easy for someone to make adjustments to the HTML that allow them to bypass the validation, or to remove it entirely. It's also possible for someone to simply bypass your HTML entirely and submit the data directly to your server. If your server-side code fails to validate the data it receives, disaster could strike when improperly-formatted data is submitted (or data which is too large, of the wrong type, and so forth).</p> +</div> + +<h2 id="Handling_browser_support">Handling browser support</h2> + +<p>As mentioned above, the major problem with using date inputs at the time of writing is browser support — only Chrome/Opera and Edge support it on desktop, and most modern browsers on mobile. As an example, the <code>month</code> picker on Chrome for Android looks like this:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/15397/month-android.png" style="display: block; margin: 0 auto;"></p> + +<p>Non-supporting browsers gracefully degrade to a text input, but this creates problems both in terms of consistency of user interface (the presented control will be different), and data handling.</p> + +<p>The second problem is the most serious — as we mentioned earlier, with a <code>month</code> input the actual value is always normalized to the format <code>yyyy-mm</code>. With a text input on the other hand, by default the browser has no recognition of what format the date should be in, and there multiple ways in which people write dates, for example:</p> + +<ul> + <li><code>mmyyyy</code></li> + <li><code>mm/yyyy</code></li> + <li><code>mm-yyyy</code></li> + <li><code>yyyy-mm</code></li> + <li>etc.</li> +</ul> + +<p>One way around this is to put a {{htmlattrxref("pattern", "input")}} attribute on your <code>month</code> input. Even though the <code>month</code> input doesn't use it, the text input fallback will. For example, try viewing the following demo in a non-supporting browser:</p> + +<pre class="brush: html"><form> + <div> + <label for="month">What Month would you like to visit us? (Summer months only, yyyy-mm)</label> + <input id="month" type="month" name="month" + min="2017-06" max="2017-09" required + pattern="[0-9]{4}-[0-9]{2}"> + <span class="validity"></span> + </div> + <div> + <input type="submit" value="Submit form"> + </div> +</form></pre> + +<p>{{ EmbedLiveSample('Handling_browser_support', 600, 100) }}</p> + +<p>If you try submitting it, you'll see that the browser now displays an error message (and highlights the input as invalid) if your entry doesn't match the pattern <code>nnnn-nn</code>, where <code>n</code> is a number from 0 to 9. Of course, this doesn't stop people from entering invalid dates, or incorrectly formatted dates that follow the pattern.</p> + +<p>And what user is going to understand the pattern they need to enter the date in?</p> + +<p>We still have a problem.</p> + +<div class="hidden"> +<pre class="brush: css">div { + margin-bottom: 10px; + position: relative; +} + +input[type="number"] { + width: 100px; +} + +input + span { + padding-right: 30px; +} + +input:invalid+span:after { + position: absolute; + content: '✖'; + padding-left: 5px; +} + +input:valid+span:after { + position: absolute; + content: '✓'; + padding-left: 5px; +}</pre> +</div> + +<p>The best way to deal with dates in forms in a cross-browser way at the moment is to get the user to enter the month and year in separate controls ({{htmlelement("select")}} elements being popular — see below for an implementation), or use JavaScript libraries such as <a href="https://jqueryui.com/datepicker/">jQuery date picker</a>, and the <a href="http://timepicker.co/">jQuery timepicker plugin</a>.</p> + +<h2 id="Examples">Examples</h2> + +<p>In this example we create two sets of UI elements for choosing dates — a native picker created with <code><input type="month"></code>, and a set of two {{htmlelement("select")}} elements for choosing months/years in older browsers that don't support the native input.</p> + +<p>{{ EmbedLiveSample('Examples', 600, 140) }}</p> + +<p>The HTML looks like so:</p> + +<pre class="brush: html"><form> + <div class="nativeDatePicker"> + <label for="month-visit">What Month would you like to visit us?</label> + <input type="month" id="month-visit" name="month-visit"> + <span class="validity"></span> + </div> + <p class="fallbackLabel">What Month would you like to visit us?</p> + <div class="fallbackDatePicker"> + <div> + <span> + <label for="month">Month:</label> + <select id="month" name="month"> + <option selected>January</option> + <option>February</option> + <option>March</option> + <option>April</option> + <option>May</option> + <option>June</option> + <option>July</option> + <option>August</option> + <option>September</option> + <option>October</option> + <option>November</option> + <option>December</option> + </select> + </span> + <span> + <label for="year">Year:</label> + <select id="year" name="year"> + </select> + </span> + </div> + </div> +</form></pre> + +<p>The months are hardcoded (as they are always the same), while the year values are dynamically generated depending on the current year (see the code comments below for detailed explanations of how these functions work.)</p> + +<div class="hidden"> +<pre class="brush: css">div { + margin-bottom: 10px; + position: relative; +} + +input[type="number"] { + width: 100px; +} + +input + span { + padding-right: 30px; +} + +input:invalid+span:after { + position: absolute; + content: '✖'; + padding-left: 5px; +} + +input:valid+span:after { + position: absolute; + content: '✓'; + padding-left: 5px; +}</pre> +</div> + +<p>The other part of the code that may be of interest is the feature detection code — to detect whether the browser supports <code><input type="month"></code>, we create a new {{htmlelement("input")}} element, set its <code>type</code> to <code>month</code>, then immediately check what its type is set to — non-supporting browsers will return <code>text</code>, because the <code>date</code> type falls back to type <code>text</code>. If <code><input type="month"></code> is not supported, we hide the native picker and show the fallback picker UI ({{htmlelement("select")}}) instead.</p> + +<pre class="brush: js">// define variables +var nativePicker = document.querySelector('.nativeDatePicker'); +var fallbackPicker = document.querySelector('.fallbackDatePicker'); +var fallbackLabel = document.querySelector('.fallbackLabel'); + +var yearSelect = document.querySelector('#year'); +var monthSelect = document.querySelector('#month'); + +// hide fallback initially +fallbackPicker.style.display = 'none'; +fallbackLabel.style.display = 'none'; + +// test whether a new date input falls back to a text input or not +var test = document.createElement('input'); +test.type = 'month'; +// if it does, run the code inside the if() {} block +if(test.type === 'text') { + // hide the native picker and show the fallback + nativePicker.style.display = 'none'; + fallbackPicker.style.display = 'block'; + fallbackLabel.style.display = 'block'; + + // populate the years dynamically + // (the months are always the same, therefore hardcoded) + populateYears(); +} + +function populateYears() { + // get the current year as a number + var date = new Date(); + var year = date.getFullYear(); + + // Make this year, and the 100 years before it available in the year <select> + for(var i = 0; i <= 100; i++) { + var option = document.createElement('option'); + option.textContent = year-i; + yearSelect.appendChild(option); + } +}</pre> + +<h2 id="规范">规范</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">规范</th> + <th scope="col">状态</th> + <th scope="col">备注</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'forms.html#month-state-(type=month)', '<input type="month">')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + + + +<p>{{Compat("html.elements.input.input-month")}}</p> + +<h2 id="参见">参见</h2> + +<ul> + <li>The generic {{HTMLElement("input")}} element and the interface used to manipulate it, {{domxref("HTMLInputElement")}}</li> + <li><a href="/en-US/docs/Web/HTML/Date_and_time_formats">Date and time formats used in HTML</a></li> + <li><a href="/en-US/docs/Web/Guide/HTML/Forms/The_native_form_widgets#Date_and_time_picker">Date and Time picker tutorial</a></li> + <li><code><a href="/en-US/docs/Web/HTML/Element/input/datetime-local"><input type="datetime-local"></a></code>, <code><a href="/en-US/docs/Web/HTML/Element/input/date"><input type="date"></a></code>, <code><a href="/en-US/docs/Web/HTML/Element/input/time"><input type="time"></a></code>, and <code><a href="/en-US/docs/Web/HTML/Element/input/week"><input type="week"></a></code></li> +</ul> diff --git a/files/zh-cn/web/html/element/input/范围/index.html b/files/zh-cn/web/html/element/input/范围/index.html new file mode 100644 index 0000000000..9450c705b2 --- /dev/null +++ b/files/zh-cn/web/html/element/input/范围/index.html @@ -0,0 +1,515 @@ +--- +title: <input type="range"> +slug: Web/HTML/Element/Input/范围 +tags: + - HTML + - 元素 + - 参考 + - 网页 + - 范围 +translation_of: Web/HTML/Element/input/range +--- +<div>{{HTMLRef}}</div> + +<p><span class="seoSummary">{{HTMLElement("input")}} <strong><code>range</code></strong> 类型的元素允许用户指定一个数值，该数值必须不小于给定值，并且不得大于另一个给定值。但是，精确值并不重要。通常使用滑块或拨号控件而不是像 {{HTMLElement('input/number', 'number')}} 输入类型这样的文本输入框来表示。</span> 由于这种小部件不精确，因此除非控件的确切值不重要，否则通常不应使用它。</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/input-range.html", "tabbed-standard")}}</div> + +<p class="hidden">该交互式示例的源存储在GitHub存储库中。 如果您想为交互式示例项目做出贡献，请克隆 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> 并向我们发送请求请求。</p> + +<p>如果用户的浏览器不支持类型范围，它将回退并将其视为 <code>{{HTMLElement('input/text', 'text')}}</code> 输入。</p> + +<table class="properties"> + <tbody> + <tr> + <td><strong>{{anch("Value")}}</strong></td> + <td>A {{domxref("DOMString")}} containing the string representation of the selected numeric value; use {{domxref("HTMLInputElement.valueAsNumber", "valueAsNumber")}} to get the value as a {{jsxref("Number")}}.</td> + </tr> + <tr> + <td><strong>事件</strong></td> + <td>{{event("change")}} and {{event("input")}}</td> + </tr> + <tr> + <td><strong>支持的常用属性</strong></td> + <td>{{htmlattrxref("autocomplete", "input")}}, {{htmlattrxref("list", "input")}}, {{htmlattrxref("max", "input")}}, {{htmlattrxref("min", "input")}}, and {{htmlattrxref("step", "input")}}</td> + </tr> + <tr> + <td><strong>IDL属性</strong></td> + <td><code>list</code>, <code>value</code>, 和 <code>valueAsNumber</code></td> + </tr> + <tr> + <td><strong>方法</strong></td> + <td>{{domxref("HTMLInputElement.stepDown", "stepDown()")}} and {{domxref("HTMLInputElement.stepUp", "stepUp()")}}</td> + </tr> + </tbody> +</table> + +<h3 id="验证方式">验证方式</h3> + +<p>没有可用的模式验证。 但是，执行以下形式的自动验证：</p> + +<ul> + <li>如果将 {{htmlattrxref("value", "input")}} 设置为无法转换为有效浮点数的值，则验证将失败，因为输入正遭受错误的输入。</li> + <li>该值不得小于 {{htmlattrxref("min", "input")}}. 默认值为0。</li> + <li>该值将不大于 {{htmlattrxref("max", "input")}}. 默认值为100。</li> + <li>该值将是 {{htmlattrxref("step", "input")}}. 预设值为1。</li> +</ul> + +<h3 id="值">值</h3> + +<p>{{htmlattrxref("value", "input")}} 属性包含一个 {{domxref("DOMString")}} 该属性包含所选数字的字符串表示形式。 该值绝不能为空字符串 (<code>""</code>). 默认值介于指定的最小值和最大值之间，除非最大值实际上小于最小值，在这种情况下，默认值设置 <code>min</code> 属性的值。确定默认值的算法是：</p> + +<pre class="brush: js notranslate">defaultValue = (rangeElem.max < rangeElem.min) ? rangeElem.min + : rangeElem.min + (rangeElem.max - rangeElem.min)/2;</pre> + +<p>如果尝试将值设置为小于最小值，则将其设置为最小值。 类似地，尝试将值设置为大于最大值会导致将其设置为最大值。</p> + +<h2 id="其他属性">其他属性</h2> + +<p>除了所有 {{HTMLElement("input")}} 元素共享的属性之外，范围输入还提供以下属性：</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">属性</th> + <th scope="col">描述</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>{{anch("list")}}</code></td> + <td><datalist>元素的ID，其中包含可选的预定义选项</td> + </tr> + <tr> + <td><code>{{anch("max")}}</code></td> + <td>最大允许值</td> + </tr> + <tr> + <td><code>{{anch("min")}}</code></td> + <td>最小允许值</td> + </tr> + <tr> + <td><code>{{anch("step")}}</code></td> + <td>步进间隔，用于用户界面和验证目的</td> + </tr> + </tbody> +</table> + +<p id="htmlattrdeflist">{{page("/en-US/docs/Web/HTML/Element/input/text", "list", 0, 1, 2)}}</p> + +<p>有关在支持的浏览器中如何表示范围中的选项的示例，请参见下面的<a href="#A_range_control_with_hash_marks">带散列的标记范围控制</a></p> + +<h3 id="htmlattrdefmax">{{htmlattrdef("max")}}</h3> + +<p>允许值范围内的最大值。 如果输入到元素中的{{htmlattrxref("value", "input")}}超过此值，则元素将无法通过<a href="/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation">约束验证</a>。 如果 <code><a href="/en-US/docs/Web/HTML/Attributes/max">max</a></code> 属性的值不是数字，则元素没有最大值。</p> + +<p>此值必须大于或等于min属性的值。 请参见 <a href="/en-US/docs/Web/HTML/Attributes/max">HTML <code>max</code></a><code>属性。</code></p> + +<h3 id="htmlattrdefmin">{{htmlattrdef("min")}}</h3> + +<p>允许值范围内的最小值。 如果元素的{{htmlattrxref("value", "input")}} 小于此值，则该元素将无法通过 <a href="/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation">约束验证</a>。如果为<code>min</code> 指定的值不是有效数字，则输入没有最小值。</p> + +<p>该值必须小于或等于max属性的值。 请参见 <a href="/en-US/docs/Web/HTML/Attributes/min">HTML <code>min</code>属性</a>。</p> + +<h3 id="htmlattrdefstep">{{htmlattrdef("step")}}</h3> + +<p>{{page("/en-US/docs/Web/HTML/Element/input/number", "step-include")}}</p> + +<p><code>range</code> 输入的默认步进值为1，除非步进基数不是整数，否则仅允许输入整数；否则，默认值为1。 例如，如果将 <code>min</code> 设置为-10并将 <code>value</code> 设置为1.5，则1的 <code>step</code> 将只允许正方向上的值为1.5、2.5、3.5，...，以及-0.5，-1.5，-2.5等。 ..朝负面方向发展。 请参阅<a href="/en-US/docs/Web/HTML/Attributes/step">HTML <code>step</code> 属性</a>。</p> + +<h3 id="非标准属性">非标准属性</h3> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">属性</th> + <th scope="col">描述</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>{{anch("orient")}}</code></td> + <td>设置范围滑块的方向。 <strong>仅限Firefox .</strong></td> + </tr> + </tbody> +</table> + +<dl> + <dt>{{htmlattrdef("orient")}} {{non-standard_inline}}</dt> + <dd id="orient-include">类似于-moz-orient非标准CSS属性会影响 {{htmlelement('progress')}} 和 {{htmlelement('meter')}} 元素， <code>orient</code> 属性定义范围滑块的方向。 值包括 <code>horizontal</code>, 表示范围是水平呈现， 和 <code>vertical</code>, 其中范围是垂直呈现）。</dd> +</dl> + +<div class="blockIndicator note"> +<p>注意：以下输入属性不适用于输入范围：<code>accept</code>, <code>alt</code>, <code>checked</code>, <code>dirname</code>, <code>formaction</code>, <code>formenctype</code>, <code>formmethod</code>, <code>formnovalidate</code>, <code>formtarget</code>,高度, <code>maxlength</code>, <code>minlength</code>, <code>multiple</code>, <code>pattern</code>, <code>placeholder</code>, <code>readonly</code>, <code>required</code>, <code>size</code>, <code>src</code>, 和 <code>width</code>. 这些属性中的任何一个（如果包含）将被忽略。</p> +</div> + +<h2 id="例子">例子</h2> + +<p>虽然 <code>number</code> 类型允许用户输入带有可选约束的数字，以强制其值介于最小值和最大值之间，但它确实要求他们输入特定值。 <code>range</code> 输入类型使您可以在用户甚至不关心或不知道所选的特定数字值是什么的情况下，向用户询问一个值。</p> + +<p>常用范围输入的一些情况示例：</p> + +<ul> + <li>音频控件（例如音量和平衡）或过滤器控件。</li> + <li>颜色配置控件，例如颜色通道，透明度，亮度等。</li> + <li>游戏配置控件，例如难度，可见性距离，世界范围等等。</li> + <li>密码管理员生成的密码的密码长度。</li> +</ul> + +<p>通常，如果用户对最小值和最大值之间的距离的百分比比实际数字本身更感兴趣，则范围输入是一个不错的选择。 例如，在家庭立体声音量控制的情况下，用户通常认为“将音量设置为最大音量的一半”而不是“将音量设置为0.5”。</p> + +<h3 id="指定最小和最大">指定最小和最大</h3> + +<p>默认情况下，最小值为0，最大值为100。如果这不是您想要的值，则可以通过更改 {{htmlattrxref("min", "input")}} 和/或 {{htmlattrxref("max", "input")}} 属性。 这些可以是任何浮点值。</p> + +<p>例如，要要求用户输入介于-10和10之间的值，可以使用：</p> + +<pre class="brush: html notranslate"><input type="range" min="-10" max="10"></pre> + +<p>{{EmbedLiveSample("Specifying_the_minimum_and_maximum", 600, 40)}}</p> + +<h3 id="设置值的粒度">设置值的粒度</h3> + +<p>默认情况下，粒度为1，表示该值始终是整数。 您可以更改 {{htmlattrxref("step")}} 属性以控制粒度。 例如，如果您需要一个介于5到10之间的值（精确到两位小数），则应将 <code>step</code> 的值设置为0.01:</p> + +<div id="Granularity_sample1"> +<pre class="brush: html notranslate"><input type="range" min="5" max="10" step="0.01"></pre> + +<p>{{EmbedLiveSample("Granularity_sample1", 600, 40)}}</p> +</div> + +<p>如果要接受任何值而不论扩展到小数点后多少位，都可以为{{htmlattrxref("step", "input")}} 属性指定 <code>any</code> 数值。</p> + +<div id="Granularity_sample2"> +<pre class="brush: html notranslate"><input type="range" min="0" max="3.14" step="any"></pre> + +<p>{{EmbedLiveSample("Granularity_sample2", 600, 40)}}</p> + +<p>该示例使用户可以选择0到π之间的任何值，而对所选值的小数部分没有任何限制。</p> +</div> + +<h3 id="添加井号和标签">添加井号和标签</h3> + +<p>HTML规范使浏览器在如何显示范围控件方面具有一定的灵活性。 在散列标记和较小程度上的标签方面，这种灵活性最明显。 该规范描述了如何使用 {{htmlattrxref("list", "input")}} 属性和 {{HTMLElement("datalist")}} 元素将自定义点添加到范围控件，但没有任何要求或 甚至是沿控件长度的标准化哈希或刻度线的建议。</p> + +<h4 id="范围控制模型">范围控制模型</h4> + +<p>由于浏览器具有这种灵活性，并且迄今为止都不支持HTML为范围控件定义的所有功能，因此以下是一些模型，以向您展示在支持它们的浏览器中在macOS上可以得到的功能。</p> + +<h5 id="无装饰的范围控制">无装饰的范围控制</h5> + +<p>如果不指定 {{htmlattrxref("list", "input")}} 属性，或者浏览器不支持该属性，则会得到此结果。</p> + +<table class="fullwidth standard-table"> + <tbody> + <tr> + <th>HTML</th> + <th>例子</th> + </tr> + <tr> + <td rowspan="4"> + <pre class="brush: html notranslate"> +<input type="range"></pre> + </td> + <th>屏幕截图</th> + </tr> + <tr> + <td><img alt="Screenshot of a plain slider control on macOS" src="https://mdn.mozillademos.org/files/14989/macslider-plain.png" style="height: 28px; width: 184px;"></td> + </tr> + <tr> + <th>留存</th> + </tr> + <tr> + <td>{{EmbedLiveSample("An_unadorned_range_control",200,55,"","", "nobutton")}}</td> + </tr> + </tbody> +</table> + +<h5 id="带散列标记的范围控件">带散列标记的范围控件</h5> + +<p>此范围控件使用的 <code>list</code> 属性指定{{HTMLElement("datalist")}} 的ID，该ID定义了控件上的一系列带散列的标记。 其中有11个，因此在0％和每个10％标记处都有一个。 每个点均使用 {{HTMLElement("option")}} 元素表示，其元素 {{htmlattrxref("value", "option")}} 设置为应绘制标记的范围值。</p> + +<table class="fullwidth standard-table"> + <tbody> + <tr> + <th>HTML</th> + <th>例子</th> + </tr> + <tr> + <td rowspan="4"> + <pre class="brush: html notranslate"> +<input type="range" list="tickmarks"> + +<datalist id="tickmarks"> + <option value="0"></option> + <option value="10"></option> + <option value="20"></option> + <option value="30"></option> + <option value="40"></option> + <option value="50"></option> + <option value="60"></option> + <option value="70"></option> + <option value="80"></option> + <option value="90"></option> + <option value="100"></option> +</datalist> +</pre> + </td> + <th>屏幕截图</th> + </tr> + <tr> + <td><img alt="Screenshot of a plain slider control on macOS" src="https://mdn.mozillademos.org/files/14991/macslider-ticks.png" style="height: 28px; width: 184px;"></td> + </tr> + <tr> + <th>留存</th> + </tr> + <tr> + <td>{{EmbedLiveSample("A_range_control_with_hash_marks_and_labels",200,55,"","", "nobutton")}}</td> + </tr> + </tbody> +</table> + +<h5 id="具有散列标记和标签的范围控件">具有散列标记和标签的范围控件</h5> + +<p>您可以通过向 {{htmlattrxref("label", "option")}} 元素添加 {{HTMLElement("option")}} 属性来将标签添加到您的范围控件中，这些元素对应于您希望为其添加标签的标记。</p> + +<table class="fullwidth standard-table"> + <tbody> + <tr> + <th>HTML</th> + <th>例子</th> + </tr> + <tr> + <td rowspan="4"> + <pre class="brush: html notranslate"> +<input type="range" list="tickmarks"> + +<datalist id="tickmarks"> + <option value="0" label="0%"></option> + <option value="10"></option> + <option value="20"></option> + <option value="30"></option> + <option value="40"></option> + <option value="50" label="50%"></option> + <option value="60"></option> + <option value="70"></option> + <option value="80"></option> + <option value="90"></option> + <option value="100" label="100%"></option> +</datalist> +</pre> + </td> + <th>屏幕截图</th> + </tr> + <tr> + <td><img alt="Screenshot of a plain slider control on macOS" src="https://mdn.mozillademos.org/files/14993/macslider-labels.png" style="height: 44px; width: 184px;"></td> + </tr> + <tr> + <th>留存</th> + </tr> + <tr> + <td>{{EmbedLiveSample("A_range_control_with_hash_marks_and_labels",200,55,"","", "nobutton")}}</td> + </tr> + </tbody> +</table> + +<div class="note"> +<p><strong>注意</strong>: 目前没有浏览器完全支持这些特性。例如，Firefox根本不支持散列标记和标签，而Chrome支持散列标记，但不支持标签。Chrome的66版本(66.0.3359.181)支持标签，但是 {{htmlelement("datalist")}} 标签必须使用CSS样式，因为它的 {{cssxref("display")}}属性默认设置为 <code>none</code> ，隐藏了标签。</p> +</div> + +<h3 id="改变方向">改变方向</h3> + +<div class="xhidden"> +<p>使旋钮向左和向右滑动。 如果支持，我们将能够声明垂直高度，并通过声明高度值大于宽度值来使用CSS上下滑动。 任何主要的浏览器实际上尚未实现此功能。（请参阅{{bug(981916)}}, <a href="https://bugs.chromium.org/p/chromium/issues/detail?id=341071">Chrome bug 341071</a>)。也许它仍在讨论中。</p> + +<p>同时，我们可以通过使用CSS变换旋转范围来使范围垂直，或者通过使用各自的方法定位每个浏览器引擎，包括通过将 {{cssxref('appearance')}} 设置为 <code>slider-vertical</code>, 在Firefox中使用非标准的<code>orient</code> 属性，或通过更改Internet Explorer和Edge的文本方向。</p> + +<p>考虑以下范围控制：</p> + +<div id="Orientation_sample1"> +<pre class="brush: html notranslate"><input type="range" id="volume" min="0" max="11" value="7" step="1"></pre> +</div> + +<p>{{EmbedLiveSample("Orientation_sample1", 200, 200, "https://mdn.mozillademos.org/files/14983/Orientation_sample1.png")}}</p> + +<p>此控件是水平的（至少对大多数主要浏览器（至少，如果不是全部）；其他控件可能有所不同）。</p> + +<h3 id="标准">标准</h3> + +<p>根据规范，使其垂直需要添加CSS来更改控件的尺寸，以使其比宽度高，如下所示：</p> + +<div id="Orientation_sample2"> +<h4 id="CSS">CSS</h4> + +<pre class="brush: css notranslate">#volume { + height: 150px; + width: 50px; +}</pre> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html notranslate"><input type="range" id="volume" min="0" max="11" value="7" step="1"></pre> + +<h4 id="结果">结果</h4> + +<p>{{EmbedLiveSample("Orientation_sample2", 200, 200, "https://mdn.mozillademos.org/files/14985/Orientation_sample2.png")}}</p> +</div> +</div> + +<p>不幸的是，当前没有主流浏览器直接支持垂直范围控件。</p> + +<h3 id="变换：旋转（-90deg）">变换：旋转（-90deg）</h3> + +<p>但是，您可以通过在侧面绘制水平范围控件来创建垂直范围控件。 最简单的方法是使用CSS：通过应用 {{cssxref("transform")}} 旋转元素，可以使其垂直。 让我们来看看。</p> + +<h4 id="HTML_2">HTML</h4> + +<p>需要更新HTML，以将 {{HTMLElement("input")}} 包裹在 {{HTMLElement("div")}} 中，以便我们在执行转换后纠正布局（因为转换不会自动影响 页面的布局）：</p> + +<pre class="brush: html notranslate"><div class="slider-wrapper"> + <input type="range" min="0" max="11" value="7" step="1"> +</div></pre> + +<h4 id="CSS_2">CSS</h4> + +<p>现在我们需要一些CSS。 首先是包装器本身的CSS； 这指定了我们想要的显示模式和大小，以便页面正确布局； 本质上，它是为滑块保留页面的区域，以便旋转的滑块适合保留的空间而不会造成混乱。</p> + +<pre class="brush: css notranslate">.slider-wrapper { + display: inline-block; + width: 20px; + height: 150px; + padding: 0; +} +</pre> + +<p>然后是保留空间中 <code><input></code> 元素的样式信息：</p> + +<pre class="brush: css notranslate">.slider-wrapper input { + width: 150px; + height: 20px; + margin: 0; + transform-origin: 75px 75px; + transform: rotate(-90deg); +}</pre> + +<p>控件的大小设置为150像素长x 20像素高。 边距设置为0， {{cssxref("transform-origin")}} 移至滑块旋转通过的空间的中间； 由于滑块配置为150像素宽，因此它将旋转通过每边150像素的框。 在每个轴上将原点偏移75像素，这意味着我们将围绕该空间的中心旋转。 最后，我们将逆时针旋转90°。 结果：旋转一个范围输入，因此最大值在顶部，最小值在底部。</p> + +<p>{{EmbedLiveSample("transform_rotate-90deg", 200, 200, "https://mdn.mozillademos.org/files/14987/Orientation_sample3.png")}}</p> + +<h3 id="外观特性">外观特性</h3> + +<p>{{cssxref('appearance')}}属性具有非标准值的<code>slider-vertical</code>可以使滑块垂直。</p> + +<h4 id="HTML_3">HTML</h4> + +<p>我们使用与前面的示例相同的HTML：</p> + +<pre class="brush: html notranslate"><input type="range" min="0" max="11" value="7" step="1"> +</pre> + +<h4 id="CSS_3">CSS</h4> + +<p>我们仅针对具有范围类型的输入：</p> + +<pre class="brush: css notranslate">input[type="range"] { + -webkit-appearance: slider-vertical; +}</pre> + +<p>{{EmbedLiveSample("appearance_property", 200, 200)}}</p> + +<h3 id="定向属性">定向属性</h3> + +<p>仅在Firefox中，有一个非标准的 <code>orient</code> 属性。</p> + +<h4 id="HTML_4">HTML</h4> + +<p>使用与前面示例类似的HTML，我们添加属性值为 <code>vertical</code>:</p> + +<pre class="brush: html notranslate"><input type="range" min="0" max="11" value="7" step="1" orient="vertical"> +</pre> + +<p>{{EmbedLiveSample("orient_attribute", 200, 200)}}</p> + +<h3 id="写作模式：bt-lr">写作模式：bt-lr;</h3> + +<p>The {{cssxref('writing-mode')}} 属性通常不应用于出于国际化或本地化目的更改文本方向，而可以用于特殊效果。</p> + +<h4 id="HTML_5">HTML</h4> + +<p>我们使用与前面的示例相同的HTML：</p> + +<pre class="brush: html notranslate"><input type="range" min="0" max="11" value="7" step="1"> +</pre> + +<h4 id="CSS_4">CSS</h4> + +<p>我们仅以范围为类型的输入作为目标，将写入模式从默认更改为 <code>bt-lr</code>, 或从下至上和从左至右：</p> + +<pre class="brush: css notranslate">input[type="range"] { + writing-mode: bt-lr; +}</pre> + +<p>{{EmbedLiveSample("writing-mode_bt-lr", 200, 200)}}</p> + +<h3 id="放在一起">放在一起</h3> + +<p>由于上述每个示例都在不同的浏览器中工作，因此您可以将所有示例放在一个示例中，以使其在跨浏览器中工作：</p> + +<h4 id="HTML_6">HTML</h4> + +<p>对于Firefox，我们将<code>orient</code>属性的值保持为<code>vertical：</code></p> + +<pre class="brush: html notranslate"><input type="range" min="0" max="11" value="7" step="1" orient="vertical"> +</pre> + +<h4 id="CSS_5">CSS</h4> + +<p>对于Edge和Internet Explorer，我们仅将输入类型作为目标，将写入模式从默认更改为 <code>bt-lr</code>, 或者从下至上，从左至右，然后添加 <code>-webkit-appearance: slider-vertical</code>用于所有基于-webkit的浏览器：</p> + +<pre class="brush: css notranslate">input[type="range"] { + writing-mode: bt-lr; + -webkit-appearance: slider-vertical; +}</pre> + +<p>{{EmbedLiveSample("Putting_it_all_together", 200, 200)}}</p> + +<h2 id="技术指标">技术指标</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">规格</th> + <th scope="col">状态</th> + <th scope="col">评论</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'forms.html#range-state-(type=range)', '<input type="range">')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>最初的定义</td> + </tr> + <tr> + <td>{{SpecName('HTML5.1', 'sec-forms.html#range-state-typerange', '<input type="range">')}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td>最初的定义</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<div class="hidden">此页面上的兼容性表是根据结构化数据生成的。 如果您想贡献数据，请查看<a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> 并向我们发送请求请求。</div> + +<p>{{Compat("html.elements.input.input-range")}}</p> + +<h2 id="另请参考">另请参考</h2> + +<ul> + <li><a href="/en-US/docs/Learn/HTML/Forms">HTML 表单</a></li> + <li>{{HTMLElement("input")}} and the {{domxref("HTMLInputElement")}} interface it's based upon</li> + <li><code><a href="/en-US/docs/Web/HTML/Element/input/number"><input type="number"></a></code></li> + <li>{{domxref('validityState.rangeOverflow')}} and {{domxref('validityState.rangeUnderflow')}}</li> + <li><a href="/en-US/docs/Web/API/Web_Audio_API/Controlling_multiple_parameters_with_ConstantSourceNode">使用ConstantSourceNode控制多个参数</a></li> + <li><a href="https://css-tricks.com/sliding-nightmare-understanding-range-input">设置范围元素的样式</a></li> +</ul> diff --git a/files/zh-cn/web/html/element/ins/index.html b/files/zh-cn/web/html/element/ins/index.html new file mode 100644 index 0000000000..3d62ed7eec --- /dev/null +++ b/files/zh-cn/web/html/element/ins/index.html @@ -0,0 +1,94 @@ +--- +title: <ins> +slug: Web/HTML/Element/ins +tags: + - Element + - HTML + - HTML edits + - Reference + - Web +translation_of: Web/HTML/Element/ins +--- +<h2 id="简介">简介</h2> + +<p>{{HTMLRef}}<br> + <strong>HTML <code><ins></code> 元素</strong>定义已经被插入文档中的文本。</p> + +<p> </p> + +<p>{{EmbedInteractiveExample("pages/tabbed/ins.html", "tabbed-standard")}}</p> + +<p> </p> + +<ul class="htmlelt"> + <li><dfn><a href="/en-US/docs/HTML/Content_categories" title="HTML/Content_categories">内容</a>分类</dfn><a href="/zh-CN/docs/Web/Guide/HTML/Content_categories#短语元素（Phrasing_content）">短语元素</a> 或者 <a href="/zh-CN/docs/Web/Guide/HTML/Content_categories#流式元素（Flow_content）">流式元素</a> 。</li> + <li><dfn>允许内容</dfn> <a href="/zh-CN/docs/Web/Guide/HTML/Content_categories#透明内容模型（Transparent_content_model）">透明内容模型</a>。</li> + <li><dfn>标签闭合</dfn> {{no_tag_omission}}</li> + <li><dfn>允许的父级标签</dfn>任意<a href="/zh-CN/docs/Web/Guide/HTML/Content_categories#短语元素（Phrasing_content）">短语元素</a></li> + <li><dfn>允许的ARIA角色</dfn>任意</li> + <li><dfn>DOM 接口</dfn> {{domxref("HTMLModElement")}}</li> +</ul> + +<h2 id="属性">属性</h2> + +<p><span style="line-height: 21px;">该元素支持所有 <a href="https://developer.mozilla.org/en-US/docs/HTML/Global_attributes">全局特性</a>，除此以外还支持下列属性：</span></p> + +<dl> + <dt>{{htmlattrdef("cite")}}</dt> + <dd>cite 属性的值指向一个文档的 URL，该文档解释了文本被插入或修改的原因。（目前该属性还没有被主流浏览器支持）</dd> + <dt>{{htmlattrdef("datetime")}}</dt> + <dd>该特性指示的此修改发生的时间和日期，并且该特性的值必须是<a href="http://www.w3.org/TR/2011/WD-html5-20110525/common-microsyntaxes.html#valid-date-string-with-optional-time">一个有效的日期或者时间字符串</a>。如果该值不能被解析为日期或者时间，则该元素不具有相关联的时间标记。</dd> +</dl> + +<h2 id="示例">示例</h2> + +<pre class="brush: html"><ins>这一段文本是新插入至文档的。</ins></pre> + +<h3 id="结果">结果</h3> + +<p><ins>这一段文本是新插入至文档的。</ins></p> + +<h2 id="Specifications" name="Specifications">规范</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">规范</th> + <th scope="col">状态</th> + <th scope="col">评论</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'edits.html#the-ins-element', '<ins>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'edits.html#the-ins-element', '<ins>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/text.html#h-9.4', '<ins>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<p> </p> + +<p>{{Compat("html.elements.ins")}}</p> + +<p> </p> + +<h2 id="参阅">参阅</h2> + +<ul> + <li>{{HTMLElement("del")}} </li> +</ul> + +<div> </div> diff --git a/files/zh-cn/web/html/element/isindex/index.html b/files/zh-cn/web/html/element/isindex/index.html new file mode 100644 index 0000000000..6e1c99833d --- /dev/null +++ b/files/zh-cn/web/html/element/isindex/index.html @@ -0,0 +1,40 @@ +--- +title: <isindex> +slug: Web/HTML/Element/isindex +tags: + - HTML + - Web +translation_of: Web/HTML/Element/isindex +--- +<div>{{Deprecated_header}}</div> + +<h2 id="Summary" name="Summary">概述</h2> + +<p><code><strong><isindex>元素</strong>的作用是</code>使浏览器显示一个对话框，提示用户输入单行文本。在W3C的规范中建议，<code><isindex>元素最好被放置在</code> {{HTMLElement("head")}} 标签块内，但是对于浏览器来说，<isindex>标签在页面任何位置都没有关系。</p> + +<p>从HTML4规范开始，就不建议在您编写的HTML文档内使用<isindex>元素，您可以用<input>标签来替代。</p> + +<h2 id="Attributes" name="Attributes">属性</h2> + +<p>本元素支持 <a href="/en-US/docs/HTML/Global_attributes" title="HTML/Global attributes">全局属性</a>.</p> + +<dl> + <dt>{{htmlattrdef("prompt")}}</dt> + <dd>该属性用作在输入框前添加一个输入提示文本。</dd> + <dt>{{htmlattrdef("action")}}</dt> + <dd>本属性可以规定文本框中的值发送向一个没有被W3C规范的URL。</dd> +</dl> + +<h2 id="示例">示例</h2> + +<pre class="brush: html"><head> + <isindex prompt="Search Document... " /> +</head></pre> + +<h2 id="See_also" name="See_also">参阅</h2> + +<ul> + <li>{{HTMLElement("input")}}</li> +</ul> + +<p>{{HTMLRef}}</p> diff --git a/files/zh-cn/web/html/element/kbd/index.html b/files/zh-cn/web/html/element/kbd/index.html new file mode 100644 index 0000000000..397d9d905c --- /dev/null +++ b/files/zh-cn/web/html/element/kbd/index.html @@ -0,0 +1,151 @@ +--- +title: <kbd> +slug: Web/HTML/Element/kbd +translation_of: Web/HTML/Element/kbd +--- +<h2 id="摘要">摘要</h2> + +<p>HTML键盘输入元素(<strong><kbd></strong>) 用于表示用户输入，它将产生一个行内元素，以浏览器的默认monospace字体显示。</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/en-US/docs/HTML/Content_categories" title="HTML/Content_categories">Content categories</a></th> + <td><a href="/en-US/docs/HTML/Content_categories#Flow_content" title="HTML/Content categories#Flow content">Flow content</a>, <a href="/en-US/docs/HTML/Content_categories#Phrasing_content" title="HTML/Content categories#Phrasing content">phrasing content</a>, palpable content.</td> + </tr> + <tr> + <th scope="row">Permitted content</th> + <td><a href="/en-US/docs/HTML/Content_categories#Phrasing_content" title="HTML/Content_categories#Phrasing_content">Phrasing content</a>.</td> + </tr> + <tr> + <th scope="row">Tag omission</th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th scope="row">Permitted parent elements</th> + <td>Any element that accepts <a href="/en-US/docs/HTML/Content_categories#Phrasing_content" title="HTML/Content_categories#Phrasing_content">phrasing content</a>.</td> + </tr> + <tr> + <th scope="row">DOM interface</th> + <td>{{domxref("HTMLElement")}} Up to Gecko 1.9.2 (Firefox 4) inclusive, Firefox implements the interface {{domxref("HTMLSpanElement")}} for this element.</td> + </tr> + </tbody> +</table> + +<h2 id="属性">属性</h2> + +<p>该元素仅支持<a href="/en-US/docs/HTML/Global_attributes" title="HTML/Global attributes">全局属性</a>.</p> + +<h2 id="示例">示例</h2> + +<pre class="brush: html"><p>Type the following in the Run dialog: <kbd>cmd</kbd><br />Then click the OK button.</p> + +<p>Save the document by pressing <kbd>Ctrl</kbd> + <kbd>S</kbd></p></pre> + +<h3 id="结果">结果</h3> + +<p>Type the following in the Run dialog: <kbd>cmd</kbd><br> + Then click the OK button.</p> + +<p>Save the document by pressing <kbd>Ctrl</kbd> + <kbd>S</kbd></p> + +<h4 id="结果说明：">结果说明：</h4> + +<p style="text-indent: 2em;">此显示效果为 MDN 特殊显示效果，无法更改。具体显示效果请自行测试。</p> + +<h2 id="注意">注意</h2> + +<p>通过定义CSS规则可以改变kbd的默认字体。用户首选项设置可能会比该CSS规则具有更高优先级。</p> + +<p>当<kbd>元素处于<samp>元素之中时，它代表着被系统回显的输入。</p> + +<p>当<kbd>元素中包含<samp>元素时，该输入是基于系统输出的，比如调用某个菜单项。</p> + +<p>当<kbd>元素处于另一个<kbd>元素之中时，它代表了一个实际的按键，或是该输入机制下的某个单位输入。</p> + +<h2 id="Specifications" name="Specifications">规范</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'text-level-semantics.html#the-kbd-element', '<kbd>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'text-level-semantics.html#the-kbd-element', '<kbd>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>Expanded to include any user input, like voice input and individual keystrokes.</td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/text.html#h-9.2.1', '<kbd>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("1.0")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("1.0")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="参阅">参阅</h2> + +<ul> + <li>{{htmlelement("code")}}</li> +</ul> + +<div>{{HTMLRef}}</div> diff --git a/files/zh-cn/web/html/element/keygen/index.html b/files/zh-cn/web/html/element/keygen/index.html new file mode 100644 index 0000000000..ddcf5ab6dd --- /dev/null +++ b/files/zh-cn/web/html/element/keygen/index.html @@ -0,0 +1,184 @@ +--- +title: <keygen> +slug: Web/HTML/Element/keygen +tags: + - Deprecated + - HTML forms +translation_of: Web/HTML/Element/keygen +--- +<p>{{deprecated_header}}</p> + +<p>HTML <code><keygen></code> 元素是为了方便生成密钥材料和提交作为 <a href="https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Forms">HTML form</a> 的一部分的公钥.这种机制被用于设计基于 Web 的证书管理系统。按照预想，<code><keygen></code> 元素将用于 HTML 表单与其他的所需信息一起构造一个证书请求，该处理的结果将是一个带有签名的证书。</p> + +<div class="note"> +<p>There is currently discussion among Web browser makers whether to keep this feature or not. Until a decision is reached, it is better to continue to consider this feature as deprecated and going away.</p> +</div> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/en-US/docs/HTML/Content_categories" title="HTML/Content_categories">Content categories</a></th> + <td><a href="/en-US/docs/HTML/Content_categories#Flow_content" title="HTML/Content categories#Flow content">Flow content</a>, <a href="/en-US/docs/HTML/Content_categories#Phrasing_content" title="HTML/Content categories#Phrasing content">phrasing content</a>, interactive content, <a href="/en-US/docs/HTML/Content_categories#Form_listed" title="HTML/Content categories#Form listed">listed</a>, <a href="/en-US/docs/HTML/Content_categories#Form_labelable" title="HTML/Content categories#Form labelable">labelable</a>, <a href="/en-US/docs/HTML/Content_categories#Form_submittable" title="HTML/Content categories#Form submittable">submittable</a>, <a href="/en-US/docs/HTML/Content_categories#Form_resettable" title="HTML/Content categories#Form resettable">resettable</a> <a href="/en-US/docs/HTML/Content_categories#Form-associated_content" title="HTML/Content categories#Form-associated content">form-associated element</a>, palpable content.</td> + </tr> + <tr> + <th scope="row">Permitted content</th> + <td>None, it is an {{Glossary("empty element")}}.</td> + </tr> + <tr> + <th scope="row">Tag omission</th> + <td>Must have a start tag and must not have an end tag.</td> + </tr> + <tr> + <th scope="row">Permitted parent elements</th> + <td>Any element that accepts <a href="/en-US/docs/HTML/Content_categories#Phrasing_content" title="HTML/Content_categories#Phrasing_content">phrasing content</a>.</td> + </tr> + <tr> + <th scope="row">DOM interface</th> + <td>{{domxref("HTMLKeygenElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Attributes">Attributes</h2> + +<p><span style="line-height: 21px;">This element includes the </span><a href="https://developer.mozilla.org/en-US/docs/HTML/Global_attributes" style="line-height: 21px;" title="HTML/Global attributes">global attributes</a><span style="line-height: 21px;">.</span></p> + +<dl> + <dt>{{htmlattrdef("autofocus")}}</dt> + <dd>This Boolean attribute lets you specify that the control should have input focus when the page loads, unless the user overrides it, for example by typing in a different control. Only one form element in a document can have the <code>autofocus</code> attribute, which is a Boolean.</dd> + <dt>{{htmlattrdef("challenge")}}</dt> + <dd>A challenge string that is submitted along with the public key. Defaults to an empty string if not specified.</dd> + <dt>{{htmlattrdef("disabled")}}</dt> + <dd>This Boolean attribute indicates that the form control is not available for interaction.</dd> + <dt>{{htmlattrdef("form")}}</dt> + <dd>The form element that this element is associated with (its <em>form owner</em>). The value of the attribute must be an <code>id</code> of a {{HTMLElement("form")}} element in the same document. If this attribute is not specified, this element must be a descendant of a {{HTMLElement("form")}} element. This attribute enables you to place <code><keygen> </code>elements anywhere within a document, not just as descendants of their form elements.</dd> + <dt>{{htmlattrdef("keytype")}}</dt> + <dd>The type of key generated. The default value is <code>RSA</code>.</dd> + <dt>{{htmlattrdef("name")}}</dt> + <dd>The name of the control, which is submitted with the form data.</dd> +</dl> + +<p>The element is written as follows:</p> + +<pre class="brush: html"><keygen name="<var>name</var>" challenge="<var>challenge string</var>" keytype="<var>type</var>" keyparams="<var>pqg-params</var>"></pre> + +<p>The <code>keytype</code> parameter is used to specify what type of key is to be generated. Valid values are "<code>RSA</code>", which is the default, "<code>DSA</code>" and "<code>EC</code>". The <code>name</code> and <code>challenge</code> attributes are required in all cases. The <code>keytype</code> attribute is optional for RSA key generation and required for DSA and EC key generation. The <code>keyparams</code> attribute is required for DSA and EC key generation and ignored for RSA key generation. <code>PQG</code> is a synonym for <code>keyparams</code>. That is, you may specify <code>keyparams="pqg-params"</code> or <code>pqg="pqg-params"</code>.</p> + +<p>For RSA keys, the <code>keyparams</code> parameter is not used (ignored if present). The user may be given a choice of RSA key strengths. Currently, the user is given a choice between "high" strength (2048 bits) and "medium" strength (1024 bits).</p> + +<p>For DSA keys, the <code>keyparams</code> parameter specifies the DSA PQG parameters which are to be used in the keygen process. The value of the <code>pqg</code> parameter is the the BASE64 encoded, DER encoded Dss-Parms as specified in IETF <a class="link-ftp" href="ftp://ftp.rfc-editor.org/in-notes/rfc3279.txt">RFC 3279</a>. The user may be given a choice of DSA key sizes, allowing the user to choose one of the sizes defined in the DSA standard.</p> + +<p>For EC keys, the <code>keyparams</code> parameter specifies the name of the elliptic curve on which the key will be generated. It is normally a string from the table in <a class="external" href="http://mxr.mozilla.org/mozilla-central/source/security/manager/ssl/src/nsKeygenHandler.cpp?mark=179-185,187-206,208-227,229-256#177" title="http://mxr.mozilla.org/mozilla-central/source/security/manager/ssl/src/nsKeygenHandler.cpp?mark=179-185,187-206,208-227,229-256#177">nsKeygenHandler.cpp</a>. (Note that only a subset of the curves named there may actually be supported in any particular browser.) If the <code>keyparams</code> parameter string is not a recognized curve name string, then a curve is chosen according to the user's chosen key strength (low, medium, high), using the curve named "<code>secp384r1</code>" for high, and the curve named "<code>secp256r1</code>" for medium keys. (Note: choice of the number of key strengths, default values for each strength, and the UI by which the user is offered a choice, are outside of the scope of this specification.)</p> + +<p>The <code><keygen></code> element is only valid within an HTML form. It will cause some sort of selection to be presented to the user for selecting key size. The UI for the selection may be a menu, radio buttons, or possibly something else. The browser presents several possible key strengths. Currently, two strengths are offered, high and medium. If the user's browser is configured to support cryptographic hardware (e.g. "smart cards") the user may also be given a choice of where to generate the key, i.e., in a smart card or in software and stored on disk.</p> + +<p>When the submit button is pressed, a key pair of the selected size is generated. The private key is encrypted and stored in the local key database.</p> + +<pre> PublicKeyAndChallenge ::= SEQUENCE { + spki SubjectPublicKeyInfo, + challenge IA5STRING + } + SignedPublicKeyAndChallenge ::= SEQUENCE { + publicKeyAndChallenge PublicKeyAndChallenge, + signatureAlgorithm AlgorithmIdentifier, + signature BIT STRING + }</pre> + +<p>The public key and challenge string are DER encoded as <code>PublicKeyAndChallenge</code>, and then digitally signed with the private key to produce a <code>SignedPublicKeyAndChallenge</code>. The <code>SignedPublicKeyAndChallenge</code> is {{Glossary("Base64")}} encoded, and the ASCII data is finally submitted to the server as the value of a form name/value pair, where the name is <var>name</var> as specified by the <code>name</code> attribute of the <code>keygen</code> element. If no challenge string is provided, then it will be encoded as an <code>IA5STRING</code> of length zero.</p> + +<p>Here is an example form submission as it would be delivered to a CGI program by the HTTP server:</p> + +<pre> commonname=John+Doe&email=doe@foo.com&org=Foobar+Computing+Corp.& + orgunit=Bureau+of+Bureaucracy&locality=Anytown&state=California&country=US& + key=MIHFMHEwXDANBgkqhkiG9w0BAQEFAANLADBIAkEAnX0TILJrOMUue%2BPtwBRE6XfV%0AWtKQbsshxk5ZhcUwcwyvcnIq9b82QhJdoACdD34rqfCAIND46fXKQUnb0mvKzQID%0AAQABFhFNb3ppbGxhSXNNeUZyaWVuZDANBgkqhkiG9w0BAQQFAANBAAKv2Eex2n%2FS%0Ar%2F7iJNroWlSzSMtTiQTEB%2BADWHGj9u1xrUrOilq%2Fo2cuQxIfZcNZkYAkWP4DubqW%0Ai0%2F%2FrgBvmco%3D</pre> + +<h2 id="Examples">Examples</h2> + +<ul> + <li><a class="link-https" href="https://bugzilla.mozilla.org/attachment.cgi?id=380749" title="https://bugzilla.mozilla.org/attachment.cgi?id=380749">Sample form with RSA KEYGEN element</a></li> + <li><a class="link-https" href="https://bugzilla.mozilla.org/attachment.cgi?id=380750" title="https://bugzilla.mozilla.org/attachment.cgi?id=380750">Sample form with DSA KEYGEN element and PQG Parameters</a></li> + <li><a class="link-https" href="https://bugzilla.mozilla.org/attachment.cgi?id=380751" title="https://bugzilla.mozilla.org/attachment.cgi?id=380751">Sample form with DSA KEYGEN element but no PQG Parameters</a></li> + <li><a class="link-https" href="https://bugzilla.mozilla.org/attachment.cgi?id=380752" title="https://bugzilla.mozilla.org/attachment.cgi?id=380752">Sample form with EC KEYGEN element</a></li> +</ul> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'the-button-element.html#the-keygen-element', '<keygen>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'forms.html#the-keygen-element', '<keygen>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{compatChrome(1.0)}} [1]</td> + <td>{{CompatGeckoDesktop("1.0")}}</td> + <td>{{CompatNo}}</td> + <td>3.0</td> + <td>1.2</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Android Webview</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + <th>Chrome for Android</th> + </tr> + <tr> + <td>Basic support</td> + <td>2.3</td> + <td>{{CompatVersionUnknown}} [1]</td> + <td>{{CompatGeckoMobile("1.0")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}} [1]</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] Deprecated in Chrome 49.</p> + +<p>{{HTMLRef}}</p> diff --git a/files/zh-cn/web/html/element/label/index.html b/files/zh-cn/web/html/element/label/index.html new file mode 100644 index 0000000000..4c5a35199f --- /dev/null +++ b/files/zh-cn/web/html/element/label/index.html @@ -0,0 +1,225 @@ +--- +title: <label> +slug: Web/HTML/Element/label +tags: + - Element + - Forms + - HTML + - HTML forms + - HTML表单 + - Reference + - Web + - label + - 参考 + - 标签 + - 表单 +translation_of: Web/HTML/Element/label +--- +<div>{{HTMLRef}}</div> + +<p><strong>HTML <code><label></code> 元素（标签）</strong>表示用户界面中某个元素的说明。</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/label.html", "tabbed-shorter")}}</div> + +<div class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples </a> and send us a pull request.</div> + +<p>将一个 <code><label></code> 和一个 {{htmlelement("input")}} 元素相关联主要有这些优点：</p> + +<ul> + <li>标签文本不仅与其相应的文本输入元素在视觉上相关联，程序中也是如此。 这意味着，当用户聚焦到这个表单输入元素时，屏幕阅读器可以读出标签，让使用辅助技术的用户更容易理解应输入什么数据。</li> + <li>你可以点击关联的标签来聚焦或者激活这个输入元素，就像直接点击输入元素一样。这扩大了元素的可点击区域，让包括使用触屏设备在内的用户更容易激活这个元素。</li> +</ul> + +<p>将一个 <code><label></code> 和一个 <code><input></code> 元素匹配在一起，你需要给 <code><input></code> 一个 <code>id</code> 属性。而 <code><label></code> 需要一个 <code>for</code> 属性，其值和 <code><input></code> 的 <code>id</code> 一样。</p> + +<p>另外，你也可以将 <code><input></code> 直接放在 <code><label></code> 里，此时则不需要 <code>for</code> 和 <code>id</code> 属性，因为关联已隐含存在：</p> + +<pre class="brush: html"><label>Do you like peas? + <input type="checkbox" name="peas"> +</label></pre> + +<p id="Usage_notes">其他使用事项：</p> + +<ul> + <li>关联标签的表单控件称为这个标签的<em>已关联标签的控件</em>。一个 input 可以与多个标签相关联。</li> + <li>点击或者轻触（tap）与表单控件相关联的 <code><label></code> 也可以触发关联控件的 <code>click</code> 事件。</li> +</ul> + +<h2 id="属性">属性</h2> + +<p>该元素包含 <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes">全局属性</a>。</p> + +<dl> + <dt>{{htmlattrdef("for")}}</dt> + <dd>即和 <code><label></code> 元素在同一文档中的 <a href="zh-CN/docs/Web/Guide/HTML/Content_categories#Form_labelable">可关联标签的元素</a> 的 {{htmlattrxref("id")}}。 文档中第一个 <code>id</code> 值与 <code><label></code> 元素 <code>for</code> 属性值相同的元素，如果可关联标签（labelable），则为<em>已关联标签的控件</em>，其标签就是这个 <code><label></code> 元素。如果这个元素不可关联标签，则 <code>for</code> 属性没有效果。如果文档中还有其他元素的 <code>id</code> 值也和 <code>for</code> 属性相同，<code>for</code> 属性对这些元素也没有影响。 + <div class="note"><strong>注意：</strong><code><label></code> 元素可同时有一个 <code>for</code> 属性和一个子代控件元素，只是 <code>for</code> 属性需要指向这个控件元素。</div> + </dd> + <dt>{{htmlattrdef("form")}}</dt> + <dd>表示与 label 元素关联的 {{htmlelement("form")}} 元素（即它的表单拥有者）。如果声明了该属性，其值应是同一文档中 {{HTMLElement("form")}} 元素的 <code>id</code>。因此你可以将 label 元素放在文档的任何位置，而不仅作为 {{HTMLElement("form")}} 元素的后代。</dd> +</dl> + +<h2 id="使用_CSS_样式">使用 CSS 样式</h2> + +<p><code><label></code> 元素没有特别的样式考虑——结构上，<code><label></code> 是简单的行内元素，所以可使用和 {{htmlelement("span")}} 或 {{htmlelement("a")}} 元素大致相同的方式来应用样式。你也可以任意方式为 <code><label></code> 应用样式，只是不要让文本难以阅读。</p> + +<h2 id="示例">示例</h2> + +<h3 id="简单的label">简单的label</h3> + +<pre class="brush: html"><label>Click me <input type="text"></label></pre> + +<p>{{EmbedLiveSample('简单的label', '200', '50', '')}}</p> + +<h3 id="使用_for_属性">使用 for 属性</h3> + +<pre class="brush: html"><label for="username">Click me</label> +<input type="text" id="username"></pre> + +<p>{{EmbedLiveSample('使用_for_属性', '200', '50', '')}}</p> + +<h2 id="可访问性问题">可访问性问题</h2> + +<h3 id="交互内容">交互内容</h3> + +<p>不要在 <code>label</code> 元素内部放置可交互的元素，比如 {{HTMLElement("a", "anchors")}} 或 {{HTMLElement("button", "buttons")}}。这样做会让用户更难激活/触发与 <code>label</code> 相关联的表单输入元素。</p> + +<h4 id="Dont">Don't</h4> + +<pre class="brush: html example-bad"><label for="tac"> + <input id="tac" type="checkbox" name="terms-and-conditions"> + I agree to the <a href="terms-and-conditions.html">Terms and Conditions</a> +</label> +</pre> + +<h4 id="Do">Do</h4> + +<pre class="brush: html example-good"><label for="tac"> + <input id="tac" type="checkbox" name="terms-and-conditions"> + I agree to the Terms and Conditions +</label> +<p> + <a href="terms-and-conditions.html">Read our Terms and Conditions</a> +</p> +</pre> + +<h3 id="标题">标题</h3> + +<p>在一个 <code><label></code> 元素内部放置标题元素（<a href="/en-US/docs/Web/HTML/Element/Heading_Elements">heading elements</a>）会干扰许多辅助技术，原因是标题通常被用于辅助导航（<a href="/en-US/docs/Web/HTML/Element/Heading_Elements#Navigation">a navigation aid</a>）。若标签内的文本需要做视觉上的调整，应该使用适用于 <code><label></code> 元素的 CSS 类。</p> + +<p>若一个 <a href="/en-US/docs/Web/HTML/Element/form">表单</a>，或表单中的一部分需要一个标题，应使用 {{HTMLElement("legend")}} 元素置于 {{HTMLElement("fieldset")}} 元素中。</p> + +<h4 id="Dont_2">Don't</h4> + +<pre class="brush: html example-bad"><label for="your-name"> + <h3>Your name</h3> + <input id="your-name" name="your-name" type="text"> +</label> +</pre> + +<h4 id="Do_2">Do</h4> + +<pre class="brush: html example-good"><label class="large-label" for="your-name"> + Your name + <input id="your-name" name="your-name" type="text"> +</label> </pre> + +<h3 id="按钮">按钮</h3> + +<p>若 {{HTMLElement("input")}} 元素声明了 <code>type="button"</code> 和有效的 <code>value</code> 属性，则不需要为其添加标签。添加标签可能会影响辅助技术理解这个输入按钮的语义。{{HTMLElement("button")}} 元素也一样。</p> + +<h2 id="技术概览">技术概览</h2> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/en-US/docs/Web/HTML/Content_categories">Content categories</a></th> + <td><a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">Flow content</a>, <a href="/en-US/docs/Web/HTML/Content_categories#Phrasing_content">phrasing content</a>, <a href="/en-US/docs/Web/HTML/Content_categories#Interactive_content">interactive content</a>, <a href="/en-US/docs/Web/HTML/Content_categories#Form-associated_content">form-associated element</a>, palpable content.</td> + </tr> + <tr> + <th scope="row">Permitted content</th> + <td><a href="/en-US/docs/Web/HTML/Content_categories#Phrasing_content">Phrasing content</a>, but no descendant <code>label</code> elements. No labelable elements other than the labeled control are allowed.</td> + </tr> + <tr> + <th scope="row">Tag omission</th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th scope="row">Permitted parents</th> + <td>Any element that accepts <a href="/en-US/docs/Web/HTML/Content_categories#Phrasing_content">phrasing content</a>.</td> + </tr> + <tr> + <th scope="row">Implicit ARIA role</th> + <td><a href="https://www.w3.org/TR/html-aria/#dfn-no-corresponding-role">No corresponding role</a></td> + </tr> + <tr> + <th scope="row">Permitted ARIA roles</th> + <td>No <code>role</code> permitted</td> + </tr> + <tr> + <th scope="row">DOM interface</th> + <td>{{domxref("HTMLLabelElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="规范">规范</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">规范</th> + <th scope="col">状态</th> + <th scope="col">注释</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'forms.html#the-label-element', '<label>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'sec-forms.html#the-label-element', '<label>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'interact/forms.html#h-17.9.1', '<label>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td></td> + </tr> + <tr> + <td><a href="https://www.w3.org/TR/REC-html40-971218/interact/forms.html#h-17.9.1" hreflang="en" lang="en" rel="noopener">HTML 4.0 Specification<br> + <small lang="en-US">The definition of '<label>' in that specification.</small></a></td> + <td>{{Spec2('HTML4.01')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + + + +<p>{{Compat("html.elements.label")}}</p> + +<h2 id="参见">参见</h2> + +<p>其他表单相关的元素：</p> + +<ul> + <li>{{HTMLElement("form")}}</li> + <li>{{HTMLElement("input")}}</li> + <li>{{HTMLElement("button")}}</li> + <li>{{HTMLElement("datalist")}}</li> + <li>{{HTMLElement("legend")}}</li> + <li>{{HTMLElement("select")}}</li> + <li>{{HTMLElement("optgroup")}}</li> + <li>{{HTMLElement("option")}}</li> + <li>{{HTMLElement("textarea")}}</li> + <li>{{HTMLElement("keygen")}}</li> + <li>{{HTMLElement("fieldset")}}</li> + <li>{{HTMLElement("output")}}</li> + <li>{{HTMLElement("progress")}}</li> + <li>{{HTMLElement("meter")}}</li> +</ul> diff --git a/files/zh-cn/web/html/element/legend/index.html b/files/zh-cn/web/html/element/legend/index.html new file mode 100644 index 0000000000..a5e6e4cd2d --- /dev/null +++ b/files/zh-cn/web/html/element/legend/index.html @@ -0,0 +1,101 @@ +--- +title: <legend> +slug: Web/HTML/Element/legend +tags: + - Element + - HTML + - HTML 表单 + - 元素 + - 参考 + - 表单 +translation_of: Web/HTML/Element/legend +--- +<p>{{HTMLRef}}</p> + +<p><strong>HTML <legend></strong> 元素用于表示其父元素 {{HTMLElement("fieldset")}} 的内容标题。</p> + +<p>{{EmbedInteractiveExample("pages/tabbed/legend.html", "tabbed-standard")}}</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/en-US/docs/HTML/Content_categories">内容分类</a></th> + <td>无。</td> + </tr> + <tr> + <th scope="row">允许的内容</th> + <td><a href="https://developer.mozilla.org/zh-CN/docs/Web/Guide/HTML/Content_categories#Phrasing_content" title="HTML/Content_categories#Phrasing_content">语句内容（Phrasing content</a>）。</td> + </tr> + <tr> + <th scope="row">标签忽略</th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th scope="row">允许的父元素</th> + <td>{{HTMLElement("fieldset")}} ，并且<code><legend></code>作为第一个子元素</td> + </tr> + <tr> + <th scope="row">Implicit ARIA role</th> + <td><a href="https://www.w3.org/TR/html-aria/#dfn-no-corresponding-role">No corresponding role</a></td> + </tr> + <tr> + <th scope="row">Permitted ARIA roles</th> + <td>No <code>role</code> permitted</td> + </tr> + <tr> + <th scope="row">DOM 接口</th> + <td>{{domxref("HTMLLegendElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="属性"><span style="">属性</span></h2> + +<p><br> + <span style="line-height: 21px;">这个元素只有</span><a href="https://developer.mozilla.org/zh-CN/docs/Web/HTML/Global_attributes" style="line-height: 21px;" title="HTML/Global attributes">全局属性</a>。</p> + +<h2 id="示例">示例</h2> + +<p>在 {{HTMLElement("form")}} 中查看关于 <code><legend></code> 元素的示例。</p> + +<h2 id="Specifications" name="Specifications">规范</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">规范</th> + <th scope="col">状态</th> + <th scope="col">注释</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("HTML WHATWG", "forms.html#the-legend-element", "<legend>")}}</td> + <td>{{Spec2("HTML WHATWG")}}</td> + <td>Definition of the <code>legend</code> element</td> + </tr> + <tr> + <td>{{SpecName("HTML5 W3C", "sec-forms.html#the-legend-element", "<legend>")}}</td> + <td>{{Spec2("HTML5 W3C")}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName("HTML4.01", "interact/forms.html#h-17.10", "<legend>")}}</td> + <td>{{Spec2("HTML4.01")}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容">浏览器兼容</h2> + +<p>{{Compat("html.elements.legend")}}</p> + +<h2 id="另请参阅"><span style="">另请参阅</span></h2> + +<div id="compat-mobile"></div> + +<ul> + <li>其他与表单相关的元素：{{HTMLElement("form")}}, {{HTMLElement("option")}}, {{HTMLElement("label")}}, {{HTMLElement("button")}}, {{HTMLElement("select")}}, {{HTMLElement("datalist")}}, {{HTMLElement("optgroup")}}, {{HTMLElement("fieldset")}}, {{HTMLElement("textarea")}}, {{HTMLElement("keygen")}}, {{HTMLElement("input")}}, {{HTMLElement("output")}}, {{HTMLElement("progress")}} 和 {{HTMLElement("meter")}}。</li> + <li><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/Form_Role">ARIA: Form role</a></li> +</ul> diff --git a/files/zh-cn/web/html/element/li/index.html b/files/zh-cn/web/html/element/li/index.html new file mode 100644 index 0000000000..2a67616ff5 --- /dev/null +++ b/files/zh-cn/web/html/element/li/index.html @@ -0,0 +1,205 @@ +--- +title: <li> +slug: Web/HTML/Element/li +translation_of: Web/HTML/Element/li +--- +<p>{{HTMLRef}}</p> + +<p><strong>HTML <code><li></code> 元素</strong> （或称 <em>HTML 列表条目元素）</em> 用于表示列表里的条目。它必须包含在一个父元素里：一个有序列表({{HTMLElement("ol")}})，一个无序列表({{HTMLElement("ul")}})，或者一个菜单 ({{HTMLElement("menu")}})。在菜单或者无序列表里，列表条目通常用点排列显示；在有序列表里，列表条目通常在左边显示按升序排列的计数，例如数字或者字母。</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row">内容类别</th> + <td>无</td> + </tr> + <tr> + <th scope="row">允许的内容</th> + <td><a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">流式内容</a></td> + </tr> + <tr> + <th scope="row">标签省略</th> + <td>如果列表元素的后面紧随另一个 {{HTMLElement("li")}} 元素，或者它的父元素中没有更多内容，结束标签可以省略。</td> + </tr> + <tr> + <th scope="row">允许的父元素</th> + <td>{{HTMLElement("ul")}}、 {{HTMLElement("ol")}}、 或者 {{HTMLElement("menu")}} 元素。过时的 {{HTMLElement("dir")}} 也可以作为父元素，但是并不提倡。</td> + </tr> + <tr> + <th scope="row">DOM 接口</th> + <td>{{domxref("HTMLLIElement")}}</td> + </tr> + <tr> + <th scope="row">元素类型</th> + <td>块级</td> + </tr> + </tbody> +</table> + +<h2 id="属性">属性</h2> + +<p>这个元素拥有<a href="/en-US/docs/Web/HTML/Global_attributes">全局属性</a>。</p> + +<dl> + <dt>{{htmlattrdef("value")}}</dt> + <dd>这个整数型属性表明了本 {{HTMLElement("li")}} 元素在有序列表 （由 {{HTMLElement("ol")}} 元素定义）中的序号。本属性值只能用数字，即使列表使用罗马数字或字母来展示。随后的列表条目会从设置的值开始计数。<strong>value</strong> 属性对于无序列表 ({{HTMLElement("ul")}}) 或者菜单 ({{HTMLElement("menu")}}) 无效。 + <div class="note"><strong>注：</strong> 这个属性在 HTML 4 中废弃，但是在 HTML 5 中重新引入。</div> + + <div class="note"> + <p><strong>注：</strong> 在 {{Gecko("9.0")}} 之前，负值会错误地转换为 0。{{Gecko("9.0")}} 开始，所有整数值都可以正确解析。</p> + </div> + </dd> + <dt>{{htmlattrdef("type")}} {{Deprecated_inline}}</dt> + <dd>这个字符型属性表明了数字的类型： + <ul> + <li><code>a</code>: 小写字母</li> + <li><code>A</code>: 大写字母</li> + <li><code>i</code>: 小写罗马数字</li> + <li><code>I</code>: 大写罗马数字</li> + <li><code>1</code>: 数字</li> + </ul> + 本属性值将覆盖 {{HTMLElement("ol")}} 元素中的同名属性值（若存在）。 + + <div class="note"><strong>使用注解：</strong> 本属性已废弃：使用 CSS {{cssxref("list-style-type")}} 属性来代替。</div> + </dd> +</dl> + +<h2 id="示例">示例</h2> + +<pre class="brush: html"><ol> + <li>first item</li> + <li>second item</li> + <li>third item</li> +</ol> +</pre> + +<p>上面的 HTML 会输出：</p> + +<ol> + <li>first item</li> + <li>second item</li> + <li>third item</li> +</ol> + +<pre class="brush: html"><ol type="I"> + <li value="3">third item</li> + <li>fourth item</li> + <li>fifth item</li> +</ol> +</pre> + +<p>上面的 HTML 会输出：</p> + +<ol start="3" style="list-style-type: upper-roman;"> + <li>third item</li> + <li>fourth item</li> + <li>fifth item</li> +</ol> + +<pre class="brush: html"><ul> + <li>first item</li> + <li>second item</li> + <li>third item</li> +</ul></pre> + +<ul> + <li>first item</li> + <li>second item</li> + <li>third item</li> +</ul> + +<p>更多具体示例请见 <a href="/en-US/docs/Web/HTML/Element/ol#Examples"><ol></a> 和 <a href="/en-US/docs/Web/HTML/Element/ul#Examples"><ul></a> 页面。</p> + +<h2 id="Specifications" name="Specifications">规范</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'grouping-content.html#the-li-element', '<li>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'grouping-content.html#the-li-element', '<li>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'lists.html#h-10.2', '<li>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td>The <code>type</code> attribute has been deprecated.</td> + </tr> + </tbody> +</table> + +<h2 id="浏览兼容性">浏览兼容性</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("1.0")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("1.0")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="另见">另见</h2> + +<ul> + <li>其它列表相关的 HTML 元素： {{HTMLElement("ul")}}, {{HTMLElement("li")}}, {{HTMLElement("menu")}}, 和过时的 {{HTMLElement("dir")}}；</li> + <li>可能特定用于排版 <code><li></code> 元素的 CSS 属性： + <ul> + <li>{{cssxref("list-style")}} 属性，用于选择序号的展示方式，</li> + <li><a href="/Web/Guide/CSS/Counters">CSS 计数器</a>，用于处理复杂的嵌套列表，</li> + <li>{{cssxref("margin")}} 属性，用于控制列表条目的缩进。</li> + </ul> + </li> +</ul> + +<div> </div> diff --git a/files/zh-cn/web/html/element/link/index.html b/files/zh-cn/web/html/element/link/index.html new file mode 100644 index 0000000000..6d3434f55d --- /dev/null +++ b/files/zh-cn/web/html/element/link/index.html @@ -0,0 +1,400 @@ +--- +title: <link>：外部资源链接元素 +slug: Web/HTML/Element/link +tags: + - HTML + - Web + - 元数据 + - 元素 + - 参考 +translation_of: Web/HTML/Element/link +--- +<div>{{HTMLRef}}</div> + +<p><strong>HTML外部资源链接元素 </strong>(<strong><code><link></code></strong>) 规定了当前文档与外部资源的关系。该元素最常用于链接<a href="/zh-CN/docs/Glossary/CSS">样式表</a>，此外也可以被用来创建站点图标(比如PC端的“favicon”图标和移动设备上用以显示在主屏幕的图标) 。</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/link.html")}}</div> + +<p>要链接一个外部的样式表，你需要像这样在你的{{HTMLElement("head")}}中包含一个{{HTMLElement("link")}}元素：</p> + +<pre class="brush: html no-line-numbers notranslate"><link href="main.css" rel="stylesheet"></pre> + +<p>在这个简单的例子中，使用了 <code>href</code> 属性设置外部资源的路径，并设置 <code>rel</code> 属性的值为“<code>stylesheet</code>”(样式表)。<code>rel</code> 表示“关系 (relationship) ”，它可能是<code><link></code>元素其中一个关键的特性——属性值表示<code><link></code>项的链接方式与包含它的文档之间的关系。你将在我们的<a href="/en-US/docs/Web/HTML/Link_types">链接类型</a>中看到很多不同类型的关系。</p> + +<p>这里有一些你经常遇到的其它类型。例如，这里是一个网站图标的链接：</p> + +<pre class="notranslate"><code><link rel="icon" href="favicon.ico"></code></pre> + +<p>还有一些其它的与图标相关的<code>rel</code>值，主要用于表示不同移动平台上特殊的图标类型，例如：</p> + +<pre class="notranslate"><code><link rel="apple-touch-icon-precomposed" sizes="114x114" + href="apple-icon-114.png" type="image/png"></code></pre> + +<p><code>sizes</code>属性表示图标大小，<code>type</code>属性包含了链接资源的MIME类型。这些属性为浏览器选择最合适的图标提供了有用的提示。</p> + +<p>你也可以提供一个媒体类型，或者在<code>media</code>属性内部进行查询；这种资源将只在满足媒体条件的情况下才被加载进来。例如：</p> + +<pre class="notranslate"><code><link href="print.css" rel="stylesheet" media="print"> +<link href="mobile.css" rel="stylesheet" media="screen and (max-width: 600px)"></code></pre> + +<p><code><link></code>也加入了一些新的有意思的性能和安全特性。举例如下：</p> + +<pre class="notranslate"><code><link rel="preload" href="myFont.woff2" as="font" + type="font/woff2" crossorigin="anonymous"></code></pre> + +<p>将<code>rel</code>设定为<code>preload</code>，表示浏览器应该预加载该资源 (更多细节见<a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Preloading_content">使用rel="preload"预加载内容</a>) 。<code>as</code>属性表示获取特定的内容类。<code>crossorigin</code>属性表示该资源是否应该使用一个{{Glossary("CORS")}}请求来获取。</p> + +<p>其它用法的注解：</p> + +<ul> + <li><code><link></code>元素可以出现在{{HTMLElement("head")}}元素或者{{HTMLElement("body")}}元素中，具体取决于它是否有一个<strong>body-ok</strong>的<a href="https://html.spec.whatwg.org/multipage/links.html#body-ok">链接类型</a>。例如，<code>stylesheet</code>链接类型是body-ok的，因此<code><link rel="stylesheet"></code>允许出现在body中。然而，这不是一种好的可遵循的实践方式；更合理的方式是，将你的<code><link></code>元素从你的body内容中分离出来，将其放在<code><head></code>中。</li> + <li>当使用<code><link></code>为网站创建一个favicon时，你的网站使用内容安全策略 (Content Security Policy，CSP) 来增强它的安全性，这种策略适用于favicon。如果你遇到favicon未加载的问题，验证{{HTTPHeader("Content-Security-Policy")}}头的<a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/img-src"><code>img-src</code> directive</a>没有在阻止对它的访问。</li> + <li>HTML和XHTML规范为<code><link></code>元素定义了一些事件处理器 (<em>event handler</em>) ，但是对于它们的使用方法不明确。</li> + <li>在XHTML 1.0下，例如<code><link></code>的空元素需要一个尾斜杠：<code><link /></code>。</li> + <li>WebTV支持<code>rel</code>使用<code>next</code>值，用于在一个document series中预加载下一页。</li> +</ul> + +<h2 id="属性">属性</h2> + +<p>这个元素可以使用 <a href="/en-US/docs/Web/HTML/Global_attributes">全局属性</a>.</p> + +<dl> + <dt>{{htmlattrdef("as")}}</dt> + <dd>该属性仅在<code><link></code>元素设置了 <code>rel="preload"</code> 时才能使用。它规定了<code><link>元素</code>加载的内容的类型，对于内容的优先级、请求匹配、正确的<a href="/zh-CN/docs/Web/HTTP/CSP">内容安全策略</a>的选择以及正确的 {{httpheader("Accept")}}请求头的设置，这个属性是必需的。</dd> + <dt> + <table> + <thead> + <tr> + <th scope="col">值</th> + <th scope="col">应用于</th> + </tr> + </thead> + <tbody> + <tr> + <td>audio</td> + <td><code><audio></code> 元素</td> + </tr> + <tr> + <td>document</td> + <td><code><iframe></code> 和 <code><frame></code> 元素</td> + </tr> + <tr> + <td>embed</td> + <td><code><embed></code> 元素</td> + </tr> + <tr> + <td>fetch</td> + <td> + <p>fetch, XHR</p> + + <p>This value also requires <code><link></code> to contain the crossorigin attribute.</p> + </td> + </tr> + <tr> + <td>font</td> + <td>CSS @font-face</td> + </tr> + <tr> + <td>image</td> + <td><code><img></code> and <code><picture></code> elements with srcset or imageset attributes, SVG <code><image></code> elements, CSS <code>*-image</code> rules</td> + </tr> + <tr> + <td>object</td> + <td><code><object></code> elements</td> + </tr> + <tr> + <td>script</td> + <td><code><script></code> elements, Worker <code>importScripts</code></td> + </tr> + <tr> + <td>style</td> + <td><code><link rel=stylesheet></code> elements, CSS <code>@import</code></td> + </tr> + <tr> + <td>track</td> + <td><code><track></code> elements</td> + </tr> + <tr> + <td>video</td> + <td><code><video></code> elements</td> + </tr> + <tr> + <td>worker</td> + <td>Worker, SharedWorker</td> + </tr> + </tbody> + </table> + </dt> + <dt>{{htmlattrdef("crossorigin")}}</dt> + <dd>此枚举属性指定在加载相关资源时是否必须使用 CORS. <a href="/en-US/docs/Web/HTML/CORS_Enabled_Image">启用 CORS 的图片</a> 可以在 {{HTMLElement("canvas")}} 元素中重复使用, 并避免其被<em>污染</em>. 可取的值如下: + <dl> + <dt><code>"anonymous"</code></dt> + <dd>会发起一个跨域请求(即包含 <code>Origin:</code> HTTP 头). 但不会发送任何认证信息 (即不发送 cookie, X.509 证书和 HTTP 基本认证信息). 如果服务器没有给出源站凭证 (不设置 <code>Access-Control-Allow-Origin:</code> HTTP 头), 资源就会被<em>污染并限制使用</em>.</dd> + <dt><code>"use-credentials"</code></dt> + <dd>会发起一个带有认证信息 (发送 cookie, X.509 证书和 HTTP 基本认证信息) 的跨域请求 (即包含 <code>Origin:</code> HTTP 头). 如果服务器没有给出源站凭证 (不设置 <code>Access-Control-Allow-Origin:</code> HTTP 头), 资源就会被<em>污染并限制使用</em>.</dd> + </dl> + 当不设置此属性时, 资源将会不使用 CORS 加载 (即不发送 <code>Origin:</code> HTTP 头), 这将阻止其在 {{HTMLElement('canvas')}} 元素中进行使用. 若设置了非法的值, 则视为使用 <strong>anonymous</strong>. 前往 <a href="/en-US/docs/Web/HTML/CORS_settings_attributes">CORS settings attributes</a> 获取更多信息.</dd> + <dt>{{htmlattrdef("disabled")}}</dt> + <dd> + <p>仅对于<code>rel="stylesheet"</code> ，<code>disabled</code> 的Boolean属性指示是否应加载所描述的样式表并将其应用于文档。 如果在加载HTML时在HTML中指定了Disabled，则在页面加载期间不会加载样式表。 相反，如果禁用属性更改为false或删除时，样式表将按需加载。</p> + + <p>但是，一旦加载样式表，对Disabled属性的值所做的更改将不再与{{domxref("StyleSheet.disabled")}} 属性的值有任何关系。 相反，更改此属性的值只是启用和禁用应用于文档的样式表表单。</p> + + <p>这与StyleSheet的disable属性不同； 将其更改为true会将样式表从文档的{{domxref("document.styleSheets")}} 列表中删除，并且在切换回false时不会自动重新加载样式表。</p> + </dd> + <dt>{{htmlattrdef("href")}}</dt> + <dd>此属性指定被链接资源的{{glossary("URL")}}。 URL 可以是绝对的，也可以是相对的。</dd> + <dt>{{htmlattrdef("hreflang")}}</dt> + <dd>此属性指明了被链接资源的语言. 其意义仅供参考。可取的值参见 <a href="http://www.ietf.org/rfc/bcp/bcp47.txt">BCP47</a>。仅当设置了 {{htmlattrxref("href", "a")}} 属性时才应设置该属性。</dd> + <dt id="name-attribute">{{HTMLAttrDef("importance")}} {{Experimental_Inline}}</dt> + <dd>指示资源的相对重要性。 优先级提示使用以下值委托：</dd> + <dd> + <p><strong><code>auto</code></strong>: 表示<strong>没有偏好</strong>。 浏览器可以使用其自己的启发式方法来确定资源的优先级。</p> + + <p><strong><code>high</code></strong>: 向浏览器指示资源具有高优先级。</p> + + <p><strong><code>low</code></strong>: 向浏览器指示资源的优先级较低。</p> + + <div class="blockIndicator note"> + <p><strong>Note: </strong>只有存在rel=“preload”或rel=“prefetch”时，importance属性才能用于<link>元素。</p> + </div> + </dd> + <dt>{{htmlattrdef("integrity")}} {{experimental_inline}}</dt> + <dd>包含行内元数据，它是一个你用浏览器获取的资源文件的哈希值，以base64编码的方式加的密，这样用户能用它来验证一个获取到的资源,在传送时未被非法篡改，详情查看<a href="https://developer.mozilla.org/en-US/docs/Web/Security/Subresource_Integrity">Subresource Integrity</a>。</dd> + <dt>{{htmlattrdef("media")}}</dt> + <dd>这个属性规定了外部资源适用的媒体类型。它的值必须是"<a href="https://developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/Media_queries">媒体查询</a>"。这个属性使得用户代理能选择最适合设备运行的媒体类型。 + <div class="note"><strong>使用注意：</strong> + <ul> + <li>在HTML 4中，该属性只能是一组以空白符作为分隔的媒体描述文字，比如"<a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/@media">媒体类型</a>"规定了该元素可取的属性，如print、screen、aural、braille。HTML5将该属性值扩展为任意类型的"<a href="https://developer.mozilla.org/zh-CN/docs/CSS/Media_queries">媒体查询</a>"，"媒体查询"将HTML4的属性值都包括在内。</li> + <li>不支持"<a href="https://developer.mozilla.org/zh-CN/docs/CSS/Media_queries">CSS3 媒体查询</a>"的浏览器并不会强行识别这些链接，因此别忘了设置备用link，即那些可用于HTML4的link。</li> + </ul> + </div> + </dd> + <dt>{{htmlattrdef("referrerpolicy")}} {{experimental_inline}}</dt> + <dd>一个字符串，指示在获取资源时使用哪个引荐来源网址: + <ul> + <li><code>'no-referrer'</code> 表示{{HTTPHeader("Referer")}} 标头将不会发送。</li> + <li><code>'no-referrer-when-downgrade'</code> 的原始位置时不会发送任何{{HTTPHeader("Referer")}}标头。 如果未指定其他政策，这是用户代理的默认行为。</li> + <li><code>'origin'</code> 意味着引荐来源网址将是页面的来源，大致是方案，主机和端口。</li> + <li><code>'origin-when-cross-origin'</code> 这意味着导航到其他来源将仅限于方案，主机和端口，而在同一来源上导航将包括引荐来源网址的路径。</li> + <li><code>'unsafe-url'</code> 意味着引荐来源网址将包含来源和路径（但不包括片段，密码或用户名）。 这种情况是不安全的，因为它可能会将来源和路径从受TLS保护的资源泄漏到不安全的来源。</li> + </ul> + </dd> + <dt>{{htmlattrdef("rel")}}</dt> + <dd>此属性命名链接文档与当前文档的关系。 该属性必须是<a href="/zh-CN/docs/Web/HTML/Link_types">链接类型值</a>的用空格分隔的列表。</dd> + <dt>{{htmlattrdef("sizes")}}</dt> + <dd>这个属性定义了包含相应资源的可视化媒体中的icons的大小。它只有在{{htmlattrxref("rel","link")}}包含icon的<a href="https://developer.mozilla.org/zh-CN/docs/Web/HTML/Link_types">link类型值</a>。它可能有如下的规则。 + <ul> + <li><code>any</code> 表示图标可以按矢量格式缩放到任意大小，例如<code>image/svg+xml。</code></li> + <li>一个由空白符分隔的尺寸列表。每一个都以<code><em><width in pixels></em>x<em><height in pixels></em></code> 或 <code><em><width in pixels></em>X<em><height in pixels>给出。</em></code>尺寸列表中的每一个尺寸都必须包含在资源里。</li> + </ul> + + <div class="note"><strong>用法注意：</strong> + + <ul> + <li>大多数的icon格式只能存储一个icon。因此绝大多数使用 {{htmlattrxref("sizes")}}时只包含一个值。微软的ICO格式和苹果的ICNS格式都是这样，ICO使用得更加广泛，推荐你使用它。</li> + <li>苹果的IOS系统并不支持这个属性，于是苹果的IPhone以及IPad使用特殊的、非标准的 <a href="https://developer.mozilla.org/zh-CN/docs/Web/HTML/Link_types">link类型值</a>去定义作为Web Clip或开始占位符：<code>apple-touch-icon</code> 和 <code>apple-touch-startup-icon。</code></li> + </ul> + </div> + </dd> + <dt>{{HTMLAttrDef("title")}}</dt> + <dd>属性在<code><link></code>元素上有特殊的语义。当用于<code><link rel="stylesheet"></code>时，它定义了一个<a href="https://wiki.developer.mozilla.org/en-US/docs/Web/CSS/Alternative_style_sheets">首选样式表或备用样式表</a>。不正确地使用它可能会导致<a href="https://wiki.developer.mozilla.org/en-US/docs/Correctly_Using_Titles_With_External_Stylesheets">样式表被忽略</a>。</dd> + <dt>{{htmlattrdef("type")}}</dt> + <dd>这个属性被用于定义链接的内容的类型。这个属性的值应该是像text/html，text/css等MIME类型。这个属性常用的用法是定义链接的样式表，最常用的值是表明了CSS的text/css。</dd> + <dt></dt> + <dt> + <h3 id="非标准属性">非标准属性</h3> + </dt> + <dt>{{HTMLAttrDef("methods")}} {{Non-standard_Inline}}</dt> + <dd>此属性的值提供有关可能在对象上执行的功能的信息。 这些值通常在使用时由HTTP协议给出，但是（出于与“<strong>title</strong>”属性类似的原因）将其预先包含在链接中可能是有用的。 例如，浏览器可能根据指定的方法选择不同的链接呈现方式。 可搜索的内容可能会得到其他图标，或者外部链接可能会显示离开当前站点的指示。 即使定义的浏览器Internet Explorer 4也无法很好地理解或支持此属性。</dd> + <dt>{{HTMLAttrDef("prefetch")}} {{Non-standard_Inline}} {{secureContext_inline}}</dt> + <dd>此属性标识下一个导航可能需要的资源，用户代理应检索该资源。 这允许用户代理在将来请求资源时更快地做出响应。</dd> + <dt>{{HTMLAttrDef("target")}} {{Non-standard_Inline}}</dt> + <dd>定义具有已定义链接关系或将显示任何链接资源的呈现的框架或窗口名称。</dd> + <dt> + <h3 id="已淘汰的属性">已淘汰的属性</h3> + </dt> + <dt>{{htmlattrdef("charset")}}{{obsolete_inline}}</dt> + <dd>此属性定义链接资源的字符编码。 该值为{{rfc(2045)}}中定义的字符集的空格和/或逗号分隔列表。 缺省值为iso-8859-1。 + <div class="blockIndicator note"> + <p><strong>使用说明：</strong>该属性已淘汰且禁止使用<strong>。要</strong>实现相同效果，可在外链资源中使用<code>Content-Type</code> HTTP header。</p> + </div> + </dd> + <dt>{{htmlattrdef("rev")}}{{obsolete_inline}}</dt> + <dd>此属性的值显示了 {{HTMLAttrxRef("href", "link")}} 属性所定义的当前文档与链接文档的关系。 因此，该属性定义了与rel属性的值相比的反向关系。 该属性的<a href="https://wiki.developer.mozilla.org/en-US/docs/Web/HTML/Link_types">Link type value</a>类似于{{HTMLAttrxRef("rel", "link")}}的可能值。</dd> + <dd> + <div class="blockIndicator note"> + <p><strong>Note:</strong> WHATWG HTML生活标准（MDN将其视为规范的规范）认为该属性已过时。 但是，值得注意的是，rev在W3C规范中并未过时。 就是说，鉴于不确定性，依靠rev是不明智的。</p> + + <p>相反，您应该使用具有相反链接类型值的{{HTMLAttrxRef("rel", "link")}}属性。 例如，要建立反向链接，请指定作者。 而且，即使许多站点都以这种方式滥用此属性，该属性也不代表“修订”，并且不得与版本号一起使用。</p> + </div> + </dd> +</dl> + +<h2 id="示例">示例</h2> + +<h3 id="引入一个css文件">引入一个css文件</h3> + +<p>用下面的语法来引入一个css文件：</p> + +<pre class="brush: html notranslate"><link href="style.css" rel="stylesheet"> +</pre> + +<h3 id="提供可替换的样式表">提供可替换的样式表</h3> + +<p>你也可以指定"<a href="/en-US/docs/Web/CSS/Alternative_style_sheets">可替换的外部样式表</a>"。</p> + +<p>用户可以在浏览器菜单 "查看>页面样式" 来选择网页的样式。通过这一办法，可以用多种样式浏览网页。</p> + +<pre class="brush: html notranslate"><link href="default.css" rel="stylesheet" title="Default Style"> +<link href="fancy.css" rel="alternate stylesheet" title="Fancy"> +<link href="basic.css" rel="alternate stylesheet" title="Basic"> +</pre> + +<h3 id="提供用于不同用法上下文的图标">提供用于不同用法上下文的图标</h3> + +<p>您可以在同一页面上包含指向多个不同图标的链接，浏览器将使用<code>rel</code>和<code>sizes</code> 值作为提示来选择最适合其特定上下文的图标。</p> + +<pre class="notranslate"><code><!-- third-generation iPad with high-resolution Retina display: --> +<link rel="apple-touch-icon-precomposed" sizes="144x144" href="favicon144.png"> +<!-- iPhone with high-resolution Retina display: --> +<link rel="apple-touch-icon-precomposed" sizes="114x114" href="favicon114.png"> +<!-- first- and second-generation iPad: --> +<link rel="apple-touch-icon-precomposed" sizes="72x72" href="favicon72.png"> +<!-- non-Retina iPhone, iPod Touch, and Android 2.1+ devices: --> +<link rel="apple-touch-icon-precomposed" href="favicon57.png"> +<!-- basic favicon --> +<link rel="icon" href="favicon32.png"></code></pre> + +<h3 id="通过媒体查询有条件地加载资源">通过媒体查询有条件地加载资源</h3> + +<p>您可以在<code>media</code>属性中提供媒体类型或查询; 然后，只有在媒体条件为true时，才会加载此资源。 例如：</p> + +<pre class="notranslate"><code><link href="print.css" rel="stylesheet" media="print"> +<link href="mobile.css" rel="stylesheet" media="all"> +<link href="desktop.css" rel="stylesheet" media="screen and (min-width: 600px)"> +<link href="highres.css" rel="stylesheet" media="screen and (min-resolution: 300dpi)"></code></pre> + +<h3 id="样式表加载事件">样式表加载事件</h3> + +<p>你能够通过监听发生在样式表上的事件知道什么时候样式表加载完毕。同样的，你能够通过监听<code>error</code>事件检测到是否在加载样式表的过程中出现错误。</p> + +<pre class="brush: html notranslate"><script> +function sheetLoaded() { + // Do something interesting; the sheet has been loaded +} + +function sheetError() { + alert("An error occurred loading the stylesheet!"); +} +</script> + +<link rel="stylesheet" href="mystylesheet.css" onload="sheetLoaded()" onerror="sheetError()"> +</pre> + +<div class="note"><strong>注意：</strong> 当样式表以及它引用的部分全部加载完毕，load事件就会在样式表应用到内容之前立即触发。</div> + +<h3 id="预加载例子">预加载例子</h3> + +<p>你可以在<a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Preloading_content">Preloading content with rel="preload"</a>找到<code><link rel="preload"></code>的详细例子。</p> + +<h2 id="概要">概要</h2> + +<table class="properties"> + <tbody> + <tr> + <th><a href="/en-US/docs/Web/HTML/Content_categories">内容类型</a></th> + <td>元数据。如果使用了 <a href="https://developer.mozilla.org/zh-CN/docs/Web/HTML/Global_attributes/itemprop">itemprop</a> 属性, 则为 <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Content_categories#Flow_content">flow content</a> 和 <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Content_categories#Phrasing_content">phrasing content</a>.</td> + </tr> + <tr> + <th>允许的元素内容</th> + <td>无，这是一个{{Glossary("空元素")}}。</td> + </tr> + <tr> + <th>标签省略</th> + <td>鉴于这是一个空元素，开始标签必须存在，结束标签必须不存在。</td> + </tr> + <tr> + <th>允许的父元素</th> + <td>任何可以接受元数据的元素.。如果使用了 <a href="https://developer.mozilla.org/zh-CN/docs/Web/HTML/Global_attributes/itemprop">itemprop</a>属性,，则其父元素可以是任何可接受 <a href="/en-US/docs/Web/HTML/Content_categories#Phrasing_content">phrasing content</a> 的元素。</td> + </tr> + <tr> + <th>允许的 ARIA roles</th> + <td>无</td> + </tr> + <tr> + <th>DOM接口</th> + <td>{{domxref("HTMLLinkElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="注意">注意</h2> + +<ul> + <li> <code><link></code> 标签只能出现在head元素中，然而可以出现多个<link>标签。</li> + <li>HTML 3.2只为link元素定义了<strong>href</strong>, <strong>methods</strong>, <strong>rel</strong>，<strong>rev</strong>，<strong>title</strong>，和<strong>urn</strong>属性。</li> + <li>HTML 2为link标签定义了 <strong>href</strong>, <strong>methods</strong>，<strong>rel</strong>，<strong>rev</strong>，<strong>title，</strong>和 <strong>urn</strong> 属性，<strong>methods</strong> 和 <strong>urn</strong>随后从规范中移除。</li> + <li>HTML和XHTML规范为link定义了事件处理，但是并不清楚它们将会怎样被使用。</li> + <li>在XHTML 1.0中，空元素link要求有尾随斜线，像这样<link />。</li> +</ul> + +<h2 id="Specifications" name="Specifications">标准规范</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col"> + <table> + <thead> + <tr> + <th scope="col"> + <table> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("HTML WHATWG", "semantics.html#the-link-element", "<link>")}}</td> + <td>{{Spec2("HTML WHATWG")}}</td> + <td>No changes from latest snapshot</td> + </tr> + <tr> + <td>{{SpecName("HTML5 W3C", "document-metadata.html#the-link-element", "<link>")}}</td> + <td>{{Spec2("HTML5 W3C")}}</td> + <td>Added <code>crossorigin</code> and <code>sizes</code> attributes; extended values of <code>media</code> to any media queries; added numerous new values for <code>rel</code>.</td> + </tr> + <tr> + <td>{{SpecName("HTML4.01", "struct/links.html#h-12.3", "<link>")}}</td> + <td>{{Spec2('HTML4.01')}}</td> + </tr> + </tbody> + </table> + </th> + </tr> + </thead> + </table> + </th> + </tr> + </thead> + <tbody> + <tr> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<div>{{Compat("html.elements.link", 3)}}</div> + +<h2 id="请参阅">请参阅</h2> + +<ul> + <li>{{HTTPHeader("Link")}} HTTP header</li> + <li><a href="https://pie.gd/test/script-link-events/">Ryan Grove's <script> and <link> node event compatibility chart</a></li> +</ul> diff --git a/files/zh-cn/web/html/element/listing/index.html b/files/zh-cn/web/html/element/listing/index.html new file mode 100644 index 0000000000..991e4249e4 --- /dev/null +++ b/files/zh-cn/web/html/element/listing/index.html @@ -0,0 +1,39 @@ +--- +title: <listing> +slug: Web/HTML/Element/listing +translation_of: Web/HTML/Element/listing +--- +<div>{{Obsolete_header}}</div> + +<h2 id="Summary" name="Summary">概述</h2> + +<p><em>HTML 列表元素</em> (<code><listing></code>) 渲染了开始和结束标签之间的文本，而不会解释 HTML，并使用等宽字体。HTML2 标准建议，当一行不超过 132 个字符时，不应该将其拆开。</p> + +<div class="note">注：不要使用这个元素。 +<ul> + <li>它自从 HTML3.2 就废弃了，并且所有浏览器也不会实现它。它甚至在 HTML5 中过时，并且可能由某些浏览器渲染为 {{HTMLElement("pre")}} 元素，它会解释其中的 HTML。</li> + <li>而是要使用 {{HTMLElement("pre")}} 元素，或者如果满足语义的话，使用 {{HTMLElement("code")}} 元素，最终会转义 HTML '<code><</code>' 和 <code>></code>' ，以便它们不会被解释。</li> + <li>等宽字体也可以显示在 {{HTMLElement("div")}} 元素中，通过使用足够的 <a href="/en-US/docs/Web/CSS" title="CSS">CSS</a> 样式，在 {{cssxref("font-family")}} 中将 <code>monospace</code> 用作通用字体（generic-font）的值。</li> +</ul> +</div> + +<h2 id="Attributes" name="Attributes">属性</h2> + +<p>除了 <a class="new " href="/en-US/docs/Web/HTML/global_attributes" rel="internal" title="HTML/global attributes">全局属性</a> 之外，这个元素没有其它属性。</p> + +<h2 id="DOM_interface" name="DOM_interface">DOM 接口</h2> + +<p>元素实现了 {{domxref('HTMLElement')}} 接口。</p> + +<div class="note"> +<p><strong>实现注解：</strong>直到 Gecko 1.9.2（包含），Firefox 为这个元素实现了 {{domxref('HTMLSpanElement')}} 接口。</p> +</div> + +<h2 id="See_also" name="See_also">另见</h2> + +<ul> + <li>{{HTMLElement("pre")}} 和 {{HTMLElement("code")}} 元素可以用于替代。</li> + <li>{{HTMLElement("plaintext")}} 和 {{HTMLElement("xmp")}} 元素，类似于 {{HTMLElement("listing")}} 但是也过时了。</li> +</ul> + +<div>{{HTMLRef}}</div> diff --git a/files/zh-cn/web/html/element/main/index.html b/files/zh-cn/web/html/element/main/index.html new file mode 100644 index 0000000000..adb55545df --- /dev/null +++ b/files/zh-cn/web/html/element/main/index.html @@ -0,0 +1,150 @@ +--- +title: <main> +slug: Web/HTML/Element/main +tags: + - Element + - HTML + - HTML grouping content + - HTML sections + - Reference + - main + - 元素 +translation_of: Web/HTML/Element/main +--- +<div>{{HTMLRef}}</div> + +<p>HTML <strong><code><main></code> 元素</strong>呈现了文档的 {{HTMLElement("body")}} 或应用的主体部分。主体部分由与文档直接相关，或者扩展于文档的中心主题、应用的主要功能部分的内容组成。</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/main.html","tabbed-shorter")}}</div> + +<p class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples </a> and send us a pull request.</p> + +<ul class="htmlelt"> + <li><dfn><a href="/en-US/docs/Web/HTML/Content_categories" title="HTML/Content_categories">内容</a>类别</dfn><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Content_categories#Flow_content" style="font-family: 'Microsoft Yahei', sans-serif; background-color: rgba(255, 149, 0, 0.0980392);" title="HTML/Content_categories#Flow_content">Flow content</a><span style="background-color: rgba(255, 149, 0, 0.0980392); font-family: microsoft yahei,sans-serif;">, palpable content</span>.</li> + <li><dfn>允许内容</dfn> <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Content_categories#Flow_content" style="font-family: 'Microsoft Yahei', sans-serif; background-color: rgba(255, 149, 0, 0.0980392);" title="HTML/Content_categories#Flow_content">Flow content</a><span style="background-color: rgba(255, 149, 0, 0.0980392); font-family: microsoft yahei,sans-serif;">.</span></li> + <li><dfn>标签省略</dfn>无; 开始与结束都是强制性.</li> + <li><dfn>被允许的父级元素</dfn>任何支持流内容但可能不是继承元素的 元素{{HTMLElement("article")}}, {{HTMLElement("aside")}}, {{HTMLElement("footer")}}, {{HTMLElement("header")}}, 或{{HTMLElement("nav")}} </li> + <li><dfn>DOM 接口</dfn> {{domxref("HTMLElement")}}</li> +</ul> + +<h2 id="属性">属性</h2> + +<p>此元素仅包含<a href="/zh-CN/docs/Web/HTML/Global_attributes">全局属性</a>。</p> + +<h2 id="使用说明">使用说明</h2> + +<p>在文档中，<code><main></code> 元素的内容应当是独一无二的。任何同时存在于任意一系列文档中的相同、重复内容，比如侧边栏、导航栏链接、版权信息、网站 Logo，搜索框（除非搜索框为文档的主要功能），都不应当被包含在其内。</p> + +<p><code><main></code> 对文档的大纲（outline）没有贡献；也就是说，它与诸如 {{HTMLElement("body")}} 之类的元素，诸如 {{HTMLElement("h2")}} 之类的标题等不同，<code><main></code> 不会影响 {{glossary("DOM", "DOM")}} 的页面结构概念。它仅有提供信息的作用。（原文：It's strictly informative.）</p> + +<h2 id="示例">示例</h2> + +<pre class="brush: html"><!-- 其他内容 --> + +<main> + <h1>Apples</h1> + <p>The apple is the pomaceous fruit of the apple tree.</p> + + <article> + <h2>Red Delicious</h2> + <p>These bright red apples are the most common found in many + supermarkets.</p> + <p>... </p> + <p>... </p> + </article> + + <article> + <h2>Granny Smith</h2> + <p>These juicy, green apples make a great filling for + apple pies.</p> + <p>... </p> + <p>... </p> + </article> + +</main> + +<!-- 其他内容 --></pre> + +<h2 id="可访问性相关">可访问性相关</h2> + +<h3 id="界标">界标</h3> + +<p><code><main></code> 元素的行为与 <a href="/zh-CN/docs/Web/Accessibility/ARIA/Roles/Main_role"><code>main</code> 界标</a>所定义的角色相一致。 <a href="/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques#Landmark_roles">界标</a>可被辅助技术使用，以快速识别并将用户导航到文档中的分段。通常使用 <code><main></code> 元素，而不是定义 <code>role="main"</code>，除非是考虑<a href="/zh-CN/docs/Web/HTML/Element/main#Browser_compatibility">对于旧浏览器的兼容性</a>.</p> + +<h3 id="直达内容">直达内容</h3> + +<p>直达内容（skipnav），是一种辅助功能技术，使其用户可以快速跳过大段的重复内容（如主导航栏、信息横幅等）。这允许用户更快地访问到页面的主要内容。</p> + +<p>向 <code><main></code> 元素添加 <a href="/zh-CN/docs/Web/HTML/Global_attributes/id"><code>id</code> 属性</a>后，该元素可成为直达内容链接的目标。</p> + +<pre><span class="tag"><body</span><span class="tag">> + <a href="#main-content">Skip to main content</a> + + <!-- navigation and header content --> + + <main id="main-content"> + <!-- main page content --> + </main> +</body></span> +</pre> + +<ul> + <li><a href="https://webaim.org/techniques/skipnav/">WebAIM: 直达链接</a></li> +</ul> + +<h3 id="阅读器模式">阅读器模式</h3> + +<p>浏览器的阅读器模式会寻找文档中的<code>main</code> 元素，以及 <a href="/zh-CN/docs/Web/HTML/Element/Heading_Elements">标题元素</a> 和 <a href="/zh-CN/docs/Web/HTML/Element#Content_sectioning">内容分区元素</a> 以便将内容转换至阅读器视图。</p> + +<ul> + <li><a href="https://medium.com/@mandy.michael/building-websites-for-safari-reader-mode-and-other-reading-apps-1562913c86c9">为 Safari 阅读器模式以及其他阅读器应用构建网站</a></li> +</ul> + +<h2 id="规范">规范</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">规范</th> + <th scope="col">状态</th> + <th scope="col">备注</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', '#semantics.html#the-main-element', '<main>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5.1', 'grouping-content.html#the-main-element', '<main>')}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td>No change from {{SpecName('HTML5 W3C')}}.</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'grouping-content.html#the-main-element', '<main>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">浏览器兼容性</h2> + +<p><code><main></code> 标签受广泛支持。对于IE浏览器11版本和低于11的版本，推荐向 <code><main></code> 元素添加 <code>"main" 这一</code> {{glossary("ARIA")}} 角色，以保证其可访问性。(屏幕阅读器，如 JAWS，当与较旧版本的 Internet Explorer 一起使用时，需包括此 <code>role</code> 属性才能理解 <code><main></code> 元素的语义含义）</p> + +<pre class="brush: html"><main role="main"> + ... +</main> +</pre> + + + +<p>{{Compat("html.elements.main")}}</p> + +<h2 id="参见">参见</h2> + +<ul> + <li>基本结构元素：{{HTMLElement("html")}}、{{HTMLElement("head")}}、{{HTMLElement("body")}}</li> + <li>分段相关元素：{{HTMLElement("article")}}、{{HTMLElement("aside")}}、{{HTMLElement("footer")}}、{{HTMLElement("header")}}, 或 {{HTMLElement("nav")}}</li> +</ul> diff --git a/files/zh-cn/web/html/element/map/index.html b/files/zh-cn/web/html/element/map/index.html new file mode 100644 index 0000000000..1d69778e65 --- /dev/null +++ b/files/zh-cn/web/html/element/map/index.html @@ -0,0 +1,172 @@ +--- +title: <map> +slug: Web/HTML/Element/map +translation_of: Web/HTML/Element/map +--- +<div class="blockIndicator note"> +<p>这篇文章翻译不完整</p> +</div> + +<p><strong>HTML <code><map></code> 属性</strong> 与 {{HTMLElement("area")}} 属性一起使用来定义一个图像映射(一个可点击的链接区域).</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/en-US/docs/HTML/Content_categories">内容类别</a></th> + <td><a href="/en-US/docs/HTML/Content_categories#Flow_content">流式内容</a>，<a href="/en-US/docs/HTML/Content_categories#Phrasing_content">短语内容</a>，palpable 内容。</td> + </tr> + <tr> + <th scope="row">允许的内容</th> + <td>任何<a href="/en-US/docs/HTML/Content_categories#Transparent_content_model">透明</a>元素。</td> + </tr> + <tr> + <th scope="row">标签省略</th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th scope="row">允许的父元素</th> + <td>任何接受<a href="/en-US/docs/HTML/Content_categories#Phrasing_content">短语内容</a>的元素。</td> + </tr> + <tr> + <th scope="row">DOM 接口</th> + <td>{{domxref("HTMLMapElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="属性">属性</h2> + +<p>这个元素拥有<a href="https://developer.mozilla.org/en-US/docs/HTML/Global_attributes">全局属性</a>。</p> + +<dl> + <dt>{{htmlattrdef("name")}}</dt> + <dd>name属性 给map一个名字用来查询，这个属性是必须的，值必须不能为空并且不能带空格。name属性不准与同文档中其他map元素的值相同，如果id属性也被添加，name属性和id属性的值必须相同。</dd> +</dl> + +<h2 id="示例">示例</h2> + +<pre class="brush: html notranslate"><map name="example-map-1"> + <area shape="circle" coords="200,250,25" href="another.htm" /> + <area shape="default" /> +</map> + +</pre> + +<h3 id="结果">结果</h3> + +<p>{{ EmbedLiveSample('Examples', '350', '166', '', 'Web/HTML/Element/map') }}</p> + +<h3 id="Expected_live_example_output">Expected live example output</h3> + +<p>The live example above should appear similar to the following images (when using your keyboard tab key):</p> + +<p><em>For the <code>left.html</code> link:</em><br> + <img alt="" src="https://mdn.mozillademos.org/files/14595/Screen%20Shot%202017-02-02%20at%2010.48.40%20PM.png"></p> + +<p><em>For the <code>right.html</code> link</em><br> + <img alt="" src="https://mdn.mozillademos.org/files/14597/Screen%20Shot%202017-02-02%20at%2010.49.04%20PM.png"></p> + +<h2 id="规范">规范</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'the-map-element.html#the-map-element', '<map>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'embedded-content-0.html#the-map-element', '<map>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/objects.html#h-13.6.1', '<map>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>1.0</td> + <td>{{CompatGeckoDesktop(1.0)}}<sup>[1]</sup><br> + {{CompatGeckoDesktop(5.0)}}<sup>[2]</sup><br> + {{CompatGeckoDesktop(17.0)}}<sup>[3]</sup></td> + <td>{{CompatVersionUnknown}}</td> + <td>1.0</td> + <td>1.0</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>1.0</td> + <td>{{CompatGeckoMobile(1.0)}}<sup>[1]</sup><br> + {{CompatGeckoMobile(5.0)}}<sup>[2]</sup><br> + {{CompatGeckoMobile(17.0)}}<sup>[3]</sup></td> + <td>{{CompatVersionUnknown}}</td> + <td>1.0</td> + <td>1.0</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] 从 Gecko 5.0 {{geckoRelease("5.0")}} 起，空的映射不再略过，以支持兼容模式匹配时的非空映射。例如，考虑下面的 HTML： </p> + +<pre class="brush: html notranslate"><map></map> +<map> + <area shape="rect" coords="25,25,75,75" href="#fail"> +</map> +<img usemap="#a" src="image.png"> +</pre> + +<p>[2] Gecko 5.0 之前， {{HTMLElement("img")}} 元素会匹配第二个非空映射。现在它匹配第一个，即使它是空的。</p> + +<p>[3] 从 Firefox 17 起， <code><map></code> HTML 元素的默认样式是 <code>display: inline;</code> 并且不再是 <code>display: block;</code>。这和其它浏览器行为一致，并且已经在兼容模式中这样做了。</p> + +<h2 id="另见">另见</h2> + +<ul> + <li>{{HTMLElement("a")}}</li> + <li>{{HTMLElement("area")}}</li> +</ul> + +<p>{{HTMLRef}}</p> diff --git a/files/zh-cn/web/html/element/mark/index.html b/files/zh-cn/web/html/element/mark/index.html new file mode 100644 index 0000000000..89ec1eea7a --- /dev/null +++ b/files/zh-cn/web/html/element/mark/index.html @@ -0,0 +1,128 @@ +--- +title: <mark> +slug: Web/HTML/Element/mark +translation_of: Web/HTML/Element/mark +--- +<h2 id="概要">概要</h2> + +<p>HTML标记文本元素(< Mark >)表示为引用或符号目的而标记或突出显示的文本，这是由于标记的段落在封闭上下文中的相关性或重要性造成的。</p> + +<p>这个<em> HTML mark </em>标签代表突出显示的文字,例如可以为了<strong>标记</strong>特定上下文中的文本而使用这个标签<strong><font color="#252525" face="Microsoft YaHei"><span style="font-size: 12px; line-height: 19.2000007629395px;">.</span></font></strong> 举个例子，它可以用来显示搜索引擎搜索后关键词</p> + +<ul class="htmlelt"> + <li><dfn>内容分类</dfn> <a href="/en-US/docs/HTML/Content_categories#Flow_content" title="HTML/Content categories#Flow content">Flow content</a>, <a href="/en-US/docs/HTML/Content_categories#Phrasing_content" title="HTML/Content categories#Phrasing content">phrasing content</a>, palpable content.</li> + <li><dfn>允许的内容</dfn> <a href="/en-US/docs/HTML/Content_categories#Phrasing_content" title="HTML/Content_categories#Phrasing_content">Phrasing content</a>.</li> + <li><dfn>标签省略</dfn> {{no_tag_omission}}</li> + <li><dfn>允许的父元素</dfn>任何接受<a href="/en-US/docs/HTML/Content_categories#Phrasing_content" title="HTML/Content_categories#Phrasing_content">phrasing content</a> 的元素.</li> + <li><dfn>DOM 接口</dfn> {{domxref("HTMLElement")}}</li> +</ul> + +<h2 id="属性">属性</h2> + +<p><span style="line-height: 21px;">这个元素只包含了 </span><a href="https://developer.mozilla.org/en-US/docs/HTML/Global_attributes">全局属性</a><span style="line-height: 21px;">.</span></p> + +<h2 id="使用说明">使用说明</h2> + +<p><code><mark></code>元素的典型使用场景包括：<br> + <em></em></p> + +<ul> + <li>当用在引用（{{HTMLElement("q")}}、{{HTMLElement("blockquote")}}）中时，通常用来显示有特殊意义的文本，但不在原材料中标记出来；或者是用来显示特殊审查的材料，即使原作者不认为它特别重要。</li> + <li>另外，<mark>元素还用来显示与用户当前活动相关的一部分文档内容。例如，它可能被用于显示匹配搜索结果中的单词。</li> + <li>不要为了语法高亮而用 <code><mark></code> 元素; 你应该用 <em>{{HTMLElement("strong")}}</em> 元素结合适当的CSS来实现这个目的（语法高亮）。</li> +</ul> + +<div class="blockIndicator note"> +<p>不要把 <code><mark></code> 元素和 {{HTMLElement("strong")}} 元素搞混淆；{{HTMLElement("strong")}} 元素用来表示文本在上下文的重要性的， 而 <code><mark></code> 元素是用来表示上下文的关联性的.</p> +</div> + +<h2 id="例子">例子</h2> + +<pre class="brush: html"><p>&lt;mark&gt; 元素用于 <mark>高亮</mark> 文本</p> +</pre> + +<h3 id="结果">结果</h3> + +<p><mark> 元素用于 <mark>高亮</mark> 文本</p> + +<h2 id="Specifications" name="Specifications">说明</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'text-level-semantics.html#the-mark-element', '<mark>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'text-level-semantics.html#the-mark-element', '<mark>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("2.0")}}</td> + <td>9.0</td> + <td>11.0</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("2.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="参见">参见</h2> + +<ul> + <li>Other <a href="/en-US/docs/HTML/Text-level_semantics_elements" title="HTML/Text-level semantics elements">text-level semantics elements</a>: {{HTMLElement("a")}}, {{HTMLElement("em")}}, {{HTMLElement("strong")}}, {{HTMLElement("cite")}}, {{HTMLElement("q")}}, {{HTMLElement("dfn")}}, {{HTMLElement("abbr")}}, {{HTMLElement("time")}}, {{HTMLElement("code")}}, {{HTMLElement("var")}}, {{HTMLElement("samp")}}, {{HTMLElement("kbd")}}, {{HTMLElement("sub")}}, {{HTMLElement("sup")}}, {{HTMLElement("i")}}, {{HTMLElement("b")}}, {{HTMLElement("mark")}}, {{HTMLElement("ruby")}}, {{HTMLElement("rp")}}, {{HTMLElement("rt")}}, {{HTMLElement("bdo")}}, {{HTMLElement("span")}}, {{HTMLElement("br")}}, {{HTMLElement("wbr")}}.</li> +</ul> + +<p>{{HTMLRef}}</p> diff --git a/files/zh-cn/web/html/element/marquee/index.html b/files/zh-cn/web/html/element/marquee/index.html new file mode 100644 index 0000000000..c604b26c7b --- /dev/null +++ b/files/zh-cn/web/html/element/marquee/index.html @@ -0,0 +1,209 @@ +--- +title: <marquee> +slug: Web/HTML/Element/marquee +tags: + - marquee +translation_of: Web/HTML/Element/marquee +--- +<div>{{HTMLRef}}</div> + +<div>{{obsolete_header}}</div> + +<p>HTML marquee 元素（<code><marquee>）</code> 用来插入一段滚动的文字。你可以使用它的属性控制当文本到达容器边缘发生的事情。</p> + +<div class="warning"> +<p> <code><marquee></code> 元素已经 <strong>过时</strong>，请不要再使用。尽管一些浏览器仍然支持它，但它不是必须的。此外，使用这个元素基本上是你可以对你的用户做最糟糕的事情之一，所以请不要这样做。</p> +</div> + +<h2 id="属性">属性</h2> + +<dl> + <dt>{{htmlattrdef("behavior")}}</dt> + <dd>设置文本在 marquee 元素内如何滚动。可选值有 <code>scroll<font face="Open Sans, Arial, sans-serif">，</font></code><code>slide</code> 和 <code>alternate。</code> 如果未指定值，默认值为 <code>scroll。</code></dd> + <dt>{{htmlattrdef("bgcolor")}}</dt> + <dd>通过颜色名称或十六进制值设置背景颜色。</dd> + <dt>{{htmlattrdef("direction")}}</dt> + <dd>设置 marquee 内文本滚动的方向。可选值有 <code>left</code>, <code>right</code>, <code>up</code> and <code>down。</code>如果未指定值，默认值为 <code>left。</code></dd> + <dt>{{htmlattrdef("height")}}</dt> + <dd>以像素或百分比值设置高度。</dd> + <dt>{{htmlattrdef("hspace")}}</dt> + <dd>设置水平边距。</dd> + <dt>{{htmlattrdef("loop")}}</dt> + <dd>设置 marquee 滚动的次数。如果未指定值，默认值为 −1，表示 marquee 将连续滚动.</dd> + <dt>{{htmlattrdef("scrollamount")}}</dt> + <dd>设置每次滚动时移动的长度（以像素为单位）。默认值为 6。</dd> + <dt>{{htmlattrdef("scrolldelay")}}</dt> + <dd>设置每次滚动时的时间间隔（以毫秒为单位）。默认值为 85。请注意， 除非指定 truespeed 值，否则将忽略任何小于 60 的值，并改为使用 60。</dd> + <dt>{{htmlattrdef("truespeed")}}</dt> + <dd>默认情况下，会忽略小于60的scrolldelay值。如果存在truespeed，那些值不会被忽略。</dd> + <dt>{{htmlattrdef("vspace")}}</dt> + <dd>以像素或百分比值设置垂直边距。</dd> + <dt>{{htmlattrdef("width")}}</dt> + <dd>以像素或百分比值设置宽度。</dd> +</dl> + +<h2 id="Event_handlers" name="Event_handlers">事件回调</h2> + +<dl> + <dt>{{htmlattrdef("onbounce")}}</dt> + <dd>当 marquee 滚动到结尾时触发。它只能在 behavior 属性设置为 alternate 时触发。</dd> + <dt>{{htmlattrdef("onfinish")}}</dt> + <dd>当 marquee 完成 loop 属性设置的值时触发。它只能在 loop 属性设置为大于 0 的某个数字时触发。</dd> + <dt>{{htmlattrdef("onstart")}}</dt> + <dd>当 marquee 开始滚动时触发。</dd> +</dl> + +<h2 id="Methods" name="Methods">方法</h2> + +<dl> + <dt>start</dt> + <dd>开始滚动 marquee。</dd> + <dt>stop</dt> + <dd>停止滚动 marquee。</dd> +</dl> + +<h2 id="示例">示例</h2> + +<pre class="brush: html"><marquee>This text will scroll from right to left</marquee> + +<marquee direction="up">This text will scroll from bottom to top</marquee> + +<marquee direction="down" width="250" height="200" behavior="alternate" style="border:solid"> + <marquee behavior="alternate"> + This text will bounce + </marquee> +</marquee></pre> + +<p>{{EmbedLiveSample("Examples", 600, 450)}}</p> + +<h2 id="规范">规范</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'obsolete.html#the-marquee-element-2', '<marquee>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>Make it obsolete in favor of CSS but define its expected behavior, for backward compatibility.</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'obsolete.html#the-marquee-element-0', '<marquee>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>Make it obsolete in favor of CSS but define its expected behavior, for backward compatibility.</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>1.0</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("1.0")}}</td> + <td>2.0</td> + <td>7.2</td> + <td>1.2</td> + </tr> + <tr> + <td><code>truespeed</code> attribute</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("1.9")}}</td> + <td>4.0</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td><code>hspace/vspace</code> attribute</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("1.9")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>loop</code> attribute</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("1.9")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Edge</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("1.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>truespeed</code> attribute</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("1.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>hspace/vspace</code> attribute</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("1.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>loop</code> attribute</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("1.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> diff --git a/files/zh-cn/web/html/element/menu/index.html b/files/zh-cn/web/html/element/menu/index.html new file mode 100644 index 0000000000..27ce5ea843 --- /dev/null +++ b/files/zh-cn/web/html/element/menu/index.html @@ -0,0 +1,221 @@ +--- +title: <menu> +slug: Web/HTML/Element/menu +tags: + - HTML + - HTML交互元素 + - UX + - Web + - 元素 + - 参考 + - 菜单 +translation_of: Web/HTML/Element/menu +--- +<div>{{HTMLRef}}{{SeeCompatTable}}</div> + +<p><strong>HTML <code><menu></code> 元素</strong>呈现了一组用户可执行或激活的命令。这既包含了可能出现在屏幕顶端的列表菜单，也包含了那些隐藏在按钮之下、当点击按钮后显示出来的文本菜单。</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/en-US/docs/Web/HTML/Content_categories">Content categories</a></th> + <td><a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">Flow content</a>. Additionally, if in the <em>list menu</em> state, palpable content. (<em>list menu</em> is the default state, unless the parent element is a {{HTMLElement("menu")}} in the <em>context menu</em> state.)</td> + </tr> + <tr> + <th scope="row">Permitted content</th> + <td>If the element is in the <em>list menu</em> state: <a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">flow content</a>, or alternatively, zero or more occurrences of {{HTMLElement("li")}}, {{HTMLElement("script")}}, and {{HTMLElement("template")}}.<br> + If the element is in the <em>context menu</em> state: zero or more occurrences, in any order, of {{HTMLElement("menu")}} (<em>context menu</em> state only), {{HTMLElement("menuitem")}}, {{HTMLElement("hr")}}, {{HTMLElement("script")}}, and {{HTMLElement("template")}}.</td> + </tr> + <tr> + <th scope="row">Tag omission</th> + <td>{{No_Tag_Omission}}</td> + </tr> + <tr> + <th scope="row">Permitted parents</th> + <td>Any element that accepts <a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">flow content</a>.</td> + </tr> + <tr> + <th scope="row">Permitted ARIA roles</th> + <td>None</td> + </tr> + <tr> + <th scope="row">DOM interface</th> + <td>{{DOMxRef("HTMLMenuElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="属性">属性</h2> + +<p>该元素支持<a href="/en-US/HTML/Global_attributes">全局属性</a>，以及以下属性。</p> + +<dl> + <dt>{{HTMLAttrDef("label")}} {{Deprecated_inline}}</dt> + <dd>The name of the menu as shown to the user. Used within nested menus, to provide a label through which the submenu can be accessed. Must only be specified when the parent element is a {{HTMLElement("menu")}} in the <em>context menu</em> state.</dd> + <dt>{{HTMLAttrDef("type")}}</dt> + <dd>This attribute indicates the kind of menu being declared, and can be one of two values. + <ul> + <li><code>context</code> {{Deprecated_inline}} : Indicates the <em>popup menu</em> state, which represents a group of commands activated through another element. This might be as a button menu referenced by a {{HTMLAttrxRef("menu", "button")}} attribute of a {{HTMLElement("button")}} element, or as context menu for an element with a <a href="/en-US/docs/HTML/Global_attributes#attr-contextmenu"><code>contextmenu</code></a> attribute. This value is the default if the attribute is missing and the parent element is also a <code><menu></code> element.</li> + <li><code>toolbar</code>: Indicates the <em>toolbar</em> state, which represents a toolbar consisting of a series of commands for user interaction. This might be in the form of an unordered list of {{HTMLElement("li")}} elements, or, if the element has no <code><li></code> element children, flow content describing available commands. This value is the default if the attribute is missing.</li> + </ul> + </dd> +</dl> + +<h2 id="使用备注">使用备注</h2> + +<p>{{HTMLElement("menu")}} 和 {{HTMLElement("ul")}} 元素都呈现了无序列表元素。最主要的区别是，{{HTMLElement("ul")}} 主要是为了展示选项，而 {{HTMLElement("menu")}} 则是为了交互。</p> + +<p>An HTML menu can be used to create context menus (typically activated by right-clicking another element) or toolbars.</p> + +<p><strong>{{anch("Context menu", "Context menus</strong>")}} consist of a <code><menu></code> element which contains {{HTMLElement("menuitem")}} elements for each selectable option in the menu, <code><menu></code> elements for submenus within the menu, and {{HTMLElement("hr")}} elements for separator lines to break up the menu's content into sections. Context menus are then attached to the element they're activated from using either the associated element's {{HTMLAttrxRef("contextmenu")}} attribute or, for {{anch("Button menu", "button-activated menus")}} attached to {{HTMLElement("button")}} elements, the {{HTMLAttrxRef("menu", "button")}} attribute.</p> + +<p><strong>{{anch("Toolbar", "Toolbar menus</strong>")}} consist of a <code><menu></code> element whose content is described in one of two ways: either as an unordered list of items represented by {{HTMLElement("li")}} elements (each representing a command or option the user can utilize), or (if there are no <code><li></code> elements), <a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">flow content</a> describing the available commands and options.</p> + +<p>这个元素在 HTML4 中被弃用，但在 HTML 5.1 和 HTML living standard 中被重新推荐使用。 这份文档描述的是当前 Firefox 上的实现。根据 HTML 5.1 的规定，{{HTMLElement("list")}} 元素的类型可能会更改为{{HTMLElement("toolbar")}}。</p> + +<h2 id="例子">例子</h2> + +<h3 id="右键菜单">右键菜单</h3> + +<p>{{Deprecated_header}}</p> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html;"><!-- A <div> element with a context menu --> +<div contextmenu="popup-menu"> + Right-click to see the adjusted context menu +</div> + +<menu type="context" id="popup-menu"> + <menuitem>Action</menuitem> + <menuitem>Another action</menuitem> + <hr/> + <menuitem>Separated action</menuitem> +</menu> +</pre> + +<h4 id="CSS">CSS</h4> + +<pre class="brush: css;">div { + width: 300px; + height: 80px; + background-color: lightgreen; +} +</pre> + +<h4 id="结果">结果</h4> + +<p>{{EmbedLiveSample("Context_menu", "100%", 80)}}</p> + +<h3 id="菜单按钮">菜单按钮</h3> + +<div class="blockIndicator warning"> +<p>Menu buttons haven't been implemented in any known browsers yet. The {{HTMLAttrxRef("type", "menu")}} attribute on the <code><menu></code> element is now obsolete.</p> +</div> + +<div class="blockIndicator warning"> +<p>{{HTMLElement("menuitem")}} element is obsolete.</p> +</div> + +<h4 id="HTML_2">HTML</h4> + +<pre class="brush: html;"><!-- A button, which displays a menu when clicked. --> +<button type="menu" menu="popup-menu"> + Dropdown +</button> + +<menu type="context" id="popup-menu"> + <menuitem>Action</menuitem> + <menuitem>Another action</menuitem> + <hr/> + <menuitem>Separated action</menuitem> +</menu> +</pre> + +<h4 id="Result">Result</h4> + +<p>{{EmbedLiveSample("Menu_button", "100%", 50)}}</p> + +<h3 id="Toolbar" name="Toolbar">Toolbar</h3> + +<div class="blockIndicator warning"> +<p>Toolbar menus haven't been implemented in any known browsers yet.</p> +</div> + +<h4 id="HTML_3">HTML</h4> + +<pre class="brush: html;"><!-- A context menu for a simple editor, + - containing two menu buttons. --> +<menu type="toolbar"> + <li> + <button type="menu" menu="file-menu">File</button> + <menu type="context" id="file-menu"> + <menuitem label="New..." onclick="newFile()"> + <menuitem label="Save..." onclick="saveFile()"> + </menu> + </li> + <li> + <button type="menu" menu="edit-menu">Edit</button> + <menu type="context" id="edit-menu"> + <menuitem label="Cut..." onclick="cutEdit()"> + <menuitem label="Copy..." onclick="copyEdit()"> + <menuitem label="Paste..." onclick="pasteEdit()"> + </menu> + </li> +</menu> +</pre> + +<h4 id="结果_2">结果</h4> + +<p>{{EmbedLiveSample("Toolbar", "100%", 100)}}</p> + +<h2 id="规范">规范</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">规范</th> + <th scope="col">状态</th> + <th scope="col">备注</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("HTML WHATWG", "grouping-content.html#the-menu-element", "<menu>")}}</td> + <td>{{Spec2("HTML WHATWG")}}</td> + <td>No change from latest snapshot, {{SpecName("HTML5.3")}}</td> + </tr> + <tr> + <td>{{SpecName("HTML5.3", "grouping-content.html#the-menu-element", "<menu>")}}</td> + <td>{{Spec2("HTML5.3")}}</td> + <td>No changes</td> + </tr> + <tr> + <td>{{SpecName("HTML5.2", "grouping-content.html#the-menu-element", "<menu>")}}</td> + <td>{{Spec2("HTML5.2")}}</td> + <td>Snapshot of the {{SpecName("HTML WHATWG")}}.<br> + Removed the <code>context</code> type.</td> + </tr> + <tr> + <td>{{SpecName("HTML5.1", "interactive-elements.html#the-menu-element", "<menu>")}}</td> + <td>{{Spec2("HTML5.1")}}</td> + <td>Snapshot of the {{SpecName("HTML WHATWG")}}.<br> + Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + + + +<p>{{Compat("html.elements.menu")}}</p> + +<h2 id="参见">参见</h2> + +<ul> + <li>Other list-related HTML Elements: {{HTMLElement("ol")}}, {{HTMLElement("ul")}}, {{HTMLElement("li")}}, {{HTMLElement("hr")}}, and the obsolete {{HTMLElement("dir")}}.</li> + <li>The <a href="/en-US/docs/Web/HTML/Global_attributes#attr-contextmenu"><code>contextmenu</code></a> <a href="/en-US/docs/Web/HTML/Global_attributes">global attribute</a> can be used on an element to refer to the <code>id</code> of a <code>menu</code> with {{HTMLAttrxRef("type", "menu", 'type="context"')}}.</li> +</ul> + +<div>{{HTMLRef}}</div> diff --git a/files/zh-cn/web/html/element/menuitem/index.html b/files/zh-cn/web/html/element/menuitem/index.html new file mode 100644 index 0000000000..74bda2d9d9 --- /dev/null +++ b/files/zh-cn/web/html/element/menuitem/index.html @@ -0,0 +1,152 @@ +--- +title: <menuitem> +slug: Web/HTML/Element/menuitem +tags: + - Element + - HTML + - HTML5 + - Web + - 菜单 +translation_of: Web/HTML/Element/menuitem +--- +<p>{{HTMLRef}}{{Deprecated_Header("HTML5.2")}}</p> + +<p>用户可以通过<strong>HTML <code><menuitem></code> 元素</strong>生成一个弹出式菜单。这包括上下文菜单，以及按钮可能附带的菜单。</p> + +<p>这个标签可以被显式定义，带有文本标签和可选图标来描述其外观，或者作为一个<em>间接命令</em>，其行为由一个单独的元素定义。命令还可以选择包含复选框或分组共享单选按钮。（<code><input type="checkbox"></code> 和 <code><input type="radio"></code>）</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/en-US/docs/Web/HTML/Content_categories">内容类别</a></th> + <td>None.</td> + </tr> + <tr> + <th scope="row">允许的内容</th> + <td>None, 这是一个{{Glossary("empty element", "空元素")}}。</td> + </tr> + <tr> + <th scope="row">标签省略</th> + <td>必须有开始标签和结束标签。</td> + </tr> + <tr> + <th scope="row">允许的父元素</th> + <td>The {{HTMLElement("menu")}} element, where that element is in the <em>popup menu</em> state. (If specified, the <code>type</code> attribute of the {{HTMLElement("menu")}} element must be <code>popup</code>; if missing, the parent element of the {{HTMLElement("menu")}} must itself be a {{HTMLElement("menu")}} in the <em>popup menu</em> state.)</td> + </tr> + <tr> + <th scope="row">允许的 ARIA roles</th> + <td>None</td> + </tr> + <tr> + <th scope="row">DOM 接口</th> + <td>{{DOMxRef("HTMLMenuItemElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="属性">属性</h2> + +<p>该标签支持<a href="/zh-CN/docs/Web/HTML/Global_attributes">全局属性</a>；特别地， <code>title</code> 常常用来描述命令，或者提供有用的注释。</p> + +<dl> + <dt>{{HTMLAttrDef("checked")}}</dt> + <dd>布尔值，指示是否选择了命令。只能作为属性使用在 <code>checkbox</code> 或 <code>radio</code> 中。</dd> + <dt>{{HTMLAttrDef("command")}}</dt> + <dd>指定一个单独元素的ID，指示要间接调用的命令。在包含属性的菜单项中也不能使用。<code>checked</code>、<code>disabled</code>、<code>icon</code>、<code>label</code>、<code>radiogroup</code> 或 <code>type</code>。</dd> + <dt>{{HTMLAttrDef("default")}}</dt> + <dd>布尔值，表示使用与菜单主题元素相同的命令。（如 <code>button</code> 或 <code>input</code>）。</dd> + <dt>{{HTMLAttrDef("disabled")}}</dt> + <dd>布尔值，表示命令在当前状态下不可用。请注意，禁用与隐藏不同；禁用的属性适用于任何环境变化可能导致命令相关的上下文中。</dd> + <dt>{{HTMLAttrDef("icon")}}</dt> + <dd>图片URL，用于提供图片来表示命令。</dd> + <dt>{{HTMLAttrDef("label")}}</dt> + <dd>展示给用户一个命令的名字，当 <code>command</code> 属性不存在时是必须的。</dd> + <dt>{{HTMLAttrDef("radiogroup")}}</dt> + <dd>此属性指定要切换为单选按钮时，选定的一组命令的名称。只能作为radio的属性使用。</dd> + <dt>{{HTMLAttrDef("type")}}</dt> + <dd>这个属性指定命令的类型，可以为以下三个命令之一。 + <ul> + <li><code>command</code>：有关联动作的常规命令。这是缺少时的值默认值。</li> + <li><code>checkbox</code>：代表一个命令可以在两个不同状态之间的切换。</li> + <li><code>radio</code>：代表一组单选按钮，可切换为命令中的一个选择。</li> + </ul> + </dd> +</dl> + +<h2 id="例子">例子</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html;"><!-- A <div> element with a context menu --> +<div contextmenu="popup-menu"> + Right-click to see the adjusted context menu +</div> + +<menu type="context" id="popup-menu"> + <menuitem type="checkbox" checked>Checkbox</menuitem> + <hr> + <menuitem type="command" label="This command does nothing" icon="https://developer.cdn.mozilla.net/static/img/favicon144.png"> + Commands don't render their contents. + </menuitem> + <menuitem type="command" label="This command has javascript" onclick="alert('command clicked')"> + Commands don't render their contents. + </menuitem> + <hr> + <menuitem type="radio" radiogroup="group1">Radio Button 1</menuitem> + <menuitem type="radio" radiogroup="group1">Radio Button 2</menuitem> +</menu> +</pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css;">div { + width: 300px; + height: 80px; + background-color: lightgreen; +} +</pre> + +<h3 id="结果">结果</h3> + +<p>{{EmbedLiveSample("Example", '100%', 80)}}</p> + +<h2 id="规范">规范</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">规范</th> + <th scope="col">状态</th> + <th scope="col">备注</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("HTML WHATWG", "obsolete.html#menuitem", "<menuitem>")}}</td> + <td>{{Spec2("HTML WHATWG")}}</td> + <td>No change from latest snapshot, {{SpecName("HTML5.2")}}</td> + </tr> + <tr> + <td>{{SpecName("HTML5.2", "obsolete.html#elementdef-menuitem", "<menuitem>")}}</td> + <td>{{Spec2("HTML5.2")}}</td> + <td>Snapshot of the {{SpecName("HTML WHATWG")}}, made obsolete.</td> + </tr> + <tr> + <td>{{SpecName("HTML5.1", "interactive-elements.html#the-menuitem-element", "<menuitem>")}}</td> + <td>{{Spec2("HTML5.1")}}</td> + <td>Snapshot of the {{SpecName("HTML WHATWG")}}, initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + + + +<p>{{Compat("html.elements.menuitem")}}</p> + +<h2 id="参见">参见</h2> + +<ul> + <li><a href="https://hacks.mozilla.org/2011/11/html5-context-menus-in-firefox-screencast-and-code/">HTML5 context menus in Firefox (Screencast and Code)</a></li> +</ul> diff --git a/files/zh-cn/web/html/element/meta/index.html b/files/zh-cn/web/html/element/meta/index.html new file mode 100644 index 0000000000..4594e71125 --- /dev/null +++ b/files/zh-cn/web/html/element/meta/index.html @@ -0,0 +1,122 @@ +--- +title: <meta>：文档级元数据元素 +slug: Web/HTML/Element/meta +tags: + - HTML + - metadata + - 元数据 + - 元素 +translation_of: Web/HTML/Element/meta +--- +<div>{{HTMLRef}}</div> + +<p><strong>HTML <code><meta></code> 元素</strong>表示那些不能由其它 HTML 元相关（meta-related）元素（({{HTMLElement("base")}}、{{HTMLElement("link")}}, {{HTMLElement("script")}}、{{HTMLElement("style")}} 或 {{HTMLElement("title")}}）之一表示的任何{{Glossary("Metadata","元数据")}}信息。</p> + +<ul class="htmlelt"> + <li><dfn><a href="https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Content_categories">内容分类</a></dfn>元数据内容，如果 {{htmlattrxref("itemprop", "meta")}} 属性存在：<a href="/en-US/docs/HTML/Content_categories#Flow_content" title="HTML/Content categories#Flow content">流数据</a>，<a href="/en-US/docs/HTML/Content_categories#Phrasing_content">表述内容</a></li> + <li><dfn>允许的内容</dfn> 无，这是一个 {{Glossary("空元素")}}</li> + <li><dfn>标签省略</dfn>因为这是一个void元素，必须有开始标签而闭合标签可以省略</li> + <li><dfn>允许的父元素</dfn><code><meta charset></code>, <code><meta http-equiv></code>: {{HTMLElement("head")}} 元素. 如果 {{htmlattrxref("http-equiv", "meta")}} 不是编码声明, 它也可以放在{{HTMLElement("noscript")}}元素内，它本身在 {{HTMLElement("head")}}元素内部。</li> + <li></li> + <li><dfn>默认无障碍语义</dfn><a href="https://www.w3.org/TR/html-aria/#dfn-no-corresponding-role">没有相应的语义</a></li> + <li><dfn>允许的无障碍语义</dfn>没有允许的语义（<code>role</code>）</li> + <li><dfn>DOM 接口</dfn> {{domxref("HTMLMetaElement")}}</li> +</ul> + +<p><code>meta</code> 元素定义的元数据的类型包括以下几种：</p> + +<ul> + <li>如果设置了 {{htmlattrxref("name", "meta")}} 属性，<code>meta</code> 元素提供的是文档级别（<em>document-level</em>）的元数据，应用于整个页面。</li> + <li>如果设置了 {{htmlattrxref("http-equiv", "meta")}} 属性，<code>meta</code> 元素则是编译指令，提供的信息与类似命名的HTTP头部相同。</li> + <li>如果设置了 {{htmlattrxref("charset", "meta")}} 属性，<code>meta</code> 元素是一个字符集声明，告诉文档使用哪种字符编码。</li> + <li>如果设置了 {{htmlattrxref("itemprop")}} 属性，<code>meta</code> 元素提供用户定义的元数据。</li> +</ul> + +<h2 id="属性">属性</h2> + +<p>此元素包括<a href="/zh-CN/docs/Web/HTML/Global_attributes">全局属性</a>。</p> + +<div class="note"> +<p>注意: 全局属性 {{htmlattrxref("name", "meta")}} 在 {{HTMLElement("meta")}} 元素中具有特殊的语义；另外， 在同一个 <meta> 标签中，{{htmlattrxref("name", "meta")}}, {{htmlattrxref("http-equiv", "meta")}} 或者 {{htmlattrxref("charset", "meta")}} 三者中任何一个属性存在时，{{htmlattrxref("itemprop", "meta")}} 属性不能被使用。</p> +</div> + +<p><strong>{{htmlattrdef("charset")}}</strong></p> + +<p>这个属性声明了文档的字符编码。如果使用了这个属性，其值必须是与ASCII大小写无关（ASCII case-insensitive）的"<code>utf-8</code>"。</p> + +<dl> + <dt>{{htmlattrdef("content")}}</dt> + <dd>此属性包含{{htmlattrxref("http-equiv", "meta")}} 或{{htmlattrxref("name", "meta")}} 属性的值，具体取决于所使用的值。</dd> + <dt>{{htmlattrdef("http-equiv")}}</dt> + <dd>属性定义了一个编译指示指令。这个属性叫做 <code><strong>http-equiv</strong>(alent)</code> 是因为所有允许的值都是特定HTTP头部的名称，如下： + <ul> + <li><code>content-security-policy</code><br> + 它允许页面作者定义当前页的<a href="/en-US/docs/Web/Security/CSP/CSP_policy_directives">内容策略</a>。 内容策略主要指定允许的服务器源和脚本端点，这有助于防止跨站点脚本攻击。</li> + <li><code>content-type</code><br> + 如果使用这个属性，其值必须是"<code>text/html; charset=utf-8</code>"。注意：该属性只能用于 <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types">MIME type</a> 为 <code>text/html</code> 的文档，不能用于MIME类型为XML的文档。</li> + <li><code>default-style</code> + <p>设置默认 <a href="/zh-CN/docs/Web/CSS">CSS 样式表</a>组的名称。</p> + </li> + <li> + <p><code>x-ua-compatible</code><br> + 如果指定，则 <code>content</code> 属性必须具有值 "<code>IE=edge</code>"。用户代理必须忽略此指示。</p> + </li> + <li><code>refresh</code><br> + 这个属性指定: + <ul> + <li>如果 {{htmlattrxref("content", "meta")}} 只包含一个正整数，则为重新载入页面的时间间隔(秒)；</li> + <li>如果 {{htmlattrxref("content", "meta")}} 包含一个正整数，并且后面跟着字符串 '<code>;url=</code>' 和一个合法的 URL，则是重定向到指定链接的时间间隔(秒)</li> + </ul> + </li> + </ul> + + <h5 id="可访问性相关考虑">可访问性相关考虑</h5> + + <p>设置了 <code>refresh</code> 值的页面可能有时间间隔太短的风险。使用诸如屏幕朗读这样的辅助技术来浏览网页的人可能会由于自动跳转而来不及读完或理解网页的内容。这样不经提示而突然进行的页面刷新也可能会让有视力障碍的人群感到迷惑。</p> + + <ul> + <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/Accessibility/Understanding_WCAG/Operable#Guideline_2.2_%E2%80%94_Enough_Time_Provide_users_enough_time_to_read_and_use_content">MDN Understanding WCAG, Guideline 2.1 explanations</a></li> + <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/Accessibility/Understanding_WCAG/Understandable#Guideline_3.2_%E2%80%94_Predictable_Make_Web_pages_appear_and_operate_in_predictable_ways">MDN Understanding WCAG, Guideline 3.1 explanations</a></li> + <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/time-limits-required-behaviors.html">Understanding Success Criterion 2.2.1 | W3C Understanding WCAG 2.0</a></li> + <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/time-limits-postponed.html">Understanding Success Criterion 2.2.4 | W3C Understanding WCAG 2.0</a></li> + <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/consistent-behavior-no-extreme-changes-context.html">Understanding Success Criterion 3.2.5 | W3C Understanding WCAG 2.0</a></li> + </ul> + </dd> + <dt>{{htmlattrdef("name")}}</dt> + <dd><code>name</code> 和 <code>content</code> 属性可以一起使用，以名-值对的方式给文档提供元数据，其中 name 作为元数据的名称，content 作为元数据的值。</dd> + <dd>在<a href="https://wiki.developer.mozilla.org/en-US/docs/Web/HTML/Element/meta/name">标准元数据名称</a>中查看 HTML 规范等规范中定义的标准元数据名称。</dd> +</dl> + +<h2 id="示例">示例</h2> + +<pre class="notranslate"><meta charset="utf-8"> + +<!-- Redirect page after 3 seconds --> +<meta http-equiv="refresh" content="3;url=https://www.mozilla.org"> + +</pre> + +<h2 id="规范">规范</h2> + +<table> + <thead> + <tr> + <th scope="col"><strong>规范</strong></th> + <th scope="col"><strong>状态</strong></th> + <th scope="col"><strong>注释</strong></th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'semantics.html#the-meta-element', '<meta>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + + + +<div>{{Compat("html.elements.meta")}}</div> diff --git a/files/zh-cn/web/html/element/meta/name/index.html b/files/zh-cn/web/html/element/meta/name/index.html new file mode 100644 index 0000000000..3f0b9fc74d --- /dev/null +++ b/files/zh-cn/web/html/element/meta/name/index.html @@ -0,0 +1,310 @@ +--- +title: 标准元数据名称 +slug: Web/HTML/Element/meta/name +tags: + - HTML + - 元数据 + - 参考 + - 属性 +translation_of: Web/HTML/Element/meta/name +--- +<div>{{HTMLRef}}</div> + +<p><span class="seoSummary">The {{htmlelement("meta")}} 元素可用于提供 名称-值 对形式的文档元数据，{{htmlattrxref("name", "meta")}} 属性为元数据条目提供名称，而 {{htmlattrxref("content", "meta")}} 属性提供值。</span></p> + +<h3 id="HTML_规范中定义的标准元数据名称">HTML 规范中定义的标准元数据名称</h3> + +<p>HTML 规范定义了以下标准元数据名称：</p> + +<ul> + <li> + <p><code>application-name</code>：网页中所运行的应用程序的名称。</p> + + <div class="note"><strong>备注：</strong> + + <ul> + <li>浏览器可能使用此名称来识别应用程序。It is different from the {{HTMLElement("title")}} element, which usually contain the application name, but may also contain information like the document name or a status.</li> + <li>简单的网页不应当使用 <code>application-name</code>。</li> + </ul> + </div> + </li> + <li><code>author</code>：文档作者的名字。</li> + <li><code>description</code>：一段简短而精确的、对页面内容的描述。一些浏览器，比如 Firefox 和 Opera，将其用作书签的默认描述。</li> + <li><code>generator</code>：生成此页面的软件的标识符（identifier）。</li> + <li><code>keywords</code>：与页面内容相关的关键词，使用逗号分隔。</li> + <li><code>referrer</code>：控制由当前文档发出的请求的 HTTP {{httpheader("Referer")}} 请求头。 + <table class="standard-table"> + <caption><code><meta name="referrer"></code> 的 <code>content</code> 属性的值</caption> + <tbody> + <tr> + <td><code>no-referrer</code></td> + <td>不发送 HTTP {{httpheader("Referer")}} 请求头。</td> + </tr> + <tr> + <td><code>origin</code></td> + <td>只发送当前文档的 {{glossary("origin")}}。</td> + </tr> + <tr> + <td><code>no-referrer-when-downgrade</code></td> + <td>如果请求目标与当前页面一样安全或者更加安全（HTTP(S)→HTTPS），则发送完整 URL；如果请求目标更加不安全（HTTPS→HTTP），则不发送 referrer。这是默认行为。</td> + </tr> + <tr> + <td><code>origin-when-cross-origin</code></td> + <td>对同源请求发送完整 URL（不含 URL 参数），其他情况下，只发送 origin。</td> + </tr> + <tr> + <td><code>same-origin</code></td> + <td>对同源请求发送完整 URL（不含 URL 参数），其他情况下，请求不包含 referrer 请求头。</td> + </tr> + <tr> + <td><code>strict-origin</code></td> + <td>如果请求目标与当前页面一样安全或者更加安全（HTTP(S)→HTTPS），则发送 origin；如果请求目标更加不安全（HTTPS→HTTP），则不发送 referrer。</td> + </tr> + <tr> + <td><code>strict-origin-when-cross-origin</code></td> + <td>对同源请求发送完整 URL（不含 URL 参数）；其他情况下，如果请求目标与当前页面一样安全或者更加安全（HTTP(S)→HTTPS），则发送 origin；如果请求目标更加不安全（HTTPS→HTTP），则不发送 referrer。</td> + </tr> + <tr> + <td><code>unsafe-URL</code></td> + <td>对同源请求和跨源请求发送完整 URL（不含 URL 参数）。</td> + </tr> + </tbody> + </table> + + <div class="note"><strong>备注：</strong> + + <ul> + <li>动态插入 <code><meta name="referrer"></code>（使用 {{domxref("Document.write", "document.write()")}} 方法或者 {{domxref("Node.appendChild", "appendChild()")}} 等方法）会使 referrer 行为变得不可预测。</li> + <li>如果定义了互相冲突的策略，则会转而使用 <code>no-referrer</code> 策略。</li> + </ul> + </div> + </li> + <li><code><a href="/zh-CN/docs/Web/HTML/Element/meta/name/theme-color">theme-color</a></code>：表示当前页面的建议颜色，在自定义当前页面从或页面周围的用户界面的显示时，用户代理应当使用此颜色。<code>content</code> 属性应当包含一个有效的 CSS {{cssxref("<color>")}} 值。</li> +</ul> + +<h3 id="其他规范中定义的标准元数据名称">其他规范中定义的标准元数据名称</h3> + +<p>CSS 颜色调整规范（CSS Color Adjustment specification）定义了以下元数据名称：</p> + +<ul> + <li> + <p><code>color-scheme</code>: 指定与当前文档兼容的一种或多种配色方案。</p> + + <p>浏览器将优先采用此元数据的值，然后再使用用户的浏览器或设备设置，来确定页面上的各种默认颜色和元素外观，例如背景色、前景色、窗体控件和滚动条。<code><meta name="color-scheme"></code> 的主要用途是指示当前页面与浅色模式和深色模式的兼容性，以及选用这两种模式时的优先顺序。</p> + + <p><code>color-scheme</code> 的 {{htmlattrxref("content", "meta")}} 属性的值应当为以下值中的一个：</p> + + <dl> + <dt><code>normal</code></dt> + <dd>该文档未指定（unaware of）配色方案，应当仅使用默认配色进行渲染。</dd> + <dt>[<code>light</code> | <code>dark</code>]+</dt> + <dd>文档所支持的一种或多种配色方案。如果多次指定同一个配色方案，则与仅指定一次效果相同。如果指定了多种配色方案，则表示文档优先选择第一种方案——如果用户更倾向于选择第二种配色方案，则可以接受第二种。</dd> + <dt><code>only light</code></dt> + <dd>表示文档<em>仅</em>支持浅色模式，也就是浅色背景色和深色前景色。按照规范，<code>only dark</code> <em>是无效的</em>。如果在文档不支持深色模式的情况下强迫其以深色模式进行渲染，会导致内容不可读。所以，在未经配置的情况下，所有主要浏览器均默认使用浅色模式。</dd> + </dl> + + <p>For example, to indicate that a document prefers dark mode but does render functionally in light mode as well:</p> + + <pre class="brush: html notranslate"><meta name="color-scheme" content="dark light"></pre> + + <p>This works at the document level in the same way that the CSS {{cssxref("color-scheme")}} property lets individual elements specify their preferred and accepted color schemes. Your styles can adapt to the current color scheme using the {{cssxref("@media/prefers-color-scheme", "prefers-color-scheme")}} CSS media feature.</p> + </li> +</ul> + +<p>CSS 设备适配规范（CSS Device Adaptation specification）定义了以下元数据名称：</p> + +<ul> + <li><code>viewport</code>: 为{{glossary("viewport")}}（视口）的初始大小提供指示（hint）。目前仅用于移动设备。</li> + <li> + <table class="fullwidth-table"> + <caption><code><meta name="viewport"></code> 的 <code>content</code> 属性的值</caption> + <thead> + <tr> + <th scope="col">值</th> + <th scope="col">可能的附加值</th> + <th scope="col">描述</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>width</code></td> + <td>一个正整数，或者字符串 <code>device-width</code></td> + <td>定义 viewport 的宽度，如果值为正整数，则单位为像素。</td> + </tr> + <tr> + <td><code>height</code></td> + <td>一个正整数，或者字符串 <code>device-height</code></td> + <td>定义 viewport 的高度。未被任何浏览器使用。</td> + </tr> + <tr> + <td><code>initial-scale</code></td> + <td>一个 <code>0.0</code> 和 <code>10.0</code> 之间的正数</td> + <td>定义设备宽度（宽度和高度中更小的那个：如果是纵向屏幕，就是 <code>device-width</code>，如果是横向屏幕，就是 <code>device-height</code>）与 viewport 大小之间的缩放比例。</td> + </tr> + <tr> + <td><code>maximum-scale</code></td> + <td>一个 <code>0.0</code> 和 <code>10.0</code> 之间的正数</td> + <td>定义缩放的最大值，必须大于等于 <code>minimum-scale</code>，否则表现将不可预测。浏览器设置可以忽略此规则；iOS 10 开始，Safari iOS 默认忽略此规则。</td> + </tr> + <tr> + <td><code>minimum-scale</code></td> + <td>一个 <code>0.0</code> 和 <code>10.0</code> 之间的正数</td> + <td>定义缩放的最小值，必须小于等于 <code>maximum-scale</code>，否则表现将不可预测。浏览器设置可以忽略此规则；iOS 10 开始，Safari iOS 默认忽略此规则。</td> + </tr> + <tr> + <td><code>user-scalable</code></td> + <td><code>yes</code> 或者 <code>no</code></td> + <td>默认为 <code>yes</code>，如果设置为 <code>no</code>，用户将无法缩放当前页面。浏览器设置可以忽略此规则；iOS 10 开始，Safari iOS 默认忽略此规则。</td> + </tr> + <tr> + <td><code>viewport-fit</code></td> + <td><code>auto</code>、<code>contain</code> 或者 <code>cover</code></td> + <td> + <p>The <code>auto</code> value doesn’t affect the initial layout viewport, and the whole web page is viewable.</p> + + <p>The <code>contain</code> value means that the viewport is scaled to fit the largest rectangle inscribed within the display.</p> + + <p>The <code>cover</code> value means that the viewport is scaled to fill the device display. It is highly recommended to make use of the <a href="/zh-CN/docs/Web/CSS/env">safe area inset</a> variables to ensure that important content doesn't end up outside the display.</p> + </td> + </tr> + </tbody> + </table> + + <div class="note"><strong>备注：</strong> + + <ul> + <li>虽然此元数据条目未被标准化，但是，由于此条目在事实上处于支配地位，大多数移动浏览器都遵守此条目的声明。</li> + <li>不同设备和浏览器的默认值可能有不同。</li> + <li>若想了解 Firefox 移动版对此声明的支持和处理，请参考<a href="/zh-CN/docs/Mobile/Viewport_meta_tag" title="Mobile/Viewport meta tag">这篇文章</a>。</li> + </ul> + </div> + + <h5 id="关于_viewport_缩放的可访问性考量">关于 viewport 缩放的可访问性考量</h5> + + <div>将 <code>user-scalable</code> 设置为 <code>no</code> 会阻止一切意义上的缩放，视力不好的人可能会因此无法阅读和理解页面内容。</div> + + <ul> + <li><a href="/zh-CN/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.4_Make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background">MDN Understanding WCAG, Guideline 1.4 explanations</a></li> + <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-scale.html">Understanding Success Criterion 1.4.4 | W3C Understanding WCAG 2.0</a></li> + </ul> + + <h5 id="参见">参见</h5> + + <p><a href="/zh-CN/docs/Web/CSS/@viewport"><code>@viewport</code></a> CSS @ 规则。</p> + </li> +</ul> + +<h3 id="其他元数据名称">其他元数据名称</h3> + +<p>The <a class="external" href="https://wiki.whatwg.org/wiki/MetaExtensions">WHATWG Wiki MetaExtensions page</a> contains a large set of non-standard metadata names that have not been formally accepted yet; however, some of the names included there are already used quite commonly in practice — including the following:</p> + +<ul> + <li><code>creator</code>：当前文档的创建者，例如某个组织或者机构。如果有不止一个创建者，则应当使用多个名称为 <code>creator</code> 的 {{HTMLElement("meta")}} 元素。（而不是像关键词一样使用逗号分隔：关键词不应包含逗号，但创建者名称可能含有逗号。）</li> + <li><code>googlebot</code>：<code>robots</code> 的替代名称，只被 Googlebot（Google 的网页爬虫/索引搜寻器）使用。</li> + <li><code>publisher</code>：当前文档的发布者/出版者。</li> + <li><code>robots</code>：爬虫、协作搜寻器，或者“机器人”，对此页面的处理行为，或者说，应当遵守的规则。是一个使用逗号分隔的、由下列值构成的列表： + <table class="standard-table"> + <caption><code><meta name="robots"></code> 的 <code>content</code> 属性的值</caption> + <thead> + <tr> + <th scope="col">值</th> + <th scope="col">描述</th> + <th scope="col">被用于</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>index</code></td> + <td>允许机器人索引此页面（默认）。</td> + <td>所有爬虫</td> + </tr> + <tr> + <td><code>noindex</code></td> + <td>要求机器人不索引此页面。</td> + <td>所有爬虫</td> + </tr> + <tr> + <td><code>follow</code></td> + <td>允许机器人跟随此页面上的链接（默认）。</td> + <td>所有爬虫</td> + </tr> + <tr> + <td><code>nofollow</code></td> + <td>要求机器人不跟随此页面上的链接。</td> + <td>所有爬虫</td> + </tr> + <tr> + <td><code>all</code></td> + <td>与 <code>index, follow</code> 等价</td> + <td><a class="external" href="https://support.google.com/webmasters/answer/79812">Google</a></td> + </tr> + <tr> + <td><code>none</code></td> + <td>与 <code>noindex, nofollow</code> 等价</td> + <td><a class="external" href="https://support.google.com/webmasters/answer/79812">Google</a></td> + </tr> + <tr> + <td><code>noarchive</code></td> + <td>要求搜索引擎不缓存页面内容。</td> + <td><a class="external" href="https://developers.google.com/webmasters/control-crawl-index/docs/robots_meta_tag#valid-indexing--serving-directives">Google</a>、<a class="external" href="https://help.yahoo.com/kb/search-for-desktop/SLN2213.html">Yahoo</a>、<a class="external" href="https://www.bing.com/webmaster/help/which-robots-metatags-does-bing-support-5198d240">Bing</a></td> + </tr> + <tr> + <td><code>nosnippet</code></td> + <td>Prevents displaying any description of the page in search engine results.</td> + <td><a class="external" href="https://developers.google.com/webmasters/control-crawl-index/docs/robots_meta_tag#valid-indexing--serving-directives">Google</a>、<a class="external" href="https://www.bing.com/webmaster/help/which-robots-metatags-does-bing-support-5198d240">Bing</a></td> + </tr> + <tr> + <td><code>noimageindex</code></td> + <td>Requests this page not to appear as the referring page of an indexed image.</td> + <td><a class="external" href="https://developers.google.com/webmasters/control-crawl-index/docs/robots_meta_tag#valid-indexing--serving-directives">Google</a></td> + </tr> + <tr> + <td><code>nocache</code></td> + <td><code>noarchive</code> 的替代名称。</td> + <td><a class="external" href="https://www.bing.com/webmaster/help/which-robots-metatags-does-bing-support-5198d240">Bing</a></td> + </tr> + </tbody> + </table> + + <div class="note"><strong>备注：</strong> + + <ul> + <li>只有正规的爬虫/协作搜寻器/机器人遵守这些规则。不要指望爬取电子邮件地址的恶意爬虫也这么做。</li> + <li>只有访问相应的页面之后，机器人才能读取到这些规则。为避免这一点带来的带宽消耗，可以在 <em>{{Glossary("robots.txt")}}</em> 文件中声明一些规则。</li> + <li>如果你想从机器人的索引中移除某个页面，<code>noindex</code> 可以做到这一点，但机器人还是得先访问那个页面，读取到 <code>noindex</code> 规则。遇到这种情况时，请确保 <code>robots.txt</code> 文件没有阻止机器人重新访问那个页面。</li> + <li>一些规则是互相矛盾的比如 <code>index</code> 和 <code>noindex</code>，或者 <code>follow</code> 和 <code>nofollow</code>。这种情况下，机器人的表现是不可预测的，而且不同机器人的表现可能有不同。</li> + <li>一些爬虫机器人，比如 Google、Yahoo 和 Bing 的搜索引擎爬虫，支持在 HTTP <code>X-Robots-Tag</code> 请求头中应用相同的规则。这允许非 HTML 文档和文件等应用这些规则。</li> + </ul> + </div> + </li> +</ul> + +<h2 id="规范">规范</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">规范</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', '#standard-metadata-names', 'standard metadata names')}}</td> + </tr> + <tr> + <td>{{SpecName('CSS Color Adjust', '#color-scheme-meta', 'the "color-scheme" metadata name')}}</td> + </tr> + <tr> + <td>{{SpecName('CSS3 Device', '#viewport-meta', 'the "viewport" metadata name')}}</td> + </tr> + <tr> + <td>{{SpecName('Referrer Policy', '#referrer-policy-delivery-meta', 'the "referrer" metadata name')}}</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<div class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</div> + +<p>{{Compat("html.elements.meta.name")}}</p> diff --git a/files/zh-cn/web/html/element/meter/index.html b/files/zh-cn/web/html/element/meter/index.html new file mode 100644 index 0000000000..e5a26f656a --- /dev/null +++ b/files/zh-cn/web/html/element/meter/index.html @@ -0,0 +1,186 @@ +--- +title: <meter> +slug: Web/HTML/Element/meter +translation_of: Web/HTML/Element/meter +--- +<div>{{HTMLRef}}</div> + +<p><strong>HTML <code><meter>元素用来显示已知范围的标量值或者分数值。</code></strong> </p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/en-US/docs/HTML/Content_categories">Content categories</a></th> + <td><a href="/en-US/docs/HTML/Content_categories#Flow_content">Flow content</a>, <a href="/en-US/docs/HTML/Content_categories#Phrasing_content">phrasing content</a>, labelable content, palpable content.</td> + </tr> + <tr> + <th scope="row">Permitted content</th> + <td><a href="/en-US/docs/HTML/Content_categories#Phrasing_content">Phrasing content</a>, but there must be no <code><meter></code> element among its descendants.</td> + </tr> + <tr> + <th scope="row">Tag omission</th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th scope="row">Permitted parents</th> + <td>Any element that accepts <a href="/en-US/docs/HTML/Content_categories#Phrasing_content">phrasing content</a>.</td> + </tr> + <tr> + <th scope="row">Permitted ARIA roles</th> + <td>None</td> + </tr> + <tr> + <th scope="row">DOM interface</th> + <td>{{domxref("HTMLMeterElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="属性">属性</h2> + +<p>该元素包含所有的<a href="/en-US/docs/HTML/Global_attributes">全局属性</a>.</p> + +<dl> + <dt>{{htmlattrdef("value")}}</dt> + <dd>当前的数值。如果设置了最小值和最大值（分别由min属性和max属性定义），它必须介于最小值和最大值之间。如果没有指定或者格式有误，值即为0.如果给定的值不在最小值和最大值之间，它的值就等于它最接近的一端的值。 + <div class="note"><strong>使用备注: </strong>除非值域在0到1（闭区间）, 否则最小值和最大值属性需要定义，以保证value属性在值域范围内。换言之，默认的min和max值分别为0和1。</div> + </dd> + <dt>{{htmlattrdef("min")}}</dt> + <dd>值域的最小边界值。如果设置了，它必须比最大值要小。如果没设置，默认为0。</dd> + <dt>{{htmlattrdef("max")}}</dt> + <dd>值域的上限边界值。如果设置了，它必须比最小值要大。如果没设置，默认为1。</dd> + <dt>{{htmlattrdef("low")}}</dt> + <dd>定义了低值区间的上限值（译者注：如果value介于min和low之间，该元素就会表现出低值的视觉效果，value落在[min,low]、[high,max]等不同的区间会使浏览器渲染该元素时出不同的视觉效果）。如果设置了，它必须比最小值属性大，并且不能超过high值和最大值。未设置或者比最小值还要小时，其值即为最小值。</dd> + <dt>{{htmlattrdef("high")}}</dt> + <dd>定义了高值区间的下限值。如果设置了，它必须小于最大值，同时必须大于low值和最小值。如果没有设置，或者比最大值还大，其值即为最大值。</dd> + <dt>{{htmlattrdef("optimum")}}</dt> + <dd>这个属性用来指示最优/最佳取值。它必须在正确的值域内（由最小值属性和最大值属性定义）。当使用了low和high属性时，它指明哪一个取值范围是更好的。例如，假设它介于最小值和low之间，那么lower区间就被认为是更佳的取值范围。</dd> + <dt>{{htmlattrdef("form")}}</dt> + <dd>该属性将本元素与对应的form元素关联。例如，一个计量器可能用来显示某个数值输入框（input元素，number类型）的范围。只有当计量器元素被用作表单关联的元素时，该属性才应当被使用；即便如此，如果它作为表单的后代元素出现，它仍然有可能被省略。</dd> +</dl> + +<h2 id="示例">示例</h2> + +<h3 id="简单例子">简单例子</h3> + +<h4 id="HTML_content">HTML content</h4> + +<pre class="brush: html"><p>Heat the oven to <meter min="200" max="500" + value="350">350 degrees</meter>.</p> +</pre> + +<h4 id="输出">输出</h4> + +<p>{{EmbedLiveSample("Simple_example", 300, 60)}}</p> + +<p>在Google Chrome浏览器上, 计量器结果如下:</p> + +<p><img alt="meter1.png" class="default internal" src="/@api/deki/files/4940/=meter1.png"></p> + +<h3 id="高低值区间示例">高低值区间示例</h3> + +<p>注意本例中min属性被省略，这是允许的，默认值为0。</p> + +<h4 id="HTML_content_2">HTML content</h4> + +<pre class="brush: html"><p>He got a <meter low="69" high="80" max="100" + value="84">B</meter> on the exam.</p> +</pre> + +<h4 id="输出_2">输出</h4> + +<p>{{EmbedLiveSample("High_and_Low_range_example", 300, 60)}}</p> + +<p>Google Chrome浏览器中，计量器显示效果如下:</p> + +<p><img alt="meter2.png" class="default internal" src="/@api/deki/files/4941/=meter2.png"></p> + +<h2 id="规范">规范</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'forms.html#the-meter-element', '<meter>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'forms.html#the-meter-element', '<meter>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容">浏览器兼容</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Edge</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>6.0</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("16.0")}}</td> + <td>{{CompatNo}}</td> + <td>20<sup>[1]</sup></td> + <td>11.0</td> + <td>5.2</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Edge</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Edge Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("16.0")}}</td> + <td>{{CompatNo}}</td> + <td>20<sup>[1]</sup></td> + <td>11.0</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] See the <a href="https://developer.microsoft.com/en-us/microsoft-edge/platform/status/meterelement">Microsoft Edge Platform Status page</a>.</p> + +<h2 id="参见">参见</h2> + +<ul> + <li>{{HTMLElement("progress")}}</li> +</ul> diff --git a/files/zh-cn/web/html/element/multicol/index.html b/files/zh-cn/web/html/element/multicol/index.html new file mode 100644 index 0000000000..aa1d2fb6e0 --- /dev/null +++ b/files/zh-cn/web/html/element/multicol/index.html @@ -0,0 +1,18 @@ +--- +title: <multicol> +slug: Web/HTML/Element/multicol +tags: + - CSS Column +translation_of: Web/HTML/Element/multicol +--- +<div>{{non-standard_header}}</div> + +<h2 id="概要">概要</h2> + +<p>HTML<multicol> 元素是一个实验元素，旨在允许多列布局。它从来没有任何显着的牵引力，并没有在任何主流浏览器中实现。</p> + +<div class="note"> +<p>不要使用这个！<strong><em> </em></strong>为了实现多列布局，你应该使用常规的 HTML 元素，例如组合 {{HTMLElement("div")}} 和 <a href="/en-US/docs/Web/Guide/CSS/Using_multi-column_layouts" title="/en-US/docs/Web/CSS/columns">CSS 列</a> 特性。</p> +</div> + +<p>要注意， Firefox 22 之前，虽然不受支持， <code><multicol></code> 元素和 {{domxref("HTMLSpanElement")}} 相关。按照规定的要求，之后它被修复，并且现在和 {{domxref("HTMLUnknownElement")}} 相关。</p> diff --git a/files/zh-cn/web/html/element/nav/index.html b/files/zh-cn/web/html/element/nav/index.html new file mode 100644 index 0000000000..b40ac7921a --- /dev/null +++ b/files/zh-cn/web/html/element/nav/index.html @@ -0,0 +1,107 @@ +--- +title: <nav> +slug: Web/HTML/Element/nav +tags: + - HTML + - 元素 + - 导航 + - 链接 +translation_of: Web/HTML/Element/nav +--- +<div>{{HTMLRef}}</div> + +<p><strong>HTML <code><nav></code>元素</strong>表示页面的一部分，其目的是在当前文档或其他文档中提供导航链接。导航部分的常见示例是菜单，目录和索引。</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/nav.html", "tabbed-standard")}}</div> + +<p class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples </a> and send us a pull request.</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><dfn><a href="/zh-CN/docs/HTML/Content_categories" title="HTML/Content_categories">内容分类</a></dfn></th> + <td><a href="/zh-CN/docs/HTML/Content_categories#Flow_content" title="HTML/Content categories#Flow content">流式内容</a>, <a href="/zh-CN/docs/HTML/Content_categories#Sectioning_content" title="HTML/Content categories#Sectioning_content">区块内容</a>, 可视的内容.</td> + </tr> + <tr> + <th scope="row"><dfn>允许的内容</dfn></th> + <td><a href="/zh-CN/docs/HTML/Content_categories#Flow_content" title="HTML/Content categories#Flow content">流式内容</a>.</td> + </tr> + <tr> + <th scope="row"><dfn>忽略的标记</dfn></th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th scope="row"><dfn>允许的父元素</dfn></th> + <td>所有允许<a href="/zh-CN/docs/HTML/Content_categories#Flow_content" title="HTML/Content categories#Flow content">流式内容</a>的元素</td> + </tr> + <tr> + <th scope="row"><dfn>允许的</dfn> ARIA roles</th> + <td>None</td> + </tr> + <tr> + <th scope="row"><dfn>DOM 接口</dfn></th> + <td>{{domxref("HTMLElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="属性">属性</h2> + +<p><span style="line-height: 21px;">这个元素只包含</span><a href="https://developer.mozilla.org/zh-CN/docs/HTML/Global_attributes" style="line-height: 21px;" title="HTML/Global attributes">全局属性</a><span style="line-height: 21px;">.</span></p> + +<h2 id="使用说明"><em>使用说明</em></h2> + +<ul> + <li>并不是所有的链接都必须使用<code><nav></code>元素,它只用来将一些热门的链接放入导航栏,例如{{HTMLElement("footer")}}元素就常用来在页面底部包含一个不常用到,没必要加入{{HTMLElement("nav")}}的链接列表.</li> + <li>一个网页也可能含有多个{{HTMLElement("nav")}}元素,例如一个是网站内的导航列表,另一个是本页面内的导航列表.</li> + <li>对于屏幕阅读障碍的人,可以使用这个元素来确定是否忽略初始内容.</li> +</ul> + +<h2 id="示例">示例</h2> + +<pre class="brush:xml"><nav> + <ul> + <li><a href="#">Home</a></li> + <li><a href="#">About</a></li> + <li><a href="#">Contact</a></li> + </ul> +</nav> +</pre> + +<h2 id="Specifications" name="Specifications">规范</h2> + +<table class="standard-table" style="height: 137px; width: 603px;"> + <thead> + <tr> + <th scope="col">规范</th> + <th scope="col">状态</th> + <th scope="col">注释</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'sections.html#the-nav-element', '<nav>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'sections.html#the-nav-element', '<nav>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容">浏览器兼容</h2> + +<p>{{Compat("html.elements.nav")}}</p> + +<h2 id="更多">更多</h2> + +<ul> + <li>其他部分相关元素: {{HTMLElement("body")}}, {{HTMLElement("article")}}, {{HTMLElement("section")}}, {{HTMLElement("aside")}}, {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}}, {{HTMLElement("hgroup")}}, {{HTMLElement("header")}}, {{HTMLElement("footer")}}, {{HTMLElement("address")}};</li> + <li class="last"><a class="deki-ns current" href="/zh-CN/docs/Sections_and_Outlines_of_an_HTML5_document" title="Sections and Outlines of an HTML5 document">HTML5的文档节段和纲要</a>.</li> + <li><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/Navigation_Role">ARIA: Navigation role</a></li> +</ul> + +<div></div> diff --git a/files/zh-cn/web/html/element/nextid/index.html b/files/zh-cn/web/html/element/nextid/index.html new file mode 100644 index 0000000000..bde667b996 --- /dev/null +++ b/files/zh-cn/web/html/element/nextid/index.html @@ -0,0 +1,140 @@ +--- +title: '<nextid>: 下一个ID元素（已过时）' +slug: Web/HTML/Element/nextid +tags: + - HTML + - 元素 + - 参考 + - 网页 +translation_of: Web/HTML/Element/nextid +--- +<div>{{Deprecated_header}}</div> + +<p><span class="seoSummary"><strong><code><nextid></code></strong> 是一个过时的HTML元素，用于使NeXT网页设计工具为其锚点生成自动的NAME标签。 它是由该Web编辑工具自动生成的，不需要手动调整或输入。 通过从HTML版本的官方公共DTD中删除，此元素的区别在于它是第一个成为“丢失标签”之一的元素。 它也可能是所有早期HTML元素中最少被了解的之一。</span></p> + +<dl> + <dt>HTML "0.a" - 从开始到1991年1月10日</dt> + <dd>该标签尚未发明，因此在此期间未发现任何示例。</dd> + <dt>HTML "0.c" - 从1991年1月23日至1992年11月23日</dt> + <dd>HTML的此早期版本以非SGML兼容形式引入了<code><NEXTID></code>该形式仅将数字值单独用作“属性”。 </dd> + <dt>HTML "0.d" - 从1992年11月26日到1993年5月24日</dt> + <dd>在此跨度内，NeXT和尚存的最早的DTD表示<code><NEXTID></code> 仅对其新引入的属性N的值取一个数字。</dd> + <dt>HTML "1.k" - 版本1（第一版）</dt> + <dd>在HTML的第一个初稿中，<code><NEXTID></code> 与HTML 2相同，最终允许使用名称代替其属性值仅使用数字。</dd> + <dt>HTML "1.m" - 版本1（第二版）</dt> + <dd>在下一个发布的HTML草案中，可以使用简单的SGML命令分别取消选择<code><NEXTID></code> <code><NEXTID></code> 进行显示。</dd> + <dt>HTML 第2版第1级</dt> + <dd>这类似于2级默认值，但不包括所有表单元素。 i. e. <code><FORM></code>, <code><INPUT></code>, <code><TEXTAREA></code>, <code><SELECT></code>, 和 <code><OPTION></code></dd> + <dt>HTML 版本2严格级别1</dt> + <dd>这类似于常规的1级，但它也排除了这些折旧的元素以及诸如在链接(<code><A></code> 内嵌套标头（<code><H*></code> 元素）之类的构造。</dd> + <dt>HTML 第2版第2级</dt> + <dd>这是默认设置，包括并允许所有HTML 2级功能以及元素和属性</dd> + <dt>HTML 第2版严格级别2</dt> + <dd>这不包括这些已贬值的元素，也禁止诸如在链接 (<code><A>元素内嵌套标头</code>(<code><H*></code> 元素），或者有一个表单 <code><INPUT></code> 元素，它不在一个块级别中的元素如 <code><P></code>中。</dd> + <dt>HTML 版本3.2</dt> + <dd><code><NEXTID></code> 完全消失了，再也不会被听到。.</dd> +</dl> + +<h2 id="属性">属性</h2> + +<p>像所有其他HTML元素一样，此元素接受<a href="/en-US/docs/HTML/Global_attributes">全局属性</a>。</p> + +<dl> + <dt>{{htmlattrdef("n")}}</dt> + <dd>参考锚点。</dd> +</dl> + +<h2 id="例子">例子</h2> + +<p>用户在目录中输入四个部分标题（并且大概也在这些部分中编写段落材料）。 四个部分中每个部分的标题将被分配名称值“ z0”，“ z1”，“ z2”和“ z3”。 其中第一个将在目录中产生如下条目：<code><A NAME="z0" HREF="#z4">FIRST SECTION NAME</A></code> 并且节标题将被标记为： <code><H2><A NAME="z4">FIRST SECTION NAME</A></H2></code>. 接下来的三个部分z5，z6和z7（以及名为z1，z2和z3的目录条目）将继续这三个部分，每个部分都会自动使用这些名称来指定锚点。然后，用户保存并关闭文档。 然后，NeXT将在HTML文档的标头中添加一个特殊标记 <code><NEXTID N="z8"></code>, 以告知在何处继续其命名约定。 想象一下，网络作者打开了文档进行进一步编辑。 他们想在第二部分之后添加几个新的部分，并在末尾追加四个部分。 打开文档时，NeXT编辑器会找到并读取此 <code><NEXTID N="z8"></code>标记， 并且现在知道将这些新节中的第一个命名为目录中的z8，并将z14命名为内容主体。 可能看起来像这样：</p> + +<pre class="brush: html"><HTML> + <HEAD> + <TITLE> ... whatever ... </TITLE> + <LINK, META, BASE, etc. as applicable for the head of this document> + <NEXTID N="z20"> + </HEAD> + + <BODY> + <A NAME="z0" HREF="#z4">FIRST SECTION HEADING</A> + <A NAME="z1" HREF="#z5">SECOND SECTION HEADING</A> + <A NAME="z8" HREF="#z14">NEWLY INSERTED THIRD SECTION HEADING</A> + <A NAME="z9" HREF="#z15">NEWLY INSERTED FOURTH SECTION HEADING</A> + <A NAME="z2" HREF="#z6">ORIGINAL THIRD (NOW FIFTH) SECTION HEADING</A> + <A NAME="z3" HREF="#z7">ORIGINAL FOURTH (NOW SIXTH) SECTION HEADING</A> + <A NAME="z10" HREF="#z16">SEVENTH SECTION HEADING</A> + <A NAME="z11" HREF="#z17">EIGHTH SECTION HEADING</A> + <A NAME="z12" HREF="#z18">NINTH SECTION HEADING</A> + <A NAME="z13" HREF="#z19">TENTH SECTION HEADING</A> + <H2><A NAME="z4">FIRST SECTION HEADING</A></H1><P> ... whatever ... </P> + <H2><A NAME="z5">SECOND SECTION HEADING</A></H1><P> ... whatever ... </P> + <H2><A NAME="z14">NEWLY INSERTED THIRD SECTION HEADING</A></H1><P> ... whatever ... </P> + <H2><A NAME="z15">NEWLY INSERTED FOURTH SECTION HEADING</A></H1><P> ... whatever ... </P> + <H2><A NAME="z6">ORIGINAL THIRD (NOW FIFTH) SECTION HEADING</A></H1><P> ... whatever ... </P> + <H2><A NAME="z7">ORIGINAL FOURTH (NOW SIXTH) SECTION HEADING</A></H1><P> ... whatever ... </P> + <H2><A NAME="z16">SEVENTH SECTION HEADING</A></H1><P> ... whatever ... </P> + <H2><A NAME="z17">EIGHTH SECTION HEADING</A></H1><P> ... whatever ... </P> + <H2><A NAME="z18">NINTH SECTION HEADING</A></H1><P> ... whatever ... </P> + <H2><A NAME="z19">TENTH SECTION HEADING</A></H1><P> ... whatever ... </P> + </BODY> +</HTML> +</pre> + +<p>然后，他们使用NeXT编辑器将该文档的副本转发给某人，并删除z7和z19节，从z20到z29添加十个节，然后删除z24和z29段。 因此，返回修改后的NEXTID值是z30：</p> + +<pre class="brush: html"><HTML> + <HEAD> + <TITLE> ... whatever ... </TITLE> + <LINK, META, BASE, etc. as applicable for the head of this document> + <NEXTID N="z30"> + </HEAD> + + <BODY> + <A NAME="z0" HREF="#z4">FIRST SECTION HEADING</A> + <A NAME="z1" HREF="#z5">SECOND SECTION HEADING</A> + <A NAME="z8" HREF="#z14">NEWLY INSERTED THIRD SECTION HEADING</A> + <A NAME="z9" HREF="#z15">NEWLY INSERTED FOURTH SECTION HEADING</A> + <A NAME="z2" HREF="#z6">ORIGINAL THIRD (NOW FIFTH) SECTION HEADING</A> + <A NAME="z10" HREF="#z16">SEVENTH (NOW SIXTH) SECTION HEADING</A> + <A NAME="z11" HREF="#z17">EIGHTH (NOW SEVENTH) SECTION HEADING</A> + <A NAME="z12" HREF="#z18">NINTH (NOW EIGHTH) SECTION HEADING</A> + <A NAME="z20" HREF="#z25">NEW NINTH SECTION HEADING</A> + <A NAME="z21" HREF="#z26">NEW TENTH SECTION HEADING</A> + <A NAME="z22" HREF="#z27">NEW ELEVENTH SECTION HEADING</A> + <A NAME="e23" HREF="#z28">NEW TWELFTH SECTION HEADING</A> + <H2><A NAME="z4">FIRST SECTION HEADING</A></H1><P> ... whatever ... </P> + <H2><A NAME="z5">SECOND SECTION HEADING</A></H1><P> ... whatever ... </P> + <H2><A NAME="z14">NEWLY INSERTED THIRD SECTION HEADING</A></H1><P> ... whatever ... </P> + <H2><A NAME="z15">NEWLY INSERTED FOURTH SECTION HEADING</A></H1><P> ... whatever ... </P> + <H2><A NAME="z6">ORIGINAL THIRD (NOW FIFTH) SECTION HEADING</A></H1><P> ... whatever ... </P> + <H2><A NAME="z16">SEVENTH (NOW SIXTH) SECTION HEADING</A></H1><P> ... whatever ... </P> + <H2><A NAME="z17">EIGHTH (NOW SEVENTH) SECTION HEADING</A></H1><P> ... whatever ... </P> + <H2><A NAME="z18">NINTH (NOW EIGHTH) SECTION HEADING</A></H1><P> ... whatever ... </P> + <H2><A NAME="z25">NEW NINTH SECTION HEADING</A></H1><P> ... whatever ... </P> + <H2><A NAME="z26">NEW TENTH SECTION HEADING</A></H1><P> ... whatever ... </P> + <H2><A NAME="z27">NEW ELENENTH SECTION HEADING</A></H1><P> ... whatever ... </P> + <H2><A NAME="z28">NEW TWELFTH SECTION HEADING</A></H1><P> ... whatever ... </P> + </BODY> +</HTML> +</pre> + +<h2 id="HTML_参考">HTML 参考</h2> + +<ul> + <li><a class="external text" href="http://www.the-pope.com/nextid.html" rel="nofollow">工作 NEXTID 标签元素实例</a></li> + <li><a class="external text" href="https://tools.ietf.org/html/rfc1866#section-5.2.6" rel="nofollow">5.2.6. 下一个ID: NEXTID</a></li> +</ul> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<div class="hidden">此页面中的兼容性表是根据结构化数据生成的。 如果您想贡献数据，请查看<a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> 并向我们发送请求请求。</div> + +<p>{{Compat("html.elements.nextid")}}</p> + +<h2 id="另请详见">另请详见</h2> + +<ul> + <li>{{HTMLElement("isindex")}}</li> +</ul> + +<p>{{HTMLRef}}</p> diff --git a/files/zh-cn/web/html/element/nobr/index.html b/files/zh-cn/web/html/element/nobr/index.html new file mode 100644 index 0000000000..0e6fdd2286 --- /dev/null +++ b/files/zh-cn/web/html/element/nobr/index.html @@ -0,0 +1,21 @@ +--- +title: <nobr> +slug: Web/HTML/Element/nobr +translation_of: Web/HTML/Element/nobr +--- +<div>{{non-standard_header}}</div> + +<h2 id="Summary" name="Summary">概述</h2> + +<p><span class="seoSummary"> HTML <code><nobr></code> 元素阻止文本自动拆分成新行，所以它展示为长的一行，可能还需要滚动。这个标签不是标准的 HTML，并且不应该使用。反之应该使用 CSS 属性</span> {{Cssxref("white-space")}}，像这样：</p> + +<pre class="brush:css"><span style="white-space: nowrap">Long line with no breaks</span></pre> + +<h2 id="See_also" name="See_also">另见</h2> + +<ul> + <li>{{Cssxref("white-space")}}</li> + <li>{{Cssxref("overflow")}}</li> +</ul> + +<div>{{HTMLRef}}</div> diff --git a/files/zh-cn/web/html/element/noembed/index.html b/files/zh-cn/web/html/element/noembed/index.html new file mode 100644 index 0000000000..2d199e4f23 --- /dev/null +++ b/files/zh-cn/web/html/element/noembed/index.html @@ -0,0 +1,29 @@ +--- +title: <noembed> +slug: Web/HTML/Element/noembed +translation_of: Web/HTML/Element/noembed +--- +<div>{{HTMLRef}}{{Non-standard_header}}{{deprecated_header}}</div> + +<p><span class="seoSummary"><code><strong><noembed></strong></code> 元素是个废除的和不标准的方式，用于向不支持 {{HTMLElement("embed")}} ，或者不支持作者希望的 <a href="/en-US/docs/Web/Guide/HTML/Content_categories#Embedded_content">嵌入式内容</a> 的浏览器提供替代（或者“后备”）内容。这个元素在 HTML 4.01 起废除，以支持</span> {{HTMLElement("object")}}。<span class="seoSummary">后备</span>内容应该插在 {{HTMLElement("object")}} 的开始和结束标签之间。</p> + +<div class="note"> +<p>虽然这个元素仍旧在许多浏览器中有效，它已经废除了，并且不应使用。使用 {{HTMLElement("object")}} 来代替。</p> +</div> + +<h2 id="规范">规范</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', '#noembed', '<noembed>')}}</td> + <td>{{ Spec2('HTML WHATWG') }}</td> + <td>Non-conforming feature.</td> + </tr> + </tbody> +</table> diff --git a/files/zh-cn/web/html/element/noframes/index.html b/files/zh-cn/web/html/element/noframes/index.html new file mode 100644 index 0000000000..72b76948bd --- /dev/null +++ b/files/zh-cn/web/html/element/noframes/index.html @@ -0,0 +1,33 @@ +--- +title: <noframes> +slug: Web/HTML/Element/noframes +translation_of: Web/HTML/Element/noframes +--- +<h2 id="概述">概述</h2> + +<p><code><noframes></code> 是个 HTML 元素，用于支持不支持 {{HTMLElement("frame")}} 元素的浏览器，或者这样配置的浏览器。</p> + +<p>你可以在 <code><noframes></code> 中使用任何 HTML 元素，它预期可以在 {{HTMLElement("body")}} 中看到，除了 {{HTMLElement("frameset")}} 和 {{HTMLElement("frame")}} 元素。</p> + +<div class="note"><strong>注：</strong>由于所有主流浏览器都支持帧，这个元素一般不需要使用。它也在 HTML5 中完全过时，并且应该避免使用，来遵循标准。</div> + +<h2 id="属性">属性</h2> + +<p>就像其它 HTML 元素那样，这个元素支持 <a href="/en-US/HTML/Global_attributes" title="HTML/Global attributes">全局属性</a>。</p> + +<h2 id="示例">示例</h2> + +<pre class="brush:html"><frameset cols="50%,50%"> + <frame src="https://developer.mozilla.org/en/HTML/Element/frameset" /> + <frame src="https://developer.mozilla.org/en/HTML/Element/frame" /> + <noframes><p>It seems your browser does not support frames or is not configured do so.</p></noframes> +</frameset></pre> + +<h2 id="另见">另见</h2> + +<ul> + <li>{{HTMLElement("frameset")}}</li> + <li>{{HTMLElement("frame")}}</li> +</ul> + +<p>{{HTMLRef}}</p> diff --git a/files/zh-cn/web/html/element/noscript/index.html b/files/zh-cn/web/html/element/noscript/index.html new file mode 100644 index 0000000000..295bff18ef --- /dev/null +++ b/files/zh-cn/web/html/element/noscript/index.html @@ -0,0 +1,101 @@ +--- +title: <noscript> +slug: Web/HTML/Element/noscript +tags: + - <noscript> +translation_of: Web/HTML/Element/noscript +--- +<div>{{HTMLRef}}</div> + +<p>如果页面上的脚本类型不受支持或者当前在浏览器中关闭了脚本，则在 <strong>HTML <noscript> 元素</strong>中定义脚本未被执行时的替代内容。</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/en-US/docs/HTML/Content_categories" title="HTML/Content_categories">内容分类</a></th> + <td><a href="/en-US/docs/HTML/Content_categories#Metadata_content" title="HTML/Content_categories#Metadata_content">Metadata content</a>, <a href="/en-US/docs/HTML/Content_categories#Flow_content" title="HTML/Content categories#Flow content">flow content</a>, <a href="/en-US/docs/HTML/Content_categories#Phrasing_content" title="HTML/Content categories#Phrasing content">phrasing content</a>.</td> + </tr> + <tr> + <th scope="row">允许的内容</th> + <td> + <p>当脚本被禁用并且它是 {{HTMLElement("head")}}元素的后代时：以下顺序任意，零个或者多个{{HTMLElement("link")}}元素，零个或者多个{{HTMLElement("style")}}元素，零个或者多个{{HTMLElement("meta")}}元素。</p> + + <p>当脚本被禁用并且它不是 {{HTMLElement("head")}} 元素的子元素时：任何transparent content 都可以，但是在它的后代中必须没有 <code><noscript></code>元素。</p> + + <p>否则：flow content 或 phrasing content 。</p> + </td> + </tr> + <tr> + <th scope="row">标签省略</th> + <td> + <p>不允许，开始标签和结束标签都不能省略。</p> + </td> + </tr> + <tr> + <th scope="row">允许的父元素</th> + <td> + <p>如果没有根元素 <code><noscript></code>，或者在{{HTMLElement("head")}}元素中（仅用于HTML文档）也没有根元素 <code><noscript></code>，允许任何 <a href="/en-US/docs/HTML/Content_categories#Phrasing_content" title="HTML/Content_categories#Phrasing_content">phrasing content</a> 元素。</p> + </td> + </tr> + <tr> + <th scope="row">DOM接口</th> + <td>{{domxref("HTMLElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="属性">属性</h2> + +<p><span style="line-height: 21px;">该元素只包含 </span><a href="https://developer.mozilla.org/en-US/docs/HTML/Global_attributes" style="line-height: 21px;" title="HTML/Global attributes">全局属性</a><span style="line-height: 21px;">.</span></p> + +<h2 id="示例">示例</h2> + +<pre class="brush: html"><noscript> + <!-- anchor linking to external file --> + <a href="http://www.mozilla.com/">External Link</a> +</noscript> +<p>Rocks!</p> +</pre> + +<h3 id="允许脚本时的结果">允许脚本时的结果</h3> + +<p>Rocks!</p> + +<h3 id="禁用脚本时的结果">禁用脚本时的结果</h3> + +<p><a class="external" href="http://www.mozilla.com/">External Link</a></p> + +<p>Rocks!</p> + +<h2 id="Specifications" name="Specifications"><font>规范</font></h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'scripting-1.html#the-noscript-element', '<noscript>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'scripting-1.html#the-noscript-element', '<noscript>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'interact/scripts.html#h-18.3.1', '<noscript>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性"><font>浏览器兼容性</font></h2> + +<p>{{Compat("html.elements.noscript")}}</p> diff --git a/files/zh-cn/web/html/element/object/index.html b/files/zh-cn/web/html/element/object/index.html new file mode 100644 index 0000000000..e11fa6b51a --- /dev/null +++ b/files/zh-cn/web/html/element/object/index.html @@ -0,0 +1,120 @@ +--- +title: <object> +slug: Web/HTML/Element/object +tags: + - Element + - HTML + - Web +translation_of: Web/HTML/Element/object +--- +<h2 id="概要">概要</h2> + +<p>{{HTMLRef}}<br> + <strong>HTML <code><object></code> 元素</strong>（或者称作 <em>HTML 嵌入对象元素</em>）表示引入一个外部资源，这个资源可能是一张图片，一个嵌入的浏览上下文，亦或是一个插件所使用的资源。</p> + +<p> </p> + +<p>{{EmbedInteractiveExample("pages/tabbed/object.html", "tabbed-standard")}}</p> + +<p> </p> + +<ul class="htmlelt"> + <li><dfn><a href="/en-US/docs/HTML/Content_categories" title="HTML/Content_categories">内容分类</a></dfn> <a href="/en-US/docs/HTML/Content_categories#Flow_content" title="HTML/Content categories#Flow content">Flow content</a>; <a href="/en-US/docs/HTML/Content_categories#Phrasing_content" title="HTML/Content categories#Phrasing content">phrasing content</a>; <a href="/en-US/docs/HTML/Content_categories#Embedded_content" title="HTML/Content categories#Embedded content">embedded content</a>, palpable content; if the element has a <strong>usemap</strong> attribute, <a href="/en-US/docs/HTML/Content_categories#Interactive_content" title="HTML/Content categories#Interactive content">interactive content</a>; <a href="/en-US/docs/HTML/Content_categories#Form_listed" title="HTML/Content categories#Form listed">listed</a>, <a href="/en-US/docs/HTML/Content_categories#Form_submittable" title="HTML/Content categories#Form submittable">submittable</a> <a href="/en-US/docs/HTML/Content_categories#Form-associated_content" title="HTML/Content categories#Form-associated content">form-associated</a> element.</li> + <li><dfn>允许内容</dfn> zero or more {{HTMLElement("param")}} elements, then <a href="/en-US/docs/HTML/Content_categories#Transparent_content_models" title="HTML/Content categories#Transparent content models">Transparent content</a>.</li> + <li><dfn>标签闭合</dfn> {{no_tag_omission}}</li> + <li><dfn>允许的父级元素</dfn> Any element that accepts <a href="/en-US/docs/HTML/Content_categories#Embedded_content" title="HTML/Content categories#Embedded content">embedded content</a>.</li> + <li><dfn>DOM 接口</dfn> {{domxref("HTMLObjectElement")}}</li> +</ul> + +<h2 id="属性">属性</h2> + +<p><span style="line-height: 21px;">元素包含</span><a href="https://developer.mozilla.org/en-US/docs/HTML/Global_attributes" style="line-height: 21px;" title="HTML/Global attributes">全局属性</a><span style="line-height: 21px;">。</span></p> + +<dl> + <dt>{{htmlattrdef("archive")}} {{HTMLVersionInline(4)}} only; {{obsoleteGeneric('inline','HTML5')}}</dt> + <dd>用来指名对象资源列表的以空格分隔的 URI 列表。</dd> + <dt>{{htmlattrdef("border")}} {{deprecatedGeneric('inline','HTML4.01')}}; {{obsoleteGeneric('inline','HTML5')}}</dt> + <dd>元素周围的边框的宽度，单位为像素。</dd> + <dt>{{htmlattrdef("classid")}} {{HTMLVersionInline(4)}} only; {{obsoleteGeneric('inline','HTML5')}}</dt> + <dd>对象实现的 URI，可以同时与 <strong>data</strong> 属性使用，或者使用 <strong>data</strong> 属性替代。</dd> + <dt>{{htmlattrdef("codebase")}} {{HTMLVersionInline(4)}} only; {{obsoleteGeneric('inline','HTML5')}}</dt> + <dd>解析 <strong>classid</strong>，<strong>data</strong> 或者 <strong>archive</strong> 中定义的相对路径的根路径，如果没有定义，默认为当前文档的 base URI。</dd> + <dt>{{htmlattrdef("codetype")}} {{HTMLVersionInline(4)}} only; {{obsoleteGeneric('inline','HTML5')}}</dt> + <dd><strong>classid</strong> 定义的 data 的内容类型。</dd> + <dt>{{htmlattrdef("data")}}</dt> + <dd>一个合法的 URL 作为资源的地址，，需要为 <strong>data</strong> 和 <strong>type </strong>中至少一个设置值。</dd> + <dt>{{htmlattrdef("declare")}} {{HTMLVersionInline(4)}} only; {{obsoleteGeneric('inline','HTML5')}}</dt> + <dd>取值为布尔的属性可以设置这个元素为仅声明的格式。对象必须被随后的 <code><object> 元素实例化。在</code> HTML5 中，完整的重复 <object> 元素，可以重用元素。</dd> + <dt>{{htmlattrdef("form")}} {{HTMLVersionInline(5)}}</dt> + <dd>对象元素关联的 form 元素（属于的 form）。 取值必须是同一文档下的一个 {{HTMLElement("form")}} 元素的 ID。</dd> + <dt>{{htmlattrdef("height")}}</dt> + <dd>资源显示的高度，单位是 CSS 像素。</dd> + <dt>{{htmlattrdef("name")}}</dt> + <dd>浏览上下文名称（HTML5），或者控件名称（HTML 4）。</dd> + <dt>{{htmlattrdef("standby")}} {{HTMLVersionInline(4)}} only; {{obsoleteGeneric('inline','HTML5')}}</dt> + <dd>对象的实现和数据加载过程中，浏览器可以显示的信息。</dd> + <dt>{{htmlattrdef("tabindex")}} {{HTMLVersionInline(4)}} only; {{obsoleteGeneric('inline','HTML5')}}</dt> + <dd>当前元素在文档 Tab 导航中的顺序。</dd> + <dt>{{htmlattrdef("type")}}</dt> + <dd><strong>data</strong> 指定的资源的 MIME 类型，需要为 <strong>data</strong> 和 <strong>type </strong>中至少一个设置值。</dd> + <dt>{{htmlattrdef("usemap")}}</dt> + <dd>指向一个 {{HTMLElement("map")}} 元素的 hash-name；格式为 ‘#’ 加 map 元素 {{htmlattrxref("name", "map")}} 元素的值。</dd> + <dt>{{htmlattrdef("width")}}</dt> + <dd>资源显示的宽度，单位是 CSS 像素。</dd> +</dl> + +<h2 id="示例">示例</h2> + +<pre class="brush: html"><!-- Embed a flash movie --> +<object data="move.swf" type="application/x-shockwave-flash"></object> + +<!-- Embed a flash movie with parameters --> +<object data="move.swf" type="application/x-shockwave-flash"> + <param name="foo" value="bar"> +</object> +</pre> + +<h2 id="Specifications" name="Specifications">规范</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'the-iframe-element.html#the-object-element', '<object>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'the-object-element.html#the-object-element', '<object>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'objects.html#h-13.3', '<object>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<p>{{Compat("html.elements.object")}}</p> + +<p> </p> + +<h2 id="参阅">参阅</h2> + +<ul> + <li>{{HTMLElement("applet")}} {{Obsolete_Inline}}</li> + <li>{{HTMLElement("embed")}}</li> + <li>{{HTMLElement("param")}}</li> +</ul> + +<p> </p> diff --git a/files/zh-cn/web/html/element/ol/index.html b/files/zh-cn/web/html/element/ol/index.html new file mode 100644 index 0000000000..c5791a8322 --- /dev/null +++ b/files/zh-cn/web/html/element/ol/index.html @@ -0,0 +1,232 @@ +--- +title: <ol> +slug: Web/HTML/Element/ol +tags: + - Element + - HTML + - HTML grouping content + - 'HTML:Flow content' + - Reference + - 元素 + - 列表 + - 参考 +translation_of: Web/HTML/Element/ol +--- +<div>{{HTMLRef}}</div> + +<p><strong>HTML <code><ol></code> 元素</strong>表示有序列表，通常渲染为一个带编号的列表。</p> + +<p>{{EmbedInteractiveExample("pages/tabbed/ol.html", "tabbed-shorter")}}</p> + +<p class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples </a> and send us a pull request.</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/en-US/docs/HTML/Content_categories">内容类别</a></th> + <td><a href="/en-US/docs/HTML/Content_categories#Flow_content">Flow content</a>, and if the <code><ol></code> element's children include at least one {{HTMLElement("li")}} element, <a href="/en-US/docs/Web/Guide/HTML/Content_categories#Palpable_content">palpable content</a>.</td> + </tr> + <tr> + <th scope="row">允许的内容</th> + <td>Zero or more {{ HTMLElement("li") }}, {{HTMLElement("script")}} and {{HTMLElement("template")}} elements.</td> + </tr> + <tr> + <th scope="row">标签省略</th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th scope="row">允许的父级</th> + <td>Any element that accepts <a href="/en-US/docs/Web/Guide/HTML/Content_categories#Flow_content">flow content</a>.</td> + </tr> + <tr> + <th scope="row">隐含的 ARIA 角色</th> + <td><code><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/List_role">list</a></code></td> + </tr> + <tr> + <th scope="row">允许的 ARIA 角色</th> + <td>{{ARIARole("directory")}}, {{ARIARole("group")}}, {{ARIARole("listbox")}}, {{ARIARole("menu")}}, {{ARIARole("menubar")}}, {{ARIARole("none")}}, {{ARIARole("presentation")}}, {{ARIARole("radiogroup")}}, {{ARIARole("tablist")}}, {{ARIARole("toolbar")}}, {{ARIARole("tree")}}</td> + </tr> + <tr> + <th scope="row">DOM 接口</th> + <td>{{DOMxRef("HTMLOListElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="属性">属性</h2> + +<p>此元素支持<a href="/en-US/docs/HTML/Global_attributes">全局属性</a>。</p> + +<dl> + <dt>{{htmlattrdef("reversed")}}</dt> + <dd>此布尔值属性指定列表中的条目是否是倒序排列的，即编号是否应从高到低反向标注。</dd> + <dt>{{htmlattrdef("start")}}</dt> + <dd>一个整数值属性，指定了列表编号的起始值。此属性的值应为阿拉伯数字，尽管列表条目的编号类型 <code>type</code> 属性可能指定为了罗马数字编号等其他类型的编号。比如说，想要让元素的编号从英文字母 "d" 或者罗马数字 "iv" 开始，都应当使用 <code>start="4"</code>。 + <div class="note"><strong>Note</strong>: 这个属性在 HTML4中弃用，但是在 HTML5 中被重新引入。</div> + </dd> + <dt>{{htmlattrdef("type")}}</dt> + <dd>设置编号的类型： + <ul> + <li><code>a</code> 表示小写英文字母编号</li> + <li><code>A</code> 表示大写英文字母编号</li> + <li><code>i</code> 表示小写罗马数字编号</li> + <li><code>I</code> 表示大写罗马数字编号</li> + <li><code>1</code> 表示数字编号（默认）</li> + </ul> + + <p>编号类型适用于整个列表，除非在 <code><ol></code> 元素的 {{HTMLElement("li")}} 元素中使用不同的 {{HTMLAttrxRef("type", "li")}} 属性。</p> + + <div class="note"><strong>Note: </strong>这个属性在 HTML4中弃用，但是在 HTML5 中被重新引入。除非列表中序号很重要（比如，在法律或者技术文件中条目通常被需要所引用），否则请使用 CSS {{cssxref("list-style-type")}} 属性替代。</div> + </dd> +</dl> + +<h2 id="使用备注">使用备注</h2> + +<p>通常，有序列表的条目会和它前面的编号<a href="/en-US/docs/Web/CSS/::marker">标记</a>一起显示，编号标记可以是数字或者字母。</p> + +<p><code><ol></code> 和 {{HTMLElement("ul")}} 元素两者可以无限嵌套，既可以同类嵌套，也可以互相嵌套。</p> + +<p><code><ol></code> 和 {{HTMLElement("ul")}} 元素都表示列表。区别在于，<code><ol></code> 元素的有序列表的顺序是有意义的。举一些例子：</p> + +<ul> + <li>烹饪食谱中的各个步骤</li> + <li>指路时的各处转弯方向</li> + <li>营养信息标签上 按含量排序的成分列表</li> +</ul> + +<p>至于如何确定该选择哪一个列表元素，可以尝试更改列表项的顺序，如果其含义会发生改变，那么就应当使用 {{HTMLElement("ol")}} 元素，否则使用 {{HTMLElement("ul")}} 更合适。</p> + +<div class="standardNoteBlock"> +<p><strong>译者注：</strong>“更改顺序”时，不应当算上一些固定位于列表最前或最后的项，比如未完成的列表最后的占位项。<br> + 如果只有一个元素，以至于根本不存在什么顺序可言，可能最好先考虑是否应当使用列表元素，以及是否要在列表最后增加一些占位的空项。</p> +</div> + +<h2 id="示例">示例</h2> + +<h3 id="简单示例">简单示例</h3> + +<pre class="brush: html"><ol> + <li>Fee</li> + <li>Fi</li> + <li>Fo</li> + <li>Fum</li> +</ol> +</pre> + +<p>以上 HTML 输出如下：</p> + +<p>{{EmbedLiveSample("Simple_example", 400, 100)}}</p> + +<h3 id="使用小写罗马数字编号">使用小写罗马数字编号</h3> + +<pre class="brush: html"><ol type="i"> + <li>Introduction</li> + <li>List of Greivances</li> + <li>Conclusion</li> +</ol> </pre> + +<p>以上 HTML 输出如下：</p> + +<p>{{EmbedLiveSample("Using_Roman_Numeral_type", 400, 100)}}</p> + +<h3 id="使用_start_属性">使用 <code>start</code> 属性</h3> + +<pre class="brush: html"><p>Finishing places of contestants not in the winners’ circle:</p> + +<ol start="4"> + <li>Speedwalk Stu</li> + <li>Saunterin’ Sam</li> + <li>Slowpoke Rodriguez</li> +</ol> +</pre> + +<p>以上 HTML 输出如下：</p> + +<p>{{EmbedLiveSample("Using_the_start_attribute", 400, 100)}}</p> + +<h3 id="嵌套列表">嵌套列表</h3> + +<pre class="brush: html"><ol> + <li>first item</li> + <li>second item <!-- closing </li> tag not here! --> + <ol> + <li>second item first subitem</li> + <li>second item second subitem</li> + <li>second item third subitem</li> + </ol> + </li> <!-- Here's the closing </li> tag --> + <li>third item</li> +</ol> +</pre> + +<p>以上 HTML 输出如下：</p> + +<p>{{EmbedLiveSample("Nesting_lists", 400, 150)}}</p> + +<h3 id="嵌套有序列表和无序列表">嵌套有序列表和无序列表</h3> + +<pre class="brush: html"><ol> + <li>first item</li> + <li>second item <!-- closing </li> tag not here! --> + <ul> + <li>second item first subitem</li> + <li>second item second subitem</li> + <li>second item third subitem</li> + </ul> + </li> <!-- Here's the closing </li> tag --> + <li>third item</li> +</ol> +</pre> + +<p>以上 HTML 输出如下：</p> + +<p>{{EmbedLiveSample("Unordered_list_inside_ordered_list", 400, 150)}}</p> + +<h2 id="规范">规范</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">规范</th> + <th scope="col">状态</th> + <th scope="col">备注</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'semantics.html#the-ol-element', '<ol>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>No change since last W3C snapshot, {{SpecName('HTML5 W3C')}}.</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', "grouping-content.html#the-ol-element", "HTMLOListElement")}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>Added <code>reversed</code> and <code>start</code> attributed; un-deprecated <code>type</code></td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/lists.html#h-10.2', '<ol>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td>Deprecated <code>compact</code> and <code>type</code>.</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + + + +<p>{{Compat("html.elements.ol")}}</p> + +<h2 id="相关">相关</h2> + +<ul> + <li>其他列表相关的 HTML 元素: {{HTMLElement("ul")}}, {{HTMLElement("li")}}, {{HTMLElement("menu")}} and the obsolete {{HTMLElement("dir")}};</li> + <li>对 <code><ol></code> 元素常用的 CSS 属性: + <ul> + <li>the {{cssxref("list-style")}} 属性, 有用的选择序数的显示方式,</li> + <li><a href="/en-US/docs/CSS_Counters">CSS计数器</a>, 用于处理复杂的嵌套列表,</li> + <li>{{cssxref("line-height")}} 属性，可以模拟过时的 {{htmlattrxref("compact", "ol")}} 属性；</li> + <li>{{cssxref("margin")}} 属性，用来控制列表的缩进。</li> + </ul> + </li> +</ul> diff --git a/files/zh-cn/web/html/element/optgroup/index.html b/files/zh-cn/web/html/element/optgroup/index.html new file mode 100644 index 0000000000..8ea407b546 --- /dev/null +++ b/files/zh-cn/web/html/element/optgroup/index.html @@ -0,0 +1,127 @@ +--- +title: <optgroup> +slug: Web/HTML/Element/optgroup +tags: + - HTML + - HTML表单 + - 元素 + - 参考 + - 表单 +translation_of: Web/HTML/Element/optgroup +--- +<p>{{HTMLRef}}</p> + +<p><strong>HTML元素 <code><optgroup></code> </strong>为{{HTMLElement("select")}} 元素中的选项创建分组。</p> + +<p>{{EmbedInteractiveExample("pages/tabbed/optgroup.html", "tabbed-standard")}}</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/en-US/docs/HTML/Content_categories" title="HTML/Content_categories">内容分类</a></th> + <td>无</td> + </tr> + <tr> + <th scope="row">允许的内容</th> + <td>0或多个 {{HTMLElement("option")}} 元素</td> + </tr> + <tr> + <th scope="row">标签省略</th> + <td>开始标签是必须的。当该元素后面也跟着一个 <span style="font-family: courier new;"><optgroup> </span>元素，或该元素的父元素没有其他内容时，结束标签可省略。</td> + </tr> + <tr> + <th scope="row">允许的父元素</th> + <td>一个 {{HTMLElement("select")}} 元素.</td> + </tr> + <tr> + <th scope="row">Implicit ARIA role</th> + <td>{{ARIARole("group")}}</td> + </tr> + <tr> + <th scope="row">Permitted ARIA roles</th> + <td>No <code>role</code> permitted</td> + </tr> + <tr> + <th scope="row">DOM 接口</th> + <td>{{domxref("HTMLOptGroupElement")}}</td> + </tr> + </tbody> +</table> + +<p>{{Note("Optgroup elements may not be nested.")}}</p> + +<h2 id="属性">属性</h2> + +<p><span style="line-height: 21px;">这个元素包含 </span><a href="https://developer.mozilla.org/en-US/docs/HTML/Global_attributes" style="line-height: 21px;" title="HTML/Global attributes">global attributes</a><span style="line-height: 21px;">。</span></p> + +<dl> + <dt>{{htmlattrdef("disabled")}}</dt> + <dd>如果设置了这个布尔值，则不能选择这个选项组中的任何选项。通常浏览器会置灰这样的控件，它不接受任何浏览器事件，如鼠标点击或者焦点相关的事件。</dd> + <dt>{{htmlattrdef("label")}}</dt> + <dd>选项组的名字，浏览器用以在用户界面中标记选项。使用这个元素时必须加上这个属性。</dd> +</dl> + +<h2 id="示例">示例</h2> + +<pre class="brush: html"><select> + <optgroup label="Group 1"> + <option>Option 1.1</option> + </optgroup> + <optgroup label="Group 2"> + <option>Option 2.1</option> + <option>Option 2.2</option> + </optgroup> + <optgroup label="Group 3" disabled> + <option>Option 3.1</option> + <option>Option 3.2</option> + <option>Option 3.3</option> + </optgroup> +</select> +</pre> + +<h3 id="结果">结果</h3> + +<p><iframe class="live-sample-frame sample-code-frame" frameborder="0" id="frame_Example" src="https://mdn.mozillademos.org/en-US/docs/Web/HTML/Element/optgroup$samples/Example?revision=1617230"></iframe></p> + +<h2 id="规范">规范</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">规范</th> + <th scope="col">状态</th> + <th scope="col">注释</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'the-button-element.html#the-optgroup-element', '<optgroup>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'forms.html#the-optgroup-element', '<optgroup>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'interact/forms.html#h-17.6', '<optgroup>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">浏览器兼容性</h2> + +<p>{{Compat("html.elements.optgroup")}}</p> + +<div id="compat-desktop"></div> + +<div id="compat-mobile"></div> + +<h2 id="另请参阅">另请参阅</h2> + +<ul> + <li>其他表单相关的元素：{{HTMLElement("form")}}, {{HTMLElement("legend")}}, {{HTMLElement("label")}}, {{HTMLElement("button")}}, {{HTMLElement("select")}}, {{HTMLElement("datalist")}}, {{HTMLElement("option")}}, {{HTMLElement("fieldset")}}, {{HTMLElement("textarea")}}, {{HTMLElement("keygen")}}, {{HTMLElement("input")}}, {{HTMLElement("output")}}, {{HTMLElement("progress")}} 和 {{HTMLElement("meter")}}。</li> +</ul> diff --git a/files/zh-cn/web/html/element/option/index.html b/files/zh-cn/web/html/element/option/index.html new file mode 100644 index 0000000000..ebfbd2df02 --- /dev/null +++ b/files/zh-cn/web/html/element/option/index.html @@ -0,0 +1,85 @@ +--- +title: <option> +slug: Web/HTML/Element/option +tags: + - Element + - HTML表单 + - 元素 + - 参考 + - 表单 + - 选择 +translation_of: Web/HTML/Element/option +--- +<p id="概要">{{HTMLRef}}</p> + +<p><strong>HTML元素<em> </em><code><option></code><em> </em></strong> 用于定义在 {{HTMLElement("select")}}, {{HTMLElement("optgroup")}} 或 {{HTMLElement("datalist")}} 元素中包含的项。<code><option></code> 可以在弹出窗口和 HTML 文档中的其他项目列表中表示菜单项。</p> + +<p>{{EmbedInteractiveExample("pages/tabbed/option.html", "tabbed-standard")}}</p> + +<ul class="htmlelt"> + <li><dfn><a href="/en-US/docs/Web/HTML/Content_categories" title="HTML/Content_categories">内容类别</a></dfn> 无</li> + <li><dfn>允许的内容</dfn>带有最终转义字符（例如 <code>&eacute;</code>）的文本</li> + <li><dfn>标记省略</dfn> 开始标记是必需的。如果此元素紧接着是另一个 <code><option></code> 元素或{{HTMLElement("optgroup")}}, 或者父元素没有其他内容, 则结束标记是可选的。</li> + <li><dfn>Implicit ARIA role</dfn>{{ARIARole("option")}}</li> + <li><dfn>Permitted ARIA roles</dfn>No <code>role</code> permitted</li> + <li><dfn>允许的父元素</dfn> A {{HTMLElement("select")}}, an {{HTMLElement("optgroup")}} or a {{HTMLElement("datalist")}} element.</li> + <li><dfn>DOM 接口</dfn> {{domxref("HTMLOptionElement")}}</li> +</ul> + +<h2 id="属性">属性</h2> + +<p><span style="line-height: 21px;">此元素包括</span><a href="/en-US/docs/Web/HTML/Global_attributes" style="line-height: 21px;" title="HTML/Global attributes">全局属性</a>。</p> + +<dl> + <dt>{{htmlattrdef("disabled")}}</dt> + <dd>如果设置了这个布尔属性，则该选项不可选。浏览器通常会将这种控件显示为灰色，并且不再接受任何浏览器事件，例如鼠标点击或者焦点相关的事件。如果这个属性没有设置，而这个元素的其中一个父元素是被禁用的 {{HTMLElement("optgroup")}} 元素，则这个元素仍然是禁用的 。</dd> + <dt>{{htmlattrdef("label")}}</dt> + <dd>这个属性是用于表示选项含义的文本。如果 <code><strong>label</strong></code> 属性没有定义，它的值就是元素文本内容。</dd> + <dt>{{htmlattrdef("selected")}}</dt> + <dd>这个布尔属性存在时表明这个选项是否一开始就被选中。如果 <code><option></code> 元素是 {{HTMLElement("select")}} 元素的子元素，并且 {{HTMLElement("select")}} 元素的 {{htmlattrxref("multiple", "select")}} 属性没有设置，则 {{HTMLElement("select")}} 元素中只有一个 <code><option></code> 元素可以拥有 <code>selected</code> 属性。</dd> + <dt>{{htmlattrdef("value")}}</dt> + <dd>这个属性的值表示该选项被选中时提交给表单的值。如果省略了这个属性，值就从选项元素的文本内容中获取。</dd> +</dl> + +<h2 id="示例">示例</h2> + +<p>参见 {{HTMLElement("select")}} 示例。</p> + +<h2 id="Specifications" name="Specifications">规范</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'the-button-element.html#the-option-element', '<option>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'forms.html#the-option-element', '<option>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'interact/forms.html#h-17.6', '<option>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">浏览器兼容性</h2> + +<p>{{Compat("html.elements.option")}}</p> + +<h2 id="另见">另见</h2> + +<ul> + <li>其它表单相关的元素： {{HTMLElement("form")}}, {{HTMLElement("legend")}}, {{HTMLElement("label")}}, {{HTMLElement("button")}}, {{HTMLElement("select")}}, {{HTMLElement("datalist")}}, {{HTMLElement("optgroup")}}, {{HTMLElement("fieldset")}}, {{HTMLElement("textarea")}}, {{HTMLElement("keygen")}}, {{HTMLElement("input")}}, {{HTMLElement("output")}}, {{HTMLElement("progress")}} 和 {{HTMLElement("meter")}}。</li> +</ul> diff --git a/files/zh-cn/web/html/element/output/index.html b/files/zh-cn/web/html/element/output/index.html new file mode 100644 index 0000000000..7f52d3c694 --- /dev/null +++ b/files/zh-cn/web/html/element/output/index.html @@ -0,0 +1,101 @@ +--- +title: <output> +slug: Web/HTML/Element/output +tags: + - Element + - HTML5 + - Web +translation_of: Web/HTML/Element/output +--- +<p><strong>HTML <code><output></code> 标签</strong>表示计算或用户操作的结果。</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/zh-CN/docs/HTML/Content_categories">Content categories</a></th> + <td><a href="/zh-CN/docs/HTML/Content_categories#Flow_content">流式元素</a>，<a href="/zh-CN/docs/HTML/Content_categories#Phrasing_content">短语元素</a>，<a href="/en-US/docs/HTML/Content_categories#Form_listed">listed</a>, <a href="/en-US/docs/HTML/Content_categories#Form_labelable">labelable</a>, <a href="/en-US/docs/HTML/Content_categories#Form_resettable">resettable</a> <a href="/en-US/docs/HTML/Content_categories#Form-associated_content">form-associated element</a>, palpable content.</td> + </tr> + <tr> + <th scope="row">允许元素</th> + <td><a href="/zh-CN/docs/HTML/Content_categories#Phrasing_content">短语元素</a></td> + </tr> + <tr> + <th scope="row">省略标签</th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th scope="row">允许父元素</th> + <td>接受任何 <a href="/zh-CN/docs/HTML/Content_categories#Phrasing_content">短语元素</a></td> + </tr> + <tr> + <th scope="row">允许ARIA角色</th> + <td>Any</td> + </tr> + <tr> + <th scope="row">DOM 接口</th> + <td>{{domxref("HTMLOutputElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Attributes" name="Attributes">属性</h2> + +<p><span style="line-height: 21px;">这个标签具有 </span><a href="/zh-CN/docs/HTML/Global_attributes">全局属性</a>。</p> + +<dl> + <dt>{{htmlattrdef("for")}}</dt> + <dd>其它影响计算结果的标签的ID，可以多个。</dd> + <dt>{{htmlattrdef("form")}}</dt> + <dd>与当前标签有关联的form（从属的表单）。该属性的值必须是当前文档内的表单元素的ID。如果未指明该属性，output标签必须是一个form的后代标签。该属性的用处在于可以让output标签脱离form标签，存在于一个网页文档的任意位置。</dd> + <dt>{{htmlattrdef("name")}}</dt> + <dd>name属性。</dd> +</dl> + +<h2 id="Example" name="Example">例子</h2> + +<pre class="brush:html"><form oninput="result.value=parseInt(a.value)+parseInt(b.value)"> + <input type="range" name="b" value="50" /> + + <input type="number" name="a" value="10" /> = + <output name="result"></output> +</form> +</pre> + +<h2 id="Specifications" name="Specifications">规范</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'the-button-element.html#the-output-element', '<output>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'forms.html#the-output-element', '<output>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">浏览器兼容</h2> + +<div class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</div> + +<p>{{Compat("html.elements.output")}}</p> + +<h2 id="See_also" name="See_also">参见</h2> + +<ul> + <li>Other form-related elements: {{HTMLElement("form")}}, {{HTMLElement("input")}}, {{HTMLElement("button")}}, {{HTMLElement("datalist")}}, {{HTMLElement("legend")}}, {{HTMLElement("label")}}, {{HTMLElement("select")}}, {{HTMLElement("optgroup")}}, {{HTMLElement("option")}}, {{HTMLElement("textarea")}}, {{HTMLElement("keygen")}}, {{HTMLElement("fieldset")}}, {{HTMLElement("progress")}} and {{HTMLElement("meter")}}.</li> +</ul> + +<div>{{HTMLRef}}</div> + +<p> </p> diff --git a/files/zh-cn/web/html/element/p/index.html b/files/zh-cn/web/html/element/p/index.html new file mode 100644 index 0000000000..7cddbfea58 --- /dev/null +++ b/files/zh-cn/web/html/element/p/index.html @@ -0,0 +1,129 @@ +--- +title: <p> +slug: Web/HTML/Element/p +tags: + - Element + - HTML + - HTML grouping content + - Web + - 参考 +translation_of: Web/HTML/Element/p +--- +<div>{{HTMLRef}}</div> + +<p><strong>HTML <p></strong>元素（或者说 HTML 段落元素）表示文本的一个段落。该元素通常表现为一整块与相邻文本分离的文本，或以垂直的空白隔离或以首行缩进。另外，<p> 是<a href="/en-US/docs/HTML/Block-level_elements">块级元素</a>。</p> + +<ul class="htmlelt"> + <li><dfn><a href="/en-US/docs/Web/HTML/Content_categories">内容分类</a></dfn> <a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">Flow content</a>, palpable content.</li> + <li><dfn>允许的内容</dfn> <a href="/en-US/docs/Web/HTML/Content_categories#Phrasing_content">Phrasing content</a>.</li> + <li><dfn>标签省略</dfn>起始标签是必需的，结束标签在以下情形中可以省略。<p>元素后紧跟{{HTMLElement("address")}}, {{HTMLElement("article")}}, {{HTMLElement("aside")}}, {{HTMLElement("blockquote")}}, {{HTMLElement("div")}}, {{HTMLElement("dl")}}, {{HTMLElement("fieldset")}}, {{HTMLElement("footer")}}, {{HTMLElement("form")}}, {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}}, {{HTMLElement("header")}}, {{HTMLElement("hr")}}, {{HTMLElement("menu")}}, {{HTMLElement("nav")}}, {{HTMLElement("ol")}}, {{HTMLElement("pre")}}, {{HTMLElement("section")}}, {{HTMLElement("table")}}, {{HTMLElement("ul")}}或另一个{{HTMLElement("p")}}元素；或者父元素中没有其他内容了，而且父元素不是{{HTMLElement("a")}}元素</li> + <li><dfn>允许的父元素</dfn>任何接受<a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">flow content</a>的元素</li> + <li><dfn>DOM接口</dfn> {{domxref("HTMLParagraphElement")}}</li> +</ul> + +<h2 id="属性">属性</h2> + +<p>这个元素包含<a href="/en-US/docs/Web/HTML/Global_attributes">全局属性</a>。</p> + +<p><span style="line-height: 1.5;"><p> 元素的 </span><strong style="line-height: 1.5;">align </strong><span style="line-height: 1.5;">属性已被弃用，请不要使用</span><span style="line-height: 1.5;">。</span></p> + +<h2 id="示例">示例</h2> + +<pre class="brush: html"><p>这是第一个段落。这是第一个段落。 + 这是第一个段落。这是第一个段落。</p> +<p>这是第二个段落。<span style="font-size: 1rem;">这是第二个段落。 +</span><span style="font-size: 1rem;"> 这是第二个段落。</span><span style="font-size: 1rem;">这是第二个段落。</span><span style="font-size: 1rem;"></p></span></pre> + +<p>输出如下：</p> + +<p>{{ EmbedLiveSample('示例', '', '', '', 'Web/HTML/Element/p') }}</p> + +<h2 id="注意">注意</h2> + +<p>使用<a href="/en-US/docs/Web/CSS" style="line-height: 1.5;">CSS</a><span style="line-height: 1.5;"> {{cssxref("margin")}}属性</span><span style="line-height: 1.5;">去改变段落之间的间隙，<strong>不要</strong>在段落之间插入空的段落元素或者</span><span style="line-height: 1.5;">{{HTMLElement("br")}}元素。</span></p> + +<h2 id="Specifications" name="Specifications">规范</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'grouping-content.html#the-p-element', '<p>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'grouping-content.html#the-p-element', '<p>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/text.html#h-9.3.1', '<p>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">浏览器兼容性</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Basic support</td> + <td>1.0</td> + <td>{{CompatGeckoDesktop("1.0")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("1.0")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="另请参阅">另请参阅</h2> + +<ul> + <li>{{HTMLElement("hr")}}</li> + <li>{{HTMLElement("br")}}</li> +</ul> diff --git a/files/zh-cn/web/html/element/param/index.html b/files/zh-cn/web/html/element/param/index.html new file mode 100644 index 0000000000..9010cb378f --- /dev/null +++ b/files/zh-cn/web/html/element/param/index.html @@ -0,0 +1,103 @@ +--- +title: <param> +slug: Web/HTML/Element/param +translation_of: Web/HTML/Element/param +--- +<h2 id="概要">概要</h2> + +<p><strong>HTML <code><param>元素</code></strong>为{{ HTMLElement("object") }}元素定义参数</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><dfn><a href="https://developer.mozilla.org/en-US/docs/HTML/Content_categories" title="HTML/Content_categories">内容分类</a></dfn></th> + <td>无</td> + </tr> + <tr> + <th scope="row"><dfn>允许内容</dfn></th> + <td>不允许，它是一个空元素（{{Glossary("empty element")}}）。</td> + </tr> + <tr> + <th scope="row"><dfn>标签省略</dfn></th> + <td>由于它是一个void元素，所以开始标签必须出现，而结束标签必须不出现。</td> + </tr> + <tr> + <th scope="row"><dfn>允许的父级元素</dfn></th> + <td>任何<a href="/zh-CN/docs/Web/Guide/HTML/Content_categories#Flow_content#Flow_content">以下内容</a>（<a href="https://developer.mozilla.org/en-US/docs/HTML/Content_categories#Flow_content">flow content</a>）都可以在{{ HTMLElement("object") }}元素的前面作为它的父元素。</td> + </tr> + <tr> + <th scope="row"><dfn>DOM 接口</dfn></th> + <td>{{domxref("HTMLParamElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="属性">属性</h2> + +<p><span style="line-height: 21px;">这个元素包含 </span><a href="https://developer.mozilla.org/en-US/docs/HTML/Global_attributes" style="line-height: 21px;" title="HTML/Global attributes">全局属性</a><span style="line-height: 21px;">.</span></p> + +<dl> + <dt>{{ htmlattrdef("name") }}</dt> + <dd>参数的名字。</dd> + <dt>{{ htmlattrdef("type") }} {{ obsolete_inline() }}</dt> + <dd>仅当valuetype设置为“ref”时才使用。根据URI中给定的数据确定MIME类型。</dd> + <dt>{{ htmlattrdef("value") }}</dt> + <dd>确定参数的值。</dd> + <dt>{{ htmlattrdef("valuetype") }} {{ obsolete_inline() }}</dt> + <dd>确定参数的类型。可选值如下： + <ul> + <li>data: 默认值。该值作为字符串变量传递给对象实例。</li> + <li>ref: 该值是存储运行时变量的资源的URI。</li> + <li>object: 同一页面（document）中另一个{{HTMLElement("object")}}的ID。</li> + </ul> + </dd> +</dl> + +<h2 id="示例">示例</h2> + +<p>请在{{ HTMLElement("object") }}页面中查看<param>的示例。</p> + +<h2 id="Specifications" name="Specifications">规范</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'the-iframe-element.html#the-param-element', '<param>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'embedded-content-0.html#the-param-element', '<param>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/objects.html#h-13.3.2', '<param>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">浏览器兼容性</h2> + +<p> </p> + +<p>{{Compat("html.elements.param")}}</p> + +<div id="compat-mobile"> </div> + +<h2 id="参阅">参阅</h2> + +<ul> + <li>{{ HTMLElement("object") }}</li> +</ul> + +<div>{{HTMLRef}}</div> diff --git a/files/zh-cn/web/html/element/picture/index.html b/files/zh-cn/web/html/element/picture/index.html new file mode 100644 index 0000000000..a9c9638a6f --- /dev/null +++ b/files/zh-cn/web/html/element/picture/index.html @@ -0,0 +1,128 @@ +--- +title: <picture>：picture 元素 +slug: Web/HTML/Element/picture +tags: + - HTML + - Web + - picture + - 元素 + - 图片 + - 引用 +translation_of: Web/HTML/Element/picture +--- +<div>{{HTMLRef}}</div> + +<p><span class="seoSummary"><strong>HTML <code><picture></code> 元素</strong>通过包含零或多个 {{HTMLElement("source")}} 元素和一个 {{HTMLElement("img")}} 元素来为不同的显示/设备场景提供图像版本。浏览器会选择最匹配的子 <code><source></code> 元素，如果没有匹配的，就选择 <code><img></code> 元素的 {{htmlattrxref("src", "img")}} 属性中的URL。然后，所选图像呈现在<img>元素占据的空间中。</span></p> + +<div>{{EmbedInteractiveExample("pages/tabbed/picture.html", "tabbed-standard")}}</div> + +<p class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples </a> and send us a pull request.</p> + +<p><span class="tlid-translation translation" lang="zh-CN"><span title="">要决定加载哪个URL</span></span>，{{Glossary("user agent")}} 检查每个 <code><source></code> 的 {{htmlattrxref("srcset", "source")}}、{{htmlattrxref("media", "source")}} 和 {{htmlattrxref("type", "source")}} 属性<span class="tlid-translation translation" lang="zh-CN"><span title="">，来选择最匹配页面当前布局、显示设备特征等的兼容图像。</span></span></p> + +<p><code><picture></code> 的常见使用场景：</p> + +<ul> + <li><span class="tlid-translation translation" lang="zh-CN"><span title="">艺术指导(</span></span>Art direction<span class="tlid-translation translation" lang="zh-CN"><span title="">) —— 针对不同 <code>media</code> 条件裁剪或修改图像</span></span></li> + <li>遇到所有浏览器都不支持的特定格式时，提供不同的图像格式</li> +</ul> + +<p>If providing higher-density versions of an image for high-DPI (Retina) display, use {{htmlattrxref("srcset", "img")}} on the <code><img></code> element instead. This lets browsers opt for lower-density versions in data-saving modes, and you don't have to write explicit <code>media</code> conditions.</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/en-US/docs/Web/HTML/Content_categories">内容分类</a></th> + <td><a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">流内容</a>，表述内容，嵌入内容。</td> + </tr> + <tr> + <th scope="row">允许的内容</th> + <td>零或多个 {{HTMLElement("source")}} 元素，以及紧随其后的一个 {{HTMLElement("img")}} 元素，可以混合一些脚本支持的元素。</td> + </tr> + <tr> + <th scope="row">标签省略</th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th scope="row">允许的父元素</th> + <td>任何可以包含嵌入内容的元素。</td> + </tr> + <tr> + <th scope="row">允许的 ARIA roles</th> + <td>无</td> + </tr> + <tr> + <th scope="row">DOM 接口</th> + <td>{{domxref("HTMLPictureElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="属性">属性</h2> + +<p>这个元素只包含<a href="/en-US/docs/Web/HTML/Global_attributes">全局属性</a>。</p> + +<h2 id="用法提示">用法提示</h2> + +<p>你可以使用 {{cssxref("object-position")}} 属性<span class="tlid-translation translation" lang="zh-CN"><span title="">调整元素框架内图像的位置</span></span>，用 {{cssxref("object-fit")}} 属性控制图片如何调整大小来适应框架。</p> + +<div class="note"> +<p><strong>提示：</strong>在子 <code><img></code> 元素上使用这些属性，不是 <code><picture></code> 元素。</p> +</div> + +<h2 id="示例">示例</h2> + +<p><span class="tlid-translation translation" lang="zh-CN"><span title="">这些示例演示了 </span></span>{{HTMLElement("source")}} 元素<span class="tlid-translation translation" lang="zh-CN"><span title="">的不同属性如何更改<code><picture></code>中图像的选择。</span></span></p> + +<h3 id="media_属性"><code>media</code> 属性</h3> + +<p><code>media</code> 属性允许你提供一个用于给用户代理作为选择 {{HTMLElement("source")}} 元素的依据的媒体条件(media condition)（类似于媒体查询）。如果这个媒体条件匹配结果为 <code>false</code>，那么这个 {{HTMLElement("source")}} 元素会被跳过。</p> + +<pre class="brush: html"><picture> + <source srcset="mdn-logo-wide.png" media="(min-width: 600px)"> + <img src="mdn-logo-narrow.png" alt="MDN"> +</picture> +</pre> + +<h3 id="type_属性"><code>type</code> 属性</h3> + +<p><code>type</code> 属性允许你为 {{HTMLElement("source")}} 元素的 <code>srcset</code> 属性指向的资源指定一个 <a href="/zh-CN/docs/Web/HTTP/Basics_of_HTTP/MIME_types">MIME 类型</a>。如果用户代理不支持指定的类型，那么这个 {{HTMLElement("source")}} 元素会被跳过。</p> + +<pre class="brush: html"><picture> + <source srcset="mdn-logo.svg" type="image/svg+xml"> + <img src="mdn-logo.png" alt="MDN"> +</picture> +</pre> + +<h2 id="规范">规范</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">规范</th> + <th scope="col">状态</th> + <th scope="col">备注</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'embedded-content.html#the-picture-element', '<picture>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>初始定义</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + + + +<p>{{Compat("html.elements.picture")}}</p> + +<h2 id="参考链接">参考链接</h2> + +<ul> + <li>{{HTMLElement("img")}} 元素</li> + <li>{{HTMLElement("source")}} 元素</li> + <li>在其框架内定位和缩放图片：{{cssxref("object-position")}} 和 {{cssxref("object-fit")}}</li> +</ul> diff --git a/files/zh-cn/web/html/element/plaintext/index.html b/files/zh-cn/web/html/element/plaintext/index.html new file mode 100644 index 0000000000..c962ae74e0 --- /dev/null +++ b/files/zh-cn/web/html/element/plaintext/index.html @@ -0,0 +1,41 @@ +--- +title: <plaintext> +slug: Web/HTML/Element/plaintext +translation_of: Web/HTML/Element/plaintext +--- +<div>{{Obsolete_header}}</div> + +<h2 id="概述">概述</h2> + +<p><em>HTML 纯文本元素</em> (<code><plaintext></code>) 将起始标签后面的任何东西渲染为纯文本，不会解释为 HTML。它没有闭合标签，因为任何后面的东西都会看做纯文本。</p> + +<div class="note"><strong>注：</strong>不要使用这个元素。 + +<ul> + <li>它自从 HTML3.2 就废弃了，并且所有浏览器也不会实现它。此外，它在 HTML5 中已过时；仍然接受它的浏览器，可能将其看做 {{HTMLElement("pre")}} 元素，它仍然会解释其中的 HTML，即使这不是你想要的结果。</li> + <li>如果 {{HTMLElement("plaintext")}} 元素是页面的第一个元素（除了任何不显示的元素），那就不要使用 HTML 了。配置你的服务器，使用 <code>text/plain</code> <a href="/en-US/docs/Properly_Configuring_Server_MIME_Types" title="Properly Configuring Server MIME Types">MIME-type</a> 来发送你的页面。</li> + <li>不要使用这个元素，你应该使用 {{HTMLElement("pre")}} 元素，或者如果满足语义的话，使用 {{HTMLElement("code")}} 元素。要确保转义了任何 '<code><</code>' 、' <code>></code>' 和 "&" 字符，来避免将内容解释为 HTML。</li> + <li>等宽字体也可以显示在 {{HTMLElement("div")}} 元素中，通过使用足够的 <a href="https://developer.mozilla.org/en-US/docs/Web/CSS" title="CSS">CSS</a> 样式，在 {{cssxref("font-family")}} 中将 <code>monospace</code> 用作通用字体（generic-font）的值。</li> +</ul> +</div> + +<h2 id="属性">属性</h2> + +<p>除了 <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/global_attributes" rel="internal" title="HTML/global attributes">全局属性</a> 之外，这个元素没有其它属性。</p> + +<h2 id="DOM_接口">DOM 接口</h2> + +<p>元素实现了 {{domxref('HTMLElement')}} 接口。</p> + +<div class="note"> +<p><strong>实现注解：</strong>直到 Gecko 1.9.2（包含），Firefox 为这个元素实现了 {{domxref('HTMLSpanElement')}} 接口。</p> +</div> + +<h2 id="另见">另见</h2> + +<ul> + <li>{{HTMLElement("pre")}} 和 {{HTMLElement("code")}} 元素可以用于替代。</li> + <li>{{HTMLElement("listing")}} 和 {{HTMLElement("xmp")}} 元素，类似于 {{HTMLElement("plaintext")}} 但是也过时了。</li> +</ul> + +<div>{{HTMLRef}}</div> diff --git a/files/zh-cn/web/html/element/pre/index.html b/files/zh-cn/web/html/element/pre/index.html new file mode 100644 index 0000000000..5d3d8d73e5 --- /dev/null +++ b/files/zh-cn/web/html/element/pre/index.html @@ -0,0 +1,149 @@ +--- +title: <pre> +slug: Web/HTML/Element/pre +tags: + - HTML + - HTML分组内容 + - 元素 +translation_of: Web/HTML/Element/pre +--- +<div>{{HTMLRef}}</div> + +<p><strong>HTML <pre></strong> 元素表示预定义格式文本。在该元素中的文本通常按照原文件中的编排，以等宽字体的形式展现出来，文本中的空白符（比如空格和换行符）都会显示出来。(紧跟在 <pre> 开始标签后的换行符也会被省略)</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/pre.html", "tabbed-standard")}}</div> + +<p class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples </a> and send us a pull request.</p> + +<div class="note"> +<p><strong>注意：</strong> 你需要将该元素里的 '<' 字符转义为 '&lt;' 以保证代码里的关闭代码不被浏览器解释为标签。</p> +</div> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/en-US/docs/Web/Guide/HTML/Content_categories">内容类别</a></th> + <td>流内容( <a href="/en-US/docs/Web/Guide/HTML/Content_categories#Flow_content">flow content</a>) , 可触知的内容(palpable content).</td> + </tr> + <tr> + <th scope="row">允许的 内容</th> + <td><a href="/en-US/docs/Web/Guide/HTML/Content_categories#Phrasing_content">Phrasing content</a>.</td> + </tr> + <tr> + <th scope="row">省略标签</th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th scope="row">允许的 父元素</th> + <td>任何可以接受流内容( <a href="/en-US/docs/Web/Guide/HTML/Content_categories#Flow_content">flow content</a>) 的元素</td> + </tr> + <tr> + <th scope="row">允许的 ARIA 角色</th> + <td>任何</td> + </tr> + <tr> + <th scope="row">DOM 接口</th> + <td>{{domxref("HTMLPreElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="属性">属性</h2> + +<p>这个元素只具有全局属性。</p> + +<dl> + <dt>{{htmlattrdef("cols")}} {{non-standard_inline}}{{obsolete_inline}}</dt> + <dd>定义每行的最大字符数。这是一个非标准的属性，作用与{{htmlattrxref("width", "pre")}}相同。要实现这样的效果，应该使用CSS。</dd> + <dt>{{htmlattrdef("width")}} {{obsolete_inline}}</dt> + <dd>包含每行的最大字符数。虽然在技术上仍被实现，但这个属性没有视觉效果。要实现这样的效果，应该使用CSS。</dd> + <dt>{{htmlattrdef("wrap")}} {{non-standard_inline}}</dt> + <dd>提示溢出怎样发生。在现代浏览器中，这个提示会被忽略，且被没有视觉效果。要实现这样的效果，应该使用CSS。</dd> +</dl> + +<h2 id="示例">示例</h2> + +<h3 id="HTML">HTML</h3> + +<pre><code><p>Using CSS to change the font color is easy.</p> +<pre> +body { + color: red; +} +</pre></code></pre> + +<h3 id="结果">结果</h3> + +<p>{{EmbedLiveSample("Example")}}</p> + +<h2 id="可访问性">可访问性</h2> + +<p>It is important to provide an alternate description for any images or diagrams created using preformatted text. The alternate description should clearly and concisely describe the image or diagram's content.</p> + +<p>People experiencing low vision conditions and browsing with the aid of assistive technology such as a screen reader may not understand what the preformatted text characters are representing when they are read out in sequence.</p> + +<p>A combination of the {{HTMLElement("figure")}} and {{HTMLElement("figcaption")}} elements, supplemented by a combination of an {{htmlattrxref("id")}} and the <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA">ARIA</a> <code>role</code> and <code>aria-labelledby</code> attributes allow the preformatted text to be announced as an image, with the <code>figcaption</code> serving as the image's alternate description.</p> + +<h3 id="示例_2">示例</h3> + +<pre><code><figure role="img" aria-labelledby="cow-caption"> + <pre> + ___________________________ +< I'm an expert in my field. > + --------------------------- + \ ^__^ + \ (oo)\_______ + (__)\ )\/\ + ||----w | + || || + </pre> + <figcaption id="cow-caption"> + A cow saying, "I'm an expert in my field." The cow is illustrated using preformatted text characters. + </figcaption> +</figure></code></pre> + +<ul> + <li><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.1_%E2%80%94_Providing_text_alternatives_for_non-text_content">MDN Understanding WCAG, Guideline 1.1 explanations</a></li> + <li><a href="https://www.w3.org/TR/WCAG20-TECHS/H86.html">H86: Providing text alternatives for ASCII art, emoticons, and leetspeak | W3C Techniques for WCAG 2.0</a></li> +</ul> + + + +<h2 id="规范">规范</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">规范</th> + <th scope="col">状态</th> + <th scope="col">备注</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'grouping-content.html#the-pre-element', '<pre>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>No significant change from {{SpecName("HTML WHATWG")}}</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'grouping-content.html#the-pre-element', '<pre>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>No significant change from {{SpecName("HTML4.01")}}</td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/text.html#h-9.3.4', '<dl>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td>Deprecated the <code>cols</code> attribute</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<p>{{Compat("html.elements.pre")}}</p> + +<h2 id="参见">参见</h2> + +<ul> + <li>CSS: {{Cssxref('white-space')}}, {{Cssxref('word-break')}}</li> +</ul> diff --git a/files/zh-cn/web/html/element/progress/index.html b/files/zh-cn/web/html/element/progress/index.html new file mode 100644 index 0000000000..aba8a6466f --- /dev/null +++ b/files/zh-cn/web/html/element/progress/index.html @@ -0,0 +1,118 @@ +--- +title: <progress>：进度指示元素 +slug: Web/HTML/Element/progress +translation_of: Web/HTML/Element/progress +--- +<h2 id="概述">概述</h2> + +<p><strong>HTML</strong>中的<strong><code><progress></code></strong>元素用来显示一项任务的完成进度.虽然规范中没有规定该元素具体如何显示,浏览器开发商可以自己决定,但通常情况下,该元素都显示为一个进度条形式.</p> + +<p>{{EmbedInteractiveExample("pages/tabbed/progress.html", "tabbed-standard")}}</p> + +<div class="hidden"> +<p>The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples </a>and send us a pull request.</p> +</div> + +<h2 id="使用上下文">使用上下文</h2> + +<pre class="syntaxbox notranslate"><strong>使用策略 </strong>流文本(<a href="https://wiki.developer.mozilla.org/en-US/docs/Web/HTML/Content_categories#Flow_content">Flow content</a>), 短文本(<a href="https://wiki.developer.mozilla.org/en-US/docs/Web/HTML/Content_categories#Phrasing_content">phrasing content</a>) +<strong><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/HTML/Content_categories">Content categories</a> </strong>可标记内容,可触摸内容 + +<strong>有效内容 </strong><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/HTML/Content_categories#Phrasing_content">Phrasing content</a>, 其中在它的后代中不能包含 +<strong>Permitted content</strong> <code><progress></code>元素. + +<strong>标签省略 </strong>不可以,{{no_tag_omission}} +<strong>Tag omission</strong> + +<strong>有效的父元素</strong> 任何可以包裹短文本(<a href="https://wiki.developer.mozilla.org/en-US/docs/Web/HTML/Content_categories#Phrasing_content">phrasing content</a>)的元素. + +<strong>隐式元素 </strong>{{ARIARole("progressbar")}} +<strong>ARIA role</strong> + +<strong>有效的辅助元素 </strong>无 +<strong>ARIA roles</strong> + +<strong>DOM接口</strong> {{domxref("HTMLProgressElement")}} +</pre> + +<h2 id="属性">属性</h2> + +<p>和其他的HTML元素一样,该元素具有<a href="/zh-cn/HTML/Global_attributes" rel="internal">全局属性</a>.</p> + +<dl> + <dt>{{ htmlattrdef("max") }}</dt> + <dd>该属性描述了这个<code>progress</code>元素所表示的任务一共需要完成多少工作.</dd> + <dt>{{ htmlattrdef("value") }}</dt> + <dd>该属性用来指定该进度条已完成的工作量.如果没有<code>value属性</code>,则该进度条的进度为"不确定",也就是说,进度条不会显示任何进度,你无法估计当前的工作会在何时完成(比如在下载一个未知大小的文件时,下载对话框中的进度条就是这样的).</dd> +</dl> + +<div class="blockIndicator note"> +<p><strong>Note: </strong>你可以使用{{ cssxref("orient") }}属性来指定该进度条的显示方向是横向(默认)还是纵向.CSS伪类{{ cssxref(":indeterminate") }}可以用来匹配那些不确定的进度条.</p> +</div> + +<dl> +</dl> + +<h2 id="DOM_接口">DOM 接口</h2> + +<p>该元素实现了<code><a href="/zh-cn/DOM/HTMLProgressElement" title="zh-cn/DOM/HTMLProgressElement">HTMLProgressElement</a></code>接口.</p> + +<h2 id="例子">例子</h2> + +<pre class="brush: html notranslate"><progress value="70" max="100">70 %</progress> +</pre> + +<h3 id="结果">结果</h3> + +<p>{{ EmbedLiveSample("Examples", 200, 50) }}</p> + +<p>在Mac OS X上,显示的进度条如下:</p> + +<p><img alt="progress-1.png" class="default internal" src="/@api/deki/files/4946/=progress-1.png"></p> + +<p>在Windows上,显示的进度条如下:</p> + +<p><img alt="progress-firefox.JPG" class="default internal" src="/@api/deki/files/6031/=progress-firefox.JPG"></p> + +<h2 id="规范">规范</h2> + +<table> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'forms.html#the-progress-element', '<progress>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'sec-forms.html#the-progress-element', '<progress>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>起始定义</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + + + +<p>{{Compat("html.elements.progress")}}</p> + +<h2 id="相关链接">相关链接</h2> + +<ul> + <li>{{htmlelement("meter")}}</li> + <li>{{ cssxref(":indeterminate") }}</li> + <li>{{ cssxref("-moz-orient") }}</li> + <li>{{ cssxref("::-moz-progress-bar") }}</li> + <li>{{ cssxref("::-ms-fill") }}</li> + <li>{{ cssxref("::-webkit-progress-bar") }}</li> + <li>{{ cssxref("::-webkit-progress-value") }}</li> + <li>{{ cssxref("::-webkit-progress-inner-element") }}</li> +</ul> diff --git a/files/zh-cn/web/html/element/q/index.html b/files/zh-cn/web/html/element/q/index.html new file mode 100644 index 0000000000..84993dd5d2 --- /dev/null +++ b/files/zh-cn/web/html/element/q/index.html @@ -0,0 +1,104 @@ +--- +title: <q> +slug: Web/HTML/Element/q +tags: + - HTML + - Web + - 引用 + - 标签 +translation_of: Web/HTML/Element/q +--- +<div>{{HTMLRef}}</div> + +<p><em>HTML引用标签</em> (<strong><q></strong>)表示一个封闭的并且是短的行内引用的文本. 这个标签是用来引用短的文本，所以请不要引入换行符; 对于长的文本的引用请使用 {{HTMLElement("blockquote")}} 替代.</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/en-US/docs/HTML/Content_categories">Content categories</a></th> + <td><a href="/en-US/docs/HTML/Content_categories#Flow_content">Flow content</a>, <a href="/en-US/docs/HTML/Content_categories#Phrasing_content">phrasing content</a>, palpable content.</td> + </tr> + <tr> + <th scope="row">Permitted content</th> + <td><a href="/en-US/docs/HTML/Content_categories#Phrasing_content">Phrasing content</a>.</td> + </tr> + <tr> + <th scope="row">Tag omission</th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th scope="row">Permitted parent elements</th> + <td>Any element that accepts <a href="/en-US/docs/HTML/Content_categories#Phrasing_content">phrasing content</a>.</td> + </tr> + <tr> + <th scope="row">DOM interface</th> + <td>{{domxref("HTMLQuoteElement")}}</td> + </tr> + </tbody> +</table> + +<p>{{NoteStart}}大多数现代浏览器，会为 <q> 文本添加引号(<q></q>)。旧浏览器可能需要使用 CSS 添加引号。<br> + IE、Edge 与 Firefox、Chrome 引号样式略有不同。{{NoteEnd}}</p> + +<h2 id="属性">属性</h2> + +<p><q>标签拥有 <a href="https://developer.mozilla.org/en-US/docs/HTML/Global_attributes">全局属性</a>.</p> + +<dl> + <dt>{{htmlattrdef("cite")}}</dt> + <dd>这个属性的值是URL，意在指出被引用的文本的源文档或者源信息. 这个属性重在解释这个引用的参考或者是上下文.</dd> +</dl> + +<h2 id="示例" name="示例">示例</h2> + +<h3 id="HTML_内容">HTML 内容</h3> + +<pre class="brush: html"><p>Everytime Kenny is killed, Stan will announce + <q cite="http://en.wikipedia.org/wiki/Kenny_McCormick#Cultural_impact"> + Oh my God, you/they killed Kenny! + </q>. +</p></pre> + +<p>{{ EmbedLiveSample('示例') }}</p> + +<h2 id="说明">说明</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'text-level-semantics.html#the-q-element', '<q>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'text-level-semantics.html#the-q-element', '<q>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/text.html#h-9.2.2', '<q>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> + +<p>{{Compat("html.elements.q")}}</p> + +<h2 id="另见">另见</h2> + +<ul> + <li>The {{HTMLElement("blockquote")}} element for long quotations.</li> + <li>The {{HTMLElement("cite")}} element for source citations.</li> +</ul> diff --git a/files/zh-cn/web/html/element/rb/index.html b/files/zh-cn/web/html/element/rb/index.html new file mode 100644 index 0000000000..b3404088d5 --- /dev/null +++ b/files/zh-cn/web/html/element/rb/index.html @@ -0,0 +1,141 @@ +--- +title: '<rb>: The Ruby Base element' +slug: Web/HTML/Element/rb +translation_of: Web/HTML/Element/rb +--- +<div>{{HTMLRef}}</div> + +<p><span class="seoSummary"><strong>HTML Ruby Base</strong>（<code><rb></code>）元素用于分隔{{HTMLElement("ruby")}}注释的基本文本组件（即正在注释的文本）。一个<code><rb></code>元素应该包装基本文本的每个单独的原子段。</span></p> + +<div class="hidden">\{{EmbedInteractiveExample("pages/tabbed/rb.html", "tabbed-standard")}}</div> + + + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/en-US/docs/Web/HTML/Content_categories">内容范畴</a></th> + <td>无</td> + </tr> + <tr> + <th scope="row">允许内容</th> + <td>作为 {{htmlelement("ruby")}} 元素的子元素。</td> + </tr> + <tr> + <th scope="row">标签省略</th> + <td>如果元素紧跟{{HTMLElement("rt")}}、{{HTMLElement("rtc")}}或{{HTMLElement("rp")}}元素或其他元素，则可省略结束标记 <rb>元素，或者如果父元素中没有其他内容。</td> + </tr> + <tr> + <th scope="row">允许的父元素</th> + <td>{{HTMLElement("ruby")}}元素。</td> + </tr> + <tr> + <th scope="row">允许的 ARIA 角色</th> + <td>任意</td> + </tr> + <tr> + <th scope="row">DOM 接口</th> + <td>{{domxref("HTMLElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="属性">属性</h2> + +<p>这个元素仅仅支持 <a href="https://developer.mozilla.org/en-US/docs/HTML/Global_attributes">全局属性</a>。</p> + +<h2 id="用法注解">用法注解</h2> + +<ul> + <li>Ruby 注解用于展示东亚文字的发音，例如使用日语罗马音和汉语拼音的文字。 <code><rb></code> 元素用于分隔出ruby基本文本的每个片段。</li> + <li>虽然 <code><rb></code> 不是一个空元素，但是在源码中通常只包括每个元素的开始标签。 因此ruby标记就不那么复杂，也更容易阅读。在渲染版本中，浏览器也可以填充完整的元素。</li> + <li>你需要为要注释的每个基本段（<code><rb></code>元素）包含一个{{htmlelement("rt")}}元素。</li> +</ul> + +<h2 id="示例">示例</h2> + +<p>在此示例中，我们提供了与“hanzi”等效的原始字符的注释：</p> + +<pre class="brush: html"><ruby> + <rb>漢</rb>字 + <rp>(</rp><rt>han</rt>zi<rp>)</rp> +</ruby></pre> + +<p>请注意我们如何包含两个<code><rb></code>元素，以分隔ruby基本文本的两个独立部分。 另一方面，注释由两个{{htmlelement("rt")}}元素分隔。</p> + +<p>请注意，我们也可以使用完全单独注释的两个基本文本部分来编写此示例。 在这种情况下，我们不需要包含<code><rb></code>元素：</p> + +<pre class="brush: html"><ruby> + 漢 <rp>(</rp><rt>han</rt><rp>)</rp> + 字 <rp>(</rp><rt>zi</rt><rp>)</rp> +</ruby></pre> + +<div class="hidden"> +<div id="with-ruby"> +<pre class="brush: html"><ruby> <rb>漢<rb>字 <rp>(</rp><rt>han<rt>zi<rp>)</rp> </ruby> +</pre> + +<pre class="brush: css">body { + font-size: 22px; +}</pre> +</div> +</div> + +<p>输出看起来像这样：</p> + +<p>{{EmbedLiveSample("with-ruby", "100%", 60)}}</p> + +<p>当在不支持ruby的浏览器中呈现时，上面的HTML可能看起来像这样：</p> + +<div id="without-ruby"> +<div class="hidden"> +<pre class="brush: html">漢字 (han zi)</pre> + +<pre class="brush: css">body { + font-size: 22px; +} +</pre> +</div> +</div> + +<p>{{EmbedLiveSample("without-ruby", "100%", 60)}}</p> + +<div class="note"> +<p><strong>提示</strong>: 有关更多示例，请参阅有关{{HTMLElement("ruby")}}元素的文章。</p> +</div> + +<h2 id="规范">规范</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML5 W3C', 'text-level-semantics.html#the-rb-element', '<rb>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<div class="hidden">此页面中的兼容性表是根据结构化数据生成的。 如果您想为数据做出贡献，请查看<a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>，并向我们发送拉取请求。</div> + +<p>{{Compat("html.elements.rb")}}</p> + +<h2 id="另见">另见</h2> + +<ul> + <li>{{HTMLElement("ruby")}}</li> + <li>{{HTMLElement("rt")}}</li> + <li>{{HTMLElement("rp")}}</li> + <li> + <p>{{HTMLElement("rtc")}}</p> + </li> +</ul> diff --git a/files/zh-cn/web/html/element/rp/index.html b/files/zh-cn/web/html/element/rp/index.html new file mode 100644 index 0000000000..0c67a1001f --- /dev/null +++ b/files/zh-cn/web/html/element/rp/index.html @@ -0,0 +1,139 @@ +--- +title: <rp> +slug: Web/HTML/Element/rp +translation_of: Web/HTML/Element/rp +--- +<p><strong>HTML <code><rp></code> 元素</strong>用于为那些不能使用 {{HTMLElement("ruby") }} 元素展示 ruby 注解的浏览器，提供随后的圆括号。</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/en-US/docs/Web/HTML/Content_categories">Content categories</a></th> + <td>无</td> + </tr> + <tr> + <th scope="row">允许的内容</th> + <td>文本</td> + </tr> + <tr> + <th scope="row">标签省略</th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th scope="row">允许的父元素</th> + <td>{{HTMLElement("ruby")}} 元素。 <code><rp> </code>必须位于 {{HTMLElement("rt")}} 的前面和后面。</td> + </tr> + <tr> + <th scope="row">允许的 ARIA 角色</th> + <td>任意</td> + </tr> + <tr> + <th scope="row">DOM 接口</th> + <td>{{domxref("HTMLElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="属性">属性</h2> + +<p>这个元素仅仅支持 <a href="/en-US/docs/HTML/Global_attributes">全局属性</a>。</p> + +<h2 id="用法注解">用法注解</h2> + +<ul> + <li>Ruby 注解用于展示东亚文字的发音，例如使用日语罗马音和汉语拼音的文字。 <code><rp></code> 元素用于不支持 {{ HTMLElement("ruby") }} 元素的情况。 <code><rp></code> 的内容提供了应该展示的东西，通常是圆括号，以便表示 ruby 注解的存在。 </li> +</ul> + +<h2 id="示例">示例</h2> + +<pre class="brush: html"><ruby> + 漢 <rp>(</rp><rt>han</rt><rp>)</rp> + 字 <rp>(</rp><rt>zi</rt><rp>)</rp> +</ruby></pre> + +<h2 id="规范">规范</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'semantics.html#the-rp-element', '<rp>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'text-level-semantics.html#the-rp-element', '<rp>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>基本支持</td> + <td>5.0</td> + <td>{{CompatGeckoDesktop(38)}}</td> + <td>5.0</td> + <td>{{CompatNo}}</td> + <td>5.0</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>基本支持</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile(38)}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="另见">另见</h2> + +<ul> + <li>{{HTMLElement("ruby")}}</li> + <li>{{HTMLElement("rt")}}</li> + <li>{{HTMLElement("rb")}}</li> + <li> + <p>{{HTMLElement("rtc")}}</p> + </li> +</ul> + +<p>{{ HTMLRef }}</p> diff --git a/files/zh-cn/web/html/element/rt/index.html b/files/zh-cn/web/html/element/rt/index.html new file mode 100644 index 0000000000..03ec718c19 --- /dev/null +++ b/files/zh-cn/web/html/element/rt/index.html @@ -0,0 +1,138 @@ +--- +title: <rt> +slug: Web/HTML/Element/rt +translation_of: Web/HTML/Element/rt +--- +<p><strong>HTML Ruby 文本 (<code><rt></code>) 元素</strong>包含字符的发音，字符在 ruby 注解中出现，它用于描述东亚字符的发音。这个元素始终在 {{ HTMLElement("ruby") }} 元素中使用。</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/en-US/docs/Web/HTML/Content_categories">内容分类</a></th> + <td>无 </td> + </tr> + <tr> + <th scope="row">允许的内容</th> + <td><a href="/en-US/docs/Web/HTML/Content_categories#Phrasing_content">短语内容</a></td> + </tr> + <tr> + <th scope="row">标签省略</th> + <td>如果 {{HTMLElement("rt")}} 元素紧紧跟随 {{HTMLElement("rt")}} 或者 {{HTMLElement("rp")}} 元素，或者父元素中没有更多内容了，结束标签可以省略。</td> + </tr> + <tr> + <th scope="row">允许的父元素</th> + <td>{{HTMLElement("ruby")}} 元素</td> + </tr> + <tr> + <th scope="row">允许的 ARIA 角色</th> + <td>任意 </td> + </tr> + <tr> + <th scope="row">DOM 接口</th> + <td>{{domxref("HTMLElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="属性">属性</h2> + +<p>该元素仅仅包含 <a href="/en-US/docs/HTML/Global_attributes">全局属性</a>。</p> + +<h2 id="示例">示例</h2> + +<pre class="brush: html"><ruby> + 汉 <rt>Hàn</rt> + 字 <rt>Zì</rt> +</ruby> +</pre> + +<h2 id="规范">规范</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'semantics.html#the-rt-element', '<rt>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'text-level-semantics.html#the-rt-element', '<rt>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>基本支持</td> + <td>5.0</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop(38)}}</td> + <td>5.0</td> + <td>{{CompatNo}}</td> + <td>5.0</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Edge</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>基本支持</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile(38)}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="另见">另见</h2> + +<ul> + <li>{{HTMLElement("ruby")}}</li> + <li>{{HTMLElement("rp")}}</li> + <li>{{HTMLElement("rb")}}</li> + <li> + <p>{{HTMLElement("rtc")}}</p> + </li> +</ul> + +<p>{{ HTMLRef }}</p> diff --git a/files/zh-cn/web/html/element/rtc/index.html b/files/zh-cn/web/html/element/rtc/index.html new file mode 100644 index 0000000000..ded5504965 --- /dev/null +++ b/files/zh-cn/web/html/element/rtc/index.html @@ -0,0 +1,134 @@ +--- +title: <rtc> +slug: Web/HTML/Element/rtc +translation_of: Web/HTML/Element/rtc +--- +<p><strong>HTML <code><rtc></code> 元素</strong>包含文字的语义注解，它们在 {{HTMLElement("rb")}} 元素中展示。{{HTMLElement("rb")}} 元素可以拥有发音 ({{HTMLElement("rt")}}) 和语义({{HTMLElement("rtc")}}) 注解。</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/en-US/docs/Web/HTML/Content_categories">内容分类</a></th> + <td>无 </td> + </tr> + <tr> + <th scope="row">允许的内容</th> + <td><a href="/en-US/docs/Web/HTML/Content_categories#Phrasing_content">短语内容</a> 或者 {{HTMLElement("rt")}} 元素</td> + </tr> + <tr> + <th scope="row">标签省略</th> + <td>如果它紧紧跟随{{HTMLElement("rb")}}，{{HTMLElement("rtc")}} 或者 {{HTMLElement("rt")}} 元素的起始标签，或父元素的闭合标签，它的闭合标签就可以省略。</td> + </tr> + <tr> + <th scope="row">允许的父元素</th> + <td>{{HTMLElement("ruby")}} 元素.</td> + </tr> + <tr> + <th scope="row">允许的 ARIA 角色</th> + <td>任意</td> + </tr> + <tr> + <th scope="row">DOM 接口</th> + <td>{{domxref("HTMLElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="属性">属性</h2> + +<p>该元素仅仅包含 <a href="/en-US/docs/HTML/Global_attributes">全局属性</a></p> + +<h2 id="示例">示例</h2> + +<pre class="brush: html"><ruby> + <rb>旧</rb> + <rb>金</rb> + <rb>山</rb> + <rt>jiù</rt> + <rt>jīn</rt> + <rt>shān</rt> + <rtc>San Francisco</rtc> +</ruby> +</pre> + +<h2 id="规范">规范</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML5 W3C', 'text-level-semantics.html#the-rtc-element', '<rtc>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoDesktop(33)}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoMobile(33)}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="另见">另见</h2> + +<ul> + <li>{{HTMLElement("ruby")}}</li> + <li>{{HTMLElement("rp")}}</li> + <li>{{HTMLElement("rb")}}</li> + <li> + <p>{{HTMLElement("rt")}}</p> + </li> +</ul> + +<p>{{ HTMLRef }}</p> diff --git a/files/zh-cn/web/html/element/ruby/index.html b/files/zh-cn/web/html/element/ruby/index.html new file mode 100644 index 0000000000..569be565bf --- /dev/null +++ b/files/zh-cn/web/html/element/ruby/index.html @@ -0,0 +1,104 @@ +--- +title: <ruby> +slug: Web/HTML/Element/ruby +tags: + - Element + - HTML + - Ruby + - Web + - zh-Hans + - 汉字 +translation_of: Web/HTML/Element/ruby +--- +<p>{{HTMLRef}}</p> + +<p><strong>HTML <code><ruby></code> 元素 </strong>被用来展示东亚文字注音或字符注释。</p> + + + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/en-US/docs/Web/HTML/Content_categories" title="HTML/Content_categories">内容范畴</a></th> + <td><a href="/en-US/docs/Web/HTML/Content_categories#Flow_content" title="HTML/Content_categories#Phrasing_content">流式内容</a>, <a href="/en-US/docs/Web/HTML/Content_categories#Phrasing_content" title="HTML/Content_categories#Phrasing_content">短语内容</a>, palpable content.</td> + </tr> + <tr> + <th scope="row">允许内容</th> + <td><a href="/en-US/docs/Web/HTML/Content_categories#Phrasing_content" title="HTML/Content_categories#Phrasing_content">短语内容</a></td> + </tr> + <tr> + <th scope="row">标签省略</th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th scope="row">允许的父级元素</th> + <td>See prose</td> + </tr> + <tr> + <th scope="row">DOM 接口</th> + <td>{{domxref("HTMLElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Attributes" name="Attributes"><strong>属性</strong></h2> + +<p>本元素支持 <a href="/en-US/docs/Web/HTML/Global_attributes" title="HTML/Global attributes">全局属性</a>。</p> + +<h2 id="Examples" name="Examples"><strong>示例</strong></h2> + +<h3 id="示例1_字">示例1: 字</h3> + +<pre class="brush:html"><ruby> + 汉 <rp>(</rp><rt>han</rt><rp>)</rp> + 字 <rp>(</rp><rt>zi</rt><rp>)</rp> +</ruby></pre> + +<h3 id="示例2_词">示例2: 词</h3> + +<pre class="brush:html"><ruby> + 明 日 <rp>(</rp><rt>ming ri</rt><rp>)</rp> +</ruby></pre> + +<h2 id="Specifications" name="Specifications">规范</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'text-level-semantics.html#the-ruby-element', '<ruby>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'text-level-semantics.html#the-ruby-element', '<ruby>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性"><strong>浏览器兼容性</strong></h2> + +<div id="compat-desktop">{{Compat("html.elements.ruby")}}</div> + +<h2 id="See_also" name="See_also">参阅</h2> + +<ul> + <li>{{HTMLElement("rt")}}</li> + <li>{{HTMLElement("rp")}}</li> + <li>{{HTMLElement("rb")}}</li> + <li>{{HTMLElement("rtc")}}</li> + <li>{{HTMLElement("rbc")}}</li> + <li>{{CSSxRef("text-transform")}}: full-size-kana</li> +</ul> + +<div id="gtx-trans" style="position: absolute; left: 5px; top: 141px;"> +<div class="gtx-trans-icon"></div> +</div> diff --git a/files/zh-cn/web/html/element/s/index.html b/files/zh-cn/web/html/element/s/index.html new file mode 100644 index 0000000000..fb91de28b7 --- /dev/null +++ b/files/zh-cn/web/html/element/s/index.html @@ -0,0 +1,118 @@ +--- +title: <s> +slug: Web/HTML/Element/s +translation_of: Web/HTML/Element/s +--- +<div>{{HTMLRef}}</div> + +<p><strong>HTML <code><s></code> 元素 </strong>使用删除线来渲染文本。使用 <code><s></code> 元素来表示不再相关，或者不再准确的事情。但是当表示文档编辑时，不提倡使用 <code><s></code> ；为此，提倡使用 {{ HTMLElement("del") }} 和 {{ HTMLElement("ins") }} 元素。</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/en-US/docs/HTML/Content_categories">内容分类</a></th> + <td><a href="/en-US/docs/HTML/Content_categories#Phrasing_content">短语内容</a> or <a href="/en-US/docs/HTML/Content_categories#Flow_content">流式内容</a></td> + </tr> + <tr> + <th scope="row">允许的内容</th> + <td><a href="/en-US/docs/HTML/Content_categories#Phrasing_content">短语内容</a></td> + </tr> + <tr> + <th scope="row">标签省略</th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th scope="row">允许的父元素</th> + <td>任何接受<a href="/en-US/docs/HTML/Content_categories#Phrasing_content">短语内容</a>的元素</td> + </tr> + <tr> + <th scope="row">允许的 ARIA 角色</th> + <td>任意</td> + </tr> + <tr> + <th scope="row">DOM 接口</th> + <td>{{domxref("HTMLElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="属性">属性</h2> + +<p>这个元素仅仅包含 <a href="/en-US/docs/HTML/Global_attributes">全局属性</a></p> + +<div class="note"><strong>实现注解</strong>： 直到 Gecko1.9.2（包含），Firefox 为这个元素实现了 <code><a href="/en-US/docs/DOM/span">HTMLSpanElement</a> </code>接口。</div> + +<h2 id="示例">示例</h2> + +<pre class="brush:xml"><s>Today's Special: Salmon</s> SOLD OUT<br> +<span style="text-decoration:line-through;">Today's Special: + Salmon</span> SOLD OUT</pre> + +<h3 id="结果">结果</h3> + +<p><s>Today's Special: Salmon</s> SOLD OUT<br> + <s style="text-decoration: line-through;">Today's Special: Salmon</s> SOLD OUT</p> + +<h2 id="Accessibility_concerns">Accessibility concerns</h2> + +<p>The presence of the <code>s</code> element is not announced by most screen reading technology in its default configuration. It can be made to be announced by using the CSS {{cssxref("content")}} property, along with the {{cssxref("::before")}} and {{cssxref("::after")}} pseudo-elements.</p> + +<pre><code>s::before, +s::after { + clip-path: inset(100%); + clip: rect(1px, 1px, 1px, 1px); + height: 1px; + overflow: hidden; + position: absolute; + white-space: nowrap; + width: 1px; +} + +s::before { + content: " [start of stricken text] "; +} + +s::after { + content: " [end of stricken text] "; +}</code></pre> + +<p>Some people who use screen readers deliberately disable announcing content that creates extra verbosity. Because of this, it is important to not abuse this technique and only apply it in situations where not knowing content has been struck out would adversely affect understanding.</p> + +<ul> + <li><a href="https://developer.paciellogroup.com/blog/2017/12/short-note-on-making-your-mark-more-accessible/">Short note on making your mark (more accessible) | The Paciello Group</a></li> + <li><a href="http://adrianroselli.com/2017/12/tweaking-text-level-styles.html">Tweaking Text Level Styles | Adrian Roselli</a></li> +</ul> + +<h2 id="规范">规范</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">规范</th> + <th scope="col">状态</th> + <th scope="col">注释</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG','semantics.html#the-s-element','s element')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C','textlevel-semantics.html#the-s-element','s element')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<p>{{Compat("html.elements.s")}}</p> + +<h2 id="参见">参见</h2> + +<ul> + <li>{{ HTMLElement("strike") }} 元素，另一个 {{ HTMLElement("s") }} 元素，已经废除并且不应再用于 Web 站点。</li> + <li>{{ HTMLElement("del") }} 元素用于代替，如果数据已经删除了。</li> + <li>CSS {{ cssxref("text-decoration") }}-line-through 属性也用于为 {{ HTMLElement("s") }} 元素实现前者的视觉效果。</li> +</ul> diff --git a/files/zh-cn/web/html/element/samp/index.html b/files/zh-cn/web/html/element/samp/index.html new file mode 100644 index 0000000000..182e4c2e38 --- /dev/null +++ b/files/zh-cn/web/html/element/samp/index.html @@ -0,0 +1,95 @@ +--- +title: <samp> +slug: Web/HTML/Element/samp +translation_of: Web/HTML/Element/samp +--- +<h2 id="概述">概述</h2> + +<p><span style="font-family: courier new;"><samp></span> 元素用于标识计算机程序输出，通常使用浏览器缺省的 monotype 字体（例如 Lucida Console）。</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/en-US/docs/HTML/Content_categories" title="HTML/Content_categories">内容分类</a></th> + <td><a href="/en/HTML/Content_categories#Flow_content" style="line-height: 22px;" title="en/HTML/Content categories#Flow content">Flow content</a><span style="line-height: 22px;">, </span><a href="/en/HTML/Content_categories#Phrasing_content" style="line-height: 22px;" title="en/HTML/Content categories#Phrasing content">phrasing content</a>, palpable content.</td> + </tr> + <tr> + <th scope="row">允许内容</th> + <td><a href="/en/HTML/Content_categories#Phrasing_content" style="line-height: 22px;" title="en/HTML/Content categories#Phrasing content">Phrasing content</a>.</td> + </tr> + <tr> + <th scope="row">遗漏标签</th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th scope="row">允许的父级元素</th> + <td>Any element that accepts <a href="/en-US/docs/HTML/Content_categories#Phrasing_content" title="HTML/Content_categories#Phrasing_content">phrasing content</a>.</td> + </tr> + <tr> + <th scope="row">DOM 接口</th> + <td>{{domxref("HTMLElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="属性">属性</h2> + +<p><span style="line-height: 21px;">该元素只包含 </span><a href="https://developer.mozilla.org/en-US/docs/HTML/Global_attributes" style="line-height: 21px;" title="HTML/Global attributes">全局属性</a><span style="line-height: 21px;">。</span></p> + +<h2 id="DOM_接口">DOM 接口</h2> + +<p>该元素实现了 <code><a href="/en/DOM/element" title="en/DOM/element">HTMLElement</a></code> 接口。</p> + +<div class="note"> +<p><strong>Implementation note: </strong>基于 Gecko 1.9.2 及以上，Firefox 还为该元素实现了<a href="/en/DOM/span" title="en/DOM/span"><span style="font-family: courier new;">HTMLSpanElement</span></a> 接口。</p> +</div> + +<h2 id="示例">示例</h2> + +<pre class="brush: html"><p>Regular text. <samp>This is sample text.</samp> Regular text.</p> +</pre> + +<h3 id="结果">结果</h3> + +<p>Regular text. <samp>This is sample text.</samp> Regular text.</p> + +<h2 id="规范">规范</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">规范</th> + <th scope="col">状态</th> + <th scope="col">备注</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'text-level-semantics.html#the-samp-element', '<samp>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'text-level-semantics.html#the-samp-element', '<samp>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/text.html#h-9.2.1', '<samp>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="注意">注意</h2> + +<p>可以使用 CSS 选择器 <code>samp</code> 定义规则来覆盖浏览器的缺省字体。不过，用户设置的偏好可能会优先于指定的 CSS 使用。</p> + +<h2 id="另请参阅">另请参阅</h2> + +<ul> + <li><a href="/en/HTML/Element/code" title="en/HTML/Element/code">HTML Code Element</a></li> +</ul> + +<div>{{ HTMLRef }}</div> diff --git a/files/zh-cn/web/html/element/script/index.html b/files/zh-cn/web/html/element/script/index.html new file mode 100644 index 0000000000..047dcfc899 --- /dev/null +++ b/files/zh-cn/web/html/element/script/index.html @@ -0,0 +1,330 @@ +--- +title: <script> +slug: Web/HTML/Element/script +tags: + - <script> + - Element + - HTML脚本 + - Web + - 元素 + - 网络 +translation_of: Web/HTML/Element/script +--- +<pre class="syntaxbox notranslate"><strong>HTML <code><script></code> 元素</strong>用于嵌入或引用可执行脚本。这通常用作嵌入或者指向 JavaScript 代码。<code><script></code> 元素也能在其他语言中使用，比如 <a href="https://wiki.developer.mozilla.org/zh-CN/docs/Web/API/WebGL_API">WebGL</a> 的 GLSL 着色器语言。</pre> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/en-US/docs/Web/HTML/Content_categories">内容分类</a></th> + <td><a href="https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Content_categories#Metadata_content">元数据内容</a>, <a href="https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Content_categories#Flow_content">流式元素</a>, <a href="https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Content_categories#Phrasing_content">短语元素</a>.</td> + </tr> + <tr> + <th scope="row">可用内容</th> + <td>动态脚本，如 <code>text/javascript</code>.</td> + </tr> + <tr> + <th scope="row">标签省略</th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th scope="row">可用父元素</th> + <td>一些元素可以接受元数据内容, 或则是一些元素可以接受短语元素。</td> + </tr> + <tr> + <th scope="row">隐含的 ARIA 角色</th> + <td>没有对应的角色</td> + </tr> + <tr> + <th scope="row">允许的 ARIA 角色</th> + <td>不允许任何角色</td> + </tr> + <tr> + <th scope="row">DOM接口</th> + <td>{{domxref("HTMLScriptElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="属性">属性</h2> + +<p>该元素包含<a href="/zh-CN/docs/Web/HTML/Global_attributes">全局属性</a>。</p> + +<p>{{htmlattrdef("async")}} {{HTMLVersionInline(5)}}</p> + +<dl> + <dd>对于普通脚本，如果存在 <code>async</code> 属性，那么普通脚本会被并行请求，并尽快解析和执行。</dd> + <dd>对于<a href="https://wiki.developer.mozilla.org/zh-CN/docs/Web/JavaScript/Guide/Modules">模块脚本</a>，如果存在 <code>async</code> 属性，那么脚本及其所有依赖都会在延缓队列中执行，因此它们会被并行请求，并尽快解析和执行。</dd> + <dd>该属性能够消除解析阻塞的 Javascript。解析阻塞的 Javascript 会导致浏览器必须加载并且执行脚本，之后才能继续解析。<code>defer</code> 在这一点上也有类似的作用。</dd> + <dd>这是个布尔属性：布尔属性的存在意味着 true 值，布尔属性的缺失意味着 false 值。</dd> + <dd>关于浏览器支持请参见{{anch("浏览器兼容性")}}。另可参见文章<a href="/en-US/docs/Games/Techniques/Async_scripts">asm.js的异步脚本</a>。</dd> + <dt>{{htmlattrdef("crossorigin")}}</dt> + <dd>那些没有通过标准<a href="/zh-CN/docs/HTTP_access_control">CORS</a>检查的正常<code>script</code> 元素传递最少的信息到 {{domxref('GlobalEventHandlers.onerror', 'window.onerror')}}。可以使用本属性来使那些将静态资源放在另外一个域名的站点打印错误信息。参考 <a href="https://developer.mozilla.org/zh-CN/docs/Web/HTML/CORS_settings_attributes">CORS 设置属性</a>了解<span class="short_text" id="result_box" lang="zh-CN"><span>对有效参数的更具描述性的解释。</span></span></dd> + <dt> + <pre class="brush: html notranslate"><span class="short_text" lang="zh-CN"><span><code><script src="" crossorigin="anonymous"></script></code></span></span></pre> + </dt> + <dt>{{htmlattrdef("defer")}}</dt> + <dd>这个布尔属性被设定用来通知浏览器该脚本将在文档完成解析后，触发 {{event("DOMContentLoaded")}} 事件前执行。</dd> + <dd>有 <code>defer</code> 属性的脚本会阻止 <code>DOMContentLoaded</code> 事件，直到脚本被加载并且解析完成。</dd> + <dt> + <div class="blockIndicator warning"> + <p>如果缺少 <code>src</code> 属性（即内嵌脚本），该属性不应被使用，因为这种情况下它不起作用。</p> + + <p><code>defer</code> 属性对模块脚本没有作用 —— 他们默认 defer。</p> + </div> + </dt> + <dt> + <p>{{htmlattrdef("integrity")}}</p> + </dt> + <dd><span class="short_text" id="result_box" lang="zh-CN"><span>包含用户代理可用于验证已提取资源是否已无意外操作的内联元数据。参见</span></span> <a href="https://developer.mozilla.org/en-US/docs/Web/Security/Subresource_Integrity">Subresource Integrity</a>。</dd> + <dt>{{htmlattrdef("nomodule")}}</dt> + <dd>这个布尔属性被设置来标明这个脚本在支持 <a href="https://hacks.mozilla.org/2015/08/es6-in-depth-modules/">ES2015 modules</a> 的浏览器中不执行。 — 实际上，这可用于在不支持模块化JavaScript的旧浏览器中提供回退脚本。</dd> + <dt>{{htmlattrdef("nonce")}}</dt> + <dd>A cryptographic nonce (number used once) to whitelist inline scripts in a <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/script-src">script-src Content-Security-Policy</a>. The server must generate a unique nonce value each time it transmits a policy. It is critical to provide a nonce that cannot be guessed as bypassing a resource's policy is otherwise trivial.</dd> + <dt id="attr-referrer">{{htmlattrdef("referrerpolicy")}}</dt> + <dd>Indicates which <a href="https://developer.mozilla.org/en-US/docs/Web/API/Document/referrer">referrer</a> to send when fetching the script, or resources fetched by the script: + <ul> + <li><code>no-referrer</code>: The {{HTTPHeader("Referer")}} header will not be sent.</li> + <li><code>no-referrer-when-downgrade</code> (default): The {{HTTPHeader("Referer")}} header will not be sent to {{Glossary("origin")}}s without {{Glossary("TLS")}} ({{Glossary("HTTPS")}}).</li> + <li><code>origin</code>: The sent referrer will be limited to the origin of the referring page: its <a href="https://developer.mozilla.org/en-US/docs/Archive/Mozilla/URIScheme">scheme</a>, {{Glossary("host")}}, and {{Glossary("port")}}.</li> + <li><code>origin-when-cross-origin</code>: The referrer sent to other origins will be limited to the scheme, the host, and the port. Navigations on the same origin will still include the path.</li> + <li><code>same-origin</code>: A referrer will be sent for {{Glossary("Same-origin policy", "same origin")}}, but cross-origin requests will contain no referrer information.</li> + <li><code>strict-origin</code>: Only send the origin of the document as the referrer when the protocol security level stays the same (e.g. HTTPS→HTTPS), but don't send it to a less secure destination (e.g. HTTPS→HTTP).</li> + <li><code>strict-origin-when-cross-origin</code>: Send a full URL when performing a same-origin request, but only send the origin when the protocol security level stays the same (e.g.HTTPS→HTTPS), and send no header to a less secure destination (e.g. HTTPS→HTTP).</li> + <li><code>unsafe-url</code>: The referrer will include the origin <em>and</em> the path (but not the <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLHyperlinkElementUtils/hash">fragment</a>, <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLHyperlinkElementUtils/password">password</a>, or <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLHyperlinkElementUtils/username">username</a>). <strong>This value is unsafe</strong>, because it leaks origins and paths from TLS-protected resources to insecure origins.</li> + </ul> + + <p><strong>Note</strong>: An empty string value (<code>""</code>) is both the default value, and a fallback value if <code>referrerpolicy</code> is not supported. If <code>referrerpolicy</code> is not explicitly specified on the <code><script></code> element, it will adopt a higher-level referrer policy, i.e. one set on the whole document or domain. If a higher-level policy is not available, the empty string is treated as being equivalent to <code>no-referrer-when-downgrade</code>.</p> + </dd> + <dt>{{htmlattrdef("src")}}</dt> + <dd>这个属性定义引用外部脚本的URI，这可以用来代替直接在文档中嵌入脚本。指定了 src 属性的script元素标签内不应该再有嵌入的脚本。</dd> + <dt>{{htmlattrdef("type")}}</dt> + <dd>该属性定义script元素包含或<code>src</code>引用的脚本语言。属性的值为<abbr title="多用途互联网邮件扩展类型">MIME</abbr>类型; 支持的<abbr title="多用途互联网邮件扩展类型">MIME</abbr>类型包括<code>text/javascript</code>, <code>text/ecmascript</code>, <code>application/javascript</code>, 和<code>application/ecmascript</code>。如果没有定义这个属性，脚本会被视作JavaScript。</dd> + <dd>如果<abbr title="多用途互联网邮件扩展类型">MIME</abbr>类型不是JavaScript类型（上述支持的类型），则该元素所包含的内容会被当作数据块而不会被浏览器执行。</dd> + <dd>如果type属性为<code>module</code>，代码会被当作JavaScript模块 {{experimental_inline}}。请参见<a class="external external-icon" href="https://hacks.mozilla.org/2015/08/es6-in-depth-modules/">ES6 in Depth: Modules</a></dd> + <dd>在Firefox中可以通过定义<span style="font-family: consolas,monaco,andale mono,monospace;">type=application/javascript;version=1.8来</span>使用如let声明这类的JS高版本中的先进特性。 但请注意这是个非标准功能，其他浏览器，特别是基于Chrome的浏览器可能会不支持。</dd> + <dd>关于如何引入特殊编程语言，请参见<a href="/en-US/Add-ons/Code_snippets/Rosetta">这篇文章</a>。</dd> + <dt>{{htmlattrdef("text")}}</dt> + <dd>和 textContent 属性类似，本属性用于设置元素的文本内容。但和 textContent 不一样的是，本属性<span class="short_text" id="result_box" lang="zh-CN"><span>在节点插入到DOM之后，此属性被解析为可执行代码。</span> </span></dd> + <dt></dt> + <dt> + <h3 id="Deprecated_attributes">Deprecated attributes</h3> + </dt> + <dt>{{htmlattrdef("charset")}} {{Deprecated_inline}}</dt> + <dd>如果存在，值必须和“<code>utf-8</code>”不区分大小写的匹配。当然声明 <code>charset</code> 是没有必要的，因为页面文档必须使用UTF-8，而 <code>script</code> 元素会从页面文档中继承这个属性。</dd> + <dt>{{htmlattrdef("language")}} {{Deprecated_inline}}</dt> + <dd>和type属性类似，这个属性定义脚本使用的语言。 但是与type不同的是，这个属性的可能值从未被标准化过。请用<code>type</code>属性代替这个属性。</dd> +</dl> + +<h2 id="示例">示例</h2> + +<h3 id="基本用法">基本用法</h3> + +<p>下面这些示例说明了如何在HTML4和HTML5中通过使用<code><script></code>元素来导入脚本。</p> + +<pre class="brush: html notranslate"><!-- HTML4 and (x)HTML --> +<script type="text/javascript" src="javascript.js"> + +<!-- HTML5 --> +<script src="javascript.js"></script></pre> + +<h3 id="Module_fallback">Module fallback</h3> + +<p>Browsers that support the <code>module</code> value for the <code>type</code> attribute ignore any script with a <code>nomodule</code> attribute. That enables you to use module scripts while also providing <code>nomodule</code>-marked fallback scripts for non-supporting browsers.</p> + +<pre class="notranslate"><code><script type="module" src="main.mjs"></script> +<script nomodule src="fallback.js"></script></code></pre> + +<h2 id="规范">规范</h2> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/en-US/docs/Web/HTML/Content_categories">内容分类</a></th> + </tr> + </tbody> +</table> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">规范</th> + <th scope="col">状态</th> + <th scope="col">备注</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', "scripting.html#the-script-element", "<script>")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>Adds the module type</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'scripting-1.html#script', '<script>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'interact/scripts.html#h-18.2.1', '<script>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('Subresource Integrity', '#htmlscriptelement', '<script>')}}</td> + <td>{{Spec2('Subresource Integrity')}}</td> + <td>Adds the integrity attribute.</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatChrome(1.0)}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("1.0")}}<sup>[2]</sup></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>async attribute</td> + <td>{{CompatVersionUnknown}}<sup>[1]</sup></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("1.9.2")}}<sup>[1]</sup></td> + <td>10<sup>[1]</sup></td> + <td>15<sup>[1]</sup></td> + <td>{{CompatVersionUnknown}}<sup>[1]</sup></td> + </tr> + <tr> + <td>defer attribute</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("1.9.1")}}<sup>[6]</sup></td> + <td> + <p>4<sup>[3]</sup><br> + 10</p> + </td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>crossorigin attribute</td> + <td>{{CompatChrome(30.0)}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("13")}}</td> + <td>{{CompatNo}}</td> + <td>12.50</td> + <td>{{CompatVersionUnknown}}<sup>[4]</sup></td> + </tr> + <tr> + <td>integrity attribute</td> + <td>{{CompatChrome(45.0)}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoDesktop("43")}}</td> + <td></td> + <td></td> + <td>{{CompatNo}}<sup>[5]</sup></td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Android Webview</th> + <th>Edge</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + <th>Chrome for Android</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("1.0")}}<sup>[2]</sup></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>async attribute</td> + <td>{{CompatVersionUnknown}}<sup>[1]</sup></td> + <td>{{CompatVersionUnknown}}<sup>[1]</sup></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("1.0")}}<sup>[1]</sup></td> + <td>{{CompatNo}}<sup>[1]</sup></td> + <td>{{CompatUnknown}}<sup>[1]</sup></td> + <td>{{CompatVersionUnknown}}<sup>[1]</sup></td> + <td>{{CompatVersionUnknown}}<sup>[1]</sup></td> + </tr> + <tr> + <td>defer attribute</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("1.0")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>integrity attribute</td> + <td>{{CompatNo}}</td> + <td>{{CompatChrome(45.0)}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoDesktop("43")}}</td> + <td></td> + <td></td> + <td></td> + <td>{{CompatChrome(45.0)}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] In older browsers that don't support the <code>async</code> attribute, parser-inserted scripts block the parser; script-inserted scripts execute asynchronously in IE and WebKit, but synchronously in Opera and pre-4.0 Firefox. In Firefox 4.0, the <code>async</code> DOM property defaults to <code>true</code> for script-created scripts, so the default behavior matches the behavior of IE and WebKit. To request script-inserted external scripts be executed in the insertion order in browsers where the <code>document.createElement("script").async</code> evaluates to <code>true</code> (such as Firefox 4.0), set <code>.async=false</code> on the scripts you want to maintain order. Never call <code>document.write()</code> from an <code>async</code> script. In Gecko 1.9.2, calling <code>document.write()</code> has an unpredictable effect. In Gecko 2.0, calling <code>document.write()</code> from an <code>async</code> script has no effect (other than printing a warning to the error console).</p> + +<p>[2] Starting in Gecko 2.0 {{geckoRelease("2.0")}}, inserting script elements that have been created by calling <code>document.createElement("script")</code> into the DOM no longer enforces execution in insertion order. This change lets Gecko properly abide by the HTML5 specification. To make script-inserted external scripts execute in their insertion order, set <code>.async=false</code> on them.</p> + +<p>Also, {{HTMLElement("script")}} elements inside {{HTMLElement("iframe")}}, {{HTMLElement("noembed")}} and {{HTMLElement("noframes")}} elements are now executed, for the same reasons.</p> + +<p>[3] In versions prior to Internet Explorer 10 Trident implemented <code><script></code> by a proprietary specification. Since version 10 it conforms to the W3C specification.</p> + +<p>[4] The <code>crossorigin</code> attribute was implemented in WebKit in {{WebKitBug(81438)}}.</p> + +<p>[5] {{WebKitBug(148363)}} tracks WebKit implementation of Subresource Integrity (which includes the <code>integrity</code> attribute).</p> + +<p>[6] 从 Gecko 1.9.2 {{geckoRelease("1.9.2")}} 开始，在没有 <code>src</code> 属性的脚本标签上的 <code>defer</code> 属性会被忽略。但是在 Gecko 1.9.1 {{geckoRelease("1.9.1")}} 中，如果定义了 <code>defer</code> 属性，即使内嵌的脚本也会被延迟执行。</p> + +<h2 id="参见">参见</h2> + +<ul> + <li>{{domxref("document.currentScript")}}</li> + <li><a href="http://pieisgood.org/test/script-link-events/">Ryan Grove's <script> and <link> node event compatibility chart</a></li> +</ul> + +<p>{{HTMLRef}}</p> diff --git a/files/zh-cn/web/html/element/section/index.html b/files/zh-cn/web/html/element/section/index.html new file mode 100644 index 0000000000..9a256ca1e7 --- /dev/null +++ b/files/zh-cn/web/html/element/section/index.html @@ -0,0 +1,137 @@ +--- +title: <section> +slug: Web/HTML/Element/section +tags: + - Element + - HTML + - 区块 +translation_of: Web/HTML/Element/section +--- +<div>{{HTMLRef}}</div> + +<p><strong>HTML <section>元素</strong>表示一个包含在HTML文档中的独立部分，它没有更具体的语义元素来表示，一般来说会有包含一个标题。</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/section.html", "tabbed-standard")}}</div> + +<p class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples </a> and send us a pull request.</p> + +<p>例如，导航菜单应该包含在{{htmlelement("nav")}}元素中，但搜索结果列表和地图显示及其控件没有特定元素，可以放在<code><section></code>里。</p> + +<div class="note"> +<p>注意：如果元素的内容作为一个独立的有意义的集合，{{HTMLElement("article")}}元素可能是更好的选择。</p> +</div> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/en-US/docs/Web/HTML/Content_categories">内容分类</a></th> + <td><a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">Flow content</a>, <a href="/en-US/docs/Web/HTML/Content_categories#Sectioning_content">Sectioning content</a>, palpable content.</td> + </tr> + <tr> + <th scope="row">允许的内容</th> + <td><a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">Flow content</a>.</td> + </tr> + <tr> + <th scope="row">标签省略</th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th scope="row">允许的父元素</th> + <td>Any element that accepts <a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">flow content</a>. Note that a <code><section></code> element must not be a descendant of an {{HTMLElement("address")}} element.</td> + </tr> + <tr> + <th scope="row">允许的 ARIA roles</th> + <td>{{ARIARole("alert")}}, {{ARIARole("alertdialog")}}, {{ARIARole("application")}}, {{ARIARole("banner")}}, {{ARIARole("complementary")}}, {{ARIARole("contentinfo")}}, {{ARIARole("dialog")}}, {{ARIARole("document")}}, {{ARIARole("feed")}}, {{ARIARole("log")}}, {{ARIARole("main")}}, {{ARIARole("marquee")}}, {{ARIARole("navigation")}}, {{ARIARole("search")}}, {{ARIARole("status")}}, {{ARIARole("tabpanel")}}</td> + </tr> + <tr> + <th scope="row">DOM 接口</th> + <td>{{domxref("HTMLElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="属性">属性</h2> + +<p><span style="line-height: 21px;">此元素只包含 </span> <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes">全局属性</a></p> + +<h2 id="使用说明">使用说明</h2> + +<ul> + <li>一般通过是否包含一个标题 ({{HTMLElement('h1')}}-{{HTMLElement('h6')}} element) 作为子节点 来 辨识每一个<section>。</li> + <li>如果 <section> 元素的内容可以单独在多个媒体上发表，应该使用 {{HTMLElement("article")}} 而不是 {{HTMLElement("section")}}。</li> + <li>不要把 {{HTMLElement("section")}} 元素作为一个普通的容器来使用，这是本应该是{{HTMLElement("div")}}的用法（特别是当片段（the sectioning ）仅仅是为了美化样式的时候）。 一般来说，一个 {{HTMLElement("section")}} 应该出现在文档大纲中。</li> +</ul> + +<h2 id="范例1：">范例1：</h2> + +<h3 id="之前">之前</h3> + +<pre class="notranslate"><code><div> + <h1>Heading</h1> + <p>Bunch of awesome content</p> +</div></code></pre> + +<h3 id="之后">之后</h3> + +<pre class="notranslate"><code><section> + <h1>Heading</h1> + <p>Bunch of awesome content</p> +</section></code> +</pre> + +<h2 id="范例2：">范例2：</h2> + +<h3 id="之前_2">之前</h3> + +<pre class="notranslate"><code><div> + <h2>Heading</h2> + <img src="bird.jpg" alt="bird"> +</div></code></pre> + +<h3 id="之后_2">之后</h3> + +<pre class="notranslate"><code><section> + <h2>Heading</h2> + <img src="bird.jpg" alt="bird"> +</section></code></pre> + +<h2 id="规范">规范</h2> + +<table> + <thead> + <tr> + <th scope="col">规范</th> + <th scope="col">状态</th> + <th scope="col">注释</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'sections.html#the-section-element', '<section>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5.1', 'sections.html#the-section-element', '<section>')}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'sections.html#the-section-element', '<section>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<p>{{Compat("html.elements.section")}}</p> + +<h2 id="参见">参见</h2> + +<ul> + <li>Other section-related elements: {{HTMLElement("body")}}, {{HTMLElement("nav")}}, {{HTMLElement("article")}}, {{HTMLElement("aside")}}, {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}}, {{HTMLElement("hgroup")}}, {{HTMLElement("header")}}, {{HTMLElement("footer")}}, {{HTMLElement("address")}};</li> + <li class="last"><a class="deki-ns current" href="/en-US/docs/Sections_and_Outlines_of_an_HTML5_document" title="Sections and Outlines of an HTML5 document">Sections and outlines of an HTML5 document</a>.</li> + <li><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/Region_role">ARIA: Region role</a></li> +</ul> diff --git a/files/zh-cn/web/html/element/select/index.html b/files/zh-cn/web/html/element/select/index.html new file mode 100644 index 0000000000..470f6ec2fa --- /dev/null +++ b/files/zh-cn/web/html/element/select/index.html @@ -0,0 +1,221 @@ +--- +title: <select> +slug: Web/HTML/Element/select +tags: + - Element + - Forms + - HTML + - HTML表单 + - 参考 + - 表单 +translation_of: Web/HTML/Element/select +--- +<p>{{HTMLRef}}</p> + +<p><strong>HTML <code><select></code> 元素</strong>表示一个提供选项菜单的控件：</p> + +<p>{{EmbedInteractiveExample("pages/tabbed/select.html", "tabbed-standard")}}</p> + +<p>上述例子展示了 <code><select></code> 的典型用法。元素中设置了 <code>id</code> 属性以将其与 {{htmlelement("label")}} 元素关联在一起，提高可及性（accessibility）。<code>name</code> 属性表示提交到服务器的相关数据点的名字。每个菜单选项由 <code><select></code> 中的一个 {{htmlelement("option")}} 元素定义。</p> + +<p>每个 <code><option></code> 元素都应该有一个 {{htmlattrxref("value", "option")}} 属性，其中包含被选中时需要提交到服务器的数据值。如果不含 <code>value</code> 属性，则 <code>value</code> 值默认为元素中的文本。你可以在 <code><option></code> 元素中设置一个 {{htmlattrxref("selected")}} 属性以将其设置为页面加载完成时默认选中的元素。</p> + +<p><code><select></code> 元素有一些用于控制元素的特有属性，例如 <code>multiple</code> 规定了能不能同时选中多个选项，<code>size</code> 规定了一次性显示多少选项。这个元素也支持大多数常见的表单输入元素属性，如 <code>required</code>, <code>disabled</code>, <code>autofocus</code> 等。</p> + +<p>你还可以将 <code><option></code> 元素放在 {{htmlelement("optgroup")}} 元素中以为下拉菜单创建不同的选项分组。</p> + +<p>在 <a href="https://wiki.developer.mozilla.org/zh-CN/docs/Learn/HTML/Forms/The_native_form_widgets">原生表单部件</a> 中查看更多示例。</p> + +<h2 id="属性">属性</h2> + +<p><span style="line-height: 21px;">包括下列<a href="/en-US/docs/Web/HTML/Global_attributes">全局属性</a>。</span></p> + +<dl> + <dt>{{htmlattrdef("autocomplete")}}</dt> + <dd>一个 {{domxref("DOMString")}}，为 {{Glossary("user agent", "用户代理")}} 提供自动填充功能的线索。 关于该值的完整列表以及如何使用自动填充的详细信息，请参阅 <a href="/zh-CN/docs/Web/HTML/Attributes/自动完成属性">HTML 自动完成属性</a>。</dd> + <dt>{{htmlattrdef("autofocus")}}</dt> + <dd>这个布尔值属性能够让一个对象在页面加载的时候获得焦点。一个文档中只有一个对象可以有这个属性。</dd> + <dt>{{htmlattrdef("disabled")}}</dt> + <dd>这个布尔值的属性表示用户不能与该表单控件交互。如果没有声明这个属性，则从它的父元素继承，例如 <code>fieldset</code>；如果没有父元素设置了 <code>disabled</code> 属性, 那么默认该表单对象可用。</dd> + <dt>{{htmlattrdef("form")}}</dt> + <dd> <code><select></code> 所关联的{{HTMLElement("form")}} (它的"表单拥有者")。其值必须是在同一文档中的 <code><form></code> 元素的{{htmlattrxref("id")}}（如果没有设置这个属性， <code><select></code> 元素则与其任何存在的祖先 <code><form></code> 元素关联）。</dd> + <dd>这个属性让你将 <code><select></code> 元素与文档中任意位置的 <code><form></code> 元素相关联，而不仅仅是包含 <code><select></code> 元素的 <code><form></code> 元素。这个属性还可以覆盖元素的祖先 <code><form></code> 元素。</dd> + <dt>{{htmlattrdef("multiple")}}</dt> + <dd>这个布尔值属性表示列表中的选项是否支持多选。没有声明该值时，一次只能选中一个选项。声明这个属性后，大多数浏览器都会显示一个可滚动的列表框，而非一个下拉菜单。</dd> + <dt>{{htmlattrdef("name")}}</dt> + <dd>该属性规定了控件的名称。</dd> + <dt>{{htmlattrdef("required")}} {{HTMLVersionInline("5")}}</dt> + <dd>一个布尔值属性，表示必须选中一个有非空字符串值的选项。</dd> + <dt>{{htmlattrdef("size")}}</dt> + <dd>如果控件显示为滚动列表框（如声明了 <code>multiple</code>），则此属性表示为控件中同时可见的行数。浏览器不需要将选择元素呈现为滚动列表框。默认值为 0。</dd> +</dl> + +<div class="note"><strong>提示:</strong> 根据 HTML5 规范， 默认值应该为 1； 但是，在实践中，这样会影响到一些网站，同时其它浏览器也没有那么处理，所以 Mozilla 在 Firefox 中选择继续使用默认值 0。</div> + +<dl> +</dl> + +<h2 id="使用笔记">使用笔记</h2> + +<h3 id="选择多个选项">选择多个选项</h3> + +<p>在桌面电脑中，有几种方式在设置了 <code>multiple</code> 属性的 <code><select></code> 元素中选中多个选项：</p> + +<p>鼠标用户可以按住 <kbd>Ctrl</kbd>, <kbd>Command</kbd>, 或 <kbd>Shift</kbd> 键（取决于你的操作系统）然后点击不同选项以选择或取消选择。</p> + +<div class="blockIndicator warning"> +<p><strong>警告：</strong>以下所述的通过键盘选择多个不连续选项的方法目前只在 Firefox 有效（译者注：Chrome 81 也已支持）。</p> + +<p><strong>另请注意：</strong>在 macOS 中， <kbd>Ctrl</kbd> + <kbd>Up</kbd> 和 <kbd>Ctrl</kbd> + <kbd>Down</kbd> 组合键会与系统默认用于任务管理和应用窗口的组合键冲突。所以如果要使用这些组合键，你需要关掉系统默认的组合键。</p> +</div> + +<p>键盘用户可以这样选中多个连续的选项：</p> + +<ul> + <li>聚焦于 <code><select></code> 元素（如使用 <kbd>Tab</kbd>）</li> + <li>使用 <kbd>Up</kbd> 和 <kbd>Down</kbd> 方向键以从下向上或从上向下选择选项。</li> + <li>按住 <kbd>Shift</kbd> 键然后使用 <kbd>Up</kbd> 和 <kbd>Down</kbd> 方向键来增加或减少选中的方向。</li> +</ul> + +<p>键盘用户还可以这样选中多个不连续的选项：</p> + +<ul> + <li>聚焦于 <code><select></code> 元素（例如使用 <kbd>Tab</kbd>）。</li> + <li>按住 <kbd>Ctrl</kbd> 键，然后使用 <kbd>Up</kbd> 和 <kbd>Down</kbd> 方向键来改变聚焦的选项，聚焦的选项使用虚线轮廓高亮，和使用键盘聚焦链接的方式一样。</li> + <li>按下 <kbd>Space</kbd> 以选择或取消选择聚焦的选项。</li> +</ul> + +<h2 id="应用_CSS_样式">应用 CSS 样式</h2> + +<p>众所周知，<code><select></code>元素很难用 CSS 进行高效的设计。你可以像其他元素一样改变某些方面——例如，调整 <a href="https://wiki.developer.mozilla.org/zh-CN/docs/Learn/CSS/Building_blocks/The_box_model">盒模型</a>、<a href="https://wiki.developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Fonts">显示的字体</a> 等，你还可以使用 {{cssxref("appearance")}} 属性来去除默认的系统外观。</p> + +<p>但是，这些属性的表现在不同浏览器之间并不一致，而且有些事情难以很好地处理，例如在一列中顺序排列不同类型的表单元素。 <code><select></code>元素的内部结构复杂，难以控制。 如果你想完全控制，你应该考虑使用一个在修改表单部件样式方面拥有强大能力的库，或者尝试使用非语义元素和 JavaScript 来制作下拉菜单，再使用 <a href="https://wiki.developer.mozilla.org/zh-CN/docs/learn/Accessibility/WAI-ARIA_basics">WAI-ARIA</a> 来提供语义。</p> + +<p>有关样式<code><select></code>的更多有用信息，请参阅：</p> + +<ul> + <li><a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Forms/Styling_HTML_forms">Styling HTML forms</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Forms/Advanced_styling_for_HTML_forms">Advanced styling for HTML forms</a></li> +</ul> + +<h2 id="示例">示例</h2> + +<h3 id="基本选择">基本选择</h3> + +<pre class="brush: html"><!-- 第二项会默认选中 --> +<select name="select"> + <option value="value1">Value 1</option> + <option value="value2" selected>Value 2</option> + <option value="value3">Value 3</option> +</select> +</pre> + +<h4 id="结果">结果</h4> + +<p><select name="select"><option value="value1">Value 1</option><option selected value="value2">Value 2</option><option value="value3">Value 3</option></select></p> + +<h3 id="使用多选的进阶选择">使用多选的进阶选择</h3> + +<p>下面的例子更加复杂，展示了可用在 <code><select></code> 元素上的更多功能：</p> + +<pre><label>Please choose one or more pets: + <select name="pets" multiple size="4"> + <optgroup label="4-legged pets"> + <option value="dog">Dog</option> + <option value="cat">Cat</option> + <option value="hamster" disabled>Hamster</option> + </optgroup> + <optgroup label="Flying pets"> + <option value="parrot">Parrot</option> + <option value="macaw">Macaw</option> + <option value="albatross">Albatross</option> + </optgroup> + </select> +</label> +</pre> + +<p><iframe class="live-sample-frame sample-code-frame" frameborder="0" height="100" id="frame_Advanced_select_with_multiple_features" src="https://mdn.mozillademos.org/en-US/docs/Web/HTML/Element/select$samples/Advanced_select_with_multiple_features?revision=1625986"></iframe></p> + +<p>你会看见：</p> + +<ul> + <li>可选中多个选项，因为我们使用了 <code>multiple</code> 属性。</li> + <li><code>size</code> 属性导致一次只有 4 行能显示；你可以滚动查看所有选项。</li> + <li>我们在其中使用了 {{htmlelement("optgroup")}} 元素来将选项分成不同组别。这单纯是视觉上的分组，一般来说，分组由加粗的组名和缩进的选项组成。</li> + <li>"Hamster"选项使用了<code>disabled</code> 属性，因此不能被选中。</li> +</ul> + +<h2 id="技术概览">技术概览</h2> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/HTML/Content_categories">内容分类</a></th> + <td><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/HTML/Content_categories#Flow_content">Flow content</a>, <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/HTML/Content_categories#Phrasing_content">phrasing content</a>, <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/HTML/Content_categories#Interactive_content">interactive content</a>, <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/HTML/Content_categories#Form_listed">listed</a>, <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/HTML/Content_categories#Form_labelable">labelable</a>, <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/HTML/Content_categories#Form_resettable">resettable</a>, and <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/HTML/Content_categories#Form_submittable">submittable</a> <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/HTML/Content_categories#Form-associated_">form-associated </a>element</td> + </tr> + <tr> + <th scope="row">允许的内容</th> + <td>Zero or more {{HTMLElement("option")}} or {{HTMLElement("optgroup")}} elements.</td> + </tr> + <tr> + <th scope="row">标签省略</th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th scope="row">允许的父元素</th> + <td>Any element that accepts <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/HTML/Content_categories#Phrasing_content">phrasing content</a>.</td> + </tr> + <tr> + <th scope="row">Implicit ARIA role</th> + <td>{{ARIARole("combobox")}} with <strong>no</strong> <code>multiple</code> attribute and <strong>no</strong> <code>size</code> attribute greater than 1, otherwise {{ARIARole("listbox")}}</td> + </tr> + <tr> + <th scope="row">Permitted ARIA roles</th> + <td>{{ARIARole("menu")}} with <strong>no</strong> <code>multiple</code> attribute and <strong>no</strong> <code>size</code> attribute greater than 1, otherwise no <code>role</code> permitted</td> + </tr> + <tr> + <th scope="row">DOM 接口</th> + <td>{{domxref("HTMLSelectElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="规范">规范</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">规范</th> + <th scope="col">状态</th> + <th scope="col">注释</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'forms.html#the-select-element', '<select>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'forms.html#the-select-element', '<select>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'interact/forms.html#h-17.6', '<select>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<div>{{Compat("html.elements.select")}}</div> + +<h2 id="参见">参见</h2> + +<ul> + <li>其它表单对象: {{HTMLElement("form")}}, {{HTMLElement("legend")}}, {{HTMLElement("label")}}, {{HTMLElement("button")}}, {{HTMLElement("option")}}, {{HTMLElement("datalist")}}, {{HTMLElement("optgroup")}}, {{HTMLElement("fieldset")}}, {{HTMLElement("textarea")}}, {{HTMLElement("keygen")}}, {{HTMLElement("input")}}, {{HTMLElement("output")}}, {{HTMLElement("progress")}} 和 {{HTMLElement("meter")}}。</li> + <li>由 <code><select></code> 触发的事件： {{domxref("HTMLElement/change_event", "change")}}, {{domxref("HTMLElement/input_event", "input")}}</li> +</ul> diff --git a/files/zh-cn/web/html/element/shadow/index.html b/files/zh-cn/web/html/element/shadow/index.html new file mode 100644 index 0000000000..440d8d23ad --- /dev/null +++ b/files/zh-cn/web/html/element/shadow/index.html @@ -0,0 +1,165 @@ +--- +title: <shadow> +slug: Web/HTML/Element/Shadow +translation_of: Web/HTML/Element/shadow +--- +<p>{{obsolete_header}}</p> + +<p><span class="seoSummary"><strong>HTML <code><shadow></code> 元素 </strong>— <a href="/en-US/docs/Web/Web_Components">Web 组件</a>技术套件的废弃部分 — 目的是用作 Shadow DOM {{glossary("insertion point")}}。如果你在 shadow host 下面创建了多个 shadow root，你就可能已经使用了它。在正常的 HTML 没有任何用处。</span></p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/en-US/docs/Web/HTML/Content_categories">内容分类</a></th> + <td><a href="/en-US/docs/Web/HTML/Content_categories#Transparent_content_model">透明内容</a></td> + </tr> + <tr> + <th scope="row">允许的内容</th> + <td><a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">流式内容</a></td> + </tr> + <tr> + <th scope="row">标签省略</th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th scope="row">允许的父元素</th> + <td>任何接受流式内容的元素 </td> + </tr> + <tr> + <th scope="row">允许的 ARIA 角色</th> + <td>无</td> + </tr> + <tr> + <th scope="row">DOM 接口</th> + <td>{{domxref("HTMLShadowElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="属性">属性</h2> + +<p>这个元素支持 <a href="/en-US/docs/Web/HTML/Global_attributes">全局属性</a>。</p> + +<h2 id="示例">示例</h2> + +<p>这里是一个使用 <code><shadow></code> 元素的简单示例。它是个包含所有所需东西的 HTML 文件。</p> + +<div class="note"> +<p><strong>注：</strong>这是个实验性的技术。为了使这个代码有效，你使用的浏览器必须支持 Web 组件。请见<a href="/en-US/docs/Web/Web_Components#Enabling_Web_Components_in_Firefox">在 Firefox 中开启 Web 组件</a>。</p> +</div> + +<pre class="brush: html"><html> + <head></head> + <body> + + <!-- This <div> will hold the shadow roots. --> + <div> + <!-- This heading will not be displayed --> + <h4>My Original Heading</h4> + </div> + + <script> + // Get the <div> above with its content + var origContent = document.querySelector('div'); + // Create the first shadow root + var shadowroot1 = origContent.createShadowRoot(); + // Create the second shadow root + var shadowroot2 = origContent.createShadowRoot(); + + // Insert something into the older shadow root + shadowroot1.innerHTML = + '<p>Older shadow root inserted by + &lt;shadow&gt;</p>'; + // Insert into younger shadow root, including <shadow>. + // The previous markup will not be displayed unless + // <shadow> is used below. + shadowroot2.innerHTML = + '<shadow></shadow> <p>Younger shadow + root, displayed because it is the youngest.</p>'; + </script> + + </body> +</html> +</pre> + +<p>如果你在 Web 浏览器中展示它，它应该是这样：</p> + +<p><img alt="shadow example" src="https://mdn.mozillademos.org/files/10083/shadow-example.png" style="height: 343px; width: 641px;"></p> + +<h2 id="规范">规范</h2> + +<table class="spec-table standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('Shadow DOM', "#the-shadow-element", "shadow")}}</td> + <td>{{Spec2('Shadow DOM')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Basic support</td> + <td>35</td> + <td>{{CompatGeckoDesktop("28")}}<sup>[1]</sup></td> + <td>{{CompatNo}}</td> + <td>26</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>37</td> + <td>{{CompatGeckoMobile("28")}}<sup>[1]</sup></td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] 如果 Firefox 上没有开启 Shadow DOM， <code><shadow></code> 元素会表现为 {{domxref("HTMLUnknownElement")}}，Shadow DOM 首先在 Firefox 33 中实现，并且在首选项 <code>dom.webcomponents.enabled</code> 背后，它默认是关闭的。</p> + +<h2 id="另见">另见</h2> + +<ul> + <li><a href="/en-US/docs/Web/Web_Components">Web 组件</a></li> + <li>{{HTMLElement("content")}}, {{HTMLElement("slot")}}, {{HTMLElement("template")}}, {{HTMLElement("element")}}</li> +</ul> + +<div>{{HTMLRef}}</div> diff --git a/files/zh-cn/web/html/element/slot/index.html b/files/zh-cn/web/html/element/slot/index.html new file mode 100644 index 0000000000..2958c76bd5 --- /dev/null +++ b/files/zh-cn/web/html/element/slot/index.html @@ -0,0 +1,124 @@ +--- +title: <slot> +slug: Web/HTML/Element/slot +tags: + - Web Components + - Web 组件 + - slot + - 插槽 +translation_of: Web/HTML/Element/slot +--- +<p>{{HTMLRef}}</p> + +<div class="note"> +<p><strong>译者注：</strong> 本翻译的一些术语参考了<a href="https://cn.vuejs.org/v2/guide/components-slots.html">Vuejs-中文</a>页面。</p> +</div> + +<p><span class="seoSummary"><strong>HTML <code> <slot> </code> 元素 ，</strong>作为 <a href="/en-US/docs/Web/Web_Components">Web Components</a> 技术套件的一部分，是</span>Web组件内的一个占位符。该占位符可以在后期使用自己的标记语言填充，这样您就可以创建单独的DOM树，并将它与其它的组件组合在一起。</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/en-US/docs/Web/HTML/Content_categories">Content categories</a></th> + <td><a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">Flow content</a>, <a href="/en-US/docs/Web/HTML/Content_categories#Phrasing_content">phrasing content</a></td> + </tr> + <tr> + <th scope="row">Permitted content</th> + <td><a href="/en-US/docs/Web/HTML/Content_categories#Transparent_content_model">Transparent</a></td> + </tr> + <tr> + <th scope="row">Events</th> + <td>{{event("slotchange")}}</td> + </tr> + <tr> + <th scope="row">Tag omission</th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th scope="row">Permitted parents</th> + <td>Any element that accepts <a href="/en-US/docs/Web/HTML/Content_categories#Phrasing_content">phrasing content</a></td> + </tr> + <tr> + <th scope="row">Permitted ARIA roles</th> + <td>None</td> + </tr> + <tr> + <th scope="row">DOM interface</th> + <td>{{domxref("HTMLSlotElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="属性">属性</h2> + +<p>此元素有<a href="/en-US/docs/Web/HTML/Global_attributes">全局属性</a>。</p> + +<dl> + <dt>{{htmlattrdef("name")}}</dt> + <dd>插槽的名字</dd> + <dd>拥有<font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">name</span></font>属性的插槽叫<dfn><strong>具名插槽</strong></dfn> 。</dd> +</dl> + +<h2 id="示例">示例</h2> + +<pre class="brush: html"><template id="element-details-template"> + <style> + details {font-family: "Open Sans Light", Helvetica, Arial, sans-serif } + .name {font-weight: bold; color: #217ac0; font-size: 120% } + h4 { + margin: 10px 0 -8px 0; + background: #217ac0; + color: white; + padding: 2px 6px; + border: 1px solid #cee9f9; + border-radius: 4px; + } + .attributes { margin-left: 22px; font-size: 90% } + .attributes p { margin-left: 16px; font-style: italic } + </style> + <details> + <summary> + <code class="name">&lt;<slot name="element-name">NEED NAME</slot>&gt;</code> + <i class="desc"><slot name="description">NEED DESCRIPTION</slot></i> + </summary> + <div class="attributes"> + <h4>Attributes</h4> + <slot name="attributes"><p>None</p></slot> + </div> + </details> + <hr> +</template></pre> + +<div class="note"> +<p><strong>Note</strong>: 您可以在 <a class="external external-icon" href="https://github.com/mdn/web-components-examples/tree/master/element-details" rel="noopener">element-details</a> (see it <a class="external external-icon" href="https://mdn.github.io/web-components-examples/element-details/" rel="noopener">running live</a>)找到这个示例的完整演示版。另外，您也可以在<a href="/en-US/docs/Web/Web_Components/Using_templates_and_slots">Using templates and slots</a>这里找到具体的解释。</p> +</div> + +<h2 id="规范">规范</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comments</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG','scripting.html#the-slot-element','<slot>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('DOM WHATWG','#shadow-tree-slots','Slots')}}</td> + <td>{{Spec2('DOM WHATWG')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + + + +<p>{{Compat("html.elements.slot")}}</p> diff --git a/files/zh-cn/web/html/element/small/index.html b/files/zh-cn/web/html/element/small/index.html new file mode 100644 index 0000000000..5c661cf515 --- /dev/null +++ b/files/zh-cn/web/html/element/small/index.html @@ -0,0 +1,119 @@ +--- +title: <small> +slug: Web/HTML/Element/small +tags: + - HTML + - 元素 +translation_of: Web/HTML/Element/small +--- +<div>{{HTMLRef}}</div> + +<p>HTML 中的<small>元素將使文本的字体变小一号。(例如从大变成中等，从中等变成小，从小变成超小)。在HTML5中，除了它的样式含义，这个元素被重新定义为表示边注释和附属细则，包括版权和法律文本。</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/small.html", "tabbed-shorter")}}</div> + +<p class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples </a> and send us a pull request.</p> + +<table> + <tbody> + <tr> + <th scope="row">内容分类</th> + <td><a href="https://developer.mozilla.org/en-US/docs/HTML/Content_categories#Flow_content">流式内容</a>， <a href="https://developer.mozilla.org/en-US/docs/HTML/Content_categories#Phrasing_content">短语内容</a></td> + </tr> + <tr> + <th scope="row">允许的内容</th> + <td><a href="https://developer.mozilla.org/en-US/docs/HTML/Content_categories#Phrasing_content">短语内容</a></td> + </tr> + <tr> + <th scope="row">标签省略</th> + <td>无，必须拥有起始和结束标签</td> + </tr> + <tr> + <th scope="row">允许的父元素</th> + <td>接受<a href="https://developer.mozilla.org/en-US/docs/HTML/Content_categories#Phrasing_content">短语内容</a>或者<a href="https://developer.mozilla.org/en-US/docs/HTML/Content_categories#Flow_content">流式内容</a>的任何元素。</td> + </tr> + <tr> + <th scope="row">允许的 ARIA 角色</th> + <td>任意</td> + </tr> + <tr> + <th scope="row">DOM 接口</th> + <td>{{domxref("HTMLElement")}}</td> + </tr> + </tbody> +</table> + +<h2 class="editable" id="属性">属性</h2> + +<p>这个元素只有全局属性。</p> + +<h2 id="DOM_Interface" name="DOM_Interface">DOM 接口</h2> + +<p>这个元素实现 {{domxref("HTMLElement")}}接口。</p> + +<div class="note"> +<p><strong>接口实现注解：</strong>直到 Gecko 1.9.2，Firefox 为这个元素实现了 {{domxref("HTMLSpanElement")}}接口。</p> +</div> + +<h2 id="Example_1" name="Example_1">例子</h2> + +<h3 id="例子1">例子1</h3> + +<pre class="brush: html"><p>This is the first sentence. <small>This whole sentence is in small letters.</small></p> +</pre> + +<h4 id="Result" name="Result">结果</h4> + +<p>This is the first sentence. <small>This whole sentence is in small letters.</small></p> + +<h3 id="Example_2" name="Example_2">例子2 (CSS 替代)</h3> + +<pre class="brush: html"><p>This is the first sentence. <span style="font-size:0.8em">This whole sentence is in small letters.</span></p> +</pre> + +<h4 id="Result_2" name="Result_2">结果 </h4> + +<p>This is the first sentence. <span style="font-size: 0.8em;">This whole sentence is in small letters.</span></p> + +<h2 id="规范">规范</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">规范</th> + <th scope="col">状态</th> + <th scope="col">注释</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML5 W3C', 'text-level-semantics.html#the-small-element', '<small>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', '/present/graphics.html#edef-SMALL', '<small>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Notes" name="Notes">注意事项</h2> + +<p>尽管<span style="font-family: Courier New;"> <small></span> 元素，<span style="font-family: Courier New;"><b> 元素</span>和 <span style="font-family: Courier New;"><i></span> 元素被认为违反了结构和样式分离的原则, 但是在HTML5中是允许使用这三个元素的. 读者应该自行判断使用 <small> 还是CSS。</p> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<p>{{Compat("html.elements.small")}}</p> + + + +<h2 id="See_also" name="See_also">另请参考</h2> + +<ul> + <li>{{ HTMLElement("b") }}</li> + <li>{{ HTMLElement("font") }}</li> + <li>{{ HTMLElement("style") }}</li> + <li>HTML 4.01 规范： <a class="external" href="http://www.w3.org/TR/html4/present/graphics.html#h-15.2">字体样式</a></li> +</ul> diff --git a/files/zh-cn/web/html/element/source/index.html b/files/zh-cn/web/html/element/source/index.html new file mode 100644 index 0000000000..8beedaffea --- /dev/null +++ b/files/zh-cn/web/html/element/source/index.html @@ -0,0 +1,217 @@ +--- +title: Source +slug: Web/HTML/Element/source +translation_of: Web/HTML/Element/source +--- +<h2 id="概述">概述</h2> + +<p><strong>HTML <code><source></code> </strong>元素为 {{HTMLElement("picture")}}, {{HTMLElement("audio")}} 或者 {{HTMLElement("video")}} 元素指定多个媒体资源。这是一个空元素。它通常用于以<a href="/zh-CN/docs/Web/HTML/Supported_media_formats">不同浏览器支持的多种格式</a>提供相同的媒体内容。</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"> + <p>Usage Context</p> + </th> + <td>A media element ({{HTMLElement("audio")}} or {{HTMLelement("video")}}, and it should be placed before any <a href="/en-US/docs/HTML/Content_categories#Flow_content">flow content</a> or {{HTMLElement("track")}} element.</td> + </tr> + <tr> + <th scope="row"><dfn>Permitted parent elements</dfn></th> + <td>A {{HTMLElement("picture")}} element, and it should be placed before the {{HTMLElement("img")}} element.</td> + </tr> + <tr> + <th scope="row"><a href="/en-US/docs/Web/HTML/Content_categories">Content categories</a></th> + <td>None.</td> + </tr> + <tr> + <th scope="row">Permitted content</th> + <td>None, it is an {{Glossary("empty element")}}.</td> + </tr> + <tr> + <th scope="row">Tag omission</th> + <td>It must have start tag, but must not have an end tag.</td> + </tr> + <tr> + <th scope="row">DOM interface</th> + <td>{{domxref("HTMLSourceElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="属性">属性</h2> + +<p>该元素包含 <a href="https://developer.mozilla.org/en-US/docs/HTML/Global_attributes">全局属性</a>.</p> + +<dl> + <dt>{{htmlattrdef("sizes")}} {{experimental_inline}}</dt> + <dd>Is a list of source sizes that describes the final rendered width of the image represented by the source. Each source size consists of a comma-separated list of media condition-length pairs. This information is used by the browser to determine, before laying the page out, which image defined in {{htmlattrxref("srcset", "source")}} to use.<br> + The <code>sizes</code> attribute has an effect only when the {{HTMLElement("source")}} element is the direct child of a {{HTMLElement("picture")}} element.</dd> + <dt>{{htmlattrdef("src")}}</dt> + <dd>Required for {{HTMLElement("audio")}} and {{HTMLElement("video")}}, address of the media resource. The value of this attribute is ignored when the <code><source></code> element is placed inside a {{HTMLElement("picture")}} element.</dd> + <dt>{{htmlattrdef("srcset")}} {{experimental_inline}}</dt> + <dd>A list of one or more strings separated by commas indicating a set of possible images represented by the source for the browser to use. Each string is composed of: + <ol> + <li>one URL to an image,</li> + <li>a width descriptor, that is a positive integer directly followed by <code>'w'</code>. The default value, if missing, is the infinity.</li> + <li>a pixel density descriptor, that is a positive floating number directly followed by <code>'x'</code>. The default value, if missing, is <code>1x</code>.</li> + </ol> + + <p>Each string in the list must have at least a width descriptor or a pixel density descriptor to be valid. Among the list, there must be only one string containing the same tuple of width descriptor and pixel density descriptor.<br> + The browser chooses the most adequate image to display at a given point of time.<br> + The <code>srcset</code> attribute has an effect only when the {{HTMLElement("source")}} element is the direct child of a {{HTMLElement("picture")}} element.</p> + </dd> + <dt>{{htmlattrdef("type")}}</dt> + <dd>The MIME-type of the resource, optionally with a <code>codecs</code> parameter. See <a class="external" href="http://tools.ietf.org/html/rfc4281">RFC 4281</a> for information about how to specify codecs.</dd> + <dt>{{htmlattrdef("media")}} {{experimental_inline}}</dt> + <dd><a class="internal" href="/en-US/docs/CSS/Media_queries">Media query</a> of the resource's intended media; this should be used only in a {{HTMLElement("picture")}} element.</dd> +</dl> + +<p>If the <strong>type</strong> attribute isn't specified, the media's type is retrieved from the server and checked to see if Gecko can handle it; if it can't be rendered, the next <strong>source</strong> is checked. If the <strong>type</strong> attribute is specified, it's compared against the types Gecko can play, and if it's not recognized, the server doesn't even get queried; instead, the next <strong>source</strong> element is checked at once.</p> + +<h2 id="Examples">Examples</h2> + +<p>This example demonstrates how to offer a video in Ogg format for users whose browsers support Ogg format, and a QuickTime format video for users whose browsers support that. If the<code> audio</code> or <code>video</code> element is not supported by the browser, a notice is displayed instead. If the browser supports the element but does not support any of the specified formats, an <code>error</code> event is raised and the default media controls (if enabled) will indicate an error. See also the list of <a href="/en-US/docs/Media_formats_supported_by_the_audio_and_video_elements">media formats supported by the audio and video elements</a> in various browsers.</p> + +<pre class="brush: html"><video controls> + <source src="foo.webm" type="video/webm"> + <source src="foo.ogg" type="video/ogg"> + <source src="foo.mov" type="video/quicktime"> + I'm sorry; your browser doesn't support HTML5 video. +</video> +</pre> + +<p>For more examples, see <a class="internal" href="/en-US/docs/Using_HTML5_audio_and_video">Using audio and video in Firefox</a>.</p> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'edits.html#the-source-element-when-used-with-the-picture-element', '<source>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>Initial definition of <code><source></code> used inside a {{HTMLElement("picture")}} element.</td> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', 'the-video-element.html#the-source-element', '<source>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>Initial definition of <code><source></code> used inside a media element, {{HTMLElement("audio")}} or {{HTMLElement("video")}}.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("1.9.1")}}</td> + <td>9.0</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>media</code> attribute</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("15.0")}}</td> + <td>9.0</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>sizes</code> attribute</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoDesktop(33)}}<sup>[1]</sup></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>srcset</code> attribute</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoDesktop(33)}}<sup>[1]</sup></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("1.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>media</code> attribute</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("15.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>sizes</code> attribute</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile(33)}}<sup>[1]</sup></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>srcset</code> attribute</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile(33)}}<sup>[1]</sup></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] This feature is behind the <code>dom.image.picture.enabled</code> preference, defaulting to <code>false</code>.</p> + +<p>Currently, only a small subset of the functionality is implemented — Gecko picks the first source element that has a type matching <a href="/en-US/docs/Media_formats_supported_by_the_audio_and_video_elements">the MIME-type of a supported media format</a>; see {{bug(449363)}} for details.</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{HTMLElement("picture")}} element</li> +</ul> + +<p>{{HTMLRef}}</p> diff --git a/files/zh-cn/web/html/element/spacer/index.html b/files/zh-cn/web/html/element/spacer/index.html new file mode 100644 index 0000000000..6550598409 --- /dev/null +++ b/files/zh-cn/web/html/element/spacer/index.html @@ -0,0 +1,41 @@ +--- +title: <spacer> +slug: Web/HTML/Element/spacer +translation_of: Web/HTML/Element/spacer +--- +<div>{{non-standard_header}}{{ obsolete_header }}</div> + +<p><span class="seoSummary"><strong><code><spacer></code></strong> 是过时的 HTML 元素，它可以向页面插入间隔。它由 Netscape 设计，用于实现单像素布局图像的相同效果，Web 设计师用它来向页面添加空白，而不需要实际使用图片。 但是，<code><spacer></code> 不再受任何主流浏览器支持，并且相同效果可以简单由 CSS 实现。</span></p> + +<p>Firefox 是 Netscape 浏览器的后继，在版本 4 中移除了 <code><spacer> </code>的支持。</p> + +<h2 id="Attributes" name="Attributes">属性</h2> + +<p>就像其他 HTML 元素一样，这个元素支持 <a href="/en-US/docs/HTML/Global_attributes" title="HTML/Global attributes">全局属性</a>。</p> + +<dl> + <dt>{{ htmlattrdef("type") }}</dt> + <dd>这个属性指定间隔的类型，可用的值为 <code>horizontal</code>, <code>vertical</code> 和 <code>block</code>。</dd> + <dt>{{ htmlattrdef("size") }}</dt> + <dd>当类型为 <code>horizontal</code> 或 <code>vertical</code> 时，这个属性可以用于定义间隔大小，以像素为单位。</dd> + <dt>{{ htmlattrdef("width") }}</dt> + <dd>当类型为 <code>block</code> 时，这个属性可以用于定义间隔的宽度，以像素为单位。</dd> + <dt>{{ htmlattrdef("height") }}</dt> + <dd>当类型为 <code>block</code> 时，这个属性可以用于定义间隔的高度，以像素为单位。</dd> + <dt>{{ htmlattrdef("align") }}</dt> + <dd>这个属性定义了间隔的对齐，可用的值为 <code>left</code>, <code>right</code> 和 <code>center</code>。</dd> +</dl> + +<h2 id="示例">示例</h2> + +<pre class="brush:html"><span>Just a text node</span> +<spacer type="horizontal" size="10"></spacer> +<span>Just another text node</span> +<spacer type="block" width="10" height="10"></spacer> +</pre> + +<h2 id="规范">规范</h2> + +<p>并不是任何规范的一部分。</p> + +<p>{{ HTMLRef }}</p> diff --git a/files/zh-cn/web/html/element/span/index.html b/files/zh-cn/web/html/element/span/index.html new file mode 100644 index 0000000000..4470ad4e80 --- /dev/null +++ b/files/zh-cn/web/html/element/span/index.html @@ -0,0 +1,96 @@ +--- +title: <span> +slug: Web/HTML/Element/span +tags: + - HTML + - span + - 元素 + - 流内容 + - 行内元素 +translation_of: Web/HTML/Element/span +--- +<div>{{HTMLRef}}</div> + +<p><strong>HTML <code><span></code> </strong>元素是短语内容的通用行内容器，并没有任何特殊语义。可以使用它来编组元素以达到某种样式意图（通过使用类或者Id属性），或者这些元素有着共同的属性，比如<strong>lang</strong>。应该在没有其他合适的语义元素时才使用它。<code><span></code> 与 {{HTMLElement("div")}} 元素很相似，但 {{HTMLElement("div")}} 是一个 <a href="/en-US/docs/HTML/Block-level_elements">块元素</a> 而 <code><span></code> 则是 <a href="/en-US/docs/HTML/Inline_elements"> 行内元素 </a>.</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/span.html", "tabbed-shorter")}}</div> + +<div class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> and send us a pull request.</div> + +<ul class="htmlelt"> + <li><dfn><a href="/en-US/docs/HTML/Content_categories" title="HTML/Content_categories">内容分类</a></dfn> <a href="/en-US/docs/HTML/Content_categories#Flow_content" title="HTML/Content categories#Flow content">流内容</a>, <a href="/en-US/docs/HTML/Content_categories#Phrasing_content" title="HTML/Content categories#Phrasing content">表述内容</a>.</li> + <li><dfn>允许的内容</dfn><a href="/zh-CN/docs/Web/Guide/HTML/Content_categories#Phrasing_content">短语元素</a></li> + <li><dfn>标签省略</dfn> 不允许，开始标签和结束标签都不能省略。</li> + <li><dfn>允许的父元素</dfn>任意可以包含 <a href="/en-US/docs/HTML/Content_categories#Phrasing_content" title="https://developer.mozilla.org/en-US/docs/HTML/Content_categories#Phrasing_content">表述内容</a> 或 <a href="/en-US/docs/HTML/Content_categories#Flow_content" title="https://developer.mozilla.org/en-US/docs/HTML/Content_categories#Flow_content">流内容</a> 的元素。</li> + <li><dfn>DOM 接口</dfn>{{domxref("HTMLSpanElement")}} (在 {{glossary("HTML5")}}, 之前是 {{domxref("HTMLElement")}})</li> +</ul> + +<h2 id="Attributes" name="Attributes">属性</h2> + +<p><span style="line-height: 21px;">该元素仅包含 </span><a href="https://developer.mozilla.org/en-US/docs/HTML/Global_attributes" style="line-height: 21px;" title="HTML/Global attributes">全局属性</a>。</p> + +<h2 id="Example1" name="Example1">例 1</h2> + +<pre class="brush:html;gutter:false notranslate"><p><span>一些文字</span></p></pre> + +<h3 id="Result1" name="Result1">结果</h3> + +<p>{{EmbedLiveSample('Example1')}}</p> + +<h2 id="Example2" name="Example2">例 2</h2> + +<pre class="brush:html;gutter:false notranslate"><li><span> + <a href="portfolio.html" target="_blank">See my portfolio</a> +</span></li> +</pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush:css notranslate; notranslate"><code>li span { + background: gold; + }</code></pre> + +<h3 id="Result2" name="Result2">结果</h3> + +<p>{{EmbedLiveSample('Example2')}}</p> + +<h2 id="规范">规范</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">规范</th> + <th scope="col">状态</th> + <th scope="col">注释</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'text-level-semantics.html#the-span-element', '<span>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'text-level-semantics.html#the-span-element', '<span>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td> + <p>{{domxref("HTMLSpanElement")}} (在 {{glossary("HTML5")}}, 之前是 {{domxref("HTMLElement")}})</p> + </td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/global.html#edef-SPAN', '<span>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="See_also" name="See_also">浏览器兼容性</h2> + +<p>{{Compat("html.elements.span")}}</p> + +<h2 id="See_also" name="See_also">参见</h2> + +<ul> + <li>HTML {{HTMLElement("div")}} 元素</li> +</ul> diff --git a/files/zh-cn/web/html/element/strike/index.html b/files/zh-cn/web/html/element/strike/index.html new file mode 100644 index 0000000000..c9481e3c88 --- /dev/null +++ b/files/zh-cn/web/html/element/strike/index.html @@ -0,0 +1,47 @@ +--- +title: <strike> +slug: Web/HTML/Element/strike +translation_of: Web/HTML/Element/strike +--- +<div>{{ Obsolete_header() }}</div> + +<h2 id="Summary">Summary</h2> + +<p><strong>HTML <code><strike></code> 元素</strong>（或者 HTML 删除线元素）在文本上放置删除线。</p> + +<div class="note"> +<p><strong>使用注解</strong>：这个元素在 HTML4 和 XHTML1 中废除了，并且在 HTML5 中移除。如果语义上合适的话（也就是如果表示删除的内容），使用 {{ HTMLElement("del") }} 来代替。在所有其它的情况中，使用 {{ HTMLElement("s") }}。</p> +</div> + +<h2 id="属性">属性</h2> + +<p>这个元素仅仅包含 <a href="https://developer.mozilla.org/en-US/docs/HTML/Global_attributes">全局属性</a></p> + +<h2 id="DOM_接口">DOM 接口</h2> + +<p>这个元素实现了 {{domxref('HTMLElement')}} 接口。</p> + +<div class="note"> +<p><strong>实现注解：</strong>直到 Gecko 1.9.2（包含），Firefox 为这个元素实现了 {{domxref('HTMLSpanElement')}} 接口。</p> +</div> + +<h2 id="示例">示例</h2> + +<pre class="brush:html"><strike>Today's Special: Salmon</strike> SOLD OUT<br /> +<s>Today's Special: Salmon</s> SOLD OUT +</pre> + +<p id="Result">代码结果为：</p> + +<p><s>Today's Special: Salmon</s> SOLD OUT<br> + <s>Today's Special: Salmon</s> SOLD OUT</p> + +<h2 id="另见">另见</h2> + +<ul> + <li>{{ HTMLElement("s") }} 元素。</li> + <li>{{ HTMLElement("del") }} 元素应该在数据已经删除的情况下使用。</li> + <li>CSS {{ cssxref("text-decoration") }} 属性可以用于使用下划线来装饰文本。</li> +</ul> + +<div>{{ HTMLRef }}</div> diff --git a/files/zh-cn/web/html/element/strong/index.html b/files/zh-cn/web/html/element/strong/index.html new file mode 100644 index 0000000000..3c26687500 --- /dev/null +++ b/files/zh-cn/web/html/element/strong/index.html @@ -0,0 +1,82 @@ +--- +title: <strong> +slug: Web/HTML/Element/strong +tags: + - HTML + - Web + - 元素 + - 文本级语义 +translation_of: Web/HTML/Element/strong +--- +<h2 id="总结">总结</h2> + +<p>Strong 元素 (<code><strong></code>)表示文本十分重要，一般用粗体显示。</p> + +<h2 id="使用环境">使用环境</h2> + +<table class="standard-table"> + <tbody> + <tr> + <td>内容分类</td> + <td>流内容, 语法内容</td> + </tr> + <tr> + <td>允许的内容</td> + <td><a href="/en-US/docs/HTML/Content_categories#Phrasing_content" title="HTML/Content categories#Phrasing content">Phrasing content</a></td> + </tr> + <tr> + <td>标签省略</td> + <td>不允许，必须同时有起始和结束标签</td> + </tr> + <tr> + <td>允许的父级元素</td> + <td>任何接受<a href="/en-US/docs/HTML/Content_categories#Phrasing_content" title="https://developer.mozilla.org/en/HTML/Content_categories#Phrasing_content">phrasing content</a>的元素, 或者接受 <a href="/en-US/docs/HTML/Content_categories#Flow_content" title="https://developer.mozilla.org/en/HTML/Content_categories#Flow_content">flow content</a>的元素</td> + </tr> + <tr> + <td>规范文档</td> + <td><a href="http://www.w3.org/TR/html5/text-level-semantics.html#the-strong-element" title="http://www.w3.org/TR/html5/text-level-semantics.html#the-strong-element">HTML5, section 4.6.3</a>; <a href="http://www.w3.org/TR/html401/struct/text.html#edef-STRONG" title="http://www.w3.org/TR/html401/struct/text.html#edef-STRONG">HTML 4.01, section 9.2.1</a></td> + </tr> + </tbody> +</table> + +<h2 id="属性">属性</h2> + +<p>只具有<a href="https://developer.mozilla.org/zh-CN/docs/Web/HTML/Global_attributes">全局属性</a>.</p> + +<h2 id="DOM_接口">DOM 接口</h2> + +<p><code>实现了<a href="/en-US/docs/DOM/element" title="DOM/element">HTMLElement</a></code> 接口。</p> + +<div class="note"> +<p>实现注意事项<strong>: </strong>一直到Gecko 1.9.2 (含), Firefox 对这个元素实现了 <a href="/en-US/docs/DOM/span" title="DOM/span"><code>HTMLSpanElement</code></a> 接口</p> +</div> + +<h2 id="举例">举例</h2> + +<pre class="brush: html"><p>When doing x it is <strong>imperative</strong> to do y before proceeding.</p> +</pre> + +<h2 id="效果">效果</h2> + +<pre>When doing x it is <strong>imperative</strong> to do y before proceeding.</pre> + +<h3 id="Bold_vs._Strong">Bold vs. Strong</h3> + +<p>新的开发者经常感到疑惑，为什么在一个渲染的网站上会有这么多方式来表达同样的东西。Bold和Strong可能就是这其中的一种。为什么使用<strong></strong>而不是<b></b>? 使用strong的话你不得不打更多的字母，却产生出和b同样的效果，对吧？</p> + +<p>也许并不是； strong是一个逻辑状态，而bold是一个物理状态。逻辑状态分离内容和表现形式，使用逻辑状态允许你用各种不同的方式来表达。比如你想把文字渲染成红色，使用其它大小的字体、带有下划线或其他样式，而不是加粗的样式。必须要理解使用strong呈现出的表现形式不同于单纯的加粗。 因为bold是一个物理状态，他没有区分表现形式和内容。如果让bold做了加粗文本外的其它任何事情，都将会令人困惑而且也不符合逻辑。</p> + +<p>同样应该注意<b></b> 还有其他用途，比如想单纯地吸引注意而不增加其重要性。</p> + +<h3 id="Emphasis_vs._Strong">Emphasis vs. Strong</h3> + +<p>在 HTML4 时， Strong 简单地表示一个更强的强调(emphasis)，而在HTML5中，这个元素被描述为表征“内容强烈的重要性(strong importance for its contents) ”。这是一个重要的区别。Em标签(Emphasis)用于改变一个句子的意思(比如"我<em><em>喜欢</em></em>胡萝卜" 和"我喜欢<em><em>胡萝卜</em></em>"，分别强调喜欢和胡萝卜), Strong用来对一个句子的部分增加重要性(比如 "<strong>警告!</strong> 这<strong>非常危险</strong>。") Strong和Emphasis都可以分别通过嵌套来增加相对重要性或强调重点。</p> + +<h2 id="同样参见">同样参见</h2> + +<ul> + <li><a href="/zh-CN/docs/Web/HTML/Element/b" title="HTML/Element/b">HTML bold element</a></li> + <li><a href="/zh-CN/docs/Web/HTML/Element/em" title="HTML/Element/em">HTML em element</a></li> +</ul> + +<div>{{HTMLRef}}</div> diff --git a/files/zh-cn/web/html/element/style/index.html b/files/zh-cn/web/html/element/style/index.html new file mode 100644 index 0000000000..97a0b45b1f --- /dev/null +++ b/files/zh-cn/web/html/element/style/index.html @@ -0,0 +1,178 @@ +--- +title: <style> +slug: Web/HTML/Element/style +tags: + - 文档 + - 样式表 +translation_of: Web/HTML/Element/style +--- +<div>{{HTMLRef}}</div> + +<h2 id="概要">概要</h2> + +<p><strong>HTML的<style>元素</strong>包含文档的样式信息或者文档的部分内容。默认情况下，该标签的样式信息通常是<a href="/en-US/docs/Web/CSS">CSS</a>的格式。</p> + +<p>{{EmbedInteractiveExample("pages/tabbed/style.html", "tabbed-standard")}}</p> + +<ul class="htmlelt"> + <li><dfn><a href="/zh_CN/docs/HTML/Content_categories">内容类别</a></dfn><a href="/zh-CN/docs/Web/HTML/Content_categories#Metadata_content">元数据内容</a>，如果指定了 <code>scoped</code> 属性：<a href="/zh-CN/docs/Web/HTML/Content_categories#Flow_content">流内容</a></li> + <li><dfn>允许的内容</dfn>与 <code>type</code> 属性相匹配的文本内容，也就是 <code>text/css</code></li> + <li><dfn>标签忽略</dfn> {{no_tag_omission}}</li> + <li><dfn>允许的父元素</dfn> 任意接受<a href="/zh-CN/docs/Web/HTML/Content_categories#Metadata_content">元数据内容</a>的元素</li> + <li><dfn>Permitted ARIA roles</dfn>None</li> + <li><dfn>DOM接口</dfn> {{domxref("HTMLStyleElement")}}</li> +</ul> + +<h2 id="属性">属性</h2> + +<p>该元素包含所有<a href="/zh-CN/docs/Web/HTML/Global_attributes">全局属性</a>。</p> + +<dl> + <dt>{{htmlattrdef("type")}}</dt> + <dd>该属性以MIME类型（不应该指定字符集）定义样式语言。如果该属性未指定，则默认为 <code>text/css</code>。</dd> + <dt>{{htmlattrdef("media")}}</dt> + <dd>该属性规定该样式适用于哪个媒体。属性的取值<a href="/zh-CN/docs/Web/Guide/CSS/Media_queries">CSS媒体查询</a>，默认值为 <code>all</code>。</dd> + <dt> + <p>{{htmlattrdef("nonce")}}</p> + </dt> + <dd>一种加密的随机数（一次使用的数字），用于在<a href="https://wiki.developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/style-src">style-src Content-Security-Policy</a>中将内联样式列入白名单。 服务器每次发送策略时都必须生成一个唯一的随机数值。 提供一个无法猜测的随机数非常重要，因为绕开资源策略是微不足道的。</dd> + <dt>{{htmlattrdef("title")}}</dt> + <dd>指定可选的样式表。</dd> + <dt> + <h3 id="已淘汰属性">已淘汰属性</h3> + + <p>{{htmlattrdef("scoped")}} {{non-standard_inline}} {{deprecated_inline}}</p> + + <p>此属性指定样式仅适用于其父项和子项的元素。</p> + + <div class="blockIndicator note"> + <p>以后可能会根据<a href="https://github.com/w3c/csswg-drafts/issues/3547">https://github.com/w3c/csswg-drafts/issues/3547</a>重新引入此属性。 如果要立即使用该属性，则可以使用<a href="https://github.com/samthor/scoped">polyfill</a>。</p> + </div> + </dt> +</dl> + +<h2 id="示例">示例</h2> + +<h3 id="一个简单的样式表">一个简单的样式表</h3> + +<p>在下面的例子中，我们将简单的样式应用到文档中</p> + +<pre><!doctype html> +<html> +<head> + <style> + p { + color: red; + } + </style> +</head> +<body> + <p>This is my paragraph.</p> +</body> +</html></pre> + +<p>{{EmbedLiveSample('A_simple_stylesheet', '100%', '60')}}</p> + +<h3 id="多种样式元素">多种样式元素</h3> + +<p>在这个例子中包含两种样式<code><style></code>元素</p> + +<pre><!doctype html> +<html> +<head> + <style> + p { + color: white; + background-color: blue; + padding: 5px; + border: 1px solid black; + } + </style> + <style> + p { + color: blue; + background-color: yellow; + } + </style> +</head> +<body> + <p>This is my paragraph.</p> +</body> +</html> +</pre> + +<div>{{EmbedLiveSample('Multiple_style_elements', '100%', '60')}}</div> + +<div> +<h3 id="包含媒体media选择">包含媒体(media)选择</h3> + +<p>这个例子根据前一个例子构建，在第二个<style>中，视图宽度小于500px 时生效</p> + +<pre><!doctype html> +<html> +<head> + <style> + p { + color: white; + background-color: blue; + padding: 5px; + border: 1px solid black; + } + </style> + <style media="all and (max-width: 500px)"> + p { + color: blue; + background-color: yellow; + } + </style> +</head> +<body> + <p>This is my paragraph.</p> +</body> +</html></pre> + +<p>{{EmbedLiveSample('Including_a_media_query', '100%', '60')}}</p> +</div> + +<h2 id="规范"><br> + <span style="font-size: 2.33333rem; letter-spacing: -0.00278rem;">规范</span></h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">规范</th> + <th scope="col">状态</th> + <th scope="col">注释</th> + </tr> + <tr> + <td>{{ SpecName('HTML WHATWG', 'document-metadata.html#the-style-element', 'style') }}</td> + <td>{{ Spec2('HTML WHATWG') }}</td> + <td></td> + </tr> + <tr> + <td>{{ SpecName('HTML5 W3C', 'document-metadata.html#the-style-element', 'style') }}</td> + <td>{{ Spec2('HTML5 W3C') }}</td> + <td>type 属性变为可选</td> + </tr> + <tr> + <td>{{ SpecName('HTML4.01', 'present/styles.html#h-14.2.3', 'style') }}</td> + <td>{{ Spec2('HTML4.01') }}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<div class="hidden"> +<p>The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> +</div> + +<p>{{Compat("html.elements.style")}}</p> + +<h2 id="查看更多">查看更多</h2> + +<ul> + <li>{{HTMLElement("link")}}元素允许使用外部的样式表。</li> + <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/CSS/Alternative_style_sheets">Alternative Style Sheets</a></li> +</ul> diff --git a/files/zh-cn/web/html/element/sub/index.html b/files/zh-cn/web/html/element/sub/index.html new file mode 100644 index 0000000000..f9f292daf5 --- /dev/null +++ b/files/zh-cn/web/html/element/sub/index.html @@ -0,0 +1,86 @@ +--- +title: <sub> +slug: Web/HTML/Element/sub +translation_of: Web/HTML/Element/sub +--- +<p><strong>HTML <code><sub></code> 元素</strong>定义了一个文本区域，出于排版的原因，与主要的文本相比，应该展示得更低并且更小。</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/en-US/docs/HTML/Content_categories" title="en/HTML/Content categories">内容分类</a></th> + <td>流式内容和短语内容</td> + </tr> + <tr> + <th scope="row">允许的内容</th> + <td>短语内容</td> + </tr> + <tr> + <th scope="row">标签省略</th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th scope="row">允许的父元素</th> + <td>可以包含短语内容的任意元素</td> + </tr> + <tr> + <th scope="row">允许的 ARIA 角色</th> + <td>任意 </td> + </tr> + <tr> + <th scope="row">DOM 接口</th> + <td>{{domxref("HTMLElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="属性">属性</h2> + +<p>这个元素仅仅包含<a href="/en-US/docs/HTML/Global_attributes">全局属性</a>。</p> + +<h2 id="用法注解">用法注解</h2> + +<ul> + <li>这个元素应该只用于排版目的，也就是改变文本的位置会改变含义，例如在数学中（<var>t<sub>2</sub></var>，也可以考虑使用 <a href="/en-US/docs/MathML" title="en/MathML">MathML</a> 公式）或者化学符号（ <code>H<sub>2</sub>O</code>）。</li> + <li>这个元素不能用于样式上的目的，比如产品名称 LaTeX 的样式，这时应该使用 <a href="/en-US/docs/CSS" title="en/CSS">CSS</a>样式： {{ cssxref("vertical-align") }} 属性的 <code>sub</code> 值能实现相同效果。</li> +</ul> + +<h2 id="示例">示例</h2> + +<pre class="brush: html"><p>The chemical formula of water: H<sub>2</sub>O</p> +</pre> + +<h4 id="结果">结果</h4> + +<p>The chemical formula of water: H<sub>2</sub>O</p> + +<h2 id="规范">规范</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'semantics.html#the-sub-and-sup-elements', '<sub> and <sup>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'textlevel-semantics.html#the-sub-and-sup-elements', '<sub> and <sup>;')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="另见">另见</h2> + +<ul> + <li>{{ HTMLElement("sup") }} HTML 元素会产生上标。要注意，你不能同时使用它们，你需要 <a href="/en-US/docs/MathML" title="en/MathML">MathML</a> 来同时产生化学符号旁边的下标和上标，代表它的序号和核子数。</li> + <li><a href="/en-US/docs/MathML/Element/msub" title="en/MathML/Element/msub"><code><msub></code></a>, <a href="/en-US/docs/MathML/Element/msup" title="en/MathML/Element/msup"><code><msup></code></a>, 和 <a href="/en-US/docs/MathML/Element/msubsup" title="en/MathML/Element/msubsup"><code><msubsup></code></a> MathML 元素。</li> +</ul> diff --git a/files/zh-cn/web/html/element/summary/index.html b/files/zh-cn/web/html/element/summary/index.html new file mode 100644 index 0000000000..eb18e10ed3 --- /dev/null +++ b/files/zh-cn/web/html/element/summary/index.html @@ -0,0 +1,88 @@ +--- +title: <summary> +slug: Web/HTML/Element/summary +tags: + - <summary> + - Element + - HTML + - HTML5 + - Reference + - Web +translation_of: Web/HTML/Element/summary +--- +<p>{{HTMLRef}}</p> + +<h2 id="概述">概述</h2> + +<p><strong>HTML <code><summary> </code>元素 </strong>用作 一个{{HTMLElement("details")}}元素的一个内容的摘要，标题或图例。</p> + +<div class="note"><strong>提示:</strong> 如果 <code><summary></code> 元素在浏览器内不能被正确解析和渲染,，则会展示<details>标签内的其他内容。</div> + +<table class="properties"> + <tbody> + <tr> + <th scope="row">标签闭合</th> + <td>开始标签和结束标签都不能省略。</td> + </tr> + <tr> + <th scope="row">父级元素</th> + <td>{{ HTMLElement("summary") }}元素是{{ HTMLElement("details") }} 元素的子元素。</td> + </tr> + <tr> + <th scope="row">文档规范</th> + <td><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/interactive-elements.html#the-summary-element" rel="external nofollow" title="http://www.whatwg.org/specs/web-apps/current-work/multipage/interactive-elements.html#the-summary-element">HTML5, section 4.11.2</a></td> + </tr> + </tbody> +</table> + +<h2 id="属性"><strong>属性</strong></h2> + +<p>本元素仅支持<a href="https://developer.mozilla.org/en-US/docs/HTML/Global_attributes">全局属性</a>。</p> + +<h2 id="DOM_接口">DOM 接口</h2> + +<p>本元素支持 {{domxref("HTMLElement")}} 接口.</p> + +<h2 id="示例">示例</h2> + +<details style="color: blue; margin-left: 15px; margin-bottom: 10px;"> +<p style="color: red;">In summation, get details from the link on the next line</p> +</details> + +<p>请参考 {{ HTMLElement("details") }} 页面内有关 <summary>元素的示例.</p> + +<h2 id="Specifications" name="Specifications">规范</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'interactive-elements.html#the-summary-element', '<summary>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5.1', 'interactive-elements.html#the-summary-element', '<summary>')}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<div id="compat-desktop">{{Compat("html.elements.summary")}}</div> + +<h2 id="参见">参见</h2> + +<ul> + <li>{{ HTMLElement("details") }}</li> +</ul> + +<div class="noinclude">{{HTMLRef}}</div> diff --git a/files/zh-cn/web/html/element/sup/index.html b/files/zh-cn/web/html/element/sup/index.html new file mode 100644 index 0000000000..7fe91ff45a --- /dev/null +++ b/files/zh-cn/web/html/element/sup/index.html @@ -0,0 +1,88 @@ +--- +title: <sup> +slug: Web/HTML/Element/sup +translation_of: Web/HTML/Element/sup +--- +<p><strong>HTML <code><sup></code> 元素</strong>定义了一个文本区域，出于排版的原因，与主要的文本相比，应该展示得更高并且更小。</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/en-US/docs/HTML/Content_categories" title="en/HTML/Content categories">内容分类</a></th> + <td>流式内容和短语内容</td> + </tr> + <tr> + <th scope="row">允许的内容</th> + <td>短语内容</td> + </tr> + <tr> + <th scope="row">标签省略</th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th scope="row">允许的父元素</th> + <td>可以包含短语内容的任意元素</td> + </tr> + <tr> + <th scope="row">允许的 ARIA 角色</th> + <td>任意 </td> + </tr> + <tr> + <th scope="row">DOM 接口</th> + <td>{{domxref("HTMLElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="属性">属性</h2> + +<p>这个元素仅仅包含<a href="/en-US/docs/HTML/Global_attributes">全局属性</a>。</p> + +<h2 id="用法注解">用法注解</h2> + +<ul> + <li>这个元素应该只用于排版目的，也就是改变文本的位置会改变含义，例如在数学中（<var>f<sup>4</sup></var>，也可以考虑使用 <a href="/en-US/docs/MathML" title="en/MathML">MathML</a> 公式）或者在法语缩写中（ M<sup>lle</sup>，M<sup>me</sup> 或者 C<sup>ie</sup>）。</li> + <li>这个元素不能用于样式上的目的，比如产品名称 LaTeX 的样式，这时应该使用 <a href="/en-US/docs/CSS" title="en/CSS">CSS</a>样式： {{ cssxref("vertical-align") }} 属性的 <code>super</code> 值能实现相同效果。</li> +</ul> + +<h2 id="示例">示例</h2> + +<pre class="brush: html"><p>This text is <sup>superscripted</sup></p> +</pre> + +<h4 id="结果">结果</h4> + +<p>This text is <sup>superscripted</sup></p> + +<h2 id="规范">规范</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'semantics.html#the-sub-and-sup-elements', '<sub> and <sup>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'textlevel-semantics.html#the-sub-and-sup-elements', '<sub> and <sup>;')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="另见">另见</h2> + +<ul> + <li>{{ HTMLElement("sub") }} HTML 元素会产生下标。要注意，你不能同时使用它们，你需要 <a href="/en-US/docs/MathML" title="en/MathML">MathML</a> 来同时产生化学符号旁边的下标和上标，代表它的序号和核子数。</li> + <li><a href="/en-US/docs/MathML/Element/msub" title="en/MathML/Element/msub"><code><msub></code></a>, <a href="/en-US/docs/MathML/Element/msup" title="en/MathML/Element/msup"><code><msup></code></a>, 和 <a href="/en-US/docs/MathML/Element/msubsup" title="en/MathML/Element/msubsup"><code><msubsup></code></a> MathML 元素。</li> +</ul> + +<p>{{HTMLRef}}</p> diff --git a/files/zh-cn/web/html/element/table/index.html b/files/zh-cn/web/html/element/table/index.html new file mode 100644 index 0000000000..8511032381 --- /dev/null +++ b/files/zh-cn/web/html/element/table/index.html @@ -0,0 +1,487 @@ +--- +title: <table> +slug: Web/HTML/Element/table +tags: + - CSS + - HTML + - Web + - table + - 元素 + - 参考 + - 表格 + - 表格数据 +translation_of: Web/HTML/Element/table +--- +<div>{{HTMLRef}}</div> + +<p><strong>HTML</strong>的 <strong><code>table</code> </strong>元素表示表格数据 — 即通过二维数据表表示的信息。</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/table.html","tabbed-standard")}}</div> + +<p class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples </a> and send us a pull request.</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="https://developer.mozilla.org/en-US/docs/HTML/Content_categories">内容分类</a></th> + <td><a href="https://developer.mozilla.org/en-US/docs/HTML/Content_categories#Flow_content">流动内容</a></td> + </tr> + <tr> + <th scope="row">允许的内容</th> + <td> + <div class="content-models"> + <div id="table-mdls">按照这个顺序： + <ul> + <li>一个可选的 {{HTMLElement("caption")}} 元素</li> + <li>零个或多个的 {{HTMLElement("colgroup")}} 元素</li> + <li>一个可选的 {{HTMLElement("thead")}} 元素</li> + <li>下列任意一个: + <ul> + <li>零个或多个 {{HTMLElement("tbody")}}</li> + <li>零个或多个 {{HTMLElement("tr")}}</li> + </ul> + </li> + <li>一个可选的 {{HTMLElement("tfoot")}} 元素</li> + </ul> + </div> + </div> + </td> + </tr> + <tr> + <th scope="row">标签省略</th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th scope="row">允许的父元素</th> + <td>任何支持<a href="/en-US/docs/HTML/Content_categories#Flow_content">流内容</a>的元素</td> + </tr> + <tr> + <th scope="row">允许的ARIA 角色</th> + <td>Any</td> + </tr> + <tr> + <th scope="row">DOM 接口</th> + <td>{{domxref("HTMLTableElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="属性"> 属性</h2> + +<p><span style="line-height: 21px;">表格标签支持</span><a href="https://developer.mozilla.org/en-US/docs/HTML/Global_attributes" style="line-height: 21px;" title="HTML/Global attributes">全局属性</a><span style="line-height: 21px;">。下面列出的属性现在已经弃用（请使用CSS代替）。</span></p> + +<dl> + <dt>{{htmlattrdef("align")}} {{Deprecated_inline}}</dt> + <dd> 这个枚举属性指定了包含在文档中的表格必须如何对齐。有如下值: + <ul> + <li><span>left</span>，表格将在文档左侧显示；</li> + <li><span>center，</span> 表格将在文档中央显示；</li> + <li><span>right</span>， 表格将在文档右侧显示；</li> + </ul> + + <div class="note"><strong>小贴士: </strong> + + <ul> + <li><strong>不要使用这个属性</strong>，它已经不赞成被使用。 {{HTMLElement("table")}} 元素应该使用<a href="/en-US/docs/CSS" title="CSS">CSS</a> 制定样式。设置 {{cssxref("margin-left")}} 、{{cssxref("margin-right")}} 为 <code>auto</code> ( 或者 {{cssxref("margin")}} <code>设置为 0 auto</code>) 来实现类似于 align 属性的效果。</li> + <li>Firefox 4 之前的版本，在 quirks mode 模式下它还支持 <code>middle，</code> <code>absmiddle</code> <code>和近似于 center 的 abscenter</code> <em>。</em></li> + </ul> + </div> + </dd> +</dl> + +<dl> + <dt>{{htmlattrdef("bgcolor")}} {{Deprecated_inline}}</dt> + <dd>这个属性定义了表格的背景颜色。 它是一个6位的十六进制编码，定义于 <a class="external" href="http://www.w3.org/Graphics/Color/sRGB" title="http://www.w3.org/Graphics/Color/sRGB">sRGB</a>，需要加上'#'作为前缀。 当然也可以使用下面已经被预先定义的字符串，来表示常用的16种颜色： + <table> + <tbody> + <tr> + <td style="width: 24px; background-color: black;"></td> + <td><span>black</span> = "#000000"</td> + <td style="width: 24px; background-color: green;"></td> + <td><span>green</span> = "#008000"</td> + </tr> + <tr> + <td style="width: 24px; background-color: silver;"></td> + <td><span>silver</span> = "#C0C0C0"</td> + <td style="width: 24px; background-color: lime;"></td> + <td><span>lime</span> = "#00FF00"</td> + </tr> + <tr> + <td style="width: 24px; background-color: gray;"></td> + <td><span>gray</span> = "#808080"</td> + <td style="width: 24px; background-color: olive;"></td> + <td><span>olive</span> = "#808000"</td> + </tr> + <tr> + <td style="width: 24px; background-color: white;"></td> + <td><span>white</span> = "#FFFFFF"</td> + <td style="width: 24px; background-color: yellow;"></td> + <td><span>yellow</span> = "#FFFF00"</td> + </tr> + <tr> + <td style="width: 24px; background-color: maroon;"></td> + <td><span>maroon</span> = "#800000"</td> + <td style="width: 24px; background-color: navy;"></td> + <td><span>navy</span> = "#000080"</td> + </tr> + <tr> + <td style="width: 24px; background-color: red;"></td> + <td><span>red</span> = "#FF0000"</td> + <td style="width: 24px; background-color: blue;"></td> + <td><span>blue</span> = "#0000FF"</td> + </tr> + <tr> + <td style="width: 24px; background-color: purple;"></td> + <td><span>purple</span> = "#800080"</td> + <td style="width: 24px; background-color: teal;"></td> + <td><span>teal</span> = "#008080"</td> + </tr> + <tr> + <td style="width: 24px; background-color: fuchsia;"></td> + <td><span>fuchsia</span> = "#FF00FF"</td> + <td style="width: 24px; background-color: aqua;"></td> + <td><span>aqua</span> = "#00FFFF"</td> + </tr> + </tbody> + </table> + + <div class="note"><strong>小贴士: </strong>不要使用这个属性, 该属性已废弃，{{HTMLElement("table")}} 元素应当使用 <a href="/en-US/docs/CSS" title="CSS">CSS</a> 定制样式。 <a href="/en-US/docs/CSS" title="CSS">CSS</a> 中的 {{cssxref("background-color")}} 属性能够和bgcolor属性达到一样的效果。</div> + </dd> +</dl> + +<dl> + <dt>{{htmlattrdef("border")}} {{Deprecated_inline}}</dt> + <dd>这个整型元素使用像素，定义了表格边框的大小。 如果设置为0，这意味着{{htmlattrxref("frame", "table")}} 属性被设置为空。如果设置为1，表示表格具有1px大小的边框。 + <div class="note"><strong>小贴士: </strong>不要使用这个属性, 该属性已废弃，{{HTMLElement("table")}} 元素应当使用 <a href="/en-US/docs/CSS" title="CSS">CSS</a> 定制样式。 <a href="/en-US/docs/CSS" title="CSS">CSS</a> 属性 {{cssxref("border")}}, {{cssxref("border-color")}}, {{cssxref("border-width")}} 和 {{cssxref("border-style")}} 可实现相同效果。</div> + </dd> +</dl> + +<dl> + <dt>{{htmlattrdef("cellpadding")}} {{Deprecated_inline}}</dt> + <dd>这个属性定义了表格单元的内容和边框之间的空间。如果它是一个像素长度单位，这个像素将被应用到所有的四个侧边；如果它是一个百分比的长度单位，内容将被作为中心，总的垂直（上和下）长度将代表这个百分比。这同样适用于总的水平（左和右）空间。 + <div class="note"><strong>小贴士：不要使用这个属性</strong>，因为它已经被废弃。 {{HTMLElement("table")}} 元素应该使用<a href="/en-US/docs/CSS" title="CSS"> CSS</a> 定制样式。 在{{HTMLElement("table")}} 元素上使用 <a href="/en-US/docs/CSS" title="CSS">CSS</a> 属性值为 collapse 的 {{cssxref("border-collapse")}} 属性，在 {{HTMLElement("td")}} 元素上使用属性 {{cssxref("padding")}}，以达到类似于 cellpadding 的效果。</div> + </dd> +</dl> + +<dl> + <dt>{{htmlattrdef("cellspacing")}} {{Deprecated_inline}}</dt> + <dd>这个属性（使用百分比或像素）定义了两个单元格之间空间的大小（从水平和垂直方向上），包括了表格的顶部与第一行的单元格，表的左边与第一列单元格，表的右边与最后一列的单元格，表的底部与最后一行单元格之间的空间。 + <div class="note"><strong>小贴士：不要使用这个属性，因为它已经被废弃。</strong> {{HTMLElement("table")}} 元素应该使用 <a href="/en-US/docs/CSS" title="CSS">CSS</a> 定制样式。在<span style="line-height: 1.5;"> {{HTMLElement("table")}} 元素上</span>使用 CSS 的属性 {{cssxref("border-spacing")}}<span style="line-height: 1.5;"> </span>，以达到类似于 cellspacing 的效果。</div> + </dd> +</dl> + +<dl> + <dt>{{htmlattrdef("frame")}} {{Deprecated_inline}}</dt> + <dd>这个枚举属性定义了包围在表格周围的框架的哪个边必须显示。它可能有下列值： + <table style="width: 668px;"> + <tbody> + <tr> + <td style="width: 24px; background-color: rgb(224, 224, 224);"></td> + <td><span>above</span></td> + <td style="width: 24px; background-color: rgb(224, 224, 224);"></td> + <td><span>below</span></td> + </tr> + <tr> + <td style="width: 24px; background-color: rgb(224, 224, 224);"></td> + <td><span>hsides</span></td> + <td style="width: 24px; background-color: rgb(224, 224, 224);"></td> + <td><span>vsides</span></td> + </tr> + <tr> + <td style="width: 24px; background-color: rgb(224, 224, 224);"></td> + <td><span>lhs</span></td> + <td style="width: 24px; background-color: rgb(224, 224, 224);"></td> + <td><span>rhs</span></td> + </tr> + <tr> + <td style="width: 24px; background-color: rgb(224, 224, 224);"></td> + <td><span>border</span></td> + <td style="width: 24px; background-color: rgb(224, 224, 224);"></td> + <td><span>box</span></td> + </tr> + <tr> + <td style="width: 24px; background-color: rgb(224, 224, 224);"></td> + <td><span>void</span></td> + </tr> + </tbody> + </table> + + <div class="note"><strong>小贴士：不要使用这个属性，因为它已经被废弃。</strong> {{HTMLElement("table")}} 元素应该使用 <a href="/en-US/docs/CSS" title="CSS">CSS</a> 定制样式。在<span style="line-height: 1.5;"> {{HTMLElement("table")}} 元素上</span>使用 CSS 的属性 {{cssxref(" border-style ")}}<span style="line-height: 1.5;"> 和 </span> {{cssxref("border-width")}} ，以达到类似于 frame 的效果。</div> + </dd> +</dl> + +<dl> + <dt>{{htmlattrdef("rules")}} {{Deprecated_inline()}}</dt> + <dd>这个枚举属性定义了在一个表格中规则的显示位置。它可以有以下值：: + <ul> + <li><span>none</span>, 这表明没有规格将被显示；这是默认的值；</li> + <li><span>groups</span>, 这将使规则只显示在行组（row groups，通过 {{HTMLElement("thead")}} ， {{HTMLElement("tbody")}} 和 {{HTMLElement("tfoot")}} 元素定义）和列组（ column groups，通过{{HTMLElement("col")}} 和 {{HTMLElement("colgroup")}} 元素定义）之间</li> + <li><span>rows</span>, 这将使规则在行之间显示；</li> + <li><span>columns</span>, 这将使规则在列之间显示；</li> + <li> + <p><span>all</span>, 这将使规则在列和行之间显示；</p> + </li> + </ul> + + <div class="note"> + <p><strong>小贴士： </strong></p> + + <ul> + <li>规则的样式是依赖浏览器的（browser-dependant），并且 不能被修改。</li> + <li><strong>不要使用这个属性，因为它已经被废弃。</strong>规则应该使用 <a href="/en-US/docs/CSS" title="CSS">CSS</a> 定义和设计样式。使用 {{cssxref("border")}} 属性，在适当的 {{HTMLElement("thead")}}, {{HTMLElement("tbody")}}, {{HTMLElement("tfoot")}}, {{HTMLElement("col")}} 或 {{HTMLElement("colgroup")}} 元素上。</li> + </ul> + </div> + </dd> + <dt>{{htmlattrdef("summary")}} {{Deprecated_inline}}</dt> + <dd>该属性定义了一个替代文本，当表格无法在用户代理中显示的时候用来描述表格。通常，它被用来为残障人士提供可用性，比如，盲人使用盲文屏幕（Braille screen） 浏览网页，从中获取信息。如果要想对于非视力受限的人来说也可以提供作用，考虑使用 {{HTMLElement("caption")}} 代替。summary 属性不是强制性的，当一个 {{HTMLElement("caption")}} 发挥它应有的作用时，可以省略summary 属性。 + <div class="note"><strong>小贴士: </strong> <strong>不要使用这个属性，因为它已经被废弃。</strong> 作为替代，选择其中一种方法为表格添加描述： + <ul> + <li>Use prose around the table (this method is less semantic).</li> + <li>在表格的 {{HTMLElement("caption")}} 元素中添加描述。</li> + <li>在表格的 {{HTMLElement("caption")}} 元素中，添加一个带有描述的 {{HTMLElement("details")}} 元素。</li> + <li>将 {{HTMLElement("table")}} 元素包含在一个{{HTMLElement("figure")}} 元素中，并且在旁边添加散文（prose ）描述。</li> + <li>将 {{HTMLElement("table")}} 元素包含在一个{{HTMLElement("figure")}} 元素中，并且在 {{HTMLElement("thead")}} 元素中添加散文（prose ）描述。</li> + <li>调整表格，以便不需要这样的描述 (比如，使用 {{HTMLElement("th")}} 和 {{HTMLElement("thead")}} 元素)。</li> + </ul> + </div> + </dd> + <dt>{{htmlattrdef("width")}} {{Deprecated_inline}}</dt> + <dd>该属性定义了表格的宽度。宽度可能是一个像素或者是一个百分比值，宽度的百分比值将被定义为表格容器的宽度。 + <div class="note"><strong>小贴士: </strong> <strong>不要使用这个属性，因为它已经被废弃。</strong>规则应该使用 <a href="/en-US/docs/CSS" title="CSS">CSS</a> 定义和设计样式。使用 {{cssxref("width")}} 属性代替。</div> + </dd> +</dl> + +<h2 id="示例">示例</h2> + +<h3 id="简单的表格">简单的表格</h3> + +<pre class="brush: html" style="font-size: 12px;"><table> + <tr> + <td>John</td> + <td>Doe</td> + </tr> + <tr> + <td>Jane</td> + <td>Doe</td> + </tr> +</table> +</pre> + +<p>{{EmbedLiveSample('简单的表格', '100%', '100', '', 'Web/HTML/Element/table')}}</p> + +<h3 id="更多例子">更多例子</h3> + +<pre class="brush: html"><p>Simple table with header</p> +<table> + <tr> + <th>First name</th> + <th>Last name</th> + </tr> + <tr> + <td>John</td> + <td>Doe</td> + </tr> + <tr> + <td>Jane</td> + <td>Doe</td> + </tr> +</table> + +<p>Table with thead, tfoot, and tbody</p> +<table> + <thead> + <tr> + <th>Header content 1</th> + <th>Header content 2</th> + </tr> + </thead> + <tfoot> + <tr> + <td>Footer content 1</td> + <td>Footer content 2</td> + </tr> + </tfoot> + <tbody> + <tr> + <td>Body content 1</td> + <td>Body content 2</td> + </tr> + </tbody> +</table> + +<p>Table with colgroup</p> +<table> + <colgroup span="4" class="columns"></colgroup> + <tr> + <th>Countries</th> + <th>Capitals</th> + <th>Population</th> + <th>Language</th> + </tr> + <tr> + <td>USA</td> + <td>Washington D.C.</td> + <td>309 million</td> + <td>English</td> + </tr> + <tr> + <td>Sweden</td> + <td>Stockholm</td> + <td>9 million</td> + <td>Swedish</td> + </tr> +</table> + +<p>Table with colgroup and col</p> +<table> + <colgroup> + <col class="column1"> + <col class="columns2plus3" span="2"> + </colgroup> + <tr> + <th>Lime</th> + <th>Lemon</th> + <th>Orange</th> + </tr> + <tr> + <td>Green</td> + <td>Yellow</td> + <td>Orange</td> + </tr> +</table> + +<p>Simple table with caption</p> +<table> + <caption>Awesome caption</caption> + <tr> + <td>Awesome data</td> + </tr> +</table> +</pre> + +<div class="hidden"> +<pre class="brush: css">table +{ +border-collapse: collapse; +border-spacing: 0px; +} +table, th, td +{ +padding: 5px; +border: 1px solid black; +}</pre> +</div> + +<p>{{EmbedLiveSample('更多例子', '100%', '700', '', 'Web/HTML/Element/table')}}</p> + +<h2 id="Accessibility_concerns">Accessibility concerns</h2> + +<h3 id="Captions">Captions</h3> + +<p>By supplying a {{HTMLElement("caption")}} element whose value clearly and concisely describes the table's purpose, it helps the people decide if they need to read the rest of the table content or skip over it.</p> + +<p>This helps people navigating with the aid of assistive technology such as a screen reader, people experiencing low vision conditions, and people with cognitive concerns.</p> + +<ul> + <li><a href="/en-US/docs/Learn/HTML/Tables/Advanced#Adding_a_caption_to_your_table_with_<caption>">MDN Adding a caption to your table with <caption></a></li> + <li><a href="https://www.w3.org/WAI/tutorials/tables/caption-summary/">Caption & Summary • Tables • W3C WAI Web Accessibility Tutorials</a></li> +</ul> + +<h3 id="Scoping_rows_and_columns">Scoping rows and columns</h3> + +<p>The {{htmlattrxref("scope", "th")}} attribute on header elements is redundant in simple contexts, because scope is inferred. However, some assistive technologies may fail to draw correct inferences, so specifying header scope may improve user experiences. In complex tables, scope can be specified so as to provide necessary information about the cells related to a header.</p> + +<h4 id="Example">Example</h4> + +<pre class="brush: html"><table> + <caption>Color names and values</caption> + <tbody> + <tr> + <th scope="col">Name</th> + <th scope="col">HEX</th> + <th scope="col">HSLa</th> + <th scope="col">RGBa</th> + </tr> + <tr> + <th scope="row">Teal</th> + <td><code>#51F6F6</code></td> + <td><code>hsla(180, 90%, 64%, 1)</code></td> + <td><code>rgba(81, 246, 246, 1)</code></td> + </tr> + <tr> + <th scope="row">Goldenrod</th> + <td><code>#F6BC57</code></td> + <td><code>hsla(38, 90%, 65%, 1)</code></td> + <td><code>rgba(246, 188, 87, 1)</code></td> + </tr> + </tbody> +</table> +</pre> + +<p>Providing a declaration of <code>scope="col"</code> on a {{HTMLElement("th")}} element will help describe that the cell is at the top of a column. Providing a declaration of <code>scope="row"</code> on a {{HTMLElement("td")}} element will help describe that the cell is the first in a row.</p> + +<ul> + <li><a href="/en-US/docs/Learn/HTML/Tables/Advanced#Tables_for_visually_impaired_users">MDN Tables for visually impaired users</a></li> + <li><a href="https://www.w3.org/WAI/tutorials/tables/two-headers/">Tables with two headers • Tables • W3C WAI Web Accessibility Tutorials</a></li> + <li><a href="https://www.w3.org/WAI/tutorials/tables/irregular/">Tables with irregular headers • Tables • W3C WAI Web Accessibility Tutorials</a></li> + <li><a href="https://www.w3.org/TR/WCAG20-TECHS/H63.html">H63: Using the scope attribute to associate header cells and data cells in data tables | W3C Techniques for WCAG 2.0</a></li> +</ul> + +<h3 id="Complicated_tables">Complicated tables</h3> + +<p>Assistive technology such as screen readers may have difficulty parsing tables that are so complex that header cells can’t be associated in a strictly horizontal or vertical way. This is typically indicated by the presence of the {{htmlattrxref("colspan", "td")}} and {{htmlattrxref("rowspan", "td")}} attributes.</p> + +<p>Ideally, consider alternate ways to present the table's content, including breaking it apart into a collection of smaller, related tables that don't have to rely on using the <code>colspan</code> and <code>rowspan</code> attributes. In addition to helping people who use assistive technology understand the table's content, this may also benefit people with cognitive concerns who may have difficulty understanding the associations the table layout is describing.</p> + +<p>If the table cannot be broken apart, use a combination of the {{htmlattrxref("id")}} and {{htmlattrxref("headers", "td")}} attributes to programmatically associate each table cell with the header(s) the cell is associated with.</p> + +<ul> + <li><a href="/en-US/docs/Learn/HTML/Tables/Advanced#Tables_for_visually_impaired_users">MDN Tables for visually impaired users</a></li> + <li><a href="https://www.w3.org/WAI/tutorials/tables/multi-level/">Tables with multi-level headers • Tables • W3C WAI Web Accessibility Tutorials</a></li> + <li><a href="https://www.w3.org/TR/WCAG20-TECHS/H43.html">H43: Using id and headers attributes to associate data cells with header cells in data tables | Techniques for W3C WCAG 2.0</a></li> + <li><a href="http://www.coding-dude.com/wp/html5/bar-chart-html/">Creating a bar chart from a HTML table</a></li> +</ul> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG','tables.html#the-table-element','table element')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C','tabular-data.html#the-table-element','table element')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + + + +<p>{{Compat("html.elements.table")}}</p> + +<h2 id="相关">相关</h2> + +<ul> + <li>其它表格相关的HTML元素: {{HTMLElement("caption")}}, {{HTMLElement("col")}}, {{HTMLElement("colgroup")}}, {{HTMLElement("tbody")}}, {{HTMLElement("td")}}, {{HTMLElement("tfoot")}}, {{HTMLElement("th")}}, {{HTMLElement("thead")}}, {{HTMLElement("tr")}};</li> + <li>可能特别有用的关于设定表格元素样式的 CSS 属性： + <ul> + <li>{{cssxref("width")}} 控制表格的宽度；</li> + <li>{{cssxref("border")}}, {{cssxref("border-style")}}, {{cssxref("border-color")}}, {{cssxref("border-width")}}, {{cssxref("border-collapse")}}, {{cssxref("border-spacing")}} 控制单元格边框，规则和框架方面；</li> + <li>{{cssxref("margin")}} 和{{cssxref("padding")}} 设定特定的单元格内容样式；</li> + <li>{{cssxref("text-align")}} 和{{cssxref("vertical-align")}} 定义文本和单元格内容的对齐方式。</li> + </ul> + </li> +</ul> diff --git a/files/zh-cn/web/html/element/td/index.html b/files/zh-cn/web/html/element/td/index.html new file mode 100644 index 0000000000..82d38524e2 --- /dev/null +++ b/files/zh-cn/web/html/element/td/index.html @@ -0,0 +1,220 @@ +--- +title: <td>：表格数据单元格元素 +slug: Web/HTML/Element/td +tags: + - HTML + - Web + - 元素 + - 参考 + - 表格 +translation_of: Web/HTML/Element/td +--- +<div>{{HTMLRef}}</div> + +<p><span class="seoSummary"><strong>HTML <code><td></code> 元素</strong> 定义了一个包含数据的表格单元格。It participates in the <em>table model</em>.</span></p> + +<div>{{EmbedInteractiveExample("pages/tabbed/td.html","tabbed-taller")}}</div> + +<p class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples </a> and send us a pull request.</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/en-US/docs/Web/HTML/Content_categories">Content categories</a></th> + <td>Sectioning root.</td> + </tr> + <tr> + <th scope="row">Permitted content</th> + <td><a href="/en-US/docs/HTML/Content_categories#Flow_content">Flow content</a>.</td> + </tr> + <tr> + <th scope="row">Tag omission</th> + <td>The start tag is mandatory.<br> + The end tag may be omitted, if it is immediately followed by a {{HTMLElement("th")}} or {{HTMLElement("td")}} element or if there are no more data in its parent element.</td> + </tr> + <tr> + <th scope="row">Permitted parents</th> + <td>{{HTMLElement("tr")}} 元素。</td> + </tr> + <tr> + <th scope="row">Permitted ARIA roles</th> + <td>Any</td> + </tr> + <tr> + <th scope="row">DOM 接口</th> + <td>{{domxref("HTMLTableDataCellElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="属性">属性</h2> + +<p>该元素支持<a href="/en-US/docs/Web/HTML/Global_attributes">全局属性</a>。</p> + +<dl> + <dt>{{htmlattrdef("abbr")}} {{obsolete_inline("html5")}}</dt> + <dd>This attribute contains a short abbreviated description of the cell's content. Some user-agents, such as speech readers, may present this description before the content itself. + <div class="note"><strong>Note:</strong> Do not use this attribute as it is obsolete in the latest standard. Alternatively, you can put the abbreviated description inside the cell and place the long content in the <strong>title</strong> attribute.</div> + </dd> + <dt>{{htmlattrdef("align")}} {{obsolete_inline("html5")}}</dt> + <dd>This enumerated attribute specifies how the cell content's horizontal alignment will be handled. Possible values are: + <ul> + <li><code>left</code>: The content is aligned to the left of the cell.</li> + <li><code>center</code>: The content is centered in the cell.</li> + <li><code>right</code>: The content is aligned to the right of the cell.</li> + <li><code>justify</code> (with text only): The content is stretched out inside the cell so that it covers its entire width.</li> + <li><code>char</code> (with text only): The content is aligned to a character inside the <code><th></code> element with minimal offset. This character is defined by the {{htmlattrxref("char", "td")}} and {{htmlattrxref("charoff", "td")}} attributes {{unimplemented_inline(2212)}}.</li> + </ul> + + <p>The default value when this attribute is not specified is <code>left</code>.</p> + + <div class="note"><strong>Note: </strong>Do not use this attribute as it is obsolete in the latest standard. + + <ul> + <li>To achieve the same effect as the <code>left</code>, <code>center</code>, <code>right</code> or <code>justify</code> values, apply the CSS {{cssxref("text-align")}} property to the element.</li> + <li>To achieve the same effect as the <code>char</code> value, give the {{cssxref("text-align")}} property the same value you would use for the {{htmlattrxref("char", "td")}}. {{unimplemented_inline}} in CSS3.</li> + </ul> + </div> + </dd> + <dt>{{htmlattrdef("axis")}} {{obsolete_inline("html5")}}</dt> + <dd>This attribute contains a list of space-separated strings. Each string is the <code>id</code> of a group of cells that this header applies to. + <div class="note"><strong>Note:</strong> Do not use this attribute as it is obsolete in the latest standard.</div> + </dd> + <dt>{{htmlattrdef("bgcolor")}} {{Non-standard_inline}}</dt> + <dd>This attribute defines the background color of each cell in a column. It consists of a 6-digit hexadecimal code as defined in <a href="https://www.w3.org/Graphics/Color/sRGB">sRGB</a> and is prefixed by '#'. This attribute may be used with one of sixteen predefined color strings: + <table> + <tbody> + <tr> + <td style="background-color: black; width: 24px; height: 24px; border: 1px solid black;"></td> + <td><code>black</code> = "#000000"</td> + <td style="background-color: green; width: 24px; height: 24px; border: 1px solid black;"></td> + <td><code>green</code> = "#008000"</td> + </tr> + <tr> + <td style="background-color: silver; width: 24px; height: 24px; border: 1px solid black;"></td> + <td><code>silver</code> = "#C0C0C0"</td> + <td style="background-color: lime; width: 24px; height: 24px; border: 1px solid black;"></td> + <td><code>lime</code> = "#00FF00"</td> + </tr> + <tr> + <td style="background-color: gray; width: 24px; height: 24px; border: 1px solid black;"></td> + <td><code>gray</code> = "#808080"</td> + <td style="background-color: olive; width: 24px; height: 24px; border: 1px solid black;"></td> + <td><code>olive</code> = "#808000"</td> + </tr> + <tr> + <td style="background-color: white; width: 24px; height: 24px; border: 1px solid black;"></td> + <td><code>white</code> = "#FFFFFF"</td> + <td style="background-color: yellow; width: 24px; height: 24px; border: 1px solid black;"></td> + <td><code>yellow</code> = "#FFFF00"</td> + </tr> + <tr> + <td style="background-color: maroon; width: 24px; height: 24px; border: 1px solid black;"></td> + <td><code>maroon</code> = "#800000"</td> + <td style="background-color: navy; width: 24px; height: 24px; border: 1px solid black;"></td> + <td><code>navy</code> = "#000080"</td> + </tr> + <tr> + <td style="background-color: red; width: 24px; height: 24px; border: 1px solid black;"></td> + <td><code>red</code> = "#FF0000"</td> + <td style="background-color: blue; width: 24px; height: 24px; border: 1px solid black;"></td> + <td><code>blue</code> = "#0000FF"</td> + </tr> + <tr> + <td style="background-color: purple; width: 24px; height: 24px; border: 1px solid black;"></td> + <td><code>purple</code> = "#800080"</td> + <td style="background-color: teal; width: 24px; height: 24px; border: 1px solid black;"></td> + <td><code>teal</code> = "#008080"</td> + </tr> + <tr> + <td style="background-color: fuchsia; width: 24px; height: 24px; border: 1px solid black;"></td> + <td><code>fuchsia</code> = "#FF00FF"</td> + <td style="background-color: aqua; width: 24px; height: 24px; border: 1px solid black;"></td> + <td><code>aqua</code> = "#00FFFF"</td> + </tr> + </tbody> + </table> + + <div class="note"><strong>Note:</strong> Do not use this attribute, as it is non-standard and only implemented in some versions of Microsoft Internet Explorer: The {{HTMLElement("td")}} element should be styled using <a href="/en-US/docs/CSS">CSS</a>. To create a similar effect use the {{cssxref("background-color")}} property in <a href="/en-US/docs/CSS">CSS</a> instead.</div> + </dd> +</dl> + +<dl> + <dt>{{htmlattrdef("char")}} {{obsolete_inline("html5")}}</dt> + <dd>The content in the cell element is aligned to a character. Typical values include a period (.) to align numbers or monetary values. If {{htmlattrxref("align", "td")}} is not set to <code>char</code>, this attribute is ignored. + <div class="note"><strong>Note:</strong> Do not use this attribute as it is obsolete in the latest standard. To achieve the same effect, you can specify the character as the first value of the {{cssxref("text-align")}} property, {{unimplemented_inline}} in CSS3.</div> + </dd> + <dt>{{htmlattrdef("charoff")}} {{obsolete_inline("html5")}}</dt> + <dd>This attribute is used to shift column data to the right of the character specified by the <strong>char</strong> attribute. Its value specifies the length of this shift. + <div class="note"><strong>Note: </strong>Do not use this attribute as it is obsolete in the latest standard.</div> + </dd> + <dt>{{htmlattrdef("colspan")}}</dt> + <dd>This attribute contains a non-negative integer value that indicates for how many columns the cell extends. Its default value is <code>1</code>. Values higher than 1000 will be considered as incorrect and will be set to the default value (1).</dd> + <dt>{{htmlattrdef("headers")}}</dt> + <dd>This attribute contains a list of space-separated strings, each corresponding to the <strong>id</strong> attribute of the {{HTMLElement("th")}} elements that apply to this element.</dd> + <dt>{{htmlattrdef("height")}} {{Deprecated_inline("html 4")}}, {{obsolete_inline("html5")}}</dt> + <dd>This attribute is used to define a recommended cell height. + <div class="note"><strong>Note:</strong> Do not use this attribute as it is obsolete in the latest standard: use the CSS {{cssxref("height")}} property instead.</div> + </dd> + <dt>{{htmlattrdef("rowspan")}}</dt> + <dd>This attribute contains a non-negative integer value that indicates for how many rows the cell extends. Its default value is <code>1</code>; if its value is set to <code>0</code>, it extends until the end of the table section ({{HTMLElement("thead")}}, {{HTMLElement("tbody")}}, {{HTMLElement("tfoot")}}, even if implicitly defined), that the cell belongs to. Values higher than 65534 are clipped down to 65534.</dd> + <dt>{{htmlattrdef("scope")}} {{obsolete_inline("html5")}}</dt> + <dd>This enumerated attribute defines the cells that the header (defined in the {{HTMLElement("th")}}) element relates to. + <div class="note"><strong>Note:</strong> Using this attribute with a table cell element is obsolete in the latest standard. Use this attribute only with the {{HTMLElement("th")}} element to define the row or column for which it is a header.</div> + </dd> + <dt>{{htmlattrdef("valign")}} {{obsolete_inline("html5")}}</dt> + <dd>This attribute specifies how a text is vertically aligned inside a cell. Possible values for this attribute are: + <ul> + <li><code>baseline</code>: Positions the text near the bottom of the cell and aligns it with the <a href="https://en.wikipedia.org/wiki/Baseline_%28typography%29">baseline</a> of the characters instead of the bottom. If characters don't descend below the baseline, the baseline value achieves the same effect as <code>bottom</code>.</li> + <li><code>bottom</code>: Positions the text near the bottom of the cell.</li> + <li><code>middle</code>: Centers the text in the cell.</li> + <li>and <code>top</code>: Positions the text near the top of the cell.</li> + </ul> + + <div class="note"><strong>Note:</strong> Do not use this attribute as it is obsolete in the latest standard: use the CSS {{cssxref("vertical-align")}} property instead.</div> + </dd> + <dt>{{htmlattrdef("width")}} {{Deprecated_inline("html 4")}}, {{obsolete_inline("html5")}}</dt> + <dd>This attribute is used to define a recommended cell width. Additional space can be added with the <a href="/en-US/docs/Web/API/HTMLTableElement/cellSpacing">cellspacing</a> and <a href="/en-US/docs/Web/API/HTMLTableElement/cellPadding">cellpadding</a> properties and the width of the {{HTMLElement("col")}} element can also create extra width. But, if a column's width is too narrow to show a particular cell properly, it will be widened when displayed. + <div class="note"><strong>Note:</strong> Do not use this attribute as it is obsolete in the latest standard: use the CSS {{cssxref("width")}} property instead.</div> + </dd> +</dl> + +<h2 id="例子">例子</h2> + +<p>请在 {{HTMLElement("table")}} 上查看 <code><td></code> 的例子。</p> + +<h2 id="规范">规范</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">规范</th> + <th scope="col">状态</th> + <th scope="col">备注</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG','tables.html#the-td-element','td element')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C','tabular-data.html#the-td-element','td element')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> + +<p>{{Compat("html.elements.td")}}</p> + +<h2 id="参见">参见</h2> + +<ul> + <li>其他与表格有关的 HTML 元素：{{HTMLElement("caption")}}、{{HTMLElement("col")}}、{{HTMLElement("colgroup")}}、{{HTMLElement("table")}}、{{HTMLElement("tbody")}}、{{HTMLElement("tfoot")}}、{{HTMLElement("th")}}、{{HTMLElement("thead")}}、{{HTMLElement("tr")}}。</li> +</ul> diff --git a/files/zh-cn/web/html/element/template/index.html b/files/zh-cn/web/html/element/template/index.html new file mode 100644 index 0000000000..0bdb141ebb --- /dev/null +++ b/files/zh-cn/web/html/element/template/index.html @@ -0,0 +1,156 @@ +--- +title: <template>：内容模板元素 +slug: Web/HTML/Element/template +tags: + - HTML + - Web + - Web Components + - Web 组件 + - 元素 +translation_of: Web/HTML/Element/template +--- +<p id="Summary">{{HTMLRef}}</p> + +<p><strong>HTML内容模板（<code><template></code>）元素</strong>是一种用于保存客户端内容机制，该内容在加载页面时不会呈现，但随后可以(原文为 may be)在运行时使用JavaScript实例化。</p> + +<p>将模板视为一个可存储在文档中以便后续使用的内容片段。虽然解析器在加载页面时确实会处理<strong><code><template></code></strong>元素的内容，但这样做只是为了确保这些内容有效；但元素内容不会被渲染。</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/en-US/docs/Web/HTML/Content_categories">Content categories</a></th> + <td><a href="/en-US/docs/Web/HTML/Content_categories#Metadata_content">Metadata content</a>, <a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">flow content</a>, <a href="/en-US/docs/Web/Guide/HTML/Content_categories#Phrasing_content">phrasing content</a>, script-supporting element</td> + </tr> + <tr> + <th scope="row">Permitted content</th> + <td>No restrictions</td> + </tr> + <tr> + <th scope="row">Tag omission</th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th scope="row">Permitted parents</th> + <td>{{HTMLElement("body")}}, {{HTMLElement("frameset")}}, {{HTMLElement("head")}}, {{HTMLElement("dl")}} and {{HTMLElement("colgroup")}} without a <code>span</code> attribute</td> + </tr> + <tr> + <th scope="row">Permitted ARIA roles</th> + <td>None</td> + </tr> + <tr> + <th scope="row">DOM interface</th> + <td>{{domxref("HTMLTemplateElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Attributes" name="Attributes">属性</h2> + +<p>此元素仅包含<a href="/en-US/docs/Web/HTML/Global_attributes">全局属性</a>。</p> + +<p>但， {{domxref("HTMLTemplateElement")}} 有个属性： {{domxref("HTMLTemplateElement.content", "content")}} , 这个属性是只读的{{domxref("DocumentFragment")}} 包含了模板所表示的DOM树。</p> + +<h2 id="示例">示例</h2> + +<p>首先我们从示例的HTML部分开始。</p> + +<pre class="brush: html"><table id="producttable"> + <thead> + <tr> + <td>UPC_Code</td> + <td>Product_Name</td> + </tr> + </thead> + <tbody> + <!-- 现有数据可以可选地包括在这里 --> + </tbody> +</table> + +<template id="productrow"> + <tr> + <td class="record"></td> + <td></td> + </tr> +</template> +</pre> + +<p>首先，我们有一个表，稍后我们将使用JavaScript代码在其中插入内容。然后是模板，它描述了表示单个表行的HTML片段的结构。</p> + +<p>既然已经创建了表并定义了模板，我们使用JavaScript将行插入到表中，每一行都是以模板为基础构建的。</p> + +<pre class="brush:js;">// 通过检查来测试浏览器是否支持HTML模板元素 +// 用于保存模板元素的内容属性。 +if ('content' in document.createElement('template')) { + + // 使用现有的HTML tbody实例化表和该行与模板 + let t = document.querySelector('#productrow'), + td = t.content.querySelectorAll("td"); + td[0].textContent = "1235646565"; + td[1].textContent = "Stuff"; + + // 克隆新行并将其插入表中 + let tb = document.getElementsByTagName("tbody"); + let clone = document.importNode(t.content, true); + tb[0].appendChild(clone); + + // 创建一个新行 + td[0].textContent = "0384928528"; + td[1].textContent = "Acme Kidney Beans"; + + // 克隆新行并将其插入表中 + let clone2 = document.importNode(t.content, true); + tb[0].appendChild(clone2); + +} else { + // 找到另一种方法来添加行到表，因为不支持HTML模板元素。 +} +</pre> + +<p>结果是原始的HTML表格，通过JavaScript添加了两行新内容：</p> + +<div class="hidden"> +<pre class="brush: css">table { + background: #000; +} +table td { + background: #fff; +} +</pre> +</div> + +<p>{{EmbedLiveSample("示例", 500, 120)}}</p> + +<h2 id="Specifications" name="Specifications">标准</h2> + +<table class="spectable standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG','/scripting-1.html#the-template-element','template element')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C','/scripting-1.html#the-template-element','template element')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">浏览器兼容性</h2> + +<p>{{Compat("html.elements.template")}}</p> + +<h2 id="See_also" name="See_also">参见</h2> + +<ul> + <li>Web components: {{HTMLElement("slot")}} (and historical: {{HTMLElement("shadow")}})</li> + <li><a href="https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_templates_and_slots">Using templates and slots</a></li> +</ul> + +<div></div> diff --git a/files/zh-cn/web/html/element/textarea/index.html b/files/zh-cn/web/html/element/textarea/index.html new file mode 100644 index 0000000000..0416c01444 --- /dev/null +++ b/files/zh-cn/web/html/element/textarea/index.html @@ -0,0 +1,275 @@ +--- +title: <textarea> +slug: Web/HTML/Element/textarea +tags: + - HTML + - HTML表单 + - textarea + - 元素 + - 参考 + - 文本区域 + - 表单 +translation_of: Web/HTML/Element/textarea +--- +<p id="简介"><strong>HTML <code><textarea></code> 元素</strong>表示一个多行纯文本编辑控件，当你希望用户输入一段相当长的、不限格式的文本，例如评论或反馈表单中的一段意见时，这很有用。</p> + +<p>{{EmbedInteractiveExample("pages/tabbed/textarea.html", "tabbed-standard")}}</p> + +<p>上述例子展示了 <code><textarea></code> 的几个特点：</p> + +<ul> + <li>为了提高可访问性（accessibility），用于将 <code><textarea></code>与一个 {{htmlelement("label")}} 关联的 <code>id</code> 属性。</li> + <li><code>name</code> 属性，用于设置随表单一同提交到服务器的相关数据的名字。</li> + <li><code>rows</code> 和 <code>cols</code> 属性，用于声明 <code><textarea></code> 的精确尺寸。这对于一致性非常有帮助，因为不同浏览器的默认值常常不一样。</li> + <li>位于开始标签和闭合标签之间的默认内容。<code><textarea></code> 不支持 <code>value</code> 属性。</li> +</ul> + +<p><code><textarea></code> 还可以使用 <code><input></code> 中的一些常见属性，如<code>autocomplete</code>, <code>autofocus</code>, <code>disabled</code>, <code>placeholder</code>, <code>readonly</code>, 和 <code>required</code>。</p> + +<h2 id="属性">属性</h2> + +<p><span>这个元素包含了</span><a href="https://developer.mozilla.org/en-US/docs/HTML/Global_attributes" title="HTML/Global attributes">全局属性</a><span>。</span></p> + +<dl> + <dt>{{htmlattrdef("autocapitalize")}} {{non-standard_inline}}</dt> + <dd>iOS的非标准属性（运行在iOS上的Safari、Firefox、Chrome都支持），文本是否自动首字母大写。在iOS5和之后的版本上有效。可能的值为： + <ul> + <li><code>none</code>: 禁用首字母大写。</li> + <li><code>sentences</code>: 句子的首字母大写。</li> + <li><code>words</code>: 单词或者字母的首字母大写。</li> + <li><code>characters</code>: 全部字母大写。</li> + <li><code>on</code>: {{deprecated_inline()}} 自iOS 5废弃。</li> + <li><code>off</code>: {{deprecated_inline()}} 自iOS 5废弃。</li> + </ul> + </dd> + <dt>{{htmlattrdef("autocomplete")}}</dt> + <dd>是否使用浏览器的记忆功能自动填充文本。可能的值有： + <ul> + <li><code>off</code>: 不使用浏览器的记忆自动填充，使用者必须输入他们想要输入的所有内容。或者网页提供了自己的自动填充方法。</li> + <li><code>on</code>: 浏览器根据用户之前输入的内容或者习惯，在用户输入的时候给出相应输入提示。</li> + </ul> + + <p>如果不指明<strong>autocomplete</strong>属性，浏览器会从父级的表单元素上解析是不是开启这个属性。表单元素可以是`textarea`元素的父级{{HTMLElement("form")}}或者`textarea`有跟表单相同的id（参见下面的form属性）。更多请查看{{HTMLElement("form")}}的{{htmlattrxref("autocomplete", "form")}} 属性。</p> + </dd> + <dt>{{ htmlattrdef("autofocus") }}</dt> + <dd>页面加载完毕之后是否自动给本元素添加焦点。只有跟表格关联的才能使本属性生效。</dd> + <dt>{{ htmlattrdef("cols") }}</dt> + <dd>文本域的可视宽度。必须为正数，默认为20 (HTML5)。</dd> + <dt>{{ htmlattrdef("disabled") }}</dt> + <dd>禁用文本域。默认为false。如果未指定，也可以从父级上如{{ HTMLElement("fieldset") }}继承而来。</dd> + <dt>{{ htmlattrdef("form") }}</dt> + <dd>指定跟自身相关联的表单。值必须为本文档内的表单的ID，如果未指定，就是跟当前所在的表单元素相关联。这就允许你在文档的任意地方放置文本域元素。</dd> + <dt>{{ htmlattrdef("maxlength") }}</dt> + <dd>允许用户输入的最大字符长度 (Unicode) 。未指定表示无限长度。</dd> + <dt>{{ htmlattrdef("minlength") }}</dt> + <dd>允许用户输入的最小字符长度(Unicode) </dd> + <dt>{{ htmlattrdef("name") }}</dt> + <dd>元素的名称。</dd> + <dt>{{ htmlattrdef("placeholder") }}</dt> + <dd>向用户提示可以在控件中输入的内容。 在渲染提示时，占位符文本中的回车符(\r)或换行符(\n)一定会被作为行断（换行）处理。</dd> + <dd> + <div class="note"> + <p><strong>Note:</strong> Placeholders should only be used to show an example of the type of data that should be entered into a form; they are <em>not</em> a substitute for a proper {{HTMLElement("label")}} element tied to the input. See {{SectionOnPage("/en-US/docs/Web/HTML/Element/input", "Labels and placeholders")}} for a full explanation.</p> + </div> + </dd> + <dt>{{ htmlattrdef("readonly") }}</dt> + <dd>不允许用户修改元素内文本。和 <code>disabled</code> 属性不同的是，这个能让用户点击和选择元素内的文本。如果在表单里，这个元素的值还是会跟随表单一起提交。</dd> + <dt>{{ htmlattrdef("required") }}</dt> + <dd>提示用户这个元素的内容必填。</dd> + <dt>{{ htmlattrdef("rows") }}</dt> + <dd>元素的输入文本的行数（显示的高度）。</dd> + <dt>{{ htmlattrdef("spellcheck") }}</dt> + <dd>该属性设为true时，表明该元素会做拼写和语法检查。属性值为default时，表明元素有默认行为，可能会基于父元素的spellcheck值。属性值为false时，表明元素不做拼写和语法检查。</dd> + <dt>{{ htmlattrdef("wrap") }}</dt> + <dd>指定文本换行的方式。默认为soft。可能的值为： + <ul> + <li><span style="font-family: courier new;">hard</span>: 在文本到达元素最大宽度的时候，浏览器自动插入换行符(CR+LF) 。比如指定 <code>cols</code>值。</li> + <li><span style="font-family: courier new;">soft</span>: 在到达元素最大宽度的时候，不会自动插入换行符。</li> + </ul> + </dd> + <dd> + <ul> + </ul> + </dd> +</dl> + +<h2 id="使用_CSS_样式">使用 CSS 样式</h2> + +<p><code><textarea></code> 是 <a href="https://developer.mozilla.org/en-US/docs/CSS/Replaced_element" title="/en-US/docs/CSS/Replaced_element">可被替换的元素</a>——其有自己的固有尺寸，像。默认情况下，其 {{cssxref("display")}} 值为 <code>block</code>。与其他表单元素相比，这个元素相对比较容易设置样式，使用常规的 CSS 就可以轻松设置它的盒模型、字体、颜色方案等。</p> + +<p><a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/HTML/Forms/Styling_HTML_forms">Styling HTML forms</a> 这个页面提供了一些关于 <code><textarea></code> 样式的有用提示。</p> + +<h3 id="基线不一致">基线不一致</h3> + +<p>The HTML specification doesn't define where the baseline of a <code><textarea></code> is, so different browsers set it to different positions. For Gecko, the <code><textarea></code> baseline is set on the baseline of the first line of the textarea's first line, on another browser it may be set on the bottom of the <code><textarea></code> box. Don't use {{cssxref("vertical-align")}}<code>: baseline</code> on it; the behavior is unpredictable.</p> + +<h3 id="控制文本区是否可调整大小">控制文本区是否可调整大小</h3> + +<p>In most browsers, <code><textarea></code>s are resizable — you'll notice the drag handle in the right hand corner, which can be used to alter the size of the element on the page. This is controlled by the {{ cssxref("resize") }} CSS property — resizing is enabled by default, but you can explicitly disable it using a <code>resize</code> value of <code>none</code>:</p> + +<pre>textarea { + resize: none; +} +</pre> + +<h3 id="在样式中使用有效值和无效值">在样式中使用有效值和无效值</h3> + +<p>Valid and invalid values of a <code><textarea></code> element (e.g. those within, and outside the bounds set by <code>minlength</code>, <code>maxlength</code>, or <code>required</code>) can be highlighted using the {{cssxref(":valid")}} and {{cssxref(":invalid")}} pseudo-classes. For example, to give your textarea a different border depending on whether it is valid or invalid:</p> + +<pre>textarea:invalid { + border: 2px dashed red; +} + +textarea:valid { + border: 2px solid lime; +}</pre> + +<h2 id="Example" name="Example">示例</h2> + +<h3 id="HTML_内容">HTML 内容</h3> + +<pre class="brush: html"><textarea name="textarea" rows="10" cols="50">Write something here</textarea></pre> + +<p>{{ EmbedLiveSample('Example','600','200') }}</p> + +<h3 id="基本示例">基本示例</h3> + +<p>The following example show a very simple textarea, with a set numbers of rows and columns and some default content.</p> + +<pre><textarea name="textarea" + rows="10" cols="50">Write something here</textarea></pre> + +<p>{{ EmbedLiveSample('Basic_example','600','150') }}</p> + +<h3 id="最小和最大长度">最小和最大长度</h3> + +<p>This example has a minimum and maximum number of characters — of 10 and 20 respectively. Try it and see.</p> + +<pre><textarea name="textarea" + rows="5" cols="30" + minlength="10" maxlength="20">Write something here</textarea></pre> + +<p>{{ EmbedLiveSample('Min_and_max_length','600','80') }}</p> + +<p>Note that <code>minlength</code> doesn't stop the user from removing characters so that the number entered goes past the minimum, but it does make the value entered into the <code><textarea></code> invalid. Also note that even if you have a <code>minlength</code> value set (3, for example), an empty <code><textarea></code> is still considered valid unless you also have the <code>required</code> attribute set.</p> + +<h3 id="占位符">占位符</h3> + +<p>This example has a placeholder set. Notice how it disappears when you start typing into the box.</p> + +<pre><textarea name="textarea" + rows="5" cols="30" + placeholder="Comment text."></textarea></pre> + +<p>{{ EmbedLiveSample('Placeholder','600','80') }}</p> + +<div class="blockIndicator note"> +<p><strong>Note:</strong> Placeholders should only be used to show an example of the type of data that should be entered into a form; they are <em>not</em> a substitute for a proper {{HTMLElement("label")}} element tied to the input. See {{SectionOnPage("/en-US/docs/Web/HTML/Element/input", "Labels and placeholders")}} for a full explanation.</p> +</div> + +<h3 id="禁用和只读">禁用和只读</h3> + +<p>This example shows two <code><textarea></code>s — one of which is <code>disabled</code>, and one of which is <code>readonly</code>. Have a play with both and you'll see the difference in behavior — the <code>disabled</code> element is not selectable in any way (and its value is not submitted), whereas the <code>readonly</code> element is selectable and its contents copyable (and its value is submitted); you just can't edit the contents.</p> + +<div class="blockIndicator note"> +<p><strong>Note:</strong> In browsers other than firefox, such as chrome, the <code>disabled</code> textarea content may be selectable and copyable.</p> +</div> + +<pre><textarea name="textarea" + rows="5" cols="30" + disabled>I am a disabled textarea</textarea> +<textarea name="textarea" + rows="5" cols="30" + readonly>I am a readonly textarea</textarea> +</pre> + +<p>{{ EmbedLiveSample('Disabled_and_readonly','600','80') }}</p> + +<h2 id="技术概览">技术概览</h2> + +<table> + <tbody> + <tr> + <th scope="row"><a href="https://wiki.developer.mozilla.org/en-US/docs/HTML/Content_categories">Content categories</a></th> + <td><a href="https://wiki.developer.mozilla.org/en-US/docs/HTML/Content_categories#Flow_content">Flow content</a>, <a href="https://wiki.developer.mozilla.org/en-US/docs/HTML/Content_categories#Phrasing_content">phrasing content</a>, <a href="https://wiki.developer.mozilla.org/en-US/docs/HTML/Content_categories#Interactive_content">Interactive content</a>, <a href="https://wiki.developer.mozilla.org/en-US/docs/HTML/Content_categories#Form_listed">listed</a>, <a href="https://wiki.developer.mozilla.org/en-US/docs/HTML/Content_categories#Form_labelable">labelable</a>, <a href="https://wiki.developer.mozilla.org/en-US/docs/HTML/Content_categories#form_resettable">resettable</a>, and <a href="https://wiki.developer.mozilla.org/en-US/docs/HTML/Content_categories#Form_submittable">submittable</a> <a href="https://wiki.developer.mozilla.org/en-US/docs/HTML/Content_categories#Form-associated_">form-associated</a> element.</td> + </tr> + <tr> + <th scope="row">Permitted content</th> + <td>Text</td> + </tr> + <tr> + <th scope="row">Tag omission</th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th scope="row">Permitted parents</th> + <td>Any element that accepts <a href="https://wiki.developer.mozilla.org/en-US/docs/HTML/Content_categories#Phrasing_content">phrasing content</a>.</td> + </tr> + <tr> + <th scope="row">Implicit ARIA role</th> + <td><code><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/textbox_role">textbox</a></code></td> + </tr> + <tr> + <th scope="row">Permitted ARIA roles</th> + <td>No <code>role</code> permitted</td> + </tr> + <tr> + <th scope="row">DOM interface</th> + <td>{{domxref("HTMLTextAreaElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="规范">规范</h2> + +<table> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'forms.html#the-textarea-element', '<textarea>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'sec-forms.html#the-textarea-element', '<textarea>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'interact/forms.html#h-17.7', '<textarea>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<p>{{Compat("html.elements.textarea")}}</p> + +<h2 id="参见">参见</h2> + +<p>其他与表单相关的元素：</p> + +<ul> + <li>{{ HTMLElement("form") }}</li> + <li>{{ HTMLElement("button") }}</li> + <li>{{ HTMLElement("datalist") }}</li> + <li>{{ HTMLElement("legend") }}</li> + <li>{{ HTMLElement("label") }}</li> + <li>{{ HTMLElement("select") }}</li> + <li>{{ HTMLElement("optgroup") }}</li> + <li>{{ HTMLElement("option") }}</li> + <li>{{ HTMLElement("input") }}</li> + <li>{{ HTMLElement("keygen") }}</li> + <li>{{ HTMLElement("fieldset") }}</li> + <li>{{ HTMLElement("output") }}</li> + <li>{{ HTMLElement("progress") }}</li> + <li>{{ HTMLElement("meter") }}</li> +</ul> diff --git a/files/zh-cn/web/html/element/tfoot/index.html b/files/zh-cn/web/html/element/tfoot/index.html new file mode 100644 index 0000000000..ecfae6ee88 --- /dev/null +++ b/files/zh-cn/web/html/element/tfoot/index.html @@ -0,0 +1,202 @@ +--- +title: <tfoot> +slug: Web/HTML/Element/tfoot +translation_of: Web/HTML/Element/tfoot +--- +<p id="Summary"><strong>HTML 元素<code><tfoot></code> </strong> 定义了一组表格中各列的汇总行。</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/en-US/docs/Web/Guide/HTML/Content_categories">内容类别</a></th> + <td>无。</td> + </tr> + <tr> + <th scope="row">允许的内容 </th> + <td>0或多个{{HTMLElement("tr")}} 元素。</td> + </tr> + <tr> + <th scope="row">标签省略</th> + <td>开始标签是必需的。.在父元素 {{HTMLElement("table")}} 没有后续内容的情况下，结束标签可被省略。</td> + </tr> + <tr> + <th scope="row">允许的父元素</th> + <td>{{HTMLElement("table")}} 元素。{{HTMLElement("tfoot")}} 必须出现在一个或多个 {{HTMLElement("caption")}}，{{HTMLElement("colgroup")}}，{{HTMLElement("thead")}}, {{HTMLElement("tbody")}}，或 {{HTMLElement("tr")}} 元素之后。 注意这是自 HTML5 起有的要求。<br> + {{HTMLVersionInline("4")}} {{HTMLElement("tfoot")}} 元素不能放在任何 {{HTMLElement("tbody")}} 或 {{HTMLElement("tr")}} 元素之后。注意，这与上述HTML5的标准相冲突。</td> + </tr> + <tr> + <th scope="row">Permitted ARIA roles</th> + <td>任意。</td> + </tr> + <tr> + <th scope="row">DOM 接口</th> + <td>{{domxref("HTMLTableSectionElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="属性">属性</h2> + +<p>此元素包含 <a href="/en-US/docs/Web/HTML/Global_attributes">全局属性</a>.</p> + +<dl> + <dt>{{htmlattrdef("align")}} {{Deprecated_inline}} in {{HTMLVersionInline("4")}}, {{obsolete_inline}} in {{HTMLVersionInline("5")}}</dt> + <dd> + <p>此枚举属性指定每个单元格内容所使用的水平对齐方式。可选值为：</p> + + <ul> + <li><code>left</code>，单元格内容左对齐</li> + <li><code>center</code>，单元格内容居中对齐</li> + <li><code>right</code>，单元格内容右对齐</li> + <li><code>justify</code>，插入空白调整单元格中的文本内容（译者注：即两端对齐）</li> + <li><code>char</code>，将文本内容与一个具有最小偏移量的特定字符对齐，字符和偏移量分别由{{htmlattrxref("char", "tbody")}}和{{htmlattrxref("charoff", "tbody")}}属性定义。{{unimplemented_inline("2212")}}.</li> + </ul> + + <p>若此值未设置，则假定为<code>left</code>。</p> + + <div class="note"> + <p><strong>Note: </strong>此属性在最新标准中已被废弃（不支持），所以请勿使用。</p> + + <ul> + <li>为达到与<code>left</code>, <code>center</code>, <code>right</code>或<code>justify</code>相同的效果，请使用CSS {{cssxref("text-align")}}属性。</li> + <li>为达到与char值相同的效果，在CSS3中可将{{htmlattrxref("char", "tfoot")}}的值用作{{cssxref("text-align")}}的属性值{{unimplemented_inline}}。</li> + </ul> + </div> + </dd> +</dl> + +<dl> + <dt>{{htmlattrdef("bgcolor")}} {{Non-standard_inline}}</dt> + <dd>此属性定义了列内单元格的背景色。定义此属性使用'#'作为前缀，其后是定义于<a class="external" href="https://www.w3.org/Graphics/Color/sRGB">sRGB</a>的6位十六进制码。 + <p>也可使用以下16种预定义的色彩字符串之一：</p> + + <table style="width: 80%;"> + <tbody> + <tr> + <td style="background-color: black; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td> + <td><code>black</code> = "#000000"</td> + <td style="background-color: green; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td> + <td><code>green</code> = "#008000"</td> + </tr> + <tr> + <td style="background-color: silver; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td> + <td><code>silver</code> = "#C0C0C0"</td> + <td style="background-color: lime; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td> + <td><code>lime</code> = "#00FF00"</td> + </tr> + <tr> + <td style="background-color: gray; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td> + <td><code>gray</code> = "#808080"</td> + <td style="background-color: olive; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td> + <td><code>olive</code> = "#808000"</td> + </tr> + <tr> + <td style="background-color: white; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td> + <td><code>white</code> = "#FFFFFF"</td> + <td style="background-color: yellow; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td> + <td><code>yellow</code> = "#FFFF00"</td> + </tr> + <tr> + <td style="background-color: maroon; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td> + <td><code>maroon</code> = "#800000"</td> + <td style="background-color: navy; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td> + <td><code>navy</code> = "#000080"</td> + </tr> + <tr> + <td style="background-color: red; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td> + <td><code>red</code> = "#FF0000"</td> + <td style="background-color: blue; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td> + <td><code>blue</code> = "#0000FF"</td> + </tr> + <tr> + <td style="background-color: purple; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td> + <td><code>purple</code> = "#800080"</td> + <td style="background-color: teal; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td> + <td><code>teal</code> = "#008080"</td> + </tr> + <tr> + <td style="background-color: fuchsia; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td> + <td><code>fuchsia</code> = "#FF00FF"</td> + <td style="background-color: aqua; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td> + <td><code>aqua</code> = "#00FFFF"</td> + </tr> + </tbody> + </table> + + <div class="note"><strong>Usage Note: </strong>请勿使用此属性，因为这并非标准，且只有某些特定版本的Microsoft Internet Explorer（IE浏览器）支持：{{HTMLElement("tfoot")}}元素应使用<a href="/en-US/docs/Web/CSS">CSS</a>设计。若想得到与<strong>bgcolor</strong>属性相似的效果，可在相关的 {{HTMLElement("td")}}或{{HTMLElement("th")}}元素中使用<a href="/en-US/docs/Web/CSS">CSS</a> {{cssxref("background-color")}}属性。</div> + </dd> +</dl> + +<dl> + <dt>{{htmlattrdef("char")}} {{Deprecated_inline}} in {{HTMLVersionInline("4")}}, {{obsolete_inline}} in {{HTMLVersionInline("5")}}</dt> + <dd>此属性设置单元格对齐的基准字符。当对齐数字或货币值时，一个典型值会带有一个句点(.)。如果{{htmlattrxref("align", "tfoot")}}未设置为<code>char</code>，此属性将被忽略。 + <div class="note"><strong>Note: </strong>请勿使用此属性，因为在最新标准中此属性被废弃（且不受支持）。想要达到与{{htmlattrxref("char", "tbtfootody")}}相同的效果，在CSS3中，可将{{cssxref("text-align")}}属性设置为{{htmlattrxref("char", "tfoot")}}的属性值{{unimplemented_inline}}。</div> + </dd> +</dl> + +<dl> + <dt>{{htmlattrdef("charoff")}} {{Deprecated_inline}} in {{HTMLVersionInline("4")}}, {{obsolete_inline}} in {{HTMLVersionInline("5")}}</dt> + <dd>此属性用作表明列内数据对于对齐基准字符的偏移字符数，对其基准字符由<code>char</code>属性指定。 + <div class="note"><strong>Note: </strong> 请勿使用此属性，因为在最新标准中此属性被废弃（且不受支持）。</div> + </dd> +</dl> + +<dl> + <dt>{{htmlattrdef("valign")}} {{Deprecated_inline}} in {{HTMLVersionInline("4")}}, {{obsolete_inline}} in {{HTMLVersionInline("5")}}</dt> + <dd>此属性指定表头（译者注：英文原文为table header，疑似错误）中每一行内的文本的垂直对齐方式。此属性的可选值为： + <ul> + <li><code>baseline</code>，会使文本尽可能接近单元格底部，但并不向底部对齐，而将它们以字符<a class="external" href="https://zh.wikipedia.org/wiki/%E5%9F%BA%E7%B7%9A">基线</a>对齐。如果所有字符的大小相同，此值与<code>bottom</code>的效果相同；</li> + <li><code>bottom</code>，设置文本向下对齐；</li> + <li><code>middle</code>，设置文本居中对齐；</li> + <li>and <code>top</code>，设置文本向上对齐。</li> + </ul> + + <div class="note"><strong>Note: </strong> 请勿使用此属性，因为在最新标准中此属性被废弃（且不受支持）：使用CSS属性{{cssxref("vertical-align")}}作为替代。</div> + </dd> +</dl> + +<h2 id="示例">示例</h2> + +<p>请查看{{HTMLElement("table")}}页面中<code><tfoot></code>的相关示例。</p> + +<h2 id="规范">规范</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG','tables.html#the-tfoot-element','tfoot element')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C','tabular-data.html#the-tfoot-element','tfoot element')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + + + +<p>{{Compat("html.elements.tfoot")}}</p> + +<h2 id="参见">参见</h2> + +<ul> + <li>其他table相关的HTML元素：{{HTMLElement("caption")}}, {{HTMLElement("col")}}, {{HTMLElement("colgroup")}}, {{HTMLElement("table")}}, {{HTMLElement("tbody")}}, {{HTMLElement("td")}}, {{HTMLElement("tbody")}}, {{HTMLElement("th")}}, {{HTMLElement("thead")}}, {{HTMLElement("tr")}};</li> + <li>在设计<code><tfoot></code>时可能会有特殊效果的CSS属性和伪类： + <ul> + <li>{{cssxref(":nth-child")}}伪类：设置列内元素的对齐方式；</li> + <li>{{cssxref("text-align")}}属性：可设置单元格内容与同一字符对齐，例如'.'。</li> + </ul> + </li> +</ul> + +<p>{{HTMLRef}}</p> diff --git a/files/zh-cn/web/html/element/th/index.html b/files/zh-cn/web/html/element/th/index.html new file mode 100644 index 0000000000..38aa571446 --- /dev/null +++ b/files/zh-cn/web/html/element/th/index.html @@ -0,0 +1,223 @@ +--- +title: <th> +slug: Web/HTML/Element/th +tags: + - HTML + - 标签 + - 表格 +translation_of: Web/HTML/Element/th +--- +<p><span class="seoSummary"><strong>HTML <code><th></code> 元素</strong></span>定义表格内的表头单元格。这部分特征是由<span class="seoSummary"> {{htmlattrxref("scope", "th")}} and {{htmlattrxref("headers", "th")}} 属性</span>准确定义的。</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/en-US/docs/HTML/Content_categories">内容范畴</a></th> + <td>无</td> + </tr> + <tr> + <th scope="row">允许内容</th> + <td> + <div class="content-models"> + <div id="table-mdls">流内容（除header、footer、sectioning content或heading content的继承。）</div> + </div> + </td> + </tr> + <tr> + <th scope="row">遗漏标签</th> + <td>开始标签是必需要的，而结束标签有时可以省略：当其后是{{HTMLElement("th")}} 或 {{HTMLElement("td")}} ，或者其后没有其他数据内容在其父元素内，。</td> + </tr> + <tr> + <th scope="row">允许的父级元素</th> + <td> {{HTMLElement("tr")}} 元素</td> + </tr> + <tr> + <th scope="row"><dfn>元素类型</dfn></th> + <td>任何</td> + </tr> + <tr> + <th scope="row">DOM接口</th> + <td>{{domxref("HTMLTableHeaderCellElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="属性">属性</h2> + +<p><span style="line-height: 21px;">该元素包含</span> <a href="/en-US/docs/Web/HTML/Global_attributes">全局属性</a></p> + +<dl> + <dt>{{htmlattrdef("abbr")}} {{obsolete_inline}} in {{HTMLVersionInline("5")}}</dt> + <dd>这个属性包含一个关于单元格内容的简单的介绍。一个用户代理（例如，语音阅读器）可能出现在描述之前。 + <div class="note"><strong>使用提醒 : 不要使用这个属性，因为它已经在最新标准中过时。相对的，你可以把简短的描述放置于单元格内，把较长的描述内容放到title属性内。</strong></div> + </dd> + <dt>{{htmlattrdef("align")}} {{Deprecated_inline}} in {{HTMLVersionInline("4")}}, {{obsolete_inline}} in {{HTMLVersionInline("5")}}</dt> + <dd>这个枚举属性指定单元格内容的水平对齐方式。可能的值有： + <ul> + <li><code>left</code>: 单元格内容左对齐</li> + <li><code>center</code>: 单元格内容居中</li> + <li><code>right</code>: 单元格内容右对齐</li> + <li><code>justify</code> (仅文字内容): 内容拉伸以覆盖单元格</li> + <li><code>char</code> (仅文字内容): 内容相对<code><th></code>标签中的某个字符对齐（默认值是页面语言的小数点字符）。该字符由{{htmlattrxref("char", "th")}} 和{{htmlattrxref("charoff", "th")}} 属性定义。</li> + </ul> + + <p>对齐方式的默认值是 <code>left</code>.</p> + + <div class="note"><strong>使用提示: 不要使用这个属性，因为它已经在最新标准中过时。</strong> + + <ul> + <li> <code>left</code>, <code>center</code>, <code>right</code> 或 <code>justify</code> 这些对齐效果，应该使用CSS的{{cssxref("text-align")}} 来实现。</li> + <li> <code>char</code> 的对齐效果使用CSS的 {{cssxref("text-align")}} 实现， {{htmlattrxref("char", "th")}}亦同. {{unimplemented_inline}} in CSS3.</li> + </ul> + </div> + </dd> + <dt>{{htmlattrdef("axis")}} {{obsolete_inline}} in {{HTMLVersionInline("5")}}</dt> + <dd>这个属性包含了一个空间分隔的字符串的列表.每个字符串是一组单元格的ID，而该表头适用于这个ID。 + <div class="note"><strong>使用提示: 不要使用这个属性，因为它已经在最新标准中过时。应该使用</strong> {{htmlattrxref("scope", "th")}} 属性代替。</div> + </dd> + <dt>{{htmlattrdef("bgcolor")}} {{Non-standard_inline}}</dt> + <dd>这个属性定义了每列中每单元格的背景色。它由带有‘#’前缀的6位数的十六进制码组成，并在<a href="https://www.w3.org/Graphics/Color/sRGB">sRGB</a>中被定义。这个属性可能会用到十六个预定义的颜色字符串儿之一。 + <table> + <tbody> + <tr> + <td style="background-color: black; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"></td> + <td><code>black</code> = "#000000"</td> + <td style="background-color: green; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"></td> + <td><code>green</code> = "#008000"</td> + </tr> + <tr> + <td style="background-color: silver; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"></td> + <td><code>silver</code> = "#C0C0C0"</td> + <td style="background-color: lime; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"></td> + <td><code>lime</code> = "#00FF00"</td> + </tr> + <tr> + <td style="background-color: gray; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"></td> + <td><code>gray</code> = "#808080"</td> + <td style="background-color: olive; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"></td> + <td><code>olive</code> = "#808000"</td> + </tr> + <tr> + <td style="background-color: white; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"></td> + <td><code>white</code> = "#FFFFFF"</td> + <td style="background-color: yellow; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"></td> + <td><code>yellow</code> = "#FFFF00"</td> + </tr> + <tr> + <td style="background-color: maroon; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"></td> + <td><code>maroon</code> = "#800000"</td> + <td style="background-color: navy; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"></td> + <td><code>navy</code> = "#000080"</td> + </tr> + <tr> + <td style="background-color: red; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"></td> + <td><code>red</code> = "#FF0000"</td> + <td style="background-color: blue; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"></td> + <td><code>blue</code> = "#0000FF"</td> + </tr> + <tr> + <td style="background-color: purple; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"></td> + <td><code>purple</code> = "#800080"</td> + <td style="background-color: teal; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"></td> + <td><code>teal</code> = "#008080"</td> + </tr> + <tr> + <td style="background-color: fuchsia; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"></td> + <td><code>fuchsia</code> = "#FF00FF"</td> + <td style="background-color: aqua; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"></td> + <td><code>aqua</code> = "#00FFFF"</td> + </tr> + </tbody> + </table> + + <div class="note"><strong>使用提示: </strong>不要使用这个属性，它不是标准属性且仅在某些版本的Microsoft Internet Explorer支持: {{HTMLElement("th")}} 元素应当用<a href="/en-US/docs/CSS">CSS</a>来样式化. 为了创造出同样的效果只需要使用<a href="/en-US/docs/CSS">CSS</a>中的{{cssxref("background-color")}}属性就可以啦。</div> + </dd> +</dl> + +<dl> + <dt>{{htmlattrdef("char")}} {{Deprecated_inline}} in {{HTMLVersionInline("4")}}, {{obsolete_inline}} in {{HTMLVersionInline("5")}}</dt> + <dd>列中的内容与<code><th></code> 元素中的字母对齐。通常其值包含一个(.)来排列数字或者货币值。 如果 {{htmlattrxref("align", "th")}}没有被设置为<code>char</code>，这个属性就会被忽略。 + <div class="note"><strong>使用提示: </strong>不要使用这个属性，因为它已经在最新标准中过时。为了达到同样的效果， 你可以指定该字母为{{cssxref("text-align")}} 属性中的第一个值,或通过CSS3中的{{unimplemented_inline}}。</div> + </dd> +</dl> + +<dl> + <dt>{{htmlattrdef("charoff")}} {{Deprecated_inline}} in {{HTMLVersionInline("4")}}, {{obsolete_inline}} in {{HTMLVersionInline("5")}}</dt> + <dd>这个属性用来将列数据移到<strong>char</strong>属性指定字母的右边。 其值指定了移动的长度。 + <div class="note"><strong>使用提示: </strong>不要使用这个属性，因为它已经在最新标准中过时。</div> + </dd> +</dl> + +<dl> + <dt>{{htmlattrdef("colspan")}}</dt> + <dd>这个属性包含一个正整数表示了每单元格中扩展列的数量。默认值为<code>1</code> 。超过1000的值被视作1000。</dd> + <dt>{{htmlattrdef("headers")}}</dt> + <dd>这个属性包含了一个空间分隔的字符串的列表, 每个与其他{{HTMLElement("th")}}元素相关联的<code>id</code> 属性一一对应。</dd> + <dt>{{htmlattrdef("rowspan")}}</dt> + <dd>这个属性包含一个正整数表示了每单元格中扩展列的数量。默认值为<code>1.</code> 如果该值被设置为 <code>0</code>, 这个单元格就被扩展为({{HTMLElement("thead")}}，{{HTMLElement("tbody")}} 或{{HTMLElement("tfoot")}})中表格部分的最后一个元素。比65534大的值被视作65534。</dd> + <dt>{{htmlattrdef("scope")}}</dt> + <dd>这个枚举属性定义了表头元素 <sup>(在{{HTMLElement("th")}}中定义) </sup>关联的单元格。它可能有以下值： + <ul> + <li><code>row</code>: 表头关联一行中所有的单元格。</li> + <li><code>col</code>: 表头关联一列中所有的单元格。</li> + <li><code>rowgroup</code>:表头属于一个行组并与其中所有单元格相关联。这些单元格可以被放在表头的左侧或右侧，取决于 {{HTMLElement("table")}} 元素中 <code><a href="/en-US/docs/Web/HTML/Global_attributes/dir">dir</a></code> 属性的值 。</li> + <li><code>colgroup</code>: 表头属于一个列组并与其中所有单元格相关联。</li> + <li><code>auto</code></li> + </ul> + </dd> + <dt>{{htmlattrdef("valign")}} {{Deprecated_inline}} in {{HTMLVersionInline("4")}}, {{obsolete_inline}} in {{HTMLVersionInline("5")}}</dt> + <dd>这个属性指定了单元格内文本的垂直对齐方式。这个属性可能有以下值: + <ul> + <li><code>baseline</code>: 将文本置于单元格底部并将其与字母的<a href="https://en.wikipedia.org/wiki/Baseline_%28typography%29">baseline</a>对齐而不是与底部。若字母没有baseline以下的部分（即为无<a href="https://www.wikiwand.com/zh/%E9%99%8D%E9%83%A8">降部</a>）那么baseline值起到的效果便和<code>bottom相同。</code></li> + <li><code>bottom</code>: 将文本置于底部。</li> + <li><code>middle</code>: 将文本置于单元格中央。</li> + <li><code>top</code>: 将文本置于单元格顶部。</li> + </ul> + + <div class="note"><strong>使用提示：</strong>不要使用这个属性，因为它已经在最新标准中过时。使用CSS {{cssxref("vertical-align")}}特性代替。</div> + </dd> + <dt>{{htmlattrdef("width")}} {{Deprecated_inline}} in {{HTMLVersionInline(4.01)}}</dt> + <dd>这个属性用来定义一个期望的单元格宽。额外的空间可以藉由<a href="/en-US/docs/Web/API/HTMLTableElement/cellSpacing">cellspacing</a>和 <a href="/en-US/docs/Web/API/HTMLTableElement/cellPadding">cellpadding</a> 属性来增加，并且{{HTMLElement("col")}}元素的宽也可以创造额外空间。但是，如果一列宽太窄以至于无法恰当显示 某单元格时，它会被自动加宽。 + <div class="note"><strong>使用提示：</strong>不要使用这个属性，因为它已经在最新标准中过时。使用CSS {{cssxref("width")}}属性代替。</div> + </dd> +</dl> + +<h2 id="示例">示例</h2> + +<p>参考 {{HTMLElement("table")}} 中 <code><th></code>的示例内容。</p> + +<h2 id="规范">规范</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">规范</th> + <th scope="col">状态</th> + <th scope="col">备注</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG','tables.html#the-th-element','th element')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C','tabular-data.html#the-th-element','th element')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + + + +<p>{{Compat("html.elements.th")}}</p> + +<h2 id="参阅">参阅</h2> + +<ul> + <li>Other table-related HTML Elements: {{HTMLElement("caption")}}, {{HTMLElement("col")}}, {{HTMLElement("colgroup")}}, {{HTMLElement("table")}}, {{HTMLElement("tbody")}}, {{HTMLElement("td")}}, {{HTMLElement("tfoot")}}, {{HTMLElement("thead")}}, {{HTMLElement("tr")}}.</li> +</ul> + +<p>{{HTMLRef}}</p> diff --git a/files/zh-cn/web/html/element/thead/index.html b/files/zh-cn/web/html/element/thead/index.html new file mode 100644 index 0000000000..1e9e104503 --- /dev/null +++ b/files/zh-cn/web/html/element/thead/index.html @@ -0,0 +1,209 @@ +--- +title: <thead> +slug: Web/HTML/Element/thead +tags: + - 元素 + - 表格 +translation_of: Web/HTML/Element/thead +--- +<p><strong>HTML</strong>的<strong><thead></strong>元素定义了一组定义表格的列头的行。</p> + + + +<p>{{EmbedInteractiveExample("pages/tabbed/thead.html","tabbed-taller")}}</p> + + + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/en-US/docs/HTML/Content_categories">内容类别</a></th> + <td>无.</td> + </tr> + <tr> + <th scope="row">允许内容</th> + <td>零或多个{{ HTMLElement("tr") }}元素.</td> + </tr> + <tr> + <th scope="row">标签省略</th> + <td>开头的标签是强制的. 如果{{ HTMLElement("thead") }} 元素后直接跟 {{ HTMLElement("tbody") }}或{{ HTMLElement("tfoot") }}元素，结尾的标签可以被省略。</td> + </tr> + <tr> + <th scope="row">Permitted parents</th> + <td>A {{ HTMLElement("table") }} element. The {{ HTMLElement("thead") }} must appear after any {{ HTMLElement("caption") }} or {{ HTMLElement("colgroup") }} element, even implicitly defined, but before any {{ HTMLElement("tbody") }}, {{ HTMLElement("tfoot") }} and {{ HTMLElement("tr") }} element.</td> + </tr> + <tr> + <th scope="row">Permitted ARIA roles</th> + <td>Any</td> + </tr> + <tr> + <th scope="row">DOM interface</th> + <td>{{domxref("HTMLTableSectionElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="属性">属性</h2> + +<p>This element includes the <a href="/en-US/docs/Web/HTML/Global_attributes">global attributes</a>.</p> + +<dl> + <dt>{{ htmlattrdef("align") }} {{ Deprecated_inline() }} in {{ HTMLVersionInline("4") }}, {{ obsolete_inline() }} in {{ HTMLVersionInline("5") }}</dt> + <dd>This enumerated attribute specifies how horizontal alignment of each cell content will be handled. Possible values are: + <ul> + <li><code>left</code>, aligning the content to the left of the cell</li> + <li><code>center</code>, centering the content in the cell</li> + <li><code>right</code>, aligning the content to the right of the cell</li> + <li><code>justify</code>, inserting spaces into the textual content so that the content is justified in the cell</li> + <li><code>char</code>, aligning the textual content on a special character with a minimal offset, defined by the {{ htmlattrxref("char", "thead") }} and {{ htmlattrxref("charoff", "thead") }} attributes {{ unimplemented_inline("2212") }}.</li> + </ul> + + <p>If this attribute is not set, the <code>left</code> value is assumed.</p> + + <div class="note"><strong>Note: </strong>Do not use this attribute as it is obsolete (not supported) in the latest standard. + + <ul> + <li>To achieve the same effect as the <code>left</code>, <code>center</code>, <code>right</code> or <code>justify</code> values, use the CSS {{ cssxref("text-align") }} property on it.</li> + <li>To achieve the same effect as the <code>char</code> value, in CSS3, you can use the value of the {{ htmlattrxref("char", "thead") }} as the value of the {{ cssxref("text-align") }} property {{ unimplemented_inline() }}.</li> + </ul> + </div> + </dd> +</dl> + +<dl> + <dt>{{ htmlattrdef("bgcolor") }} {{ Non-standard_inline() }}</dt> + <dd>This attribute defines the background color of each cell of the column. It is one of the 6-digit hexadecimal code as defined in <a class="external" href="https://www.w3.org/Graphics/Color/sRGB">sRGB</a>, prefixed by a '#'. One of the sixteen predefined color strings may be used: + <table style="width: 80%;"> + <tbody> + <tr> + <td style="background-color: black; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"></td> + <td><code>black</code> = "#000000"</td> + <td style="background-color: green; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"></td> + <td><code>green</code> = "#008000"</td> + </tr> + <tr> + <td style="background-color: silver; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"></td> + <td><code>silver</code> = "#C0C0C0"</td> + <td style="background-color: lime; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"></td> + <td><code>lime</code> = "#00FF00"</td> + </tr> + <tr> + <td style="background-color: gray; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"></td> + <td><code>gray</code> = "#808080"</td> + <td style="background-color: olive; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"></td> + <td><code>olive</code> = "#808000"</td> + </tr> + <tr> + <td style="background-color: white; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"></td> + <td><code>white</code> = "#FFFFFF"</td> + <td style="background-color: yellow; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"></td> + <td><code>yellow</code> = "#FFFF00"</td> + </tr> + <tr> + <td style="background-color: maroon; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"></td> + <td><code>maroon</code> = "#800000"</td> + <td style="background-color: navy; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"></td> + <td><code>navy</code> = "#000080"</td> + </tr> + <tr> + <td style="background-color: red; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"></td> + <td><code>red</code> = "#FF0000"</td> + <td style="background-color: blue; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"></td> + <td><code>blue</code> = "#0000FF"</td> + </tr> + <tr> + <td style="background-color: purple; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"></td> + <td><code>purple</code> = "#800080"</td> + <td style="background-color: teal; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"></td> + <td><code>teal</code> = "#008080"</td> + </tr> + <tr> + <td style="background-color: fuchsia; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"></td> + <td><code>fuchsia</code> = "#FF00FF"</td> + <td style="background-color: aqua; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"></td> + <td><code>aqua</code> = "#00FFFF"</td> + </tr> + </tbody> + </table> + + <div class="note"><strong>Usage note: </strong>Do not use this attribute, as it is non-standard and only implemented in some versions of Microsoft Internet Explorer: the {{ HTMLElement("thead") }} element should be styled using <a href="/en-US/docs/CSS">CSS</a>. To give a similar effect to the <strong>bgcolor</strong> attribute, use the <a href="/en-US/docs/CSS">CSS</a> property {{ cssxref("background-color") }}, on the relevant {{ HTMLElement("td") }} or {{ HTMLElement("th") }} elements.</div> + </dd> +</dl> + +<dl> + <dt>{{ htmlattrdef("char") }} {{ Deprecated_inline() }} in {{ HTMLVersionInline("4") }}, {{ obsolete_inline() }} in {{ HTMLVersionInline("5") }}</dt> + <dd>This attribute is used to set the character to align the cells in a column on. Typical values for this include a period (.) when attempting to align numbers or monetary values. If {{ htmlattrxref("align", "tr") }} is not set to <code>char</code>, this attribute is ignored. + <div class="note"><strong>Note: </strong>Do not use this attribute as it is obsolete (and not supported) in the latest standard. To achieve the same effect as the {{ htmlattrxref("char", "thead") }}, in CSS3, you can use the character set using the {{ htmlattrxref("char", "thead") }} attribute as the value of the {{ cssxref("text-align") }} property {{ unimplemented_inline() }}.</div> + </dd> +</dl> + +<dl> + <dt>{{ htmlattrdef("charoff") }} {{ Deprecated_inline() }} in {{ HTMLVersionInline("4") }}, {{ obsolete_inline() }} in {{ HTMLVersionInline("5") }}</dt> + <dd>This attribute is used to indicate the number of characters to offset the column data from the alignment characters specified by the <strong>char</strong> attribute. + <div class="note"><strong>Note: </strong>Do not use this attribute as it is obsolete (and not supported) in the latest standard.</div> + </dd> +</dl> + +<dl> + <dt>{{ htmlattrdef("valign") }} {{ Deprecated_inline() }} in {{ HTMLVersionInline("4") }}, {{ obsolete_inline() }} in {{ HTMLVersionInline("5") }}</dt> + <dd>This attribute specifies the vertical alignment of the text within each row of cells of the table header. Possible values for this attribute are: + <ul> + <li><code>baseline</code>, which will put the text as close to the bottom of the cell as it is possible, but align it on the <a class="external" href="https://en.wikipedia.org/wiki/Baseline_%28typography%29">baseline</a> of the characters instead of the bottom of them. If characters are all of the size, this has the same effect as <code>bottom</code>.</li> + <li><code>bottom</code>, which will put the text as close to the bottom of the cell as it is possible;</li> + <li><code>middle</code>, which will center the text in the cell;</li> + <li><code>top</code>, which will put the text as close to the top of the cell as it is possible.</li> + </ul> + + <div class="note"><strong>Note: </strong>Do not use this attribute as it is obsolete (and not supported) in the latest standard: instead set the CSS {{ cssxref("vertical-align") }} property on it.</div> + </dd> +</dl> + +<h2 id="示例">示例</h2> + +<p>See {{ HTMLElement("table") }} for examples on<code> <thead></code>.</p> + +<h2 id="规范">规范</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG','tables.html#the-thead-element','thead element')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C','tabular-data.html#the-thead-element','thead element')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<div> + + +<p>{{Compat("html.elements.thead")}}</p> +</div> + + + +<h2 id="参见">参见</h2> + +<ul> + <li>Other table-related HTML Elements: {{ HTMLElement("caption") }}, {{ HTMLElement("col") }}, {{ HTMLElement("colgroup") }}, {{ HTMLElement("table") }}, {{ HTMLElement("tbody") }}, {{ HTMLElement("td") }}, {{ HTMLElement("tfoot") }}, {{ HTMLElement("th") }}, {{ HTMLElement("tr") }};</li> + <li>CSS properties and pseudo-classes that may be specially useful to style the <code><thead></code> element: + <ul> + <li>the {{ cssxref(":nth-child") }} pseudo-class to set the alignment on the cells of the column;</li> + <li>the {{ cssxref("text-align") }} property to align all cells content on the same character, like '.'.<</li> + </ul> + </li> +</ul> + +<p>{{HTMLRef}}</p> diff --git a/files/zh-cn/web/html/element/time/index.html b/files/zh-cn/web/html/element/time/index.html new file mode 100644 index 0000000000..7c96c6d567 --- /dev/null +++ b/files/zh-cn/web/html/element/time/index.html @@ -0,0 +1,137 @@ +--- +title: <time> +slug: Web/HTML/Element/time +translation_of: Web/HTML/Element/time +--- +<h2 id="概述">概述</h2> + +<p> HTML <em>time</em> 标签(<code><time></code>) 用来表示24小时制时间或者<a class="external" href="http://en.wikipedia.org/wiki/Gregorian_calendar" title="http://en.wikipedia.org/wiki/Gregorian_calendar">公历日期</a>，若表示日期则也可包含时间和时区。</p> + +<p>此元素意在以机器可读的格式表示日期和时间。 有安排日程表功能的应用可以利用这一点。</p> + +<div class="note"><strong>用法提示： </strong>如果给定的日期不是正常日期或者在公历中最早的日期之前，请不要使用此元素。</div> + +<div class="note"><strong>状态提示</strong>： <span class="long_text short_text" id="result_box" lang="zh-CN"><span>该元素</span><span>仍在</span><span>设计</span><span>和</span><span>讨论中</span></span>(<a class="external" href="http://blog.whatwg.org/weekly-time-data" title="http://blog.whatwg.org/weekly-time-data">http://blog.whatwg.org/weekly-time-data</a>)</div> + +<h3 id="使用场景"><span class="long_text short_text" id="result_box" lang="zh-CN"><span>使用场景</span></span></h3> + +<table class="standard-table"> + <tbody> + <tr> + <td><a href="/zh-cn/HTML/Content_categories" title="zh-cn/HTML/Content categories">内容分类</a></td> + <td><a href="/zh-cn/HTML/Content_categories#flow_content" title="zh-cn/HTML/Content categories#flow content">flow content</a>, <a href="/zh-cn/HTML/Content_categories#phrasing_content" title="zh-cn/HTML/Content categories#phrasing content">phrasing content</a></td> + </tr> + <tr> + <td>可包含内容</td> + <td><a href="/zh-cn/HTML/Content_categories#Phrasing_content" title="zh-cn/HTML/Content categories#Phrasing content">Phrasing content</a>， 但不能包含子 <code>time</code> 元素。</td> + </tr> + <tr> + <td>标签可省略？</td> + <td>起止标签均不能省略。</td> + </tr> + <tr> + <td>允许的父元素</td> + <td>任何接受 phrasing content 的元素。</td> + </tr> + <tr> + <td>标准文档</td> + <td><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/text-level-semantics.html#the-time-element" rel="external nofollow" title="http://www.whatwg.org/specs/web-apps/current-work/multipage/text-level-semantics.html#the-time-element">HTML5, section 4.6.10</a></td> + </tr> + </tbody> +</table> + +<h3 id="属性">属性</h3> + +<p>像所有其他元素一样，此元素拥有可以使用 <a href="/zh-cn/HTML/Global_attributes" title="zh-cn/HTML/Global attributes">通用属性</a>。</p> + +<dl> + <dt>{{ htmlattrdef("datetime") }}</dt> + <dd>该属性表示此元素的时间和日期，并且属性值必须是一个<a class="external" href="http://www.w3.org/TR/html5/common-microsyntaxes.html#valid-date-string-with-optional-time" title="http://www.w3.org/TR/html5/common-microsyntaxes.html#valid-date-string-with-optional-time">有效的日期格式，并可包含时间</a>。 如果此值不能被解析为日期，元素不会有一个关联的时间戳.</dd> + <dt>{{ htmlattrdef("pubdate") }}</dt> + <dd>(该属性仍在被WHATWG 和 W3C组织设计和讨论中.) This Boolean attribute specifies that the date and time given by the element is the publication date of a document. The document it applies to is either the nearest ancestor article element or the document as a whole (if there is no ancestor <a href="/zh-cn/HTML/Element/article" title="zh-cn/HTML/Element/Article">article</a> element). If true, the <code>time</code> element must have a corresponding date. Additionally, each <code>time</code> element indicating a publication date must be the only <code>time</code> element that does so for that document.</dd> +</dl> + +<h3 id="DOM_接口">DOM 接口</h3> + +<p>该元素实现了 <code><a href="/zh-cn/DOM/HTMLTimeElement" title="zh-cn/DOM/HTMLTimeElement">HTMLTimeElement</a></code> 接口。</p> + +<h3 id="例子">例子</h3> + +<pre class="brush: html"><p>The concert starts at <time>20:00</time>.</p> +</pre> + +<p>上面的HTML会显示:</p> + +<p>The concert starts at 20:00.</p> + +<h4 id="Pubdate_example" name="Pubdate_example"><code>pubdate</code> 示例</h4> + +<pre class="brush: html"><article> + <p>This article was created on <time pubdate>2011-01-28</time>.</p> +</article> +</pre> + +<p>上面的HTML会显示：</p> + +<p>This article was created on 2011-01-28.</p> + +<h4 id="Datetime_example" name="Datetime_example"><code>datetime</code> 示例</h4> + +<pre class="brush: html"><p>The concert took place on <time datetime="2001-05-15 19:00">May 15</time>.</p> +</pre> + +<p>上面的HTML会显示：</p> + +<p>The concert took place on May 15.</p> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatNo() }} {{ bug("629801") }}</td> + <td>{{ CompatUnknown() }}</td> + <td>11.50</td> + <td>{{ CompatUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<p>{{ languages( { "en": "en/HTML/HTML_Elements/time"} ) }}</p> diff --git a/files/zh-cn/web/html/element/title/index.html b/files/zh-cn/web/html/element/title/index.html new file mode 100644 index 0000000000..9dec974672 --- /dev/null +++ b/files/zh-cn/web/html/element/title/index.html @@ -0,0 +1,137 @@ +--- +title: <title> +slug: Web/HTML/Element/title +tags: + - HTML + - HTML 文档元数据 + - Web + - 元素 + - 参考 + - 窗口名称 + - 窗口标题 + - 页面名称 + - 页面标题 +translation_of: Web/HTML/Element/title +--- +<p id="Summary">{{HTMLRef}}</p> + +<p><strong>HTML <code><title></code> 元素 </strong>定义文档的标题，显示在{{glossary("Browser", "浏览器")}}的标题栏或标签页上。它只应该包含文本，若是包含有标签，则它包含的任何标签都将被忽略。</p> + +<pre><title>第十五届秋季运动会</title></pre> + +<table class="properties"> + <tbody> + <tr> + <th><a href="/en-US/docs/Web/HTML/Content_categories">内容分类</a></th> + <td><a href="/en-US/docs/Web/HTML/Content_categories#Metadata_content">元数据内容。</a></td> + </tr> + <tr> + <th>允许内容</th> + <td>非空字符或特殊字符（{{glossary("whitespace")}}）的文本</td> + </tr> + <tr> + <th>标签遗漏</th> + <td>同时需要开标签和闭标签。注意：遗漏<code> </title></code> 标签会导致浏览器忽略掉页面的剩余部分。</td> + </tr> + <tr> + <th>允许的父标签</th> + <td>一个 {{ HTMLElement("head") }} 元素只能包含一个 {{ HTMLElement("title") }} 元素</td> + </tr> + <tr> + <th>允许的无障碍角色</th> + <td>无</td> + </tr> + <tr> + <th>DOM 接口</th> + <td>{{domxref("HTMLTitleElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="属性">属性</h2> + +<p><span style="line-height: 21px;">这个元素只拥有</span><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes" style="line-height: 21px;" title="HTML/Global attributes">全局属性。</a></p> + +<h2 id="使用说明">使用说明</h2> + +<p><title>元素始终在页面的 {{HTMLElement("head")}} 块内使用。</p> + +<h3 id="页面标题和SEO">页面标题和SEO</h3> + +<p>页面标题的内容可能对搜索引擎优化（{{glossary("SEO")}}）具有重要意义。 通常，较长的描述性标题要比简短或一般性标题更好。 标题的内容是搜索引擎算法用来确定在搜索结果中列出页面顺序的组件之一。 同样，标题是初始的“挂钩”，您可以通过它吸引浏览浏览结果页面的读者的注意力。</p> + +<p>撰写好标题的一些准则和技巧：</p> + +<ul> + <li>避免使用一两个单词的标题。 对于词汇表或参考样式的页面，请使用描述性短语或术语-定义对。</li> + <li>搜索引擎通常显示页面标题的前55至60个字符。 超出此范围的文本可能会丢失，因此请尽量不要使标题更长。 如果您必须使用较长的标题，请确保重要的部分出现在前面，并且标题中可能要删除的部分中没有关键内容。</li> + <li>不要使用“关键字Blob”。 如果标题只是单词列表，则算法通常会降低页面在搜索结果中的位置。</li> + <li>尝试确保您的标题在您自己的网站中尽可能唯一。 标题重复（或几乎重复）可能会导致搜索结果不准确。</li> +</ul> + +<h2 id="示例">示例</h2> + +<pre class="brush: html"><title>Amazing！</title> +</pre> + +<p>本示例建立一个页面，其标题（如显示在窗口顶部或在窗口的选项卡中）为“Amazing！”。</p> + +<h2 id="无障碍问题">无障碍问题</h2> + +<p>提供描述页面用途的标题值很重要。</p> + +<p>辅助技术用户的常用导航技术是读取页面标题并推断页面包含的内容。 这是因为导航到页面以确定其内容可能是一个耗时且可能引起混乱的过程。</p> + +<h3 id="示例_2">示例</h3> + +<pre><title>Menu - Blue House Chinese Food - FoodYum: Online takeout today!</title></pre> + +<p>为了帮助用户，更新页面标题值以反映重大的页面状态更改（例如表单验证问题）。</p> + +<h3 id="示例_3">示例</h3> + +<pre><title>2 errors - Your order - Blue House Chinese Food - FoodYum: Online takeout today!</title></pre> + +<ul> + <li><a href="/en-US/docs/Web/Accessibility/Understanding_WCAG/Operable#Guideline_2.4_%E2%80%94_Navigable_Provide_ways_to_help_users_navigate_find_content_and_determine_where_they_are">MDN Understanding WCAG, Guideline 2.4 explanations</a></li> + <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms-title.html">Understanding Success Criterion 2.4.2 | W3C Understanding WCAG 2.0</a></li> +</ul> + +<h2 id="Specifications" name="Specifications">规范</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">规范</th> + <th scope="col">状态</th> + <th scope="col">备注</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'semantics.html#the-title-element', '<title>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'document-metadata.html#the-title-element', '<title>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/global.html#h-7.4.2', '<title>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">浏览器兼容性</h2> + +<div class="hidden"> +<p>The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> +</div> + +<p>{{Compat("html.elements.title")}}</p> + +<div id="compat-mobile"></div> diff --git a/files/zh-cn/web/html/element/tr/index.html b/files/zh-cn/web/html/element/tr/index.html new file mode 100644 index 0000000000..a7b41a75d4 --- /dev/null +++ b/files/zh-cn/web/html/element/tr/index.html @@ -0,0 +1,249 @@ +--- +title: <tr> +slug: Web/HTML/Element/tr +translation_of: Web/HTML/Element/tr +--- +<p><strong>HTML <code><tr></code> 元素</strong>定义表格中的行。 Those can be a mix of {{HTMLElement("td")}} and {{HTMLElement("th")}} elements.</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/en-US/docs/HTML/Content_categories">Content categories</a></th> + <td>None</td> + </tr> + <tr> + <th scope="row">Permitted content</th> + <td>Zero or more {{HTMLElement("td")}} or {{HTMLElement("th")}} elements, or a mix of them</td> + </tr> + <tr> + <th scope="row">Tag omission</th> + <td>Start tag is mandatory. End tag may be omitted if the {{HTMLElement("tr")}} element is immediately followed by a {{HTMLElement("tr")}} element, or if the parent table group ({{HTMLElement("thead")}}, {{HTMLElement("tbody")}} or {{HTMLElement("tfoot")}}) element doesn't have any more content</td> + </tr> + <tr> + <th scope="row">Permitted parents</th> + <td>{{HTMLElement("table")}}, {{HTMLElement("thead")}}, {{HTMLElement("tbody")}} or {{HTMLElement("tfoot")}} element</td> + </tr> + <tr> + <th scope="row">Permitted ARIA roles</th> + <td>Any</td> + </tr> + <tr> + <th scope="row">DOM interface</th> + <td>{{domxref("HTMLTableRowElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Attributes">Attributes</h2> + +<p>表格标签支持 <a href="https://developer.mozilla.org/en-US/docs/HTML/Global_attributes" title="HTML/Global attributes">全局特性</a>。还有一些过期的特性，你应该避免使用它们，但是可以了解它们，会在你阅读旧代码的时候有所帮助。</p> + +<dl> + <dt>{{htmlattrdef("align")}} {{deprecatedGeneric("inline","html4.01")}}, {{obsoleteGeneric("inline","html5")}}</dt> + <dd>This enumerated attribute specifies how horizontal alignment of each cell content will be handled. Possible values are: + <ul> + <li><code>left</code>, aligning the content to the left of the cells</li> + <li><code>center</code>, centering the content in the cells</li> + <li><code>right</code>, aligning the content to the right of the cells</li> + <li><code>justify</code>, widening the spaces in the textual content so that the content is justified in the cells</li> + <li><code>char</code>, aligning the textual content on a special character with a minimal offset, defined by the {{htmlattrxref("char", "tr")}} and {{htmlattrxref("charoff", "tr")}} attributes {{unimplemented_inline("2212")}}</li> + </ul> + + <p>If this attribute is not set, the parent node's value is inherited.</p> + + <div class="note"><strong>Note: </strong>Do not use this attribute as it is obsolete (not supported) in the latest standard. + + <ul> + <li>To achieve the same effect as the <code>left</code>, <code>center</code>, <code>right</code> or <code>justify</code> values, use the CSS {{cssxref("text-align")}} property on it.</li> + <li>To achieve the same effect as the <code>char</code> value, in CSS3, you can use the value of the {{htmlattrxref("char", "tr")}} as the value of the {{cssxref("text-align")}} property {{unimplemented_inline}}.</li> + </ul> + </div> + </dd> +</dl> + +<dl> + <dt>{{htmlattrdef("bgcolor")}} {{deprecatedGeneric("inline","html4.01")}}, {{obsoleteGeneric("inline","html5")}}</dt> + <dd>This attribute defines the background color of each cell of the row. It can be either an <a href="/en-US/docs/Web/CSS/color_value#rgb()">hexadecimal <code>#RRGGBB</code> or <code>#RGB</code> value</a> or a <a href="/en-US/docs/Web/CSS/color_value#Color_keywords">color keyword</a>. + <div class="note"><strong>Usage note: </strong>the {{HTMLElement("tr")}} element should be styled using <a href="/en-US/docs/CSS">CSS</a>. To give a similar effect to the <strong>bgcolor</strong> attribute, use the <a href="/en-US/docs/CSS">CSS</a> property {{cssxref("background-color")}}.</div> + </dd> +</dl> + +<dl> + <dt>{{htmlattrdef("char")}} {{deprecatedGeneric("inline","html4.01")}}, {{obsoleteGeneric("inline","html5")}}</dt> + <dd>This attribute is used to set the character to align the cells in a column on. Typical values for this include a period (.) when attempting to align numbers or monetary values. If {{htmlattrxref("align", "tr")}} is not set to <code>char</code>, this attribute is ignored. + <div class="note"><strong>Note: </strong>Do not use this attribute as it is obsolete (and not supported) in the latest standard. To achieve the same effect as the {{htmlattrxref("char", "tr")}}, in CSS3, you can use the character set using the {{htmlattrxref("char", "tr")}} attribute as the value of the {{cssxref("text-align")}} property {{unimplemented_inline}}.</div> + </dd> +</dl> + +<dl> + <dt>{{htmlattrdef("charoff")}} {{deprecatedGeneric("inline","html4.01")}}, {{obsoleteGeneric("inline","html5")}}</dt> + <dd>This attribute is used to indicate the number of characters to offset the column data from the alignment characters specified by the <strong>char</strong> attribute. + <div class="note"><strong>Note: </strong>Do not use this attribute as it is obsolete (and not supported) in the latest standard.</div> + </dd> +</dl> + +<dl> + <dt>{{htmlattrdef("valign")}} {{deprecatedGeneric("inline","html4.01")}}, {{obsoleteGeneric("inline","html5")}}</dt> + <dd>This attribute specifies the vertical alignment of the text within each row of cells of the table header. Possible values for this attribute are: + <ul> + <li><code>baseline</code>, which will put the text as close to the bottom of the cell as it is possible, but align it on the <a class="external" href="https://en.wikipedia.org/wiki/Baseline_%28typography%29">baseline</a> of the characters instead of the bottom of them. If characters are all of the size, this has the same effect as <code>bottom</code>.</li> + <li><code>bottom</code>, which will put the text as close to the bottom of the cell as it is possible;</li> + <li><code>middle</code>, which will center the text in the cell;</li> + <li>and <code>top</code>, which will put the text as close to the top of the cell as it is possible.</li> + </ul> + + <div class="note"><strong>Note: </strong>Do not use this attribute as it is obsolete (and not supported) in the latest standard: instead set the CSS {{cssxref("vertical-align")}} property on it.</div> + </dd> +</dl> + +<h2 id="Examples">Examples</h2> + +<p>See {{HTMLElement("table")}} for examples on <code><tr></code>.</p> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG','tables.html#the-tr-element','tr element')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C','tabular-data.html#the-tr-element','tr element')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>1.0</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("1.0")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>align/valign</code> attribute</td> + <td>1.0</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatNo}} [1]</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>char/charoff</code> attribute</td> + <td>1.0</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatNo}} [2]</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>bgcolor</code> attribute {{Non-standard_inline}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Edge</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("1.0")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>align/valign</code> attribute</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatNo}} [1]</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>char/charoff</code> attribute</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatNo}} [2]</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>bgcolor</code> attribute {{Non-standard_inline}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] See {{bug(915)}}.</p> + +<p>[2] See {{bug(2212)}}.</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li>Other table-related HTML Elements: {{HTMLElement("caption")}}, {{HTMLElement("col")}}, {{HTMLElement("colgroup")}}, {{HTMLElement("table")}}, {{HTMLElement("tbody")}}, {{HTMLElement("td")}}, {{HTMLElement("tfoot")}}, {{HTMLElement("th")}}, {{HTMLElement("thead")}};</li> + <li>CSS properties and pseudo-classes that may be specially useful to style the <code><tr></code> element: + <ul> + <li>the {{cssxref(":nth-child")}} pseudo-class to set the alignment on the cells of the column;</li> + <li>the {{cssxref("text-align")}} property to align all cells content on the same character, like '.'.<</li> + </ul> + </li> +</ul> + +<p>{{HTMLRef}}</p> diff --git a/files/zh-cn/web/html/element/track/index.html b/files/zh-cn/web/html/element/track/index.html new file mode 100644 index 0000000000..e93803188c --- /dev/null +++ b/files/zh-cn/web/html/element/track/index.html @@ -0,0 +1,160 @@ +--- +title: <track> +slug: Web/HTML/Element/track +translation_of: Web/HTML/Element/track +--- +<p><strong>HTML <code><track></code> 元素</strong> 被当作媒体元素—{{HTMLElement("audio")}} 和 {{HTMLElement("video")}}的子元素来使用。它允许指定时序文本字幕（或者基于时间的数据），例如自动处理字幕。字幕格式有 <a href="https://developer.mozilla.org/en-US/docs/Web/API/Web_Video_Text_Tracks_Format">WebVTT 格式</a>（<code>.vtt</code>格式文件）— Web 视频文本字幕格式，以及指<a href="https://w3c.github.io/ttml2/index.html">时序文本标记语言（TTML）</a>格式。</p> + +<p><code>track</code> 给媒体元素添加的数据的类型在 <code>kind</code> 属性中设置，属性值可以是 <code>subtitles</code>, <code>captions</code>, <code>descriptions</code>, <code>chapters</code> 或 <code>metadata</code>。该元素指向当用户请求额外的数据时浏览器公开的包含定时文本的源文件。</p> + +<p>一个<code>media</code> 元素的任意两个 <code>track</code> 子元素不能有相同的 <code>kind</code>, <code>srclang</code>, 和 <code>label</code>属性。</p> + +<p>{{EmbedInteractiveExample("pages/tabbed/track.html", "tabbed-standard")}}</p> + +<h2 id="使用上下文">使用上下文</h2> + +<table class="standard-table"> + <tbody> + <tr> + <td><strong><a href="https://developer.mozilla.org/zh-cn/docs/Web/HTML/Content_categories" rel="nofollow">内容分类</a></strong></td> + <td>无</td> + </tr> + <tr> + <td><strong>允许的内容</strong></td> + <td><span style="background-color: rgba(212, 221, 228, 0.14902);">无, 它是一个 {{Glossary("空元素")}}。</span></td> + </tr> + <tr> + <td><strong>标签省略</strong></td> + <td>允许省略，因为他是一个空元素，所以开始标签必须存在，结束标记可以省略。</td> + </tr> + <tr> + <td><strong>允许的父元素</strong></td> + <td>媒体元素，<a href="/en-US/docs/HTML/Content_categories#Flow_content" title="HTML/Content_categories#Flow_content">流内容</a>之前。</td> + </tr> + <tr> + <td><strong>允许的ARIA角色</strong></td> + <td>无</td> + </tr> + <tr> + <td><strong>DOM接口</strong></td> + <td>{{domxref("HTMLTrackElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="属性">属性</h2> + +<p><span style="line-height: 21px;">该元素包含 </span><a href="https://developer.mozilla.org/en-US/docs/HTML/Global_attributes" style="line-height: 21px;" title="HTML/Global attributes">全局属性</a><span style="line-height: 21px;">。</span></p> + +<dl> + <dt>{{htmlattrdef("default")}}</dt> + <dd>该属性定义了该track应该启用，除非用户首选项指定了更合适一个track。每个媒体元素里面只有一个 <code>track</code> 元素可以有这个属性。</dd> + <dt>{{htmlattrdef("kind")}}</dt> + <dd>定义了 text track 应该如何使用。如果省略了该属性，默认的 kind 值就是 <code>subtitles</code>。下面是允许的关键字： + <ul> + <li><code>subtitles</code> + <ul> + <li>字幕给观影者看不懂的内容提供了翻译。比如英文电影里非英文的对话框或者文字。</li> + <li>字幕可能包含额外的内容，通常有附加的背景信息。比如在电影星球大战开头的文字，或者某个场景的日期，时间，还有地点。</li> + </ul> + </li> + <li><font face="Consolas, Liberation Mono, Courier, monospace">captions</font> + <ul> + <li>隐藏式字幕提供了音频的转录甚至是翻译。</li> + <li>可能包含重要的非言语的信息，比如音乐提示或者音效。可以指定提示音的源文件 (e.g. music, text, character).</li> + <li>适用于耳聋的用户或者当调成静音的时候。</li> + </ul> + </li> + <li><code>descriptions</code> + <ul> + <li>视频内容的文本描述。</li> + <li>适用于失明用户或者当视频不可见的场景。</li> + </ul> + </li> + <li><code>chapters</code> + <ul> + <li>章节标题用于用户浏览媒体资源的时候。</li> + </ul> + </li> + <li><code>metadata</code> + <ul> + <li>脚本使用的track。 对用户不可见。</li> + </ul> + </li> + </ul> + </dd> + <dt>{{htmlattrdef("label")}}</dt> + <dd>当列出可用的text tracks时，给浏览器使用的text track的标题，这种标题是用户可读的。</dd> + <dt>{{htmlattrdef("src")}}</dt> + <dd>track的地址。必须是合法的URL。该属性必须定义。</dd> + <dt>{{htmlattrdef("srclang")}}</dt> + <dd>track文本数据的语言。它必须是合法的 <a href="http://people.w3.org/rishida/utils/subtags/" title="http://people.w3.org/rishida/utils/subtags/">BCP 47</a> 语言标签。如果 <code>kind</code> 属性被设为 <code>subtitles,</code> 那么<code>srclang</code> 必须定义。</dd> +</dl> + +<h2 id="用法说明">用法说明</h2> + +<h3 id="轨道数据类型">轨道数据类型</h3> + +<p><code>track</code> 给媒体元素添加的数据的类型在 <code>kind</code> 属性中设置，属性值可以是 <code>subtitles</code>, <code>captions</code>, <code>descriptions</code>, <code>chapters</code> 或 <code>metadata</code>。该元素指向当用户请求额外的数据时浏览器公开的包含定时文本的源文件。</p> + +<p>一个<code>media</code> 元素的任意两个 <code>track</code> 子元素不能有相同的 <code>kind</code>, <code>srclang</code>, 和 <code>label</code>属性。</p> + +<h2 id="示例">示例</h2> + +<pre><code><video controls poster="/images/sample.gif"> + <source src="sample.mp4" type="video/mp4"> + <source src="sample.ogv" type="video/ogv"> + <track kind="captions" src="sampleCaptions.vtt" srclang="en"> + <track kind="descriptions" + src="sampleDescriptions.vtt" srclang="en"> + <track kind="chapters" src="sampleChapters.vtt" srclang="en"> + <track kind="subtitles" src="sampleSubtitles_de.vtt" srclang="de"> + <track kind="subtitles" src="sampleSubtitles_en.vtt" srclang="en"> + <track kind="subtitles" src="sampleSubtitles_ja.vtt" srclang="ja"> + <track kind="subtitles" src="sampleSubtitles_oz.vtt" srclang="oz"> + <track kind="metadata" src="keyStage1.vtt" srclang="en" + label="Key Stage 1"> + <track kind="metadata" src="keyStage2.vtt" srclang="en" + label="Key Stage 2"> + <track kind="metadata" src="keyStage3.vtt" srclang="en" + label="Key Stage 3"> + <!-- Fallback --> + ... +</video></code> +</pre> + +<h2 id="规范">规范</h2> + +<table> + <thead> + <tr> + <th scope="col">规范</th> + <th scope="col">状态</th> + <th scope="col">注释</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG','embedded-content.html#the-track-element','track element')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName("HTML5 W3C", "embedded-content-0.html#the-track-element", "track element")}}</td> + <td>{{Spec2("HTML5 W3C")}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性"><span style="font-size: 2.143rem; line-height: 1;">浏览器兼容性</span></h2> + +<p>{{Compat("html.elements.track")}}</p> + +<h2 id="参阅">参阅</h2> + +<ul> + <li><a href="/en-US/docs/HTML/WebVTT" title="HTML/WebVTT">WebVTT text track format</a></li> +</ul> + +<p>{{HTMLRef}}</p> diff --git a/files/zh-cn/web/html/element/tt/index.html b/files/zh-cn/web/html/element/tt/index.html new file mode 100644 index 0000000000..4797e986a3 --- /dev/null +++ b/files/zh-cn/web/html/element/tt/index.html @@ -0,0 +1,52 @@ +--- +title: <tt> +slug: Web/HTML/Element/tt +translation_of: Web/HTML/Element/tt +--- +<div>{{ obsolete_header() }}</div> + +<h2 id="概述">概述</h2> + +<p>HTML 电报文本元素 (<code><tt></code>) 产生一个内联元素，使用浏览器内置的 monotype 字体展示。这个元素用于给文本排版，使其等宽展示，就像电报那样。使用 {{ HTMLElement("code") }} 元素来展示等宽文本可能更加普遍。</p> + +<div class="note">这个元素已废弃。使用更加适当的元素，例如带有 <a href="/fr/docs/CSS" title="/fr/docs/CSS">CSS</a> 的 {{ HTMLElement("code") }} 或者 {{ HTMLElement("span") }} 来代替。</div> + +<h2 id="属性">属性</h2> + +<p>这个元素除了<a href="/en-US/docs/Web/HTML/global_attributes" title="HTML/global attributes">全局属性</a>之外，没有其它属性，所有元素都一样。</p> + +<h2 id="DOM_接口">DOM 接口</h2> + +<p>这个元素实现了 {{domxref('HTMLElement')}} 接口。</p> + +<div class="note"> +<p><strong>实现注解： </strong>Gecko 1.9.2（包含）之前， Firefox 为这个元素实现了 {{domxref('HTMLSpanElement')}} 接口。</p> +</div> + +<h2 id="示例">示例</h2> + +<pre class="brush:html"><p>Enter the following at the telnet command prompt: <code>set localecho</code><br /> + +The telnet client should display: <tt>Local Echo is on</tt></p> +</pre> + +<h3 id="结果">结果</h3> + +<p>Enter the following at the telnet command prompt: <code>set localecho</code><br> + The telnet client should display: <code>Local Echo is on</code></p> + +<h2 id="Notes" name="Notes">注</h2> + +<ul> + <li>CSS 规范可以为 <code>tt</code> 选择器定义，来覆盖浏览器的默认字体。用于设置的偏好可能优先于指定的 CSS。</li> + <li>虽然这个元素没有在 HTML 4.01 规范中废弃，为了支持样式表，不建议使用它。</li> +</ul> + +<h2 id="See_also" name="See_also">另见</h2> + +<ul> + <li>{{ HTMLElement("code") }}</li> + <li>HTML 4.01 规范：<a class="external" href="http://www.w3.org/TR/html4/present/graphics.html#h-15.2">字体样式</a></li> +</ul> + +<div>{{ HTMLRef }}</div> diff --git a/files/zh-cn/web/html/element/u/index.html b/files/zh-cn/web/html/element/u/index.html new file mode 100644 index 0000000000..fa4e6a77dc --- /dev/null +++ b/files/zh-cn/web/html/element/u/index.html @@ -0,0 +1,198 @@ +--- +title: <u> +slug: Web/HTML/Element/u +translation_of: Web/HTML/Element/u +--- +<div>{{HTMLRef}}</div> + +<div> +<p><strong>HTML <code><u></code> 元素（表意不清标注元素）</strong>表示一个需要标注为非文本化（non-textual）的内联文本域。默认情况下渲染为一个实线下划线，可以用CSS替换。</p> +</div> + +<div class="warning"> +<p>此元素以前在旧版本的HTML中称为“下划线”元素，但有时仍会以这种方式被滥用。要为文本加下划线，您应该应用包含CSS {{cssxref("text-decoration")}}属性设置为 <code>underline</code> 的样式。</p> +</div> + +<div>{{EmbedInteractiveExample("pages/tabbed/u.html", "tabbed-shorter")}}</div> + + + +<p>有关何时适合使用 <code><u></code> 以及何时不使用 <code><u></code> 的详细信息，请参阅{{anch("Usage notes")}} 部分。</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/en-US/docs/Web/HTML/Content_categories">内容类别</a></th> + <td><a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">流式内容</a>，<a href="/en-US/docs/Web/HTML/Content_categories#Phrasing_content">短语内容</a>，palpable 内容。</td> + </tr> + <tr> + <th scope="row">允许的内容</th> + <td><a href="/en-US/docs/Web/HTML/Content_categories#Phrasing_content">短语内容</a></td> + </tr> + <tr> + <th scope="row">标签省略</th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th scope="row">允许的父元素</th> + <td>任何接受<a href="/en-US/docs/Web/HTML/Content_categories#Phrasing_content">短语内容</a>的元素。</td> + </tr> + <tr> + <th scope="row">允许的 ARIA 角色</th> + <td>任意</td> + </tr> + <tr> + <th scope="row">DOM 接口</th> + <td>{{domxref("HTMLElement")}} Gecko 1.9.2 (Firefox 4) 之前（包含）, Firefox 为这个元素实现了 {{domxref("HTMLSpanElement")}} 接口。</td> + </tr> + </tbody> +</table> + +<h2 id="属性">属性</h2> + +<p>这个元素仅包含<a href="/en-US/docs/HTML/Global_attributes">全局属性</a>。</p> + +<h2 id="使用说明">使用说明</h2> + +<p>就像所有排版元素那样， {{ HTMLElement("u") }} 在 HTML 4 中废弃，但是在 HTML 5 中恢复了一个新的语义，意思是：将文本标记为应用了某种形式的非文本注释。</p> + +<div class="blockIndicator note"> +<p><strong>提示：</strong> 在可能和超链接混淆的地方，避免使用 {{ HTMLElement("u") }}。</p> +</div> + +<h3 id="用例">用例</h3> + +<p><code><u></code>元素的有效用例包括注释拼写错误，应用 {{interwiki("wikipedia", "proper name mark")}} 来表示中文文本中的专有名称以及其他形式的注释。</p> + +<p>您不应该使用<code><u></code>简单地为文字加下划线，或者表示书籍的标题。</p> + +<h3 id="要考虑使用的其他要素">要考虑使用的其他要素</h3> + +<p>在大多数情况下，您应该使用<u>以外的元素，例如：</p> + +<ul> + <li>{{HTMLElement("em")}} 表示强调重点</li> + <li>{{HTMLElement("b")}} 提示注意文字</li> + <li>{{HTMLElement("mark")}} 标记关键词或短语</li> + <li>{{HTMLElement("strong")}} 表明文本具有重要意义</li> + <li>{{HTMLElement("cite")}} 标记书籍或其他出版物的标题</li> + <li>{{HTMLElement("i")}} 表示西方文本中的技术术语，音译，思想或船名</li> +</ul> + +<p>要提供文本注释（与使用<code><u></code>创建的非文本注释相对），请使用 {{HTMLElement("ruby")}} 元素。</p> + +<p>要应用带下划线的外观而没有任何语义含义，请使用 {{cssxref("text-decoration")}} 属性的值 <code>underline</code>。</p> + +<h2 id="示例">示例</h2> + +<h3 id="表示拼写错误">表示拼写错误</h3> + +<p>此示例使用<code><u></code>元素和一些CSS来显示包含拼写错误的段落，其中错误以红色波浪下划线样式表示，这种情况通常用于此目的。</p> + +<h4 id="HTML">HTML</h4> + +<pre class="notranslate"><code><p>This paragraph includes a <u class="spelling">wrnogly</u> +spelled word.</p></code></pre> + +<p>在HTML中，我们看到 <code><u></code> 使用了一个类 <code>spelling</code>，用于表示“wrongly”一词的拼写错误。</p> + +<h4 id="CSS">CSS</h4> + +<pre class="notranslate"><code>u.spelling { + text-decoration: red wavy underline; +}</code></pre> + +<p>这个CSS表示当 <code><u></code> 元素使用类 <code>spelling</code> 进行样式化时，它的文本下面应该有一个红色的波浪下划线。这是拼写错误的常见样式。也可以使用另一种常见样式 <code>red dashed underline</code>.。</p> + +<h4 id="结果">结果</h4> + +<p>任何使用过今天比较流行的文字处理器的人都应该熟悉结果。</p> + +<p>{{EmbedLiveSample("Indicating_a_spelling_error", 650, 80)}}</p> + +<h3 id="避免使用_<u>">避免使用 <u></h3> + +<p>大多数情况下，您实际上不想使用 <code><u></code>。以下是一些示例，显示在几种情况下您应该做什么。</p> + +<h4 id="非语义下划线">非语义下划线</h4> + +<p>要在不暗示任何语义含义的情况下为文本加下划线，请使用 {{HTMLElement("span")}} 元素并将 {{cssxref("text-decoration")}} 属性设置为 <code>"underline"</code>，如下所示。</p> + +<h5 id="HTML_2">HTML</h5> + +<pre class="notranslate"><code><span class="underline">Today's Special</span> +<br> +Chicken Noodle Soup With Carrots</code></pre> + +<h5 id="CSS_2">CSS</h5> + +<pre class="notranslate"><code>.underline { + text-decoration: underline; +}</code></pre> + +<h5 id="结果_2">结果</h5> + +<p>{{EmbedLiveSample("Non-semantic_underlines", 650, 80)}}</p> + +<h4 id="表示书名">表示书名</h4> + +<p>书籍标题应使用 {{HTMLElement("cite")}} 元素而不是 <code><u></code> 甚至 <code><i></code> 来呈现。</p> + +<h5 id="HTML_3">HTML</h5> + +<pre class="notranslate"><code><p>The class read <cite>Moby Dick</cite> in the first term.</p></code></pre> + +<h5 id="默认样式的结果">默认样式的结果</h5> + +<p>{{EmbedLiveSample("example-unstyled-cite", 650, 80)}}</p> + +<p>请注意， <code><cite></code> 元素的默认样式会以斜体显示文本。如果您愿意，可以使用CSS覆盖它：</p> + +<pre class="notranslate"><code>cite { + font-style: normal; + text-decoration: underline; +}</code></pre> + +<h5 id="定制样式的结果">定制样式的结果</h5> + +<p>{{EmbedLiveSample("Presenting_a_book_title", 650, 80)}}</p> + +<h2 id="规范">规范</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">规范</th> + <th scope="col">状态</th> + <th scope="col">注释</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'semantics.html#the-u-element', '<u>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'text-level-semantics.html#the-u-element', '<u>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'present/graphics.html#h-15.2.1', '<b>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<p>{{Compat("html.elements.u")}}</p> + +<h2 id="参见">参见</h2> + +<ul> + <li>{{ HTMLElement("span") }}，{{ HTMLElement("i") }}，{{ HTMLElement("em") }}，和 {{ HTMLElement("cite") }} 元素，取决于情况，可以替代使用。</li> + <li>CSS {{ cssxref("text-decoration") }} 属性可以用于完成 {{ HTMLElement("u") }} 元素的前面的视觉效果。</li> +</ul> diff --git a/files/zh-cn/web/html/element/ul/index.html b/files/zh-cn/web/html/element/ul/index.html new file mode 100644 index 0000000000..935ea5e566 --- /dev/null +++ b/files/zh-cn/web/html/element/ul/index.html @@ -0,0 +1,214 @@ +--- +title: <ul> +slug: Web/HTML/Element/ul +tags: + - HTML + - 元素 + - 列表 +translation_of: Web/HTML/Element/ul +--- +<div>{{HTMLRef}}</div> + +<p><strong>HTML <code><ul></code> 元素</strong>（或称 HTML 无序列表元素）表示一个内可含多个元素的无序列表或项目符号列表。</p> + +<table class="properties"> + <tbody> + <tr> + <td><a href="/en/HTML/Content_categories" title="en/HTML/Content categories">内容</a>分类</td> + <td><a href="/en/HTML/Content_categories#flow_content" title="en/HTML/Content categories#Flow content">流式内容</a>，如果 <code><ul></code> 包含至少一个 <code><li></code> 元素，那么它就是显性内容 <a href="https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Content_categories#Palpable_content">Palpable content</a>。</td> + </tr> + <tr> + <td>允许的内容</td> + <td>零个或更多个 {{HTMLElement("li")}} 元素，可以混合使用 {{HTMLElement("ol")}} 与{{HTMLElement("ul")}} 元素。</td> + </tr> + <tr> + <td>标签省略</td> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <td>允许的父元素</td> + <td> + <p>接受流文本的任何内容</p> + </td> + </tr> + <tr> + <th scope="row">Permitted ARIA roles</th> + <td>{{ARIARole("directory")}}, {{ARIARole("group")}}, {{ARIARole("listbox")}}, {{ARIARole("menu")}}, {{ARIARole("menubar")}}, {{ARIARole("radiogroup")}}, {{ARIARole("tablist")}}, {{ARIARole("toolbar")}}, {{ARIARole("tree")}}, {{ARIARole("presentation")}}</td> + </tr> + <tr> + <td>DOM 接口</td> + <td>{{domxref("HTMLUListElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="属性">属性</h2> + +<dl> +</dl> + +<p>此元素仅含有<a href="/zh-CN/docs/Web/HTML/Global_attributes">全局属性</a>。</p> + +<dl> + <dt>{{ htmlattrdef("compact") }}{{ Deprecated_inline() }}</dt> + <dd>此布尔属性提示列表是否需要被渲染为更紧凑的样式。用户代理决定如何解释这个属性，且并非所有浏览器都支持它。 + <div class="note"><strong>使用说明：</strong>不要使用这个属性，因为它已经被废弃了：{{ HTMLElement("ul") }} 元素应当使用 <a href="/zh-CN/docs/CSS">CSS</a> 来更改样式。（CSS）可以提供与<code> compact</code> 属性相同的效果，将 <a href="/zh-CN/docs/CSS">CSS</a> 属性 <a href="/zh-CN/docs/CSS/line-height">line-height</a> 的值设为 <code>80%</code> 即可。</div> + </dd> +</dl> + +<dl> + <dt>{{ htmlattrdef("type") }}{{ Deprecated_inline() }}</dt> + <dd>用于设置列表的着重号样式 ，被定义在 <a href="/en/HTML3.2" title="en/HTML3.2">HTML3.2</a> 和过渡版本 <a href="/en/HTML4.01" title="en/HTML4.01">HTML 4.0/4.01</a> 中的可用值有<span style="font-family: monospace;">:</span> + <ul> + <li><code>circle</code></li> + <li><code>disc</code></li> + <li><code>square</code></li> + </ul> + + <p>第四种着重号样式被定义在 WebTV 接口中，但并不是所有浏览器都支持: <code>triangle</code></p> + + <p>如果未设置此 HTML 属性且没有 <a href="/en/CSS" title="en/CSS">CSS</a> {{ cssxref("list-style-type") }} 属性作用于这个元素，用户代理会决定使用哪种着重号样式，一般来说这也和嵌套的层级数有关。</p> + + <div class="note"><strong>使用说明:</strong> 不要使用这个属性，它已经被废弃了：使用 <a href="/en/CSS" title="en/CSS">CSS</a> {{ cssxref("list-style-type") }} 属性作为代替。</div> + </dd> +</dl> + +<h2 id="使用说明">使用说明</h2> + +<ul> + <li><code><ul></code> 元素用来将没有数字顺序的一组数据进行分组，并且它们的数字顺序是没有意义的。举个例子，无序列表的列表项通常通过一个字符进行装饰，这些字符的形式可以是点，圆乃至方形．虽然这个字符没有直接在页面上定义，但是可以用与之相关的 CSS 对其进行操作，例如使用 {{cssxref("list-style-type")}} 属性。</li> + <li>在 {{ HTMLElement("ol") }} 和 {{ HTMLElement("ul") }} 元素中，嵌套列表没有深度和嵌套顺序的限制。</li> + <li>{{ HTMLElement("ol") }} 和 {{ HTMLElement("ul") }} 元素二者都代表一组数据，不过它们彼此是有区别的，ol元素中的顺序是有意义的。如果想确定你到底需要使用哪一个列表元素，你可以试着去改变数据的顺序。如果想表达的语义改变了，你就需要使用ol元素，否则你该使用ul元素。</li> +</ul> + +<h2 id="实例">实例</h2> + +<h3 id="简单的例子">简单的例子</h3> + +<pre class="brush: html"><ul> + <li>first item</li> + <li>second item</li> + <li>third item</li> +</ul> +</pre> + +<p>以上HTML输出:</p> + +<ul> + <li>first item</li> + <li>second item</li> + <li>third item</li> +</ul> + +<h3 id="嵌套列表">嵌套列表</h3> + +<pre class="brush: html"><ul> + <li>first item</li> + <li>second item <!-- Look, the closing </li> tag is not placed here! --> + <ul> + <li>second item first subitem</li> + <li>second item second subitem <!-- Same for the second nested unordered list! --> + <ul> + <li>second item second subitem first sub-subitem</li> + <li>second item second subitem second sub-subitem</li> + <li>second item second subitem third sub-subitem</li> + </ul> + </li> <!-- Closing </li> tag for the li that contains the third unordered list --> + <li>second item third subitem</li> + </ul> + </li> <!-- Here is the closing </li> tag --> + <li>third item</li> +</ul></pre> + +<p>以上HTML输出:</p> + +<ul> + <li>first item</li> + <li>second item + <ul> + <li>second item first subitem</li> + <li>second item second subitem + <ul> + <li>second item second subitem first sub-subitem</li> + <li>second item second subitem second sub-subitem</li> + <li>second item second subitem third sub-subitem</li> + </ul> + </li> + <li>second item third subitem</li> + </ul> + </li> + <li>third item</li> +</ul> + +<h3 id="嵌套_<ul>_和_<ol>">嵌套 <ul> 和 <ol></h3> + +<pre class="brush: html"><ul> + <li>first item</li> + <li>second item <!-- Look, the closing </li> tag is not placed here! --> + <ol> + <li>second item first subitem</li> + <li>second item second subitem</li> + <li>second item third subitem</li> + </ol> + </li> <!-- Here is the closing </li> tag --> + <li>third item</li> +</ul> +</pre> + +<p>以上HTML输出:</p> + +<ul> + <li>first item</li> + <li>second item + <ol> + <li>second item first subitem</li> + <li>second item second subitem</li> + <li>second item third subitem</li> + </ol> + </li> + <li>third item</li> +</ul> + +<h2 id="规范">规范</h2> + +<table> + <thead> + <tr> + <th scope="col">规范</th> + <th scope="col">状态</th> + <th scope="col">评论</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'semantics.html#the-ul-element', '<ul>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'grouping-content.html#the-ul-element', '<ul>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<p>{{Compat("html.elements.ul")}}</p> + +<h2 id="参见">参见</h2> + +<ul> + <li>其他列表相关的HTML元素: {{ HTMLElement("ol") }}, {{ HTMLElement("li") }}, {{ HTMLElement("menu") }} 和绝对元素 {{ HTMLElement("dir") }};</li> + <li>特别作用于 <span style="font-family: courier new;"><ul></span>元素的CSS属性: + <ul> + <li> <a href="/en/CSS/list-style" title="en/CSS/list-style">list-style</a> 属性, 作用于选择哪种序数的样式来显示,</li> + <li><a href="/en/CSS_Counters" title="en/CSS_Counters">CSS counters</a>, 作用于操作复杂的嵌套列表,</li> + <li> <a href="/en/CSS/line-height" title="en/CSS/line-height">line-height</a> 属性, 作用于模拟过时的 {{ htmlattrxref("compact", "ul") }} 属性,</li> + <li> <a href="/en/CSS/margin" title="en/CSS/margin">margin</a> 属性, 作用于控制列表的缩进.</li> + </ul> + </li> +</ul> + +<p>{{ languages({ "en":"en/HTML/Element/ul", "de":"de/HTML/Element/ul", "ja":"ja/HTML/Element/ul", "pl":"pl/HTML/Element/ul"}) }}</p> diff --git a/files/zh-cn/web/html/element/var/index.html b/files/zh-cn/web/html/element/var/index.html new file mode 100644 index 0000000000..25c6460a5f --- /dev/null +++ b/files/zh-cn/web/html/element/var/index.html @@ -0,0 +1,128 @@ +--- +title: <var> +slug: Web/HTML/Element/var +tags: + - HTML + - Web +translation_of: Web/HTML/Element/var +--- +<div></div> + +<div></div> + +<div>{{HTMLRef}}</div> + +<div></div> + +<div>HTML Variable元素（<var>）表示数学表达式或编程上下文中的变量名称。尽管该行为取决于浏览器，但通常使用当前字体的斜体形式显示。</div> + +<h2 id="概述">概述</h2> + +<p><strong><var> 标签</strong>表示变量的名称，或者由用户提供的值。</p> + +<table class="standard-table"> + <tbody> + <tr> + <td>允许内容</td> + <td>Phrasing content</td> + </tr> + <tr> + <td>标签闭合</td> + <td>Both start and end tags are required</td> + </tr> + <tr> + <td>允许的父级元素</td> + <td>Any element that accepts <a href="/en-US/docs/HTML/Content_categories#Phrasing_content" title="HTML/Content categories#Phrasing content">phrasing content</a>.</td> + </tr> + <tr> + <td>规范元素</td> + <td><a href="http://www.whatwg.org/html/#the-var-element">HTML, "The <code>var</code> element"</a></td> + </tr> + </tbody> +</table> + +<h2 id="属性">属性</h2> + +<p><span style="line-height: 21px;">本元素仅支持 </span><a href="https://developer.mozilla.org/en-US/docs/HTML/Global_attributes" style="line-height: 21px;" title="HTML/Global attributes">全局属性</a><span style="line-height: 21px;">.</span></p> + +<h2 id="DOM_接口">DOM 接口</h2> + +<p>本元素支持 <code><a href="/en-US/docs/DOM/element" title="DOM/element">HTMLElement</a></code> 接口</p> + +<div class="note"> +<p><strong>提示: </strong>Gecko 1.9.2 开始, Firefox支持本元素使用 <a href="/en-US/docs/DOM/span" title="DOM/span"><span style="font-family: courier new;">HTMLSpanElement</span></a> 接口。</p> +</div> + +<h2 id="默认样式">默认样式</h2> + +<pre class="brush:css">var { + font-style: italic; +} +</pre> + +<h2 id="示例">示例</h2> + +<pre class="brush:html"><p> A simple equation: <var>x</var> = <var>y</var> + 2 </p> +</pre> + +<p>A simple equation: <var>x</var> = <var>y</var> + 2</p> + +<div> +<p>The output:</p> + +<p>{{EmbedLiveSample("Basic_example", 650,80)}}</p> +</div> + +<div> +<h3 id="Overriding_the_default_style">Overriding the default style</h3> + +<p>Using CSS, you can override the default style for the <code><var></code> element. In this example, variable names are rendered using bold Courier if it's available, otherwise it falls back to the default monospace font.</p> + +<h4 id="CSS">CSS</h4> + +<pre>var { + font: bold 15px "Courier", "Courier New", monospace; +}</pre> + +<h4 id="HTML">HTML</h4> + +<pre><p>The variables <var>minSpeed</var> and <var>maxSpeed</var> control + the minimum and maximum speed of the apparatus in revolutions + per minute (RPM).</p></pre> + +<p>This HTML uses <code><var></code> to enclose the names of two variables.</p> + +<h4 id="Result">Result</h4> + +<p>{{EmbedLiveSample("Overriding_the_default_style", 650, 120)}}</p> + +<h2 id="Specifications">Specifications</h2> + +<table> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'text-level-semantics.html#the-var-element', '<var>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'textlevel-semantics.html#the-var-element', '<var>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<p>The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> + +<p>{{Compat("html.elements.var")}}</p> +</div> diff --git a/files/zh-cn/web/html/element/video/index.html b/files/zh-cn/web/html/element/video/index.html new file mode 100644 index 0000000000..83925c0882 --- /dev/null +++ b/files/zh-cn/web/html/element/video/index.html @@ -0,0 +1,290 @@ +--- +title: <video> +slug: Web/HTML/Element/video +tags: + - HTML + - HTML 视频播放器 + - HTML5 + - Web + - 多媒体 + - 媒体 + - 播放视频 + - 视频 +translation_of: Web/HTML/Element/video +--- +<div>{{HTMLRef}}</div> + +<p><span class="seoSummary"><strong>HTML <code><video></code> 元素</strong> 用于在HTML或者XHTML文档中嵌入媒体播放器，用于支持文档内的视频播放。</span>你也可以将 <code><video></code> 标签用于音频内容，但是 {{HTMLElement("audio")}} 元素可能在用户体验上更合适。</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/video.html", "tabbed-standard")}}</div> + +<div>这个交互式例子的源码储存在GitHub仓库上，如果你想要参与到这个交互式例子的项目中来</div> + +<div>并做出自己的一份贡献，请克隆 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a>并发送给我们一个拉取请求</div> + +<p>上面的例子展示了 <code><video></code> 元素的用法。和 {{htmlelement("img")}} 元素的使用类似，在 <code>src</code> 属性里加入一个我们需要展示的视频地址，同时也可以用其他属性来定义视频的宽度高度、是否自动或者循环播放、是否展示浏览器默认的视频控件等信息。</p> + +<p>在 <code><video></video></code> 标签中间的内容，是针对浏览器不支持此元素时候的降级处理。</p> + +<p>浏览器并不是都支持相同的<a href="/zh-CN/docs/Web/HTML/Supported_media_formats">视频格式</a>，所以你可以在 {{htmlelement("source")}} 元素里提供多个视频源，然后浏览器将会使用它所支持的第一个源。</p> + +<pre class="brush: html notranslate"><video controls> + <source src="myVideo.mp4" type="video/mp4"> + <source src="myVideo.webm" type="video/webm"> + <p>Your browser doesn't support HTML5 video. Here is + a <a href="myVideo.mp4">link to the video</a> instead.</p> +</video> +</pre> + +<p>其他的使用注意事项：</p> + +<ul> + <li>如果你没有指定 <code>controls</code> 属性，那么视频不会展示浏览器自带的控件，你也可以用 JavaScript 和 {{domxref("HTMLMediaElement")}} API 来创建你自己的控件。详情请见<a href="https://developer.mozilla.org/en-US/docs/Web/Apps/Fundamentals/Audio_and_video_delivery/cross_browser_video_player">Creating a cross-browser video player</a>。</li> + <li><code>HTMLMediaElement</code> 会激活许多不同的<a href="/zh-CN/docs/Web/Guide/Events/Media_events">事件</a>，以便于让你可以控制视频（和音频）内容。</li> + <li>你可以用CSS 属性 {{cssxref("object-position")}} 来调整视频在元素内部的位置，它可以控制视频尺寸适应于元素外框的方式。</li> + <li>如果想在视频里展示字幕或者标题，你可以在 {{htmlelement("track")}} 元素和 <a href="https://developer.mozilla.org/en-US/docs/Web/API/WebVTT_API">WebVTT</a> 格式的基础上使用 JavaScript 来实现。详情请见 <a href="https://developer.mozilla.org/en-US/docs/Web/Apps/Fundamentals/Audio_and_video_delivery/Adding_captions_and_subtitles_to_HTML5_video">Adding captions and subtitles to HTML5 video</a>。</li> +</ul> + +<p>此外这里还有一份很棒的关于<a href="/zh-CN/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content">“视频和音频内容”</a>的初学者材料，收集了很多的基本知识。</p> + +<h2 id="Usage_context" name="Usage_context">属性</h2> + +<p>就像其他的HTML元素一样，这个元素也同样支持全局属性。</p> + +<p>{{htmlattrdef("autoplay")}}</p> + +<p>如果这个bool数值被指定了autoplay，视频就会开始自动播放，而且无需停止加载任何数据。</p> + +<table class="standard-table"> + <tbody> + <tr> + <td>允许内容</td> + <td><a href="/zh-CN/docs/HTML/Content_categories#Transparent_content" title="HTML/Content categories#Transparent content">流式内容</a>, 包含任一 <strong>src</strong> 属性或是一个或多个 {{HTMLElement("source")}} 元素，其后紧跟<a href="/zh-CN/docs/HTML/Content_categories#Flow_content" title="HTML/Content categories#Flow content">流式内容</a> 或 <a href="/zh-CN/docs/HTML/Content_categories#Phrasing_content" title="HTML/Content categories#Phrasing content">段落内容</a> ， 不包括<code><video></code> 或者 {{HTMLElement("audio")}} 元素。</td> + </tr> + <tr> + <td>标记省略</td> + <td>无，开始标签和结束标签都必须有</td> + </tr> + <tr> + <td>允许的父级元素</td> + <td>任何接受<a href="/zh-CN/docs/HTML/Content_categories#Flow_content" title="HTML/Content categories#Flow content">流式内容</a>，或者<a href="/zh-CN/docs/HTML/Content_categories#Phrasing_content" title="HTML/Content categories#Phrasing content">段落内容</a>的元素。</td> + </tr> + <tr> + <td>规范文档</td> + <td><a class="external" href="http://www.w3.org/TR/html5/embedded-content-0.html#the-video-element" title="http://www.w3.org/TR/html5/video.html#video">HTML5, 4.8.6节</a></td> + </tr> + </tbody> +</table> + +<h2 id="Attributes" name="Attributes">属性</h2> + +<p>类似于所有其它HTML元素，video元素支持 <a href="/zh-CN/docs/HTML/Global_attributes" title="HTML/Global attributes">全局属性</a>。</p> + +<dl> + <dt>{{htmlattrdef("autoplay")}}</dt> + <dd>布尔属性；指定后，视频会马上自动开始播放，不会停下来等着数据载入结束。</dd> + <dt>{{htmlattrdef("autobuffer")}} {{Non-standard_inline}} {{obsolete_inline}}</dt> + <dd>布尔属性；指定后，视频会自动开始缓存，即使没有设置自动播放。该属性适用于视频被认为可能会播放（比如，用户导航到专门播放视频的页面，而不是那种嵌入视频还有其它内容的页面）。视频会一直缓存到媒体缓存满。 + <div class="note"><strong>实现备注： </strong> 虽然是HTML5规范的早期草案的一部分， <code>autobuffer</code> 属性在稍晚的版本被去掉了。 Gecko 2.0 和其它浏览器中已经移除了这个属性，而且有些浏览器中从未实现。规范定义了一个新的枚举属性， <code>preload</code>， 用不同的语法来取代 <code>autobuffer</code> 属性。 {{bug(548523)}}</div> + </dd> + <dt>{{htmlattrdef("buffered")}}</dt> + <dd>这个属性可以读取到哪段时间范围内的媒体被缓存了。该属性包含了一个 {{domxref("TimeRanges")}} 对象。</dd> + <dt>{{htmlattrdef("controls")}}</dt> + <dd>加上这个属性，Gecko 会提供用户控制，允许用户控制视频的播放，包括音量，跨帧，暂停/恢复播放。</dd> + <dt>{{htmlattrdef("controlslist")}} {{experimental_inline}}</dt> + <dd> + <p>当浏览器显示自己的控件集(例如，当指定了Controls属性时)，Controlslist属性将帮助浏览器选择在媒体元素上显示的控件。</p> + + <p>允许接受的value有<code>nodownload</code>,<code>nofullscreen</code>和<code>noremoteplayback</code></p> + + <div class="blockIndicator note"> + <p><span>如果要禁用图片模式(和控件)，请使用<code>disablePictureInPicture</code>属性。</span></p> + </div> + </dd> + <dt>{{htmlattrdef("crossorigin")}}</dt> + <dd>该枚举属性指明抓取相关图片是否必须用到CORS（跨域资源共享）。 <a href="/zh-CN/docs/CORS_Enabled_Image" title="CORS_Enabled_Image">支持CORS的资源</a> 可在 {{HTMLElement("canvas")}} 元素中被重用，而不会被<em>污染</em>。允许的值如下： + <dl> + <dt>anonymous</dt> + <dd>跨域请求（即，使用 <code>Origin:</code> 的HTTP头）会被执行。但是不发送凭证（即，不发送cookie， X.509 证书或者 HTTP Basic 授权）。如果服务器不提供证书给源站点 (不设置 <code>Access-Control-Allow-Origin:</code> HTTP头)，图片会被 <em>污染</em> 并且它的使用会受限。</dd> + <dt>use-credentials</dt> + <dd>跨域请求A cross-origin request (i.e. with <code>Origin:</code> HTTP header) 会被执行，且凭证会被发送 (即， 发送一个 cookie, 一个证书和HTTP Basic授权会被执行)。如果服务器不提供证书给源站点 (通过<code>Access-Control-Allow-Credentials:</code> HTTP 头)，图像会被 <em>污染</em> 且它的使用会受限。</dd> + </dl> + 不加这个属性时，抓取资源不会走CORS请求(即，不会发送 <code>Origin:</code> HTTP 头)，保证其在 {{HTMLElement('canvas')}} 元素中使用时不会被污染。如果指定非法值，会被当作指定了枚举关键字 <strong>anonymous</strong> 一样使用。 查看 <a href="/zh-CN/docs/HTML/CORS_settings_attributes" title="CORS settings attributes">CORS 设置属性</a> 获取更多信息。</dd> + <dt>{{htmlattrdef("currentTime")}}</dt> + <dd> + <p>读取<code>CurentTime</code>返回一个双精度浮点值，指示以秒为单位的媒体的当前播放位置。如果video尚未开始播放，则会在开始播放后返回偏移量。通过<code>CurentTime</code>将当前播放位置设置为给定时间，会在加载媒体时将媒体查找到该位置（从指定的位置开始播放）。</p> + + <p>媒体正在播放的情况下，如果媒体缓冲区的数据已经过期（视频已经播放完），则 {{Glossary("user agent")}}有可能无法正常拿到数据。有些媒体可能有一个不以0秒开始的媒体时间线（不是从头开始播放的），因此应该将<code>currentTime</code>的时间设置在其数据失效之前。{{domxref("HTMLMediaElement.getStartDate", "getStartDate()")}} 这个方法可以用来确定媒体时间线起始的坐标。</p> + </dd> + <dt><code><a href="https://wicg.github.io/picture-in-picture/#disable-pip">disablePictureInPicture</a></code> {{experimental_inline}}</dt> + <dd> + <p>防止浏览器建议图片中的上下文菜单或在某些情况下自动请求图片中的图片。该属性可以禁用 <code>video</code> 元素的画中画特性，右键菜单中的“画中画”选项会被禁用</p> + </dd> + <dt><a href="https://www.w3.org/TR/remote-playback/#the-disableremoteplayback-attribute">{{htmlattrdef("disableRemotePlayback")}} {{experimental_inline}}</a></dt> + <dd>一个布尔属性，用于禁用使用有线连接的设备(HDMI、DVI等)的远程播放功能。无线技术(Miracast、Chromecast、DLNA、AirPlay等)。</dd> + <dd> + <div class="blockIndicator note"> + <p>在Safari中，您可以使用x-webkit-airplay=“deny”作为后盾。</p> + </div> + </dd> + <dt>{{htmlattrdef("duration")}} {{ReadOnlyInline}}</dt> + <dd>一个双精度浮点值，它指示媒体的持续时间(总长度)，以秒为单位，在媒体的时间线上。如果元素上没有媒体，或者媒体无效，则返回的值为NaN。如果媒体没有已知终点(例如时间未知的实时流、网络广播、来自WebRTC的媒体等等)，那么这个值就是Infinity。</dd> + <dt>{{htmlattrdef("height")}}</dt> + <dd>视频展示区域的高度，单位是CSS像素。</dd> + <dt>{{htmlattrdef("intrinsicsize")}} {{experimental_inline}}</dt> + <dd> + <p>这个属性告诉浏览器忽略图像的实际内在大小，并假装它是属性中指定的大小。具体来说，图像将在这些维度上展开，图像上的<code>naturalWidth</code>/<code>naturalHeight</code> 将返回此属性中指定的值。<a href="https://github.com/WICG/intrinsicsize-attribute">Explainer</a>，<a href="https://googlechrome.github.io/samples/intrinsic-size/index.html">examples</a></p> + </dd> + <dt>{{htmlattrdef("loop")}}</dt> + <dd>布尔属性；指定后，会在视频结尾的地方，自动返回视频开始的地方。</dd> + <dt>{{htmlattrdef("muted")}}</dt> + <dd>布尔属性，指明了视频里的音频的默认设置。设置后，音频会初始化为静音。默认值是false,意味着视频播放的时候音频也会播放 。</dd> + <dt>{{htmlattrdef("playsinline")}}</dt> + <dd> + <p>一个布尔属性，标志视频将被“inline”播放，即在元素的播放区域内。请注意，没有此属性并不意味着视频始终是全屏播放的。</p> + </dd> + <dt>{{htmlattrdef("played")}}</dt> + <dd>一个 {{domxref("TimeRanges")}} 对象，指明了视频已经播放的所有范围。</dd> + <dt>{{htmlattrdef("preload")}}</dt> + <dd>该枚举属性旨在告诉浏览器作者认为达到最佳的用户体验的方式是什么。可能是下列值之一： + <ul> + <li><span style="font-family: courier new;">none: </span>提示作者认为用户不需要查看该视频，服务器也想要最小化访问流量；换句话说就是提示浏览器该视频不需要缓存。</li> + <li><span style="font-family: courier new;">metadata</span>: 提示尽管作者认为用户不需要查看该视频，不过抓取元数据（比如：长度）还是很合理的。</li> + <li><span style="font-family: courier new;">auto</span>: 用户需要这个视频优先加载；换句话说就是提示：如果需要的话，可以下载整个视频，即使用户并不一定会用它。</li> + <li><em>空字符串</em>：也就代指 <span style="font-family: courier new;">auto </span>值。</li> + </ul> + + <p>假如不设置，默认值就是浏览器定义的了 （即，不同浏览器会选择自己的默认值），即使规范建议设置为 <span style="font-family: courier new;">metadata</span>。</p> + + <div class="note"><strong>使用备注：</strong> + + <ul> + <li><code>autoplay</code> 属性优先于 <code>preload</code> 假如用户想自动播放视频，那么很明显浏览器需要下载视频。同时设置<code>autoplay</code> 和 <code>preload</code>属性在规范里是允许的。</li> + <li>规范没有强制浏览器去遵循该属性的值；这仅仅只是个提示。</li> + </ul> + </div> + </dd> + <dt>{{htmlattrdef("poster")}}</dt> + <dd>一个海报帧的URL，用于在用户播放或者跳帧之前展示。如果属性未指定，那么在第一帧可用之前什么都不会展示；之后第一帧就像海报帧一样展示。</dd> + <dt>{{htmlattrdef("src")}}</dt> + <dd>要嵌到页面的视频的URL。可选；你也可以使用video块内的 {{HTMLElement("source")}} 元素来指定需要嵌到页面的视频。</dd> + <dt>{{htmlattrdef("width")}}</dt> + <dd>视频显示区域的宽度，单位是CSS像素。</dd> +</dl> + +<p>时间偏移量目前是指定为float类型的值，表示偏移的秒数。</p> + +<div class="note"><strong>备注：</strong> HTML 5 规范中，时间偏移量值的定义还没有完成，有可能会变更。</div> + +<h2 id="事件">事件</h2> + +<p><video>元素可以触发许多不同的<a href="https://developer.mozilla.org/zh-CN/docs/Web/Guide/Events/Media_events">事件</a>。</p> + +<table class="standard-table"> + <tbody> + <tr> + <td>事件名</td> + <td>触发时机</td> + </tr> + <tr> + <td> + <p>{{domxref("ScriptProcessorNode.audioprocess_event","audioprocess")}}{{Deprecated_Inline}}</p> + </td> + <td>The input buffer of a {{DOMxRef("ScriptProcessorNode")}} is ready to be processed.</td> + </tr> + <tr> + <td>{{domxref("HTMLMediaElement.canplay_event", 'canplay')}}</td> + <td> + <p>浏览器可以播放媒体文件了，但估计没有足够的数据来支撑播放到结束，不需要停止缓存更多的内容。</p> + </td> + </tr> + <tr> + <td>{{domxref("HTMLMediaElement.canplaythrough_event", 'canplaythrough')}}</td> + <td>浏览器估算可以播放到结束，不需要停止缓存更多的内容。</td> + </tr> + <tr> + <td>{{domxref("OfflineAudioContext.complete_event", "complete")}}</td> + <td>{{DOMxRef("OfflineAudioContext")}}渲染完成。</td> + </tr> + <tr> + <td>{{domxref("HTMLMediaElement.durationchange_event", 'durationchange')}}</td> + <td> + <p> <code>duration</code> 属性的值改变时触发。</p> + </td> + </tr> + <tr> + <td>{{domxref("HTMLMediaElement.emptied_event", 'emptied')}}</td> + <td>媒体内容为空；例如，当这个media已经加载完成（或者部分加载完成）， <a href="https://wiki.developer.mozilla.org/en-US/docs/XPCOM_Interface_Reference/NsIDOMHTMLMediaElement" rel="internal"><code>load()</code></a> 被用来进行重新加载。</td> + </tr> + <tr> + <td>{{domxref("HTMLMediaElement.ended_event", 'ended')}}</td> + <td>视频停止，因为media已经到达结束点。</td> + </tr> + <tr> + <td>{{domxref("HTMLMediaElement.loadeddata_event", 'loadeddata')}}</td> + <td>media中的首帧已经加载。</td> + </tr> + </tbody> +</table> + +<h2 id="Examples" name="Examples">例子</h2> + +<pre class="brush: html notranslate"><!-- Simple video example --> +<video src="videofile.ogg" autoplay poster="posterimage.jpg"> + 抱歉，您的浏览器不支持内嵌视频，不过不用担心，你可以 <a href="videofile.ogg">下载</a> + 并用你喜欢的播放器观看! +</video> + +<!-- Video with subtitles --> +<video src="foo.ogg"> + <track kind="subtitles" src="foo.en.vtt" srclang="en" label="English"> + <track kind="subtitles" src="foo.sv.vtt" srclang="sv" label="Svenska"> +</video> +</pre> + +<p>第一个例子播放一个视频，视频一收到，允许播放的时候就会立马开始播放，而不会停下来直到下载更多内容。 图片 "posterimage.jpg" 会一直展示在视频区域，直到开始播放。</p> + +<p>第二个例子允许用户选择不同的字幕。</p> + +<h2 id="Server_support" name="Server_support">服务器支持</h2> + +<p>如果视频的MIME类型设置不正确，视频可能不会显示，或者显示包含一个X的灰色盒子（如果启用了JavaScript的话）。</p> + +<p>如果你提供的视频是Ogg Theora格式的，在Apache Web 服务器上， 你可以通过 "/etc/apache" 中的 "mime.types" 文件 或者通过在httpd.conf中的“AddType的”配置指令，把视频文件的扩展名(最常见的是".ogm", ".ogv", or ".ogg")添加到 MIME 类型 "video/ogg"， 来解决这个问题。</p> + +<pre class="notranslate">AddType video/ogg .ogm +AddType video/ogg .ogv +AddType video/ogg .ogg +</pre> + +<p>如果你以 WebM 格式提供视频，在Apache Web 服务器上，你可以通过 "/etc/apache" 中的 "mime.types" 文件 或者通过在httpd.conf中的“AddType的”配置指令，把视频文件的扩展名(最常见的是".webm")添加到 MIME 类型 "video/webm"， 来解决这个问题。</p> + +<pre class="notranslate">AddType video/webm .webm +</pre> + +<p>你的web主机可能会提供一个简单的接口来修改MIME类型配置，直到服务器全面升级。</p> + +<h2 id="DOM_interface" name="DOM_interface">DOM 接口</h2> + +<p>该元素实现了 <code><a href="/zh-CN/docs/Web/API/HTMLVideoElement" title="DOM/HTMLVideoElementInterface">HTMLVideoElement</a></code> 接口。</p> + +<h2 id="Browser_compatibility" name="Browser_compatibility">浏览器兼容性</h2> + +<p>{{Compat("html.elements.video")}}</p> + +<div id="compat-desktop"></div> + +<h2 id="See_also" name="See_also">另请参阅</h2> + +<ul> + <li><a href="/zh-CN/docs/Media_formats_supported_by_the_audio_and_video_elements" title="Media formats supported by the audio and video elements">audio和video元素支持的媒体格式</a></li> + <li>{{htmlelement("audio")}}</li> + <li><a href="/zh-CN/docs/Using_HTML5_audio_and_video" title="Using audio and video in Firefox">使用 HTML5 audio 和video</a></li> + <li><a href="/zh-CN/docs/Manipulating_video_using_canvas" title="Manipulating video using canvas">用canvas操作video</a></li> + <li><a href="/zh-CN/docs/XPCOM_Interface_Reference/NsIDOMHTMLMediaElement" title="NsIDOMHTMLMediaElement"><code>nsIDOMHTMLMediaElement</code></a></li> + <li><a class="external" href="http://tinyvid.tv/" title="http://tinyvid.tv/">TinyVid</a> - 在HTML5中使用ogg文件的例子。</li> + <li><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/#video" title="http://www.whatwg.org/specs/web-apps/current-work/#video"><code>video</code> 元素</a> (HTML5 规范)</li> + <li><a href="/zh-CN/docs/Configuring_servers_for_Ogg_media" title="Configuring servers for Ogg media">Ogg 格式媒体文件的服务器配置</a></li> +</ul> + +<p>{{HTMLRef}}</p> diff --git a/files/zh-cn/web/html/element/wbr/index.html b/files/zh-cn/web/html/element/wbr/index.html new file mode 100644 index 0000000000..4b816ce233 --- /dev/null +++ b/files/zh-cn/web/html/element/wbr/index.html @@ -0,0 +1,94 @@ +--- +title: <wbr> +slug: Web/HTML/Element/wbr +tags: + - Element + - HTML + - HTML text-level semantics + - Reference + - Web +translation_of: Web/HTML/Element/wbr +--- +<div>{{HTMLRef}}</div> + +<p><strong>HTML <code><wbr></code> 元素 </strong>— 一个文本中的位置，其中浏览器可以选择来换行，虽然它的换行规则可能不会在这里换行。</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/en-US/docs/HTML/Content_categories">Content categories</a></th> + <td><a href="/en-US/docs/HTML/Content_categories#Flow_content">Flow content</a>, <a href="/en-US/docs/HTML/Content_categories#Phrasing_content">phrasing content</a>.</td> + </tr> + <tr> + <th scope="row">Permitted content</th> + <td>Empty</td> + </tr> + <tr> + <th scope="row">Tag omission</th> + <td>It is an {{Glossary("empty element")}}; it must have a start tag, but must not have an end tag.</td> + </tr> + <tr> + <th scope="row">Permitted parents</th> + <td>Any element that accepts <a href="/en-US/docs/HTML/Content_categories#Phrasing_content">phrasing content</a>.</td> + </tr> + <tr> + <th scope="row">Permitted ARIA roles</th> + <td>Any</td> + </tr> + <tr> + <th scope="row">DOM interface</th> + <td>{{domxref("HTMLElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="属性">属性</h2> + +<p>这个元素仅仅包含 <a href="/en-US/docs/HTML/Global_attributes">全局属性</a></p> + +<h2 id="Notes">Notes</h2> + +<p>在 UTF-8 编码的页面中， <code><wbr></code> 表现为 <code>U+200B ZERO-WIDTH SPACE</code> （零宽空格）代码点。特别是，它表现为 Unicode bidi BN 代码点，也就是说，它对 bidi-ordering 没有影响：<code><</code><code>div dir=rtl>123,<wbr>456</div></code> 展示 <code>123,456</code> 而不是 <code>456,123</code>，当不拆成的两行时候。</p> + +<p>出于相同原因， <code><wbr></code>元素不会在换行的地方引入连字符。为了使连字符仅仅在行尾出现，使用连字符软实体 (<code>&shy;</code>) 来代替。</p> + +<p>这个元素首先在 Internet Explorer 5.5 中实现，并且在 HTML5 中官方定义。</p> + +<h2 id="示例">示例</h2> + +<p><em><a class="external" href="https://web.archive.org/web/20121105171040/http://styleguide.yahoo.com/">Yahoo 代码规范</a> </em>推荐 <a class="external" href="https://web.archive.org/web/20121105171040/http://styleguide.yahoo.com/editing/treat-abbreviations-capitalization-and-titles-consistently/website-names-and-addresses">在标点之前为 URL 换行</a>，以便避免将标点符号留在行尾，这会让读者将 URL 的末尾搞错。</p> + +<pre class="brush: html"><p>http://this<wbr>.is<wbr>.a<wbr>.really<wbr>.long<wbr>.example<wbr>.com/With<wbr>/deeper<wbr>/level<wbr>/pages<wbr>/deeper<wbr>/level<wbr>/pages<wbr>/deeper<wbr>/level<wbr>/pages<wbr>/deeper<wbr>/level<wbr>/pages<wbr>/deeper<wbr>/level<wbr>/pages</p> +</pre> + +<p>{{EmbedLiveSample("示例")}}</p> + +<h2 id="规范">规范</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'semantics.html#the-wbr-element', '<wbr>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'text-level-semantics.html#the-wbr-element', '<wbr>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + + + +<p>{{Compat("html.elements.wbr")}}</p> diff --git a/files/zh-cn/web/html/element/xmp/index.html b/files/zh-cn/web/html/element/xmp/index.html new file mode 100644 index 0000000000..65ae26a90b --- /dev/null +++ b/files/zh-cn/web/html/element/xmp/index.html @@ -0,0 +1,53 @@ +--- +title: <xmp> +slug: Web/HTML/Element/xmp +tags: + - HTML + - Web + - 元素 + - 已废弃 +translation_of: Web/HTML/Element/xmp +--- +<div>{{Obsolete_header}}</div> + +<h2 id="Summary" name="Summary">概述</h2> + +<p><code><xmp></code> 标签之间的内容不会被当作文档内容解析，而会被用等宽字体直接呈现。HTML2 规范建议，本标签中的内容应该具有足够容纳每行80个字母的宽度。</p> + +<div class="note"><strong>提示: </strong>请不要使用这个元素。 + +<ul> + <li>从HTML3.2开始反对使用本元素，同时它不再会在之后版本内被推荐使用。在HTML5规范内，本元素已经完全被移除。</li> + <li>建议您使用{{HTMLElement("pre")}} 元素，如果有特殊需求，您可以使用 {{HTMLElement("code")}} 元素。需要您注意的是，使用元素的时候，需要将内容中的"<"转义为"&lt;"，以防止被浏览器当作正常标签解析。</li> + <li>通过<a href="/en-US/docs/CSS" title="CSS">CSS</a>样式表将 {{cssxref("font-family")}} 属性的值设置成为generic-font，可以让任何其他任何标签获得等宽字体的样式。</li> +</ul> +</div> + +<h2 id="Attributes" name="Attributes">属性</h2> + +<p>该元素支持<a href="/en-US/docs/Web/HTML/global_attributes" title="HTML/global attributes">全局属性</a>。</p> + +<h2 id="DOM_interface" name="DOM_interface">DOM 接口</h2> + +<p>本元素支持{{domxref('HTMLElement')}} 接口。</p> + +<div class="note"> +<p><strong>兼容性提示: </strong>Gecko 1.9.2内核及更高版本已经兼容本元素，在火狐浏览器内本元素支持使用{{domxref('HTMLSpanElement')}}接口。</p> +</div> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + + + +<p>{{Compat("html.elements.xmp")}}</p> + +<h2 id="See_also" name="See_also">参阅</h2> + +<ul> + <li> 可以使用{{HTMLElement("pre")}} 和 {{HTMLElement("code")}} 元素来代替本元素。</li> + <li> {{HTMLElement("plaintext")}} 和 {{HTMLElement("listing")}} 元素和{{HTMLElement("xmp")}} 类似，都已被废弃。.</li> +</ul> + +<div> +<p><label>{{HTMLRef}}</label></p> +</div> |