diff options
Diffstat (limited to 'files/zh-cn/learn')
26 files changed, 33 insertions, 41 deletions
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> |