diff options
Diffstat (limited to 'files/zh-cn/web/html')
26 files changed, 226 insertions, 237 deletions
diff --git a/files/zh-cn/web/html/applying_color/index.html b/files/zh-cn/web/html/applying_color/index.html index 7d6dd838dd..64d5a5c626 100644 --- a/files/zh-cn/web/html/applying_color/index.html +++ b/files/zh-cn/web/html/applying_color/index.html @@ -14,9 +14,9 @@ translation_of: Web/HTML/Applying_color <p>幸运的是，在 HTML 中添加颜色非常容易，而且几乎可以加在任何地方。</p> -<p>我们将会谈及添加颜色所需要的大部分内容，包括 {{anch("可设置颜色的内容", "一系列可以着色的元素与相关的 CSS 属性")}}，{{anch("如何描述颜色", "如何描述颜色")}}，以及{{anch("使用颜色", "在样式表与脚本中使用颜色的方法")}}。同时我们还会了解如何{{anch("让用户选择颜色", "让用户选择颜色")}}。</p> +<p>我们将会谈及添加颜色所需要的大部分内容，包括 <a href="#可设置颜色的内容">一系列可以着色的元素与相关的 CSS 属性</a>，<a href="#如何描述颜色">如何描述颜色</a>，以及<a href="#使用颜色">在样式表与脚本中使用颜色的方法</a>。同时我们还会了解如何<a href="#让用户选择颜色">让用户选择颜色</a>。</p> -<p>然后我们会通过简短的讨论总结如何 {{anch("机智地运用颜色", "机智地运用颜色")}}：如何选择合适的颜色，同时考虑不同视力水平的人的需求。</p> +<p>然后我们会通过简短的讨论总结如何 <a href="#机智地运用颜色">机智地运用颜色</a>：如何选择合适的颜色，同时考虑不同视力水平的人的需求。</p> <h2 id="可设置颜色的内容">可设置颜色的内容</h2> @@ -48,8 +48,8 @@ translation_of: Web/HTML/Applying_color <p>Every element is a box with some sort of content, and has a background and a border in addition to whatever contents the box may have.</p> <dl> - <dt>{{anch("Borders")}}</dt> - <dd>See the section {{anch("Borders")}} for a list of the CSS properties you can use to set the colors of a box's borders.</dd> + <dt><a href="#边框">Borders</a></dt> + <dd>See the section <a href="#边框">Borders</a> for a list of the CSS properties you can use to set the colors of a box's borders.</dd> <dt>{{cssxref("background-color")}}</dt> <dd>The background color to use in areas of the element that have no foreground content.</dd> <dt>{{cssxref("column-rule-color")}}</dt> @@ -228,7 +228,7 @@ th { <h2 id="使用颜色">使用颜色</h2> -<p>Now that you know what CSS properties exist that let you apply color to elements and the formats you can use to describe colors, you can put this together to begin to make use of color. As you may have seen from the list under {{anch("Things that can have color")}}, there are plenty of things you can color with CSS. Let's look at this from two sides: using color within a {{Glossary("stylesheet")}}, and adding and changing color using {{Glossary("JavaScript")}} code to alter the styles of elements.</p> +<p>Now that you know what CSS properties exist that let you apply color to elements and the formats you can use to describe colors, you can put this together to begin to make use of color. As you may have seen from the list under <a href="#可设置颜色的内容">Things that can have color</a>, there are plenty of things you can color with CSS. Let's look at this from two sides: using color within a {{Glossary("stylesheet")}}, and adding and changing color using {{Glossary("JavaScript")}} code to alter the styles of elements.</p> <h3 id="在样式表中指定颜色">在样式表中指定颜色</h3> @@ -327,7 +327,7 @@ th { <p>There are many situations in which your website may need to let the user select a color. Perhaps you have a customizable user interface, or you're implementing a drawing app. Maybe you have editable text and need to let the user choose the text color. Or perhaps your app lets the user assign colors to folders or items. Although historically it's been necessary to implement your own {{interwiki("wikipedia", "color picker")}}, HTML now provides support for browsers to provide one for your use through the {{HTMLElement("input")}} element, by using <code>"color"</code> as the value of its {{htmlattrxref("type", "input")}} attribute.</p> -<p>The <code><input></code> element represents a color only in the {{anch("Hexadecimal string notation", "hexadecimal string notation")}} covered above.</p> +<p>The <code><input></code> element represents a color only in the <a href="#十六进制颜色码">hexadecimal string notation</a> covered above.</p> <h3 id="示例：选择一个颜色">示例：选择一个颜色</h3> @@ -409,7 +409,7 @@ colorPicker.addEventListener("change", function(event) { <h4 id="填满调色板">填满调色板</h4> -<p>Once you have decided on your base color, there are plenty of online tools that can help you build out a palette of appropriate colors to use along with your base color by applying color theory to your base color to determine appropriate added colors. Many of these tools also support viewing the colors filtered so you can see what they would look like to people with various forms of color blindness. See {{anch("Color and accessibility")}} for a brief explanation of why this matters.</p> +<p>Once you have decided on your base color, there are plenty of online tools that can help you build out a palette of appropriate colors to use along with your base color by applying color theory to your base color to determine appropriate added colors. Many of these tools also support viewing the colors filtered so you can see what they would look like to people with various forms of color blindness. See <a href="#颜色与可访问性">Color and accessibility</a> for a brief explanation of why this matters.</p> <p>A few examples (all free to use as of the time this list was last revised):</p> diff --git a/files/zh-cn/web/html/attributes/autocomplete/index.html b/files/zh-cn/web/html/attributes/autocomplete/index.html index 312d6d1d4a..76047606ae 100644 --- a/files/zh-cn/web/html/attributes/autocomplete/index.html +++ b/files/zh-cn/web/html/attributes/autocomplete/index.html @@ -79,13 +79,13 @@ original_slug: Web/HTML/Attributes/自动完成属性 <dt>"<code>address-line1</code>", "<code>address-line2</code>", <code>"address-line3"</code></dt> <dd>街道地址的每一行。 仅在还存在 "<code>street-address</code>" 的情况下，才应提供这些内容。.</dd> <dt>"<code>address-level4</code>"</dt> - <dd>在具有四个级别的地址中，粒度最细的 {{anch("Administrative levels in addresses", "administrative level")}}。</dd> + <dd>在具有四个级别的地址中，粒度最细的<a href="#地址的行政级别">地址的行政级别</a>。</dd> <dt>"<code>address-level3</code>"</dt> - <dd>第三个 {{anch("Administrative levels in addresses", "administrative level")}}, 在具有至少三个管理级别的地址中。</dd> + <dd>第三个<a href="#地址的行政级别">地址的行政级别</a>，在具有至少三个管理级别的地址中。</dd> <dt>"<code>address-level2</code>"</dt> - <dd>第二个 {{anch("Administrative levels in addresses", "administrative level")}}, 在地址中至少有两个。 在具有两个行政级别的国家/地区中，通常是地址所在的城市，城镇，村庄或其他地区。</dd> + <dd>第二个<a href="#地址的行政级别">地址的行政级别</a>，在地址中至少有两个。 在具有两个行政级别的国家/地区中，通常是地址所在的城市，城镇，村庄或其他地区。</dd> <dt>"<code>address-level1</code>"</dt> - <dd>地址中的第一个 {{anch("Administrative levels in addresses", "administrative level")}} 。 通常是地址所在的省份。 在美国，这就是州。 在瑞士，行政区。 在英国，小镇。<br> + <dd>地址中的第一个<a href="#地址的行政级别">地址的行政级别</a> 。通常是地址所在的省份。 在美国，这就是州。 在瑞士，行政区。 在英国，小镇。<br> “国家”</dd> <dt>"<code>country</code>"</dt> <dd>国家代码。</dd> diff --git a/files/zh-cn/web/html/element/abbr/index.html b/files/zh-cn/web/html/element/abbr/index.html index d773c725ee..245f2617fb 100644 --- a/files/zh-cn/web/html/element/abbr/index.html +++ b/files/zh-cn/web/html/element/abbr/index.html @@ -67,8 +67,7 @@ translation_of: Web/HTML/Element/abbr <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> + <li>可以将 <code><abbr></code> 与 {{HTMLElement("dfn")}} 配合使用来建立缩写或首字母缩略词的定义。 请参阅下面的示例 <a href="#定义一个缩写">定义一个缩写</a>。</li> </ul> <h3 id="语法注意事项">语法注意事项</h3> diff --git a/files/zh-cn/web/html/element/details/index.html b/files/zh-cn/web/html/element/details/index.html index d13992ce21..3153264bd0 100644 --- a/files/zh-cn/web/html/element/details/index.html +++ b/files/zh-cn/web/html/element/details/index.html @@ -10,7 +10,7 @@ translation_of: Web/HTML/Element/details --- <div>{{HTMLRef}}</div> -<p><span class="seoSummary"><strong>HTML <code><details></code>元素</strong>可创建一个挂件，仅在被切换成展开状态时，它才会显示内含的信息。</span>{{HTMLElement("summary")}} 元素可为该部件提供概要或者标签。</p> +<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> @@ -38,7 +38,7 @@ translation_of: Web/HTML/Element/details <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> +<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 <a href="#自定义自带部件的样式">Customizing the disclosure widget</a> for further details.</p> <table class="properties"> <tbody> diff --git a/files/zh-cn/web/html/element/input/date/index.html b/files/zh-cn/web/html/element/input/date/index.html index 850296ff34..7e2e447ebf 100644 --- a/files/zh-cn/web/html/element/input/date/index.html +++ b/files/zh-cn/web/html/element/input/date/index.html @@ -7,7 +7,7 @@ translation_of: Web/HTML/Element/input/date <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> +<p>通常来说控件的 UI 界面因浏览器的不同而有变化，到目前为止此控件还不被所有浏览器支持，具体细节请参阅<a href="#浏览器兼容性">浏览器兼容性</a>。在不支持的浏览器当中，控件因此会被优雅的降级为普通的<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> @@ -30,7 +30,7 @@ translation_of: Web/HTML/Element/input/date <table class="properties"> <tbody> <tr> - <td><strong>{{anch("Value")}}</strong></td> + <td><strong><a href="#value">Value</a></strong></td> <td>一个代表按照 YYYY-MM-DD 格式化过的日期 {{domxref("DOMString")}}，或者是为空</td> </tr> <tr> @@ -73,7 +73,7 @@ dateControl.value = '2017-06-01';</pre> <p>日期控件，一开始听起来可能觉得很方便。它们不仅提供了一个简单的日期选择 UI 界面，还规范了发往后台的数据格式，无论用户在什么区域。但是，由于浏览器支持的限制，<input type="date"> 仍然存在一些问题。</p> -<p>我们将探寻一些关于 <input type="date"> 基础的和更复杂的的用法，然后就以后减轻浏览器支持问题提供建议（请参阅{{anch("Handling browser support")}}）。</p> +<p>我们将探寻一些关于 <input type="date"> 基础的和更复杂的的用法，然后就以后减轻浏览器支持问题提供建议（请参阅<a href="#处理浏览器支持问题">处理浏览器支持问题</a>）。</p> <h3 id="日期控件基本用法">日期控件基本用法</h3> @@ -109,13 +109,13 @@ dateControl.value = '2017-06-01';</pre> <h3 id="控制输入框大小">控制输入框大小</h3> -<p><code><input type="date"></code> 不支持表单属性 {{htmlattrxref("size", "input")}}. 对于大小需求，你必须祈求于 <a href="/en-US/docs/Web/CSS">CSS</a> 的帮助。</p> +<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("min", "input")}} 和 {{htmlattrxref("min", "input")}} 属性去限制可用日期 (参见 <a href="#设置日期最大和最小值">设置日期最大和最小值</a>),对于支持的浏览器来说如果你尝试提交一个超出给定范围的日期，那么它将抛出一个错误。然而， 你必须检查这些结果以确保他们在这些日期范围内， 因为只有在用户设备上完全支持日期选择器的情况下，才能执行这些操作。</p> <p>另外， 您可以使用 {{htmlattrxref("required", "input")}} 属性强制填写日期， 如果你尝试提交一个未填写日期的域那么将会抛出错误。 至少在大多数浏览器是可以工作的。</p> @@ -167,15 +167,15 @@ input:valid+span:after { <p><strong>重要</strong>: HTML 表单验证并不能替代脚本去确保输入值是有效的格式。一些人很容易调整 HTML 绕过验证，或者完全移除验证.。当然一些人也可能很容易的绕过你的验证，直接把数据提交到你的服务器。如果你的服务器无法验证它接收到的数据，当提交了不正确的数据之后可能会导致灾难性的后果 (或者数据量太大，错误的类型等等).</p> </div> -<h2 id="手持設備浏览器支持">手持設備浏览器支持</h2> +<h2 id="处理浏览器支持问题">处理浏览器支持问题</h2> -<p>正如刚才提到的，在编写本文时使用日期输入的主要问题就是 {anch("Browser compatibility", "browser support")}}（浏览器支持）. 举一个例子， 在安卓系统的 Firefox 中选择器是这样子的：</p> +<p>正如刚才提到的，在编写本文时使用日期输入的主要问题就是 <a href="#浏览器兼容性">浏览器兼容性</a>。举一个例子， 在安卓系统的 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> +<p>第二个问题更为严重；正如我们早些时候提到的，对于日期输入框， 实际值总是会被格式化微 <code>yyyy-mm-dd</code>。另一方面对于文本输入框，默认情况下浏览器并不知道日期格式应该怎么样被格式化， 而且人们书写日期格式的方式有很多，例如：</p> <ul> <li><code>ddmmyyyy</code></li> @@ -443,9 +443,9 @@ daySelect.onchange = function() { {{Compat("html.elements.input.input-date")}} -<h2 id="也可以参见">也可以参见</h2> +<h2 id="参见">参见</h2> <ul> - <li>通用的 {{HTMLElement("input")}} 元素 和 用于操作他的接口，{{domxref("HTMLInputElement")}}</li> + <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 index 367e59de60..efcff58345 100644 --- a/files/zh-cn/web/html/element/input/datetime-local/index.html +++ b/files/zh-cn/web/html/element/input/datetime-local/index.html @@ -30,7 +30,7 @@ translation_of: Web/HTML/Element/input/datetime-local <table class="properties"> <tbody> <tr> - <td><strong>{{anch("Value")}}</strong></td> + <td><strong><a href="#取值">取值</a></strong></td> <td>一个表示日期和时间的 {{domxref("DOMString")}}（本地时区）或空值。</td> </tr> <tr> @@ -76,7 +76,7 @@ dateControl.value = '2017-06-01T08:30';</pre> <p>Date/time 输入控件乍看非常实用；它们提供了方便的用户接口来选择日期和时间，并且无论用户端是什么样的本地化设置，都会以标准化数据发送给服务器。但是受限于浏览器的支持， <code><input type="datetime-local"></code> 也有不少问题。</p> -<p>我们先来看看 <code><input type="datetime-local"></code> 基本的和高级的用法，之后在（参见{{anch("处理浏览器支持")}}）会提供一些减少浏览器兼容问题的建议。</p> +<p>我们先来看看 <code><input type="datetime-local"></code> 基本的和高级的用法，之后在（参见<a href="#处理浏览器支持">处理浏览器支持</a>）会提供一些减少浏览器兼容问题的建议。</p> <h3 id="datetime-local_的基本用法">datetime-local 的基本用法</h3> @@ -104,7 +104,7 @@ dateControl.value = '2017-06-01T08:30';</pre> <ul> <li>只有 “2017 年 6 月” 可供选择 —— 只有 “日期” 部分的值可修改，并且 6 月以外的日期不能被选到日期控件内</li> - <li>视你所使用的浏览器，你或许会发现时间选择控件中特定值以外的时间可能不可选（如 Edge），或是无效（参见 {{anch("校验")}}）但仍可选（如 Chrome）</li> + <li>视你所使用的浏览器，你或许会发现时间选择控件中特定值以外的时间可能不可选（如 Edge），或是无效（参见 <a href="#校验">校验</a>）但仍可选（如 Chrome）</li> </ul> <div class="note"> @@ -147,7 +147,7 @@ dateControl.value = '2017-06-01T08:30';</pre> <p>默认情况下 <code><input type="datetime-local"></code> 不对输入内容进行验证。用户交互（UI）的实现通常不允许你输入不是日期/时间的值 —— 这非常有用 —— 但用户也仍会在不填写任何值的情况下提交数据，或者输入一个不无效的日期/时间（如：4 月 32 日）。</p> -<p>你可以使用 {{htmlattrxref("min", "input")}} 及 {{htmlattrxref("max", "input")}} 来限制可选择的日期（参见 anch("设定日期时间的最大值和最小值")），并且使用 {{htmlattrxref("required", "input")}} 属性使日期/时间为强制的输入项。这样做的结果是，可以使相应的浏览器在你输入一个超出范围的日期或不输入时显示一个错误信息。</p> +<p>你可以使用 {{htmlattrxref("min", "input")}} 及 {{htmlattrxref("max", "input")}} 来限制可选择的日期（参见 <a href="#设定日期时间的最大值和最小值">设定日期时间的最大值和最小值</a>），并且使用 {{htmlattrxref("required", "input")}} 属性使日期/时间为强制的输入项。这样做的结果是，可以使相应的浏览器在你输入一个超出范围的日期或不输入时显示一个错误信息。</p> <p>让我们来看个例子，这里我们设置日期/时间的最小值和最大值，并且设置该项为必填：</p> diff --git a/files/zh-cn/web/html/element/input/email/index.html b/files/zh-cn/web/html/element/input/email/index.html index 0814303bc3..916e0e18c1 100644 --- a/files/zh-cn/web/html/element/input/email/index.html +++ b/files/zh-cn/web/html/element/input/email/index.html @@ -26,7 +26,7 @@ translation_of: Web/HTML/Element/input/email <table class="properties"> <tbody> <tr> - <td><strong>{{anch("值")}}</strong></td> + <td><strong><a href="#值">值</a></strong></td> <td>一个邮箱地址格式的{{domxref("DOMString")}} 或空值</td> </tr> <tr> @@ -59,14 +59,14 @@ translation_of: Web/HTML/Element/input/email <ol> <li>一个空字符串（“”），表示用户未输入值或该值已被删除。</li> <li> - <p>单个符合格式的电子邮件地址。并不代表该邮件地址存在，而是说它至少在格式上是正确的，简单地讲就是 <code>"username@domain"</code> 或者 <code>"username@domain.tld"</code>，当然并不局限于此。关于匹配电子邮件地址验证算法的 {{Glossary("regular expression")}}，参见 {{anch("Validation")}}。</p> + <p>单个符合格式的电子邮件地址。并不代表该邮件地址存在，而是说它至少在格式上是正确的，简单地讲就是 <code>"username@domain"</code> 或者 <code>"username@domain.tld"</code>，当然并不局限于此。关于匹配电子邮件地址验证算法的 {{Glossary("regular expression")}}，参见 <a href="#validation">Validation</a>。</p> </li> <li> <p>当且仅当明确 {{htmlattrxref("multiple", "input")}} 属性时，值可以是一个列表，该列表包含一串符合格式的电子邮件地址，且每个地址之间用逗号分隔。列表中，位于每个地址之前和之后的任何空白字符都会被移除。</p> </li> </ol> -<p>关于如何验证电子邮件地址以保证其格式正确的细节，参见 {{anch("Validation")}}。</p> +<p>关于如何验证电子邮件地址以保证其格式正确的细节，参见 <a href="#validation">Validation</a>。</p> <h2 id="Using_email_inputs">Using email inputs</h2> @@ -282,7 +282,7 @@ label::after { <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>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 <a href="#allowing_multiple_email_addresses">Allowing multiple email addresses</a>. 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> diff --git a/files/zh-cn/web/html/element/input/file/index.html b/files/zh-cn/web/html/element/input/file/index.html index e5b6df3c32..5bf3428f15 100644 --- a/files/zh-cn/web/html/element/input/file/index.html +++ b/files/zh-cn/web/html/element/input/file/index.html @@ -23,7 +23,7 @@ translation_of: Web/HTML/Element/input/file <table class="properties"> <tbody> <tr> - <td><strong>{{anch("Value")}}</strong></td> + <td><strong><a href="#值">值</a></strong></td> <td>A {{domxref("DOMString")}} 表示已选择文件的路径</td> </tr> <tr> @@ -89,19 +89,19 @@ translation_of: Web/HTML/Element/input/file </thead> <tbody> <tr> - <td><code>{{anch("accept")}}</code></td> - <td>一个或多个 {{anch("Unique file type specifiers", "unique file type specifiers")}} 描述允许的文件类型</td> + <td><code><a href="#attr-accept">accept</a></code></td> + <td>一个或多个 <a href="#唯一文件类型说明符">唯一文件类型说明符</a> 描述允许的文件类型</td> </tr> <tr> - <td><code>{{anch("capture")}}</code></td> + <td><code><a href="#attr-capture">capture</a></code></td> <td>捕获图像或视频数据的源</td> </tr> <tr> - <td><code>{{anch("files")}}</code></td> + <td><code><a href="#attr-files">files</a></code></td> <td>{{domxref("FileList")}} 列出了已选择的文件</td> </tr> <tr> - <td><code>{{anch("multiple")}}</code></td> + <td><code><a href="#attr-multiple">multiple</a></code></td> <td>布尔值，如果出现，则表示用户可以选择多个文件</td> </tr> </tbody> @@ -109,7 +109,7 @@ translation_of: Web/HTML/Element/input/file <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><code><a href="/zh-CN/docs/Web/HTML/Attributes/accept">accept</a></code> 属性是一个字符串，它定义了文件 input 应该接受的文件类型。这个字符串是一个以逗号为分隔的<strong><a href="#唯一文件类型说明符">唯一文件类型说明符</a></strong>列表。由于给定的文件类型可以用多种方式指定，因此当你需要给定格式的文件时，提供一组完整的类型指定符是非常有用的。</p> <p>例如，有许多方法可以识别 Microsoft Word 文件，所以接受 Word 文件的站点可以使用一个<code><input></code>：</p> @@ -143,8 +143,8 @@ translation_of: Web/HTML/Element/input/file </thead> <tbody> <tr> - <td><code>{{anch("webkitdirectory")}}</code></td> - <td>一个布尔值，表示是否仅允许用户选择一个目录（或多个目录，如果 <code>{{anch("multiple")}}</code> 也出现的话）</td> + <td><code><a href="#attr-webkitdirectory">webkitdirectory</a></code></td> + <td>一个布尔值，表示是否仅允许用户选择一个目录（或多个目录，如果 <code><a href="#attr-multiple">multiple</a></code> 也出现的话）</td> </tr> </tbody> </table> diff --git a/files/zh-cn/web/html/element/input/hidden/index.html b/files/zh-cn/web/html/element/input/hidden/index.html index c7a5d72c3d..ac523ccaa1 100644 --- a/files/zh-cn/web/html/element/input/hidden/index.html +++ b/files/zh-cn/web/html/element/input/hidden/index.html @@ -27,7 +27,7 @@ translation_of: Web/HTML/Element/input/hidden <table class="properties"> <tbody> <tr> - <td><strong>{{anch("值")}}</strong></td> + <td><strong><a href="#属性值">属性值</a></strong></td> <td><code>{{domxref("DOMString")}}</code>代表您要传递回服务器的隐藏数据的值</td> </tr> <tr> @@ -74,7 +74,7 @@ translation_of: Web/HTML/Element/input/hidden </thead> <tbody> <tr> - <td><code>{{anch("name")}}</code></td> + <td><code><a href="#attr-name">name</a></code></td> <td>与所有输入类型一样，这可以是提交表单时反馈给服务器的 <code>{{HTMLElement("input")}}</code> 的名称；使用特殊属性值 <code>_charset_</code> 则会使当前隐藏 <code>{{HTMLElement("input")}}</code> 的值被反馈为表单内容的字符编码</td> </tr> </tbody> @@ -101,7 +101,7 @@ translation_of: Web/HTML/Element/input/hidden <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> +<p>您可以在下面的 <a href="https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/input/hidden#例子"><a href="#例子">例子</a></a> 部分中看到完整的<a href="https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/input/hidden#例子">示例</a>。</p> <h3 id="改善网站安全性">改善网站安全性</h3> @@ -119,7 +119,7 @@ translation_of: Web/HTML/Element/input/hidden <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>让我们看一下如何使用隐藏输入保存正在被编辑的记录的 ID，实现我们先前描述的编辑表单的简单版本（请参阅 <code><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/hidden#Tracking_edited_content"><a href="#跟踪被编辑的内容">跟踪被编辑的内容</a></a></code>）。</p> <p>编辑表单的 HTML 可能看起来像这样：</p> diff --git a/files/zh-cn/web/html/element/input/index.html b/files/zh-cn/web/html/element/input/index.html index 7a0eec9474..5bebc87291 100644 --- a/files/zh-cn/web/html/element/input/index.html +++ b/files/zh-cn/web/html/element/input/index.html @@ -82,7 +82,7 @@ translation_of: Web/HTML/Element/input <tbody> <tr> <td>{{HTMLElement("input/button", "button")}}</td> - <td>没有默认行为的按钮，上面显示 {{anch('value')}} 属性的值，默认为空。</td> + <td>没有默认行为的按钮，上面显示 <a href="#attr-value">value</a> 属性的值，默认为空。</td> <td id="examplebutton"> <pre class="brush: html hidden"> <input type="button" name="button" /></pre> @@ -136,7 +136,7 @@ translation_of: Web/HTML/Element/input </tr> <tr> <td>{{HTMLElement("input/file", "file")}}</td> - <td>让用户选择文件的控件。使用{{anch('accept')}}属性规定控件能选择的文件类型。</td> + <td>让用户选择文件的控件。使用 <a href="#attr-accept">accept</a> 属性规定控件能选择的文件类型。</td> <td id="examplefile"> <pre class="brush: html hidden"> <input type="file" accept="image/*, text/*" name="file"/></pre> @@ -151,7 +151,7 @@ translation_of: Web/HTML/Element/input </tr> <tr> <td>{{HTMLElement("input/image", "image")}}</td> - <td>带图像的 <code>submit</code> 按钮。显示的图像由 <code>src</code> 属性规定。如果 {{anch('src')}} 缺失，{{anch('alt')}} 属性就会显示。</td> + <td>带图像的 <code>submit</code> 按钮。显示的图像由 <code>src</code> 属性规定。如果 <a href="#attr-src">src</a> 缺失，<a href="#attr-alt">alt</a> 属性就会显示。</td> <td id="exampleimage"> <pre class="brush: html hidden"> <input type="image" name="image" src="" alt="image input"/></pre> @@ -187,7 +187,7 @@ translation_of: Web/HTML/Element/input </tr> <tr> <td>{{HTMLElement("input/radio", "radio")}}</td> - <td>单选按钮，允许在多个拥有相同 {{anch('name')}} 值的选项中选中其中一个。</td> + <td>单选按钮，允许在多个拥有相同 <a href="#attr-name">name</a> 值的选项中选中其中一个。</td> <td id="exampleradio"> <pre class="brush: html hidden"> <input type="radio" name="radio"/></pre> @@ -196,7 +196,7 @@ translation_of: Web/HTML/Element/input </tr> <tr> <td>{{HTMLElement("input/range", "range")}}</td> - <td>此控件用于输入不需要精确的数字。控件是一个范围组件，默认值为正中间的值。同时使用{{anch('htmlattrdefmin')}} 和 {{anch('htmlattrdefmax')}}来规定值的范围。</td> + <td>此控件用于输入不需要精确的数字。控件是一个范围组件，默认值为正中间的值。同时使用 <a href="#attr-min">min</a> 和 <a href="#attr-max">max</a> 来规定值的范围。</td> <td id="examplerange"> <pre class="brush: html hidden"> <input type="range" name="range" min="0" max="25"/></pre> @@ -312,124 +312,124 @@ translation_of: Web/HTML/Element/input </thead> <tbody> <tr> - <td>{{anch('htmlattrdefaccept', 'accept')}}</td> + <td><a href="#attr-accept">accept</a></td> <td>file</td> <td>用于规定文件上传控件中期望的文件类型</td> </tr> <tr> - <td>{{anch('htmlattrdefalt', 'alt')}}</td> + <td><a href="#attr-alt">alt</a></td> <td>image</td> <td>image type 的 alt 属性，是可访问性的要求。</td> </tr> <tr> - <td>{{anch('htmlattrdefautocomplete', 'autocomplete')}}</td> + <td><a href="#attr-autocomplete">autocomplete</a></td> <td>所有</td> <td>用于表单的自动填充功能</td> </tr> <tr> - <td>{{anch('htmlattrdefautofocus', 'autofocus')}}</td> + <td><a href="#attr-autofocus">autofocus</a></td> <td>所有</td> <td>页面加载时自动聚焦到此表单控件</td> </tr> <tr> - <td>{{anch('htmlattrdefcapture', 'capture')}}</td> + <td><a href="#attr-capture">capture</a></td> <td>file</td> <td>文件上传控件中媒体拍摄的方式</td> </tr> <tr> - <td>{{anch('htmlattrdefchecked', 'checked')}}</td> + <td><a href="#attr-checked">checked</a></td> <td>radio, checkbox</td> <td>用于控制控件是否被选中</td> </tr> <tr> - <td>{{anch('htmlattrdefdirname', 'dirname')}}</td> + <td><a href="#attr-dirname">dirname</a></td> <td>text, search</td> <td>表单区域的一个名字，用于在提交表单时发送元素的方向性</td> </tr> <tr> - <td>{{anch('htmlattrdefdisabled', 'disabled')}}</td> + <td><a href="#attr-disabled">disabled</a></td> <td>所有</td> <td>表单控件是否被禁用</td> </tr> <tr> - <td>{{anch('htmlattrdefform', 'form')}}</td> + <td><a href="#attr-form">form</a></td> <td>所有</td> <td>将控件和一个 form 元素联系在一起</td> </tr> <tr> - <td>{{anch('htmlattrdefformaction', 'formaction')}}</td> + <td><a href="#attr-formaction">formaction</a></td> <td>image, submit</td> <td>用于提交表单的 URL</td> </tr> <tr> - <td>{{anch('htmlattrdefformenctype', 'formenctype')}}</td> + <td><a href="#attr-formenctype">formenctype</a></td> <td>image, submit</td> <td>表单数据集的编码方式，用于表单提交</td> </tr> <tr> - <td>{{anch('htmlattrdefformmethod', 'formmethod')}}</td> + <td><a href="#attr-formmethod">formmethod</a></td> <td>image, submit</td> <td>用于表单提交的 HTTP 方法 </td> </tr> <tr> - <td>{{anch('htmlattrdefformnovalidate', 'formnovalidate')}}</td> + <td><a href="#attr-formnovalidate">formnovalidate</a></td> <td>image, submit</td> <td>提交表单时绕过对表单控件的验证</td> </tr> <tr> - <td>{{anch('htmlattrdefformtarget', 'formtarget')}}</td> + <td><a href="#attr-formtarget">formtarget</a></td> <td>image, submit</td> <td>表单提交的浏览上下文</td> </tr> <tr> - <td>{{anch('htmlattrdefheight', 'height')}}</td> + <td><a href="#attr-height">height</a></td> <td>image</td> <td> <p>和 {{htmlelement('img')}} 的 <code>height</code> 属性相同；垂直方向</p> </td> </tr> <tr> - <td>{{anch('htmlattrdeflist', 'list')}}</td> + <td><a href="#attr-list">list</a></td> <td>绝大部分</td> <td>自动填充选项的{{htmlelement('datalist')}} 的 id 值</td> </tr> <tr> - <td>{{anch('htmlattrdefmax', 'max')}}</td> + <td><a href="#attr-max">max</a></td> <td>数字 type</td> <td>最大值</td> </tr> <tr> - <td>{{anch('htmlattrdefmaxlength', 'maxlength')}}</td> + <td><a href="#attr-maxlength">maxlength</a></td> <td>password, search, tel, text, url</td> <td><code>value</code> 的最大长度（最多字符数目）</td> </tr> <tr> - <td>{{anch('htmlattrdefmin', 'min')}}</td> + <td><a href="#attr-min">min</a></td> <td>数字 type</td> <td>最小值</td> </tr> <tr> - <td>{{anch('htmlattrdefminlength', 'minlength')}}</td> + <td><a href="#attr-minlength">minlength</a></td> <td>password, search, tel, text, url</td> <td><code>value</code> 的最小长度（最少字符数目）</td> </tr> <tr> - <td>{{anch('htmlattrdefmultiple', 'multiple')}}</td> + <td><a href="#attr-multiple">multiple</a></td> <td>email, file</td> <td>布尔值。 是否允许多个值</td> </tr> <tr> - <td>{{anch('htmlattrdefname', 'name')}}</td> + <td><a href="#attr-name">name</a></td> <td>所有</td> <td>input 表单控件的名字。以名字/值对的形式随表单一起提交</td> </tr> <tr> - <td>{{anch('htmlattrdefpattern', 'pattern')}}</td> + <td><a href="#attr-pattern">pattern</a></td> <td>password, text, tel</td> - <td>匹配有效 <code>value</code> 的模式（pattern）</td> + <td>匹配有效 <code>value</code> 的模式（pattern）</td> </tr> <tr> - <td>{{anch('htmlattrdefplaceholder', 'placeholder')}}</td> + <td><a href="#attr-placeholder">placeholder</a></td> <td>password, search, tel, text, url</td> <td>当表单控件为空时，控件中显示的内容</td> </tr> @@ -444,32 +444,32 @@ translation_of: Web/HTML/Element/input <td>布尔值。表示此值为必填项或者提交表单前必须先检查该值</td> </tr> <tr> - <td>{{anch('htmlattrdefsize', 'size')}}</td> + <td><a href="#attr-size">size</a></td> <td>email, password, tel, text</td> <td>控件的大小</td> </tr> <tr> - <td>{{anch('htmlattrdefsrc', 'src')}}</td> + <td><a href="#attr-src">src</a></td> <td>image</td> <td>和{{htmlelement('img')}} 的 <code>src</code> 属性一样；图像资源的地址</td> </tr> <tr> - <td>{{anch('htmlattrdefstep', 'step')}}</td> + <td><a href="#attr-step">step</a></td> <td>数字 type</td> <td>有效的递增值</td> </tr> <tr> - <td>{{anch('htmlattrdeftype', 'type')}}</td> + <td><a href="#attr-type">type</a></td> <td>所有</td> <td>input 表单控件的 type</td> </tr> <tr> - <td>{{anch('htmlattrdefvalue', 'value')}}</td> + <td><a href="#attr-value">value</a></td> <td>所有</td> <td>表单控件的值。以名字/值对的形式随表单一起提交</td> </tr> <tr> - <td>{{anch('htmlattrdefwidth', 'width')}}</td> + <td><a href="#attr-width">width</a></td> <td>image</td> <td>与 {{htmlelement('img')}} 的 <code>width</code> 属性一样</td> </tr> @@ -566,7 +566,7 @@ translation_of: Web/HTML/Element/input </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> + <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 <a href="#attr-name">name</a> and <a href="#attr-value">value</a>, 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> @@ -617,7 +617,7 @@ translation_of: Web/HTML/Element/input <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> + <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 <a href="#labels">the label element</a> below.</p> </dd> <dt id="htmlattrdefheight">{{htmlattrdef("inputmode")}}</dt> <dd> @@ -687,7 +687,7 @@ translation_of: Web/HTML/Element/input <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="/zh-CN/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> + <p>The input will fail <a href="/zh-CN/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 <a href="#client-side_validation">Client-side validation</a> 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> @@ -719,10 +719,10 @@ translation_of: Web/HTML/Element/input <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> + <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 <a href="#labels">Labels</a> below.</p> </dd> <dt>{{ htmlattrdef("type") }}</dt> - <dd>要呈现的控件类型。有关各个类型的信息，请参阅 {{anch("Form <input> types")}}，其中包含指向每个类型的更多信息的链接。</dd> + <dd>要呈现的控件类型。有关各个类型的信息，请参阅 <a href="#<input>_types">Form <input> types</a>，其中包含指向每个类型的更多信息的链接。</dd> <dt>{{ htmlattrdef("usemap") }} {{ HTMLVersionInline(4) }} only, {{ obsoleteGeneric("inline", "HTML5") }}</dt> <dd>作为图像映射的{{ HTMLElement("map") }}元素的名称。</dd> <dt>{{ htmlattrdef("value") }}</dt> diff --git a/files/zh-cn/web/html/element/input/month/index.html b/files/zh-cn/web/html/element/input/month/index.html index 58ceb8f2ea..b56e44f05e 100644 --- a/files/zh-cn/web/html/element/input/month/index.html +++ b/files/zh-cn/web/html/element/input/month/index.html @@ -14,8 +14,6 @@ original_slug: Web/HTML/Element/Input/月份 <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> @@ -29,7 +27,7 @@ original_slug: Web/HTML/Element/Input/月份 <table class="properties"> <tbody> <tr> - <td><strong>{{anch("Value")}}</strong></td> + <td><strong><a href="#value">Value</a></strong></td> <td>一个 {{domxref("DOMString")}} 代表一个月，一年，或者是空。</td> </tr> <tr> @@ -88,19 +86,19 @@ monthControl.value = '1978-06';</pre> </thead> <tbody> <tr> - <td><code>{{anch("max")}}</code></td> + <td><code><a href="#attr-max">max</a></code></td> <td>The latest year and month to accept as a valid input</td> </tr> <tr> - <td><code>{{anch("min")}}</code></td> + <td><code><a href="#attr-min">min</a></code></td> <td>The earliest year and month to accept as a valid input</td> </tr> <tr> - <td><code>{{anch("readonly")}}</code></td> + <td><code><a href="#attr-readonly">readonly</a></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><code><a href="#attr-step">step</a></code></td> <td>A stepping interval to use when incrementing and decrementing the value of the input field</td> </tr> </tbody> @@ -108,7 +106,7 @@ monthControl.value = '1978-06';</pre> <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>The latest year and month, in the string format discussed in the <a href="#value">Value</a> 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> @@ -140,7 +138,7 @@ monthControl.value = '1978-06';</pre> <p>我们在往下看更多关于<code><input type="month"></code>基础和更多的高级的用法</p> -<p>, 下面将讲有关缓解浏览器支持问题的建议 (请参阅{{anch("Handling browser support")}}).</p> +<p>, 下面将讲有关缓解浏览器支持问题的建议 (请参阅<a href="#handling_browser_support">Handling browser support</a>).</p> <h3 id="Basic_uses_of_month">Basic uses of month</h3> @@ -169,7 +167,7 @@ monthControl.value = '1978-06';</pre> <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> + <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 <a href="#validation">Validation</a>) but still available (e.g. Chrome).</li> </ul> <div class="note"> @@ -184,7 +182,7 @@ monthControl.value = '1978-06';</pre> <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>You can use {{htmlattrxref("min", "input")}} and {{htmlattrxref("max", "input")}} to restrict the available dates (see <a href="#设置最长和最短日期">Setting maximum and minimum dates</a>, 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> diff --git a/files/zh-cn/web/html/element/input/number/index.html b/files/zh-cn/web/html/element/input/number/index.html index 0976de7d73..9f4a418d77 100644 --- a/files/zh-cn/web/html/element/input/number/index.html +++ b/files/zh-cn/web/html/element/input/number/index.html @@ -29,7 +29,7 @@ translation_of: Web/HTML/Element/input/number <table class="properties"> <tbody> <tr> - <td><strong>{{anch("Value")}}</strong></td> + <td><strong><a href="#值">值</a></strong></td> <td>表示一个数字的 {{jsxref("Number")}} ，或 空</td> </tr> <tr> diff --git a/files/zh-cn/web/html/element/input/password/index.html b/files/zh-cn/web/html/element/input/password/index.html index f0e5b616a0..8645adb8ef 100644 --- a/files/zh-cn/web/html/element/input/password/index.html +++ b/files/zh-cn/web/html/element/input/password/index.html @@ -9,12 +9,8 @@ translation_of: Web/HTML/Element/input/password <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> @@ -22,7 +18,7 @@ translation_of: Web/HTML/Element/input/password <table class="properties"> <tbody> <tr> - <td><strong>{{anch("Value")}}</strong></td> + <td><strong><a href="#值">值</a></strong></td> <td>A {{domxref("DOMString")}} representing a password, or empty</td> </tr> <tr> @@ -48,7 +44,7 @@ translation_of: Web/HTML/Element/input/password <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> +<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 <a href="#验证">Validation</a> 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> diff --git a/files/zh-cn/web/html/element/input/radio/index.html b/files/zh-cn/web/html/element/input/radio/index.html index 0ffa30a831..b8020fd5f3 100644 --- a/files/zh-cn/web/html/element/input/radio/index.html +++ b/files/zh-cn/web/html/element/input/radio/index.html @@ -25,7 +25,7 @@ translation_of: Web/HTML/Element/input/radio <table class="properties"> <tbody> <tr> - <td><strong>{{anch("Value")}}</strong></td> + <td><strong><a href="#值">Value</a></strong></td> <td>A {{domxref("DOMString")}} representing the value of the radio button.</td> </tr> <tr> @@ -98,7 +98,7 @@ translation_of: Web/HTML/Element/input/radio <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>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 <a href="#selecting_a_radio_button_by_default">Selecting a radio button by default</a> 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> @@ -154,7 +154,7 @@ form.addEventListener("submit", function(event) { </thead> <tbody> <tr> - <td><code>{{anch("checked")}}</code></td> + <td><code><a href="#attr-checked">checked</a></code></td> <td>A Boolean indicating whether or not this radio button is the currently-selected item in the group</td> </tr> </tbody> diff --git a/files/zh-cn/web/html/element/input/range/index.html b/files/zh-cn/web/html/element/input/range/index.html index ae2cce53ba..b5ba221231 100644 --- a/files/zh-cn/web/html/element/input/range/index.html +++ b/files/zh-cn/web/html/element/input/range/index.html @@ -23,7 +23,7 @@ original_slug: Web/HTML/Element/Input/范围 <table class="properties"> <tbody> <tr> - <td><strong>{{anch("Value")}}</strong></td> + <td><strong><a href="#值">Value</a></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> @@ -78,41 +78,41 @@ original_slug: Web/HTML/Element/Input/范围 </thead> <tbody> <tr> - <td><code>{{anch("list")}}</code></td> + <td><code><a href="#list">list</a></code></td> <td><datalist>元素的 ID，其中包含可选的预定义选项</td> </tr> <tr> - <td><code>{{anch("max")}}</code></td> + <td><code><a href="#max">max</a></code></td> <td>最大允许值</td> </tr> <tr> - <td><code>{{anch("min")}}</code></td> + <td><code><a href="#min">min</a></code></td> <td>最小允许值</td> </tr> <tr> - <td><code>{{anch("step")}}</code></td> + <td><code><a href="#step">step</a></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 id="list">{{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> +<h3 id="max">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> +<h3 id="min">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> +<h3 id="step">step</h3> <p>{{page("/en-US/docs/Web/HTML/Element/input/number", "step-include")}}</p> @@ -129,7 +129,7 @@ original_slug: Web/HTML/Element/Input/范围 </thead> <tbody> <tr> - <td><code>{{anch("orient")}}</code></td> + <td><code><a href="#attr-orient">orient</a></code></td> <td>设置范围滑块的方向。 <strong>仅限 Firefox .</strong></td> </tr> </tbody> diff --git a/files/zh-cn/web/html/element/input/reset/index.html b/files/zh-cn/web/html/element/input/reset/index.html index 5695cacd7b..324982fa7b 100644 --- a/files/zh-cn/web/html/element/input/reset/index.html +++ b/files/zh-cn/web/html/element/input/reset/index.html @@ -25,7 +25,7 @@ translation_of: Web/HTML/Element/input/reset <table class="properties"> <tbody> <tr> - <td><strong>{{anch("值")}}</strong></td> + <td><strong><a href="#值">值</a></strong></td> <td><code>{{domxref("DOMString")}}</code>用做按钮标签</td> </tr> <tr> diff --git a/files/zh-cn/web/html/element/input/search/index.html b/files/zh-cn/web/html/element/input/search/index.html index 2148071515..fc1431e90c 100644 --- a/files/zh-cn/web/html/element/input/search/index.html +++ b/files/zh-cn/web/html/element/input/search/index.html @@ -22,7 +22,7 @@ translation_of: Web/HTML/Element/input/search <table class="properties"> <tbody> <tr> - <td><strong>{{anch("值")}}</strong></td> + <td><strong><a href="#值">值</a></strong></td> <td><code>{{domxref("DOMString")}}</code> 代表搜索字段中包含的值。</td> </tr> <tr> @@ -51,7 +51,7 @@ translation_of: Web/HTML/Element/input/search <pre class="brush: js notranslate">searchTerms = mySearch.value; </pre> -<p>如果没有针对输入的验证约束 (请参见 <code>{{anch("Validation")}}</code>)，该值可以是任何文本字符串或空字符串 (<code>""</code>)。</p> +<p>如果没有针对输入的验证约束 (请参见<a href="#验证方式">验证方式</a>)，该值可以是任何文本字符串或空字符串 (<code>""</code>)。</p> <h2 id="其他属性">其他属性</h2> @@ -66,59 +66,59 @@ translation_of: Web/HTML/Element/input/search </thead> <tbody> <tr> - <td><code>{{anch("list")}}</code></td> + <td><code><a href="#list">list</a></code></td> <td><code><datalist></code> 元素的 ID，其中包含可选的预定义自动完成选项。</td> </tr> <tr> - <td><code>{{anch("maxlength")}}</code></td> + <td><code><a href="#maxlength">maxlength</a></code></td> <td>输入应接受的最大字符数。</td> </tr> <tr> - <td><code>{{anch("minlength")}}</code></td> + <td><code><a href="#minlength">minlength</a></code></td> <td>输入可以且仍被认为有效的最小字符数。</td> </tr> <tr> - <td><code>{{anch("pattern")}}</code></td> + <td><code><a href="#pattern">pattern</a></code></td> <td>输入内容必须匹配的正则表达式才能有效。</td> </tr> <tr> - <td><code>{{anch("placeholder")}}</code></td> + <td><code><a href="#placeholder">placeholder</a></code></td> <td>空时在输入字段中显示的示例值。</td> </tr> <tr> - <td><code>{{anch("readonly")}}</code></td> + <td><code><a href="#readonly">readonly</a></code></td> <td>一个布尔属性，指示输入的内容是否应为只读。</td> </tr> <tr> - <td><code>{{anch("size")}}</code></td> + <td><code><a href="#size">size</a></code></td> <td>一个数字，指示输入字段应宽多少个字符。</td> </tr> <tr> - <td><code>{{anch("spellcheck")}}</code></td> + <td><code><a href="#spellcheck">spellcheck</a></code></td> <td>控制是否对输入字段启用拼写检查，或者是否应使用默认拼写检查配置。</td> </tr> </tbody> </table> -<p id="htmlattrdeflist">{{page("/zh-CN/docs/Web/HTML/Element/input/text", "list", 0, 1, 2)}}</p> +<p id="list">{{page("/zh-CN/docs/Web/HTML/Element/input/text", "list", 0, 1, 2)}}</p> -<h3 id="htmlattrdefmaxlength">{{htmlattrdef("maxlength")}}</h3> +<h3 id="maxlength">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> +<h3 id="minlength">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> +<h3 id="pattern">pattern</h3> <p>{{page("/zh-CN/docs/Web/HTML/Element/input/text", "pattern-include")}}</p> -<p>有关详细信息和示例，请参见 {{anch("Specifying a pattern")}} 部分。</p> +<p>有关详细信息和示例，请参见 <a href="#指定模式">指定模式</a> 部分。</p> <p>{{page("/zh-CN/docs/Web/HTML/Element/input/text", "placeholder", 0, 1, 2)}}</p> @@ -126,7 +126,7 @@ translation_of: Web/HTML/Element/input/search <p>{{page("/zh-CN/docs/Web/HTML/Element/input/text", "size", 0, 1, 2)}}</p> -<h3 id="htmlattrdefspellcheck">{{htmlattrdef("spellcheck")}}</h3> +<h3 id="spellcheck">spellcheck</h3> <p>{{page("/zh-CN/docs/Web/HTML/Element/input/text", "spellcheck-include")}}</p> @@ -143,29 +143,29 @@ translation_of: Web/HTML/Element/input/search </thead> <tbody> <tr> - <td><code>{{anch("autocorrect")}}</code></td> + <td><code><a href="#autocorrect">autocorrect</a></code></td> <td>编辑此输入字段时是否允许自动更正。<strong>Safari only.</strong></td> </tr> <tr> - <td><code>{{anch("incremental")}}</code></td> + <td><code><a href="#incremental">incremental</a></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><code><a href="#mozactionhint">mozactionhint</a></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><code><a href="#results">results</a></code></td> <td>先前搜索查询的下拉列表中应显示的最大项目数。<strong>Safari only.</strong></td> </tr> </tbody> </table> -<h3 id="htmlattrdefautocorrect_non-standard_inline">{{htmlattrdef("autocorrect")}} {{non-standard_inline}}</h3> +<h3 id="autocorrect">autocorrect</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> +<h3 id="incremental">incremental</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> @@ -175,14 +175,14 @@ translation_of: Web/HTML/Element/input/search <p><code>search</code> 事件受速率限制，因此发送事件的频率不会超过实现定义的间隔。</p> </div> -<h3 id="htmlattrdefmozactionhint_non-standard_inline">{{htmlattrdef("mozactionhint")}} {{non-standard_inline}}</h3> +<h3 id="mozactionhint">mozactionhint</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> +<h3 id="results">results</h3> <div id="results-include"> -<p><code>results</code> 属性是一个数字值（仅受 Safari 支持），可让您覆盖要在 <code>{{HTMLElement("input")}}</code> 元素的本机提供的先前搜索查询的下拉菜单中显示的最大条目数。</p> +<p><code>results</code> 属性是一个数字值（仅受 Safari 支持），可让您覆盖要在 <code>{{HTMLElement("input")}}</code> 元素的本机提供的先前搜索查询的下拉菜单中显示的最大条目数。</p> <p>该值必须是非负十进制数字。 如果未提供或给出了无效值，则使用浏览器的默认最大条目数。</p> </div> diff --git a/files/zh-cn/web/html/element/input/submit/index.html b/files/zh-cn/web/html/element/input/submit/index.html index d84d8ded79..50ba606cc4 100644 --- a/files/zh-cn/web/html/element/input/submit/index.html +++ b/files/zh-cn/web/html/element/input/submit/index.html @@ -26,7 +26,7 @@ translation_of: Web/HTML/Element/input/submit <table class="properties"> <tbody> <tr> - <td><strong>{{anch("值")}}</strong></td> + <td><strong><a href="#值">值</a></strong></td> <td>{{domxref("DOMString")}} 展示在按钮的标签内</td> </tr> <tr> @@ -48,7 +48,7 @@ translation_of: Web/HTML/Element/input/submit </tbody> </table> -<h2 id="Value">Value</h2> +<h2 id="值">值</h2> <p><code><input type="submit"></code> 元素的 {{htmlattrxref("value", "input")}} 属性 包含一个展示在按钮标签上的 {{domxref("DOMString")}}，否则按钮没有正确的 value 值。</p> @@ -79,35 +79,35 @@ translation_of: Web/HTML/Element/input/submit </thead> <tbody> <tr> - <td><code>{{anch("formaction")}}</code></td> + <td><code><a href="#formaction">formaction</a></code></td> <td>提交表单数据的 URL； 覆盖表单的{{htmlattrxref("action", "form")}} 属性（如果有）</td> </tr> <tr> - <td><code>{{anch("formenctype")}}</code></td> + <td><code><a href="#formenctype">formenctype</a></code></td> <td>一个字符串，指定用于表单数据的编码类型</td> </tr> <tr> - <td><code>{{anch("formmethod")}}</code></td> + <td><code><a href="#formmethod">formmethod</a></code></td> <td>提交表单时使用的 HTTP 方法 ({{HTTPMethod("get")}} 或 {{HTTPMethod("post")}}) </td> </tr> <tr> - <td><code>{{anch("formnovalidate")}}</code></td> + <td><code><a href="#formnovalidate">formnovalidate</a></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><code><a href="#formtarget">formtarget</a></code></td> <td>提交表单后，将服务器返回的响应加载到 {{Glossary("browsing context")}} 中</td> </tr> </tbody> </table> -<h3 id="htmlattrdefformaction">{{htmlattrdef("formaction")}}</h3> +<h3 id="formaction">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> +<h3 id="formenctype">formenctype</h3> <p>一个字符串，标识在将表单数据提交到服务器时要使用的编码方法。 有三个允许的值：</p> @@ -124,7 +124,7 @@ translation_of: Web/HTML/Element/input/submit <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> +<h3 id="formmethod">formmethod</h3> <p>一个字符串，指示提交表单数据时要使用的 HTTP 方法； 此值将覆盖拥有表单上给出的任何 {{htmlattrxref("method", "form")}} 属性。 允许的值为：</p> @@ -139,13 +139,13 @@ translation_of: Web/HTML/Element/input/submit <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> +<h3 id="formnovalidate">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> +<h3 id="formtarget">formtarget</h3> <p>一个字符串，它指定一个名称或关键字，该名称或关键字指示提交表单后在何处显示收到的响应。 该字符串必须是<strong>浏览上下文</strong>的名称 (即选项卡，窗口或 {{HTMLElement("iframe")}}。 此处指定的值将覆盖 {{HTMLElement("form")}} 上拥有此输入的 {{htmlattrxref("target", "form")}} 属性。</p> diff --git a/files/zh-cn/web/html/element/input/tel/index.html b/files/zh-cn/web/html/element/input/tel/index.html index 8e2e6d64ed..63ff7be15b 100644 --- a/files/zh-cn/web/html/element/input/tel/index.html +++ b/files/zh-cn/web/html/element/input/tel/index.html @@ -14,7 +14,7 @@ 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><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> @@ -31,7 +31,7 @@ translation_of: Web/HTML/Element/input/tel <table class="properties"> <tbody> <tr> - <td><strong>{{anch("Value")}}</strong></td> + <td><strong><a href="#值">值</a></strong></td> <td>A {{domxref("DOMString")}} representing a telephone number, or empty</td> </tr> <tr> @@ -61,7 +61,7 @@ translation_of: Web/HTML/Element/input/tel <p>电话号码是网络上非常普遍收集的数据类型。例如，在创建任何类型的注册或电子商务网站时，无论出于商业目的还是出于紧急联系目的，您都可能需要向用户索要电话号码。鉴于通常输入的电话号码是多少，不幸的是，用于验证电话号码的 “一刀切” 解决方案是不实际的。</p> -<p>幸运的是，您可以考虑自己网站的要求，并自行实施适当的验证级别。有关详细信息，请参阅下面的 {{anch("Validation")}}</p> +<p>幸运的是，您可以考虑自己网站的要求，并自行实施适当的验证级别。有关详细信息，请参阅下面的 <a href="#验证">验证</a></p> <h3 id="自定义键盘">自定义键盘</h3> @@ -130,7 +130,7 @@ translation_of: Web/HTML/Element/input/tel <p>{{EmbedLiveSample("Element_value_length", 600, 40) }}</p> <div class="note"> -<p><strong>注意</strong>: 上述属性确实会影响 {{anch("validation", "Validation")}} — 如果值的长度小于 9 个字符，或者大于 14 个，上述示例的输入将被视为无效。甚至不会让你输入超过最大长度的值。</p> +<p><strong>注意</strong>: 上述属性确实会影响 <a href="#验证">验证</a> — 如果值的长度小于 9 个字符，或者大于 14 个，上述示例的输入将被视为无效。甚至不会让你输入超过最大长度的值。</p> </div> <h3 id="提供默认选项">提供默认选项</h3> diff --git a/files/zh-cn/web/html/element/input/text/index.html b/files/zh-cn/web/html/element/input/text/index.html index 651ad3910b..e3620296c9 100644 --- a/files/zh-cn/web/html/element/input/text/index.html +++ b/files/zh-cn/web/html/element/input/text/index.html @@ -21,12 +21,12 @@ translation_of: Web/HTML/Element/input/text <table class="properties"> <tbody> <tr> - <td><strong>{{anch("值")}}</strong></td> + <td><strong><a href="#值">值</a></strong></td> <td>input 的一个属性，代表包含在文本框中的文字</td> </tr> <tr> <td><strong>事件</strong></td> - <td>{{event("change")}} 和 {{event("input")}}</td> + <td>{{event("change")}} 和 {{event("input")}}</td> </tr> <tr> <td><strong>支持的公共属性</strong></td> @@ -50,7 +50,7 @@ translation_of: Web/HTML/Element/input/text <pre class="brush: js">let theText = myTextInput.value; </pre> -<p>如何输入没有验证约束 (查看 {{anch("Validation")}} 获取更多详细信息), <code>value</code>值应该是空字符串 ("").</p> +<p>如何输入没有验证约束 (查看 <a href="#验证">验证</a> 获取更多详细信息), <code>value</code>值应该是空字符串 ("").</p> <h2 id="其他属性">其他属性</h2> @@ -65,52 +65,52 @@ translation_of: Web/HTML/Element/input/text </thead> <tbody> <tr> - <td><code>{{anch("maxlength")}}</code></td> + <td><code><a href="#maxlength">maxlength</a></code></td> <td>文本框能接受的最大字符数。</td> </tr> <tr> - <td><code>{{anch("minlength")}}</code></td> + <td><code><a href="#minlength">minlength</a></code></td> <td>文本框能输入的最小字符数，并且仍然被认为是有效的。</td> </tr> <tr> - <td><code>{{anch("pattern")}}</code></td> + <td><code><a href="#pattern">pattern</a></code></td> <td> 验证文本框内容的正则表达式。</td> </tr> <tr> - <td><code>{{anch("placeholder")}}</code></td> + <td><code><a href="#placeholder">placeholder</a></code></td> <td>文本框为空时显示的一个示例值。</td> </tr> <tr> - <td><code>{{anch("readonly")}}</code></td> + <td><code><a href="#readonly">readonly</a></code></td> <td>一个布尔属性，指示文本框中的内容是否应该为只读。</td> </tr> <tr> - <td><code>{{anch("size")}}</code></td> + <td><code><a href="#size">size</a></code></td> <td>一个数字，指示文本框有多少个字符宽度。</td> </tr> <tr> - <td><code>{{anch("spellcheck")}}</code></td> + <td><code><a href="#spellcheck">spellcheck</a></code></td> <td>控制是否可以检查文本框的拼写，或者默认的拼写检查配置是否应该使用。 </td> </tr> </tbody> </table> -<h3 id="htmlattrdefmaxlength">{{htmlattrdef("maxlength")}}</h3> +<h3 id="maxlength">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> +<h3 id="minlength">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> +<h3 id="pattern">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>如果指定了 <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> @@ -119,9 +119,9 @@ translation_of: Web/HTML/Element/input/text </div> </div> -<p>请参照 {{anch("Specifying a pattern")}} 更多内容和例子。</p> +<p>请参照 <a href="#指定模式">指定模式</a> 更多内容和例子。</p> -<h3 id="htmlattrdefplaceholder">{{htmlattrdef("placeholder")}}</h3> +<h3 id="placeholder">placeholder</h3> <p><code>placeholder</code> 属性是一个字符串，可向用户提供有关该字段中需要什么样的信息的简短提示。 它应该是一个单词或短语来说明预期的数据类型，而不是说明性消息。 文本中不得包含回车符或换行符。</p> @@ -131,7 +131,7 @@ translation_of: Web/HTML/Element/input/text <p><strong>注意：</strong>如果可以，请避免使用占位符属性。 它在语义上没有其他解释表单的方式有用，并且可能导致内容出现意外的问题。 请参见 {{SectionOnPage("/en-US/docs/Web/HTML/Element/input", "Labels and placeholders")}}。</p> </div> -<h3 id="htmlattrdefreadonly">{{htmlattrdef("readonly")}}</h3> +<h3 id="readonly">readonly</h3> <p>一个布尔属性，如果存在，则表示该字段不能由用户编辑。 但是，仍可以通过 JavaScript 代码直接设置 {{domxref("HTMLInputElement.value")}} 属性来更改其 <code>value</code>。</p> @@ -139,13 +139,13 @@ translation_of: Web/HTML/Element/input/text <p><strong>注意：</strong>因为只读字段不能有值，所以 <code>required</code> 也对指定了 <code>readonly</code> 属性的输入没有任何影响。</p> </div> -<h3 id="htmlattrdefsize">{{htmlattrdef("size")}}</h3> +<h3 id="size">size</h3> <p><code>size</code> 属性是一个数字值，指示输入字段应有多少个字符宽。 该值必须是一个大于零的数字，默认值是 20。 根据字符和字体 (使用 {{cssxref("font")}} 设置)，结果输入可能比指定的字符数窄或宽。</p> -<p>这并不限制用户可以在该字段中输入多少个字符。 它仅指定一次可以看到多少个。 要设置输入数据长度的上限，使用 <code>{{anch("maxlength")}}</code> 属性。</p> +<p>这并不限制用户可以在该字段中输入多少个字符。 它仅指定一次可以看到多少个。 要设置输入数据长度的上限，使用 <code><a href="#maxlength">maxlength</a></code> 属性。</p> -<h3 id="htmlattrdefspellcheck">{{htmlattrdef("spellcheck")}}</h3> +<h3 id="spellcheck">spellcheck</h3> <p><code>spellcheck</code> 是一个全局属性，用于指示是否启用元素的拼写检查。 它可以用于任何可编辑的内容，但是这里我们考虑与在 {{HTMLElement("input")}} 元素上使用 <code>spellcheck</code> 细节。则 <code>spellcheck</code> 的允许值为：</p> @@ -158,7 +158,7 @@ translation_of: Web/HTML/Element/input/text <dd>遵循元素的默认行为进行拼写检查。 这可能基于父元素 <code>spellcheck</code> 设置或其他因素。</dd> </dl> -<p>如果输入字段没有设置 {{anch("readonly")}} 属性且未禁用，则可以启用拼写检查。</p> +<p>如果输入字段没有设置 <a href="#readonly">readonly</a> 属性且未禁用，则可以启用拼写检查。</p> <p>如果 {{Glossary("user agent", "user agent's")}} 首选项覆盖了设置，则通过读取 <code>spellcheck</code> 返回的值可能无法反映控件中拼写检查的实际状态。</p> @@ -175,17 +175,17 @@ translation_of: Web/HTML/Element/input/text </thead> <tbody> <tr> - <td><code>{{anch("autocorrect")}}</code></td> + <td><code><a href="#autocorrect">autocorrect</a></code></td> <td>一个字符串，指示是否 <code>on</code> 或 <code>off</code> 自动更正。 <strong>Safari only.</strong></td> </tr> <tr> - <td><code>{{anch("mozactionhint")}}</code></td> + <td><code><a href="#mozactionhint">mozactionhint</a></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> +<h3 id="autocorrect">autocorrect</h3> <div id="autocorrect-include"> <p>Safari 扩展， the <code>autocorrect</code> 属性是一个字符串，它指示在用户编辑此字段时是否激活自动更正。 允许的值为：</p> @@ -198,7 +198,7 @@ translation_of: Web/HTML/Element/input/text </dl> </div> -<h3 id="htmlattrdefmozactionhint_non-standard_inline">{{htmlattrdef("mozactionhint")}} {{non-standard_inline}}</h3> +<h3 id="mozactionhint">mozactionhint</h3> <div id="mozactionhint-include"> <p>一个 Mozilla 扩展程序，由 Firefox for Android 支持，它提供了一个提示，提示用户在编辑字段时按 <kbd>Enter</kbd> 或 <kbd>Return</kbd> 键将采取何种操作。 此信息用于确定在虚拟键盘上的 <kbd>Enter</kbd> 键上使用哪种标签。</p> diff --git a/files/zh-cn/web/html/element/input/time/index.html b/files/zh-cn/web/html/element/input/time/index.html index c6e2cd736e..6f69436ba7 100644 --- a/files/zh-cn/web/html/element/input/time/index.html +++ b/files/zh-cn/web/html/element/input/time/index.html @@ -50,7 +50,7 @@ translation_of: Web/HTML/Element/input/time <table class="properties"> <tbody> <tr> - <td><strong>{{anch("Value")}}</strong></td> + <td><strong><a href="#value">Value</a></strong></td> <td>A {{domxref("DOMString")}} representing a time, or empty.</td> </tr> <tr> @@ -90,7 +90,7 @@ 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>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 <a href="#using_the_step_attribute">Using the step attribute</a>), 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> @@ -116,7 +116,7 @@ startTime.addEventListener("input", function() { <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> +<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 <a href="#using_the_step_attribute">Using the step attribute</a>).</p> <h2 id="Additional_attributes">Additional attributes</h2> @@ -131,19 +131,19 @@ startTime.addEventListener("input", function() { </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> + <td><code><a href="#max">max</a></code></td> + <td>The latest time to accept, in the syntax described under <a href="#time_value_format">Time value format</a></td> </tr> <tr> - <td><code>{{anch("min")}}</code></td> + <td><code><a href="#min">min</a></code></td> <td>The earliest time to accept as a valid input</td> </tr> <tr> - <td><code>{{anch("readonly")}}</code></td> + <td><code><a href="#readonly">readonly</a></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><code><a href="#step">step</a></code></td> <td>The stepping interval to use both for user interfaces purposes and during constraint validation</td> </tr> </tbody> @@ -151,17 +151,17 @@ startTime.addEventListener("input", function() { <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> +<h3 id="max">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> +<p>A string indicating the latest time to accept, specified in the same <a href="#time_value_format">time value format</a> as described above. If the specified string isn't a valid time, no maximum value is set.</p> -<h3 id="htmlattrdefmin">{{htmlattrdef("min")}}</h3> +<h3 id="min">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>A string specifying the earliest time to accept, given in the <a href="#time_value_format">time value format</a> 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> +<h3 id="step">step</h3> <p>{{page("/en-US/docs/Web/HTML/Element/input/number", "step-include")}}</p> @@ -173,7 +173,7 @@ startTime.addEventListener("input", function() { <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> +<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 <a href="#handling_browser_support">Handling browser support</a>).</p> <h3 id="Basic_uses_of_time">Basic uses of time</h3> diff --git a/files/zh-cn/web/html/element/input/url/index.html b/files/zh-cn/web/html/element/input/url/index.html index 9e3e34c838..91200f9baa 100644 --- a/files/zh-cn/web/html/element/input/url/index.html +++ b/files/zh-cn/web/html/element/input/url/index.html @@ -7,8 +7,6 @@ translation_of: Web/HTML/Element/input/url <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> @@ -16,7 +14,7 @@ translation_of: Web/HTML/Element/input/url <table class="properties"> <tbody> <tr> - <td><strong>{{anch("Value")}}</strong></td> + <td><strong><a href="#value">Value</a></strong></td> <td>A {{domxref("DOMString")}} representing a URL, or empty</td> </tr> <tr> @@ -47,7 +45,7 @@ translation_of: Web/HTML/Element/input/url <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> +<p>See <a href="#validation">Validation</a> for details on how URLs are validated to ensure that they're formatted properly.</p> <h2 id="Additional_attributes">Additional attributes</h2> @@ -62,59 +60,59 @@ translation_of: Web/HTML/Element/input/url </thead> <tbody> <tr> - <td><code>{{anch("list")}}</code></td> + <td><code><a href="#list">list</a></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><code><a href="#maxlength">maxlength</a></code></td> <td>The maximum number of characters the input should accept</td> </tr> <tr> - <td><code>{{anch("minlength")}}</code></td> + <td><code><a href="#minlength">minlength</a></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><code><a href="#pattern">pattern</a></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><code><a href="#placeholder">placeholder</a></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><code><a href="#readonly">readonly</a></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><code><a href="#size">size</a></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><code><a href="#spellcheck">spellcheck</a></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> +<p id="list">{{page("/en-US/docs/Web/HTML/Element/input/text", "list", 0, 1, 2)}}</p> -<h3 id="htmlattrdefmaxlength">{{htmlattrdef("maxlength")}}</h3> +<h3 id="maxlength">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> +<h3 id="minlength">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> +<h3 id="pattern">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>See the section <a href="#pattern_validation">Pattern validation</a> for details and an example.</p> <p>{{page("/en-US/docs/Web/HTML/Element/input/text", "placeholder", 0, 1, 2)}}</p> @@ -137,11 +135,11 @@ translation_of: Web/HTML/Element/input/url </thead> <tbody> <tr> - <td><code>{{anch("autocorrect")}}</code></td> + <td><code><a href="#autocorrect">autocorrect</a></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><code><a href="#mozactionhint">mozactionhint</a></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> @@ -361,7 +359,7 @@ translation_of: Web/HTML/Element/input/url <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>There's not much else to say about <code>url</code> type inputs; check the <a href="#pattern_validation">Pattern validation</a> and <a href="#using_url_inputs">Using URL inputs</a> 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> diff --git a/files/zh-cn/web/html/element/input/week/index.html b/files/zh-cn/web/html/element/input/week/index.html index 2dd7bf030c..8b93e611a4 100644 --- a/files/zh-cn/web/html/element/input/week/index.html +++ b/files/zh-cn/web/html/element/input/week/index.html @@ -30,7 +30,7 @@ translation_of: Web/HTML/Element/input/week <table class="properties"> <tbody> <tr> - <td><strong>{{anch("Value")}}</strong></td> + <td><strong><a href="#值">值</a></strong></td> <td>A {{domxref("DOMString")}} representing a week and year, or empty</td> </tr> <tr> @@ -52,7 +52,7 @@ translation_of: Web/HTML/Element/input/week </tbody> </table> -<h2 id="价值">价值</h2> +<h2 id="值">值</h2> <p>一个 {{domxref("DOMString")}} 代表输入到输入中的星期/年的值。{{SectionOnPage("/en-US/docs/Web/HTML/Date_and_time_formats", "Format of a valid week string")}} 中描述了此输入类型使用的日期和时间值的格式。</p> @@ -83,39 +83,39 @@ weekControl.value = '2017-W45';</pre> </thead> <tbody> <tr> - <td><code>{{anch("max")}}</code></td> + <td><code><a href="#max">max</a></code></td> <td>接受为有效输入的最新年份和星期</td> </tr> <tr> - <td><code>{{anch("min")}}</code></td> + <td><code><a href="#min">min</a></code></td> <td>最早的年和周接受为有效输入</td> </tr> <tr> - <td><code>{{anch("readonly")}}</code></td> + <td><code><a href="#readonly">readonly</a></code></td> <td>一个布尔值（如果存在），指示用户无法编辑字段的内容</td> </tr> <tr> - <td><code>{{anch("step")}}</code></td> + <td><code><a href="#step">step</a></code></td> <td>用于用户界面和约束验证的步进间隔（允许值之间的距离）</td> </tr> </tbody> </table> -<h3 id="htmlattrdefmax">{{htmlattrdef("max")}}</h3> +<h3 id="max">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>接受以上 <a href="#值">值</a> 部分中讨论的字符串格式的最新（按时间）年份和星期数。 如果输入到元素中的 {{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> +<h3 id="min">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>该值必须小于或等于 <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> +<h3 id="step">step</h3> <p>{{page("/en-US/docs/Web/HTML/Element/input/number", "step-include")}}</p> @@ -127,7 +127,7 @@ weekControl.value = '2017-W45';</pre> <p>乍看之下，周输入听起来很方便，因为它们提供了用于选择周的简单 UI，并且它们标准化了发送到服务器的数据格式，而与用户的浏览器或区域设置无关。 但是， <code><input type="week"></code> 存在问题，因为不能保证所有浏览器都支持浏览器。</p> -<p>我们将研究 <code><input type="week"></code>的基本和更复杂的用法，然后在以后提供有关缓解浏览器支持问题的建议（请参阅 {{anch("Handling browser support")}}).</p> +<p>我们将研究 <code><input type="week"></code>的基本和更复杂的用法，然后在以后提供有关缓解浏览器支持问题的建议（请参阅 <a href="#处理浏览器支持">处理浏览器支持</a>).</p> <h3 id="周的基本用途">周的基本用途</h3> diff --git a/files/zh-cn/web/html/element/menu/index.html b/files/zh-cn/web/html/element/menu/index.html index 97c4b0c173..194639f9a2 100644 --- a/files/zh-cn/web/html/element/menu/index.html +++ b/files/zh-cn/web/html/element/menu/index.html @@ -67,9 +67,9 @@ translation_of: Web/HTML/Element/menu <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><a href="#右键菜单"><strong>Context menus</strong></a> 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 <a href="#菜单按钮">button-activated menus</a> 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><a href="#toolbar"><strong></strong>Toolbar menus</strong></a> 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> diff --git a/files/zh-cn/web/html/element/script/index.html b/files/zh-cn/web/html/element/script/index.html index 1c343630ff..a7463ee29a 100644 --- a/files/zh-cn/web/html/element/script/index.html +++ b/files/zh-cn/web/html/element/script/index.html @@ -56,7 +56,7 @@ translation_of: Web/HTML/Element/script <dd>对于<a href="/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> + <dd>关于浏览器支持请参见<a href="#浏览器兼容性">浏览器兼容性</a>。另可参见文章<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> diff --git a/files/zh-cn/web/html/element/u/index.html b/files/zh-cn/web/html/element/u/index.html index cb1be7fa22..ef777fc367 100644 --- a/files/zh-cn/web/html/element/u/index.html +++ b/files/zh-cn/web/html/element/u/index.html @@ -15,9 +15,7 @@ translation_of: Web/HTML/Element/u <div>{{EmbedInteractiveExample("pages/tabbed/u.html", "tabbed-shorter")}}</div> - - -<p>有关何时适合使用 <code><u></code> 以及何时不使用 <code><u></code> 的详细信息，请参阅{{anch("Usage notes")}} 部分。</p> +<p>有关何时适合使用 <code><u></code> 以及何时不使用 <code><u></code> 的详细信息，请参阅<a href="#使用说明">使用说明</a>部分。</p> <table class="properties"> <tbody> |