From 6d3234e3f9ff37cbd766dc00c607828ad6f34a53 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Wed, 28 Jul 2021 12:32:33 -0400 Subject: remove link 'title' attributes that's just the 'href' (zh-cn, part 2) (#1730) * remove link 'title' attributes that's just the 'href' (zh-cn, part 2) * more fixes --- files/zh-cn/learn/forms/advanced_form_styling/index.html | 12 ++++++------ .../learn/forms/basic_native_form_controls/index.html | 2 +- files/zh-cn/learn/forms/form_validation/index.html | 4 ++-- .../forms/how_to_build_custom_form_controls/index.html | 10 +++++----- .../learn/forms/how_to_structure_a_web_form/index.html | 4 ++-- .../learn/forms/html_forms_in_legacy_browsers/index.html | 14 +++++++------- .../forms/sending_and_retrieving_form_data/index.html | 4 ++-- files/zh-cn/learn/forms/styling_web_forms/index.html | 4 ++-- 8 files changed, 27 insertions(+), 27 deletions(-) (limited to 'files/zh-cn/learn/forms') diff --git a/files/zh-cn/learn/forms/advanced_form_styling/index.html b/files/zh-cn/learn/forms/advanced_form_styling/index.html index 67d3b8f068..338712fd7e 100644 --- a/files/zh-cn/learn/forms/advanced_form_styling/index.html +++ b/files/zh-cn/learn/forms/advanced_form_styling/index.html @@ -24,7 +24,7 @@ original_slug: Learn/HTML/Forms/Advanced_styling_for_HTML_forms

HTML和CSS最新的发展扩展了CSS的表现力：

@@ -404,7 +404,7 @@ original_slug: Learn/HTML/Forms/How_to_build_custom_form_widgets

