diff options
167 files changed, 496 insertions, 526 deletions
diff --git a/files/zh-cn/conflicting/learn/javascript/asynchronous_ae5a561b0ec11fc53c167201aa8af5df/index.html b/files/zh-cn/conflicting/learn/javascript/asynchronous_ae5a561b0ec11fc53c167201aa8af5df/index.html index a3500922af..5a70af05ab 100644 --- a/files/zh-cn/conflicting/learn/javascript/asynchronous_ae5a561b0ec11fc53c167201aa8af5df/index.html +++ b/files/zh-cn/conflicting/learn/javascript/asynchronous_ae5a561b0ec11fc53c167201aa8af5df/index.html @@ -84,7 +84,7 @@ let myGreeting = setTimeout(sayHi, 2000);</pre> <p>例如，如果我们有一个函数既需要从超时调用，也需要响应某个事件，那么这将非常有用。此外它也可以帮助保持代码整洁，特别是当超时回调超过几行代码时。</p> -<p><code>setTimeout()</code> 返回一个标志符变量用来引用这个间隔，可以稍后用来取消这个超时任务，下面就会学到 {{anch("Clearing timeouts")}} 。</p> +<p><code>setTimeout()</code> 返回一个标志符变量用来引用这个间隔，可以稍后用来取消这个超时任务，下面就会学到 <a href="#清除超时">清除超时</a>。</p> <h3 id="传递参数给setTimeout">传递参数给setTimeout() </h3> diff --git a/files/zh-cn/conflicting/web/api/rtcpeerconnection/rtcpeerconnection/index.html b/files/zh-cn/conflicting/web/api/rtcpeerconnection/rtcpeerconnection/index.html index 0d48c5aaa4..97bddd245d 100644 --- a/files/zh-cn/conflicting/web/api/rtcpeerconnection/rtcpeerconnection/index.html +++ b/files/zh-cn/conflicting/web/api/rtcpeerconnection/rtcpeerconnection/index.html @@ -16,7 +16,7 @@ original_slug: Web/API/RTCConfiguration <dt><code>bundlePolicy</code> {{optional_inline}}</dt> <dd>Specifies how to handle negotiation of candidates when the remote peer is not compatible with the <a href="https://webrtcstandards.info/sdp-bundle/">SDP BUNDLE standard</a>. This must be one of the values from the enum <code><a href="#RTCBundlePolicy_enum">RTCBundlePolicy</a></code>. If this value isn't included in the dictionary, <code>"balanced"</code> is assumed.</dd> <dt><code>certificates</code> {{optional_inline}}</dt> - <dd>An {{jsxref("Array")}} of objects of type {{domxref("RTCCertificate")}} which are used by the connection for authentication. If this property isn't specified, a set of certificates is generated automatically for each {{domxref("RTCPeerConnection")}} instance. Although only one certificate is used by a given connection, providing certificates for multiple algorithms may improve the odds of successfully connecting in some circumstances. See {{anch("Using certificates")}} below for additional information. + <dd>An {{jsxref("Array")}} of objects of type {{domxref("RTCCertificate")}} which are used by the connection for authentication. If this property isn't specified, a set of certificates is generated automatically for each {{domxref("RTCPeerConnection")}} instance. Although only one certificate is used by a given connection, providing certificates for multiple algorithms may improve the odds of successfully connecting in some circumstances. See <a href="Using_certificates">Using certificates</a> below for additional information. <div class="note">This configuration option cannot be changed after it is first specified; once the certificates have been set, this property is ignored in future calls to {{domxref("RTCPeerConnection.setConfiguration()")}}.</div> </dd> <dt><code>iceCandidatePoolSize</code> {{optional_inline}}</dt> diff --git a/files/zh-cn/games/publishing_games/game_distribution/index.html b/files/zh-cn/games/publishing_games/game_distribution/index.html index c643e5804a..7c195eb1b5 100644 --- a/files/zh-cn/games/publishing_games/game_distribution/index.html +++ b/files/zh-cn/games/publishing_games/game_distribution/index.html @@ -29,9 +29,9 @@ translation_of: Games/Publishing_games/Game_distribution <p> 我们感兴趣的绝大部分流量——HTML5游戏玩家——都来自移动设备，所以如果你真的想要成功，你就必须专注于这一点。手机端是HTML5真正发光发热的地方，那里没有Flash，HTML5便是全部。</p> -<p> 要与PC端游直接竞争是很困难的，当然你也可以在PC端发布你的游戏（见下文的{{anch("电脑平台")}}）你也应该这么做，因为这可以让你的游戏支持的平台变得多样化，但谨记，电脑游戏的开发者拥有多年的经验，优秀的工具和稳定的发行渠道。许多HTML5游戏会与传统电脑游戏面向不同的受众市场。例如，简单的的小游戏比大型的沉浸式游戏更有人气，这类游戏通常设计成用两根手指，甚至一根手指玩，所以你可以拿着设备玩游戏，还可以用第二只手做你目前需要的任何事情。</p> +<p> 要与PC端游直接竞争是很困难的，当然你也可以在PC端发布你的游戏（见下文的<a href="#电脑平台">电脑平台</a>）你也应该这么做，因为这可以让你的游戏支持的平台变得多样化，但谨记，电脑游戏的开发者拥有多年的经验，优秀的工具和稳定的发行渠道。许多HTML5游戏会与传统电脑游戏面向不同的受众市场。例如，简单的的小游戏比大型的沉浸式游戏更有人气，这类游戏通常设计成用两根手指，甚至一根手指玩，所以你可以拿着设备玩游戏，还可以用第二只手做你目前需要的任何事情。</p> -<p> 话又说回来，电脑平台易于发行游戏，因为有许多好用的打包软件帮助你构造游戏的架构（见下文{{anch("游戏打包")}}），为你的游戏配置适应电脑端的控制器也是很不错的做法——即使你的游戏主要面向手机用户。用户可以在任何平台畅玩你的游戏，电脑端也应该是其中之一。此外，在电脑端先构建和测试游戏通常更为便捷，然后再到手机端测试BUG</p> +<p> 话又说回来，电脑平台易于发行游戏，因为有许多好用的打包软件帮助你构造游戏的架构（见下文<a href="#游戏打包">游戏打包</a>），为你的游戏配置适应电脑端的控制器也是很不错的做法——即使你的游戏主要面向手机用户。用户可以在任何平台畅玩你的游戏，电脑端也应该是其中之一。此外，在电脑端先构建和测试游戏通常更为便捷，然后再到手机端测试BUG</p> <h2 id="发布游戏">发布游戏</h2> @@ -61,7 +61,7 @@ translation_of: Games/Publishing_games/Game_distribution <h3 id="网络和应用商店">网络和应用商店</h3> -<p>你也可以直接把游戏发布到不同的应用商店里, 或者是应用市场，要做到这一点，你必须准备好并将其打包为针对您想要针对的每个应用程序生态系统的特定构建格式. 见下文 {{anch("应用市场—多样化平台")}}来获取更多关于应用市场的细节</p> +<p>你也可以直接把游戏发布到不同的应用商店里, 或者是应用市场，要做到这一点，你必须准备好并将其打包为针对您想要针对的每个应用程序生态系统的特定构建格式. 见下文<a href="#应用市场—多样化平台">应用市场—多样化平台</a>来获取更多关于应用市场的细节</p> <h2 id="应用市场—多样化平台">应用市场—多样化平台</h2> diff --git a/files/zh-cn/learn/accessibility/multimedia/index.html b/files/zh-cn/learn/accessibility/multimedia/index.html index 4d496aabbc..eaeea9c743 100644 --- a/files/zh-cn/learn/accessibility/multimedia/index.html +++ b/files/zh-cn/learn/accessibility/multimedia/index.html @@ -328,7 +328,7 @@ This is the second. <p>对于此类内容,您需要根据案例处理辅助功能问题。在某些情况下,它不是那么糟糕,例如:</p> <ul> - <li>如果您使用 Flash 或 Silverlight 等插件技术嵌入音频内容,您可能只需以与上面在 {{anch("Transcript examples")}} 部分中所示的相同方式提供音频脚本。</li> + <li>如果您使用 Flash 或 Silverlight 等插件技术嵌入音频内容,您可能只需以与上面在<a href="#脚本示例">脚本示例</a>部分中所示的相同方式提供音频脚本。</li> <li>如果您使用 Flash 或 Silverlight 等插件技术嵌入视频内容,则可以利用这些技术可用的字幕/字幕技术。例如, 参考 <a href="http://www.adobe.com/accessibility/products/flash/captions.html">Flash captions</a>, <a href="https://support.brightcove.com/en/video-cloud/docs/using-flash-only-player-api-closed-captioning">Using the Flash-Only Player API for Closed Captioning</a>, or <a href="https://blogs.msdn.microsoft.com/anilkumargupta/2009/05/01/playing-subtitles-with-videos-in-silverlight/">Playing Subtitles with Videos in Silverlight</a>.</li> </ul> diff --git a/files/zh-cn/learn/accessibility/wai-aria_basics/index.html b/files/zh-cn/learn/accessibility/wai-aria_basics/index.html index c50974a562..406f4aa5da 100644 --- a/files/zh-cn/learn/accessibility/wai-aria_basics/index.html +++ b/files/zh-cn/learn/accessibility/wai-aria_basics/index.html @@ -189,7 +189,7 @@ translation_of: Learn/Accessibility/WAI-ARIA_basics <p>除此之外，为了让 IE8 等旧版浏览器的用户更容易访问该网站，ARIA 角色的使用就很值得了。 如果由于某种原因，你的网站仅使用<div> 构建，那么你肯定很需要用 ARIA 角色以提供所需的语义！</p> -<p>搜索表单的改进语义表明当超出HTML5中可用的语义时 ARIA 可以实现的功能。你接下来可以看到这些语义和ARIA 属性的强大功能，尤其是 {{anch("非语义控件的可访问性")}}那一段。接下来我们将明白ARIA 如何在进行动态内容更新时给我们帮助。</p> +<p>搜索表单的改进语义表明当超出HTML5中可用的语义时 ARIA 可以实现的功能。你接下来可以看到这些语义和ARIA 属性的强大功能，尤其是 <a href="#非语义控件的可访问性">非语义控件的可访问性</a>那一段。接下来我们将明白ARIA 如何在进行动态内容更新时给我们帮助。</p> <h3 id="动态内容更新">动态内容更新</h3> @@ -267,12 +267,8 @@ translation_of: Learn/Accessibility/WAI-ARIA_basics <p>当一系列嵌套的 <code><div></code>s 与CSS / JavaScript一起用于创建复杂的UI功能，或者通过JavaScript大大地增强或者更改原生的控件，不仅键盘可访问性受损。而且如果没有语义或其他线索，屏幕阅读器用户会发现很难弄清楚该功能的作用。在这种情况下，ARIA可以帮助提供那些缺失的语义。</p> - - <h4 id="表单验证和错误显示">表单验证和错误显示</h4> - - <p>首先， 让我们在此访问之前的文章（重读 <a href="/en-US/docs/Learn/Accessibility/CSS_and_JavaScript#Keeping_it_unobtrusive">Keeping it unobtrusive</a>）。 在本节的最后，我们展示了当您尝试提交表单时，如果存在验证错误，我们在错误消息框中包含了一些ARIA属性：</p> <pre class="brush: html"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>div</span> <span class="attr-name token">class</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>errors<span class="punctuation token">"</span></span> <span class="attr-name token">role</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>alert<span class="punctuation token">"</span></span> <span class="attr-name token">aria-relevant</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>all<span class="punctuation token">"</span></span><span class="punctuation token">></span></span> @@ -287,8 +283,6 @@ translation_of: Learn/Accessibility/WAI-ARIA_basics <p>我们可以在 ARIA 的应用上更进一步，并提供更多验证上的帮助。例如支出某个字段是否必填，或者是要填的年龄的区间该是多少？</p> - - <ol> <li>首先，复制刚刚的 <a href="https://github.com/mdn/learning-area/blob/master/accessibility/css/form-validation.html">form-validation.html</a> 还有 <a href="https://github.com/mdn/learning-area/blob/master/accessibility/css/validation.js">validation.js</a> 文件，然后保存到本地。</li> <li>把两个文件都用文本编辑器打开并且看看运作原理。</li> @@ -310,7 +304,7 @@ translation_of: Learn/Accessibility/WAI-ARIA_basics <p><strong>笔记</strong>： 你可以在这里看这个在线完成的例子 <a href="http://mdn.github.io/learning-area/accessibility/aria/form-validation-updated.html">form-validation-updated.html</a>.</p> </div> -<p>除了经典的 {{htmlelement("label")}} 元素之外，WAI-ARIA 还支持一些高级表单标注技术。 我们已经讨论过使用 <code><a href="https://www.w3.org/TR/wai-aria-1.1/#aria-label">aria-label</a></code> 属性来提供标签，我们不希望标签对于有视力的用户是可见的（参见上面的 {{anch("路牌/地标 （Signposts/Landmarks）")}} 部分）。 还有一些其他标签技术使用其他属性，例如 <code><a href="https://www.w3.org/TR/wai-aria-1.1/#aria-labelledby">aria-labelledby</a></code> ，如果你想将非<label>元素指定为标签或标签多个表单输入具有相同的标签，并且 <code><a href="https://www.w3.org/TR/wai-aria-1.1/#aria-describedby">aria-describedby</a></code>，如果你想关联 带有表单输入的其他信息，并将其读出。 请查阅文章获得更多细节： <a href="http://webaim.org/techniques/forms/advanced">WebAIM's Advanced Form Labeling article</a></p> +<p>除了经典的 {{htmlelement("label")}} 元素之外，WAI-ARIA 还支持一些高级表单标注技术。 我们已经讨论过使用 <code><a href="https://www.w3.org/TR/wai-aria-1.1/#aria-label">aria-label</a></code> 属性来提供标签，我们不希望标签对于有视力的用户是可见的（参见上面的 <a href="#路牌地标_（signpostslandmarks）">路牌/地标 （Signposts/Landmarks）</a> 部分）。 还有一些其他标签技术使用其他属性，例如 <code><a href="https://www.w3.org/TR/wai-aria-1.1/#aria-labelledby">aria-labelledby</a></code> ，如果你想将非<label>元素指定为标签或标签多个表单输入具有相同的标签，并且 <code><a href="https://www.w3.org/TR/wai-aria-1.1/#aria-describedby">aria-describedby</a></code>，如果你想关联 带有表单输入的其他信息，并将其读出。 请查阅文章获得更多细节： <a href="http://webaim.org/techniques/forms/advanced">WebAIM's Advanced Form Labeling article</a></p> <p>还有许多其他有用的属性和状态，用于指示表单元素的状态。 例如：<span class="subtitle"><code><a href="https://www.w3.org/TR/wai-aria-1.1/#aria-disabled">aria-disabled</a>="true" </code></span>可用于表示该表单字段已禁用。 许多浏览器只会跳过禁用的表单字段，它们甚至不会被屏幕阅读器读出，但在某些情况下它们会被识别出来，所以最好包含这个属性让屏幕阅读器知道禁用的输入事实上已经被禁用。</p> @@ -338,9 +332,7 @@ translation_of: Learn/Accessibility/WAI-ARIA_basics <h4 id="描述非语义的button_是个button">描述非语义的button 是个button</h4> -<p>在本课程中已经有几次，我们已经提到了原生的无障碍（以及使用其他元素伪造导致的无障碍问题）按钮，链接或表单元素（请参阅HTML辅助功能文章中的<a href="/en-US/docs/Learn/Accessibility/HTML#UI_controls">UI 控件</a> ，以及{{anch("优化键盘的无障碍操作")}}，上面）。 基本上，利用 tabindex 和一些JavaScript的话，大部分情况下添加键盘辅助功能不会有多少麻烦。</p> - - +<p>在本课程中已经有几次，我们已经提到了原生的无障碍（以及使用其他元素伪造导致的无障碍问题）按钮，链接或表单元素（请参阅HTML辅助功能文章中的<a href="/en-US/docs/Learn/Accessibility/HTML#UI_controls">UI 控件</a> ，以及<a href="#优化键盘的无障碍操作">优化键盘的无障碍操作</a>，上面）。 基本上，利用 tabindex 和一些JavaScript的话，大部分情况下添加键盘辅助功能不会有多少麻烦。</p> <p>但是屏幕阅读器呢？他们还是看着这个元素并不是一个button，如果你用屏幕阅读器测试我们的 <a href="http://mdn.github.io/learning-area/tools-testing/cross-browser-testing/accessibility/fake-div-buttons.html">fake-div-buttons.html</a> 例子，你会听到一段短语描述这个按钮，内容大概是 "Click me!, group"，显然这会让人疑惑。</p> diff --git a/files/zh-cn/learn/css/building_blocks/cascade_and_inheritance/index.html b/files/zh-cn/learn/css/building_blocks/cascade_and_inheritance/index.html index d3eefdefe6..dd3da5f435 100644 --- a/files/zh-cn/learn/css/building_blocks/cascade_and_inheritance/index.html +++ b/files/zh-cn/learn/css/building_blocks/cascade_and_inheritance/index.html @@ -291,7 +291,7 @@ translation_of: Learn/CSS/Building_blocks/Cascade_and_inheritance <h2 id="主动学习：玩转层叠">主动学习：玩转层叠</h2> -<p>在这种主动学习中，我们希望您尝试编写一个新的规则，它将覆盖我们默认应用于链接的颜色和背景颜色。您可以使用我们在{{anch("控制继承")}} 节中查看的一个特殊值来在一个新规则中编写一个声明，该声明将重置背景颜色为白色，而不使用实际的颜色值吗?</p> +<p>在这种主动学习中，我们希望您尝试编写一个新的规则，它将覆盖我们默认应用于链接的颜色和背景颜色。您可以使用我们在<a href="#控制继承">控制继承</a> 节中查看的一个特殊值来在一个新规则中编写一个声明，该声明将重置背景颜色为白色，而不使用实际的颜色值吗?</p> <p>如果你犯了一个错误，你总是可以用重置按钮重置它。如果你真的卡住了，看看这里的解决方案 <a href="https://github.com/mdn/css-examples/blob/master/learn/solutions.md#the-cascade">进入</a>。</p> diff --git a/files/zh-cn/learn/css/building_blocks/images_tasks/index.html b/files/zh-cn/learn/css/building_blocks/images_tasks/index.html index 228753a911..98ef5fb5b0 100644 --- a/files/zh-cn/learn/css/building_blocks/images_tasks/index.html +++ b/files/zh-cn/learn/css/building_blocks/images_tasks/index.html @@ -12,7 +12,7 @@ translation_of: Learn/CSS/Building_blocks/Images_tasks <div class="blockIndicator note"> <p><strong>注意</strong>:您可以在下面的交互式编辑器中尝试解决方案，但是下载代码并使用诸如<a href="https://codepen.io/">CodePen</a>, <a href="https://jsfiddle.net/">jsFiddle</a>, <a href="https://glitch.com/">Glitch</a> 之类的在线工具来完成任务可能会更加有所帮助。<br> <br> - 如果你遇到困难，联系我们获得帮助 — 参见页面底部的{{anch("评价以及更多帮助")}}</p> + 如果你遇到困难，联系我们获得帮助 — 参见页面底部的<a href="#评价以及更多帮助">评价以及更多帮助</a></p> </div> <h2 id="任务一">任务一</h2> diff --git a/files/zh-cn/learn/css/building_blocks/selectors/selectors_tasks/index.html b/files/zh-cn/learn/css/building_blocks/selectors/selectors_tasks/index.html index 17f2ecf366..076790e603 100644 --- a/files/zh-cn/learn/css/building_blocks/selectors/selectors_tasks/index.html +++ b/files/zh-cn/learn/css/building_blocks/selectors/selectors_tasks/index.html @@ -10,7 +10,7 @@ translation_of: Learn/CSS/Building_blocks/Selectors/Selectors_Tasks <div class="blockIndicator note"> <p><strong>Note</strong>:你可以 在下面那些交换编辑器中尝试解决问题，然而 把代码下载然后使用一个在线工具比如 <a href="https://codepen.io/">CodePen</a>, <a href="https://jsfiddle.net/">jsFiddle</a>, or <a href="https://glitch.com/">Glitch</a> 去解决这些问题可能对你更有作用。</p> -<p>如果你卡住了，可以向我们寻求帮助 — 请参阅本页底部的{{anch("Assessment or further help")}} 部分。</p> +<p>如果你卡住了，可以向我们寻求帮助 — 请参阅本页底部的<a href="#assessment_or_further_help">Assessment or further help</a> 部分。</p> </div> <h2 id="选择器一">选择器一</h2> diff --git a/files/zh-cn/learn/css/building_blocks/tables_tasks/index.html b/files/zh-cn/learn/css/building_blocks/tables_tasks/index.html index 561d8cc56a..ce6cb3ff0c 100644 --- a/files/zh-cn/learn/css/building_blocks/tables_tasks/index.html +++ b/files/zh-cn/learn/css/building_blocks/tables_tasks/index.html @@ -16,7 +16,7 @@ translation_of: Learn/CSS/Building_blocks/Tables_tasks <div class="blockIndicator note"> <p><strong>Note</strong>: You can try out solutions in the interactive editors below, however it may be helpful to download the code and use an online tool such as <a href="https://codepen.io/">CodePen</a>, <a href="https://jsfiddle.net/">jsFiddle</a>, or <a href="https://glitch.com/">Glitch</a> to work on the tasks.<br> <br> - If you get stuck, then ask us for help — see the {{anch("Assessment or further help")}} section at the bottom of this page.</p> + If you get stuck, then ask us for help — see the <a href="#assessment_or_further_help">Assessment or further help</a> section at the bottom of this page.</p> </div> <h2 id="任务">任务</h2> diff --git a/files/zh-cn/learn/css/css_layout/grid_skills/index.html b/files/zh-cn/learn/css/css_layout/grid_skills/index.html index 3d9115b38b..81b74a4286 100644 --- a/files/zh-cn/learn/css/css_layout/grid_skills/index.html +++ b/files/zh-cn/learn/css/css_layout/grid_skills/index.html @@ -12,7 +12,7 @@ translation_of: Learn/CSS/CSS_layout/Grid_skills <div class="blockIndicator note"> <p><strong>提示</strong>: 您可以在下面的交互式编辑器中试用解决方案，不过，下载代码并使用在线工具(如CodePen、jsFiddle或Glitch)处理这些任务可能会更有帮助。<br> <br> - 如果您遇到困难，请向我们寻求帮助 — 参阅本页底部的 {{anch("评估或进一步帮助")}} 部分。</p> + 如果您遇到困难，请向我们寻求帮助 — 参阅本页底部的 <a href="#assessment_or_further_help">评估或进一步帮助</a> 部分。</p> </div> <h2 id="网格布局（一）">网格布局（一）</h2> diff --git a/files/zh-cn/learn/css/css_layout/position_skills/index.html b/files/zh-cn/learn/css/css_layout/position_skills/index.html index 21d1224daa..840ee26cb2 100644 --- a/files/zh-cn/learn/css/css_layout/position_skills/index.html +++ b/files/zh-cn/learn/css/css_layout/position_skills/index.html @@ -18,7 +18,7 @@ translation_of: Learn/CSS/CSS_layout/Position_skills <div class="blockIndicator note"> <p><strong>小贴士</strong>: 您可以在下面的交互式编辑器中尝试解决方案，下载代码并使用在线工具（如CodePen、jsFiddle或Glitch）处理任务可能会有帮助。</p> -<p>如果您遇到困难，请向我们寻求帮助-请参阅本页底部的 {{anch("Assessment or further help")}} 部分</p> +<p>如果您遇到困难，请向我们寻求帮助-请参阅本页底部的 <a href="#assessment_or_further_help">Assessment or further help</a> 部分</p> </div> <h2 id="定位练习一">定位练习一</h2> diff --git a/files/zh-cn/learn/css/styling_text/fundamentals/index.html b/files/zh-cn/learn/css/styling_text/fundamentals/index.html index b615de8b66..cb6524b888 100644 --- a/files/zh-cn/learn/css/styling_text/fundamentals/index.html +++ b/files/zh-cn/learn/css/styling_text/fundamentals/index.html @@ -94,7 +94,7 @@ occasion such as this that he did.</p></pre> <h3 id="字体种类">字体种类</h3> -<p>要在你的文本上设置一个不同的字体，你可以使用 {{cssxref("font-family")}} 属性，这个允许你为浏览器指定一个字体 (或者一个字体的列表)，然后浏览器可以将这种字体应用到选中的元素上。浏览器只会把在当前机器上可用的字体应用到当前正在访问的网站上；如果字体不可用，那么就会用浏览器默认的字体代替 {{anch("Default fonts", "default font")}}. 下面是一个简单的例子:</p> +<p>要在你的文本上设置一个不同的字体，你可以使用 {{cssxref("font-family")}} 属性，这个允许你为浏览器指定一个字体 (或者一个字体的列表)，然后浏览器可以将这种字体应用到选中的元素上。浏览器只会把在当前机器上可用的字体应用到当前正在访问的网站上；如果字体不可用，那么就会用浏览器默认的字体代替 <a href="#默认字体">default font</a>. 下面是一个简单的例子:</p> <pre class="brush: css">p { font-family: arial; diff --git a/files/zh-cn/learn/css/styling_text/web_fonts/index.html b/files/zh-cn/learn/css/styling_text/web_fonts/index.html index 45b3bef610..32f2205f7f 100644 --- a/files/zh-cn/learn/css/styling_text/web_fonts/index.html +++ b/files/zh-cn/learn/css/styling_text/web_fonts/index.html @@ -78,7 +78,7 @@ original_slug: Learn/CSS/为文本添加样式/Web_字体 <ul> <li>免费的字体经销商：这是一个可以下载免费字体的网站(可能还有一些许可条件，比如对字体创建者的信赖)。比如： <a href="https://www.fontsquirrel.com/">Font Squirre</a>，<a href="http://www.dafont.com/">dafont</a> 和 <a href="https://everythingfonts.com/">Everything Fonts</a>。</li> <li>收费的字体经销商：这是一个收费则字体可用的网站，例如<a href="http://www.fonts.com/">fonts.com</a>或<a href="http://www.myfonts.com/">myfonts.com</a>。您也可以直接从字体铸造厂中购买字体，例如<a href="https://www.linotype.com/">Linotype</a>，<a href="http://www.monotype.com">Monotype</a> 或 <a href="http://www.exljbris.com/">Exljbris</a>。</li> - <li>在线字体服务：这是一个存储和为你提供字体的网站，它使整个过程更容易。更多细节见{{anch("Using an online font service")}}。</li> + <li>在线字体服务：这是一个存储和为你提供字体的网站，它使整个过程更容易。更多细节见<a href="#使用在线字体服务">使用在线字体服务</a>。</li> </ul> <p>让我们找到一些字体！前往<a href="https://www.fontsquirrel.com/">Font Squirrel</a> 并选择两种字体——一种用于标题的有趣的字体(可能是一种不错的显示字体或无衬线字体)，和一种用于段落，稍微不那么华丽，更易于阅读的字体。当您找到每种字体时，按下下载按钮，并将该文件保存在与您先前保存的HTML和CSS文件相同的目录中。无论它们是TTF(True Type Fonts))还是OTF(Open Type字体)都不重要。</p> diff --git a/files/zh-cn/learn/forms/sending_and_retrieving_form_data/index.html b/files/zh-cn/learn/forms/sending_and_retrieving_form_data/index.html index 57c4db7201..336c0d1f6e 100644 --- a/files/zh-cn/learn/forms/sending_and_retrieving_form_data/index.html +++ b/files/zh-cn/learn/forms/sending_and_retrieving_form_data/index.html @@ -226,7 +226,7 @@ if __name__ == "__main__": <p>以上代码中引用的两个模板如下：</p> <ul> - <li><a href="https://github.com/mdn/learning-area/blob/master/html/forms/sending-form-data/templates/form.html">form.html</a>: 与我们在{{anch("The POST method")}}小节中看到的相同的表单，但是将<code>action</code>设置为<code>\{{ url_for('hello') }}</code>。(这是一个<a href="http://jinja.pocoo.org/docs/2.9/">Jinja2</a>模板，它基本上是HTML，但是可以包含对运行包含在花括号中的web服务器的Python代码的调用。<code>url_for('hello')</code>基本上是在“提交表单时重定向到<code>/hello</code>”。</li> + <li><a href="https://github.com/mdn/learning-area/blob/master/html/forms/sending-form-data/templates/form.html">form.html</a>: 与我们在 <a href="#post_方法">POST 方法</a> 小节中看到的相同的表单，但是将<code>action</code>设置为<code>\{{ url_for('hello') }}</code>。(这是一个<a href="http://jinja.pocoo.org/docs/2.9/">Jinja2</a>模板，它基本上是HTML，但是可以包含对运行包含在花括号中的web服务器的Python代码的调用。<code>url_for('hello')</code>基本上是在“提交表单时重定向到<code>/hello</code>”。</li> <li><a href="https://github.com/mdn/learning-area/blob/master/html/forms/sending-form-data/templates/greeting.html">greeting.html</a>: 这个模板只包含一行，用于呈现渲染时传递给它的两个数据块。<br> 这是通过前面所见的<code>hello()</code>函数完成的，该函数在<code>/hello</code>URL被导向时运行。</li> </ul> diff --git a/files/zh-cn/learn/html/introduction_to_html/creating_hyperlinks/index.html b/files/zh-cn/learn/html/introduction_to_html/creating_hyperlinks/index.html index 5f982fc095..3e52dbe21a 100644 --- a/files/zh-cn/learn/html/introduction_to_html/creating_hyperlinks/index.html +++ b/files/zh-cn/learn/html/introduction_to_html/creating_hyperlinks/index.html @@ -40,7 +40,7 @@ translation_of: Learn/HTML/Introduction_to_HTML/Creating_hyperlinks <h2 id="链接的解析"><span class="short_text" id="result_box" lang="zh-CN"><span>链接的解析</span></span></h2> -<p><span id="result_box" lang="zh-CN"><span>通过将文本（或其他内容，见{{anch("块级链接")}})转换为{{htmlelement("a")}}元素内的链接来创建基本链接，</span> <span>给它一个{{htmlattrxref("href", "a")}}属性（也称为目标），它将包含您希望链接指向的网址。</span></span></p> +<p><span id="result_box" lang="zh-CN"><span>通过将文本（或其他内容，见<a href="#块级链接">块级链接</a>)转换为{{htmlelement("a")}}元素内的链接来创建基本链接，</span> <span>给它一个{{htmlattrxref("href", "a")}}属性（也称为目标），它将包含您希望链接指向的网址。</span></span></p> <pre class="brush: html notranslate"><p>我创建了一个指向 <a href="https://www.mozilla.org/zh-CN/">Mozilla 主页</a> diff --git a/files/zh-cn/learn/html/multimedia_and_embedding/images_in_html/index.html b/files/zh-cn/learn/html/multimedia_and_embedding/images_in_html/index.html index 78b73be90b..3ec7f1e719 100644 --- a/files/zh-cn/learn/html/multimedia_and_embedding/images_in_html/index.html +++ b/files/zh-cn/learn/html/multimedia_and_embedding/images_in_html/index.html @@ -99,7 +99,7 @@ translation_of: Learn/HTML/Multimedia_and_embedding/Images_in_HTML <p>你到底应该在 <code>alt</code> 里写点什么呢？这首先取决于为什么这张图片会在这儿，换句话说，如果这张图片没显示出来，会少了什么：</p> <ul> - <li><strong>装饰：</strong>如果图片只是用于装饰，而不是内容的一部分，可以写一个空的<code>alt=""</code> 。例如，屏幕阅读器不会浪费时间对用户读出不是核心需要的内容。实际上装饰性图片就不应该放在HTML文件里， {{anch("CSS background images")}}才应该用于插入装饰图片，但如果这种情况无法避免， <code>alt=""</code>会是最佳处理方案。</li> + <li><strong>装饰：</strong>如果图片只是用于装饰，而不是内容的一部分，可以写一个空的<code>alt=""</code> 。例如，屏幕阅读器不会浪费时间对用户读出不是核心需要的内容。实际上装饰性图片就不应该放在HTML文件里， <a href="#css_背景图片">CSS 背景图片</a>才应该用于插入装饰图片，但如果这种情况无法避免， <code>alt=""</code>会是最佳处理方案。</li> <li><strong>内容：</strong>如果你的图片提供了重要的信息，就要在<code>alt</code>文本中简要的提供相同的信息，甚至更近一步，把这些信息写在主要的文本内容里，这样所有人都能看见。不要写冗余的备选文本（如果在主要文本中将所有的段落都重复两遍，对于没有失明的用户来说多烦啊！），如果在主要文本中已经对图片进行了充分的描述，写<code>alt=""</code>就好。</li> <li><strong>链接：</strong>如果你把图片嵌套在{{htmlelement("a")}}标签里，来把图片变成链接，那你还必须<a href="/zh-CN/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks#用清晰的链接措辞。">提供无障碍的链接文本</a>。在这种情况下，你可以写在同一个<font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);"><a></span></font>元素里，或者写在图片的<code>alt</code>属性里，随你喜欢。</li> <li><strong>文本：</strong>你不应该将文本放到图像里。例如，如果你的主标题需要有阴影，你可以<a href="/zh-CN/docs/Web/CSS/text-shadow">用CSS</a>来达到这个目的，而不是把文本放到图片里。如果真的必须这么做，那就把文本也放到<code>alt</code>里。</li> diff --git a/files/zh-cn/learn/html/multimedia_and_embedding/other_embedding_technologies/index.html b/files/zh-cn/learn/html/multimedia_and_embedding/other_embedding_technologies/index.html index a7dc99e0fc..6af4006667 100644 --- a/files/zh-cn/learn/html/multimedia_and_embedding/other_embedding_technologies/index.html +++ b/files/zh-cn/learn/html/multimedia_and_embedding/other_embedding_technologies/index.html @@ -68,7 +68,7 @@ original_slug: Learn/HTML/Multimedia_and_embedding/其他嵌入技术 <p><font><font>是不是很简单又有趣呢？</font></font><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe" title="HTML <iframe>元素表示嵌套的浏览上下文，有效地将另一个HTML页面嵌入到当前页面中。 在HTML 4.01中，文档可能包含一个头部和一个主体或头部和框架集，但不包括主体和框架集。 但是，一个<iframe>可以在普通文档正文中使用。 每个浏览上下文都有自己的会话历史和活动文档。 包含嵌入内容的浏览上下文称为父浏览上下文。 顶级浏览上下文（没有父级）通常是浏览器窗口。"><code><iframe></code></a><font><font>元素旨在允许您将其他Web文档嵌入到当前文档中。</font><font>这很适合将第三方内容嵌入您的网站，您可能无法直接控制，也不希望实现自己的版本 - 例如来自在线视频提供商的视频，</font></font><a href="https://disqus.com/"><font><font>Disqus</font></font></a><font><font>等评论系统</font><font>，在线地图提供商，广告横幅等。您通过本课程使用的实时可编辑示例就是使用</font></font><code><iframe></code><font><font> </font><font>实现的</font><font>。</font></font></p> -<p><font><font>我</font></font><font><font>们会在后面提到，关于</font></font><code><iframe></code><font><font>有一些严重的</font></font>{{anch("安全隐患")}}<font><font>需要考虑</font></font><font><font>，但这并不意味着你不应该在你的网站上使用它们 — 它只需要一些知识和仔细地思考。让我们更详细地探索这些代码。假设您想在其中一个网页上加入MDN词汇表，您可以尝试以下方式：</font></font></p> +<p><font><font>我</font></font><font><font>们会在后面提到，关于</font></font><code><iframe></code><font><font>有一些严重的</font></font><a href="#安全隐患">安全隐患</a><font><font>需要考虑</font></font><font><font>，但这并不意味着你不应该在你的网站上使用它们 — 它只需要一些知识和仔细地思考。让我们更详细地探索这些代码。假设您想在其中一个网页上加入MDN词汇表，您可以尝试以下方式：</font></font></p> <pre class="notranslate"><iframe src="https://developer.mozilla.org/en-US/docs/Glossary" width="100%" height="500" frameborder="0" diff --git a/files/zh-cn/learn/html/multimedia_and_embedding/video_and_audio_content/test_your_skills_colon__multimedia_and_embedding/index.html b/files/zh-cn/learn/html/multimedia_and_embedding/video_and_audio_content/test_your_skills_colon__multimedia_and_embedding/index.html index ace192f4d3..fb0952921d 100644 --- a/files/zh-cn/learn/html/multimedia_and_embedding/video_and_audio_content/test_your_skills_colon__multimedia_and_embedding/index.html +++ b/files/zh-cn/learn/html/multimedia_and_embedding/video_and_audio_content/test_your_skills_colon__multimedia_and_embedding/index.html @@ -12,7 +12,7 @@ translation_of: >- <div class="blockIndicator note"> <p><strong>Note</strong>: You can try out solutions in the interactive editors below, however it may be helpful to download the code and use an online tool such as <a href="https://codepen.io/">CodePen</a>, <a href="https://jsfiddle.net/">jsFiddle</a>, or <a href="https://glitch.com/">Glitch</a> to work on the tasks.<br> <br> - If you get stuck, then ask us for help — see the {{anch("Assessment or further help")}} section at the bottom of this page.</p> + If you get stuck, then ask us for help — see the <a href="#assessment_or_further_help">Assessment or further help</a> section at the bottom of this page.</p> </div> <h2 id="Multimedia_and_embedding_1">Multimedia and embedding 1</h2> diff --git a/files/zh-cn/learn/javascript/client-side_web_apis/client-side_storage/index.html b/files/zh-cn/learn/javascript/client-side_web_apis/client-side_storage/index.html index 433cf4c640..af60b34ead 100644 --- a/files/zh-cn/learn/javascript/client-side_web_apis/client-side_storage/index.html +++ b/files/zh-cn/learn/javascript/client-side_web_apis/client-side_storage/index.html @@ -78,7 +78,7 @@ translation_of: Learn/JavaScript/Client-side_web_APIs/Client-side_storage <h3 id="未来：Cache_API">未来：Cache API</h3> <p>一些现代浏览器支持新的 {{domxref("Cache")}} API。这个API是为存储特定HTTP请求的响应文件而设计的，它对于像存储离线网站文件这样的事情非常有用，这样网站就可以在没有网络连接的情况下使用。缓存通常与 <a href="/en-US/docs/Web/API/Service_Worker_API">Service Worker API</a> 组合使用，尽管不一定非要这么做。<br> - Cache 和 Service Workers 的使用是一个高级主题，我们不会在本文中详细讨论它，尽管我们将在下面的 {{anch("离线文件存储")}} 一节中展示一个简单的例子。</p> + Cache 和 Service Workers 的使用是一个高级主题，我们不会在本文中详细讨论它，尽管我们将在下面的 <a href="#离线文件存储">离线文件存储</a> 一节中展示一个简单的例子。</p> <h2 id="存储简单数据_—_web_storage">存储简单数据 — web storage</h2> diff --git a/files/zh-cn/learn/javascript/client-side_web_apis/fetching_data/index.html b/files/zh-cn/learn/javascript/client-side_web_apis/fetching_data/index.html index 16cf5f4dfd..d6c4a21bd1 100644 --- a/files/zh-cn/learn/javascript/client-side_web_apis/fetching_data/index.html +++ b/files/zh-cn/learn/javascript/client-side_web_apis/fetching_data/index.html @@ -309,7 +309,7 @@ myFetch.then(function(response) { <ol> <li>制作示例文件的本地副本(下载并解压<a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/fetching-data/can-store/can-store.zip?raw=true">the can-store ZIP file</a>)</li> - <li>通过web服务器运行代码(如上所述，在 {{anch("Serving your example from a server")}})</li> + <li>通过web服务器运行代码(如上所述，在 <a href="#在server端运行例子">在server端运行例子</a>)</li> <li>修改要获取的文件的路径，比如“produc.json'(确保你拼写的是错误的)</li> <li>现在在你的浏览器上加载索引文件 (通过 <code>localhost:8000</code>) 然后查看你的开发者控制台。 你将看到一条类似于“网络请求products.json失败，404：找不到文件”的消息</li> </ol> diff --git a/files/zh-cn/learn/javascript/client-side_web_apis/introduction/index.html b/files/zh-cn/learn/javascript/client-side_web_apis/introduction/index.html index 9d35d65f08..bc86529abb 100644 --- a/files/zh-cn/learn/javascript/client-side_web_apis/introduction/index.html +++ b/files/zh-cn/learn/javascript/client-side_web_apis/introduction/index.html @@ -143,7 +143,7 @@ translation_of: Learn/JavaScript/Client-side_web_APIs/Introduction });</pre> <div class="note"> -<p><strong>Note</strong>: 当您第一次加载上述实例，应当出现一个对话框询问您是否乐意对此应用共享位置信息（参见 {{anch("They have additional security mechanisms where appropriate")}} 这一稍后将会提到的部分）。 您需要同意这项询问以将您的位置于地图上绘制。如果您始终无法看见地图，您可能需要手动修改许可项。修改许可项的方法取决于您使用何种浏览器，对于Firefox浏览器来说，在页面信息 > 权限 中修改位置权限，在Chrome浏览器中则进入 设置 > 隐私 > 显示高级设置 > 内容设置，其后修改位置设定。</p> +<p><strong>Note</strong>: 当您第一次加载上述实例，应当出现一个对话框询问您是否乐意对此应用共享位置信息（参见 <a href="#它们在适当的地方有额外的安全机制">它们在适当的地方有额外的安全机制</a> 这一稍后将会提到的部分）。 您需要同意这项询问以将您的位置于地图上绘制。如果您始终无法看见地图，您可能需要手动修改许可项。修改许可项的方法取决于您使用何种浏览器，对于Firefox浏览器来说，在页面信息 > 权限 中修改位置权限，在Chrome浏览器中则进入 设置 > 隐私 > 显示高级设置 > 内容设置，其后修改位置设定。</p> </div> <p>我们首先要使用 {{domxref("Geolocation.getCurrentPosition()")}} <font>方法返回设备的当前位置。</font><font>浏览器的 </font>{{domxref("Geolocation")}} 对象通过调用 {{domxref("Navigator.geolocation")}} <font>属性</font><font>来访问.</font></p> diff --git a/files/zh-cn/learn/javascript/first_steps/a_first_splash/index.html b/files/zh-cn/learn/javascript/first_steps/a_first_splash/index.html index d54ec0c4ed..59a77ee055 100644 --- a/files/zh-cn/learn/javascript/first_steps/a_first_splash/index.html +++ b/files/zh-cn/learn/javascript/first_steps/a_first_splash/index.html @@ -485,7 +485,7 @@ greeting;</pre> <pre class="brush: js">name = name + ' says hello!';</pre> -<p><span class="short_text" id="result_box" lang="zh-CN">在执行真/假比较时（例如在条件语句中，见 </span>{{anch("Conditionals", "下表")}}<span class="short_text" lang="zh-CN">），我们使用 <a href="zh-CN/docs/Web/JavaScript/Reference/Operators/Comparison_Operators">比较运算符</a>，例如：</span></p> +<p>在执行真/假比较时（例如在条件语句中，见<a href="#条件语句（conditional）">下表</a><span class="short_text" lang="zh-CN">），我们使用 <a href="zh-CN/docs/Web/JavaScript/Reference/Operators/Comparison_Operators">比较运算符</a>，例如：</span></p> <table class="standard-table"> <thead> diff --git a/files/zh-cn/learn/javascript/first_steps/arrays/index.html b/files/zh-cn/learn/javascript/first_steps/arrays/index.html index e3cc48d6d5..1cd6f7d01f 100644 --- a/files/zh-cn/learn/javascript/first_steps/arrays/index.html +++ b/files/zh-cn/learn/javascript/first_steps/arrays/index.html @@ -305,7 +305,7 @@ removedItem;</pre> <ol> <li>在 <code>// number 1</code> 注释下面是一些字符串，每个字符串包含一个产品名称和一个冒号分隔的价格。 我们希望您将其转换为一个数组，并将其存储在名为 <code>products</code> 的数组中。</li> <li>与 <code>// number 2</code> 注释同一行的是 for 循环的开头。 在这行中，我们目前有 <code>i <= 0</code>，这是一个条件测试，导致 <a href="/zh-CN/docs/Learn/JavaScript/First_steps/A_first_splash#循环（Loop）">for循环</a> 立即停止，因为它说“当 <code>i</code> 不再小于或等于0”时停止，而 <code>i</code> 从0开始。 我们希望您使用条件测试来替换它，当 <code>i</code> 不再小于 <code>products</code> 数组的长度时，该条件测试会停止循环。</li> - <li>就在 <code>// number 3</code> 注释的下方，我们希望您编写一行代码，将当前数组项目（名称：价格）分成两个独立的项目，一个只包含该名称，一个只包含该价格。 如果您不确定如何执行此操作，请参阅<a href="/zh-CN/docs/Learn/JavaScript/First_steps/Useful_string_methods">有用的字符串方法</a>文章以获得一些帮助，甚至更好的看看本文中的{{anch("转换字符串和数组")}}部分。</li> + <li>就在 <code>// number 3</code> 注释的下方，我们希望您编写一行代码，将当前数组项目（名称：价格）分成两个独立的项目，一个只包含该名称，一个只包含该价格。 如果您不确定如何执行此操作，请参阅<a href="/zh-CN/docs/Learn/JavaScript/First_steps/Useful_string_methods">有用的字符串方法</a>文章以获得一些帮助，甚至更好的看看本文中的<a href="#字符串和数组之间的转换">字符串和数组之间的转换</a>部分。</li> <li>作为上述代码行的一部分，您还需要将价格从字符串转换为数字。 如果你不记得如何做，请查看<a href="/zh-CN/docs/Learn/JavaScript/First_steps/Strings#创建一个字符串">第一个字符串</a>文章。</li> <li>有一个名为 <code>total</code> 的变量被创建，并在代码的顶部赋值为 0。 在循环内（在 <code>// number 4</code> 注释下面），我们希望您添加一行，将当前项目价格添加到循环中的迭代变量，以便在代码结尾处将正确的总数打印到发票上。 您可能需要一个赋值运算符来执行此操作。</li> <li>我们希望您改变 <code>// number 5</code> 注释的行，以便使 <code>itemText</code> 变量等于“当前项目名称 - $ 当前项目价格”，例如“Shoes - $ 23.99”，以此将每个项目的正确信息都印在发票上。 这只是简单的字符串连接，您应该对此很熟悉。</li> diff --git a/files/zh-cn/learn/javascript/first_steps/test_your_skills_colon__variables/index.md b/files/zh-cn/learn/javascript/first_steps/test_your_skills_colon__variables/index.md index f18364793a..4141e0551d 100644 --- a/files/zh-cn/learn/javascript/first_steps/test_your_skills_colon__variables/index.md +++ b/files/zh-cn/learn/javascript/first_steps/test_your_skills_colon__variables/index.md @@ -15,7 +15,7 @@ tags: > **备注：** 可在下文的互动编辑器中尝试完成评估，也可借助 [CodePen](https://codepen.io/)、[jsFiddle](https://jsfiddle.net/)、[Glitch](https://glitch.com/) 等在线编程实用工具完成任务。 > -> 可访问本页最后一节来 {{anch("了解更多")}}。 +> 可访问本页最后一节来 [了解更多](#了解更多)。 > **备注：** 以下示例中，如果代码存在错误，将在互动编译器的输出框中显示提示信息来帮助你完成，（如果使用下载版本，则在浏览器的 JavaScript 控制台显示） diff --git a/files/zh-cn/learn/javascript/objects/test_your_skills_colon__object-oriented_javascript/index.html b/files/zh-cn/learn/javascript/objects/test_your_skills_colon__object-oriented_javascript/index.html index 855ea8f0ca..5e265fbbed 100644 --- a/files/zh-cn/learn/javascript/objects/test_your_skills_colon__object-oriented_javascript/index.html +++ b/files/zh-cn/learn/javascript/objects/test_your_skills_colon__object-oriented_javascript/index.html @@ -20,7 +20,7 @@ original_slug: Learn/JavaScript/Objects/测试你的技能:面向对象的Javasc <div class="blockIndicator note"> <p><strong>注意</strong>: 你可以尝试在下方的交互编辑器，但是若你下载源码或是使用在线工具例如 <a href="https://codepen.io/">CodePen</a>, <a href="https://jsfiddle.net/">jsFiddle</a>, 或 <a href="https://glitch.com/">Glitch</a> 来进行这些项目的话，会更有帮助。</p> -<p>如果你在过程中想不出解决方案，你可以向我们寻求帮助——查看在本页的底部章节 {{anch("Assessment or further help")}}。</p> +<p>如果你在过程中想不出解决方案，你可以向我们寻求帮助——查看在本页的底部章节 <a href="#assessment_or_further_help">Assessment or further help</a>。</p> </div> <div class="blockIndicator note"> diff --git a/files/zh-cn/learn/tools_and_testing/cross_browser_testing/accessibility/index.html b/files/zh-cn/learn/tools_and_testing/cross_browser_testing/accessibility/index.html index c5c4a799d2..6cab52fe49 100644 --- a/files/zh-cn/learn/tools_and_testing/cross_browser_testing/accessibility/index.html +++ b/files/zh-cn/learn/tools_and_testing/cross_browser_testing/accessibility/index.html @@ -180,7 +180,7 @@ a:focus, input:focus, button:focus, select:focus { <p><strong>Note</strong>: 更多信息请阅读<a href="https://developer.mozilla.org/zh-CN/docs/learn/Accessibility/HTML:%E4%B8%BA%E5%8F%AF%E8%AE%BF%E9%97%AE%E6%80%A7%E6%8F%90%E4%BE%9B%E4%B8%80%E4%B8%AA%E8%89%AF%E5%A5%BD%E7%9A%84%E5%9F%BA%E7%A1%80#%E6%96%87%E6%9C%AC%E6%9B%BF%E4%BB%A3%E5%93%81">Text alternatives</a></p> </div> -<p>可以通过多种方法来测试缺少的替代文本，例如，使用可访问性{{anch("审计工具")}}。</p> +<p>可以通过多种方法来测试缺少的替代文本，例如，使用可访问性<a href="#审计工具">审计工具</a>。</p> <p>对于视频和音频内容，Alt文本稍微复杂一些。有一种方法可以定义文本轨道（例如，字幕）并在播放视频时以{{htmlelement("track")}}元素和<a href="/zh-CN/docs/Web/API/WebVTT_API">WebVTT</a>格式的形式显示它们（请参见<a href="/zh-CN/docs/Web/Guide/Audio_and_video_delivery/Adding_captions_and_subtitles_to_HTML5_video">Adding captions and subtitles to HTML5 video</a>以获取详细信息）。这些功能的<a href="/zh-CN/docs/Web/Guide/Audio_and_video_delivery/Adding_captions_and_subtitles_to_HTML5_video#%E6%B5%8F%E8%A7%88%E5%99%A8%E5%85%BC%E5%AE%B9">浏览器兼容性</a>相当好，但是如果你想提供音频的替代文本或支持较旧的浏览器，则在页面某处或单独页面上显示一个简单的文本记录可能是个好主意。</p> @@ -451,7 +451,7 @@ a:focus, input:focus, button:focus, select:focus { </tbody> </table> -<p>看起来很多，但当你用起来时还好，因为VO通常会给你提醒，在哪里应该用哪个快捷键。现在试试运行VO，在{{anch("屏幕阅读器测试")}}屏幕阅读器测试章节做个测试吧。</p> +<p>看起来很多，但当你用起来时还好，因为VO通常会给你提醒，在哪里应该用哪个快捷键。现在试试运行VO，在<a href="#屏幕阅读器测试">屏幕阅读器测试</a>屏幕阅读器测试章节做个测试吧。</p> <h4 id="NVDA">NVDA</h4> diff --git a/files/zh-cn/learn/tools_and_testing/cross_browser_testing/automated_testing/index.html b/files/zh-cn/learn/tools_and_testing/cross_browser_testing/automated_testing/index.html index 76dbbef3b8..36f5a2d90b 100644 --- a/files/zh-cn/learn/tools_and_testing/cross_browser_testing/automated_testing/index.html +++ b/files/zh-cn/learn/tools_and_testing/cross_browser_testing/automated_testing/index.html @@ -325,7 +325,7 @@ var csslint = require('gulp-csslint');</pre> <p>Let's have a brief look at how we'd access the API using Node.js and <a href="https://github.com/danjenkins/node-saucelabs">node-saucelabs</a>.</p> <ol> - <li>First, set up a new npm project to test this out, as detailed in {{anch("Setting up Node and npm")}}. Use a different directory name than before, like <code>sauce-test</code> for example.</li> + <li>First, set up a new npm project to test this out, as detailed in <a href="#setting_up_node_and_npm">Setting up Node and npm</a>. Use a different directory name than before, like <code>sauce-test</code> for example.</li> <li>Install the Node Sauce Labs wrapper using the following command: <pre>npm install saucelabs</pre> </li> @@ -440,7 +440,7 @@ myAccount.getAccountDetails(function (err, res) { <p>Let's have a brief look at how we'd access the API using Node.js.</p> <ol> - <li>First, set up a new npm project to test this out, as detailed in {{anch("Setting up Node and npm")}}. Use a different directory name than before, like <code>bstack-test</code> for example.</li> + <li>First, set up a new npm project to test this out, as detailed in <a href="#setting_up_node_and_npm">Setting up Node and npm</a>. Use a different directory name than before, like <code>bstack-test</code> for example.</li> <li>Create a new file inside your project root called <code>call_bstack.js</code>. give it the following contents: <pre class="brush: js">var request = require("request"); diff --git a/files/zh-cn/learn/tools_and_testing/cross_browser_testing/javascript/index.html b/files/zh-cn/learn/tools_and_testing/cross_browser_testing/javascript/index.html index 68c0b88842..d0a1bf5b5d 100644 --- a/files/zh-cn/learn/tools_and_testing/cross_browser_testing/javascript/index.html +++ b/files/zh-cn/learn/tools_and_testing/cross_browser_testing/javascript/index.html @@ -277,7 +277,7 @@ showHeroes(superHeroes);</pre> <p>You could also write such a test for a CSS feature, for example by testing for the existence of <em><a href="/en-US/docs/Web/API/HTMLElement/style">element.style.property</a></em> (e.g. <code>paragraph.style.transform !== undefined</code>). But for both CSS and JavaScript, it is probably better to use an established feature detection library rather than writing your own all the time. Modernizr is the industry standard for feature detection tests.</p> -<p>As a last point, don't confuse feature detection with <strong>browser sniffing</strong> (detecting what specific browser is accessing the site) — this is a terrible practice that should be discouraged at all costs. See {{anch("Using bad browser sniffing code")}}, later on, for more details.</p> +<p>As a last point, don't confuse feature detection with <strong>browser sniffing</strong> (detecting what specific browser is accessing the site) — this is a terrible practice that should be discouraged at all costs. See <a href="#using_bad_browser_sniffing_code">Using bad browser sniffing code</a>, later on, for more details.</p> <div class="note"> <p><strong>Note</strong>: Some features are known to be undetectable — see Modernizr's list of <a href="https://github.com/Modernizr/Modernizr/wiki/Undetectables">Undetectables</a>.</p> @@ -448,7 +448,7 @@ if(ua.indexOf('Firefox') !== -1) { <p><strong>Note</strong>: You should read <a href="http://webaim.org/blog/user-agent-string-history/">History of the browser user-agent string</a> by Aaron Andersen for a useful and amusing take on this situation.</p> </div> -<p>The lesson to be learned here is — NEVER use browser sniffing. The only really use case for browser sniffing code in the modern day is if you are implementing a fix for a bug in a very specific version of a particular browser. But even then, most bugs get fixed pretty quickly in browser vendor rapid release cycles. It won't come up very often. {{anch("Feature detection")}} is almost always a better option — if you detect whether a feature is supported, you won't need to change your code when new browser versions come out, and the tests are much more reliable.</p> +<p>The lesson to be learned here is — NEVER use browser sniffing. The only really use case for browser sniffing code in the modern day is if you are implementing a fix for a bug in a very specific version of a particular browser. But even then, most bugs get fixed pretty quickly in browser vendor rapid release cycles. It won't come up very often. <a href="#feature_detection">Feature detection</a> is almost always a better option — if you detect whether a feature is supported, you won't need to change your code when new browser versions come out, and the tests are much more reliable.</p> <p>If you come across browser sniffing when joining an existing project, look at whether it can be replaced with something more sensible. Browser sniffing causes all kind of interesting bugs, like {{bug(1308462)}}.</p> diff --git a/files/zh-cn/learn/tools_and_testing/cross_browser_testing/testing_strategies/index.html b/files/zh-cn/learn/tools_and_testing/cross_browser_testing/testing_strategies/index.html index 98545199d4..e96b7cd7ae 100644 --- a/files/zh-cn/learn/tools_and_testing/cross_browser_testing/testing_strategies/index.html +++ b/files/zh-cn/learn/tools_and_testing/cross_browser_testing/testing_strategies/index.html @@ -60,7 +60,7 @@ original_slug: Learn/Tools_and_testing/Cross_browser_testing/测试策略 <p>例如，如果您居住在西欧或北美，您会发现许多人使用 Windows 和 Mac 的台式机或笔记本电脑，主要浏览器是 Chrome，Firefox，Safari，IE 和 Edge。您可以测试前三个浏览器最近的三个版本，因为它们会定期更新。对于Edge和IE，您应当近期的多个版本。这些浏览器都应该属于A级。</p> <div class="note"> -<p><strong>注意：</strong>您一次只能在计算机上安装一个版本的 IE 或 Edge，因此您可能必须使用虚拟机或其他方法来执行所需的测试。稍后请参阅虚拟机部分{{anch("Virtual machines")}}。</p> +<p><strong>注意：</strong>您一次只能在计算机上安装一个版本的 IE 或 Edge，因此您可能必须使用虚拟机或其他方法来执行所需的测试。稍后请参阅<a href="#虚拟机">虚拟机</a>部分。</p> </div> <p>很多人使用 iOS 和 Android，因此您可能还想测试最新版本的 iOS Safari，最近几个版本的 Android stock 浏览器，以及适用于 iOS 和 Android 的 Chrome 和 Firefox。理想情况下，您应该在手机和平板电脑上测试这些，以确保响应式设计的正常运行。</p> @@ -181,7 +181,7 @@ original_slug: Learn/Tools_and_testing/Cross_browser_testing/测试策略 <ul> <li>当您执行测试时,它们会为您提供一组要遵循的步骤。</li> - <li>在执行测试时,可以轻松地将它们转换为用户组要遵循的指令集(e.g. "try to active the button using your mouse, and then the keyboard...")–– 请参阅下面的 {{anch("User testing")}}。</li> + <li>在执行测试时,可以轻松地将它们转换为用户组要遵循的指令集(e.g. "try to active the button using your mouse, and then the keyboard...")–– 请参阅下面的 <a href="#用户测试">用户测试</a>。</li> <li>它们还可以为编写自动测试提供基础。如果您确切知道要测试的内容以及成功条件是什么(请参阅使用自动化工具自动执行浏览器测试,请稍后在系列中)编写此类测试。</li> </ul> @@ -315,7 +315,7 @@ original_slug: Learn/Tools_and_testing/Cross_browser_testing/测试策略 <p>在我们继续之前，我们将通过谈论用户测试来完成本文––如果您有一个愿意用户组来测试您的新功能，这可能是一个很好的选择。请记住，这可以像你希望的那样廉价又有效––你的用户群可以是一群朋友，一群同事，或一群无偿或有偿志愿者，这取决于你是否有钱花在测试上。</p> -<p>通常，您可以让用户在某种开发服务器上查看包含新功能的页面或视图，这样您就不会在完成之前放置最终站点或更改。你应该让他们按照一些步骤报告他们得到的结果。提供一组步骤（有时称为脚本）非常有用，这样您就可以获得与您尝试测试的内容相关的更可靠的结果。我们在上面的{{anch("What are you going to test")}} 部分中提到了这一点––很容易将其中详述的测试标准转换为要遵循的步骤。例如，以下内容适用于有视力的用户：</p> +<p>通常，您可以让用户在某种开发服务器上查看包含新功能的页面或视图，这样您就不会在完成之前放置最终站点或更改。你应该让他们按照一些步骤报告他们得到的结果。提供一组步骤（有时称为脚本）非常有用，这样您就可以获得与您尝试测试的内容相关的更可靠的结果。我们在上面的 <a href="#你想要测试什么？">你想要测试什么</a> 部分中提到了这一点––很容易将其中详述的测试标准转换为要遵循的步骤。例如，以下内容适用于有视力的用户：</p> <ul> <li>在台式计算机上使用鼠标单击问号按钮几次。刷新浏览器窗口。</li> diff --git a/files/zh-cn/mdn/contribute/howto/write_an_api_reference/index.html b/files/zh-cn/mdn/contribute/howto/write_an_api_reference/index.html index 4ef7b2bcec..c81583db61 100644 --- a/files/zh-cn/mdn/contribute/howto/write_an_api_reference/index.html +++ b/files/zh-cn/mdn/contribute/howto/write_an_api_reference/index.html @@ -75,7 +75,7 @@ translation_of: MDN/Contribute/Howto/Write_an_API_reference <p>Note that most API have a special sidebar with quicklinks. This sidebar lists all interfaces, and possibly tutorials and related API.</p> -<h4 id="Interfaces">Interfaces</h4> +<h4 id="Interface_pages">Interface pages</h4> <p>Each interface will have its own page too. It will describe the purpose of the interface and lists all constructors, methods, and properties. The title of the page will be the name of the interface (always starting with an uppercase letter), its slug, the interface name, will be at the top level of the API reference (<a href="/en-US/docs/Web/API">https://developer.mozilla.org/en-US/docs/Web/API</a>)</p> @@ -187,7 +187,7 @@ translation_of: MDN/Contribute/Howto/Write_an_API_reference </li> </ul> -<p>Each interface in the list has a separate page created for it as a subpage of https://developer.mozilla.org/en-US/docs/Web/API; for example, the document for {{domxref("AudioContext")}} would be located at https://developer.mozilla.org/en-US/docs/Web/API/AudioContext. Each {{anch("Interface pages", "interface page")}} explains what that interface does and provides a list of the methods and properties that comprise the interface. Then each method and property is documented on its own page, which is created as a subpage of the interface it's a member of. For instance, {{domxref("AudioContext.currentTime")}} is documented at https://developer.mozilla.org/en-US/docs/Web/API/AudioContext/currentTime.</p> +<p>Each interface in the list has a separate page created for it as a subpage of https://developer.mozilla.org/en-US/docs/Web/API; for example, the document for {{domxref("AudioContext")}} would be located at https://developer.mozilla.org/en-US/docs/Web/API/AudioContext. Each <a href="#interface_pages">interface page</a> explains what that interface does and provides a list of the methods and properties that comprise the interface. Then each method and property is documented on its own page, which is created as a subpage of the interface it's a member of. For instance, {{domxref("AudioContext.currentTime")}} is documented at https://developer.mozilla.org/en-US/docs/Web/API/AudioContext/currentTime.</p> <p>For example, given the list above, the {{domxref("AudioContext")}} interface is documented at https://developer.mozilla.org/en-US/docs/Web/API/AudioContext</p> @@ -199,7 +199,7 @@ translation_of: MDN/Contribute/Howto/Write_an_API_reference <li>Go to <a href="/en-US/docs/Web/API">https://developer.mozilla.org/en-US/docs/Web/API</a> and, making sure you are logged in, select the <em>Cog icon > New sub-page</em>. You should now be in an editor for a new page.</li> <li>Enter the title as the API name as defined by the spec, plus "API". So for example "Web Audio API", "IndexedDB API", or "MediaRecorder API".</li> <li>The Slug should be auto-filled, with underscores in the place of spaces. If it isn't, correct it.</li> - <li>Enter some dummy content into the large content area, such as "TBD" or "Content", then click <em>Save Changes</em>. Or just soar right on into the section {{anch("Overview page")}} and start filling out the real content right away.</li> + <li>Enter some dummy content into the large content area, such as "TBD" or "Content", then click <em>Save Changes</em>. Or just soar right on into the section <a href="#overview_page">Overview page</a> and start filling out the real content right away.</li> </ol> <p>Your landing page now exists! Now all you have to do is fill it in, which is discussed in the next section.</p> diff --git a/files/zh-cn/mdn/guidelines/writing_style_guide/index.html b/files/zh-cn/mdn/guidelines/writing_style_guide/index.html index 484017e2b4..8f43728324 100644 --- a/files/zh-cn/mdn/guidelines/writing_style_guide/index.html +++ b/files/zh-cn/mdn/guidelines/writing_style_guide/index.html @@ -703,7 +703,7 @@ var toolkitProfileService = Components.classes["@mozilla.org/toolkit/profile-ser <p>引导页的层级位于网站层级的顶层，例如 <a href="https://developer.mozilla.org/zh-CN/docs/CSS">CSS</a> 和 <a href="https://developer.mozilla.org/zh-CN/docs/HTML">HTML</a> 的主页面就是引导页。引导页具有标准的格式，由以下 3 个部分组成：</p> <ul> - <li>一个简介（一般是一段），用来介绍当前页面所讨论的技术及其如何使用。见本文的 {{anch("Creating new subtrees", "创建新的子目录")}}。</li> + <li>一个简介（一般是一段），用来介绍当前页面所讨论的技术及其如何使用。见本文的 <a href="#创建新的子目录">创建新的子目录</a>。</li> </ul> <div class="note"> @@ -711,7 +711,7 @@ var toolkitProfileService = Components.classes["@mozilla.org/toolkit/profile-ser </div> <ul> - <li>一个两列的列表，其中包含一些小节并提供一些指向其他文章的链接。见本文的 {{anch("Creating a page link list", "创建相关页面的链接列表")}}。</li> + <li>一个两列的列表，其中包含一些小节并提供一些指向其他文章的链接。见本文的 <a href="#创建相关页面的链接列表">创建相关页面的链接列表</a>。</li> <li>第三个是可选的”浏览器兼容性“一节，位于页面的底部。</li> </ul> diff --git a/files/zh-cn/mdn/structures/compatibility_tables/index.html b/files/zh-cn/mdn/structures/compatibility_tables/index.html index 21419aab38..565e6d8efa 100644 --- a/files/zh-cn/mdn/structures/compatibility_tables/index.html +++ b/files/zh-cn/mdn/structures/compatibility_tables/index.html @@ -156,7 +156,7 @@ translation_of: MDN/Structures/Compatibility_tables </ul> <div> -<p>在一个HTML、CSS和JS页面中，通常您只需要有一个特性。API则有些不同——它们总是包含多个子特性 （参见下边的 {{anch("Sub-features")}}）。</p> +<p>在一个HTML、CSS和JS页面中，通常您只需要有一个特性。API则有些不同——它们总是包含多个子特性 （参见下边的 <a href="#子特性">子特性</a>）。</p> <h3 id="一个特性中的基础结构">一个特性中的基础结构</h3> @@ -170,7 +170,7 @@ translation_of: MDN/Structures/Compatibility_tables <p>浏览器成员名称在架构里被定义（参见 <a href="https://github.com/mdn/browser-compat-data/blob/master/schemas/compat-data-schema.md#browser-identifiers">浏览器标识符</a>）。你应该使用现有定义的标识符的完整列表。如果你希望添加其他浏览器，请先联系我们，因为这可能会产生广泛的影响，不应该在未经认真考虑就这么做。</p> -<p>在一个基本的浏览器兼容数据文件中，你只需要在浏览器标识符成员仲包含"version_added" （以下我们会说到{{anch("Advanced cases")}}）。其他你可能使用的值还包括： </p> +<p>在一个基本的浏览器兼容数据文件中，你只需要在浏览器标识符成员仲包含"version_added" （以下我们会说到<a href="#添加数据：高级场景">高级场景</a>）。其他你可能使用的值还包括： </p> <ul> <li>一个版本号：如果你知道一个浏览器开始支持这个特性的准确版本，用一个字符串表述版本号，例如“47”。 </li> diff --git a/files/zh-cn/mdn/structures/macros/commonly-used_macros/index.html b/files/zh-cn/mdn/structures/macros/commonly-used_macros/index.html index a29edc2bf8..6bed575449 100644 --- a/files/zh-cn/mdn/structures/macros/commonly-used_macros/index.html +++ b/files/zh-cn/mdn/structures/macros/commonly-used_macros/index.html @@ -45,7 +45,7 @@ original_slug: MDN/Structures/Macros/Custom_macros <ul> <li><code>\{{anch("Linking to pages in references","链接到 MDN 的参考文档页面")}}</code></li> - <li><p>实际效果：{{anch("Linking to pages in references","链接到 MDN 的参考文档页面")}}</p></li> + <li><p>实际效果：<a href="#Linking_to_pages_in_references">链接到 MDN 的参考文档页面</a></p></li> </ul> <h3 id="Linking_to_pages_in_references">链接到 MDN 的参考文档页面</h3> diff --git a/files/zh-cn/mdn/structures/macros/other/index.html b/files/zh-cn/mdn/structures/macros/other/index.html index c8a8de7a85..08ec80ad62 100644 --- a/files/zh-cn/mdn/structures/macros/other/index.html +++ b/files/zh-cn/mdn/structures/macros/other/index.html @@ -16,7 +16,7 @@ tags: <ul> <li><code><a href="https://github.com/mdn/yari/tree/master/kumascript/macros/Interwiki.ejs">Interwiki</a></code> 使创建跨wiki链接变得容易。目前它支持链接到 Wikipedia 和 Wikimo。第一个参数是维基的名称（“wikipedia”或“wikimo”），第二个参数是文章的路径。例如，<code>\{{interwiki("wikipedia", "Firefox")}}</code> 显示为 {{ interwiki("wikipedia", "Firefox") }}。例如，此模板会自动检测页面语言并指向维基百科上的相同语言。</li> <li><code><a href="https://github.com/mdn/yari/tree/master/kumascript/macros/RFC.ejs">RFC</a></code> 给定编号，创建指向指定 RFC 的链接。语法为：<code>\{{RFC(number)}}</code>。例如，<code>\{{RFC(2616)}}</code> 变为 {{ RFC(2616) }}。</li> - <li><code><a href="https://github.com/mdn/yari/tree/master/kumascript/macros/anch.ejs">anch</a></code> 宏插入指向锚点的链接。 <code>\{{Anch("top")}}</code> 产生 <code><a href="#top">top</a></code> ({{ Anch("top") }})。您还可以添加包含替换文本的第二个参数以显示为链接文本。</li> + <li><code><a href="https://github.com/mdn/yari/tree/master/kumascript/macros/anch.ejs">anch</a></code> 宏插入指向锚点的链接。 <code>\{{Anch("top")}}</code> 产生 <code><a href="#top">top</a></code> (<a href="#top">top</a>)。您还可以添加包含替换文本的第二个参数以显示为链接文本。</li> </ul> <h3 id="Landing_page_components">着陆页组件</h3> diff --git a/files/zh-cn/mozilla/add-ons/webextensions/internationalization/index.html b/files/zh-cn/mozilla/add-ons/webextensions/internationalization/index.html index 501af7897a..770eefe677 100644 --- a/files/zh-cn/mozilla/add-ons/webextensions/internationalization/index.html +++ b/files/zh-cn/mozilla/add-ons/webextensions/internationalization/index.html @@ -104,7 +104,7 @@ translation_of: Mozilla/Add-ons/WebExtensions/Internationalization } }</pre> -<p>这个文件是一个标准的 JSON — 其中每个成员都是一个带有名称的对象，里面包含一个 <code>message</code>（消息）和一个 <code>description</code>（描述）。这些项目都是字符串。<code>$URL$</code> 是一个占位符，在 WebExtension 调用 <code>notificationContent</code> 成员时将被一个子字符串替换。你将在接下来的{{anch("从 JavaScript 检索消息字符串")}}章节中了解如何使用。</p> +<p>这个文件是一个标准的 JSON — 其中每个成员都是一个带有名称的对象，里面包含一个 <code>message</code>（消息）和一个 <code>description</code>（描述）。这些项目都是字符串。<code>$URL$</code> 是一个占位符，在 WebExtension 调用 <code>notificationContent</code> 成员时将被一个子字符串替换。你将在接下来的<a href="#从_javascript_检索消息字符串">从 JavaScript 检索消息字符串</a>章节中了解如何使用。</p> <div class="note"> <p><strong>注意：</strong>你可以在 <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/i18n/Locale-Specific_Message_reference">Locale-Specific Message reference</a> 里找到更多有关 <code>messages.json</code> 文件中内容的信息。</p> @@ -143,7 +143,7 @@ translation_of: Mozilla/Add-ons/WebExtensions/Internationalization <pre class="brush: json">"default_locale": "en"</pre> -<p>如果扩展没有包含浏览器当前语言区域的本地化字符串，则会使用该字段所指定的默认语言区域。任何浏览器语言区域下不可用的消息字符串都将用默认语言区域的字符串替换。有关浏览器如何选择字符串，还有一些细节需要注意 — 详见{{anch("选择本地化的字符串")}}。</p> +<p>如果扩展没有包含浏览器当前语言区域的本地化字符串，则会使用该字段所指定的默认语言区域。任何浏览器语言区域下不可用的消息字符串都将用默认语言区域的字符串替换。有关浏览器如何选择字符串，还有一些细节需要注意 — 详见<a href="#选择本地化的字符串">选择本地化的字符串</a>。</p> <h2 id="依赖语言区域的_CSS">依赖语言区域的 CSS</h2> @@ -153,7 +153,7 @@ translation_of: Mozilla/Add-ons/WebExtensions/Internationalization background-image: url(../images/__MSG_extensionName__/header.png); }</pre> -<p>这很有用，不过在这种情况下使用{{anch("预定义消息")}}来处理或许会更好。</p> +<p>这很有用，不过在这种情况下使用<a href="#预定义消息">预定义消息</a>来处理或许会更好。</p> <h2 id="从_JavaScript_检索消息字符串">从 JavaScript 检索消息字符串</h2> @@ -283,7 +283,7 @@ var content = browser.i18n.getMessage("notificationContent", message.url);</pre> <h2 id="预定义消息">预定义消息</h2> -<p>i18n 模块为我们提供了一些预定义的消息，我们可以用之前在 {{anch("Calling message strings from manifests and extension CSS")}} 中看到的相同的方式调用。例如：</p> +<p>i18n 模块为我们提供了一些预定义的消息，我们可以用之前在 <a href="#在_manifests_中检索本地化的字符串">在 manifests 中检索本地化的字符串</a> 中看到的相同的方式调用。例如：</p> <pre>__MSG_extensionName__</pre> diff --git a/files/zh-cn/web/accessibility/aria/roles/list_role/index.html b/files/zh-cn/web/accessibility/aria/roles/list_role/index.html index 788446c200..6566ad1506 100644 --- a/files/zh-cn/web/accessibility/aria/roles/list_role/index.html +++ b/files/zh-cn/web/accessibility/aria/roles/list_role/index.html @@ -28,7 +28,7 @@ tags: <div class="notecard warning"> <h4>警告</h4> - <p>如果可能，您应该使用适当的语义化 HTML 元素来标记 <code>list</code> 及其 <code>listitem</code>，如 {{HTMLElement("ul")}}、{{HTMLElement("ol")}} 和 {{HTMLElement("li")}}。有关完整示例，请参阅 {{anch("Best_practices", "最佳实践")}}。</p> + <p>如果可能，您应该使用适当的语义化 HTML 元素来标记 <code>list</code> 及其 <code>listitem</code>，如 {{HTMLElement("ul")}}、{{HTMLElement("ol")}} 和 {{HTMLElement("li")}}。有关完整示例，请参阅 <a href="#best_practices">最佳实践</a>。</p> </div> <h3 id="Associated_WAI-ARIA_Roles_States_and_Properties">关联的 WAI-ARIA 角色、状态和属性</h3> diff --git a/files/zh-cn/web/accessibility/aria/roles/listitem_role/index.html b/files/zh-cn/web/accessibility/aria/roles/listitem_role/index.html index a4f9bb691d..9d8f8f7c98 100644 --- a/files/zh-cn/web/accessibility/aria/roles/listitem_role/index.html +++ b/files/zh-cn/web/accessibility/aria/roles/listitem_role/index.html @@ -28,7 +28,7 @@ tags: <div class="notecard warning"> <h4>警告</h4> - <p>如果可能，您应该使用适当的语义化 HTML 元素来标记 <code>list</code> 及其 <code>listitem</code>，如 {{HTMLElement("ul")}}、{{HTMLElement("ol")}} 和 {{HTMLElement("li")}}。有关完整示例，请参阅 {{anch("Best_practices", "最佳实践")}}。</p> + <p>如果可能，您应该使用适当的语义化 HTML 元素来标记 <code>list</code> 及其 <code>listitem</code>，如 {{HTMLElement("ul")}}、{{HTMLElement("ol")}} 和 {{HTMLElement("li")}}。有关完整示例，请参阅 <a href="#best_practices">最佳实践</a>。</p> </div> <h3 id="Associated_WAI-ARIA_Roles_States_and_Properties">关联的 WAI-ARIA 角色、状态和属性</h3> diff --git a/files/zh-cn/web/api/attr/index.html b/files/zh-cn/web/api/attr/index.html index ad4f79e0f3..31028bbfe0 100644 --- a/files/zh-cn/web/api/attr/index.html +++ b/files/zh-cn/web/api/attr/index.html @@ -13,7 +13,7 @@ translation_of: Web/API/Attr <p>{{InheritanceDiagram}}</p> -<div class="warning"><strong>警告：</strong>从Gecko 7.0开始{{geckoRelease("7.0")}}，控制台会输出这些方法和属性将会被移除的警告信息。你应该对代码进行相应的修正。点击{{anch("Deprecated properties and methods")}}查看完整的列表。</div> +<div class="warning"><strong>警告：</strong>从Gecko 7.0开始{{geckoRelease("7.0")}}，控制台会输出这些方法和属性将会被移除的警告信息。你应该对代码进行相应的修正。点击<a href="#废弃的属性和方法">废弃的属性和方法</a>查看完整的列表。</div> <div class="warning">在<a href="https://www.w3.org/standards/history/dom">DOM4[REC]</a>中，为了规范化Attr的实现，它不再继承自{{domxref("Node")}}。在目前<a href="https://www.w3.org/standards/history/dom41">DOM4.1[WD]</a>中又有变动，因此不建议使用Attr对象上有关{{domxref("Node")}}的属性和方法。</div> diff --git a/files/zh-cn/web/api/beforeunloadevent/index.html b/files/zh-cn/web/api/beforeunloadevent/index.html index 6063ef1282..f85b0e60a4 100644 --- a/files/zh-cn/web/api/beforeunloadevent/index.html +++ b/files/zh-cn/web/api/beforeunloadevent/index.html @@ -11,7 +11,7 @@ translation_of: Web/API/BeforeUnloadEvent <p><strong><code>beforeunload</code></strong> 事件触发于 window、document 和它们的资源即将卸载时。 </p> -<p>当事件属性 <code>returnValue</code> 被赋值为非空字符串时，会弹出一个对话框，让用户确认是否离开页面（示例如下）。否则，事件被静默处理。一些浏览器实现仅在框架或内置框架接收到用户手势或交互时才显示对话框。在 {{anch("浏览器兼容性")}} 中查看更多信息。</p> +<p>当事件属性 <code>returnValue</code> 被赋值为非空字符串时，会弹出一个对话框，让用户确认是否离开页面（示例如下）。否则，事件被静默处理。一些浏览器实现仅在框架或内置框架接收到用户手势或交互时才显示对话框。在 <a href="#浏览器兼容性">浏览器兼容性</a> 中查看更多信息。</p> <table class="properties"> <tbody> diff --git a/files/zh-cn/web/api/btoa/index.html b/files/zh-cn/web/api/btoa/index.html index 1ff44702a1..1c02996285 100644 --- a/files/zh-cn/web/api/btoa/index.html +++ b/files/zh-cn/web/api/btoa/index.html @@ -18,7 +18,7 @@ original_slug: Web/API/WindowOrWorkerGlobalScope/btoa <p><strong><code>WindowOrWorkerGlobalScope.btoa()</code> </strong> 从 {{jsxref("String")}} 对象中创建一个 base-64 编码的 ASCII 字符串，其中字符串中的每个字符都被视为一个二进制数据字节。</p> <div class="note"> -<p><strong>Note</strong>: 由于这个函数将每个字符视为二进制数据的字节，而不管实际组成字符的字节数是多少，所以如果任何字符的{{Glossary("code point", "码位")}}超出 <code>0x00</code> ~ <code>0xFF</code> 这个范围，则会引发 <code>InvalidCharacterError</code> 异常。请参阅 {{anch("Unicode_字符串")}} ，该示例演示如何编码含有码位超出 <code>0x00</code> ~ <code>0xFF</code> 范围的字符的字符串。</p> +<p><strong>Note</strong>: 由于这个函数将每个字符视为二进制数据的字节，而不管实际组成字符的字节数是多少，所以如果任何字符的{{Glossary("code point", "码位")}}超出 <code>0x00</code> ~ <code>0xFF</code> 这个范围，则会引发 <code>InvalidCharacterError</code> 异常。请参阅 <a href="#unicode_字符串">Unicode_字符串</a> ，该示例演示如何编码含有码位超出 <code>0x00</code> ~ <code>0xFF</code> 范围的字符的字符串。</p> </div> <h2 id="语法">语法</h2> diff --git a/files/zh-cn/web/api/canvas_api/tutorial/drawing_shapes/index.html b/files/zh-cn/web/api/canvas_api/tutorial/drawing_shapes/index.html index 8eee553d23..d656a1ad23 100644 --- a/files/zh-cn/web/api/canvas_api/tutorial/drawing_shapes/index.html +++ b/files/zh-cn/web/api/canvas_api/tutorial/drawing_shapes/index.html @@ -188,7 +188,7 @@ translation_of: Web/API/Canvas_API/Tutorial/Drawing_shapes <p>如果你想看到连续的线，你可以移除调用的moveTo()。</p> <div class="note"> -<p><strong>注意:需要学习更多关于arc()函数的内容，请看下面的</strong>{{anch("圆弧")}}</p> +<p><strong>注意:需要学习更多关于arc()函数的内容，请看下面的</strong><a href="#圆弧">圆弧</a></p> </div> <h3 id="线">线</h3> @@ -400,7 +400,7 @@ translation_of: Web/API/Canvas_API/Tutorial/Drawing_shapes <h3 id="矩形">矩形</h3> -<p>直接在画布上绘制矩形的三个额外方法，正如我们开始所见的{{anch("绘制矩形")}}，同样，也有rect()方法，将一个矩形路径增加到当前路径上。</p> +<p>直接在画布上绘制矩形的三个额外方法，正如我们开始所见的<a href="#绘制矩形">绘制矩形</a>，同样，也有rect()方法，将一个矩形路径增加到当前路径上。</p> <dl> <dt><code>rect(<em>x</em>, <em>y</em>, <em>width</em>, <em>height</em>)</code></dt> diff --git a/files/zh-cn/web/api/clipboard/index.html b/files/zh-cn/web/api/clipboard/index.html index 834376f01e..05e3313323 100644 --- a/files/zh-cn/web/api/clipboard/index.html +++ b/files/zh-cn/web/api/clipboard/index.html @@ -23,7 +23,7 @@ translation_of: Web/API/Clipboard <p>如果用户没有适时使用 <a href="/en-US/docs/Web/API/Permissions_API">Permissions API</a> 授予相应权限和<code>"clipboard-read"</code> 或 <code>"clipboard-write"</code> 权限，调用 <code>Clipboard</code> 对象的方法不会成功。</p> <div class="note"> -<p><strong>注意：</strong>实际上，现在浏览器对于访问剪贴板权限的索取各有不同，在章节 {{anch("剪贴板可用性")}} 查看更多细节。</p> +<p><strong>注意：</strong>实际上，现在浏览器对于访问剪贴板权限的索取各有不同，在章节 <a href="#剪贴板可用性">剪贴板可用性</a> 查看更多细节。</p> </div> <p>所有剪贴板 API 方法都是异步的；它们返回一个 {{jsxref("Promise")}} 对象，在剪贴板访问完成后被执行。如果剪贴板访问被拒绝，promise 也会被拒绝。</p> diff --git a/files/zh-cn/web/api/clipboard/read/index.html b/files/zh-cn/web/api/clipboard/read/index.html index 7b0ffa7bda..4fa5d071e2 100644 --- a/files/zh-cn/web/api/clipboard/read/index.html +++ b/files/zh-cn/web/api/clipboard/read/index.html @@ -16,7 +16,7 @@ translation_of: Web/API/Clipboard/read <p>To read from the clipboard, you must first have the <code>"clipboard-read"</code> permission.</p> <div class="note"> -<p><strong>Note:</strong> The asynchronous Clipboard and <a href="/en-US/docs/Web/API/Permissions_API">Permissions APIs</a> are still in the process of being integrated into most browsers, so they often deviate from the official rules for permissions and the like. Be sure to review the {{anch("Browser compatibility", "compatibility table")}} before using these methods.</p> +<p><strong>Note:</strong> The asynchronous Clipboard and <a href="/en-US/docs/Web/API/Permissions_API">Permissions APIs</a> are still in the process of being integrated into most browsers, so they often deviate from the official rules for permissions and the like. Be sure to review the <a href="#浏览器兼容性">compatibility table</a> before using these methods.</p> </div> <h2 id="语法">语法</h2> diff --git a/files/zh-cn/web/api/clipboard/write/index.html b/files/zh-cn/web/api/clipboard/write/index.html index a7f69da118..ef3cf82beb 100644 --- a/files/zh-cn/web/api/clipboard/write/index.html +++ b/files/zh-cn/web/api/clipboard/write/index.html @@ -16,7 +16,7 @@ translation_of: Web/API/Clipboard/write <p>但是你要提前获取 "<a href="/en-US/docs/Web/API/Permissions_API">Permissions API</a>" 的 <code>"clipboard-write"</code> 权限才能将数据写入到剪贴板。</p> <div class="note"> -<p><strong>注意:</strong> 浏览器对这个异步剪贴板的 API 仍然在讨论中。所以在使用它之前请检查 {{anch("Browser compatibility", "compatibility table")}} 和 {{SectionOnPage("/en-US/docs/Web/API/Clipboard", "Clipboard availability")}} 以获得更多的兼容性信息。</p> +<p><strong>注意:</strong> 浏览器对这个异步剪贴板的 API 仍然在讨论中。所以在使用它之前请检查 <a href="#浏览器兼容性">浏览器兼容性</a> 和 {{SectionOnPage("/en-US/docs/Web/API/Clipboard", "Clipboard availability")}} 以获得更多的兼容性信息。</p> </div> <h2 id="语法">语法</h2> diff --git a/files/zh-cn/web/api/clipboard/writetext/index.html b/files/zh-cn/web/api/clipboard/writetext/index.html index e60e7204fe..2b6d77f43d 100644 --- a/files/zh-cn/web/api/clipboard/writetext/index.html +++ b/files/zh-cn/web/api/clipboard/writetext/index.html @@ -14,7 +14,7 @@ translation_of: Web/API/Clipboard/writeText <p>{{domxref("Clipboard")}} 接口的 <strong><code>writeText()</code></strong> 方法可以写入特定字符串到操作系统的剪切板。</p> <div class="note"> -<p><strong>Note:</strong> 规范要求在写入剪贴板之前使用 <a href="/en-US/docs/Web/API/Permissions_API">Permissions API</a> 获取“剪贴板写入”权限。但是，不同浏览器的具体要求不同，因为这是一个新的API。有关详细信息，请查看{{anch("Browser compatibility", "compatibility table")}} and {{SectionOnPage("/en-US/docs/Web/API/Clipboard", "Clipboard availability")}}。</p> +<p><strong>Note:</strong> 规范要求在写入剪贴板之前使用 <a href="/en-US/docs/Web/API/Permissions_API">Permissions API</a> 获取“剪贴板写入”权限。但是，不同浏览器的具体要求不同，因为这是一个新的API。有关详细信息，请查看<a href="#浏览器兼容性">浏览器兼容性</a> and {{SectionOnPage("/en-US/docs/Web/API/Clipboard", "Clipboard availability")}}。</p> </div> <h2 id="语法">语法</h2> @@ -63,6 +63,4 @@ translation_of: Web/API/Clipboard/writeText <h2 id="浏览器兼容性">浏览器兼容性</h2> - - <p>{{Compat("api.Clipboard.writeText")}}</p> diff --git a/files/zh-cn/web/api/console/index.html b/files/zh-cn/web/api/console/index.html index 053d2784c0..be091e63ef 100644 --- a/files/zh-cn/web/api/console/index.html +++ b/files/zh-cn/web/api/console/index.html @@ -18,7 +18,7 @@ translation_of: Web/API/Console <pre class="brush: js notranslate">console.log("Failed to open the specified link")</pre> -<p>本页面记录了 <code>Console</code> 对象上的 {{anch("Methods")}}（方法）并给出了几个 {{anch("Usage")}} （用例）。</p> +<p>本页面记录了 <code>Console</code> 对象上的<a href="#方法">方法</a>并给出了几个 <a href="#usage">Usage</a> （用例）。</p> <p>{{AvailableInWorkers}}</p> diff --git a/files/zh-cn/web/api/credentialscontainer/index.html b/files/zh-cn/web/api/credentialscontainer/index.html index 73092cb5f0..6ea38b4409 100644 --- a/files/zh-cn/web/api/credentialscontainer/index.html +++ b/files/zh-cn/web/api/credentialscontainer/index.html @@ -27,7 +27,7 @@ translation_of: Web/API/CredentialsContainer <dt>{{domxref("CredentialsContainer.get()")}}</dt> <dd>Returns a {{jsxref("Promise")}} that resolves with the {{domxref("Credential")}} instance that matches the provided parameters.</dd> <dt>{{domxref("CredentialsContainer.preventSilentAccess()")}}</dt> - <dd>Sets a flag that specifies whether automatic log in is allowed for future visits to the current origin, then returns an empty {{jsxref("Promise")}}. For example, you might call this, after a user signs out of a website to ensure that he/she isn't automatically signed in on the next site visit. Earlier versions of the spec called this method <code>requireUserMediation()</code>. See {{anch("Browser compatibility")}} for support details.</dd> + <dd>Sets a flag that specifies whether automatic log in is allowed for future visits to the current origin, then returns an empty {{jsxref("Promise")}}. For example, you might call this, after a user signs out of a website to ensure that he/she isn't automatically signed in on the next site visit. Earlier versions of the spec called this method <code>requireUserMediation()</code>. See <a href="#浏览器兼容性">Browser compatibility</a> for support details.</dd> <dt>{{domxref("CredentialsContainer.store()")}}</dt> <dd>Stores a set of credentials for a user, inside a provided {{domxref("Credential")}} instance and returns that instance in a {{jsxref("Promise")}}.</dd> </dl> diff --git a/files/zh-cn/web/api/cssrule/index.html b/files/zh-cn/web/api/cssrule/index.html index 184e25376b..3af32d9c65 100644 --- a/files/zh-cn/web/api/cssrule/index.html +++ b/files/zh-cn/web/api/cssrule/index.html @@ -10,7 +10,7 @@ translation_of: Web/API/CSSRule --- <div>{{APIRef("CSSOM")}}</div> -<p><strong><code>CSSRule</code></strong> 接口表示一条 CSS 规则。有几种不同的规则类型，在下面的{{anch("类型常量")}}部分中有悉数列出。</p> +<p><strong><code>CSSRule</code></strong> 接口表示一条 CSS 规则。有几种不同的规则类型，在下面的<a href="#类型常量">类型常量</a>部分中有悉数列出。</p> <p><code>CSSRule</code> 接口指定了所有类型的规则的公共属性，而特定类型的规则的专有属性则在这些规则各自类型的、更专用的接口中被指定。</p> @@ -26,7 +26,7 @@ translation_of: Web/API/CSSRule <dt id="parentStyleSheet">{{domxref("CSSRule.parentStyleSheet")}} {{readonlyinline}}</dt> <dd>返回包含此规则的样式表的 {{domxref("CSSStyleSheet")}} 对象。</dd> <dt id="type">{{domxref("CSSRule.type")}} {{readonlyinline}}</dt> - <dd>规则类型，表示 CSS 规则类型 {{anch("类型常量")}} 中的一种类型。</dd> + <dd>规则类型，表示 CSS 规则类型 <a href="#类型常量">类型常量</a> 中的一种类型。</dd> </dl> <h2 id="常量">常量</h2> diff --git a/files/zh-cn/web/api/cssstylesheet/index.html b/files/zh-cn/web/api/cssstylesheet/index.html index 1252210d3b..3824e21c62 100644 --- a/files/zh-cn/web/api/cssstylesheet/index.html +++ b/files/zh-cn/web/api/cssstylesheet/index.html @@ -27,7 +27,7 @@ translation_of: Web/API/CSSStyleSheet <p>另一条规则可能是一条“@”规则（<em>at-rule</em>），例如 {{cssxref("@import")}} 或 {{cssxref("@media")}} 等等。</p> -<p>在{{anch("说明")}}部分中查看 <code>CSSStyleSheet</code> 对象的多种获取方式。</p> +<p>在<a href="#说明">说明</a>部分中查看 <code>CSSStyleSheet</code> 对象的多种获取方式。</p> <h2 id="属性">属性</h2> diff --git a/files/zh-cn/web/api/datatransferitem/getasstring/index.html b/files/zh-cn/web/api/datatransferitem/getasstring/index.html index 3b8147f7f6..ce731b39dd 100644 --- a/files/zh-cn/web/api/datatransferitem/getasstring/index.html +++ b/files/zh-cn/web/api/datatransferitem/getasstring/index.html @@ -16,7 +16,7 @@ translation_of: Web/API/DataTransferItem/getAsString <dl> <dt><code>callback</code></dt> - <dd>A callback function that has access to the {{domxref("DataTransferItem","data transfer item's")}} string data. See {{anch("Callback")}} below for details.</dd> + <dd>A callback function that has access to the {{domxref("DataTransferItem","data transfer item's")}} string data. See <a href="#callback">Callback</a> below for details.</dd> </dl> <h3 id="Return_value">Return value</h3> diff --git a/files/zh-cn/web/api/document/createelement/index.html b/files/zh-cn/web/api/document/createelement/index.html index a0b1fecfad..e45a93dac1 100644 --- a/files/zh-cn/web/api/document/createelement/index.html +++ b/files/zh-cn/web/api/document/createelement/index.html @@ -24,7 +24,7 @@ translation_of: Web/API/Document/createElement <dt><var>tagName</var></dt> <dd>指定要创建元素类型的字符串,创建元素时的 {{domxref("Node.nodeName", "nodeName")}} 使用 <code>tagName</code> 的值为初始化，该方法不允许使用限定名称(如:"html:a")，在 HTML 文档上调用 <code>createElement()</code> 方法创建元素之前会将<code>tagName</code> 转化成小写，在 Firefox、Opera 和 Chrome 内核中，<code>createElement(null)</code> 等同于 <code>createElement("null")</code></dd> <dt><var>options</var>{{optional_inline}}</dt> - <dd>一个可选的参数 <code>ElementCreationOptions</code> 是包含一个属性名为 <code>is</code> 的对象，该对象的值是用 <code>customElements.define()</code> 方法定义过的一个自定义元素的标签名。为了向前兼容较老版本的 <a href="https://www.w3.org/TR/custom-elements/">Custom Elements specification</a>, 有一些浏览器会允许你传一个值为自定义元素的标签名的字符串作为该参数的值。可以参考本页下方的 {{anch("Web component example")}} Google 的 <a href="https://developers.google.com/web/fundamentals/primers/customelements/#extendhtml">Extending native HTML elements</a> 文档仔细了解如何使用该参数。</dd> + <dd>一个可选的参数 <code>ElementCreationOptions</code> 是包含一个属性名为 <code>is</code> 的对象，该对象的值是用 <code>customElements.define()</code> 方法定义过的一个自定义元素的标签名。为了向前兼容较老版本的 <a href="https://www.w3.org/TR/custom-elements/">Custom Elements specification</a>, 有一些浏览器会允许你传一个值为自定义元素的标签名的字符串作为该参数的值。可以参考本页下方的 <a href="#web_component_示例">Web component 示例</a> Google 的 <a href="https://developers.google.com/web/fundamentals/primers/customelements/#extendhtml">Extending native HTML elements</a> 文档仔细了解如何使用该参数。</dd> </dl> <h3 id="返回值">返回值</h3> diff --git a/files/zh-cn/web/api/document/createevent/index.html b/files/zh-cn/web/api/document/createevent/index.html index d371052ddc..efcd7e1288 100644 --- a/files/zh-cn/web/api/document/createevent/index.html +++ b/files/zh-cn/web/api/document/createevent/index.html @@ -20,7 +20,7 @@ translation_of: Web/API/Document/createEvent <ul> <li><code>event</code> 就是被创建的 <a href="/zh-CN/docs/DOM/event" title="DOM/event">Event</a> 对象.</li> - <li><code>type</code> 是一个字符串，表示要创建的事件类型。事件类型可能包括<code>"UIEvents"</code>, <code>"MouseEvents"</code>, <code>"MutationEvents"</code>, 或者 <code>"HTMLEvents"</code>。请查看 {{Anch("Notes")}} 章节获取详细信息 。</li> + <li><code>type</code> 是一个字符串，表示要创建的事件类型。事件类型可能包括<code>"UIEvents"</code>, <code>"MouseEvents"</code>, <code>"MutationEvents"</code>, 或者 <code>"HTMLEvents"</code>。请查看 <a href="#notes">Notes</a> 章节获取详细信息 。</li> </ul> <h2 id="Example" name="Example">示例</h2> diff --git a/files/zh-cn/web/api/document/createnodeiterator/index.html b/files/zh-cn/web/api/document/createnodeiterator/index.html index 1e1b653d7a..139c554ef1 100644 --- a/files/zh-cn/web/api/document/createnodeiterator/index.html +++ b/files/zh-cn/web/api/document/createnodeiterator/index.html @@ -98,12 +98,12 @@ translation_of: Web/API/Document/createNodeIterator </table> </dd> <dt><code>filter</code> {{ optional_inline() }}</dt> - <dd>是实现 {{ domxref("NodeFilter") }} 接口的对象; 其 <code>acceptNode()</code> 方法会对从根节点开始到子树中的每个节点都调用一次，哪些节点需要进入迭代节点列表等待调用则取决于whatToShow参数（也可以使用一个简单的回调函数代替<code>acceptNode()</code>）。该方法需要返回下列常量之一： <code>NodeFilter.FILTER_ACCEPT</code> ，<code>NodeFilter.FILTER_REJECT</code> 或 <code>NodeFilter.FILTER_SKIP</code>（见<a href="https://developer.mozilla.org/zh-CN/docs/Web/API/NodeFilter">NodeFilter</a>），参见{{ anch("示例") }}。</dd> + <dd>是实现 {{ domxref("NodeFilter") }} 接口的对象; 其 <code>acceptNode()</code> 方法会对从根节点开始到子树中的每个节点都调用一次，哪些节点需要进入迭代节点列表等待调用则取决于whatToShow参数（也可以使用一个简单的回调函数代替<code>acceptNode()</code>）。该方法需要返回下列常量之一： <code>NodeFilter.FILTER_ACCEPT</code> ，<code>NodeFilter.FILTER_REJECT</code> 或 <code>NodeFilter.FILTER_SKIP</code>（见<a href="https://developer.mozilla.org/zh-CN/docs/Web/API/NodeFilter">NodeFilter</a>），参见<a href="#示例">示例</a>。</dd> </dl> <div class="note"><strong>注意： </strong>在Gecko12.0{{ geckoRelease("12.0") }}以前，这个方法接收第四个可选的参数（<code>entityReferenceExpansion</code>），这不是DOM4 规范中的一部分，因此被移除了。这个参数表示实体引用节点的子代对于迭代器是否可见。因为浏览器不会创建这样的节点，这个参数没有任何作用。</div> -<h2 id="Example" name="Example">示例</h2> +<h2 id="示例">示例</h2> <pre>const nodeIterator = document.createNodeIterator( document.body, diff --git a/files/zh-cn/web/api/document/execcommand/index.html b/files/zh-cn/web/api/document/execcommand/index.html index 355a4bd33f..cf51a9be23 100644 --- a/files/zh-cn/web/api/document/execcommand/index.html +++ b/files/zh-cn/web/api/document/execcommand/index.html @@ -31,7 +31,7 @@ translation_of: Web/API/Document/execCommand <dl> <dt><code>aCommandName</code></dt> - <dd>一个 {{domxref("DOMString")}} ，命令的名称。可用命令列表请参阅 {{anch("命令")}} 。</dd> + <dd>一个 {{domxref("DOMString")}} ，命令的名称。可用命令列表请参阅 <a href="#命令">命令</a> 。</dd> <dt><code>aShowDefaultUI</code></dt> <dd>一个 {{jsxref("Boolean")}}， 是否展示用户界面，一般为 false。Mozilla 没有实现。</dd> <dt><code>aValueArgument</code></dt> diff --git a/files/zh-cn/web/api/document/keypress_event/index.html b/files/zh-cn/web/api/document/keypress_event/index.html index 297a595b2b..a9c2bf2bf3 100644 --- a/files/zh-cn/web/api/document/keypress_event/index.html +++ b/files/zh-cn/web/api/document/keypress_event/index.html @@ -78,7 +78,7 @@ translation_of: Web/API/Document/keypress_event <tr> <td><code>key</code> {{readonlyInline}}</td> <td>DOMString (string)</td> - <td>The key value of the key represented by the event. If the value has a printed representation, this attribute's value is the same as the <code>char</code> attribute. Otherwise, it's one of the key value strings specified in {{ anch("Key values") }}. If the key can't be identified, this is the string "Unidentified". See <a href="/en-US/docs/Web/API/KeyboardEvent#Key_names_and_Char_values">key names and char values</a> for the detail. Read Only.</td> + <td>The key value of the key represented by the event. If the value has a printed representation, this attribute's value is the same as the <code>char</code> attribute. Otherwise, it's one of the key value strings specified in <a href="#key_values">Key Values</a>. If the key can't be identified, this is the string "Unidentified". See <a href="/en-US/docs/Web/API/KeyboardEvent#Key_names_and_Char_values">key names and char values</a> for the detail. Read Only.</td> </tr> <tr> <td><code>charCode</code> {{readonlyInline}}</td> @@ -90,7 +90,7 @@ translation_of: Web/API/Document/keypress_event <tr> <td><code>keyCode</code> {{readonlyInline}}</td> <td>Unsigned long (int)</td> - <td>A system and implementation dependent numerical code identifying the unmodified value of the pressed key. This is usually the decimal ASCII ({{ RFC(20) }}) or Windows 1252 code corresponding to the key; see {{ anch("Virtual key codes") }} for a list of common values. If the key can't be identified, this value is 0. + <td>A system and implementation dependent numerical code identifying the unmodified value of the pressed key. This is usually the decimal ASCII ({{ RFC(20) }}) or Windows 1252 code corresponding to the key; see <a href="virtual_key_codes">Virtual key codes</a> for a list of common values. If the key can't be identified, this value is 0. <div class="warning"><strong>Warning:</strong> This attribute is deprecated; you should use <code>key</code> instead, if available.</div> </td> </tr> @@ -137,7 +137,6 @@ translation_of: Web/API/Document/keypress_event <td><code>true</code> if the meta key was down when the event was fired. <code>false</code> otherwise.</td> </tr> </tbody> -</table> <h2 id="Related_Events">Related Events</h2> diff --git a/files/zh-cn/web/api/document/queryselector/index.html b/files/zh-cn/web/api/document/queryselector/index.html index 8a449768ec..8f0332d2dc 100644 --- a/files/zh-cn/web/api/document/queryselector/index.html +++ b/files/zh-cn/web/api/document/queryselector/index.html @@ -29,7 +29,7 @@ translation_of: Web/API/Document/querySelector </dl> <div class="note"> -<p><strong>提示:</strong>必须使用反斜杠字符转义不属于标准CSS语法的字符。 由于JavaScript也使用退格转义，因此在使用这些字符编写字符串文字时必须特别小心。 有关详细信息，请参阅{{anch("Escaping special characters")}}。</p> +<p><strong>提示:</strong>必须使用反斜杠字符转义不属于标准CSS语法的字符。 由于JavaScript也使用退格转义，因此在使用这些字符编写字符串文字时必须特别小心。 有关详细信息，请参阅<a href="#转义特殊字符">转义特殊字符</a>。</p> </div> <h3 id="返回值">返回值</h3> diff --git a/files/zh-cn/web/api/document/queryselectorall/index.html b/files/zh-cn/web/api/document/queryselectorall/index.html index 0e43d6020b..0f679ce98d 100644 --- a/files/zh-cn/web/api/document/queryselectorall/index.html +++ b/files/zh-cn/web/api/document/queryselectorall/index.html @@ -39,7 +39,7 @@ translation_of: Web/API/Document/querySelectorAll </dl> <div class="note"> -<p><strong>注意：</strong> 必须使用反斜杠字符转义不属于标准CSS语法的字符。 由于JavaScript也使用反斜杠转义，因此在使用这些字符编写字符串文字时必须特别小心。 有关详细信息，请参阅 {{anch("Escaping special characters")}}</p> +<p><strong>注意：</strong> 必须使用反斜杠字符转义不属于标准CSS语法的字符。 由于JavaScript也使用反斜杠转义，因此在使用这些字符编写字符串文字时必须特别小心。有关详细信息，请参阅<a href="/zh-CN/docs/Web/API/Document/querySelector#转义特殊字符">转义特殊字符</a></p> </div> <h3 id="返回值">返回值</h3> @@ -163,11 +163,7 @@ inner.length; // 0 <h2 id="浏览器兼容性">浏览器兼容性</h2> -<div> - - <p>{{Compat("api.Document.querySelectorAll")}}</p> -</div> <h2 id="相关连接">相关连接</h2> diff --git a/files/zh-cn/web/api/document/title/index.html b/files/zh-cn/web/api/document/title/index.html index 40056fafe2..9b91ecff0e 100644 --- a/files/zh-cn/web/api/document/title/index.html +++ b/files/zh-cn/web/api/document/title/index.html @@ -10,7 +10,7 @@ translation_of: Web/API/Document/title <h2 id="Syntax" name="Syntax">语法</h2> <pre class="syntaxbox"><em>var docTitle</em> = <em>document</em>.title; </pre> -<p><code>title</code> 是一个包含 <code>document</code> 标题的字符串。如果通过设置 <code>document.title</code> 将标题覆盖，则返回覆盖后的值。否则返回标签里指定的标题（参见下面的 {{Anch("Notes")}}）。</p> +<p><code>title</code> 是一个包含 <code>document</code> 标题的字符串。如果通过设置 <code>document.title</code> 将标题覆盖，则返回覆盖后的值。否则返回标签里指定的标题（参见下面的 <a href="#notes">Notes</a>）。</p> <pre class="syntaxbox"><em>document</em>.title = <em>newTitle</em>; </pre> <p><code>newTitle</code> 是文档的新标题。赋值操作影响 <code>document.title</code> 的返回值，<span style="line-height: 1.5;">文档的显示标题（即窗口或标签页顶部的标题栏），另外还会影响文档的 DOM，即改变 HTML 文档中 </span><code style="font-style: normal; line-height: 1.5;"><title></code><span style="line-height: 1.5;"> 元素的内容。</span></p> diff --git a/files/zh-cn/web/api/domexception/index.html b/files/zh-cn/web/api/domexception/index.html index 7616ea3c45..a5181039a5 100644 --- a/files/zh-cn/web/api/domexception/index.html +++ b/files/zh-cn/web/api/domexception/index.html @@ -24,7 +24,7 @@ translation_of: Web/API/DOMException <dl> <dt>{{domxref("DOMException.code")}} {{deprecated_inline}} {{readOnlyInline}}</dt> - <dd>返回一个 <code>short</code>，包含 {{anch("Error codes", "error code constants")}} 中的一个，或者返回 <code>0</code>，如果没有匹配的话。这个字段由于历史原因被使用。现在不再使用这个新的DOM异常：他们把这个信息放入 {{domxref("DOMException.name")}} 属性。</dd> + <dd>返回一个 <code>short</code>，包含错误代码常量中的一个，或者返回 <code>0</code>，如果没有匹配的话。这个字段由于历史原因被使用。现在不再使用这个新的DOM异常：他们把这个信息放入 {{domxref("DOMException.name")}} 属性。</dd> <dt>{{domxref("DOMException.message")}} {{readOnlyInline}}</dt> <dd>返回一个 {{ domxref("DOMString") }} 代表与给定的<a href="/en-US/docs/Web/API/DOMException#Error_names">错误名称</a>有关信息或描述。</dd> <dt>{{domxref("DOMException.name")}} {{readOnlyInline}}</dt> diff --git a/files/zh-cn/web/api/element/getattribute/index.html b/files/zh-cn/web/api/element/getattribute/index.html index ce97f4a004..f6ce24319a 100644 --- a/files/zh-cn/web/api/element/getattribute/index.html +++ b/files/zh-cn/web/api/element/getattribute/index.html @@ -9,7 +9,7 @@ translation_of: Web/API/Element/getAttribute <h2 id="Summary" name="Summary">概要</h2> -<p><span><strong><code>getAttribute()</code></strong> 返回元素上</span>一个指定的属性<span>值。</span>如果指定的属性不存在，则返回 <code>null</code> 或 <code>""</code> （空字符串）；具体细节, 请参阅 {{Anch("Notes")}} 部分。</p> +<p><span><strong><code>getAttribute()</code></strong> 返回元素上</span>一个指定的属性<span>值。</span>如果指定的属性不存在，则返回 <code>null</code> 或 <code>""</code> （空字符串）；具体细节, 请参阅 <a href="#notes">Notes</a> 部分。</p> <h2 id="Syntax" name="Syntax">语法</h2> diff --git a/files/zh-cn/web/api/element/setattribute/index.html b/files/zh-cn/web/api/element/setattribute/index.html index 7a35901b5b..48de06340a 100644 --- a/files/zh-cn/web/api/element/setattribute/index.html +++ b/files/zh-cn/web/api/element/setattribute/index.html @@ -37,7 +37,7 @@ translation_of: Web/API/Element/setAttribute <p>尽管对于不存在的属性，<code><a href="/en-US/docs/DOM/element.getAttribute" title="DOM/element.getAttribute">getAttribute()</a></code> 返回 <code>null</code>，你还是应该使用 <code><a href="/en-US/docs/DOM/element.removeAttribute" title="DOM/element.removeAttribute">removeAttribute()</a></code> 代替 <code><em>elt</em>.setAttribute(<em>attr</em>, null)</code> 来删除属性。</p> -<p>布尔属性（原文是Boolean attributes）只要出现在元素上就会被认为是 <code>true</code> ，无论它的值是什么; 一般来说, 你应该将 <code>value</code> 设置为空字符串 (<code>""</code>) 。(一些人使用这个属性的名称作为值; 这不会出现什么问题，但这是不规范的). See the {{anch("Example", "example")}} below for a practical demonstration.</p> +<p>布尔属性（原文是Boolean attributes）只要出现在元素上就会被认为是 <code>true</code> ，无论它的值是什么; 一般来说, 你应该将 <code>value</code> 设置为空字符串 (<code>""</code>) 。(一些人使用这个属性的名称作为值; 这不会出现什么问题，但这是不规范的). See the <a href="#示例">example</a> below for a practical demonstration.</p> <p>由于将指定的值转换为字符串，因此指定null不一定能达到您的期望。 而不是删除属性或将其值设置为{{jsxref("null")}}，而是将属性的值设置为字符串“ null”。 如果要删除属性，请调用{{domxref("Element.removeAttribute”，“ removeAttribute（）")}}}。</p> @@ -52,7 +52,7 @@ translation_of: Web/API/Element/setAttribute <dd>指定的属性名称包含一个或多个在属性名称中无效的字符。</dd> </dl> -<h2 id="例子">例子</h2> +<h2 id="示例">示例</h2> <p>在下面的例子中，<code>setAttribute()</code> 被用于设置 {{HTMLElement("button")}} 上的属性。</p> diff --git a/files/zh-cn/web/api/event/eventphase/index.html b/files/zh-cn/web/api/event/eventphase/index.html index d5be77ae7a..fae6a99163 100644 --- a/files/zh-cn/web/api/event/eventphase/index.html +++ b/files/zh-cn/web/api/event/eventphase/index.html @@ -12,7 +12,7 @@ translation_of: Web/API/Event/eventPhase <pre class="brush: js"><em>var phase</em> = event.eventPhase; </pre> -<p>返回一个代表当前执行阶段的 整数值，下面列出了不同的执行阶段{{anch("Event phase constants")}}.</p> +<p>返回一个代表当前执行阶段的 整数值，下面列出了不同的执行阶段<a href="#事件阶段常量">事件阶段常量</a>.</p> <h2 id="常量">常量</h2> diff --git a/files/zh-cn/web/api/eventtarget/addeventlistener/index.html b/files/zh-cn/web/api/eventtarget/addeventlistener/index.html index 64f66c8e1c..d0e42edb58 100644 --- a/files/zh-cn/web/api/eventtarget/addeventlistener/index.html +++ b/files/zh-cn/web/api/eventtarget/addeventlistener/index.html @@ -33,13 +33,13 @@ Non-standard_inline}}); // Gecko/Mozilla only <dt><code>type</code></dt> <dd>表示监听<a href="/zh-CN/docs/Web/Events">事件类型</a>的字符串。</dd> <dt><code>listener</code></dt> - <dd>当所监听的事件类型触发时，会接收到一个事件通知（实现了 {{domxref("Event")}} 接口的对象）对象。<code>listener</code> 必须是一个实现了 {{domxref("EventListener")}} 接口的对象，或者是一个<a href="/zh-CN/docs/Web/JavaScript/Guide/Functions">函数</a>。有关回调本身的详细信息，请参阅{{anch("The event listener callback")}} </dd> + <dd>当所监听的事件类型触发时，会接收到一个事件通知（实现了 {{domxref("Event")}} 接口的对象）对象。<code>listener</code> 必须是一个实现了 {{domxref("EventListener")}} 接口的对象，或者是一个<a href="/zh-CN/docs/Web/JavaScript/Guide/Functions">函数</a>。有关回调本身的详细信息，请参阅<a href="#事件监听回调">事件监听回调</a> </dd> <dt>options {{optional_inline}}</dt> <dd>一个指定有关 <code>listener </code>属性的可选参数<strong>对象</strong>。可用的选项如下： <ul> <li><code>capture</code>: {{jsxref("Boolean")}}，表示 <code>listener</code> 会在该类型的事件捕获阶段传播到该 <code>EventTarget</code> 时触发。</li> <li><code>once</code>: {{jsxref("Boolean")}}，表示 <code>listener 在添加之后最多只调用一次。如果是</code> <code>true，</code> <code>listener</code> 会在其被调用之后自动移除。</li> - <li><code>passive</code>: {{jsxref("Boolean")}}，设置为true时，表示 <code>listener</code> 永远不会调用 <code>preventDefault()</code>。如果 listener 仍然调用了这个函数，客户端将会忽略它并抛出一个控制台警告。查看 {{anch("使用 passive 改善的滚屏性能")}} 了解更多.</li> + <li><code>passive</code>: {{jsxref("Boolean")}}，设置为true时，表示 <code>listener</code> 永远不会调用 <code>preventDefault()</code>。如果 listener 仍然调用了这个函数，客户端将会忽略它并抛出一个控制台警告。查看 <a href="#使用_passive_改善的滚屏性能">使用 passive 改善的滚屏性能</a> 了解更多.</li> <li><code>signal</code>：{{domxref("AbortSignal")}}，该 <code>AbortSignal</code> 的 {{domxref("AbortController/abort()", "abort()")}} 方法被调用时，监听器会被移除。</li> <li>{{non-standard_inline}}<code> mozSystemGroup</code>: 只能在 XBL 或者是 Firefox' chrome 使用，这是个 {{jsxref("Boolean")}}，表示 <code>listener </code>被添加到 system group。</li> </ul> @@ -319,7 +319,7 @@ el.addEventListener("click", () => { modifyText("four"); }, false);</pre> <p>{{ EmbedLiveSample('options用法示例', 600, 310, '', 'Web/API/EventTarget/addEventListener') }}</p> -<p>在使用<code>options</code>对象中具体的值前，最好确保用户的浏览器支持它，因为这些是历史上并非所有浏览器都支持的附加功能。你可以查看{{anch("Safely detecting option support")}}以了解更多</p> +<p>在使用<code>options</code>对象中具体的值前，最好确保用户的浏览器支持它，因为这些是历史上并非所有浏览器都支持的附加功能。你可以查看<a href="#option支持的安全检测">option支持的安全检测</a>以了解更多</p> <h2 id="备注">备注</h2> diff --git a/files/zh-cn/web/api/fetch_api/using_fetch/index.md b/files/zh-cn/web/api/fetch_api/using_fetch/index.md index 165b290a82..b2833592a6 100644 --- a/files/zh-cn/web/api/fetch_api/using_fetch/index.md +++ b/files/zh-cn/web/api/fetch_api/using_fetch/index.md @@ -36,7 +36,7 @@ fetch('http://example.com/movies.json') 当然它只是一个 HTTP 响应，而不是真的 JSON。为了获取JSON的内容，我们需要使用 {{domxref("Response.json()", "json()")}} 方法（该方法返回一个将响应 body 解析成 JSON 的 promise）。 -> **备注：** {{anch("Body")}} 还有其他相似的方法，用于获取其他类型的内容。 +> **备注：** [Body](#Body) 还有其他相似的方法，用于获取其他类型的内容。 最好使用符合[内容安全策略 (CSP)](/zh-CN/docs/Web/HTTP/Headers/Content-Security-Policy)的链接而不是使用直接指向资源地址的方式来进行 fetch 的请求。 @@ -320,7 +320,7 @@ console.log(myHeaders.get('X-Custom-Header')); // null 虽然一些操作只能在 {{domxref("Service_Worker_API","ServiceWorkers")}} 中使用，但是它提供了更方便的操作 Headers 的 API。 -如果使用了一个不合法的 HTTP Header 属性名，那么 Headers 的方法通常都抛出 TypeError 异常。如果不小心写入了一个不可写的属性（{{anch("Guard", "见下方")}}），也会抛出一个 TypeError 异常。除此以外的情况，失败了并不抛出异常。例如： +如果使用了一个不合法的 HTTP Header 属性名，那么 Headers 的方法通常都抛出 TypeError 异常。如果不小心写入了一个不可写的属性（[见下方](#Guard)），也会抛出一个 TypeError 异常。除此以外的情况，失败了并不抛出异常。例如： ```js const myResponse = Response.error(); diff --git a/files/zh-cn/web/api/file/index.html b/files/zh-cn/web/api/file/index.html index d87a8ed3f0..12fbc5bee5 100644 --- a/files/zh-cn/web/api/file/index.html +++ b/files/zh-cn/web/api/file/index.html @@ -13,7 +13,7 @@ translation_of: Web/API/File <p>文件（<strong><code>File</code></strong>）接口提供有关文件的信息，并允许网页中的 JavaScript 访问其内容。</p> -<p>通常情况下， <code>File</code> 对象是来自用户在一个 {{HTMLElement("input")}} 元素上选择文件后返回的 {{domxref("FileList")}} 对象,也可以是来自由拖放操作生成的 {{domxref("DataTransfer")}} 对象，或者来自 {{domxref("HTMLCanvasElement")}} 上的 <code>mozGetAsFile</code>() API。在Gecko中，特权代码可以创建代表任何本地文件的File对象，而无需用户交互（有关详细信息，请参阅{{anch("注意事项")}}。</p> +<p>通常情况下， <code>File</code> 对象是来自用户在一个 {{HTMLElement("input")}} 元素上选择文件后返回的 {{domxref("FileList")}} 对象,也可以是来自由拖放操作生成的 {{domxref("DataTransfer")}} 对象，或者来自 {{domxref("HTMLCanvasElement")}} 上的 <code>mozGetAsFile</code>() API。在Gecko中，特权代码可以创建代表任何本地文件的File对象，而无需用户交互（有关详细信息，请参阅<a href="#注意事项">注意事项</a>。</p> <p><code>File</code> 对象是特殊类型的 {{domxref("Blob")}}，且可以用在任意的 Blob 类型的 context 中。比如说， {{domxref("FileReader")}}, {{domxref("URL.createObjectURL()")}}, {{domxref("ImageBitmapFactories.createImageBitmap()", "createImageBitmap()")}}, 及 {{domxref("XMLHttpRequest", "", "send()")}} 都能处理 <code>Blob</code> 和<code> File</code>。</p> diff --git a/files/zh-cn/web/api/file/using_files_from_web_applications/index.html b/files/zh-cn/web/api/file/using_files_from_web_applications/index.html index 8d2a0f91aa..24f339f10b 100644 --- a/files/zh-cn/web/api/file/using_files_from_web_applications/index.html +++ b/files/zh-cn/web/api/file/using_files_from_web_applications/index.html @@ -284,7 +284,7 @@ function dragover(e) { </div> </pre> -<p>这确定我们的文件 {{ HTMLElement("input") }} 元素显示为一个可以调用文件选择器的链接（我们隐藏了文件输入元素来阻止显示用户不友好的界面）。这个在 {{ anch("Using hidden file input elements using the click() method") }}节已经说明了这种调用文件选择器的方法。</p> +<p>这确定我们的文件 {{ HTMLElement("input") }} 元素显示为一个可以调用文件选择器的链接（我们隐藏了文件输入元素来阻止显示用户不友好的界面）。这个在 <a href="#通过_click_方法使用隐藏的_file_input_元素">通过 click() 方法使用隐藏的 file input 元素</a>已经说明了这种调用文件选择器的方法。</p> <p><code>handleFiles()</code> 方法如下：</p> diff --git a/files/zh-cn/web/api/file_and_directory_entries_api/index.html b/files/zh-cn/web/api/file_and_directory_entries_api/index.html index 83bb4e222b..30046632a6 100644 --- a/files/zh-cn/web/api/file_and_directory_entries_api/index.html +++ b/files/zh-cn/web/api/file_and_directory_entries_api/index.html @@ -15,7 +15,7 @@ translation_of: Web/API/File_and_Directory_Entries_API <p>文件与目录条目 API 模拟一个 web 应用可以导航和访问的本地文件系统。你在虚拟的沙箱文件系统中可以开发一个读、写、创建文件或者目录的应用。</p> <div class="note"> -<p>因为这是一个非标准 API，它的规范目前还没有在标准的轨道上，所以要记住，并不是所有的浏览器都实现了它，而且那些实现了的浏览器可能只实现了它的一小部分。有关详细信息，请查看{{anch("浏览器兼容性")}}部分。</p> +<p>因为这是一个非标准 API，它的规范目前还没有在标准的轨道上，所以要记住，并不是所有的浏览器都实现了它，而且那些实现了的浏览器可能只实现了它的一小部分。有关详细信息，请查看<a href="#浏览器兼容性">浏览器兼容性</a>部分。</p> </div> <p>根据您希望的是异步行为还是同步行为，存在两个非常相似的 API。同步 API 可在 {{domxref("Worker")}} 中使用，并将返回所需的值。异步 API 不会阻塞和函数，API不会返回值;相反，您将需要提供一个回调函数，以便在响应到达时处理它。</p> diff --git a/files/zh-cn/web/api/file_handle_api/index.html b/files/zh-cn/web/api/file_handle_api/index.html index e955cdf0ab..5421612b10 100644 --- a/files/zh-cn/web/api/file_handle_api/index.html +++ b/files/zh-cn/web/api/file_handle_api/index.html @@ -44,7 +44,7 @@ IDBReq.onsuccess = function(){ <p>{{domxref("IDBDatabase.mozCreateFileHandle","mozCreateFileHandle()")}}接受两个参数：名称和可选类型。 这两个都是描述性的，数据库不使用。 但是，它们对于{{domxref("FileHandle")}}对象很重要，因为它可以生成{{domxref("File")}}对象，这些对象继承自己的{{domxref("File.name","name")}}和{{domxref("File.type","type")}}的值。 就是说，由于名称与任何实际文件名都不匹配，因此它可以是一个空字符串，甚至不必是唯一的。</p> <div class="note"> -<p><strong>Note:</strong> the above code only creates a "temporary file" that exists only while you hold the {{domxref("FileHandle")}} instance. If you want a file to survive a page refresh/app relaunch, you need to store the handle in a more permanent location, like the database itself. See {{Anch("File storage")}} below to learn more about this.</p> +<p><strong>Note:</strong> the above code only creates a "temporary file" that exists only while you hold the {{domxref("FileHandle")}} instance. If you want a file to survive a page refresh/app relaunch, you need to store the handle in a more permanent location, like the database itself. See <a href="#文件储存">文件储存</a> below to learn more about this.</p> </div> <h3 id="执行读写操作">执行读写操作</h3> diff --git a/files/zh-cn/web/api/filesystemdirectoryentry/index.html b/files/zh-cn/web/api/filesystemdirectoryentry/index.html index 22b7a7aeef..df09ad89c8 100644 --- a/files/zh-cn/web/api/filesystemdirectoryentry/index.html +++ b/files/zh-cn/web/api/filesystemdirectoryentry/index.html @@ -8,7 +8,7 @@ translation_of: Web/API/FileSystemDirectoryEntry <p><a href="/en-US/docs/Web/API/File_and_Directory_Entries_API">文件和目录条目 API</a> 的 <strong><code>FileSystemDirectoryEntry</code></strong> 接口表示文件系统中的目录。它提供了方法，使其能够访问和操作目录中的文件，以及访问目录中的条目。</p> <div class="note"> -<p>由于这是个非标准的 API，它的规范当前并没有在标准进程中，重要的是要记住，并不是所有浏览器都实现了他，并且实现它的浏览器可能仅仅实现了一小部分。更多细节请查看 {{anch("Browser compatibility")}} 。</p> +<p>由于这是个非标准的 API，它的规范当前并没有在标准进程中，重要的是要记住，并不是所有浏览器都实现了他，并且实现它的浏览器可能仅仅实现了一小部分。更多细节请查看 <a href="#browser_compatibility">Browser compatibility</a> 。</p> </div> <h2 id="basic_concepts" name="basic_concepts">基本概念</h2> diff --git a/files/zh-cn/web/api/filesystemdirectoryreader/index.html b/files/zh-cn/web/api/filesystemdirectoryreader/index.html index 471b5a4240..d3d71b3169 100644 --- a/files/zh-cn/web/api/filesystemdirectoryreader/index.html +++ b/files/zh-cn/web/api/filesystemdirectoryreader/index.html @@ -20,7 +20,7 @@ translation_of: Web/API/FileSystemDirectoryReader <p>The <code>FileSystemDirectoryReader</code> interface of the <a href="/en-US/docs/Web/API/File_and_Directory_Entries_API">File and Directory Entries API</a> lets you access the {{domxref("FileEntry")}}-based objects (generally {{domxref("FileSystemFileEntry")}} or {{domxref("FileSystemDirectoryEntry")}}) representing each entry in a directory.</p> <div class="note"> -<p>Because this is a non-standard API, whose specification is not currently on a standards track, it's important to keep in mind that not all browsers implement it, and those that do may implement only small portions of it. Check the {{anch("Browser compatibility")}} section for details.</p> +<p>Because this is a non-standard API, whose specification is not currently on a standards track, it's important to keep in mind that not all browsers implement it, and those that do may implement only small portions of it. Check the <a href="#browser_compatibility">Browser compatibility</a> section for details.</p> </div> <h2 id="Methods">Methods</h2> diff --git a/files/zh-cn/web/api/filesystementry/index.html b/files/zh-cn/web/api/filesystementry/index.html index 8cfed42aaf..6618309e50 100644 --- a/files/zh-cn/web/api/filesystementry/index.html +++ b/files/zh-cn/web/api/filesystementry/index.html @@ -8,7 +8,7 @@ translation_of: Web/API/FileSystemEntry <p>The <strong><code>FileSystemEntry</code></strong> interface of the File and Directory Entries API represents a single in a file system. The entry can be a file or a directory (directories are represented by the {{domxref("DirectoryEntry")}} interface). It includes methods for working with files—including copying, moving, removing, and reading files—as well as information about a file it points to—including the file name and its path from the root to the entry.</p> <div class="note"> -<p>Because this is a non-standard API, whose specification is not currently on a standards track, it's important to keep in mind that not all browsers implement it, and those that do may implement only small portions of it. Check the {{anch("Browser compatibility")}} section for details.</p> +<p>Because this is a non-standard API, whose specification is not currently on a standards track, it's important to keep in mind that not all browsers implement it, and those that do may implement only small portions of it. Check the <a href="#browser_compatibility">Browser compatibility</a> section for details.</p> </div> <h2 id="basic" name="basic">Basic concepts</h2> diff --git a/files/zh-cn/web/api/filesystemfileentry/index.html b/files/zh-cn/web/api/filesystemfileentry/index.html index de0f33c260..8b330192b1 100644 --- a/files/zh-cn/web/api/filesystemfileentry/index.html +++ b/files/zh-cn/web/api/filesystemfileentry/index.html @@ -8,7 +8,7 @@ translation_of: Web/API/FileSystemFileEntry <p><a href="/en/DOM/File_API/File_System_API" title="en/DOM/File_API/File_System_API">文件系统 API</a> 的<strong><code> FileSystemFileEntry</code></strong> 接口表示文件系统中的文件。它提供了属性，描述文件的属性，以及 {{domxref("FileSystemFileEntry.file", "file()")}} 方法，它创建了可以用于读取文件的 {{domxref("File")}} 对象。</p> <div class="note"> -<p>由于这是个非标准 API，它的规范当前并不在标准化过程中。重要的是要记住，并不是所有浏览器都实现了它，并且实现它的浏览器可能仅仅实现一小部分。点击 {{anch("Browser compatibility")}} 来查看更多细节。</p> +<p>由于这是个非标准 API，它的规范当前并不在标准化过程中。重要的是要记住，并不是所有浏览器都实现了它，并且实现它的浏览器可能仅仅实现一小部分。点击 <a href="#browser_compatibility">Browser compatibility</a> 来查看更多细节。</p> </div> <h2 id="属性" style="line-height: 30px; font-size: 2.14285714285714rem;">属性</h2> diff --git a/files/zh-cn/web/api/fullscreen_api/guide/index.html b/files/zh-cn/web/api/fullscreen_api/guide/index.html index f6b27bbb90..325cae8184 100644 --- a/files/zh-cn/web/api/fullscreen_api/guide/index.html +++ b/files/zh-cn/web/api/fullscreen_api/guide/index.html @@ -67,7 +67,7 @@ if (elem.requestFullscreen) { <p> </p> -<p>用户总是可以自行退出全屏模式；详见 {{Anch("Things your users want to know")}}。你也可以以编程方式通过调用 {{DOMxRef("Document.exitFullscreen()")}} 方法来做到这点。</p> +<p>用户总是可以自行退出全屏模式；详见 <a href="#things_your_users_want_to_know">Things your users want to know</a>。你也可以以编程方式通过调用 {{DOMxRef("Document.exitFullscreen()")}} 方法来做到这点。</p> <h2 id="其他信息">其他信息</h2> diff --git a/files/zh-cn/web/api/fullscreen_api/index.html b/files/zh-cn/web/api/fullscreen_api/index.html index 87e6fec637..b2dca17e13 100644 --- a/files/zh-cn/web/api/fullscreen_api/index.html +++ b/files/zh-cn/web/api/fullscreen_api/index.html @@ -19,7 +19,7 @@ translation_of: Web/API/Fullscreen_API <p class="summary">可以在<a href="/zh-CN/docs/Web/API/Fullscreen_API/Guide">全屏 API 指南</a>这篇文章了解更多细节。</p> <div class="note"> -<p><strong>注意：</strong>当前并不是所有的浏览器都支持该 API，大多数浏览器需要使用供应商前缀或者尚未实现该规范。下面的浏览器兼容性表 {{anch("Browser compatibility")}} 可以看到各个浏览器对此的支持（你也可以使用 <a href="https://github.com/rafrex/fscreen">Fscreen</a> 来提供跨浏览器 API 访问）。</p> +<p><strong>注意：</strong>当前并不是所有的浏览器都支持该 API，大多数浏览器需要使用供应商前缀或者尚未实现该规范。下面的浏览器兼容性表 <a href="#browser_compatibility">Browser compatibility</a> 可以看到各个浏览器对此的支持（你也可以使用 <a href="https://github.com/rafrex/fscreen">Fscreen</a> 来提供跨浏览器 API 访问）。</p> </div> <h2 id="Specification" name="Specification">接口</h2> diff --git a/files/zh-cn/web/api/gamepad/index.html b/files/zh-cn/web/api/gamepad/index.html index 05a3b1b61d..33a7a2b46d 100644 --- a/files/zh-cn/web/api/gamepad/index.html +++ b/files/zh-cn/web/api/gamepad/index.html @@ -71,14 +71,14 @@ translation_of: Web/API/Gamepad <tr> <td>{{SpecName("GamepadExtensions", "#partial-gamepad-interface", "Gamepad extensions")}}</td> <td>{{Spec2("GamepadExtensions")}}</td> - <td>Defines the {{anch("Experimental extensions to Gamepad")}}</td> + <td>Defines the <a href="#Gamepad_的实验性扩展">Experimental extensions to Gamepad</a></td> </tr> </tbody> </table> <h2 id="浏览器兼容性">浏览器兼容性</h2> -<p>{{Compat("api.Gamepad")}}</p> +<p>{{Compat}}</p> <h2 id="另请参阅">另请参阅</h2> diff --git a/files/zh-cn/web/api/gamepad_api/index.html b/files/zh-cn/web/api/gamepad_api/index.html index 114a054a0d..91c1cd80e9 100644 --- a/files/zh-cn/web/api/gamepad_api/index.html +++ b/files/zh-cn/web/api/gamepad_api/index.html @@ -74,7 +74,7 @@ translation_of: Web/API/Gamepad_API <tr> <td>{{SpecName("GamepadExtensions")}}</td> <td>{{Spec2("GamepadExtensions")}}</td> - <td>Defines the {{anch("Experimental Gamepad extensions")}}.</td> + <td>定义 <a href="#实验性_gamepad_扩展">实验性 Gamepad 扩展</a>.</td> </tr> <tr> <td>{{SpecName("Gamepad", "", "The Gamepad API specification")}}</td> diff --git a/files/zh-cn/web/api/headers/index.html b/files/zh-cn/web/api/headers/index.html index 6ee8e3e390..213545befe 100644 --- a/files/zh-cn/web/api/headers/index.html +++ b/files/zh-cn/web/api/headers/index.html @@ -10,7 +10,7 @@ translation_of: Web/API/Headers --- <p>{{ APIRef("Fetch") }}</p> -<p><a href="/en-US/docs/Web/API/Fetch_API">Fetch API</a> 的 <strong>Headers </strong>接口允许您对HTTP请求和响应头执行各种操作。 这些操作包括检索，设置，添加和删除。 一个Headers对象具有关联的头列表，它最初为空，由零个或多个键值对组成。你可以使用<span style="line-height: 19.0909080505371px;"> </span>{{domxref("Headers.append","append()")}} <span style="line-height: 19.0909080505371px;">方法添加 </span>之类的方法添加到此(参见 {{anch("Examples")}})。在该接口的所有方法中，标题名称由不区分大小写的字节序列匹配。</p> +<p><a href="/en-US/docs/Web/API/Fetch_API">Fetch API</a> 的 <strong>Headers </strong>接口允许您对HTTP请求和响应头执行各种操作。 这些操作包括检索，设置，添加和删除。 一个Headers对象具有关联的头列表，它最初为空，由零个或多个键值对组成。你可以使用<span style="line-height: 19.0909080505371px;"> </span>{{domxref("Headers.append","append()")}} <span style="line-height: 19.0909080505371px;">方法添加 </span>之类的方法添加到此(参见 <a href="#示例">示例</a>)。在该接口的所有方法中，标题名称由不区分大小写的字节序列匹配。</p> <p>出于安全考虑，某些头只能由用户代理控制。这些头信息包括 {{Glossary("Forbidden_header_name", "forbidden header names", 1)}} 和 {{Glossary("Forbidden_response_header_name", "forbidden response header names", 1)}}。</p> @@ -67,7 +67,7 @@ translation_of: Web/API/Headers <dd>用于返回具有给定名称的 <code>Headers</code> 对象中所有值的数组; 这个方法现在已经从规范中删除了，{{domxref("Headers.get()")}} 方法现在返回所有的值而不是一个。</dd> </dl> -<h2 id="范例">范例</h2> +<h2 id="示例">示例</h2> <p>在这个小示例中, 我们将会通过Headers构造函数创建一个新的header, 先使用append()方法添加一个header, 然后通过get()方法返回这个header的值</p> diff --git a/files/zh-cn/web/api/html_drag_and_drop_api/index.html b/files/zh-cn/web/api/html_drag_and_drop_api/index.html index 98718c5e67..d844938fe5 100644 --- a/files/zh-cn/web/api/html_drag_and_drop_api/index.html +++ b/files/zh-cn/web/api/html_drag_and_drop_api/index.html @@ -96,7 +96,7 @@ translation_of: Web/API/HTML_Drag_and_Drop_API <p>{{domxref("DataTransfer")}} 和 {{domxref("DataTransferItem")}} 接口的一个主要的不同是前者使用同步的 {{domxref("DataTransfer.getData","getData()")}} 方法去得到拖拽项的数据，而后者使用异步的 {{domxref("DataTransferItem.getAsString","getAsString()")}} 方法得到拖拽项的数据。</p> -<p class="note">注意: {{domxref("DragEvent")}} 和 {{domxref("DataTransfer")}} 接口是所有桌面浏览器都支持的。但是， {{domxref("DataTransferItem")}} 和{{domxref("DataTransferItemList")}} 接口并不被所有浏览器支持。请移步 {{anch("互操作性")}} 了解更多关于拖拽行为的信息.</p> +<p class="note">注意: {{domxref("DragEvent")}} 和 {{domxref("DataTransfer")}} 接口是所有桌面浏览器都支持的。但是， {{domxref("DataTransferItem")}} 和{{domxref("DataTransferItemList")}} 接口并不被所有浏览器支持。请移步 <a href="#互操作性">互操作性</a> 了解更多关于拖拽行为的信息.</p> <h3 id="Gecko_专用接口">Gecko 专用接口</h3> diff --git a/files/zh-cn/web/api/htmliframeelement/index.html b/files/zh-cn/web/api/htmliframeelement/index.html index b88291b452..cc60d292c1 100644 --- a/files/zh-cn/web/api/htmliframeelement/index.html +++ b/files/zh-cn/web/api/htmliframeelement/index.html @@ -52,7 +52,7 @@ translation_of: Web/API/HTMLIFrameElement <h3 id="浏览器_API_方法">浏览器 API 方法</h3> -<p>为支持浏览器{{HTMLElement("iframe")}}的需求，<code>HTMLIFrameElement</code>已经扩展了一些新的方法来让{{HTMLElement("iframe")}}有更多的能力。他们并未成为规范（参见 {{anch("Browser compatibility")}}）。</p> +<p>为支持浏览器{{HTMLElement("iframe")}}的需求，<code>HTMLIFrameElement</code>已经扩展了一些新的方法来让{{HTMLElement("iframe")}}有更多的能力。他们并未成为规范（参见 <a href="#browser_compatibility">Browser compatibility</a>）。</p> <h4 id="导航方法">导航方法</h4> diff --git a/files/zh-cn/web/api/htmlmediaelement/play/index.html b/files/zh-cn/web/api/htmlmediaelement/play/index.html index e492d4581e..4fd427fda3 100644 --- a/files/zh-cn/web/api/htmlmediaelement/play/index.html +++ b/files/zh-cn/web/api/htmlmediaelement/play/index.html @@ -50,7 +50,7 @@ translation_of: Web/API/HTMLMediaElement/play <p>虽然“autoplay”这个词常常被用于描述当媒体加载完成时立即开始播放，浏览器的自动播放策略其实也应用于脚本驱动的媒体播放，包括调用 <code>play()</code>。</p> -<p>如果 {{Glossary("user agent")}} 被设置为不允许自动或脚本驱动的媒体播放，调用 <code>play()</code> 会导致返回的 promise 被立即以 <code>NotAllowedError</code> 拒绝。网页应该对这种情况做好准备。举个例子，一个网页不应该假定播放已经自动开始而直接展示相应的用户界面，而应该在返回的 promise 被解决或拒绝后再更新用户界面。更多信息参见 {{anch("示例", "示例")}}。</p> +<p>如果 {{Glossary("user agent")}} 被设置为不允许自动或脚本驱动的媒体播放，调用 <code>play()</code> 会导致返回的 promise 被立即以 <code>NotAllowedError</code> 拒绝。网页应该对这种情况做好准备。举个例子，一个网页不应该假定播放已经自动开始而直接展示相应的用户界面，而应该在返回的 promise 被解决或拒绝后再更新用户界面。更多信息参见 <a href="#示例">示例</a>。</p> <div class="blockIndicator note"> <p><strong>注意：</strong><code>play()</code> 方法可能会让用户被询问是否给予播放媒体的权限，这可能会使返回的 promise 延迟解决。你应该确保你的代码不需要即时响应。</p> diff --git a/files/zh-cn/web/api/idbcursor/direction/index.html b/files/zh-cn/web/api/idbcursor/direction/index.html index 00ca2da3fa..54de6a616d 100644 --- a/files/zh-cn/web/api/idbcursor/direction/index.html +++ b/files/zh-cn/web/api/idbcursor/direction/index.html @@ -5,7 +5,7 @@ translation_of: Web/API/IDBCursor/direction --- <p>{{ APIRef("IDBCursor") }}</p> <div> - <p> {{domxref("IDBCursor")}} 的方向属性是一个 {{domxref("DOMString")}} ，表示游标遍历的方向， (比如可以通过 {{domxref("IDBObjectStore.openCursor")}} 设置). 查看下文中 {{anch("Values")}} 章节获取可取值.</p> + <p> {{domxref("IDBCursor")}} 的方向属性是一个 {{domxref("DOMString")}} ，表示游标遍历的方向， (比如可以通过 {{domxref("IDBObjectStore.openCursor")}} 设置). 查看下文中<a href="#取值">取值</a>章节获取可取值.</p> </div> <h2 id="语法">语法</h2> <pre class="brush: js" style="font-size: 14px;">cursor.direction;</pre> diff --git a/files/zh-cn/web/api/indexeddb_api/browser_storage_limits_and_eviction_criteria/index.html b/files/zh-cn/web/api/indexeddb_api/browser_storage_limits_and_eviction_criteria/index.html index 7934d15e70..380cb097d5 100644 --- a/files/zh-cn/web/api/indexeddb_api/browser_storage_limits_and_eviction_criteria/index.html +++ b/files/zh-cn/web/api/indexeddb_api/browser_storage_limits_and_eviction_criteria/index.html @@ -50,14 +50,14 @@ translation_of: Web/API/IndexedDB_API/Browser_storage_limits_and_eviction_criter <ul> <li>持久化存储：这种数据是希望长久保留的，只有的当用户选择清除才会被删除掉（比如，<font><font>在Firefox中，您可以通过转到</font></font><em><font><font>“首选项”</font></font></em><font><font>并使用“ </font></font><em><font><font>隐私和安全”>“Cookie和站点数据”</font></font></em><font><font>下的选项，</font><font>选择删除所有存储的数据或仅删除所选来源的存储数据</font></font>）。</li> - <li>临时存储：这种数据不用保存很久，当最近一次使用时{{anch("Storage limits")}}达到限制大小就会被自动清理掉（{{anch("LRU policy")}}）。</li> + <li>临时存储：这种数据不用保存很久，当最近一次使用时<a href="#储存限制">储存限制</a>达到限制大小就会被自动清理掉（<a href="#lru策略">LRU策略</a>）。</li> </ul> <p><font>在Firefox中，当使用持久存储时，会向用户提供一个UI弹出窗口，提醒他们这些数据将持续存在，并询问他们是否对此感到满意。</font><font>临时数据存储不会引发任何用户提示。</font></p> <p><font>默认的是临时存储；开发人员可以选择使用</font>{{domxref("StorageManager.persist()")}}方法使用持久储存。</p> -<h2 id="数据存储在哪里？"><font><font>数据存储在哪里？</font></font></h2> +<h2 id="数据存储在哪里？">数据存储在哪里？</h2> <p><font>每种存储类型代表一个单独的存储库。</font><font>这是用户Firefox配置文件下目录的实际映射（其他浏览器可能略有不同）：</font></p> diff --git a/files/zh-cn/web/api/indexeddb_api/using_indexeddb/index.html b/files/zh-cn/web/api/indexeddb_api/using_indexeddb/index.html index 7c7f278f51..0802eed354 100644 --- a/files/zh-cn/web/api/indexeddb_api/using_indexeddb/index.html +++ b/files/zh-cn/web/api/indexeddb_api/using_indexeddb/index.html @@ -119,7 +119,7 @@ request.onsuccess = function(event) { <h3 id="创建和更新数据库版本号">创建和更新数据库版本号</h3> -<p>当你创建一个新的数据库或者增加已存在的数据库的版本号（当{{ anch("打开数据库")}}时，指定一个比之前更大的版本号）， <code>onupgradeneeded</code> 事件会被触发，<a href="https://developer.mozilla.org/en-US/docs/Web/API/IDBVersionChangeEvent">IDBVersionChangeEvent</a> 对象会作为参数传递给绑定在 <code>request.result</code>（例如例子中的 <code>db</code>）上的 <code>onversionchange </code>事件处理函数，你应该在此创建该版本需要的对象仓库（object store）。</p> +<p>当你创建一个新的数据库或者增加已存在的数据库的版本号（当<a href="#打开数据库">打开数据库</a>时，指定一个比之前更大的版本号）， <code>onupgradeneeded</code> 事件会被触发，<a href="https://developer.mozilla.org/en-US/docs/Web/API/IDBVersionChangeEvent">IDBVersionChangeEvent</a> 对象会作为参数传递给绑定在 <code>request.result</code>（例如例子中的 <code>db</code>）上的 <code>onversionchange </code>事件处理函数，你应该在此创建该版本需要的对象仓库（object store）。</p> <p>要更新数据库的 schema，也就是创建或者删除对象存储空间，需要实现<span style="line-height: 21px;"> </span><code style="font-size: 14px; color: rgb(51, 51, 51);">onupgradeneeded</code><span style="line-height: 21px;"> 处理程序，这个处理程序将会作为一个允许你处理对象存储空间的 </span><code style="font-size: 14px; color: rgb(51, 51, 51);">versionchange</code><span style="line-height: 21px;"> 事务的一部分被调用。</span></p> @@ -321,7 +321,7 @@ customerData.forEach(function(customer) { }; });</pre> -<p>调用 call() 方法产生的请求的 result 是被添加的数据的键。所以在该例中，它应该全等于被添加对象的 ssn 属性，因为对象仓库使用 ssn 属性作为键路径（key path)。注意，add() 方法的调用时，对象仓库中不能存在相同键的对象。如果你想修改一个已存在的条目，或者你不关心该数据是否已存在，你可以使用 put() 方法，就像下面 {{ anch("Updating an entry in the database") }} 模块所展示的。</p> +<p>调用 call() 方法产生的请求的 result 是被添加的数据的键。所以在该例中，它应该全等于被添加对象的 ssn 属性，因为对象仓库使用 ssn 属性作为键路径（key path)。注意，add() 方法的调用时，对象仓库中不能存在相同键的对象。如果你想修改一个已存在的条目，或者你不关心该数据是否已存在，你可以使用 put() 方法，就像下面 <a href="#更新数据库中的记录">更新数据库中的记录</a> 模块所展示的。</p> <h2 id="从数据库中删除数据">从数据库中删除数据</h2> diff --git a/files/zh-cn/web/api/intersection_observer_api/timing_element_visibility/index.html b/files/zh-cn/web/api/intersection_observer_api/timing_element_visibility/index.html index 37c36f7c23..643a5cc3f6 100644 --- a/files/zh-cn/web/api/intersection_observer_api/timing_element_visibility/index.html +++ b/files/zh-cn/web/api/intersection_observer_api/timing_element_visibility/index.html @@ -302,7 +302,7 @@ function startup() { <h3 id="Handling_periodic_actions">Handling periodic actions</h3> -<p>Our interval handler, <code>handleRefreshInterval()</code>, is called about once per second courtesy of the call to {{domxref("WindowOrGlobalScope.setInterval", "setInterval")}} made in the <code>startup()</code> function {{anch("Setting up", "described above")}}. Its main job is to update the timers every second and schedule a redraw to update the timers we'll be drawing within each ad.</p> +<p>Our interval handler, <code>handleRefreshInterval()</code>, is called about once per second courtesy of the call to {{domxref("WindowOrGlobalScope.setInterval", "setInterval")}} made in the <code>startup()</code> function <a href="#setting_up">described above</a>. Its main job is to update the timers every second and schedule a redraw to update the timers we'll be drawing within each ad.</p> <pre class="brush: js">function handleRefreshInterval() { let redrawList = []; @@ -333,7 +333,7 @@ function startup() { <h3 id="Updating_an_ad's_visibility_timer">Updating an ad's visibility timer</h3> -<p>Previously (see {{anch("Handling document visibility changes")}} and {{anch("Handling periodic actions")}}), we've seen that when we need to update an ad's "total visible time" counter, we call a function named <code>updateAdTimer()</code> to do so. This function takes as an input an ad's {{domxref("HTMLDivElement")}} object. Here it is:</p> +<p>Previously (see <a href="#handling_document_visibility_changes">Handling document visibility changes</a> and <a href="#handling_periodic_actions">Handling periodic actions</a>), we've seen that when we need to update an ad's "total visible time" counter, we call a function named <code>updateAdTimer()</code> to do so. This function takes as an input an ad's {{domxref("HTMLDivElement")}} object. Here it is:</p> <pre class="brush: js">function updateAdTimer(adBox) { let lastStarted = adBox.dataset.lastViewStarted; @@ -382,7 +382,7 @@ function startup() { <h3 id="Building_the_page_contents">Building the page contents</h3> -<p>The <code>buildContents()</code> function is called by the {{anch("Setting up", "startup code")}} to select and insert into the document the articles and ads to be presented:</p> +<p>The <code>buildContents()</code> function is called by the <a href="#setting_up">startup code</a> to select and insert into the document the articles and ads to be presented:</p> <pre class="brush: js">let loremIpsum = "<p>Lorem ipsum dolor sit amet, consectetur adipiscing" + " elit. Cras at sem diam. Vestibulum venenatis massa in tincidunt" + @@ -525,11 +525,11 @@ function buildContents() { <p>Finally, we set the ID of the <code><div></code> which will show the timer we'll present in the ad to show how long it's been visible, giving it the class <code>"timer"</code>. The initial text is set to "0:00", to represent the starting time of 0 minutes and 0 seconds, and it's appended to the ad.</p> -<p>If we're not replacing an existing ad, we need to append the element to the content area of the page using {{domxref("Node.appendChild", "Document.appendChild()")}}. If we're replacing an ad, it's already there, with its contents replaced with the new ad's. Then we call the {{domxref("IntersectionObserver.observe", "observe()")}} method on our Intersection Observer, <code>adObserver</code>, to start watching the ad for changes to its intersection with the viewport. From now on, any time the ad becomes 100% obscured or even a single pixel becomes visible, or the ad passes through 75% visible in one way or another, the {{anch("Handling intersection changes", "observer's callback")}} is executed.</p> +<p>If we're not replacing an existing ad, we need to append the element to the content area of the page using {{domxref("Node.appendChild", "Document.appendChild()")}}. If we're replacing an ad, it's already there, with its contents replaced with the new ad's. Then we call the {{domxref("IntersectionObserver.observe", "observe()")}} method on our Intersection Observer, <code>adObserver</code>, to start watching the ad for changes to its intersection with the viewport. From now on, any time the ad becomes 100% obscured or even a single pixel becomes visible, or the ad passes through 75% visible in one way or another, the <a href="#handling_intersection_changes">observer's callback</a> is executed.</p> <h3 id="Replacing_an_existing_ad">Replacing an existing ad</h3> -<p>Our {{anch("Handling intersection changes", "observer's callback")}} keeps an eye out for ads which become 100% obscured and have a total visible time of at least one minute. When that happens, the <code>replaceAd()</code> function is called with that ad's element as an input, so that the old ad can be replaced with a new one.</p> +<p>Our <a href="#handling_intersection_changes">observer's callback</a> keeps an eye out for ads which become 100% obscured and have a total visible time of at least one minute. When that happens, the <code>replaceAd()</code> function is called with that ad's element as an input, so that the old ad can be replaced with a new one.</p> <pre class="brush: js">function replaceAd(adBox) { let visibleTime; @@ -544,7 +544,7 @@ function buildContents() { <p><code>replaceAd()</code> begins by calling <code>updateAdTimer()</code> on the existing ad, to ensure that its timer is up-to-date. This ensures that when we read its <code>totalViewTime</code>, we see the exact final value for how long the ad was visible to the user. We then report that data; in this case, by logging it to console, but in the real world, you'd submit the information to an ad service's API or save it into a database.</p> -<p>Then we load a new ad by calling <code>{{anch("Creating an ad", "loadRandomAd()")}}</code>, specifying the ad to be replaced as an input parameter. As we saw previously, <code>loadRandomAd()</code> will replace an existing ad with content and data corresponding to a new ad, if you specify an existing ad's element as an input parameter.</p> +<p>Then we load a new ad by calling <code><a href="#creating_an_ad">loadRandomAd()</a></code>, specifying the ad to be replaced as an input parameter. As we saw previously, <code>loadRandomAd()</code> will replace an existing ad with content and data corresponding to a new ad, if you specify an existing ad's element as an input parameter.</p> <p>The new ad's element object is returned to the caller in case it's needed.</p> </div> diff --git a/files/zh-cn/web/api/keyboardevent/index.html b/files/zh-cn/web/api/keyboardevent/index.html index 1439268d80..b2a136a052 100644 --- a/files/zh-cn/web/api/keyboardevent/index.html +++ b/files/zh-cn/web/api/keyboardevent/index.html @@ -108,7 +108,7 @@ translation_of: Web/API/KeyboardEvent <div class="note"><strong>Note:</strong> This does not describe the locale of the data being entered. A user may be using one keyboard layout while typing text in a different language.</div> </dd> <dt>{{domxref("KeyboardEvent.location")}} {{Readonlyinline}}</dt> - <dd>Returns a {{jsxref("Number")}} representing the location of the key on the keyboard or other input device. A list of the constants identifying the locations is shown above in {{anch("Keyboard locations")}}.</dd> + <dd>Returns a {{jsxref("Number")}} representing the location of the key on the keyboard or other input device. A list of the constants identifying the locations is shown above in <a href="#键盘定位">Keyboard locations</a>.</dd> <dt>{{domxref("KeyboardEvent.metaKey")}} {{Readonlyinline}}</dt> <dd>Returns a {{jsxref("Boolean")}} that is <code>true</code> if the <kbd>Meta</kbd> key (on Mac keyboards, the <kbd>⌘ Command</kbd> key; on Windows keyboards, the Windows key (<kbd>⊞</kbd>)) was active when the key event was generated.</dd> <dt>{{domxref("KeyboardEvent.repeat")}} {{Readonlyinline}}</dt> diff --git a/files/zh-cn/web/api/keyboardevent/key/key_values/index.html b/files/zh-cn/web/api/keyboardevent/key/key_values/index.html index 5923333c5d..48c2359234 100644 --- a/files/zh-cn/web/api/keyboardevent/key/key_values/index.html +++ b/files/zh-cn/web/api/keyboardevent/key/key_values/index.html @@ -895,7 +895,7 @@ translation_of: Web/API/KeyboardEvent/key/Key_Values <td>A dead "combining" key; that is, a key which is used in tandem with other keys to generate accented and other modified characters. If pressed by itself, it doesn't generate a character. If you wish to identify which specific dead key was pressed (in cases where more than one exists), you can do so by examining the {{domxref("KeyboardEvent")}}'s associated {{event("compositionupdate")}} event's {{domxref("CompositionEvent.data", "data")}} property.</td> <td></td> <td></td> - <td>See {{anch("Dead keycodes for Linux")}} below</td> + <td>See <a href="#dead_keycodes_for_linux">Dead keycodes for Linux</a> below</td> <td></td> </tr> <tr> @@ -2393,7 +2393,7 @@ translation_of: Web/API/KeyboardEvent/key/Key_Values </ul> <div class="note"> -<p>Remote controls typically include keys whose values are already defined elsewhere, such as under {{anch("Multimedia keys")}} or {{anch("Audio control keys")}}. Those keys' values will match what's documented in those tables.</p> +<p>Remote controls typically include keys whose values are already defined elsewhere, such as under <a href="#multimedia_keys">Multimedia keys</a> or <a href="#audio_control_keys">Audio control keys</a>. Those keys' values will match what's documented in those tables.</p> </div> <table class="standard-table"> diff --git a/files/zh-cn/web/api/mediadevices/getdisplaymedia/index.html b/files/zh-cn/web/api/mediadevices/getdisplaymedia/index.html index c9f62fd8f4..ec05503d91 100644 --- a/files/zh-cn/web/api/mediadevices/getdisplaymedia/index.html +++ b/files/zh-cn/web/api/mediadevices/getdisplaymedia/index.html @@ -41,7 +41,7 @@ translation_of: Web/API/MediaDevices/getDisplayMedia <p>一个被解析为 {{domxref("MediaStream")}} 的 {{jsxref("Promise")}}，其中包含一个视频轨道。视频轨道的内容来自用户选择的屏幕区域以及一个可选的音频轨道。</p> <div class="blockIndicator note"> -<p><strong>Note:</strong> 浏览器对音频的支持程度各不相同，既取决于是否支持，也取决于音频源. 点击 {{anch("Browser compatibility", "compatibility table")}} 来查看各个浏览器的支持性.</p> +<p><strong>Note:</strong> 浏览器对音频的支持程度各不相同，既取决于是否支持，也取决于音频源. 点击 <a href="#浏览器兼容性">浏览器兼容性</a> 来查看各个浏览器的支持性.</p> </div> <h3 id="异常">异常</h3> diff --git a/files/zh-cn/web/api/mutationobserver/mutationobserver/index.html b/files/zh-cn/web/api/mutationobserver/mutationobserver/index.html index 9846fe7648..956d9d24bd 100644 --- a/files/zh-cn/web/api/mutationobserver/mutationobserver/index.html +++ b/files/zh-cn/web/api/mutationobserver/mutationobserver/index.html @@ -22,7 +22,7 @@ translation_of: Web/API/MutationObserver/MutationObserver <dl> <dt><code><span class="hidden"> </span><span class="hidden"> </span>callback</code></dt> - <dd>一个回调函数，每当被指定的节点或子树以及配置项有Dom变动时会被调用。回调函数拥有两个参数：一个是描述所有被触发改动的 {{domxref("MutationRecord")}} 对象数组，另一个是调用该函数的<code>MutationObserver</code> 对象。参见下方的{{anch("Example", "示例")}}了解更多细节<span class="hidden"> </span><span class="hidden"> </span></dd> + <dd>一个回调函数，每当被指定的节点或子树以及配置项有Dom变动时会被调用。回调函数拥有两个参数：一个是描述所有被触发改动的 {{domxref("MutationRecord")}} 对象数组，另一个是调用该函数的<code>MutationObserver</code> 对象。参见下方的<a href="#示例">示例</a>了解更多细节<span class="hidden"> </span><span class="hidden"> </span></dd> </dl> <h3 id="返回值">返回值</h3> diff --git a/files/zh-cn/web/api/navigator/registerprotocolhandler/index.html b/files/zh-cn/web/api/navigator/registerprotocolhandler/index.html index fd1de837c9..bbace1dc5a 100644 --- a/files/zh-cn/web/api/navigator/registerprotocolhandler/index.html +++ b/files/zh-cn/web/api/navigator/registerprotocolhandler/index.html @@ -67,7 +67,7 @@ translation_of: Web/API/Navigator/registerProtocolHandler <h2 id="允许的协议标记">允许的协议标记</h2> -<p>出于安全考虑，<code>registerProtocolHandler()</code> 严格限制了允许注册的协议标记。以 <code>web+</code> 作为前缀的方式可以注册一个自定义的标记协议，至少要有5个字符的长度(包括 <code>web+</code> 前缀)，而且只能使用小写的ASCII字母作为名称。例如 <code>web+burger</code> ，如下面的{{anch("示例")}}所示。</p> +<p>出于安全考虑，<code>registerProtocolHandler()</code> 严格限制了允许注册的协议标记。以 <code>web+</code> 作为前缀的方式可以注册一个自定义的标记协议，至少要有5个字符的长度(包括 <code>web+</code> 前缀)，而且只能使用小写的ASCII字母作为名称。例如 <code>web+burger</code> ，如下面的<a href="#示例">示例</a>所示。</p> <p>除此之外，还可以使用下文所列的白名单中的协议标记:</p> diff --git a/files/zh-cn/web/api/node/firstchild/index.html b/files/zh-cn/web/api/node/firstchild/index.html index 9c9808c4b5..c4b7410aea 100644 --- a/files/zh-cn/web/api/node/firstchild/index.html +++ b/files/zh-cn/web/api/node/firstchild/index.html @@ -12,9 +12,9 @@ translation_of: Web/API/Node/firstChild --- <div>{{ ApiRef("DOM") }}</div> -<p><strong>Node.firstChild </strong>只读属性返回树中节点的第一个子节点，如果节点是无子节点，则返回 <code>null。</code></p> +<p><strong>Node.firstChild</strong> 只读属性返回树中节点的第一个子节点，如果节点是无子节点，则返回 <code>null。</code></p> -<h3 id="Syntax" name="Syntax">语法</h3> +<h3 id="语法">语法</h3> <pre class="syntaxbox"><em>var childNode</em> = <em>node</em>.firstChild; </pre> @@ -23,11 +23,11 @@ translation_of: Web/API/Node/firstChild <p>如果有一个子节点, childNode 是节点的第一个子节点的引用，否则为null。</p> -<h3 id="Example" name="Example">例子</h3> +<h3 id="示例">示例</h3> -<h4 id="Example" name="Example">Example 1</h4> +<h4 id="示例_1">示例 1</h4> -<p>这个例子演示了<code>firstChild</code>属性的用法以及空白符节点对该属性的使用可能造成的影响.参见{{ Anch("备注") }}部分了解Gecko DOM中关于处理空白符的更多信息.</p> +<p>这个例子演示了<code>firstChild</code>属性的用法以及空白符节点对该属性的使用可能造成的影响.参见<a href="#备注">备注</a>部分了解Gecko DOM中关于处理空白符的更多信息.</p> <pre><p id="para-01"> <span>First span</span> @@ -53,14 +53,14 @@ translation_of: Web/API/Node/firstChild </script> </pre> -<h4 id="Example" name="Example">Example 2</h4> +<h4 id="示例_2">示例 2</h4> <p><span id="result_box" lang="zh-CN"><span>假设我们有</span><span>一个HTML文档,如果该文档有一个DTD(文档类型定义),则下面的语句会弹出</span></span><code>[object DocumentType],如果该文档没有一个DTD,</code><span id="result_box" lang="zh-CN"><span>则下面的语句会弹出</span></span><code>[object HTMLHtmlElement]</code>.</p> <pre class="eval">alert(document.firstChild); </pre> -<h3 id=".E6.B3.A8.E6.84.8F" name=".E6.B3.A8.E6.84.8F">备注</h3> +<h3 id="备注">备注</h3> <p>Gecko内核的浏览器会在源代码中标签内部有空白符的地方插入一个文本结点到文档中.因此,使用诸如 <a href="/zh-CN/docs/Web/API/Node/firstChild" title="Node.firstChild 只读属性返回树中节点的第一个子节点，如果节点是无子节点，则返回 null。"><code>Node.firstChild</code></a> 和 <a href="/zh-CN/docs/Web/API/Node/previousSibling" title="返回当前节点的前一个兄弟节点,没有则返回null."><code>Node.previousSibling</code></a> 之类的方法可能会引用到一个空白符文本节点, @@ -69,7 +69,7 @@ translation_of: Web/API/Node/firstChild <p>详情请参见 <a class="new" href="/zh-CN/docs/Whitespace_in_the_DOM" rel="nofollow">DOM 中的空白符</a> 和<a class="external" href="http://www.w3.org/DOM/faq.html#emptytext" rel="noopener">W3C DOM 3 FAQ: 为什么一些文本节点是空的</a>.</p> -<h3 id="Specification" name="Specification">规范</h3> +<h3 id="规范">规范</h3> <p><a class="external" href="http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#attribute-firstChild">DOM Level 1 Core: firstChild</a></p> diff --git a/files/zh-cn/web/api/node/nodetype/index.html b/files/zh-cn/web/api/node/nodetype/index.html index f535443f96..e3e23748cd 100644 --- a/files/zh-cn/web/api/node/nodetype/index.html +++ b/files/zh-cn/web/api/node/nodetype/index.html @@ -24,7 +24,7 @@ translation_of: Web/API/Node/nodeType <pre class="syntaxbox"><em>var <var>type</var></em> = <var>node</var>.nodeType; </pre> -<p>返回一个整数，其代表的是节点类型。其所有可能的值请参考 {{anch("节点类型常量")}}.</p> +<p>返回一个整数，其代表的是节点类型。其所有可能的值请参考 <a href="#节点类型常量">节点类型常量</a>.</p> <h2 id="常量">常量</h2> diff --git a/files/zh-cn/web/api/notifications_api/using_the_notifications_api/index.html b/files/zh-cn/web/api/notifications_api/using_the_notifications_api/index.html index 49d914d0c5..ed97432158 100644 --- a/files/zh-cn/web/api/notifications_api/using_the_notifications_api/index.html +++ b/files/zh-cn/web/api/notifications_api/using_the_notifications_api/index.html @@ -17,9 +17,9 @@ original_slug: Web/API/notification/Using_Web_Notifications <p>通常，系统通知是指操作系统的标准通知机制，例如思考典型的桌面系统或移动设备如何发布通知。</p> -<p> <img src="https://mdn.mozillademos.org/files/10959/android-notification.png"> </p> +<p><img src="https://mdn.mozillademos.org/files/10959/android-notification.png"></p> -<p> <img src="https://mdn.mozillademos.org/files/10961/mac-notification.png"></p> +<p><img src="https://mdn.mozillademos.org/files/10961/mac-notification.png"></p> <p>系统通知系统当然会因平台和浏览器而异，但无需担心，通知API被编写为通用的，足以与大多数系统通知系统兼容。</p> @@ -43,7 +43,7 @@ original_slug: Web/API/notification/Using_Web_Notifications <dl> <dt><code>default</code></dt> - <dd>用户还未被询问是否授权，所以通知不会被显示。参看 {{anch("Getting permission")}} 以了解如何请求显示通知的权限。</dd> + <dd>用户还未被询问是否授权，所以通知不会被显示。参看 <a href="#获得权限">获得权限</a> 以了解如何请求显示通知的权限。</dd> <dt><code>granted</code></dt> <dd>表示之前已经询问过用户，并且用户已经授予了显示通知的权限。</dd> <dt><code>denied</code></dt> diff --git a/files/zh-cn/web/api/oscillatornode/index.html b/files/zh-cn/web/api/oscillatornode/index.html index 69275dff46..aacf53ca9b 100644 --- a/files/zh-cn/web/api/oscillatornode/index.html +++ b/files/zh-cn/web/api/oscillatornode/index.html @@ -38,7 +38,7 @@ translation_of: Web/API/OscillatorNode <dl> <dt>{{domxref("OscillatorNode.OscillatorNode", "OscillatorNode()")}}</dt> - <dd>创建一个OscillatorNode对象的示例, 为node{{anch("properties")}}提供可选的一个定义默认值的对象. 如果默认值可接受,你可以简单地调用{{domxref("AudioContext.createOscillator()")}}工厂方法.</dd> + <dd>创建一个OscillatorNode对象的示例, 为node<a href="#属性">属性</a>提供可选的一个定义默认值的对象. 如果默认值可接受,你可以简单地调用{{domxref("AudioContext.createOscillator()")}}工厂方法.</dd> </dl> <h2 id="属性">属性</h2> diff --git a/files/zh-cn/web/api/payment_request_api/concepts/index.html b/files/zh-cn/web/api/payment_request_api/concepts/index.html index 30e58235f5..d2addc6acd 100644 --- a/files/zh-cn/web/api/payment_request_api/concepts/index.html +++ b/files/zh-cn/web/api/payment_request_api/concepts/index.html @@ -70,7 +70,7 @@ original_slug: Web/API/支付_请求_接口/Concepts <ol> <li><strong>确保交易正确进行。</strong> 交易正确进行的条件取决于不同的支付类型和用户的支付请求；例如，如果用户选择了信用卡支付，而收款方并不支持这种方式，交易就无法正确进行。</li> - <li><strong>响应用户代理发起的对商家进行认证的请求（在处理机支持商家认证的前提下）。</strong> 详细说明请参考{{anch("Merchant validation")}}。</li> + <li><strong>响应用户代理发起的对商家进行认证的请求（在处理机支持商家认证的前提下）。</strong> 详细说明请参考<a href="#商家认证">商家认证</a>。</li> <li><strong>验证用户提交的信息有资格发起一次有效交易。</strong>这一步骤会创建并返回一个基于具体支付方式的对象，此对象包含处理交易所需要的信息。</li> </ol> diff --git a/files/zh-cn/web/api/performance_timeline/index.html b/files/zh-cn/web/api/performance_timeline/index.html index 7f7839fbe7..280d3c949d 100644 --- a/files/zh-cn/web/api/performance_timeline/index.html +++ b/files/zh-cn/web/api/performance_timeline/index.html @@ -5,7 +5,7 @@ translation_of: Web/API/Performance_Timeline --- <div>{{DefaultAPISidebar("Performance Timeline API")}}</div> -<p>The <strong>Performance Timeline</strong> API defines extensions to the {{domxref("Performance")}} interface to support client-side latency measurements within applications. The extensions provide interfaces to retrieve {{domxref("PerformanceEntry","performance entry metrics", '', 'true')}} based on specific filter criteria. The standard also includes interfaces that allow an application to define <em>{{anch("Performance_Observers","performance observer", '', 'true')}}</em> callbacks that are notified when specific performance events are added to the browser's <em>performance timeline</em>.</p> +<p>The <strong>Performance Timeline</strong> API defines extensions to the {{domxref("Performance")}} interface to support client-side latency measurements within applications. The extensions provide interfaces to retrieve {{domxref("PerformanceEntry","performance entry metrics", '', 'true')}} based on specific filter criteria. The standard also includes interfaces that allow an application to define <a href="#performance_observers"><em>performance observer</em></a> callbacks that are notified when specific performance events are added to the browser's <em>performance timeline</em>.</p> <p>This document provides an overview of the standard's interfaces. For more details about the interfaces, see the reference pages and <a href="/Web/API/Performance_Timeline/Using_Performance_Timeline">Using Performance Timeline</a>.</p> diff --git a/files/zh-cn/web/api/resource_timing_api/index.html b/files/zh-cn/web/api/resource_timing_api/index.html index 238135639e..6b02dc7532 100644 --- a/files/zh-cn/web/api/resource_timing_api/index.html +++ b/files/zh-cn/web/api/resource_timing_api/index.html @@ -5,17 +5,13 @@ translation_of: Web/API/Resource_Timing_API --- <div>{{DefaultAPISidebar("Resource Timing API")}}</div> -<div> </div> - -<div>通过<strong><code>Resource Timing API</code></strong>可以获取和分析应用资源加载的详细网络计时数据, 应用程序可以</div> +<div>通过<strong><code>Resource Timing API</code></strong>可以获取和分析应用资源加载的详细网络计时数据, 应用程序可以</div> <div>使用时间度量标准来确定加载特定资源所需要的时间, 比如 {{domxref("XMLHttpRequest")}}, {{SVGElement("SVG","SVG element")}}, 图片, 或者脚本.</div> -<div> </div> - -<p><code><strong>Resource Timing API</strong></code>为网络事件(如重定向的开始和结束事件, DNS查找的开始和结束事件, 请求开始, 响应开始和结束时间等)生成有高分辨率时间戳( {{domxref("DOMHighResTimeStamp","high-resolution timestamps", "", 1)}} )的资源加载时间线, 并提供了资源大小和资源类型.</p> +<p><code><strong>Resource Timing API</strong></code>为网络事件(如重定向的开始和结束事件, DNS查找的开始和结束事件, 请求开始, 响应开始和结束时间等)生成有高分辨率时间戳( {{domxref("DOMHighResTimeStamp","high-resolution timestamps", "", 1)}} )的资源加载时间线, 并提供了资源大小和资源类型.</p> -<p>本文档是Resource Timing API的概述. 更多详细信息, 请查阅每个接口的参考说明, <a href="/Web/API/Resource_Timing/Using_Resource_Timing">Using Resource Timing</a> 和 {{anch("See_Also","附录")}} 的参考链接. 有关资源时序处理模型的图示，请参阅 <a href="https://w3c.github.io/resource-timing/#process">resource timing phases</a> .</p> +<p>本文档是Resource Timing API的概述. 更多详细信息, 请查阅每个接口的参考说明, <a href="/Web/API/Resource_Timing/Using_Resource_Timing">Using Resource Timing</a> 和 <a href="#参见">参见</a> 的参考链接. 有关资源时序处理模型的图示，请参阅 <a href="https://w3c.github.io/resource-timing/#process">resource timing phases</a> .</p> <p class="note"><code>PerformanceResourceTiming</code> 接口只统计{{domxref("PerformanceEntry","performance entries", "", 1)}} 中 {{domxref("PerformanceEntry.entryType","entryType")}} 为"<code>resource</code>"类型的 {{domxref("PerformanceEntry")}}</p> @@ -65,7 +61,7 @@ translation_of: Web/API/Resource_Timing_API <p>To test your browser's support for these interfaces, run the <code><a href="https://mdn.github.io/dom-examples/performance-apis/perf-api-support.html">perf-api-support</a></code> application.</p> -<h2 id="附录">附录</h2> +<h2 id="参见">参见</h2> <ul> <li><a href="https://w3c.github.io/resource-timing/">Resource Timing Standard</a>; W3C Editor's Draft</li> diff --git a/files/zh-cn/web/api/resource_timing_api/using_the_resource_timing_api/index.html b/files/zh-cn/web/api/resource_timing_api/using_the_resource_timing_api/index.html index ed1981d7e0..a6c62b98b7 100644 --- a/files/zh-cn/web/api/resource_timing_api/using_the_resource_timing_api/index.html +++ b/files/zh-cn/web/api/resource_timing_api/using_the_resource_timing_api/index.html @@ -9,7 +9,7 @@ translation_of: Web/API/Resource_Timing_API/Using_the_Resource_Timing_API <p>这个接口提供了使用 {{domxref("DOMHighResTimeStamp","高精度时间戳")}} 度量的资源加载时间轴。此时间轴包含众多网络事件的时间，如重定向开始和结束时间，开始请求资源时间，DNS查询开始和结束时间，响应开始和结束时间等等。也包含了请求到的资源的大小、请求发起者的<em>类型</em>。</p> -<p>这篇文档展示了如何使用 Resource Timing 接口。获取更详细的信息或示例，请查看每个接口的文档和{{anch("See also")}}章节。</p> +<p>这篇文档展示了如何使用 Resource Timing 接口。获取更详细的信息或示例，请查看每个接口的文档和<a href="#see_also">See also</a>章节。</p> <p><a href="https://mdn.github.io/dom-examples/performance-apis/Using_the_Resource_Timing_API.html">Github</a>上有一个真实的例子，这里是它的源码 <a href="https://github.com/mdn/dom-examples/blob/master/performance-apis/Using_the_Resource_Timing_API.html">source code</a>. 欢迎提pull request和<a href="https://github.com/mdn/dom-examples/issues">报告bug</a>。</p> diff --git a/files/zh-cn/web/api/response/redirected/index.html b/files/zh-cn/web/api/response/redirected/index.html index ad43bb7596..276ec66daa 100644 --- a/files/zh-cn/web/api/response/redirected/index.html +++ b/files/zh-cn/web/api/response/redirected/index.html @@ -10,7 +10,7 @@ translation_of: Web/API/Response/redirected <p>{{domxref("Response")}} 接口中只读的 <strong><code>redirected</code></strong> 属性表明该响应是否为一个重定向的请求的结果.</p> <div class="note"> -<p>依赖 <strong><code>redirected</code></strong> 过滤重定向很容易导致虚假的重定向阻止你的内容像预期一样生效. 因此, 当调用 {{domxref("GlobalFetch.fetch", "fetch()")}} 时你应该进行过滤操作. 详见下面 {{anch("禁用重定向")}} 的例子.</p> +<p>依赖 <strong><code>redirected</code></strong> 过滤重定向很容易导致虚假的重定向阻止你的内容像预期一样生效. 因此, 当调用 {{domxref("GlobalFetch.fetch", "fetch()")}} 时你应该进行过滤操作. 详见下面 <a href="#禁用重定向">禁用重定向</a> 的例子.</p> </div> <h2 id="语法">语法</h2> @@ -25,7 +25,7 @@ translation_of: Web/API/Response/redirected <h3 id="检测重定向">检测重定向</h3> -<p>检测某个响应是否来自一个重定向的请求就如同检测 {{domxref("Response")}} 对象中这个标识一样容易. 在下面的代码中, 当 fetch 操作引起了重定向, 一段文本信息会被插入到元素中. 但需要注意的是, 这不像下面 {{anch("禁用重定向")}} 所描述的当重定向不合法时全部阻止的行为一样安全.</p> +<p>检测某个响应是否来自一个重定向的请求就如同检测 {{domxref("Response")}} 对象中这个标识一样容易. 在下面的代码中, 当 fetch 操作引起了重定向, 一段文本信息会被插入到元素中. 但需要注意的是, 这不像下面 <a href="#禁用重定向">禁用重定向</a> 所描述的当重定向不合法时全部阻止的行为一样安全.</p> <pre class="brush: js">fetch("awesome-picture.jpg").then(function(response) { let elem = document.getElementById("warning-message-box"); diff --git a/files/zh-cn/web/api/rtcsessiondescription/index.html b/files/zh-cn/web/api/rtcsessiondescription/index.html index ea3cf46721..9101239381 100644 --- a/files/zh-cn/web/api/rtcsessiondescription/index.html +++ b/files/zh-cn/web/api/rtcsessiondescription/index.html @@ -15,7 +15,7 @@ translation_of: Web/API/RTCSessionDescription <dl> <dt>{{domxref("RTCSessionDescription.type")}} {{ReadOnlyInline}}</dt> - <dd><code>{{anch("RTCSdpType")}}</code> 会话描述类型的原型枚举。</dd> + <dd><code><a href="#rtcsdptype">RTCSdpType</a></code> 会话描述类型的原型枚举。</dd> </dl> <dl> diff --git a/files/zh-cn/web/api/screen_capture_api/using_screen_capture/index.html b/files/zh-cn/web/api/screen_capture_api/using_screen_capture/index.html index e98533ac97..ee0dac5103 100644 --- a/files/zh-cn/web/api/screen_capture_api/using_screen_capture/index.html +++ b/files/zh-cn/web/api/screen_capture_api/using_screen_capture/index.html @@ -48,7 +48,7 @@ original_slug: Web/API/Screen_Capture_API/使用屏幕捕获API <p>Either way, the {{Glossary("user agent")}} responds by presenting a user interface that prompts the user to choose the screen area to share. Both of these implementations of <code>startCapture()</code> return the {{domxref("MediaStream")}} containing the captured display imagery.</p> -<p>See {{anch("Options and constraints")}}, below, for more on both how to specify the type of surface you want as well as other ways to adjust the resulting stream.</p> +<p>See <a href="#options_and_constraints">Options and constraints</a>, below, for more on both how to specify the type of surface you want as well as other ways to adjust the resulting stream.</p> <figure> <figcaption><strong><em>Example of a window allowing the user to select a display surface to capture</em></strong></figcaption> @@ -56,7 +56,7 @@ original_slug: Web/API/Screen_Capture_API/使用屏幕捕获API <p><a href="https://mdn.mozillademos.org/files/16365/Chrome-Screen-Capture-Window.png"><img alt="Screenshot of Chrome's window for picking a source surface" src="https://mdn.mozillademos.org/files/16365/Chrome-Screen-Capture-Window.png" style="height: 520px; width: 619px;"></a></p> </figure> -<p>You can then use the captured stream, <code>captureStream</code>, for anything that accepts a stream as input. The {{anch("Examples", "examples")}} below show a few ways to make use of the stream.</p> +<p>You can then use the captured stream, <code>captureStream</code>, for anything that accepts a stream as input. The <a href="#示例">examples</a> below show a few ways to make use of the stream.</p> <h3 id="Visible_vs_logical_display_surfaces">Visible vs logical display surfaces</h3> diff --git a/files/zh-cn/web/api/server-sent_events/using_server-sent_events/index.html b/files/zh-cn/web/api/server-sent_events/using_server-sent_events/index.html index fe30961b9f..f9604053af 100644 --- a/files/zh-cn/web/api/server-sent_events/using_server-sent_events/index.html +++ b/files/zh-cn/web/api/server-sent_events/using_server-sent_events/index.html @@ -61,7 +61,7 @@ original_slug: Server-sent_events/Using_server-sent_events <h2 id="服务器端如何发送事件流">服务器端如何发送事件流</h2> -<p>服务器端发送的响应内容应该使用值为<code>text/event-stream</code>的MIME类型.每个通知以文本块形式发送，并以一对换行符结尾。有关事件流的格式的详细信息，请参见{{ anch("Event stream format") }}。</p> +<p>服务器端发送的响应内容应该使用值为<code>text/event-stream</code>的MIME类型.每个通知以文本块形式发送，并以一对换行符结尾。有关事件流的格式的详细信息，请参见<a href="#事件流格式">事件流格式</a>。</p> <p>演示的{{Glossary("PHP")}}代码如下:</p> diff --git a/files/zh-cn/web/api/service_worker_api/using_service_workers/index.html b/files/zh-cn/web/api/service_worker_api/using_service_workers/index.html index 19bf63764f..c1915b8dd4 100644 --- a/files/zh-cn/web/api/service_worker_api/using_service_workers/index.html +++ b/files/zh-cn/web/api/service_worker_api/using_service_workers/index.html @@ -222,7 +222,7 @@ imgLoad('myLittleVader.jpg').then(function(response) { <code>install</code> 事件会在注册完成之后触发。<code>install</code> 事件一般是被用来填充你的浏览器的离线缓存能力。为了达成这个目的，我们使用了 Service Worker 的新的标志性的存储 API — {{domxref("cache")}} — 一个 service worker 上的全局对象，它使我们可以存储网络响应发来的资源，并且根据它们的请求来生成key。这个 API 和浏览器的标准的缓存工作原理很相似，但是是特定你的域的。它会一直持久存在，直到你告诉它不再存储，你拥有全部的控制权。</p> <div class="note"> -<p><span style="font-size: 14px;"><strong>注意</strong></span>: Cache API 并不被每个浏览器支持。（查看 {{anch("Browser support")}} 部分了解更多信息。） 如果你现在就想使用它，可以考虑采用一个 polyfill，比如 <a href="https://github.com/Polymer/topeka/blob/master/sw.js">Google topeka demo</a>，或者把你的资源存储在 <a href="/zh-CN/docs/Glossary/IndexedDB">IndexedDB</a> 中。</p> +<p><span style="font-size: 14px;"><strong>注意</strong></span>: Cache API 并不被每个浏览器支持。（查看 <a href="#browser_support">Browser support</a> 部分了解更多信息。） 如果你现在就想使用它，可以考虑采用一个 polyfill，比如 <a href="https://github.com/Polymer/topeka/blob/master/sw.js">Google topeka demo</a>，或者把你的资源存储在 <a href="/zh-CN/docs/Glossary/IndexedDB">IndexedDB</a> 中。</p> </div> <p>让我们从一个代码示例来开始这个部分——这是 <a href="https://github.com/mdn/sw-test/blob/gh-pages/sw.js#L1-L18">这是我们的 service worker 里的第一块代码</a> ：</p> @@ -250,7 +250,7 @@ imgLoad('myLittleVader.jpg').then(function(response) { <li>这里我们 新增了一个 <code>install</code> 事件监听器，接着在事件上接了一个{{domxref("ExtendableEvent.waitUntil()") }} 方法——这会确保Service Worker 不会在 <code>waitUntil()</code> 里面的代码执行完毕之前安装完成。</li> <li>在 <code>waitUntil()</code> 内，我们使用了 <a href="/en-US/docs/Web/API/CacheStorage/open"><code>caches.open()</code></a> 方法来创建了一个叫做 <code>v1</code> 的新的缓存，将会是我们的站点资源缓存的第一个版本。它返回了一个创建缓存的 promise，当它 resolved 的时候，我们接着会调用在创建的缓存示例上的一个方法 <code>addAll()</code>，这个方法的参数是一个由一组相对于 origin 的 URL 组成的数组，这些 URL 就是你想缓存的资源的列表。</li> <li>如果 promise 被 rejected，安装就会失败，这个 worker 不会做任何事情。这也是可以的，因为你可以修复你的代码，在下次注册发生的时候，又可以进行尝试。</li> - <li>当安装成功完成之后， service worker 就会激活。在第一次你的 service worker 注册／激活时，这并不会有什么不同。但是当 service worker 更新 (稍后查看 {{anch("Updating your service worker") }} 部分) 的时候 ，就不太一样了。</li> + <li>当安装成功完成之后， service worker 就会激活。在第一次你的 service worker 注册／激活时，这并不会有什么不同。但是当 service worker 更新 (稍后查看 <a href="#更新你的_service_worker">更新你的 service worker</a> 部分) 的时候 ，就不太一样了。</li> </ol> <div class="note"> @@ -377,7 +377,7 @@ event.request.body</pre> <p>因为只有新图片会失败，我们已经选择了回退的图片，一切都依赖我们之前看到的 <code>install</code> 事件侦听器中的安装过程。</p> -<p><strong>更新你的 service worker</strong></p> +<h2 id="更新你的_service_worker">更新你的 service worker</h2> <p>如果你的 service worker 已经被安装，但是刷新页面时有一个新版本的可用，新版的 service worker 会在后台安装，但是还没激活。当不再有任何已加载的页面在使用旧版的 service worker 的时候，新版本才会激活。一旦再也没有更多的这样已加载的页面，新的 service worker 就会被激活。</p> diff --git a/files/zh-cn/web/api/settimeout/index.html b/files/zh-cn/web/api/settimeout/index.html index 1499eccade..77a470e485 100644 --- a/files/zh-cn/web/api/settimeout/index.html +++ b/files/zh-cn/web/api/settimeout/index.html @@ -27,13 +27,13 @@ var<em> </em>timeoutID = <em>scope</em>.setTimeout(<em>code</em>[, <em>delay</em <dt><code>code</code></dt> <dd>这是一个可选语法，你可以使用字符串而不是{{jsxref("function")}} ，在<code>delay</code>毫秒之后编译和执行字符串 (使用该语法是<strong>不推荐的,</strong> 原因和使用 {{jsxref("Global_Objects/eval", "eval()")}}一样，有安全风险)。</dd> <dt><code>delay</code> {{optional_inline}}</dt> - <dd>延迟的毫秒数 (一秒等于1000毫秒)，函数的调用会在该延迟之后发生。如果省略该参数，delay取默认值0，意味着“马上”执行，或者尽快执行。不管是哪种情况，实际的延迟时间可能会比期待的(delay毫秒数) 值长，原因请查看{{anch("实际延时比设定值更久的原因：最小延迟时间")}}。</dd> + <dd>延迟的毫秒数 (一秒等于1000毫秒)，函数的调用会在该延迟之后发生。如果省略该参数，delay取默认值0，意味着“马上”执行，或者尽快执行。不管是哪种情况，实际的延迟时间可能会比期待的(delay毫秒数) 值长，原因请查看<a href="#实际延时比设定值更久的原因：最小延迟时间">实际延时比设定值更久的原因：最小延迟时间</a>。</dd> <dt><code>arg1, ..., argN</code> {{optional_inline}}</dt> <dd>附加参数，一旦定时器到期，它们会作为参数传递给{{jsxref("function")}} </dd> </dl> <div class="note"> -<p><strong>备注</strong>：需要注意的是，IE9 及更早的 IE 浏览器不支持向回调函数传递额外参数(第一种语法)。如果你想要在IE中达到同样的功能,你必须使用一种兼容代码 (查看 {{anch("兼容旧环境（polyfill）")}} 一段).</p> +<p><strong>备注</strong>：需要注意的是，IE9 及更早的 IE 浏览器不支持向回调函数传递额外参数(第一种语法)。如果你想要在IE中达到同样的功能,你必须使用一种兼容代码 (查看 <a href="#兼容旧环境（polyfill）">兼容旧环境（polyfill）</a> 一段).</p> </div> <h3 id="Examples" name="Examples">返回值</h3> diff --git a/files/zh-cn/web/api/web_audio_api/index.html b/files/zh-cn/web/api/web_audio_api/index.html index f7178d006c..75ce74566d 100644 --- a/files/zh-cn/web/api/web_audio_api/index.html +++ b/files/zh-cn/web/api/web_audio_api/index.html @@ -144,7 +144,7 @@ translation_of: Web/API/Web_Audio_API <p>可以编写JavaScript代码来处理音频数据。当然，这需要用到下面的接口和事件。</p> <div class="note"> -<p><strong>注意：</strong>这些功能在Web Audio API的2014年8月9日版本中已经标记为不推荐的，这些功能很快会被{{ anch("Audio_Workers") }}代替。</p> +<p><strong>注意：</strong>这些功能在Web Audio API的2014年8月9日版本中已经标记为不推荐的，这些功能很快会被<a href="#audio_workers">Audio_Workers</a>代替。</p> </div> <dl> diff --git a/files/zh-cn/web/api/web_workers_api/using_web_workers/index.html b/files/zh-cn/web/api/web_workers_api/using_web_workers/index.html index 107266e073..2704cf845d 100644 --- a/files/zh-cn/web/api/web_workers_api/using_web_workers/index.html +++ b/files/zh-cn/web/api/web_workers_api/using_web_workers/index.html @@ -92,7 +92,7 @@ second.onchange = function() { </div> <div class="note"> -<p><strong>注意：</strong> 当一个消息在主线程和worker之间传递时，它被复制或者转移了，而不是共享。请参阅{{anch("Transferring data to and from workers further details", "Transferring data to and from workers: further details")}} 获取更详尽的解释。</p> +<p><strong>注意：</strong> 当一个消息在主线程和worker之间传递时，它被复制或者转移了，而不是共享。请参阅<a href="#worker中数据的接收与发送：详细介绍">worker中数据的接收与发送：详细介绍</a> 获取更详尽的解释。</p> </div> <h3 id="终止worker">终止worker</h3> diff --git a/files/zh-cn/web/api/webgl_api/data/index.html b/files/zh-cn/web/api/webgl_api/data/index.html index ded07d6e36..a8570b2e68 100644 --- a/files/zh-cn/web/api/webgl_api/data/index.html +++ b/files/zh-cn/web/api/webgl_api/data/index.html @@ -27,7 +27,7 @@ translation_of: Web/API/WebGL_API/Data <h2 id="GLSL_变量">GLSL 变量</h2> -<p>GLSL中有三种类型的“变量”或者说数据存储类型。每一种类型都有特定的目标和使用方法：: <strong>{{anch("Attributes", "attributes")}}</strong>、<strong>{{anch("Varyings", "varyings")}}</strong>和<strong>{{anch("Uniforms", "uniforms")}}</strong>.</p> +<p>GLSL中有三种类型的“变量”或者说数据存储类型。每一种类型都有特定的目标和使用方法：: <strong><a href="#attributes">attributes</a></strong>、<strong><a href="#varyings">varyings</a></strong>和<strong><a href="#uniforms">uniforms</a></strong>.</p> <h3 id="Attributes">Attributes</h3> diff --git a/files/zh-cn/web/api/webgl_api/index.html b/files/zh-cn/web/api/webgl_api/index.html index c890e01f68..492c7731b3 100644 --- a/files/zh-cn/web/api/webgl_api/index.html +++ b/files/zh-cn/web/api/webgl_api/index.html @@ -19,7 +19,7 @@ translation_of: Web/API/WebGL_API <p>目前支持 WebGL 的浏览器有：<a href="https://developer.mozilla.org/zh-CN/Firefox" title="Firefox 4 for developers">Firefox</a> 4+, <a href="http://www.google.com/chrome/" title="http://www.google.com/chrome/">Google Chrome</a> 9+, <a href="http://www.opera.com/" title="http://www.opera.com/">Opera</a> 12+, <a href="http://www.apple.com/safari/" title="http://www.apple.com/fr/safari/">Safari </a>5.1+, <a href="http://windows.microsoft.com/en-us/internet-explorer/browser-ie">Internet Explorer</a> 11+和<a href="https://www.microsoft.com/en-us/edge">Microsoft Edge</a> build 10240+；然而, WebGL一些特性也需要用户的硬件设备支持。</p> -<p>{{anch("WebGL 2")}}<font><font> API引入了对大部分的OpenGL ES 3.0功能集的支持; </font><font>它是通过</font></font>{{domxref("WebGL2RenderingContext")}}<font><font>界面</font><font>提供的</font><font>。</font></font></p> +<p><a href="#webgl_2">WebGL 2</a><font><font> API引入了对大部分的OpenGL ES 3.0功能集的支持; </font><font>它是通过</font></font>{{domxref("WebGL2RenderingContext")}}<font><font>界面</font><font>提供的</font><font>。</font></font></p> <p> {{HTMLElement("canvas")}} 元素也被 <a href="/zh-CN/docs/Web/API/Canvas_API">Canvas API</a> 用于在网页上进行2D图形处理。</p> diff --git a/files/zh-cn/web/api/webgl_api/webgl_model_view_projection/index.html b/files/zh-cn/web/api/webgl_api/webgl_model_view_projection/index.html index 20804af827..a4d70b7095 100644 --- a/files/zh-cn/web/api/webgl_api/webgl_model_view_projection/index.html +++ b/files/zh-cn/web/api/webgl_api/webgl_model_view_projection/index.html @@ -421,7 +421,7 @@ gl_Position = vec4(transformedPosition.xyz, w); <p><img alt="Filling the W component and creating some projection." src="https://mdn.mozillademos.org/files/11379/part4.png" style="height: 531px; width: 800px;"></p> -<p>看到那个深蓝色的小三角形吗？那是添加到对象上的另一个面，因为形状的旋转导致了该角延伸到裁剪空间之外，从而导致该角被裁剪掉。有关如何使用更复杂的矩阵来帮助控制和防止裁剪的介绍，请参照下面的 {{anch("Perspective matrix")}}。</p> +<p>看到那个深蓝色的小三角形吗？那是添加到对象上的另一个面，因为形状的旋转导致了该角延伸到裁剪空间之外，从而导致该角被裁剪掉。有关如何使用更复杂的矩阵来帮助控制和防止裁剪的介绍，请参照下面的 <a href="#perspective_matrix">Perspective matrix</a>。</p> <h3 id="练习_4">练习</h3> @@ -506,7 +506,7 @@ var w = (2 * 0) + (3 * 0) + (4 * scaleFactor) + (1 * scaleFactor) }; </pre> -<p>尽管结果相同，但重要的步骤还是在顶点着色器中。与其直接修改顶点，不如将其乘以一个附加的 <strong>{{anch("Projection matrix", "projection matrix")}}</strong>，该矩阵将3D点投影到2D绘图表面上：</p> +<p>尽管结果相同，但重要的步骤还是在顶点着色器中。与其直接修改顶点，不如将其乘以一个附加的 <strong><a href="#projection_matrix">projection matrix</a></strong>，该矩阵将3D点投影到2D绘图表面上：</p> <pre class="brush: glsl">// 确保以相反的顺序读取转换矩阵 gl_Position = projection * model * vec4(position, 1.0); diff --git a/files/zh-cn/web/api/webrtc_api/signaling_and_video_calling/index.html b/files/zh-cn/web/api/webrtc_api/signaling_and_video_calling/index.html index f8f8ab33aa..50a7f2de6e 100644 --- a/files/zh-cn/web/api/webrtc_api/signaling_and_video_calling/index.html +++ b/files/zh-cn/web/api/webrtc_api/signaling_and_video_calling/index.html @@ -341,27 +341,27 @@ function invite(evt) { <dl> <dd> - <p>当需要你通过信令服务器将一个ICE候选发送给另一个对等端时，本地ICE层将会调用你的 {{event("icecandidate")}} 事件处理程序。有关更多信息，请参阅{{anch("Sending ICE candidates")}} 以查看此示例的代码。</p> + <p>当需要你通过信令服务器将一个ICE候选发送给另一个对等端时，本地ICE层将会调用你的 {{event("icecandidate")}} 事件处理程序。有关更多信息，请参阅<a href="#交换_ice_候选">交换 ICE 候选</a> 以查看此示例的代码。</p> </dd> <dt>{{domxref("RTCPeerConnection.ontrack")}}</dt> - <dd>当向连接中添加磁道时，{{event("track")}} 事件的此处理程序由本地WebRTC层调用。例如，可以将传入媒体连接到元素以显示它。详见 {{anch("Receiving new streams")}} 。</dd> + <dd>当向连接中添加磁道时，{{event("track")}} 事件的此处理程序由本地WebRTC层调用。例如，可以将传入媒体连接到元素以显示它。详见<a href="#接收新的流数据">接收新的流数据</a> 。</dd> <dt>{{domxref("RTCPeerConnection.onnegotiationneeded")}}</dt> - <dd>每当WebRTC基础结构需要你重新启动会话协商过程时，都会调用此函数。它的工作是创建和发送一个请求，给被叫方，要求它与我们联系。参见{{anch("Starting negotiation")}} 了解我们如何处理这一问题。</dd> + <dd>每当WebRTC基础结构需要你重新启动会话协商过程时，都会调用此函数。它的工作是创建和发送一个请求，给被叫方，要求它与我们联系。参见<a href="#开始协商">开始协商</a>了解我们如何处理这一问题。</dd> <dt>{{domxref("RTCPeerConnection.onremovetrack")}}</dt> - <dd>调用与 <code>ontrack</code>相对应的对象来处理 {{event("removetrack")}} 事件；当远程对等端从正在发送的媒体中删除磁道时，它将发送到<code>RTCPeerConnection</code> 。参见 {{anch("Handling the removal of tracks")}} 。</dd> + <dd>调用与 <code>ontrack</code>相对应的对象来处理 {{event("removetrack")}} 事件；当远程对等端从正在发送的媒体中删除磁道时，它将发送到<code>RTCPeerConnection</code>。参见 <a href="#处理流的移除">处理流的移除</a> 。</dd> <dt>{{domxref("RTCPeerConnection.oniceconnectionstatechange")}}</dt> - <dd>ICE层发送{{event("iceconnectionstatechange")}} 事件，让你了解ICE连接状态的更改。这可以帮助你了解连接何时失败或丢失。我们将在下面的{{anch("ICE connection state")}} 中查看此示例的代码。</dd> + <dd>ICE层发送{{event("iceconnectionstatechange")}} 事件，让你了解ICE连接状态的更改。这可以帮助你了解连接何时失败或丢失。我们将在下面的<a href="#ice_连接状态">ICE 连接状态</a>中查看此示例的代码。</dd> <dt>{{domxref("RTCPeerConnection.onicegatheringstatechange")}}</dt> - <dd>当ICE代理收集候选对象的过程从一个状态切换到另一个状态（例如开始收集候选对象或完成协商）时，ICE层将向你发送事件（“ICegulatingStateChange”）事件。见下文 {{anch("ICE gathering state")}}。</dd> + <dd>当ICE代理收集候选对象的过程从一个状态切换到另一个状态（例如开始收集候选对象或完成协商）时，ICE层将向你发送事件（“ICegulatingStateChange”）事件。见下文 <a href="#ice_收集状态">ICE 收集状态</a>。</dd> <dt>{{domxref("RTCPeerConnection.onsignalingstatechange")}}</dt> <dd> - <p>当信令进程的状态更改时（或如果到信令服务器的连接更改时），WebRTC架构将向你发送 {{event("signalingstatechange")}} 消息。参见{{anch("Signaling state")}} 查看我们的代码。</p> + <p>当信令进程的状态更改时（或如果到信令服务器的连接更改时），WebRTC架构将向你发送 {{event("signalingstatechange")}} 消息。参见<a href="#ice_信令状态">ICE 信令状态</a>查看我们的代码。</p> </dd> </dl> <h4 id="开始协商">开始协商</h4> -<p>一旦调用者创建了其 {{domxref("RTCPeerConnection")}} ，创建了媒体流，并将其磁道添加到连接中，如 {{anch("Starting a call")}} 所示，浏览器将向{{domxref("RTCPeerConnection")}} 传递一个 {{event("negotiationneeded")}} 事件，以指示它已准备好开始与其他对等方协商。以下是我们处理 {{event("negotiationneeded")}} 事件的代码：</p> +<p>一旦调用者创建了其 {{domxref("RTCPeerConnection")}} ，创建了媒体流，并将其磁道添加到连接中，如 <a href="#开始通话的交互">开始通话的交互</a> 所示，浏览器将向 {{domxref("RTCPeerConnection")}} 传递一个 {{event("negotiationneeded")}} 事件，以指示它已准备好开始与其他对等方协商。以下是我们处理 {{event("negotiationneeded")}} 事件的代码：</p> <pre class="brush: js">function handleNegotiationNeededEvent() { myPeerConnection.createOffer().then(function(offer) { @@ -447,13 +447,13 @@ function invite(evt) { .catch(handleGetUserMediaError); }</code></pre> -<p class="brush: js">此代码与我们在 {{anch("Starting a call")}} 中在 <code>invite()</code> 函数中所做的非常相似。它首先使用 <code>createPeerConnection()</code> 函数创建和配置{{domxref("RTCPeerConnection")}} 。然后，它从收到的 <code>"video-offer"</code> 消息中获取SDP请求，并使用它创建一个表示调用方会话描述的新 {{domxref("RTCSessionDescription")}} 对象。</p> +<p class="brush: js">此代码与我们在<a href="#开始通话的交互">开始通话的交互</a>中在 <code>invite()</code> 函数中所做的非常相似。它首先使用 <code>createPeerConnection()</code> 函数创建和配置{{domxref("RTCPeerConnection")}} 。然后，它从收到的 <code>"video-offer"</code> 消息中获取SDP请求，并使用它创建一个表示调用方会话描述的新 {{domxref("RTCSessionDescription")}} 对象。</p> <p class="brush: js">然后将该会话描述传递到 {{domxref("RTCPeerConnection.setRemoteDescription", "myPeerConnection.setRemoteDescription()")}}。这将把接收到的请求建立为连接的远程（调用方）端的描述。如果成功，promise成功处理程序（在then()子句中）将使用 {{domxref("MediaDevices.getUserMedia", "getUserMedia()")}}，将磁道添加到连接，以此类推，如前面在 <code>invite()</code>中看到的那样。</p> <p class="brush: js">一旦使用 {{domxref("RTCPeerConnection.createAnswer", "myPeerConnection.createAnswer()")}} 创建了应答，通过调用{{domxref("RTCPeerConnection.setLocalDescription", "myPeerConnection.setLocalDescription()")}} 连接本地端的描述被设置为应答的SDP，则通过信令服务器将应答发送给调用者，让他们知道应答是什么。</p> -<p>捕捉到的任何错误都会被传递给 <code>handleGetUserMediaError()</code>，详见 {{anch("Handling getUserMedia() errors")}} 。</p> +<p>捕捉到的任何错误都会被传递给 <code>handleGetUserMediaError()</code>，详见 <a href="#处理_getusermedia()_错误">处理 getUserMedia() 错误</a> 。</p> <div class="note"> <p>注意：与调用者的情况一样，一旦 <code>setLocalDescription()</code>实现处理程序运行完毕，浏览器将开始触发被调用者必须处理的{{event("icecandidate")}} 事件，每个需要传输到远程对等方的候选事件对应一个事件。</p> @@ -475,7 +475,7 @@ function invite(evt) { } }</pre> -<p>这将构建一个包含候选对象的对象，然后使用前面在 {{anch("Sending messages to the signaling server")}} 中描述的<code>sendToServer()</code> 函数将其发送给另一个对等方。消息属性为：</p> +<p>这将构建一个包含候选对象的对象，然后使用前面在 <a href="#向信令服务器发送信息">向信令服务器发送信息</a> 中描述的<code>sendToServer()</code> 函数将其发送给另一个对等方。消息属性为：</p> <p><strong><span style='background-color: rgba(220, 220, 220, 0.5); font-family: consolas,"Liberation Mono",courier,monospace; font-size: 1rem; font-style: inherit; font-weight: inherit; letter-spacing: -0.00278rem;'>type</span></strong></p> @@ -546,9 +546,9 @@ function invite(evt) { } }</code></pre> -<p>此代码从<code>"received_video"</code> {{HTMLElement("video")}}元素的{{htmlattrxref("srcObject", "video")}} 属性获取传入视频 {{domxref("MediaStream.getTracks", "getTracks()")}} 方法获取流的磁道数组。</p> +<p>此代码从<code>"received_video"</code> {{HTMLElement("video")}}元素的 {{htmlattrxref("srcObject", "video")}} 属性获取传入视频 {{domxref("MediaStream.getTracks", "getTracks()")}} 方法获取流的磁道数组。</p> -<p>如果数组的长度为零，意味着流中没有剩余的磁道，则通过调用 <code>closeVideoCall()</code>结束调用。这样就可以将我们的应用程序恢复到可以启动或接收另一个呼叫的状态。请参阅 {{anch("Ending the call")}} 了解 <code>closeVideoCall()</code> 的工作原理。</p> +<p>如果数组的长度为零，意味着流中没有剩余的磁道，则通过调用 <code>closeVideoCall()</code>结束调用。这样就可以将我们的应用程序恢复到可以启动或接收另一个呼叫的状态。请参阅 <a href="#结束通话">结束通话</a> 了解 <code>closeVideoCall()</code> 的工作原理。</p> <h4 id="结束通话">结束通话</h4> diff --git a/files/zh-cn/web/api/websockets_api/writing_websocket_client_applications/index.html b/files/zh-cn/web/api/websockets_api/writing_websocket_client_applications/index.html index c5fefb2336..16ca1dcc5c 100644 --- a/files/zh-cn/web/api/websockets_api/writing_websocket_client_applications/index.html +++ b/files/zh-cn/web/api/websockets_api/writing_websocket_client_applications/index.html @@ -16,9 +16,9 @@ translation_of: Web/API/WebSockets_API/Writing_WebSocket_client_applications <h2 id="创建_WebSocket_对象">创建 WebSocket 对象</h2> -<p>为了使用 WebSocket 协议通信，你需要创建一个 <a href="/en/WebSockets/WebSockets_reference/WebSocket" title="en/WebSockets/WebSockets reference/WebSocket"><code>WebSocket</code></a> 对象；这将会自动地尝试建立与服务器的连接。</p> +<p>为了使用 WebSocket 协议通信，你需要创建一个 <a href="/en/WebSockets/WebSockets_reference/WebSocket" title="en/WebSockets/WebSockets reference/WebSocket"><code>WebSocket</code></a> 对象；这将会自动地尝试建立与服务器的连接。</p> -<p>WebSocket 构造函数接受一个必要参数和一个可选参数：</p> +<p>WebSocket 构造函数接受一个必要参数和一个可选参数：</p> <pre class="syntaxbox">WebSocket WebSocket( in DOMString url, @@ -118,7 +118,7 @@ function sendText() { <h3 id="接受与解析_JSON_对象">接受与解析 JSON 对象</h3> -<p>考虑在 {{ anch("Using JSON to transmit objects") }}中提到的聊天应用客户端。客户端会收到各种类型的数据包，比如：</p> +<p>考虑在 <a href="#使用_json_发送对象">使用 JSON 发送对象</a>中提到的聊天应用客户端。客户端会收到各种类型的数据包，比如：</p> <ul> <li>登陆握手</li> diff --git a/files/zh-cn/web/api/webvtt_api/index.html b/files/zh-cn/web/api/webvtt_api/index.html index a2e9979dce..9316bee752 100644 --- a/files/zh-cn/web/api/webvtt_api/index.html +++ b/files/zh-cn/web/api/webvtt_api/index.html @@ -231,7 +231,7 @@ Transcrit par Célestes™ <pre class="brush: css">::cue(#\31) { color: lime; } ::cue(#crédit\ de\ transcription) { color: red; }</pre> -<p>Positioning of text tracks is also supported, by including positioning information after the timings in a cue, as seen below (see {{anch("Cue settings")}} for more information):</p> +<p>Positioning of text tracks is also supported, by including positioning information after the timings in a cue, as seen below (see <a href="#cue_settings">Cue settings</a> for more information):</p> <pre>WEBVTT diff --git a/files/zh-cn/web/api/webxr_device_api/index.html b/files/zh-cn/web/api/webxr_device_api/index.html index e6a3bd823c..9e07a8b007 100644 --- a/files/zh-cn/web/api/webxr_device_api/index.html +++ b/files/zh-cn/web/api/webxr_device_api/index.html @@ -86,7 +86,7 @@ translation_of: Web/API/WebXR_Device_API <ul> <li>在用户事件句柄总或者在用户启动 <a href="/en-US/docs/Web/Progressive_web_apps">web 应用</a>中执行的 <code>requestSession()</code> 调用；</li> <li>文档是可信赖的，其中的内容是可靠的、及时更新的以及有着重点；</li> - <li>用户有明确的使用沉浸式 VR 模式的意图，后文中 {{anch("User intent")}} 一节将有详细描述。</li> + <li>用户有明确的使用沉浸式 VR 模式的意图，后文中，<a href="#用户意图">用户意图</a>一节将有详细描述。</li> </ul> <p>如果上述三点均满足， <code>requestSession()</code> 返回的 Promise 将被 resolve，新的 {{domxref("XRSession")}} 对象被传入完成时的处理函数中。如果有不满足的情况，将会根据具体场景抛出异常，比如当没有权限进入沉浸式模式情况下， <code>SecurityError</code> 将被抛出。</p> @@ -101,7 +101,7 @@ translation_of: Web/API/WebXR_Device_API <li>如果 <code>requestSession()</code> 调用的发起既不来自用户事件中，也不是在 Web 应用启动时，那该请求将会被驳回，Promise 放返回 <code>false</code>;</li> <li>如果发起请求的文档不属于对应的脚本，该请求将被驳回；</li> <li>如果发起请求的文档不可信任，该请求会被驳回且 Promise 返回 <code>false</code>。一个可信任文档指的是该文档是活跃的、负责任的且有重点的；</li> - <li>如果设备无法明确用户开启内联模式的意图，该请求将会被驳回。对{{anch("用户意图", "用户的目的")}}的理解可以是隐性或者显性的。</li> + <li>如果设备无法明确用户开启内联模式的意图，该请求将会被驳回。对<a href="#用户意图">用户的目的</a>的理解可以是隐性或者显性的。</li> </ul> <div class="blockIndicator note"> diff --git a/files/zh-cn/web/api/window/devicepixelratio/index.html b/files/zh-cn/web/api/window/devicepixelratio/index.html index aba68dcdf8..0947108a83 100644 --- a/files/zh-cn/web/api/window/devicepixelratio/index.html +++ b/files/zh-cn/web/api/window/devicepixelratio/index.html @@ -9,7 +9,7 @@ translation_of: Web/API/Window/devicePixelRatio <p>当处理标准显示器与HiDPI或Retina显示器之间的差异时，这很有用，后者使用更多的屏幕像素绘制相同的对象，从而获得更清晰的图像。</p> -<p>您可以使用{{domxref("Window.matchMedia", "window.matchMedia()")}} 检查<code>devicePixelRatio</code>的值是否发生更改（例如，如果用户将窗口拖动到带有 不同的像素密度）。 请参阅{{anch("Monitoring screen resolution or zoom level changes", "下面的例子")}}.。</p> +<p>您可以使用{{domxref("Window.matchMedia", "window.matchMedia()")}} 检查<code>devicePixelRatio</code>的值是否发生更改（例如，如果用户将窗口拖动到带有 不同的像素密度）。 请参阅<a href="#监视屏幕分辨率或缩放级别的更改">下面的例子</a>。</p> <h2 id="Summary" name="Summary">语法</h2> diff --git a/files/zh-cn/web/api/xmlhttprequest/responsetype/index.html b/files/zh-cn/web/api/xmlhttprequest/responsetype/index.html index 7201946aae..c171e12d92 100644 --- a/files/zh-cn/web/api/xmlhttprequest/responsetype/index.html +++ b/files/zh-cn/web/api/xmlhttprequest/responsetype/index.html @@ -57,7 +57,7 @@ browser-compat: api.XMLHttpRequest.responseType <dl> <dt><code>InvalidAccessError</code></dt> - <dd>试图更改 <code>XMLHttpRequest</code> 的 <code>responseType</code>，该值处于同步模式但不在 {{DOMxRef("Worker")}} 中。有关其他详细信息，请参阅下面的 {{anch("Synchronous_XHR_restrictions", "同步 XHR 限制")}}。</dd> + <dd>试图更改 <code>XMLHttpRequest</code> 的 <code>responseType</code>，该值处于同步模式但不在 {{DOMxRef("Worker")}} 中。有关其他详细信息，请参阅下面的 <a href="#synchronous_xhr_restrictions">同步 XHR 限制</a>。</dd> </dl> <h2 id="Usage_notes">使用说明</h2> diff --git a/files/zh-cn/web/css/css_animations/using_css_animations/index.html b/files/zh-cn/web/css/css_animations/using_css_animations/index.html index 3cdd7cd988..59dc8370ea 100644 --- a/files/zh-cn/web/css/css_animations/using_css_animations/index.html +++ b/files/zh-cn/web/css/css_animations/using_css_animations/index.html @@ -25,7 +25,7 @@ translation_of: Web/CSS/CSS_Animations/Using_CSS_animations <h2 id="配置动画">配置动画</h2> -<p>创建动画序列，需要使用{{ cssxref("animation") }}属性或其子属性，该属性允许配置动画时间、时长以及其他动画细节，但该属性不能配置动画的实际表现，动画的实际表现是由 {{ cssxref("@keyframes") }}规则实现，具体情况参见{{anch("使用keyframes定义动画序列")}}小节部分。</p> +<p>创建动画序列，需要使用{{ cssxref("animation") }}属性或其子属性，该属性允许配置动画时间、时长以及其他动画细节，但该属性不能配置动画的实际表现，动画的实际表现是由 {{ cssxref("@keyframes") }}规则实现，具体情况参见<a href="#使用keyframes定义动画序列">使用keyframes定义动画序列</a>小节部分。</p> <p style="margin-bottom: 0px;"><span style="line-height: 1.5;">{{ cssxref("animation") }}</span>的子属性有:</p> diff --git a/files/zh-cn/web/css/cursor/index.html b/files/zh-cn/web/css/cursor/index.html index 413624e5f5..831d78debe 100644 --- a/files/zh-cn/web/css/cursor/index.html +++ b/files/zh-cn/web/css/cursor/index.html @@ -270,7 +270,7 @@ cursor: unset; <p>尽管规范没有为游标定义任何大小限制，但是不同的{{Glossary("user agent", "user agents")}}可能进行了限制。 使用超出浏览器支持的大小范围的图像进行的光标更改通常只会被忽略。</p> -<p>查阅 {{anch("Browser compatibility")}} 表格来获取指针大小的限制信息。</p> +<p>查阅<a href="#浏览器兼容性">浏览器兼容性</a>表格来获取指针大小的限制信息。</p> <h2 id="Examples" name="Examples">示例</h2> diff --git a/files/zh-cn/web/css/display/index.html b/files/zh-cn/web/css/display/index.html index 8605b74a25..0518f8646a 100644 --- a/files/zh-cn/web/css/display/index.html +++ b/files/zh-cn/web/css/display/index.html @@ -86,7 +86,7 @@ display: unset;</pre> <h2 id="指南和示例">指南和示例</h2> -<p>上面 {{anch("语法")}} 部分提供了 <strong><code>display</code></strong> 取值的多个示例。下面的资料将详细介绍 <strong><code>display</code></strong> 的各个取值。</p> +<p>上面 <a href="#语法">语法</a> 部分提供了 <strong><code>display</code></strong> 取值的多个示例。下面的资料将详细介绍 <strong><code>display</code></strong> 的各个取值。</p> <ul> <li><a href="/zh-CN/docs/Web/CSS/display/two-value_syntax_of_display">接受 display 新的二值语法</a></li> diff --git a/files/zh-cn/web/css/gradient/radial-gradient()/index.html b/files/zh-cn/web/css/gradient/radial-gradient()/index.html index 2b9cfeff39..cc5a4c79cd 100644 --- a/files/zh-cn/web/css/gradient/radial-gradient()/index.html +++ b/files/zh-cn/web/css/gradient/radial-gradient()/index.html @@ -16,7 +16,7 @@ browser-compat: css.types.image.gradient.radial-gradient --- <p>{{CSSRef}}</p> -<p> <code>radial-gradient()</code> CSS函数创建了一个图像，该图像是由从原点发出的两种或者多种颜色之间的逐步过渡组成。它的形状可以是圆形（circle）或椭圆形（ellipse）。这个方法得到的是一个CSS{{cssxref("<gradient>")}}数据类型的对象，其是 {{cssxref("<image>")}} 的一种。</p> +<p><code>radial-gradient()</code> CSS函数创建了一个图像，该图像是由从原点发出的两种或者多种颜色之间的逐步过渡组成。它的形状可以是圆形（circle）或椭圆形（ellipse）。这个方法得到的是一个CSS{{cssxref("<gradient>")}}数据类型的对象，其是 {{cssxref("<image>")}} 的一种。</p> <p>{{EmbedInteractiveExample("pages/css/function-radial-gradient.html")}}</p> @@ -48,7 +48,7 @@ radial-gradient(circle at center, red 0, blue, green 100%)</code></pre> <dt><code><shape></code></dt> <dd>渐变的形状。圆形（渐变的形状是一个半径不变的正圆）或椭圆形（轴对称椭圆）。默认值为椭圆。</dd> <dt><code><size></code></dt> - <dd>渐变的尺寸大小。包含的值见下表{{ anch("尺寸常数表") }}。</dd> + <dd>渐变的尺寸大小。包含的值见下表。</dd> <dt><code><color-stop></code></dt> <dd>表示某个确定位置的固定色值，包含一个{{cssxref("<color>")}}值加上可选的位置值（相对虚拟渐变射线的{{cssxref("<percentage>")}}或者{{cssxref("<length>")}}长度值）。 百分比值<code>0%</code>，或者长度值<code>0</code>，表示渐变中心点；百分比值<code>100%</code>表示渐变射线与边缘形状相交的点。 其间的百分比值线性对应渐变射线上的点。</dd> <dt><code><extent-keyword></code></dt> diff --git a/files/zh-cn/web/css/hyphens/index.html b/files/zh-cn/web/css/hyphens/index.html index 7a09198e88..5ca716b1b5 100644 --- a/files/zh-cn/web/css/hyphens/index.html +++ b/files/zh-cn/web/css/hyphens/index.html @@ -33,9 +33,9 @@ hyphens: unset; <dt><code>none</code></dt> <dd>换行时单词不会被打断，甚至在单词内的字符建议有换行点时。行只会在空白符处换行。</dd> <dt><code>manual</code></dt> - <dd>Words are broken for line-wrapping only where characters inside the word suggest line break opportunities. See {{anch("Suggesting line break opportunities")}} for details.</dd> + <dd>Words are broken for line-wrapping only where characters inside the word suggest line break opportunities. See <a href="#suggesting_line_break_opportunities">Suggesting line break opportunities</a> for details.</dd> <dt><code>auto</code></dt> - <dd>The browser is free to automatically break words at appropriate hyphenation points, following whatever rules it chooses to use. Suggested line break opportunities, as covered in {{anch("Suggesting line break opportunities")}}, should be preferred over automatically selecting break points whenever possible.</dd> + <dd>The browser is free to automatically break words at appropriate hyphenation points, following whatever rules it chooses to use. Suggested line break opportunities, as covered in <a href="#suggesting_line_break_opportunities">Suggesting line break opportunities</a>, should be preferred over automatically selecting break points whenever possible.</dd> </dl> <div class="note"><strong>Note:</strong> The <code>auto</code> setting's behavior depends on the language being properly tagged so that the appropriate hyphenation rules can be selected. You must specify a language using the <code>lang</code> HTML attribute in order to guarantee that automatic hyphenation is applied in the language of your choice.</div> diff --git a/files/zh-cn/web/css/list-style-type/index.html b/files/zh-cn/web/css/list-style-type/index.html index fd7edd0e5d..ea7ca7558a 100644 --- a/files/zh-cn/web/css/list-style-type/index.html +++ b/files/zh-cn/web/css/list-style-type/index.html @@ -146,7 +146,7 @@ list-style-type: unset; <li>Lowercase ASCII letters</li> <li>E.g. a, b, c, … z</li> <li><code>lower-latin</code> is unsupported in IE7 and earlier</li> - <li>See {{anch("Browser compatibility")}} section.</li> + <li>See <a href="#browser_compatibility">Browser compatibility</a> section.</li> </ul> </dd> <dt><code>upper-alpha</code></dt> diff --git a/files/zh-cn/web/css/replaced_element/index.html b/files/zh-cn/web/css/replaced_element/index.html index e8909dcccf..2ed50f528d 100644 --- a/files/zh-cn/web/css/replaced_element/index.html +++ b/files/zh-cn/web/css/replaced_element/index.html @@ -12,7 +12,7 @@ translation_of: Web/CSS/Replaced_element <p>简单来说，它们的内容不受当前文档的样式的影响。CSS 可以影响可替换元素的位置，但不会影响到可替换元素自身的内容。某些可替换元素，例如 {{HTMLElement("iframe")}} 元素，可能具有自己的样式表，但它们不会继承父文档的样式。</p> -<p>CSS 能对可替换元素产生的唯一影响在于，部分属性支持控制元素内容在其框中的位置或定位方式。有关详细信息，请参阅本文下面的{{anch("控制内容框中的对象位置")}}。</p> +<p>CSS 能对可替换元素产生的唯一影响在于，部分属性支持控制元素内容在其框中的位置或定位方式。有关详细信息，请参阅本文下面的<a href="#控制内容框中的对象位置">控制内容框中的对象位置</a>。</p> <h2 id="可替换元素">可替换元素</h2> diff --git a/files/zh-cn/web/events/index.html b/files/zh-cn/web/events/index.html index 6d3ca13b79..89d59da2cf 100644 --- a/files/zh-cn/web/events/index.html +++ b/files/zh-cn/web/events/index.html @@ -610,7 +610,7 @@ translation_of: Web/Events <h3 id="存储事件">存储事件</h3> -<p>{{Event("change")}} (see {{anch("Non-standard events")}})<br> +<p>{{Event("change")}} (参见 <a href="#非标准事件">非标准事件</a>)<br> {{Event("storage")}}</p> <h3 id="更新事件">更新事件</h3> diff --git a/files/zh-cn/web/guide/audio_and_video_delivery/adding_captions_and_subtitles_to_html5_video/index.html b/files/zh-cn/web/guide/audio_and_video_delivery/adding_captions_and_subtitles_to_html5_video/index.html index 93f9904467..e67c9eaecd 100644 --- a/files/zh-cn/web/guide/audio_and_video_delivery/adding_captions_and_subtitles_to_html5_video/index.html +++ b/files/zh-cn/web/guide/audio_and_video_delivery/adding_captions_and_subtitles_to_html5_video/index.html @@ -44,7 +44,7 @@ translation_of: >- <h2 id="修改_HTML和CSS">修改 HTML和CSS</h2> -<p>This section summarises the modifications made to the previous article's code in order to facilitate the addition of subtitles to the video. If you are not interested in this, and just want to get straight into the JavaScript and more relevant CSS, skip to the {{ anch("Subtitle implementation") }} section.<br> +<p>This section summarises the modifications made to the previous article's code in order to facilitate the addition of subtitles to the video. If you are not interested in this, and just want to get straight into the JavaScript and more relevant CSS, skip to the <a href="#使用字幕">Subtitle implementation</a> section.<br> <br> In this example we are using a different video, <a href="http://www.sintel.org/">Sintel</a>, as it actually has some speech in it and therefore is better for illustrating how subtitles work!</p> 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> diff --git a/files/zh-cn/web/http/headers/strict-transport-security/index.html b/files/zh-cn/web/http/headers/strict-transport-security/index.html index dafcaa3264..9be6471802 100644 --- a/files/zh-cn/web/http/headers/strict-transport-security/index.html +++ b/files/zh-cn/web/http/headers/strict-transport-security/index.html @@ -40,7 +40,7 @@ Strict-Transport-Security: max-age=<expire-time>; preload <dt><code>includeSubDomains</code> {{optional_inline}}</dt> <dd>如果这个可选的参数被指定，那么说明此规则也适用于该网站的所有子域名。</dd> <dt><code>preload</code> {{optional_inline}}</dt> - <dd>查看 {{anch("预加载 HSTS")}} 获得详情。不是标准的一部分。</dd> + <dd>查看 <a href="#预加载_hsts">预加载 HSTS</a> 获得详情。不是标准的一部分。</dd> </dl> <h2 id="描述">描述</h2> diff --git a/files/zh-cn/web/http/protocol_upgrade_mechanism/index.html b/files/zh-cn/web/http/protocol_upgrade_mechanism/index.html index 75ae2784b2..06b82c061b 100644 --- a/files/zh-cn/web/http/protocol_upgrade_mechanism/index.html +++ b/files/zh-cn/web/http/protocol_upgrade_mechanism/index.html @@ -7,7 +7,7 @@ translation_of: Web/HTTP/Protocol_upgrade_mechanism <p><a href="/en/HTTP" title="en/HTTP">HTTP协议</a> 提供了一种特殊的机制，这一机制允许将一个已建立的连接升级成新的、不相容的协议。这篇指南涵盖了其工作原理和使用场景。</p> -<p>通常来说这一机制总是由客户端发起的 （不过也有例外，比如说可以由服务端发起{{anch("Server-initiated upgrade to TLS", "升级到传输层安全协议（TLS）")}}）， 服务端可以选择是否要升级到新协议。借助这一技术，连接可以以常用的协议启动（如HTTP/1.1），随后再升级到HTTP2甚至是WebSockets.</p> +<p>通常来说这一机制总是由客户端发起的 （不过也有例外，比如说可以由服务端发起<a href="#server-initiated_upgrade_to_tls">升级到传输层安全协议（TLS）</a>）， 服务端可以选择是否要升级到新协议。借助这一技术，连接可以以常用的协议启动（如HTTP/1.1），随后再升级到HTTP2甚至是WebSockets.</p> <p>注意：HTTP/2 明确禁止使用此机制，这个机制只属于HTTP/1.1</p> @@ -31,7 +31,7 @@ Host: www.example.com Connection: upgrade Upgrade: example/1, foo/2</pre> -<p>根据之前的请求的协议，可能需要其他头部信息，例如：从HTTP/1.1升级到<a href="/en-US/docs/Web/API/WebSocket">WebSocket</a> 允许配置有关 WebSocket 连接的头部详细信息，以及在连接时提供一定程度的安全性。查看 {{anch("Upgrading to a WebSocket connection")}} 获取更多信息。</p> +<p>根据之前的请求的协议，可能需要其他头部信息，例如：从HTTP/1.1升级到<a href="/en-US/docs/Web/API/WebSocket">WebSocket</a> 允许配置有关 WebSocket 连接的头部详细信息，以及在连接时提供一定程度的安全性。查看 <a href="#升级到websocket协议的连接">升级到WebSocket协议的连接</a> 获取更多信息。</p> <p>如果服务器决定升级这次连接，就会返回一个 {{HTTPStatus(101, "101 Switching Protocols")}} 响应状态码，和一个要切换到的协议的头部字段Upgrade。 如果服务器没有（或者不能）升级这次连接，它会忽略客户端发送的 <code>"Upgrade</code> 头部字段，返回一个常规的响应：例如一个{{HTTPStatus(200, "200 OK")}}).</p> @@ -204,7 +204,7 @@ Connection: Upgrade and what to do if this text is seen ... </html></pre> -<p>If the client receiving the <code>"426 Upgrade Required"</code> response is willing and able to upgrade to TLS, it should then start the same process covered above under {{anch("Client-initiated upgrade to TLS")}}.</p> +<p>If the client receiving the <code>"426 Upgrade Required"</code> response is willing and able to upgrade to TLS, it should then start the same process covered above under <a href="#client-initiated_upgrade_to_http_over_tls">Client-initiated upgrade to HTTP over TLS</a>.</p> <h2 id="References">References</h2> diff --git a/files/zh-cn/web/javascript/guide/grammar_and_types/index.html b/files/zh-cn/web/javascript/guide/grammar_and_types/index.html index 4ac46cbc48..379e4b7a3c 100644 --- a/files/zh-cn/web/javascript/guide/grammar_and_types/index.html +++ b/files/zh-cn/web/javascript/guide/grammar_and_types/index.html @@ -333,13 +333,13 @@ y = 42 + " is the answer" // "42 is the answer" <p>在JavaScript中，你可以使用各种字面量。这些字面量是脚本中按字面意思给出的固定的值，而不是变量。（译注：字面量是常量，其值是固定的，而且在程序脚本运行中不可更改，比如<em>false</em>，3.1415，thisIsStringOfHelloworld<em> </em>，invokedFunction: myFunction("myArgument")。本节将介绍以下类型的字面量：</p> <ul> - <li>{{anch("数组字面量(Array literals)")}}</li> - <li>{{anch("布尔字面量(Boolean literals)")}}</li> - <li>{{anch("浮点数字面量(Floating-point literals)")}}</li> - <li>{{anch("整数(Integers)")}}</li> - <li>{{anch("对象字面量(Object literals)")}}</li> - <li>{{anch("RegExp literals")}}</li> - <li>{{anch("字符串字面量(String literals)")}}</li> + <li><a href="#数组字面量_array_literals">数组字面量(Array literals)</a></li> + <li><a href="#布尔字面量_boolean_literals">布尔字面量(Boolean literals)</a></li> + <li><a href="#浮点数字面量_floating-point_literals">浮点数字面量(Floating-point literals)</a></li> + <li><a href="#整数_integers">整数(Integers)</a></li> + <li><a href="#对象字面量_object_literals">对象字面量(Object literals)</a></li> + <li><a href="#regexp_字面值">RegExp 字面值</a></li> + <li><a href="#字符串字面量_string_literals">字符串字面量(String literals)</a></li> </ul> <h3 id="数组字面量_Array_literals">数组字面量 (Array literals)</h3> diff --git a/files/zh-cn/web/javascript/guide/loops_and_iteration/index.html b/files/zh-cn/web/javascript/guide/loops_and_iteration/index.html index 67792dcf88..06d89bdb7d 100644 --- a/files/zh-cn/web/javascript/guide/loops_and_iteration/index.html +++ b/files/zh-cn/web/javascript/guide/loops_and_iteration/index.html @@ -26,14 +26,14 @@ for (step = 0; step < 5; step++) { <p>JavaScript中提供了这些循环语句：</p> <ul> - <li>{{anch("for 语句")}}</li> - <li>{{anch("do...while 语句")}}</li> - <li>{{anch("while 语句")}}</li> - <li>{{anch("labeled 语句")}}</li> - <li>{{anch("break 语句")}}</li> - <li>{{anch("continue 语句")}}</li> - <li>{{anch("for...in 语句")}}</li> - <li>{{anch("for...of 语句")}}</li> + <li><a href="#for_语句">for 语句</a></li> + <li><a href="#do...while_语句">do...while 语句</a></li> + <li><a href="#while_语句">while 语句</a></li> + <li><a href="#label_语句">label 语句</a></li> + <li><a href="#break_语句">break 语句</a></li> + <li><a href="#continue_语句">continue 语句</a></li> + <li><a href="#for...in_语句">for...in 语句</a></li> + <li><a href="#for...of_语句">for...of 语句</a></li> </ul> <h2 id="for_语句"><code>for</code> 语句</h2> diff --git a/files/zh-cn/web/javascript/guide/modules/index.html b/files/zh-cn/web/javascript/guide/modules/index.html index e3db44e9a0..323cb679ea 100644 --- a/files/zh-cn/web/javascript/guide/modules/index.html +++ b/files/zh-cn/web/javascript/guide/modules/index.html @@ -217,7 +217,7 @@ reportPerimeter(square1.length, reportList); <pre class="brush: js">import {default as randomSquare} from './modules/square.mjs';</pre> <div class="note"> -<p><strong>备注：</strong>重命名导出项的as语法在下面的{{anch("Renaming imports and exports")}}部分中进行了说明。</p> +<p><strong>备注：</strong>重命名导出项的as语法在下面的<a href="#重命名导出与导入">重命名导出与导入</a>部分中进行了说明。</p> </div> <h2 id="避免命名冲突">避免命名冲突</h2> @@ -410,7 +410,7 @@ import { Triangle } from './modules/triangle.mjs';</pre> <p>浏览器中可用的JavaScript模块功能的最新部分是动态模块加载。 这允许您仅在需要时动态加载模块，而不必预先加载所有模块。 这有一些明显的性能优势; 让我们继续阅读，看看它是如何工作的。</p> -<p>这个新功能允许您将<code>import()</code>作为函数调用，将其作为参数传递给模块的路径。 它返回一个 <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise">promise</a>，它用一个模块对象来实现（参见{{anch("Creating a module object")}}），让你可以访问该对象的导出，例如</p> +<p>这个新功能允许您将<code>import()</code>作为函数调用，将其作为参数传递给模块的路径。 它返回一个 <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise">promise</a>，它用一个模块对象来实现（参见<a href="#创建模块对象">创建模块对象</a>），让你可以访问该对象的导出，例如</p> <pre class="brush: js">import('/modules/myModule.mjs') .then((module) => { diff --git a/files/zh-cn/web/javascript/guide/working_with_objects/index.html b/files/zh-cn/web/javascript/guide/working_with_objects/index.html index 187721e0a9..0584ec44aa 100644 --- a/files/zh-cn/web/javascript/guide/working_with_objects/index.html +++ b/files/zh-cn/web/javascript/guide/working_with_objects/index.html @@ -159,7 +159,7 @@ myCar.year = 1969 <p>你也可以用对象初始化器来创建数组。参见 {{ web.link("Values%2C_variables%2C_and_literals#Array_literals", "array literals") }}.</p> -<p>在 JavaScript 1.1 及更早版本中，你不能使用对象初始化器。你只能通过使用构造函数或其他对象的函数来创建对象。参见 {{ anch("使用构造函数") }}.</p> +<p>在 JavaScript 1.1 及更早版本中，你不能使用对象初始化器。你只能通过使用构造函数或其他对象的函数来创建对象。参见 <a href="#使用构造函数">使用构造函数</a>.</p> <h3 id="使用构造函数">使用构造函数</h3> diff --git a/files/zh-cn/web/javascript/reference/global_objects/date/index.html b/files/zh-cn/web/javascript/reference/global_objects/date/index.html index 19b33d4de4..3b34a0c4c5 100644 --- a/files/zh-cn/web/javascript/reference/global_objects/date/index.html +++ b/files/zh-cn/web/javascript/reference/global_objects/date/index.html @@ -55,7 +55,7 @@ new Date(<var>year</var>, <var>monthIndex</var> [, <var>day</var> [, <var>hours< <dl> <dt><code>year</code></dt> - <dd>表示年份的整数值。 0到99会被映射至1900年至1999年，其它值代表实际年份。参见 {{anch("Two_digit_years_map_to_1900_-_1999", "示例")}}。</dd> + <dd>表示年份的整数值。 0到99会被映射至1900年至1999年，其它值代表实际年份。参见 <a href="#例子：将两位数年份映射为_1900_-_1999_年">示例</a>。</dd> <dt><code>monthIndex</code></dt> <dd>表示月份的整数值，从 0（1月）到 11（12月）。</dd> <dt>date{{optional_inline}}</dt> diff --git a/files/zh-cn/web/javascript/reference/global_objects/function/apply/index.html b/files/zh-cn/web/javascript/reference/global_objects/function/apply/index.html index bee3572f70..2db7f42b1d 100644 --- a/files/zh-cn/web/javascript/reference/global_objects/function/apply/index.html +++ b/files/zh-cn/web/javascript/reference/global_objects/function/apply/index.html @@ -29,7 +29,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/Function/apply <dt><code>thisArg</code></dt> <dd>必选的。在 <em><code>func</code></em> 函数运行时使用的 <code>this</code> 值。请注意，<code>this</code>可能不是该方法看到的实际值：如果这个函数处于{{jsxref("Strict_mode", "非严格模式", "", 1)}}下，则指定为 <code>null</code> 或 <code>undefined</code> 时会自动替换为指向全局对象，原始值会被包装。</dd> <dt><code>argsArray</code></dt> - <dd>可选的。一个数组或者类数组对象，其中的数组元素将作为单独的参数传给 <code>func</code> 函数。如果该参数的值为 {{jsxref("null")}} 或 {{jsxref("undefined")}}，则表示不需要传入任何参数。从ECMAScript 5 开始可以使用类数组对象。 {{anch("Browser_compatibility", "浏览器兼容性")}} 请参阅本文底部内容。</dd> + <dd>可选的。一个数组或者类数组对象，其中的数组元素将作为单独的参数传给 <code>func</code> 函数。如果该参数的值为 {{jsxref("null")}} 或 {{jsxref("undefined")}}，则表示不需要传入任何参数。从ECMAScript 5 开始可以使用类数组对象。<a href="#浏览器兼容性">浏览器兼容性</a> 请参阅本文底部内容。</dd> </dl> <h3 id="返回值">返回值</h3> diff --git a/files/zh-cn/web/javascript/reference/global_objects/intl/index.html b/files/zh-cn/web/javascript/reference/global_objects/intl/index.html index 275bfc9db0..d6ae7c60a5 100644 --- a/files/zh-cn/web/javascript/reference/global_objects/intl/index.html +++ b/files/zh-cn/web/javascript/reference/global_objects/intl/index.html @@ -36,7 +36,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/Intl <h2 id="语言区域识别和判定">语言区域识别和判定</h2> -<p>国际化的构造函数和其他构造函数的几个语言敏感的方法（可参考下方的{{anch("See_also", "参见")}}）一样，使用同样的模式来识别语言区域和确定使用哪一种语言格式：他们都接收 <code>locales</code> 和 <code>options</code> 参数，使用 <code>options.localeMatcher</code> 属性指定的一个算法来对比应用请求的和支持的语言区域，来确定使用哪一个语言区域。</p> +<p>国际化的构造函数和其他构造函数的几个语言敏感的方法（可参考下方的<a href="#参见">参见</a>）一样，使用同样的模式来识别语言区域和确定使用哪一种语言格式：他们都接收 <code>locales</code> 和 <code>options</code> 参数，使用 <code>options.localeMatcher</code> 属性指定的一个算法来对比应用请求的和支持的语言区域，来确定使用哪一个语言区域。</p> <h3 id="locales_参数"><code>locales</code> 参数</h3> diff --git a/files/zh-cn/web/javascript/reference/global_objects/object/tostring/index.html b/files/zh-cn/web/javascript/reference/global_objects/object/tostring/index.html index 23b9e41248..ff45834da6 100644 --- a/files/zh-cn/web/javascript/reference/global_objects/object/tostring/index.html +++ b/files/zh-cn/web/javascript/reference/global_objects/object/tostring/index.html @@ -36,7 +36,7 @@ o.toString(); // 返回 [object Object] </pre> <div class="note"> -<p><strong>备注：</strong>如 ECMAScript 5 和随后的 Errata 中所定义，从 JavaScript 1.8.5 开始，<code>toString()</code> 调用 {{jsxref("null")}} 返回<code>[object <em>Null</em>]</code>，{{jsxref("undefined")}} 返回 <code>[object Undefined]</code>。请参阅下面的{{anch("Using_toString()_to_detect_object_class", "使用 <code>toString()</code> 检测对象类型")}}。</p> +<p><strong>备注：</strong>如 ECMAScript 5 和随后的 Errata 中所定义，从 JavaScript 1.8.5 开始，<code>toString()</code> 调用 {{jsxref("null")}} 返回<code>[object <em>Null</em>]</code>，{{jsxref("undefined")}} 返回 <code>[object Undefined]</code>。请参阅下面的<a href="#使用_tostring()_检测对象类型">使用 <code>toString()</code> 检测对象类型</a>。</p> </div> <h2 id="示例">示例</h2> diff --git a/files/zh-cn/web/javascript/reference/global_objects/reflect/isextensible/index.html b/files/zh-cn/web/javascript/reference/global_objects/reflect/isextensible/index.html index 232f92f148..8f42501a5e 100644 --- a/files/zh-cn/web/javascript/reference/global_objects/reflect/isextensible/index.html +++ b/files/zh-cn/web/javascript/reference/global_objects/reflect/isextensible/index.html @@ -5,7 +5,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/Reflect/isExtensible --- <div>{{JSRef}}</div> -<p><code>静态方法 <strong>Reflect</strong></code><strong><code>.isExtensible()</code></strong> 判断一个对象是否可扩展 （即是否能够添加新的属性）。与它 {{jsxref("Object.isExtensible()")}} 方法相似，但有一些不同，详情可见 {{anch("Difference to Object.isExtensible()", "differences")}}。</p> +<p><code>静态方法 <strong>Reflect</strong></code><strong><code>.isExtensible()</code></strong> 判断一个对象是否可扩展 （即是否能够添加新的属性）。与它 {{jsxref("Object.isExtensible()")}} 方法相似，但有一些不同，详情可见 <a href="#与_object.isextensible()_的不同点">与 Object.isExtensible() 的不同点</a>。</p> <h2 id="语法">语法</h2> diff --git a/files/zh-cn/web/javascript/reference/global_objects/reflect/preventextensions/index.html b/files/zh-cn/web/javascript/reference/global_objects/reflect/preventextensions/index.html index 7d24c17fe6..82a85ecf84 100644 --- a/files/zh-cn/web/javascript/reference/global_objects/reflect/preventextensions/index.html +++ b/files/zh-cn/web/javascript/reference/global_objects/reflect/preventextensions/index.html @@ -5,7 +5,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/Reflect/preventExtension --- <div>{{JSRef}}</div> -<p>静态方法 <code><strong>Reflect</strong></code><strong><code>.preventExtensions()</code></strong> 方法阻止新属性添加到对象 (例如：防止将来对对象的扩展被添加到对象中)。该方法与 {{jsxref("Object.preventExtensions()")}}相似，但有一些不同点。详情可见 {{anch("与_Object.preventExtensions_的不同点", "differences")}}。</p> +<p>静态方法 <code><strong>Reflect</strong></code><strong><code>.preventExtensions()</code></strong> 方法阻止新属性添加到对象 (例如：防止将来对对象的扩展被添加到对象中)。该方法与 {{jsxref("Object.preventExtensions()")}}相似，但有一些不同点。详情可见 <a href="#与_object.preventextensions_的不同点">differences</a>。</p> <p>{{EmbedInteractiveExample("pages/js/reflect-preventextensions.html")}}</p> diff --git a/files/zh-cn/web/javascript/reference/operators/typeof/index.html b/files/zh-cn/web/javascript/reference/operators/typeof/index.html index 1a149d5ed6..d3364a5f8c 100644 --- a/files/zh-cn/web/javascript/reference/operators/typeof/index.html +++ b/files/zh-cn/web/javascript/reference/operators/typeof/index.html @@ -47,7 +47,7 @@ typeof(operand)</em> </tr> <tr> <td>{{glossary("Null")}}</td> - <td><code>"object"</code> (见{{anch("null", "下文")}})</td> + <td><code>"object"</code> (见<a href="#typeof_null">下文</a>)</td> </tr> <tr> <td>{{glossary("Boolean")}}</td> diff --git a/files/zh-cn/web/javascript/reference/statements/import/index.html b/files/zh-cn/web/javascript/reference/statements/import/index.html index 4b59374f0a..fd025e8ef2 100644 --- a/files/zh-cn/web/javascript/reference/statements/import/index.html +++ b/files/zh-cn/web/javascript/reference/statements/import/index.html @@ -116,7 +116,7 @@ var promise = import("module-name");//这是一个处于第三阶段的提案。 // specific, named imports </pre> -<p>当用{{anch("动态导入")}}的方式导入默认导出时，其工作方式有所不同。你需要从返回的对象中解构并重命名 "default" 键。</p> +<p>当用<a href="#动态导入">动态导入</a>的方式导入默认导出时，其工作方式有所不同。你需要从返回的对象中解构并重命名 "default" 键。</p> <pre class="brush: js">(async () => { if (somethingIsTrue) { diff --git a/files/zh-cn/web/media/formats/containers/index.html b/files/zh-cn/web/media/formats/containers/index.html index 0821e05a3d..5e0a5cd9b2 100644 --- a/files/zh-cn/web/media/formats/containers/index.html +++ b/files/zh-cn/web/media/formats/containers/index.html @@ -29,42 +29,42 @@ translation_of: Web/Media/Formats/Containers </thead> <tbody> <tr> - <th scope="row">{{anch("3GP")}}</th> + <th scope="row"><a href="#3gp">3GP</a></th> <td>Third Generation Partnership</td> <td>Firefox for Android</td> </tr> <tr> - <th scope="row">{{anch("ADTS")}}</th> + <th scope="row"><a href="#adts">ADTS</a></th> <td>Audio Data Transport Stream</td> <td>Firefox<sup><a href="#index-foot-2">2</a></sup></td> </tr> <tr> - <th scope="row">{{anch("FLAC")}}</th> + <th scope="row"><a href="#flac">FLAC</a></th> <td>Free Lossless Audio Codec</td> <td>Chrome 56, Edge 16, Firefox 51, Safari 11</td> </tr> <tr> - <th scope="row">{{anch("MPEG", "MPEG / MPEG-2")}}</th> + <th scope="row"><a href="#mpegmpeg-2">MPEG / MPEG-2</a></th> <td>Moving Picture Experts Group (1 and 2)</td> <td>—</td> </tr> <tr> - <th scope="row">{{anch("MP4", "MPEG-4 (MP4)")}}</th> + <th scope="row"><a href="#mpeg-4_mp4">MPEG-4 (MP4)</a></th> <td>Moving Picture Experts Group 4</td> <td>Chrome 3, Edge 12, Firefox, Internet Explorer 9, Opera 24, Safari 3.1</td> </tr> <tr> - <th scope="row">{{anch("Ogg")}}</th> + <th scope="row"><a href="#ogg">Ogg</a></th> <td>Ogg</td> <td>Chrome 3, Firefox 3.5, Edge 17<sup><a href="#index-foot-3">3</a></sup> (desktop only), Internet Explorer 9, Opera 10.50</td> </tr> <tr> - <th scope="row">{{anch("QuickTime", "QuickTime (MOV)")}}</th> + <th scope="row"><a href="#quicktime">QuickTime (MOV)</a></th> <td>Apple QuickTime movie</td> <td>Only older versions of Safari, plus other browsers that supported Apple's QuickTime plugin</td> </tr> <tr> - <th scope="row">{{anch("WebM")}}</th> + <th scope="row"><a href="#webm">WebM</a></th> <td>Web Media</td> <td>Chrome 6, Edge 17<sup><a href="#index-foot-3">3</a></sup> (desktop only), Firefox 4, Opera 10.6, Safari (WebRTC only)</td> </tr> diff --git a/files/zh-cn/web/media/formats/image_types/index.html b/files/zh-cn/web/media/formats/image_types/index.html index 29b8a69cb3..5abcecd58a 100644 --- a/files/zh-cn/web/media/formats/image_types/index.html +++ b/files/zh-cn/web/media/formats/image_types/index.html @@ -33,7 +33,7 @@ translation_of: Web/Media/Formats/Image_types </thead> <tbody> <tr> - <th scope="row">{{anch("APNG")}}</th> + <th scope="row"><a href="#apng_animated_portable_network_graphics">APNG</a></th> <th scope="row">Animated Portable Network Graphics<br> <strong>动态便携式网络图像</strong></th> <td><code>image/apng</code></td> @@ -41,7 +41,7 @@ translation_of: Web/Media/Formats/Image_types <td>Chrome, Edge, Firefox, Opera, Safari</td> </tr> <tr> - <th scope="row">{{anch("AVIF")}}</th> + <th scope="row"><a href="#avif">AVIF</a></th> <th scope="row">AV1 Image File Format<br> AV1 图像文件格式</th> <td><code>image/</code>avif</td> @@ -49,7 +49,7 @@ translation_of: Web/Media/Formats/Image_types <td>Chrome, Opera, Firefox (feature flag)</td> </tr> <tr> - <th scope="row">{{anch("BMP")}}</th> + <th scope="row"><a href="#bmp_bitmap_file">BMP</a></th> <th scope="row">Bitmap file<br> <strong>位图</strong>文件</th> <td><code>image/bmp</code></td> @@ -57,7 +57,7 @@ translation_of: Web/Media/Formats/Image_types <td>Chrome, Edge, Firefox, Internet Explorer, Opera, Safari</td> </tr> <tr> - <th scope="row">{{anch("GIF")}}</th> + <th scope="row"><a href="#gif_graphics_interchange_format">GIF</a></th> <th scope="row">Graphics Interchange Format<br> 图像互换格式</th> <td><code>image/gif</code></td> @@ -65,7 +65,7 @@ translation_of: Web/Media/Formats/Image_types <td>Chrome, Edge, Firefox, Internet Explorer, Opera, Safari</td> </tr> <tr> - <th scope="row">{{anch("ICO")}}</th> + <th scope="row"><a href="#ico_microsoft_windows_icon">ICO</a></th> <th scope="row">Microsoft Icon<br> 微软图标</th> <td><code>image/x-icon</code></td> @@ -73,7 +73,7 @@ translation_of: Web/Media/Formats/Image_types <td>Chrome, Edge, Firefox, Internet Explorer, Opera, Safari</td> </tr> <tr> - <th scope="row">{{anch("JPEG")}}</th> + <th scope="row"><a href="#jpeg_joint_photographic_experts_group_image">JPEG</a></th> <th scope="row">Joint Photographic Expert Group image<br> 联合影像专家小组图像</th> <td><code>image/jpeg</code></td> @@ -81,7 +81,7 @@ translation_of: Web/Media/Formats/Image_types <td>Chrome, Edge, Firefox, Internet Explorer, Opera, Safari</td> </tr> <tr> - <th scope="row">{{anch("PNG")}}</th> + <th scope="row"><a href="#png_portable_network_graphics">PNG</a></th> <th scope="row">Portable Network Graphics<br> <strong>便携式网络图像</strong></th> <td><code>image/png</code></td> @@ -89,7 +89,7 @@ translation_of: Web/Media/Formats/Image_types <td>Chrome, Edge, Firefox, Internet Explorer, Opera, Safari</td> </tr> <tr> - <th scope="row">{{anch("SVG")}}</th> + <th scope="row"><a href="#svg_scalable_vector_graphics">SVG</a></th> <th scope="row">Scalable Vector Graphics<br> <strong>可缩放矢量图形</strong></th> <td><code>image/svg+xml</code></td> @@ -97,7 +97,7 @@ translation_of: Web/Media/Formats/Image_types <td>Chrome, Edge, Firefox, Internet Explorer, Opera, Safari</td> </tr> <tr> - <th scope="row">{{anch("TIFF")}}</th> + <th scope="row"><a href="#tiff_tagged_image_file_format">TIFF</a></th> <th scope="row">Tagged Image File Format<br> 标签图像文件格式</th> <td><code>image/tiff</code></td> @@ -105,7 +105,7 @@ translation_of: Web/Media/Formats/Image_types <td>Safari</td> </tr> <tr> - <th scope="row">{{anch("WebP")}}</th> + <th scope="row"><a href="#webp_image">WebP</a></th> <th scope="row">Web Picture format<br> 万维网图像格式</th> <td><code>image/webp</code></td> @@ -126,7 +126,7 @@ translation_of: Web/Media/Formats/Image_types <h3 id="APNG_Animated_Portable_Network_Graphics"><a id="APNG" name="APNG">APNG</a> (Animated Portable Network Graphics)</h3> -<p>APNG is a file format first introduced by Mozilla which extends the {{anch("PNG")}} standard to add support for animated images. Conceptually similar to the animated GIF format which has been in use for decades, APNG is more capable in that it supports a variety of {{interwiki("wikipedia", "color depth", "color depths")}}, whereas animated GIF supports only 8-bit {{interwiki("wikipedia", "indexed color")}}.</p> +<p>APNG is a file format first introduced by Mozilla which extends the <a href="#png_portable_network_graphics">PNG</a> standard to add support for animated images. Conceptually similar to the animated GIF format which has been in use for decades, APNG is more capable in that it supports a variety of {{interwiki("wikipedia", "color depth", "color depths")}}, whereas animated GIF supports only 8-bit {{interwiki("wikipedia", "indexed color")}}.</p> <p>APNG is ideal for basic animations that do not need to synchronize to other activities or to a sound track, such as progress indicators, activity {{interwiki("wikipedia", "throbber", "throbbers")}}, and other animated sequences. For example, APNG is <a href="https://developer.apple.com/stickers/">one of the formats supported when creating animated stickers</a> for Apple's iMessage application (and the Messages application on iOS). They're also commonly used for the animated portions of web browsers' user interfaces.</p> @@ -216,7 +216,7 @@ translation_of: Web/Media/Formats/Image_types <p>While other data representations are defined in the specification, they are not widely used and often completely unimplemented. These features include: support for different bit depths, indexed color, alpha channels, and different pixel orders (by default, BMP is written from bottom-left corner toward the right and top, rather than from the top-left corner toward the right and bottom).</p> -<p>Theoretically, several compression algorithms are supported, and the image data can also be stored in {{anch("JPEG")}} or {{anch("PNG")}} format within the BMP file.</p> +<p>Theoretically, several compression algorithms are supported, and the image data can also be stored in <a href="#jpeg_joint_photographic_experts_group_image">JPEG</a> or <a href="#png_portable_network_graphics">PNG</a> format within the BMP file.</p> <table class="standard-table"> <tbody> @@ -294,7 +294,7 @@ translation_of: Web/Media/Formats/Image_types <h3 id="GIF_Graphics_Interchange_Format"><a id="GIF" name="GIF">GIF</a> (Graphics Interchange Format)</h3> -<p>In 1987, the CompuServe online service provider introduced the <strong>{{interwiki("wikipedia", "GIF")}}</strong> (<strong>Graphics Interchange Format</strong>) image file format to provide a compressed graphics format that all members of their service would be able to use. GIF uses the {{interwiki("wikipedia", "Lempel-Ziv-Welch")}} (LZW) algorithm to losslessly compress 8-bit indexed color graphics. GIF was one of the first two graphics formats supported by {{Glossary("HTML")}}, along with {{anch("XBM")}}.</p> +<p>In 1987, the CompuServe online service provider introduced the <strong>{{interwiki("wikipedia", "GIF")}}</strong> (<strong>Graphics Interchange Format</strong>) image file format to provide a compressed graphics format that all members of their service would be able to use. GIF uses the {{interwiki("wikipedia", "Lempel-Ziv-Welch")}} (LZW) algorithm to losslessly compress 8-bit indexed color graphics. GIF was one of the first two graphics formats supported by {{Glossary("HTML")}}, along with <a href="#xbm_x_window_system_bitmap_file">XBM</a>.</p> <p>Each pixel in a GIF is represented by a single 8-bit value serving as an index into a palette of 24-bit colors (8 bits each of red, green, and blue). The length of a color table is always a power of 2 (that is, each palette has 2, 4, 8, 16, 32, 64, or 256 entries). To simulate more than 255 or 256 colors, {{interwiki("wikipedia", "dithering")}} is generally used. It is <a href="https://gif.ski/">technically possible</a> to tile multiple image blocks, each with its own color palette, to create truecolor images, but in practice this is rarely done.</p> @@ -306,7 +306,7 @@ translation_of: Web/Media/Formats/Image_types <p>Another popular feature of GIF is support for {{interwiki("wikipedia", "Interlacing_(bitmaps)", "interlacing")}}, where rows of pixels are stored out of order so that partially-received files can be displayed in lower quality. This is particularly useful when network connections are slow.</p> -<p>GIF is a good choice for simple images and animations, although converting full color images to GIF can result in unsatisfactory dithering. Typically, modern content should use {{anch("PNG")}} for lossless <em>and</em> indexed still images, and should consider using {{anch("APNG")}} for lossless animation sequences.</p> +<p>GIF is a good choice for simple images and animations, although converting full color images to GIF can result in unsatisfactory dithering. Typically, modern content should use <a href="#png_portable_network_graphics">PNG</a> for lossless <em>and</em> indexed still images, and should consider using <a href="#apng_animated_portable_network_graphics">APNG</a> for lossless animation sequences.</p> <table class="standard-table"> <tbody> @@ -387,7 +387,7 @@ translation_of: Web/Media/Formats/Image_types <p>The ICO (Microsoft Windows icon) file format was designed by Microsoft for desktop icons of Windows systems. However, early versions of Internet Explorer introduced the ability for a web site to provide a ICO file named <code>favicon.ico</code> in a web site's root directory to specify a <strong><a href="/zh-CN/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML#Adding_custom_icons_to_your_site">favicon</a></strong> — an icon to be displayed in the Favorites menu, and other places where an iconic representation of the site would be useful.</p> -<p>An ICO file can contain multiple icons, and begins with a directory listing details about each. Following the directory comes the data for the icons. Each icon's data can be either a {{anch("BMP")}} image without the file header, or a complete {{anch("PNG")}} image (including the file header). If you use ICO files, you should use the BMP format, as support for PNG inside ICO files wasn't added until Windows Vista and may not be well supported.</p> +<p>An ICO file can contain multiple icons, and begins with a directory listing details about each. Following the directory comes the data for the icons. Each icon's data can be either a <a href="#bmp_bitmap_file">BMP</a> image without the file header, or a complete <a href="#png_portable_network_graphics">PNG</a> image (including the file header). If you use ICO files, you should use the BMP format, as support for PNG inside ICO files wasn't added until Windows Vista and may not be well supported.</p> <div class="blockIndicator warning"> <p>ICO files <em>should not</em> be used in web content. Additionally, their use for favicons has subsided in favor of using a PNG file and the {{HTMLElement("link")}} element, as described in {{SectionOnPage("/en-US/docs/Web/HTML/Element/link", "Providing icons for different usage contexts")}}.</p> @@ -584,7 +584,7 @@ translation_of: Web/Media/Formats/Image_types <h3 id="PNG_Portable_Network_Graphics"><a id="PNG" name="PNG">PNG</a> (Portable Network Graphics)</h3> -<p>The {{Glossary("PNG")}} (pronounced "<strong>ping</strong>") image format uses lossless or lossy compression to provide more efficient compression, and supports higher color depths than {{anch("GIF")}}, as well as full alpha transparency support.</p> +<p>The {{Glossary("PNG")}} (pronounced "<strong>ping</strong>") image format uses lossless or lossy compression to provide more efficient compression, and supports higher color depths than <a href="#gif_graphics_interchange_format">GIF</a>, as well as full alpha transparency support.</p> <p>PNG is widely supported, with all major browsers offering full support for its features. Internet Explorer, which introduced PNG support in versions 4–5, did not fully support it until IE 9, and had many infamous bugs for many of the intervening years, including in the once-omnipresent Internet Explorer 6. This slowed PNG adoption, but it is now commonly used, especially when precise reproduction of the source image is needed.</p> @@ -960,7 +960,7 @@ translation_of: Web/Media/Formats/Image_types <p>WebP also supports animation: in a lossy WebP file, the image data is represented by a VP8 bitstream, which may contain multiple frames. Lossless WebP holds the <code>ANIM</code> chunk, which describes the animation, and the <code>ANMF</code> chunk, which represents a frame of an animation sequence. Looping is supported.</p> -<p>WebP now has broad support in the latest versions of major web browsers, although it does not have deep historical support. Provide a fallback in either {{anch("JPEG")}} or {{anch("PNG")}} format, such as with <a href="/zh-CN/docs/Web/HTML/Element/picture">the <code><picture></code> element</a>.</p> +<p>WebP now has broad support in the latest versions of major web browsers, although it does not have deep historical support. Provide a fallback in either <a href="#jpeg_joint_photographic_experts_group_image">JPEG</a> or <a href="#png_portable_network_graphics">PNG</a> format, such as with <a href="/zh-CN/docs/Web/HTML/Element/picture">the <code><picture></code> element</a>.</p> <table class="standard-table"> <tbody> @@ -1142,7 +1142,7 @@ static unsigned char square8_bits[] = { <h3 id="Photographs">Photographs</h3> -<p>Photographs typically fare well with lossy compression (depending on the encoder's configuration). This makes {{anch("JPEG")}} and {{anch("WebP")}} good choices for photographs, with JPEG being more compatible but WebP perhaps offering better compression. To maximize quality and minimize download time, consider providing both {{anch("Providing image fallbacks", "using a fallback")}} with WebP as the first choice and JPEG as the second. Otherwise, JPEG is the safe choice for compatibility.</p> +<p>Photographs typically fare well with lossy compression (depending on the encoder's configuration). This makes <a href="#jpeg_joint_photographic_experts_group_image">JPEG</a> and <a href="#webp_image">WebP</a> good choices for photographs, with JPEG being more compatible but WebP perhaps offering better compression. To maximize quality and minimize download time, consider providing both <a href="#提供后备图像">using a fallback</a> with WebP as the first choice and JPEG as the second. Otherwise, JPEG is the safe choice for compatibility.</p> <table class="standard-table" style="max-width: 42rem;"> <thead> @@ -1161,9 +1161,9 @@ static unsigned char square8_bits[] = { <h3 id="Icons">Icons</h3> -<p>For smaller images such as icons, use a lossless format to avoid loss of detail in a size-constrained image. While lossless WebP is ideal for this purpose, support is not widespread yet, so PNG is a better choice unless you offer a {{anch("Providing image fallbacks", "fallback")}}. If your image contains fewer than 256 colors, GIF is an option, although PNG often compresses even smaller with its indexed compression option (PNG-8).</p> +<p>For smaller images such as icons, use a lossless format to avoid loss of detail in a size-constrained image. While lossless WebP is ideal for this purpose, support is not widespread yet, so PNG is a better choice unless you offer a <a href="#提供后备图像">fallback</a>. If your image contains fewer than 256 colors, GIF is an option, although PNG often compresses even smaller with its indexed compression option (PNG-8).</p> -<p>If the icon can be represented using vector graphics, consider {{anch("SVG")}}, since it scales across various resolutions and sizes, so it's perfect for responsive design. Although SVG support is good, it may be worth offering a PNG fallback for older browsers.</p> +<p>If the icon can be represented using vector graphics, consider <a href="#svg_scalable_vector_graphics">SVG</a>, since it scales across various resolutions and sizes, so it's perfect for responsive design. Although SVG support is good, it may be worth offering a PNG fallback for older browsers.</p> <table class="standard-table" style="max-width: 42rem;"> <thead> @@ -1210,8 +1210,8 @@ static unsigned char square8_bits[] = { <th scope="col">Fallback</th> </tr> <tr> - <td>{{anch("SVG")}}</td> - <td>{{anch("PNG")}}</td> + <td><a href="#svg_scalable_vector_graphics">SVG</a></td> + <td><a href="#png_portable_network_graphics">PNG</a></td> </tr> </thead> </table> diff --git a/files/zh-cn/web/media/formats/video_codecs/index.html b/files/zh-cn/web/media/formats/video_codecs/index.html index b520cca7b6..4c659e89e7 100644 --- a/files/zh-cn/web/media/formats/video_codecs/index.html +++ b/files/zh-cn/web/media/formats/video_codecs/index.html @@ -55,17 +55,17 @@ original_slug: Web/Media/Formats/视频编解码器 <td><a href="/en-US/docs/Web/Media/Formats/Containers#MP4">MP4</a></td> </tr> <tr> - <th scope="row">{{anch("MP4V-ES")}}</th> + <th scope="row"><a href="#mp4v-es">MP4V-ES</a></th> <td>MPEG-4 Video Elemental Stream</td> <td><a href="/en-US/docs/Web/Media/Formats/Containers#3GP">3GP</a>, <a href="/en-US/docs/Web/Media/Formats/Containers#MP4">MP4</a></td> </tr> <tr> - <th scope="row">{{anch("MPEG-1")}}</th> + <th scope="row"><a href="#mpeg-1_part_2_video">MPEG-1</a></th> <td>MPEG-1 Part 2 Visual</td> <td><a href="/en-US/docs/Web/Media/Formats/Containers#MPEGMPEG-2">MPEG</a>, <a href="/en-US/docs/Web/Media/Formats/Containers#QuickTime">QuickTime</a></td> </tr> <tr> - <th scope="row">{{anch("MPEG-2")}}</th> + <th scope="row"><a href="#mpeg-2_part_2_video">MPEG-2</a></th> <td>MPEG-2 Part 2 Visual</td> <td><a href="/en-US/docs/Web/Media/Formats/Containers#MP4">MP4</a>, <a href="/en-US/docs/Web/Media/Formats/Containers#MPEGMPEG-2">MPEG</a>, <a href="/en-US/docs/Web/Media/Formats/Containers#QuickTime">QuickTime</a></td> </tr> @@ -116,7 +116,7 @@ original_slug: Web/Media/Formats/视频编解码器 </tr> <tr> <th scope="row">Frame rate</th> - <td>Primarily affects the perceived smoothness of the motion in the image. To a point, the higher the frame rate, the smoother and more realistic the motion will appear. Eventually the point of diminishing returns is reached. See {{anch("Frame rate")}} below for details.</td> + <td>Primarily affects the perceived smoothness of the motion in the image. To a point, the higher the frame rate, the smoother and more realistic the motion will appear. Eventually the point of diminishing returns is reached. See <a href="#reduced_frame_rate">Frame rate</a> below for details.</td> <td>Assuming the frame rate is not reduced during encoding, higher frame rates cause larger compressed video sizes.</td> </tr> <tr> @@ -235,7 +235,7 @@ original_slug: Web/Media/Formats/视频编解码器 <p><a href="https://mdn.mozillademos.org/files/16684/Ringing-effects.png"><img alt="Example of the ringing effect" src="https://mdn.mozillademos.org/files/16684/Ringing-effects.png" style="height: 368px; width: 350px;"></a></p> -<p>Note the blue and pink fringes around the edges of the star above (as well as the stepping and other significant compression artifacts). Those fringes are the ringing effect. Ringing is similar in some respects to {{anch("Mosquito noise", "mosquito noise")}}, except that while the ringing effect is more or less steady and unchanging, mosquito noise shimmers and moves.</p> +<p>Note the blue and pink fringes around the edges of the star above (as well as the stepping and other significant compression artifacts). Those fringes are the ringing effect. Ringing is similar in some respects to <a href="#mosquito_noise">mosquito noise</a>, except that while the ringing effect is more or less steady and unchanging, mosquito noise shimmers and moves.</p> <p>RInging is another type of artifact that can make it particularly difficult to read text contained in your images.</p> @@ -257,7 +257,7 @@ original_slug: Web/Media/Formats/视频编解码器 <h3 id="Mosquito_noise">Mosquito noise</h3> -<p><strong>Mosquito noise</strong> is a temporal artifact which presents as noise or <strong>edge busyness</strong> that appears as a flickering haziness or shimmering that roughly follows outside the edges of objects with hard edges or sharp transitions between foreground objects and the background. The effect can be similar in appearance to {{anch("Ringing", "ringing")}}.</p> +<p><strong>Mosquito noise</strong> is a temporal artifact which presents as noise or <strong>edge busyness</strong> that appears as a flickering haziness or shimmering that roughly follows outside the edges of objects with hard edges or sharp transitions between foreground objects and the background. The effect can be similar in appearance to <a href="#ringing">ringing</a>.</p> <p><img alt="" src="https://mdn.mozillademos.org/files/16687/mosquito-effect-sm.png" style="height: 393px; width: 400px;"></p> @@ -316,7 +316,7 @@ original_slug: Web/Media/Formats/视频编解码器 <h3 id="AV1">AV1</h3> -<p>The <strong>AOMedia Video 1</strong> (<strong>AV1</strong>) codec is an open format designed by the <a href="https://aomedia.org/">Alliance for Open Media</a> specifically for internet video. It achieves higher data compression rates than {{anch("VP9")}} and {{anch("HEVC", "H.265/HEVC")}}, and as much as 50% higher rates than <a href="/en-US/docs/Web/Media/Formats/Video_codecs#AVC_(H.264)">AVC</a>. AV1 is fully royalty-free and is designed for use by both the {{HTMLElement("video")}} element and by <a href="/en-US/docs/Web/API/WebRTC_API">WebRTC</a>.</p> +<p>The <strong>AOMedia Video 1</strong> (<strong>AV1</strong>) codec is an open format designed by the <a href="https://aomedia.org/">Alliance for Open Media</a> specifically for internet video. It achieves higher data compression rates than <a href="#vp9">VP9</a> and <a href="#hevc_h.265">H.265/HEVC</a>, and as much as 50% higher rates than <a href="/en-US/docs/Web/Media/Formats/Video_codecs#AVC_(H.264)">AVC</a>. AV1 is fully royalty-free and is designed for use by both the {{HTMLElement("video")}} element and by <a href="/en-US/docs/Web/API/WebRTC_API">WebRTC</a>.</p> <p>AV1 currently offers three profiles: <strong>main</strong>, <strong>high</strong>, and <strong>professional</strong> with increasing support for color depths and chroma subsampling. In addition, a series of <strong>levels</strong> are specified, each defining limits on a range of attributes of the video. These attributes include frame dimensions, image area in pixels, display and decode rates, average and maximum bit rates, and limits on the number of tiles and tile columns used in the encoding/decoding process.</p> @@ -689,7 +689,7 @@ original_slug: Web/Media/Formats/视频编解码器 <h3 id="HEVC_H.265"><a id="HEVC" name="HEVC">HEVC</a> (H.265)</h3> -<p>The <strong><a href="http://hevc.info/">High Efficiency Video Coding</a></strong> (<strong>HVEC</strong>) codec is defined by ITU's <strong>H.265</strong> as well as by MPEG-H Part 2 (the still in-development follow-up to MPEG-4). HEVC was designed to support efficient encoding and decoding of video in sizes including very high resolutions (including 8K video), with a structure specifically designed to let software take advantage of modern processors. Theoretically, HEVC can achieve compressed file sizes half that of {{anch("AVC")}} but with comparable image quality.</p> +<p>The <strong><a href="http://hevc.info/">High Efficiency Video Coding</a></strong> (<strong>HVEC</strong>) codec is defined by ITU's <strong>H.265</strong> as well as by MPEG-H Part 2 (the still in-development follow-up to MPEG-4). HEVC was designed to support efficient encoding and decoding of video in sizes including very high resolutions (including 8K video), with a structure specifically designed to let software take advantage of modern processors. Theoretically, HEVC can achieve compressed file sizes half that of <a href="#avc_h.264">AVC</a> but with comparable image quality.</p> <p>For example, each coding tree unit (CTU)—similar to the macroblock used in previous codecs—consists of a tree of luma values for each sample as well as a tree of chroma values for each chroma sample used in the same coding tree unit, as well as any required syntax elements. This structure supports easy processing by multiple cores.</p> @@ -1268,7 +1268,7 @@ original_slug: Web/Media/Formats/视频编解码器 <h3 id="VP8">VP8</h3> -<p>The <strong>Video Processor 8</strong> (<strong>VP8</strong>) codec was initially created by On2 Technologies. Following their purchase of On2, Google released VP8 as an open and royalty-free video format under a promise not to enforce the relevant patents. In terms of quality and compression rate, VP8 is comparable to {{anch("AVC")}}.</p> +<p>The <strong>Video Processor 8</strong> (<strong>VP8</strong>) codec was initially created by On2 Technologies. Following their purchase of On2, Google released VP8 as an open and royalty-free video format under a promise not to enforce the relevant patents. In terms of quality and compression rate, VP8 is comparable to <a href="#avc_h.264">AVC</a>.</p> <p>If supported by the browser, VP8 allows video with an alpha channel, allowing the video to play with the background able to be seen through the video to a degree specified by each pixel's alpha component.</p> @@ -1375,7 +1375,7 @@ original_slug: Web/Media/Formats/视频编解码器 <p>VP9's main profile supports only 8-bit color depth at 4:2:0 chroma subsampling levels, but its profiles include support for deeper color and the full range of chroma subsampling modes. It supports several HDR imiplementations, and offers substantial freedom in selecting frame rates, aspect ratios, and frame sizes.</p> -<p>VP9 is widely supported by browsers, and hardware implementations of the codec are fairly common. VP9 is one of the two video codecs mandated by <a href="/en-US/docs/Web/Media/Formats/Containers#WebM">WebM</a> (the other being {{anch("VP8")}}). Of note, however, is that Safari supports neither WebM nor VP9, so if you choose to use VP9, be sure to offer a fallback format such as AVC or HEVC for iPhone, iPad, and Mac users.</p> +<p>VP9 is widely supported by browsers, and hardware implementations of the codec are fairly common. VP9 is one of the two video codecs mandated by <a href="/en-US/docs/Web/Media/Formats/Containers#WebM">WebM</a> (the other being <a href="#vp8">VP8</a>). Of note, however, is that Safari supports neither WebM nor VP9, so if you choose to use VP9, be sure to offer a fallback format such as AVC or HEVC for iPhone, iPad, and Mac users.</p> <p>Aside from the lack of Safari support, VP9 is a good choice if you are able to use a WebM container and are able to provide a fallback video in a format such as AVC or HEVC for Safari users. This is especially true if you wish to use an open codec rather than a proprietary one. If you can't provide a fallback and aren't willing to sacrifice Safari compatibility, VP9 in WebM is a good option. Otherwise, you should probably consider a different codec.</p> @@ -1525,13 +1525,13 @@ original_slug: Web/Media/Formats/视频编解码器 <ol> <li> - <p>A <strong><a href="/en-US/docs/Web/Media/Formats/Containers#WebM">WebM</a></strong> container using the <strong>{{anch("VP8")}}</strong> codec for video and the <strong><a href="/en-US/docs/Web/Media/Formats/Audio_codecs#Opus">Opus</a></strong> codec for audio. These are all open, royalty-free formats which are generally well-supported, although only in quite recent browsers, which is why a fallback is a good idea.</p> + <p>A <strong><a href="/en-US/docs/Web/Media/Formats/Containers#WebM">WebM</a></strong> container using the <strong><a href="#vp8">VP8</a></strong> codec for video and the <strong><a href="/en-US/docs/Web/Media/Formats/Audio_codecs#Opus">Opus</a></strong> codec for audio. These are all open, royalty-free formats which are generally well-supported, although only in quite recent browsers, which is why a fallback is a good idea.</p> <pre class="brush: js"><video controls src="filename.webm"></video> </pre> </li> <li> - <p>An <strong><a href="/en-US/docs/Web/Media/Formats/Containers#MP4">MP4</a></strong> container and the <strong>{{anch("AVC")}}</strong> (<strong>H.264</strong>) video codec, ideally with <strong><a href="/en-US/docs/Web/Media/Formats/Audio_codecs#AAC">AAC</a></strong> as your audio codec. This is because the MP4 container with AVC and AAC codecs within is a broadly-supported combination—by every major browser, in fact—and the quality is typically good for most use cases. Make sure you verify your compliance with the license requirements, however.</p> + <p>An <strong><a href="/en-US/docs/Web/Media/Formats/Containers#MP4">MP4</a></strong> container and the <strong><a href="#avc_h.264">AVC</a></strong> (<strong>H.264</strong>) video codec, ideally with <strong><a href="/en-US/docs/Web/Media/Formats/Audio_codecs#AAC">AAC</a></strong> as your audio codec. This is because the MP4 container with AVC and AAC codecs within is a broadly-supported combination—by every major browser, in fact—and the quality is typically good for most use cases. Make sure you verify your compliance with the license requirements, however.</p> <pre class="brush: html"><video controls> <source type="video/webm" @@ -1559,7 +1559,7 @@ original_slug: Web/Media/Formats/视频编解码器 </pre> </li> <li> - <p>An MP4 container using the {{anch("HEVC")}} codec using one of the advanced Main profiles, such as Main 4:2:2 with 10 or 12 bits of color depth, or even the Main 4:4:4 profile at up to 16 bits per component. At a high bit rate, this provides excellent graphics quality with remarkable color reproduction. In addition, you can optionally include HDR metadata to provide high dynamic range video. For audio, use the AAC codec at a high sample rate (at least 48 kHz but ideally 96kHz) and encoded with complex encoding rather than fast encoding.</p> + <p>An MP4 container using the <a href="#hevc_h.265">HEVC</a> codec using one of the advanced Main profiles, such as Main 4:2:2 with 10 or 12 bits of color depth, or even the Main 4:4:4 profile at up to 16 bits per component. At a high bit rate, this provides excellent graphics quality with remarkable color reproduction. In addition, you can optionally include HDR metadata to provide high dynamic range video. For audio, use the AAC codec at a high sample rate (at least 48 kHz but ideally 96kHz) and encoded with complex encoding rather than fast encoding.</p> <pre class="brush: html"><video controls> <source type="video/webm" @@ -1579,7 +1579,7 @@ original_slug: Web/Media/Formats/视频编解码器 <h4 id="Preparing_video_externally">Preparing video externally</h4> -<p>To prepare video for archival purposes from outside your web site or app, use a utility that performs compression on the original uncompressed video data. For example, the free <a href="https://www.videolan.org/developers/x264.html">x264</a> utility can be used to encode video in {{anch("AVC")}} format using a very high bit rate:</p> +<p>To prepare video for archival purposes from outside your web site or app, use a utility that performs compression on the original uncompressed video data. For example, the free <a href="https://www.videolan.org/developers/x264.html">x264</a> utility can be used to encode video in <a href="#avc_h.264">AVC</a> format using a very high bit rate:</p> <pre>x264 --crf 18 -preset ultrafast --output <em>outfilename.mp4</em> <em>infile</em></pre> @@ -1587,7 +1587,7 @@ original_slug: Web/Media/Formats/视频编解码器 <h4 id="Recording_video">Recording video</h4> -<p>Given the constraints on how close to lossless you can get, you might consider using {{anch("AVC")}} or {{anch("AV1")}}. For example, if you're using the <a href="/en-US/docs/Web/API/MediaStream_Recording_API">MediaStream Recording API</a> to record video, you might use code like the following when creating your {{domxref("MediaRecorder")}} object:</p> +<p>Given the constraints on how close to lossless you can get, you might consider using <a href="#avc_h.264">AVC</a> or <a href="#av1">AV1</a>. For example, if you're using the <a href="/en-US/docs/Web/API/MediaStream_Recording_API">MediaStream Recording API</a> to record video, you might use code like the following when creating your {{domxref("MediaRecorder")}} object:</p> <pre class="brush: js">const kbps = 1024; const Mbps = kbps*kbps; @@ -1599,7 +1599,7 @@ const options = { let recorder = new MediaRecorder(sourceStream, options);</pre> -<p>This example creates a <code>MediaRecorder</code> configured to record {{anch("AV1")}} video using BT.2100 HDR in 12-bit color with 4:4:4 chroma subsampling and <a href="/en-US/docs/Web/Media/Formats/Audio_codecs#FLAC">FLAC</a> for lossless audio. The resulting file will use a bit rate of no more than 800 Mbps shared between the video and audio tracks. You will likely need to adjust these values depending on hardware performance, your requirements, and the specific codecs you choose to use. This bit rate is obviously not realistic for network transmission and would likely only be used locally.</p> +<p>This example creates a <code>MediaRecorder</code> configured to record <a href="#av1">AV1</a> video using BT.2100 HDR in 12-bit color with 4:4:4 chroma subsampling and <a href="/en-US/docs/Web/Media/Formats/Audio_codecs#FLAC">FLAC</a> for lossless audio. The resulting file will use a bit rate of no more than 800 Mbps shared between the video and audio tracks. You will likely need to adjust these values depending on hardware performance, your requirements, and the specific codecs you choose to use. This bit rate is obviously not realistic for network transmission and would likely only be used locally.</p> <p>Breaking down the value of the <code>codecs</code> parameter into its dot-delineated properties, we see the following:</p> @@ -1613,7 +1613,7 @@ let recorder = new MediaRecorder(sourceStream, options);</pre> <tbody> <tr> <td><code>av01</code></td> - <td>The four-character code (4CC) designation identifying the {{anch("AV1")}} codec.</td> + <td>The four-character code (4CC) designation identifying the <a href="#av1">AV1</a> codec.</td> </tr> <tr> <td><code>2</code></td> diff --git a/files/zh-cn/web/web_components/using_custom_elements/index.html b/files/zh-cn/web/web_components/using_custom_elements/index.html index 2beef20c92..ecb3e6cd95 100644 --- a/files/zh-cn/web/web_components/using_custom_elements/index.html +++ b/files/zh-cn/web/web_components/using_custom_elements/index.html @@ -44,7 +44,7 @@ translation_of: Web/Web_Components/Using_custom_elements <p>上面只是一个简单的例子，我们能做的不只这些。在构造函数中，我们可以设定一些生命周期的回调函数，在特定的时间，这些回调函数将会被调用。例如，<code>connectedCallback</code>会在 custom element首次被插入到文档DOM节点上时被调用，而 <code>attributeChangedCallback</code>则会在 custom element增加、删除或者修改某个属性时被调用。</p> -<p>你可以在 {{anch("使用生命周期回调函数")}}段落中了解更多相关信息。</p> +<p>你可以在 <a href="#使用生命周期回调函数">使用生命周期回调函数</a>段落中了解更多相关信息。</p> <p>共有两种 custom elements：</p> |