在我们将要构建的代码之中，我们将会使用标准的 DOM API 来完成我们所要做的所有工作。尽管 DOM API 在浏览器中得到了更好支持，但是在旧的浏览器上还是会出现问题。( 特别是非常老的 Internet Explorer）。

-

如果你想要避免旧浏览器带来的麻烦，这儿有两种解决方案：使用专门的框架，比如 jQuery, $dom, prototype, Dojo, YUI, 或者类似的框架，或者通过填充你想使用的缺失的特性 （这可以通过条件加载轻松完成——例如使用 yepnope 这样的库。

+

如果你想要避免旧浏览器带来的麻烦，这儿有两种解决方案：使用专门的框架，比如 jQuery, $dom, prototype, Dojo, YUI, 或者类似的框架，或者通过填充你想使用的缺失的特性 （这可以通过条件加载轻松完成——例如使用 yepnope 这样的库。

我们打算使用的特性如下所示（按照风险程度从高到低排列）：

@@ -673,7 +673,7 @@ window.addEventListener('load', function () {

我们构建了一个能够生效的东西，尽管这离一个特性齐全的选择框还差得远，但是它效果不错。但是我们已经完成的事情只不过是摆弄DOM。这个组件并没有真正的语义，即使它看起来像一个选择框，但是从浏览器的角度来看并不是，所以辅助技术并不能明白这是一个选择框。简单来说，这个全新的选择框并不具备可访问性！

-

幸运的是，有一种解决方案叫做 ARIA。ARIA代表"无障碍富互联网应用"。这是一个专为我们现在做的事情设计的 W3C 规范：使网络应用和自定义组件易于访问，它本质上是一组用来拓展 HTML 的属性集，以便我们能够更好的描述角色，状态和属性，就像我们刚才设计的元素是是它试图传递的原生元素一样。使用这些属性非常简单，所以让我们来试试看。

+

幸运的是，有一种解决方案叫做 ARIA。ARIA代表"无障碍富互联网应用"。这是一个专为我们现在做的事情设计的 W3C 规范：使网络应用和自定义组件易于访问，它本质上是一组用来拓展 HTML 的属性集，以便我们能够更好的描述角色，状态和属性，就像我们刚才设计的元素是是它试图传递的原生元素一样。使用这些属性非常简单，所以让我们来试试看。

 role 属性

@@ -725,7 +725,7 @@ window.addEventListener('load', function () { highlightOption(select, optionList[index]); }; -

这是经过所有的改变之后的最终结果。 ( 藉由 NVDA or VoiceOver 这样的辅助技术尝试它，你会对此有更好的体会)：

+

这是经过所有的改变之后的最终结果。 ( 藉由 NVDA or VoiceOver 这样的辅助技术尝试它，你会对此有更好的体会)：

diff --git a/files/zh-cn/learn/forms/how_to_structure_a_web_form/index.html b/files/zh-cn/learn/forms/how_to_structure_a_web_form/index.html index 970fe99cb7..607792bb45 100644 --- a/files/zh-cn/learn/forms/how_to_structure_a_web_form/index.html +++ b/files/zh-cn/learn/forms/how_to_structure_a_web_form/index.html @@ -43,7 +43,7 @@ original_slug: Learn/HTML/Forms/How_to_structure_an_HTML_form

{{HTMLElement("fieldset")}}元素是一种方便的用于创建具有相同目的的小部件组的方式，出于样式和语义目的。 你可以在<fieldset>开口标签后加上一个 {{HTMLElement("legend")}}元素来给{{HTMLElement("fieldset")}} 标上标签。 {{HTMLElement("legend")}}的文本内容正式地描述了{{HTMLElement("fieldset")}}里所含有部件的用途。

-

许多辅助技术将使用{{HTMLElement("legend")}} 元素，就好像它是相应的 {{HTMLElement("fieldset")}} 元素里每个部件的标签的一部分。例如，在说出每个小部件的标签之前，像Jaws或NVDA这样的屏幕阅读器会朗读出legend的内容。

+

许多辅助技术将使用{{HTMLElement("legend")}} 元素，就好像它是相应的 {{HTMLElement("fieldset")}} 元素里每个部件的标签的一部分。例如，在说出每个小部件的标签之前，像Jaws或NVDA这样的屏幕阅读器会朗读出legend的内容。

这里有一个小例子:

@@ -285,7 +285,7 @@ original_slug: Learn/HTML/Forms/How_to_structure_an_HTML_form

另见

{{PreviousMenuNext("Learn/HTML/Forms/Your_first_HTML_form", "Learn/HTML/Forms/The_native_form_widgets", "Learn/HTML/Forms")}}

diff --git a/files/zh-cn/learn/forms/html_forms_in_legacy_browsers/index.html b/files/zh-cn/learn/forms/html_forms_in_legacy_browsers/index.html index eb3a7aa1bc..6e371e694f 100644 --- a/files/zh-cn/learn/forms/html_forms_in_legacy_browsers/index.html +++ b/files/zh-cn/learn/forms/html_forms_in_legacy_browsers/index.html @@ -6,7 +6,7 @@ original_slug: Learn/HTML/Forms/HTML_forms_in_legacy_browsers ---
{{LearnSidebar}}{{PreviousMenuNext("Learn/HTML/Forms/Sending_forms_through_JavaScript", "Learn/HTML/Forms/Styling_HTML_forms", "Learn/HTML/Forms")}}
-

所有 web 开发者很快就会（有时候是痛苦地）发现网络是一个令人不快的地方。我们碰到的最恶毒的诅咒是旧式浏览器。好吧，让我们承认吧，当我们提到 “旧式浏览器” 时，脑海中出现就是 老版本的 Internet Explorer ……但是，这远远不是全部。只发布一年的 Firefox 比如 the ESR version 也是旧式浏览器。那么，在移动世界呢？当浏览器和 OS（操作系统） 都不能更新时？是的，有非常多老版本的 Android 手机或 iPhone 没有更新到最新的浏览器。它们同样是旧式浏览器。

+

所有 web 开发者很快就会（有时候是痛苦地）发现网络是一个令人不快的地方。我们碰到的最恶毒的诅咒是旧式浏览器。好吧，让我们承认吧，当我们提到 “旧式浏览器” 时，脑海中出现就是 老版本的 Internet Explorer ……但是，这远远不是全部。只发布一年的 Firefox 比如 the ESR version 也是旧式浏览器。那么，在移动世界呢？当浏览器和 OS（操作系统） 都不能更新时？是的，有非常多老版本的 Android 手机或 iPhone 没有更新到最新的浏览器。它们同样是旧式浏览器。

可悲的是，处理这些传统浏览器的问题是工作的一部分。幸运的是，有一些技巧可以帮助您解决旧式浏览器导致的大约80％的问题。

@@ -21,7 +21,7 @@ original_slug: Learn/HTML/Forms/HTML_forms_in_legacy_browsers
  • Microsoft: Internet Explorer Standards Support Documentation
  • WebKit: 由于有多个版本的引擎，稍微有点棘手. @@ -32,18 +32,18 @@ original_slug: Learn/HTML/Forms/HTML_forms_in_legacy_browsers

    让事情变得更简单

    -

    由于HTML forms 包含复杂的交互，所以有一条法则: keep it as simple as possible。很多时候，我们想让表单更美观或想使用更高级的技术，然而，构建高效的HTML表单不只是设计和技术问题。记得花时间读一下这篇文章t forms usability on UX For The Masses.

    +

    由于HTML forms 包含复杂的交互，所以有一条法则: keep it as simple as possible。很多时候，我们想让表单更美观或想使用更高级的技术，然而，构建高效的HTML表单不只是设计和技术问题。记得花时间读一下这篇文章t forms usability on UX For The Masses.

    优雅地降级(Graceful degradation)是web开发者最好的朋友

    -

    Graceful degradation and progressive enhancement 是一个开发模式，它允许你通过同时支持多种浏览器来构建优秀内容。当你为现代浏览器构建内容时，你想确保它能在旧式浏览器中以某种方式工作，这就是优雅地降级（graceful degradation）.

    +

    Graceful degradation and progressive enhancement 是一个开发模式，它允许你通过同时支持多种浏览器来构建优秀内容。当你为现代浏览器构建内容时，你想确保它能在旧式浏览器中以某种方式工作，这就是优雅地降级（graceful degradation）.

    让我们看一些关于HTML表单的例子：

    @@ -157,7 +157,7 @@ input.button {

    有很多情形，好的"polyfill"能通过提供缺少的API以提供帮助。一个 polyfill 是一些JavaScript(脚本) 用于填补旧式浏览器中的功能缺失。虽然它们可以用来改进对任何功能的支持，并且使用它们Nederland风险小于CSS和HTML，然而，JS仍然会在很多情况下不工作（网络问题，脚本冲突等）。但是对于JavaScript，如果你总是记住和unobetructive的Javascript一起工作，不适用polyfill也没什么大不了。

    -

    最好的polyfill缺失API的方式是使用Modernizr 库以及它的子项目 YepNope. Modernizr 库允许您测试功能可用性，以便采取相应的行动。YepNope 是一个条件加载库。

    +

    最好的polyfill缺失API的方式是使用Modernizr 库以及它的子项目 YepNope. Modernizr 库允许您测试功能可用性，以便采取相应的行动。YepNope 是一个条件加载库。

    下面是一个例子:

    @@ -180,7 +180,7 @@ input.button {

    Modernizr 团队按照惯例维护着a list of great polyfills。仅仅按需使用即可。

    -

    Note: Modernizr还有其他很棒的功能可以帮助您处理unobstructive的JavaScript和优雅的降级技术。请阅读 Modernizr documentation.

    +

    Note: Modernizr还有其他很棒的功能可以帮助您处理unobstructive的JavaScript和优雅的降级技术。请阅读 Modernizr documentation.

    注意性能

    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 5c1925c943..3533f53fb2 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 @@ -36,7 +36,7 @@ original_slug: Learn/HTML/Forms/Sending_and_retrieving_form_data

    客户端/服务器体系结构

    -

    web基于非常基本的客户端/服务器体系结构，可以总结如下:客户端(通常是web浏览器)向服务器发送请求(大多数情况下是Apache、Nginx、IIS、Tomcat等web服务器)，使用HTTP 协议。服务器使用相同的协议来回答请求。

    +

    web基于非常基本的客户端/服务器体系结构，可以总结如下:客户端(通常是web浏览器)向服务器发送请求(大多数情况下是Apache、Nginx、IIS、Tomcat等web服务器)，使用HTTP 协议。服务器使用相同的协议来回答请求。

    A basic schema of the Web client/server architecture

    @@ -237,7 +237,7 @@ if __name__ == "__main__":

    其他语言和框架

    -

    还有许多其他的服务器端技术可以用于表单处理，包括Perl、Java、 .Net、Ruby等。只挑你最喜欢的用就好。话虽如此，但值得注意的是，直接使用这些技术并不常见，因为这可能很棘手。更常见的是使用许多优秀的框架，这些框架使处理表单变得更容易，例如：

    +

    还有许多其他的服务器端技术可以用于表单处理，包括Perl、Java、 .Net、Ruby等。只挑你最喜欢的用就好。话虽如此，但值得注意的是，直接使用这些技术并不常见，因为这可能很棘手。更常见的是使用许多优秀的框架，这些框架使处理表单变得更容易，例如：