From 4518309e721a0db7188ac8327d6eef4fee6e3fa4 Mon Sep 17 00:00:00 2001 From: Jason Lee Date: Sat, 4 Jun 2022 20:17:16 +0800 Subject: [PATCH 1/2] AutoCorrect files/zh-cn/learn/{f,g,h,i}* --- .../forms/advanced_form_styling/index.html | 72 ++++---- .../forms/basic_native_form_controls/index.md | 10 +- .../learn/forms/form_validation/index.html | 134 +++++++-------- .../example_2/index.html | 8 +- .../index.html | 156 +++++++++--------- .../how_to_structure_a_web_form/index.html | 62 +++---- .../html_forms_in_legacy_browsers/index.html | 76 ++++----- files/zh-cn/learn/forms/index.md | 6 +- .../index.html | 6 +- .../index.html | 114 ++++++------- .../index.html | 96 +++++------ .../learn/forms/styling_web_forms/index.html | 56 +++---- .../learn/forms/your_first_form/index.html | 84 +++++----- .../learn/front-end_web_developer/index.md | 30 ++-- .../css_basics/index.html | 10 +- .../dealing_with_files/index.md | 14 +- .../how_the_web_works/index.html | 12 +- .../html_basics/index.html | 10 +- .../getting_started_with_the_web/index.md | 10 +- .../installing_basic_software/index.md | 10 +- .../javascript_basics/index.html | 34 ++-- .../publishing_your_website/index.html | 30 ++-- .../the_web_and_web_standards/index.html | 84 +++++----- .../what_will_your_website_look_like/index.md | 4 +- .../index.html | 40 ++--- .../author_fast-loading_html_pages/index.html | 30 ++-- files/zh-cn/learn/html/howto/index.html | 52 +++--- .../html/howto/use_data_attributes/index.html | 26 +-- files/zh-cn/learn/html/index.md | 4 +- .../advanced_text_formatting/index.html | 30 ++-- .../creating_hyperlinks/index.html | 92 +++++------ .../debugging_html/index.html | 6 +- .../document_and_website_structure/index.html | 22 +-- .../getting_started/index.html | 100 +++++------ .../html_text_fundamentals/index.html | 70 ++++---- .../learn/html/introduction_to_html/index.md | 10 +- .../marking_up_a_letter/index.md | 8 +- .../structuring_a_page_of_content/index.html | 2 +- .../the_head_metadata_in_html/index.md | 10 +- .../index.html | 66 ++++---- .../images_in_html/index.html | 68 ++++---- .../html/multimedia_and_embedding/index.html | 24 +-- .../mozilla_splash_page/index.html | 26 +-- .../other_embedding_technologies/index.html | 110 ++++++------ .../responsive_images/index.html | 74 ++++----- .../video_and_audio_content/index.html | 28 ++-- .../learn/html/tables/advanced/index.html | 38 ++--- .../zh-cn/learn/html/tables/basics/index.html | 84 +++++----- files/zh-cn/learn/html/tables/index.html | 6 +- .../tables/structuring_planet_data/index.html | 16 +- files/zh-cn/learn/index.md | 8 +- 51 files changed, 1089 insertions(+), 1089 deletions(-) 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 c87451ed18b793..f27ad38551c60a 100644 --- a/files/zh-cn/learn/forms/advanced_form_styling/index.html +++ b/files/zh-cn/learn/forms/advanced_form_styling/index.html @@ -6,22 +6,22 @@ ---
{{LearnSidebar}}{{PreviousMenuNext("Learn/HTML/Forms/Styling_HTML_forms", "Learn/HTML/Forms/Property_compatibility_table_for_form_widgets", "Learn/HTML/Forms")}}
-

在本文中，我们将看到HTML表单怎样使用CSS装饰难以定制的表单小部件。如前面章节所示，文本域和按钮完全可以使用CSS，现在我们将深入探索HTML表单样式。

+

在本文中，我们将看到HTML表单怎样使用CSS装饰难以定制的表单小部件。如前面章节所示，文本域和按钮完全可以使用 CSS，现在我们将深入探索 HTML 表单样式。

在继续之前，让我们回忆一下两种表单小部件：

bad
-
这个元素很难设计，需要一些复杂的技巧，有时还涉及到高级的CSS3的知识。
+
这个元素很难设计，需要一些复杂的技巧，有时还涉及到高级的 CSS3 的知识。
ugly
-
忘记使用CSS来设计这些元素吧。你最多能做一点点事情，还不能保证可以跨浏览器，而且在它们出现时永远不能做到完全的受控。
+
忘记使用 CSS 来设计这些元素吧。你最多能做一点点事情，还不能保证可以跨浏览器，而且在它们出现时永远不能做到完全的受控。
-

CSS表现力

+

CSS 表现力

-

除了文本框和按钮之外，使用其他表单小部件的主要问题是在许多情况下，CSS的表现不能满足设计复杂的小部件的要求。

+

除了文本框和按钮之外，使用其他表单小部件的主要问题是在许多情况下，CSS 的表现不能满足设计复杂的小部件的要求。

-

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

+

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

-
  • CSS Selector Level 3 增加了三个与HTML表单相关的伪类： +
  • CSS Selector Level 3 增加了三个与 HTML 表单相关的伪类： -

    所有这一切是一个好的开端，但是有两个问题。首先，一些浏览器不需要实现CSS 2.1之上的特性。其次在设计像日期选择器这样的复杂的小部件时，这些实在不够好。

    +

    所有这一切是一个好的开端，但是有两个问题。首先，一些浏览器不需要实现 CSS 2.1 之上的特性。其次在设计像日期选择器这样的复杂的小部件时，这些实在不够好。

    -

    浏览器厂家在CSS表现力在表单方面的扩展做了一些尝试，在某些情况下，知道什么可用也挺不错的。

    +

    浏览器厂家在 CSS 表现力在表单方面的扩展做了一些尝试，在某些情况下，知道什么可用也挺不错的。

    -

    警告： 尽管 这些尝试很有趣，但它们是非标准的，也就是不可靠的。. 如果你使用它们(也许你并不常用)，你要自己承担风险，使用非标准的属性对于Web并不是好事 。

    +

    警告： 尽管 这些尝试很有趣，但它们是非标准的，也就是不可靠的。. 如果你使用它们 (也许你并不常用)，你要自己承担风险，使用非标准的属性对于 Web 并不是好事 。

    -

    在我们的例子中，只使用了三个CSS属性，在考虑使用更多CSS属性时，可以想象是很混乱的。正如我们看到的，CSS始终不适合用来修改这些小部件的外观，但是仍然可以用来稍微做一些事情。如果愿意的话，可以演示一下在不同操作系统和浏览器之间的区别。

    +

    在我们的例子中，只使用了三个 CSS 属性，在考虑使用更多 CSS 属性时，可以想象是很混乱的。正如我们看到的，CSS 始终不适合用来修改这些小部件的外观，但是仍然可以用来稍微做一些事情。如果愿意的话，可以演示一下在不同操作系统和浏览器之间的区别。

    我们也可以帮助了解在下一章节中哪个属性更合适：Properties compatibility table for form widgets

    -

    走向更完美表单之路：有用的库和polyfills（腻子）

    +

    走向更完美表单之路：有用的库和 polyfills（腻子）

    -

    虽然对于复选框和单选按钮而言，CSS的表示方式足够丰富，但是对更高级的小部件来说差距仍然很大。即使可以用{{HTMLElement("select")}}元素作一些事情，但是对file小部件的样式完全没用。对于日期选择器也同样如此。

    +

    虽然对于复选框和单选按钮而言，CSS 的表示方式足够丰富，但是对更高级的小部件来说差距仍然很大。即使可以用{{HTMLElement("select")}}元素作一些事情，但是对 file 小部件的样式完全没用。对于日期选择器也同样如此。

    -

    要实现对表单小部件的完全控制，你别无选择，只能选择依靠JavaScript。在文章How to build custom form widgets中，我们将看到具体的做法，其中还有一些非常有用的库：

    +

    要实现对表单小部件的完全控制，你别无选择，只能选择依靠 JavaScript。在文章How to build custom form widgets中，我们将看到具体的做法，其中还有一些非常有用的库：

    -

    下面的库不止应用于表单，他们在处理HTML表单时是非常有趣的：

    +

    下面的库不止应用于表单，他们在处理 HTML 表单时是非常有趣的：

    -

    记住，使用CSS和JavaScript是有副作用的。所以在选择使用那些库时，应该在脚本失败的情况下能回滚样式表。脚本失败的原因很多，尤其在手机应用中，因此你需要尽可能好的设计你的Web站点或应用。

    +

    记住，使用 CSS 和 JavaScript 是有副作用的。所以在选择使用那些库时，应该在脚本失败的情况下能回滚样式表。脚本失败的原因很多，尤其在手机应用中，因此你需要尽可能好的设计你的 Web 站点或应用。

    相关链接

    -

    虽然HTML表单使用CSS仍有一些黑洞，但通常也有方法绕过它们。即使没有清楚的，通用的解决方案，但新式的浏览器也提供了新的可能性。目前最好的方法是更多的学习不同浏览器支持CSS的方式，并应用于HTML表单小部件。

    +

    虽然 HTML 表单使用 CSS 仍有一些黑洞，但通常也有方法绕过它们。即使没有清楚的，通用的解决方案，但新式的浏览器也提供了新的可能性。目前最好的方法是更多的学习不同浏览器支持 CSS 的方式，并应用于 HTML 表单小部件。

    -

    在本指南的下一章节中，我们将探讨不同的HTML表单小部件怎样很好的支持更重要的CSS属性：Properties compatibility table for form widgets.

    +

    在本指南的下一章节中，我们将探讨不同的 HTML 表单小部件怎样很好的支持更重要的 CSS 属性：Properties compatibility table for form widgets.

    相关链接

    diff --git a/files/zh-cn/learn/forms/basic_native_form_controls/index.md b/files/zh-cn/learn/forms/basic_native_form_controls/index.md index 5da831a27003aa..c9489afeb7880d 100644 --- a/files/zh-cn/learn/forms/basic_native_form_controls/index.md +++ b/files/zh-cn/learn/forms/basic_native_form_controls/index.md @@ -28,7 +28,7 @@ original_slug: Learn/HTML/Forms/The_native_form_widgets - 常见的输入（input）类型元素：{{HTMLelement('input/button', 'button')}}、{{HTMLelement('input/checkbox', 'checkbox')}}、{{HTMLelement('input/file', 'file')}}、{{HTMLelement('input/hidden', 'hidden')}}、{{HTMLelement('input/image', 'image')}}、{{HTMLelement('input/password', 'password')}}、{{HTMLelement('input/radio', 'radio')}}、{{HTMLelement('input/reset', 'reset')}}、{{HTMLelement('input/submit', 'submit')}} 和 {{HTMLelement('input/text', 'text')}}。 - 所有表单部件共有的一些属性。 -> **备注：** 本文中讨论的大多数特性都在浏览器中得到了广泛的支持，但并非所有表单部件都受浏览器支持。我们在接下来的两篇文章中提到了 HTML5 带来的新的表单部件。如果您想要更准确的细节，您应该参考我们的 [HTML 表单元素参考](/zh-CN/docs/Web/HTML/Element#forms)，特别是我们的种类繁多的 [\ 类型](/zh-CN/docs/Web/HTML/Element/Input)参考。 +> **备注：** 本文中讨论的大多数特性都在浏览器中得到了广泛的支持，但并非所有表单部件都受浏览器支持。我们在接下来的两篇文章中提到了 HTML5 带来的新的表单部件。如果您想要更准确的细节，您应该参考我们的 [HTML 表单元素参考](/zh-CN/docs/Web/HTML/Element#forms)，特别是我们的种类繁多的 [\ 类型](/zh-CN/docs/Web/HTML/Element/Input) 参考。 ## 文本输入框 @@ -49,7 +49,7 @@ original_slug: Learn/HTML/Forms/The_native_form_widgets 使用 {{htmlattrxref("type","input")}} 属性值被设置为 `text` 的 {{HTMLElement("input")}} 元素创建一个单行文本框（同样的，如果你不提供 {{htmlattrxref("type","input")}} 属性，该属性将被默认设置为 `text`）。在你指定的 {{htmlattrxref("type","input")}} 属性的值在浏览器中是未知的情况下（比如你指定 `type="date"`，但是浏览器不支持原生日期选择器），属性值也将会回落到 `text`。 -> **备注：** 你可以在 Github 上的 [single-line-text-fields.html](https://github.com/mdn/learning-area/blob/main/html/forms/native-form-widgets/single-line-text-fields.html) 找到所有单行文本框类型（你也可以直接看[预览版](https://mdn.github.io/learning-area/html/forms/native-form-widgets/single-line-text-fields.html)）。 +> **备注：** 你可以在 Github 上的 [single-line-text-fields.html](https://github.com/mdn/learning-area/blob/main/html/forms/native-form-widgets/single-line-text-fields.html) 找到所有单行文本框类型（你也可以直接看 [预览版](https://mdn.github.io/learning-area/html/forms/native-form-widgets/single-line-text-fields.html)）。 这是一个基本的单行文本框示例： @@ -97,7 +97,7 @@ HTML5 中添加了其它的文本输入类型，如：{{HTMLElement("input/searc 值得注意的是，这些小部件与其他表单小部件不一样。对于大多数表单部件，一旦表单提交，所有具有 [`name`](/zh-CN/docs/Web/HTML/Element/Input#name) 属性的小部件都会被发送，即使没有任何值被填。对于可选中项，只有在勾选时才发送它们的值。如果他们没有被勾选，就不会发送任何东西，甚至连他们的名字也没有。而在它们被勾选且没有提供值（value）时，将会发送名字和缺省值 `on`。 -> **备注：** 你可以在 Github 上看到 [checkable-items.html](https://github.com/mdn/learning-area/blob/main/html/forms/native-form-widgets/checkable-items.html)（你也可以直接看[预览版](https://mdn.github.io/learning-area/html/forms/native-form-widgets/checkable-items.html)）。 +> **备注：** 你可以在 Github 上看到 [checkable-items.html](https://github.com/mdn/learning-area/blob/main/html/forms/native-form-widgets/checkable-items.html)（你也可以直接看 [预览版](https://mdn.github.io/learning-area/html/forms/native-form-widgets/checkable-items.html)）。 为了获得最大的可用性和可访问性（无障碍），建议您在 {{htmlelement("fieldset")}} 中包围每个相关项目的列表，并使用 {{htmlelement("legend")}} 提供对列表的全面描述。每个单独的 {{htmlelement("label")}}/{{htmlelement("input")}} 元素都应该包含在它自己的列表项中（或者类似的）。正如在下方示例中显示的。 @@ -188,7 +188,7 @@ HTML5 中添加了其它的文本输入类型，如：{{HTMLElement("input/searc > **备注：** `image` input 类型同样被渲染为一个按钮。我们将在后面提到。 -> **备注：** 你可以在 Github 上看到 [button-examples.html](https://github.com/mdn/learning-area/blob/main/html/forms/native-form-widgets/button-examples.html)（你也可以直接看[预览版](https://mdn.github.io/learning-area/html/forms/native-form-widgets/button-examples.html)）。 +> **备注：** 你可以在 Github 上看到 [button-examples.html](https://github.com/mdn/learning-area/blob/main/html/forms/native-form-widgets/button-examples.html)（你也可以直接看 [预览版](https://mdn.github.io/learning-area/html/forms/native-form-widgets/button-examples.html)）。 下面，你可以看到每一种与 `
  • 服务器端校验则是发生在浏览器提交数据并被服务器端程序接收之后 —— 通常服务器端校验都是发生在将数据写入数据库之前，如果数据没通过校验，则会直接从服务器端返回错误消息，并且告诉浏览器端发生错误的具体位置和原因，服务器端校验不像客户端校验那样有好的用户体验，因为它直到整个表单都提交后才能返回错误信息。但是服务器端校验是你的应用对抗错误/恶意数据的最后防线，在这之后，数据将被持久化至数据库。当今所有的服务端框架都提供了数据校验与清洁功能（让数据更安全）。
    • @@ -79,7 +79,7 @@

    使用内置表单数据校验

    如果一个元素未校验通过：

    @@ -91,9 +91,9 @@

    使用内置表单数据校验

    input 元素的校验约束 — starting simple

    -

    在这一节，我们将会看到一些用于{{HTMLElement("input")}}元素校验的HTML5的特性。

    +

    在这一节，我们将会看到一些用于{{HTMLElement("input")}}元素校验的 HTML5 的特性。

    -

    让我们用一个简单的例子开始 — 一个可以让你从香蕉或樱桃中选择你最喜欢的水果的input。 这个包含了一个简单的文本{{HTMLElement("input")}} 和一个与之匹配的label，还有一个 submit {{htmlelement("button")}}。你可以在GitHub fruit-start.html找到源码，在线例子如下:

    +

    让我们用一个简单的例子开始 — 一个可以让你从香蕉或樱桃中选择你最喜欢的水果的 input。 这个包含了一个简单的文本{{HTMLElement("input")}} 和一个与之匹配的 label，还有一个 submit {{htmlelement("button")}}。你可以在 GitHub fruit-start.html找到源码，在线例子如下：

    -

    这里是运行的例子:

    +

    这里是运行的例子：

    {{EmbedLiveSample("限制输入的长度", "100%", 70)}}

    -

    注意: <input type="number"> (或者其他类型, 像 range) 也可以获取到一个{{htmlattrxref("step", "input")}} 属性, 指定了值在增减过程固定改变的值 (如向上增加和向下减少的按钮).

    +

    注意: <input type="number"> (或者其他类型，像 range) 也可以获取到一个{{htmlattrxref("step", "input")}} 属性，指定了值在增减过程固定改变的值 (如向上增加和向下减少的按钮).

    完整的例子

    -

    这里就是一个完整的展示 HTML 中使用校验属性的例子:

    +

    这里就是一个完整的展示 HTML 中使用校验属性的例子：

    <form>
   <p>
@@ -277,8 +277,8 @@ 
    完整的例子
    
   </p>
   <p>
     <label for="n1">How old are you?</label>
-    <!-- 这里的pattern属性可以用作不支持number类input浏览器的备用方法
-         请注意当与数字输入框一起使用时，支持pattern属性的浏览器会使它沉默失效。
+    <!-- 这里的 pattern 属性可以用作不支持 number 类 input 浏览器的备用方法
+         请注意当与数字输入框一起使用时，支持 pattern 属性的浏览器会使它沉默失效。
          它仅仅是在这里用作备用 -->
     <input type="number" min="12" max="120" step="1" id="n1" name="age"
            pattern="\d+">
@@ -330,7 +330,7 @@ 
    完整的例子
    
 input[type=number],
 textarea,
 fieldset {
-/* 需要在基于WebKit的浏览器上对表单元素进行恰当的样式设置 */
+/* 需要在基于 WebKit 的浏览器上对表单元素进行恰当的样式设置 */
   -webkit-appearance: none;
 
   width : 100%;
@@ -356,13 +356,13 @@ 
    完整的例子
    
 
 
    自定义错误信息
    
 
-
    正如我们上面所看到的例子, 每次我们提交无效的表单数据时, 浏览器总会显示错误信息. 但是显示的信息取决于你所使用的浏览器.
    
+
    正如我们上面所看到的例子，每次我们提交无效的表单数据时，浏览器总会显示错误信息。但是显示的信息取决于你所使用的浏览器。
    
 
-
    这些自动生成的错误有两个缺点:
    
+
    这些自动生成的错误有两个缺点：
    
 
 
 
 
@@ -389,9 +389,9 @@ 
    自定义错误信息
    
  
 
    
 
-
    要自定义这些消息的外观和文本, 你必须使用 JavaScript; 不能使用 HTML 和 CSS 来改变.
    
+
    要自定义这些消息的外观和文本，你必须使用 JavaScript; 不能使用 HTML 和 CSS 来改变。
    
 
-
    HTML5 提供 constraint validation API 来检测和自定义表单元素的状态. 除此之外,他可以改变错误信息的文本. 让我们快速的看一个例子:
    
+
    HTML5 提供 constraint validation API 来检测和自定义表单元素的状态。除此之外，他可以改变错误信息的文本。让我们快速的看一个例子：
    
 
 
    <form>
   <label for="mail">I would like you to provide me an e-mail</label>
@@ -399,7 +399,7 @@ 
    自定义错误信息
    
   <button>Submit</button>
 </form>
    
 
-
    在JavaScript 中, 你调用 setCustomValidity() 方法:
    
+
    在 JavaScript 中，你调用 setCustomValidity() 方法：
    
 
 
    var email = document.getElementById("mail");
 
@@ -413,13 +413,13 @@ 
    自定义错误信息
    
 
 
    {{EmbedLiveSample("自定义错误信息", "100%", 50)}}
    
 
-
     使用 JavaScript校验表单
    
+
     使用 JavaScript 校验表单
    
 
-
    如果你想控制原生错误信息的界面外观，或者你想处理不支持HTML内置表单校验的浏览器，则必须使用 Javascript。
    
+
    如果你想控制原生错误信息的界面外观，或者你想处理不支持 HTML 内置表单校验的浏览器，则必须使用 Javascript。
    
 
 
    约束校验的 API
    
 
-
    越来越多的浏览器支持限制校验API，并且这逐渐变得可靠。这些 API 由成组的方法和属性构成，可在特定的表单元素接口上调用：
    
+
    越来越多的浏览器支持限制校验 API，并且这逐渐变得可靠。这些 API 由成组的方法和属性构成，可在特定的表单元素接口上调用：
    
 
 
      
  
    • HTMLButtonElement
      • 
@@ -523,7 +523,7 @@ 
      约束校验 API 的方法
      
   
   
    {{domxref("HTMLFormElement.reportValidity()")}}
-   如果元素或它的子元素控件符合校验的限制，返回 true . 当返回为 false 时, 对每个无效元素可撤销 {{event("invalid")}} 事件会被唤起并且校验错误会报告给用户 。
+   如果元素或它的子元素控件符合校验的限制，返回 true . 当返回为 false 时，对每个无效元素可撤销 {{event("invalid")}} 事件会被唤起并且校验错误会报告给用户。
   
   
    
@@ -553,7 +553,7 @@ 
      使用约束校验 API 的例子
      
   <button>Submit</button>
 </form>
    
 
-
    这个简单的表单使用 {{htmlattrxref("novalidate","form")}} 属性关闭浏览器的自动校验；这允许我们使用脚本控制表单校验。但是，这并不禁止对约束校验 API的支持或是以下 CSS 伪类：{{cssxref(":valid")}}、{{cssxref(":invalid")}}、{{cssxref(":in-range")}} 、{{cssxref(":out-of-range")}} 的应用。这意味着，即使浏览器在发送数据之前没有自动检查表单的有效性，您仍然可以自己做，并相应地设置表单的样式。
    
+
    这个简单的表单使用 {{htmlattrxref("novalidate","form")}} 属性关闭浏览器的自动校验；这允许我们使用脚本控制表单校验。但是，这并不禁止对约束校验 API 的支持或是以下 CSS 伪类：{{cssxref(":valid")}}、{{cssxref(":invalid")}}、{{cssxref(":in-range")}} 、{{cssxref(":out-of-range")}} 的应用。这意味着，即使浏览器在发送数据之前没有自动检查表单的有效性，您仍然可以自己做，并相应地设置表单的样式。
    
 
 
    aria-live 属性确保我们的自定义错误信息将呈现给所有人，包括使用屏幕阅读器等辅助技术的人。
    
 
@@ -653,21 +653,21 @@ 
    JavaScript
    
 
 
    {{EmbedLiveSample("使用约束校验_API_的例子", "100%", 130)}}
    
 
-
    约束校验 API 为您提供了一个强大的工具来处理表单校验，让您可以对用户界面进行远超过仅仅使用 HTML 和 CSS所能得到的控制。
    
+
    约束校验 API 为您提供了一个强大的工具来处理表单校验，让您可以对用户界面进行远超过仅仅使用 HTML 和 CSS 所能得到的控制。
    
 
 
    不使用内建 API 时的表单校验
    
 
-
    有时，例如使用旧版浏览器或自定义小部件，您将无法（或不希望）使用约束校验API。 在这种情况下，您仍然可以使用 JavaScript 来校验您的表单。 校验表单比起真实数据校验更像是一个用户界面问题。
    
+
    有时，例如使用旧版浏览器或自定义小部件，您将无法（或不希望）使用约束校验 API。在这种情况下，您仍然可以使用 JavaScript 来校验您的表单。校验表单比起真实数据校验更像是一个用户界面问题。
    
 
 
    要校验表单，您必须问自己几个问题：
    
 
 
    
  
    我应该进行什么样的校验？
    
- 
    你需要确定如何校验你的数据：字符串操作，类型转换，正则表达式等。这取决于你。 只要记住，表单数据一般都是文本，并总是以字符串形式提供给脚本。
    
- 
    如果表单校验失败，我该怎么办?
    
- 
    这显然是一个 UI 问题。 您必须决定表单的行为方式：表单是否发送数据？ 是否突出显示错误的字段？是否显示错误消息？
    
- 
    如何帮助用户纠正无效数据?
    
- 
    为了减少用户的挫折感，提供尽可能多的有用的信息是非常重要的，以便引导他们纠正他们的输入。 您应该提供前期建议，以便他们知道预期的输入是什么以及明确的错误消息。 如果您想深入了解表单校验用户界面要求，那么您应该阅读一些有用的文章：
+ 
    你需要确定如何校验你的数据：字符串操作，类型转换，正则表达式等。这取决于你。只要记住，表单数据一般都是文本，并总是以字符串形式提供给脚本。
    
+ 
    如果表单校验失败，我该怎么办？
    
+ 
    这显然是一个 UI 问题。您必须决定表单的行为方式：表单是否发送数据？是否突出显示错误的字段？是否显示错误消息？
    
+ 
    如何帮助用户纠正无效数据？
    
+ 
    为了减少用户的挫折感，提供尽可能多的有用的信息是非常重要的，以便引导他们纠正他们的输入。您应该提供前期建议，以便他们知道预期的输入是什么以及明确的错误消息。如果您想深入了解表单校验用户界面要求，那么您应该阅读一些有用的文章：
  
    
 
    
 
-
    不使用约束校验API 的例子
    
+
    不使用约束校验 API 的例子
    
 
 
    为了说明这一点，让我们重构一下前面的例子，以便它可以在旧版浏览器中使用：
    
 
@@ -694,11 +694,11 @@ 
    不使用约束校验API 的例子
 
-
    正如你所看到的，HTML 几乎是一样的；我们只是关闭了 HTML 校验功能。 请注意，ARIA 是与 HTML5 无关的独立规范。
    
+
    正如你所看到的，HTML 几乎是一样的；我们只是关闭了 HTML 校验功能。请注意，ARIA 是与 HTML5 无关的独立规范。
    
 
 
    CSS
    
 
-
    同样的，CSS也不需要太多的改动， 我们只需将 {{cssxref(":invalid")}} 伪类变成真实的类，并避免使用不适用于 Internet Explorer 6 的属性选择器。
    
+
    同样的，CSS 也不需要太多的改动，我们只需将 {{cssxref(":invalid")}} 伪类变成真实的类，并避免使用不适用于 Internet Explorer 6 的属性选择器。
    
 
 
    /* 仅为了使示例更好看 */
 body {
@@ -792,7 +792,7 @@ 
    JavaScript
    
 };
 
 // 现在我们可以重构字段的约束校验了
-// 由于不使用 CSS 伪类, 我们必须明确地设置 valid 或 invalid 类到 email 字段上
+// 由于不使用 CSS 伪类，我们必须明确地设置 valid 或 invalid 类到 email 字段上
 addEvent(window, "load", function () {
   // 在这里验证字段是否为空（请记住，该字段不是必需的）
   // 如果非空，检查它的内容格式是不是合格的 e-mail 地址
@@ -831,11 +831,11 @@ 
    JavaScript
    
   }
 });
    
 
-
    该结果如下:
    
+
    该结果如下：
    
 
 
    {{EmbedLiveSample("不使用内建_API_时的表单校验", "100%", 130)}}
    
 
-
    正如你所看到的，建立自己的校验系统并不难。 困难的部分是使其足够通用，以跨平台和任何形式使用它可以创建。 有许多库可用于执行表单校验; 你应该毫不犹豫地使用它们。 这里有一些例子：
    
+
    正如你所看到的，建立自己的校验系统并不难。困难的部分是使其足够通用，以跨平台和任何形式使用它可以创建。有许多库可用于执行表单校验; 你应该毫不犹豫地使用它们。这里有一些例子：
    
 
 
  
- 
  • jQuery 插件:
+ 
  • jQuery 插件：
   
      
    
    • Validation
      • 
    
    • Valid8 
      • 
@@ -853,7 +853,7 @@ 
      JavaScript
      
 
 
      远程校验
      
 
-
      在某些情况下，执行一些远程校验可能很有用。 当用户输入的数据与存储在应用程序服务器端的附加数据绑定时，这种校验是必要的。 一个应用实例就是注册表单，在这里你需要一个用户名。 为了避免重复，执行一个 AJAX 请求来检查用户名的可用性，要比让先用户发送数据，然后因为表单重复了返回错误信息要好得多。
      
+
      在某些情况下，执行一些远程校验可能很有用。当用户输入的数据与存储在应用程序服务器端的附加数据绑定时，这种校验是必要的。一个应用实例就是注册表单，在这里你需要一个用户名。为了避免重复，执行一个 AJAX 请求来检查用户名的可用性，要比让先用户发送数据，然后因为表单重复了返回错误信息要好得多。
      
 
 
      执行这样的校验需要采取一些预防措施：
      
 
@@ -864,7 +864,7 @@ 
      远程校验
      
 
 
      结论
      
 
-
      表单校验并不需要复杂的 JavaScript，但它需要对用户的仔细考虑。 一定要记住帮助您的用户更正他提供的数据。 为此，请务必：
      
+
      表单校验并不需要复杂的 JavaScript，但它需要对用户的仔细考虑。一定要记住帮助您的用户更正他提供的数据。为此，请务必：
      
 
 
        
  
      • 显示明确的错误消息。
        • 
diff --git a/files/zh-cn/learn/forms/how_to_build_custom_form_controls/example_2/index.html b/files/zh-cn/learn/forms/how_to_build_custom_form_controls/example_2/index.html
index e102e1a313cb06..9a95aefbb14ba0 100644
--- a/files/zh-cn/learn/forms/how_to_build_custom_form_controls/example_2/index.html
+++ b/files/zh-cn/learn/forms/how_to_build_custom_form_controls/example_2/index.html
@@ -9,7 +9,7 @@
 ---
 
        这是解释 如何构建自定义表单小部件的第二个示例。
        
 
-
        使用JS
        
+
        使用 JS
        
 
 
        HTML 内容
        
 
@@ -169,11 +169,11 @@ 
        JavaScript 内容
        
   form.classList.add("widget");
 });
    • -

    使用JS的结果

    +

    使用 JS 的结果

    {{ EmbedLiveSample('JS', 120, 130) }}

    -

    不使用JS

    +

    不使用 JS

    HTML 内容

    @@ -208,6 +208,6 @@

    CSS 内容

    overflow : hidden; } -

    不使用JS的结果

    +

    不使用 JS 的结果

    {{ EmbedLiveSample('No_JS', 120, 130) }}

    diff --git a/files/zh-cn/learn/forms/how_to_build_custom_form_controls/index.html b/files/zh-cn/learn/forms/how_to_build_custom_form_controls/index.html index 991879d96304dc..ce48fa3592710d 100644 --- a/files/zh-cn/learn/forms/how_to_build_custom_form_controls/index.html +++ b/files/zh-cn/learn/forms/how_to_build_custom_form_controls/index.html @@ -16,20 +16,20 @@

    在本文中，我们会看到如何构建这样的组件。为此，我们将使用这样一个例子：重建 {{HTMLElement("select")}}元素。

    -

    注意: 我们将专注于构建小部件，而不是怎样让代码更通用或可复用；那会涉及一些非基础的JavaScript代码和未知环境下的DOM操作，这超过了这篇文章的范围。

    +

    注意： 我们将专注于构建小部件，而不是怎样让代码更通用或可复用；那会涉及一些非基础的 JavaScript 代码和未知环境下的 DOM 操作，这超过了这篇文章的范围。

    -

    设计, 结构, 和语义

    +

    设计，结构，和语义

    -

    在构建一个自定义控件之前，首先你要确切的知道你要什么。 这将为您节省宝贵的时间。 特别地，清楚地定义控件的所有状态非常重要。 为了做到这一点，从状态和行为表现都众所周知的现有小控件开始是很好的选择，这样你可以轻松的尽量模仿这些控件。

    +

    在构建一个自定义控件之前，首先你要确切的知道你要什么。这将为您节省宝贵的时间。特别地，清楚地定义控件的所有状态非常重要。为了做到这一点，从状态和行为表现都众所周知的现有小控件开始是很好的选择，这样你可以轻松的尽量模仿这些控件。

    -

    在我们的示例中，我们将重建HTML<select>元素，这是我们希望实现的结果：

    +

    在我们的示例中，我们将重建 HTML<select>元素，这是我们希望实现的结果：

    The three states of a select box

    上面图片显示了我们控件的三个主要状态：正常状态（左）; 活动状态（中）和打开状态（右）。

    -

    在行为方面，我们希望我们的控件像任何原生控件一样对鼠标和键盘都可用。 让我们从定义控件如何到达每个状态开始：

    +

    在行为方面，我们希望我们的控件像任何原生控件一样对鼠标和键盘都可用。让我们从定义控件如何到达每个状态开始：

    以下情况控件将会呈现正常状态：
    @@ -41,14 +41,14 @@

    设计, 结构, 和语义

    -

    注意: 在页面上移动焦点通常是通过按Tab键来完成的，但这并不是哪都通用的标准。 例如，在Safari中页面上的链接间的循环切换默认下是通过使用组合键Option + Tab完成的。

    +

    注意： 在页面上移动焦点通常是通过按 Tab 键来完成的，但这并不是哪都通用的标准。例如，在 Safari 中页面上的链接间的循环切换默认下是通过使用组合键 Option + Tab完成的。

    以下情况控件将会呈现活动状态：
    • 用户点击
      • -
    • 用户按下tab让控件获得了焦点。
      • +
    • 用户按下 tab 让控件获得了焦点。
    • 控件呈现打开状态然后用户点击控件。
    @@ -60,10 +60,10 @@

    设计, 结构, 和语义

    -

    我们知道如何改变状态后,定义如何改变小工具的值还很重要:

    +

    我们知道如何改变状态后，定义如何改变小工具的值还很重要：

    -
    以下情况控件的值将会被改变:
    +
    以下情况控件的值将会被改变：
    • 控件在打开状态下用户点击一个选项
      • @@ -72,18 +72,18 @@

      设计, 结构, 和语义

    -

    最后，让我们定义控件的选项将要怎么表现:

    +

    最后，让我们定义控件的选项将要怎么表现：

    -

    对于我们的例子的目的，我们将就此结束；但是，如果你是一个认真的读者，你会注意到我们省略了一些东西，例如，你认为用户在小部件处于打开状态时点击tab键会发生什么？答案是：什么也不会发生。好吧，似乎很明显这就是正确的行为，但事实是，因为在我们的规范中没有定义这种情况，我们很容易忽略这种行为。在团队环境中尤其是这样，因为设计小部件行为的人与实现的人通常是不同的。

    +

    对于我们的例子的目的，我们将就此结束；但是，如果你是一个认真的读者，你会注意到我们省略了一些东西，例如，你认为用户在小部件处于打开状态时点击 tab 键会发生什么？答案是：什么也不会发生。好吧，似乎很明显这就是正确的行为，但事实是，因为在我们的规范中没有定义这种情况，我们很容易忽略这种行为。在团队环境中尤其是这样，因为设计小部件行为的人与实现的人通常是不同的。

    另外一个有趣的例子是：当小部件处于打开状态时，用户按下键盘上方向键和下方向键将会发生什么？这个问题有些棘手，如果你认为活动状态和打开状态是完全不同的，那么答案就是“什么都不会发生”，因为我们没有定义任何在打开状态下键盘的交互行为。从另一个方面看，如果你认为活动状态和打开状态是有重叠的部分，那么控件的值可能会改变，但是被选中的选项肯定不会相应的进行突出显示，同样是因为我们没有定义在控件打开状态下的任何键盘交互事件（我们仅仅定义了控件打开会发生什么，而没有定义在其打开后会发生什么）

    -

    在我们的例子中，缺失的规范是显而易见的，所以我们将着手处理他们，但是对于一些没有人想到去定义正确行为的小部件而言，这的确是一个问题。所以在设计阶段花费时间是值得的，因为如果你定义的行为不够好，或者忘记定义了一个行为，那么在用户开始实际使用时，将会很难去重新定义它们。如果你在定义时有疑问，请征询他人的意见，如果你有预算，请不要犹豫的去进行用户可行性测试，这个过程被称为UX design (User Experience Design用户体验设计）,如果你想要深入的学习相关的内容，请查阅下面这些有用资源：

    +

    在我们的例子中，缺失的规范是显而易见的，所以我们将着手处理他们，但是对于一些没有人想到去定义正确行为的小部件而言，这的确是一个问题。所以在设计阶段花费时间是值得的，因为如果你定义的行为不够好，或者忘记定义了一个行为，那么在用户开始实际使用时，将会很难去重新定义它们。如果你在定义时有疑问，请征询他人的意见，如果你有预算，请不要犹豫的去进行用户可行性测试，这个过程被称为 UX design (User Experience Design用户体验设计）,如果你想要深入的学习相关的内容，请查阅下面这些有用资源：

    -

    注意: 另外， 在绝大多数系统中，还有一种方法能够打开{{HTMLElement("select")}}元素来观察其所有的选项（这和用鼠标点击{{HTMLElement("select")}}元素是一样的）。通过Windows下的Alt + 向下箭头实现，在我们的例子中没有实现---但是这样做会很方便，因为鼠标点击事件就是由该原理实现的。

    +

    注意：另外， 在绝大多数系统中，还有一种方法能够打开{{HTMLElement("select")}}元素来观察其所有的选项（这和用鼠标点击{{HTMLElement("select")}}元素是一样的）。通过 Windows 下的 Alt + 向下箭头实现，在我们的例子中没有实现---但是这样做会很方便，因为鼠标点击事件就是由该原理实现的。

    定义语义化的 HTML 结构

    -

    现在控件的基本功能已经决定了，可以开始构建自定义控件了。第一步是要确定 HTML 结构并给予一些基本的语义规则。第一步就是去确定它的HTML结构并给予一些基本的语义。重构{{HTMLElement("select")}}元素需要怎么做如下：

    +

    现在控件的基本功能已经决定了，可以开始构建自定义控件了。第一步是要确定 HTML 结构并给予一些基本的语义规则。第一步就是去确定它的 HTML 结构并给予一些基本的语义。重构{{HTMLElement("select")}}元素需要怎么做如下：

    -
    <!-- 这是我们小部件的主要容器.
-     tabindex属性是用来让用户聚焦在小部件上的.
-     稍后我们会发现最好通过JavaScript来设定它的值. -->
+
    <!-- 这是我们小部件的主要容器。
+     tabindex 属性是用来让用户聚焦在小部件上的。
+     稍后我们会发现最好通过 JavaScript 来设定它的值。-->
 <div class="select" tabindex="0">
 
   <!-- 这个容器用来显示组件现在的值 -->
   <span class="value">Cherry</span>
 
-  <!-- 这个容器包含我们的组件的所有可用选项.
-       因为他是一个列表，用ul元素是有意义的. -->
+  <!-- 这个容器包含我们的组件的所有可用选项。
+       因为他是一个列表，用 ul 元素是有意义的。-->
   <ul class="optList">
     <!-- 每个选项只包含用来显示的值，
          稍后我们会知道如何处理和表单一起发送的真实值 -->
@@ -121,11 +121,11 @@ 
    定义语义化的 HTML 结构
    
 
 </div>
    
 
-
    注意类名的使用：不管实际使用了哪种底层HTML元素，它们都标识每个相关的部分。这很重要，因为这样做能确保我们的CSS和JavaScript不会和HTML结构强绑定，这样我们就可以在不破坏使用小部件的代码的情况下进行实现更改。比如，如果你希望增加一个等价的{{HTMLElement("optgroup")}}元素。
    
+
    注意类名的使用：不管实际使用了哪种底层 HTML 元素，它们都标识每个相关的部分。这很重要，因为这样做能确保我们的 CSS 和 JavaScript 不会和 HTML 结构强绑定，这样我们就可以在不破坏使用小部件的代码的情况下进行实现更改。比如，如果你希望增加一个等价的{{HTMLElement("optgroup")}}元素。
    
 
 
    使用 CSS 创建外观
    
 
-
    现在我们有了控件结构，我们可以开始设计我们的控件了。构建自定义控件的重点是能够完全按照我们的期望设置它的样式。为了达到这个目的，我们将 CSS部分的工作分为两部分：第一部分是让我们的控件表现得像一个{{HTMLElement("select")}}元素所必需的的CSS规则，第二部分包含了让组件看起来像我们所希望那样的精妙样式。
    
+
    现在我们有了控件结构，我们可以开始设计我们的控件了。构建自定义控件的重点是能够完全按照我们的期望设置它的样式。为了达到这个目的，我们将 CSS 部分的工作分为两部分：第一部分是让我们的控件表现得像一个{{HTMLElement("select")}}元素所必需的的 CSS 规则，第二部分包含了让组件看起来像我们所希望那样的精妙样式。
    
 
 
    所需的样式
    
 
@@ -139,14 +139,14 @@ 
    所需的样式
    
   display : inline-block;
 }
    -

    我们需要一个额外的类 active 来定义我们的组件处于其激活状态时的的界面外观。因为我们的组件是可以聚焦的, 我们通过{{cssxref(":focus")}} 伪类重复自定义样式来确保它们表现得一样。

    +

    我们需要一个额外的类 active 来定义我们的组件处于其激活状态时的的界面外观。因为我们的组件是可以聚焦的，我们通过{{cssxref(":focus")}} 伪类重复自定义样式来确保它们表现得一样。

    .select .active,
 .select:focus {
   outline: none;
 
   /* 这里的 box-shadow 属性并非必须，但确保活动状态能看出来非常重要---我们
- 将其作为一个默认值，你可以随意地覆盖掉它. */
+ 将其作为一个默认值，你可以随意地覆盖掉它。*/
   box-shadow: 0 0 3px 1px #227755;
 }
    @@ -165,7 +165,7 @@

    所需的样式

    我们需要一个额外的类来处理选项列表隐藏时的情况。为了管理没有完全匹配的活动状态和打开状态之间的差异，这是有必要的。

    .select .optList.hidden {
-  /* 这是一个以可访问形式隐藏列表的简单方法,
+  /* 这是一个以可访问形式隐藏列表的简单方法，
      对可访问性我们将在最后进一步拓展 */
   max-height: 0;
   visibility: hidden;
@@ -176,11 +176,11 @@ 
    美化
    
 
    所以现在我们的基本功能已经就位，有趣的事情就可以开始了。下面是一个可行的简单的例子，和本文开头的截图是相对应的。不管怎样，你可以随意的体验一下看看能收获什么。
    
 
 
    .select {
-  /* 出于可访问性方面的原因，所有尺寸都会由em值表示
+  /* 出于可访问性方面的原因，所有尺寸都会由 em 值表示
      (用来确保用户在文本模式下使用浏览器缩放时组件的可缩放性).
-     在大多数浏览器下的默认换算是1em == 16px.
-     如果你对em和px的转换感到疑惑, 请参考http://riddle.pl/emcalc/ */
-  font-size   : 0.625em; /* 这个（=10px）是以em方式表达的这个环境里的字体大小 */
+     在大多数浏览器下的默认换算是 1em == 16px.
+     如果你对 em 和 px 的转换感到疑惑，请参考 http://riddle.pl/emcalc/ */
+  font-size   : 0.625em; /* 这个（=10px）是以 em 方式表达的这个环境里的字体大小 */
   font-family : Verdana, Arial, sans-serif;
 
   -moz-box-sizing : border-box;
@@ -195,8 +195,8 @@ 
    美化
    
   box-shadow    : 0 .1em .2em rgba(0,0,0,.45); /* 0 1px 2px */
 
   /* 第一段声明是为了不支持线性梯度填充的浏览器准备的。
-     第二段声明是因为基于WebKit的浏览器没有预先定义它。
-     如果你想为过时的浏览器提供支持, 请参阅 http://www.colorzilla.com/gradient-editor/ */
+     第二段声明是因为基于 WebKit 的浏览器没有预先定义它。
+     如果你想为过时的浏览器提供支持，请参阅 http://www.colorzilla.com/gradient-editor/ */
   background : #F0F0F0;
   background : -webkit-linear-gradient(90deg, #E3E3E3, #fcfcfc 50%, #f0f0f0);
   background : linear-gradient(0deg, #E3E3E3, #fcfcfc 50%, #f0f0f0);
@@ -210,15 +210,15 @@ 
    美化
    
 
   vertical-align: top;
 
-  /* 如果内容溢出了, 最好有一个恰当的缩写. */
+  /* 如果内容溢出了，最好有一个恰当的缩写。*/
   white-space  : nowrap;
   text-overflow: ellipsis;
 }
    
 
-
    我们不需要一个额外的元素来设计向下的箭头，而使用{{cssxref(":after")}} 伪类来替代。然而，这也可以通过使用一张加在select class上的简单的背景图像来实现。
    
+
    我们不需要一个额外的元素来设计向下的箭头，而使用{{cssxref(":after")}} 伪类来替代。然而，这也可以通过使用一张加在select class 上的简单的背景图像来实现。
    
 
 
    .select:after {
-  content : "▼"; /* 我们使用了unicode 编码的字符 U+25BC; 参阅 http://www.utf8-chartable.de */
+  content : "▼"; /* 我们使用了 unicode 编码的字符 U+25BC; 参阅 http://www.utf8-chartable.de */
   position: absolute;
   z-index : 1; /* 这对于防止箭头覆盖选项列表很重要 */
   top     : 0;
@@ -244,7 +244,7 @@ 
    美化
    
 
    .select .optList {
   z-index : 2; /* 我们明确的表示选项列表会始终与向下箭头重叠 */
 
-  /* 这会重置ul元素的默认样式 */
+  /* 这会重置 ul 元素的默认样式 */
   list-style: none;
   margin : 0;
   padding: 0;
@@ -255,8 +255,8 @@ 
    美化
    
   /* 这会确保即使数值比组件小，选项列表仍能变得跟组件自身一样大*/
   min-width : 100%;
 
-  /* 万一列表太长了, 它的内容会从垂直方向溢出(会自动添加一个竖向滚动条)
-     但是水平方向不会(因为我们没有设定宽度, 列表会自适应宽度. 如果不能的话，内容会被截断) */
+  /* 万一列表太长了，它的内容会从垂直方向溢出 (会自动添加一个竖向滚动条)
+     但是水平方向不会 (因为我们没有设定宽度，列表会自适应宽度。如果不能的话，内容会被截断) */
   max-height: 10em; /* 100px */
   overflow-y: auto;
   overflow-x: hidden;
@@ -280,7 +280,7 @@ 
    美化
    
   color: #FFFFFF;
 }
    
 
-
    这是三种状态的结果:
    
+
    这是三种状态的结果：
    
 
 
@@ -302,9 +302,9 @@ 
    美化
    
  
  
 
    
 
-
    通过JavaScript让您的小部件动起来
    
+
    通过 JavaScript 让您的小部件动起来
    
 
-
    现在我们的设计和结构已经完成了。我们可以写些JavaScript代码来让这个部件真正生效。
    
+
    现在我们的设计和结构已经完成了。我们可以写些 JavaScript 代码来让这个部件真正生效。
    
 
 
    
 
    警告：下面的代码仅仅是教学性质的，并且不应该照搬使用。在许多方面，正如我们所看到的，这种方案不具有前瞻性，而且可能在旧浏览器上会不工作。这里面还有冗余的部分，在生产环境下，代码需要优化。
    
@@ -329,7 +329,7 @@ 
    它为什么不生效？
    
 
 
    因为这些风险，认真考虑 JavaScript 不生效时会发生什么是很重要的。处理这个问题的细节超出了这篇文章的范围，因为这与你有多么想使你的脚本具有通用性和可复用性更加相关，不过我们将在我们的例子中考虑与其相关的基本内容。
    
 
-
    在我们的例子中，如果JavaScript代码没有运行，我们会回退到显示一个标准的 {{HTMLElement("select")}} 元素。为了实现这一点，我们需要两样东西。
    
+
    在我们的例子中，如果 JavaScript 代码没有运行，我们会回退到显示一个标准的 {{HTMLElement("select")}} 元素。为了实现这一点，我们需要两样东西。
    
 
 
    首先，在每次使用我们的自定义部件前，我们需要添加一个标准的 {{HTMLElement("select")}} 元素。实际上，为了能将来自我们自定义的表单组件和以及其他部分的表单数据发送出去，这个元素也是需要的。我们随后会详细的解释这一点。
    
 
@@ -357,21 +357,21 @@ 
    它为什么不生效？
    
 
 </body>
    
 
-
    第二，我们需要两个新的 classes 来隐藏不需要的元素(即，当我们的脚本没有运行时的自定义组件, 或是脚本正常运行时的"真正的" {{HTMLElement("select")}} 元素)。注意默认情况下，我们的 HTML 代码会隐藏我们的自定义组件。
    
+
    第二，我们需要两个新的 classes 来隐藏不需要的元素 (即，当我们的脚本没有运行时的自定义组件，或是脚本正常运行时的"真正的" {{HTMLElement("select")}} 元素)。注意默认情况下，我们的 HTML 代码会隐藏我们的自定义组件。
    
 
 
    .widget select,
 .no-widget .select {
-  /* 这个CSS选择器大体上说的是：
-     - 要么我们将body的class设置为"widget"，隐藏真实的{{HTMLElement("select")}}元素
-     - 或是我们没有改变body的class,这样body的class还是"no-widget",
-       因此class为"select"的元素需要被隐藏 */
+  /* 这个 CSS 选择器大体上说的是：
+     - 要么我们将 body 的 class 设置为"widget"，隐藏真实的{{HTMLElement("select")}}元素
+     - 或是我们没有改变 body 的 class，这样 body 的 class 还是"no-widget",
+       因此 class 为"select"的元素需要被隐藏 */
   position : absolute;
   left     : -5000em;
   height   : 0;
   overflow : hidden;
 }
    
 
-
    接下来我们需要一个 JavaScript 开关来决定脚本是否运行。这个开关非常简单：如果页面加载时，我们的脚本运行了，它将会移除 no-widget class ，并添加  widget class，由此切换 {{HTMLElement("select")}} 元素和自定义组件的可视性。
    
+
    接下来我们需要一个 JavaScript 开关来决定脚本是否运行。这个开关非常简单：如果页面加载时，我们的脚本运行了，它将会移除 no-widget class，并添加  widget class，由此切换 {{HTMLElement("select")}} 元素和自定义组件的可视性。
    
 
 
    window.addEventListener("load", function () {
   document.body.classList.remove("no-widget");
@@ -397,21 +397,21 @@ 
    它为什么不生效？
    
 
 
 
    
-
    注意: 如果你真的想让你的代码变得通用和可重用，最好不要做一个 class 选择器开关，而是通过添加一个组件 class 的方式来隐藏{{HTMLElement("select")}} 元素，并且动态地在每一个{{HTMLElement("select")}} 元素后面添加代表页面中自定义组件的 DOM 树。
    
+
    注意： 如果你真的想让你的代码变得通用和可重用，最好不要做一个 class 选择器开关，而是通过添加一个组件 class 的方式来隐藏{{HTMLElement("select")}} 元素，并且动态地在每一个{{HTMLElement("select")}} 元素后面添加代表页面中自定义组件的 DOM 树。
    
 
    
 
 
    让工作变得更简单
    
 
 
    在我们将要构建的代码之中，我们将会使用标准的 DOM API 来完成我们所要做的所有工作。尽管 DOM API 在浏览器中得到了更好支持，但是在旧的浏览器上还是会出现问题。( 特别是非常老的 Internet Explorer）。
    
 
-
    如果你想要避免旧浏览器带来的麻烦，这儿有两种解决方案：使用专门的框架，比如 jQuery, $dom, prototype, Dojo, YUI, 或者类似的框架，或者通过填充你想使用的缺失的特性 （这可以通过条件加载轻松完成——例如使用 yepnope 这样的库。
    
+
    如果你想要避免旧浏览器带来的麻烦，这儿有两种解决方案：使用专门的框架，比如 jQuery, $dom, prototype, Dojo, YUI, 或者类似的框架，或者通过填充你想使用的缺失的特性（这可以通过条件加载轻松完成——例如使用 yepnope 这样的库。
    
 
 
    我们打算使用的特性如下所示（按照风险程度从高到低排列）：
    
 
 
      
  
    1. {{domxref("element.classList","classList")}}
      2. 
  
    2. {{domxref("EventTarget.addEventListener","addEventListener")}}
      3. 
- 
    3. forEach (这不是 DOM而是现代 JavaScript )
      4. 
+ 
    4. forEach (这不是 DOM 而是现代 JavaScript )
      5. 
  
    5. {{domxref("element.querySelector","querySelector")}} 和 {{domxref("element.querySelectorAll","querySelectorAll")}}
      6. 
 
    
 
@@ -446,16 +446,16 @@ 
    构造事件回调
    
 }
 
 // 每当用户想要激活（或停用）这个组件的时候，会调用这个函数
-// 它需要2个参数：
-// select : 要激活的带有'select'类的DOM节点
-// selectList : 包含所有带'select'类的DOM节点的列表
+// 它需要 2 个参数：
+// select : 要激活的带有'select'类的 DOM 节点
+// selectList : 包含所有带'select'类的 DOM 节点的列表
 function activeSelect(select, selectList) {
 
   // 如果组件已经激活了，不进行任何操作
   if (select.classList.contains('active')) return;
 
   // 我们需要关闭所有自定义组件的活动状态
-  // 因为deactiveselect函数满足forEach回调函数的所有请求，
+  // 因为 deactiveselect 函数满足 forEach 回调函数的所有请求，
   // 我们直接使用它，不使用中间匿名函数
   selectList.forEach(deactivateSelect);
 
@@ -464,8 +464,8 @@ 
    构造事件回调
    
 }
 
 // 每当用户想要打开/关闭选项列表的时候，会调用这个函数
-// 它需要一个参数:
-// select : 要触发的列表的DOM节点
+// 它需要一个参数：
+// select : 要触发的列表的 DOM 节点
 function toggleOptList(select) {
 
   // 该列表不包含在组件中
@@ -476,12 +476,12 @@ 
    构造事件回调
    
 }
 
 // 每当我们要高亮一个选项的时候，会调用该函数
-// 它需要两个参数:
-// select : 带有'select'类的DOM节点，包含了需要高亮强调的选项
-// option : 需要高亮强调的带有'option'类的DOM节点
+// 它需要两个参数：
+// select : 带有'select'类的 DOM 节点，包含了需要高亮强调的选项
+// option : 需要高亮强调的带有'option'类的 DOM 节点
 function highlightOption(select, option) {
 
-  // 为我们的自定义select元素获取所有有效选项的列表
+  // 为我们的自定义 select 元素获取所有有效选项的列表
   var optionList = select.querySelectorAll('.option');
 
   // 我们移除所有选项的高亮强调
@@ -510,12 +510,12 @@ 
    构造事件回调
    
     // 每当用户的鼠标悬停在一个选项上时，我们高亮这个指定的选项
     optionList.forEach(function (option) {
       option.addEventListener('mouseover', function () {
-        // 注意:'select'和'option'变量是我们函数调用范围内有效的闭包 。
+        // 注意:'select'和'option'变量是我们函数调用范围内有效的闭包。
         highlightOption(select, option);
       });
     });
 
-    // 每当用户点击一个自定义的select元素时
+    // 每当用户点击一个自定义的 select 元素时
     select.addEventListener('click', function (event) {
       // 注意:'select'变量是我们函数调用范围内有效的闭包。
 
@@ -524,9 +524,9 @@ 
    构造事件回调
    
     });
 
     // 如果组件获得了焦点
-    // 每当用户点击它或是用tab键访问这个组件时，组件获得焦点
+    // 每当用户点击它或是用 tab 键访问这个组件时，组件获得焦点
     select.addEventListener('focus', function (event) {
-      // 注意:'select'和'selectlist'变量是我们函数调用范围内有效的闭包 。
+      // 注意:'select'和'selectlist'变量是我们函数调用范围内有效的闭包。
 
       // 我们激活这个组件
       activeSelect(select, selectList);
@@ -569,12 +569,12 @@ 
    处理组件的值
    
 
    像前面所看到的那样，出于可访问性的原因，我们已经使用了一个原生的选择组件作为后备显示内容；我们可轻松的将它的值与我们的自定义组件之间的值同步。
    
 
 
    // 这个函数更新显示的值并将其通过原生组件同步
-// 它需要2个参数:
-// select : 含有要更新的值的'select'类的DOM节点
+// 它需要 2 个参数：
+// select : 含有要更新的值的'select'类的 DOM 节点
 // index  : 要被选择的值的索引
 function updateValue(select, index) {
   // 我们需要为了给定的自定义组件获取原生组件
-  // 在我们的例子中, 原生组件是自定义组件的‘同胞’
+  // 在我们的例子中，原生组件是自定义组件的‘同胞’
   var nativeWidget = select.previousElementSibling;
 
   // 我们也需要得到自定义组件的值占位符，
@@ -594,11 +594,11 @@ 
    处理组件的值
    
 };
 
 // 这个函数返回原生组件里当前选定的索引
-// 它需要1个参数:
-// select : 跟原生组件有关的'select'类DOM节点
+// 它需要 1 个参数：
+// select : 跟原生组件有关的'select'类 DOM 节点
 function getIndex(select) {
   // 我们需要为了给定的自定义组件访问原生组件
-  // 在我们的例子中, 原生组件是自定义组件的一个“同胞”
+  // 在我们的例子中，原生组件是自定义组件的一个“同胞”
   var nativeWidget = select.previousElementSibling;
 
   return nativeWidget.selectedIndex;
@@ -671,24 +671,24 @@ 
    处理组件的值
    
 
 
    使其具有可访问性
    
 
-
    我们构建了一个能够生效的东西，尽管这离一个特性齐全的选择框还差得远，但是它效果不错。但是我们已经完成的事情只不过是摆弄DOM。这个组件并没有真正的语义，即使它看起来像一个选择框，但是从浏览器的角度来看并不是，所以辅助技术并不能明白这是一个选择框。简单来说，这个全新的选择框并不具备可访问性！
    
+
    我们构建了一个能够生效的东西，尽管这离一个特性齐全的选择框还差得远，但是它效果不错。但是我们已经完成的事情只不过是摆弄 DOM。这个组件并没有真正的语义，即使它看起来像一个选择框，但是从浏览器的角度来看并不是，所以辅助技术并不能明白这是一个选择框。简单来说，这个全新的选择框并不具备可访问性！
    
 
-
    幸运的是，有一种解决方案叫做 ARIA。ARIA代表"无障碍富互联网应用"。这是一个专为我们现在做的事情设计的 W3C 规范：使网络应用和自定义组件易于访问，它本质上是一组用来拓展 HTML 的属性集，以便我们能够更好的描述角色，状态和属性，就像我们刚才设计的元素是是它试图传递的原生元素一样。使用这些属性非常简单，所以让我们来试试看。
    
+
    幸运的是，有一种解决方案叫做 ARIA。ARIA 代表"无障碍富互联网应用"。这是一个专为我们现在做的事情设计的 W3C 规范：使网络应用和自定义组件易于访问，它本质上是一组用来拓展 HTML 的属性集，以便我们能够更好的描述角色，状态和属性，就像我们刚才设计的元素是是它试图传递的原生元素一样。使用这些属性非常简单，所以让我们来试试看。
    
 
 
     role 属性
    
 
-
    ARIA 使用的关键属性是 role 属性。role 属性接受一个值，该值定义了一个元素的用途。每一个 role 定义了它自己的需求和行为。在我们的例子中，我们会使用 listbox 这一 role。这是一个 "合成角色"，表示具有该role的元素应该有子元素，每个子元素都有特定的角色。（在这个案例中，至少有一个具有option 角色的子元素）。
    
+
    ARIA 使用的关键属性是 role 属性。role 属性接受一个值，该值定义了一个元素的用途。每一个 role 定义了它自己的需求和行为。在我们的例子中，我们会使用 listbox 这一 role。这是一个 "合成角色"，表示具有该 role 的元素应该有子元素，每个子元素都有特定的角色。（在这个案例中，至少有一个具有option 角色的子元素）。
    
 
-
    同样值得注意的是，ARIA定义了默认应用于标准 HTML 标记的角色。例如，{{HTMLElement("table")}} 元素与角色 grid 相匹配，而 {{HTMLElement("ul")}} 元素与角色 list 相匹配。由于我们使用了一个 {{HTMLElement("ul")}} 元素，我们想要确保我们组件的 listbox 角色能替代 {{HTMLElement("ul")}} 元素的list 角色。为此，我们会使用角色 presentation。这个角色被设计成让我们来表示一个元素没有特殊的含义，并且仅仅用于提供信息。我们会将其应用到{{HTMLElement("ul")}} 元素上。
    
+
    同样值得注意的是，ARIA 定义了默认应用于标准 HTML 标记的角色。例如，{{HTMLElement("table")}} 元素与角色 grid 相匹配，而 {{HTMLElement("ul")}} 元素与角色 list 相匹配。由于我们使用了一个 {{HTMLElement("ul")}} 元素，我们想要确保我们组件的 listbox 角色能替代 {{HTMLElement("ul")}} 元素的list 角色。为此，我们会使用角色 presentation。这个角色被设计成让我们来表示一个元素没有特殊的含义，并且仅仅用于提供信息。我们会将其应用到{{HTMLElement("ul")}} 元素上。
    
 
 
    为了支持 listbox 角色，我们只需要将我们 HTML 改成这样：
    
 
-
    <!-- 我们把role="listbox" 属性添加到我们的顶部元素 -->
+
    <!-- 我们把 role="listbox" 属性添加到我们的顶部元素 -->
 <div class="select" role="listbox">
   <span class="value">Cherry</span>
-  <!-- 我们也把 role="presentation" 添加到ul元素中 -->
+  <!-- 我们也把 role="presentation" 添加到 ul 元素中 -->
   <ul class="optList" role="presentation">
-    <!-- 然后把role="option" 属性添加到所有li元素里 -->
+    <!-- 然后把 role="option" 属性添加到所有 li 元素里 -->
     <li role="option" class="option">Cherry</li>
     <li role="option" class="option">Lemon</li>
     <li role="option" class="option">Banana</li>
@@ -745,7 +745,7 @@ 
     aria-selected 属性
    
 
 
    总结
    
 
-
    我们已经了解了所有和构建一个自定义表单组件相关的基础知识，但是如你所见做这件事非常繁琐，并且通常情况下依赖第三方库，而不是自己从头写起会更容易 ，也更好(当然，除非你的目的就是构建一个这样的库）。
    
+
    我们已经了解了所有和构建一个自定义表单组件相关的基础知识，但是如你所见做这件事非常繁琐，并且通常情况下依赖第三方库，而不是自己从头写起会更容易 ，也更好 (当然，除非你的目的就是构建一个这样的库）。
    
 
 
    这儿有一些库，在你编写自己的之前应该了解一下：
    
 
@@ -756,7 +756,7 @@ 
    总结
    
  
  • And many more…
    • 
 
 
-
    如果你想更进一步, 本例中的代码需要一些改进，才能变得更加通用和可重用。这是一个你可以尝试去做的练习。这里有两个提示可以帮到你：我们所有函数的第一个参数是相同的，这意味着这些函数需要相同的上下文。构建一个对象来共享那些上下文是更聪明的做法。还有，你需要让它的特性适用性更好；也就是说，它要能在一系列对Web标准的兼容性不同的浏览器上工作良好。祝愉快！
    
+
    如果你想更进一步，本例中的代码需要一些改进，才能变得更加通用和可重用。这是一个你可以尝试去做的练习。这里有两个提示可以帮到你：我们所有函数的第一个参数是相同的，这意味着这些函数需要相同的上下文。构建一个对象来共享那些上下文是更聪明的做法。还有，你需要让它的特性适用性更好；也就是说，它要能在一系列对 Web 标准的兼容性不同的浏览器上工作良好。祝愉快！
    
 
 
    {{PreviousMenuNext("Learn/HTML/Forms/Form_validation", "Learn/HTML/Forms/Sending_forms_through_JavaScript", "Learn/HTML/Forms")}}
    
 
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 996ab2af93062c..195e209f1edb64 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
@@ -1,5 +1,5 @@
 ---
-title: 如何构造HTML表单
+title: 如何构造 HTML 表单
 slug: Learn/Forms/How_to_structure_a_web_form
 translation_of: Learn/Forms/How_to_structure_a_web_form
 original_slug: Learn/HTML/Forms/How_to_structure_an_HTML_form
@@ -13,39 +13,39 @@
 
-   
-   
+   
+   
-   
-   
+   
+   
    
  
   
    前提条件:基本的计算机能力, 和基本的 对HTML的理解。前提条件：基本的计算机能力，和基本的 对 HTML 的理解。
   
    
   
    目标:要理解如何构造HTML表单并赋予它们语义，以便它们是可用的和可访问的。目标：要理解如何构造 HTML 表单并赋予它们语义，以便它们是可用的和可访问的。
   
    
      
 
    
 
-
    HTML表单的灵活性使它们成为HTML中最复杂的结构之一;您可以使用专用的表单元素和属性构建任何类型的基本表单。在构建HTML表单时使用正确的结构将有助于确保表单可用性和可访问性。
    
+
    HTML 表单的灵活性使它们成为 HTML 中最复杂的结构之一;您可以使用专用的表单元素和属性构建任何类型的基本表单。在构建 HTML 表单时使用正确的结构将有助于确保表单可用性和可访问性。
    
 
 
     <form> 元素
    
 
-
     {{HTMLElement("form")}} 元素按照一定的格式定义了表单和确定表单行为的属性。当您想要创建一个HTML表单时，都必须从这个元素开始，然后把所有内容都放在里面。许多辅助技术或浏览器插件可以发现{{HTMLElement("form")}}元素并实现特殊的钩子，使它们更易于使用。 
    
+
     {{HTMLElement("form")}} 元素按照一定的格式定义了表单和确定表单行为的属性。当您想要创建一个 HTML 表单时，都必须从这个元素开始，然后把所有内容都放在里面。许多辅助技术或浏览器插件可以发现{{HTMLElement("form")}}元素并实现特殊的钩子，使它们更易于使用。 
    
 
 
    我们早在之前的文章中就遇见过它了。
    
 
-
    注意: 严格禁止在一个表单内嵌套另一个表单。嵌套会使表单的行为不可预知，而这取决于正在使用的浏览器。
    
+
    注意： 严格禁止在一个表单内嵌套另一个表单。嵌套会使表单的行为不可预知，而这取决于正在使用的浏览器。
    
 
-
    请注意，在{{HTMLElement("form")}}元素之外使用表单小部件是可以的，但是如果您这样做了，那么表单小部件与任何表单都没有任何关系。这样的小部件可以在表单之外使用，但是您应该对于这些小部件有特别的计划，因为它们自己什么也不做。您将不得不使用JavaScript定制他们的行为。
    
+
    请注意，在{{HTMLElement("form")}}元素之外使用表单小部件是可以的，但是如果您这样做了，那么表单小部件与任何表单都没有任何关系。这样的小部件可以在表单之外使用，但是您应该对于这些小部件有特别的计划，因为它们自己什么也不做。您将不得不使用 JavaScript 定制他们的行为。
    
 
 
    
-
    注意: HTML5在HTML表单元素中引入form属性。它让您显式地将元素与表单绑定在一起，即使元素不在{{ HTMLElement("form") }}中。不幸的是，就目前而言，跨浏览器对这个特性的实现还不足以使用。
    
+
    注意: HTML5 在 HTML 表单元素中引入form属性。它让您显式地将元素与表单绑定在一起，即使元素不在{{ HTMLElement("form") }}中。不幸的是，就目前而言，跨浏览器对这个特性的实现还不足以使用。
    
 
    
 
 
     <fieldset> 和 <legend> 元素
    
 
 
    {{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 的内容。
    
 
-
    这里有一个小例子:
    
+
    这里有一个小例子：
    
 
 
    <form>
   <fieldset>
@@ -71,17 +71,17 @@ 
     <fieldset> 和 <legend
 
 
    当阅读上述表格时，屏幕阅读器将会读第一个小部件“Fruit juice size small”，“Fruit juice size medium”为第二个，“Fruit juice size large”为第三个。
    
 
-
    本例中的用例是最重要的。每当您有一组单选按钮时，您应该将它们嵌套在{{HTMLElement("fieldset")}}元素中。还有其他用例，一般来说，{{HTMLElement("fieldset")}}元素也可以用来对表单进行分段。理想情况下，长表单应该在拆分为多个页面，但是如果表单很长，却必须在单个页面上，那么将以不同的关联关系划分的分段，分别放在不同的fieldset里，可以提高可用性。
    
+
    本例中的用例是最重要的。每当您有一组单选按钮时，您应该将它们嵌套在{{HTMLElement("fieldset")}}元素中。还有其他用例，一般来说，{{HTMLElement("fieldset")}}元素也可以用来对表单进行分段。理想情况下，长表单应该在拆分为多个页面，但是如果表单很长，却必须在单个页面上，那么将以不同的关联关系划分的分段，分别放在不同的 fieldset 里，可以提高可用性。
    
 
 
    因为它对辅助技术的影响， {{HTMLElement("fieldset")}} 元素是构建可访问表单的关键元素之一。无论如何，你有责任不去滥用它。如果可能，每次构建表单时，尝试侦听屏幕阅读器如何解释它。如果听起来很奇怪，试着改进表单结构。
    
 
 
     <label> 元素
    
 
-
    正如我们在前一篇文章中看到的， {{HTMLElement("label")}} 元素是为HTML表单小部件定义标签的正式方法。如果你想构建可访问的表单，这是最重要的元素——当实现的恰当时，屏幕阅读器会连同有关的说明和表单元素的标签一起朗读。以我们在上一篇文章中看到的例子为例:
    
+
    正如我们在前一篇文章中看到的， {{HTMLElement("label")}} 元素是为 HTML 表单小部件定义标签的正式方法。如果你想构建可访问的表单，这是最重要的元素——当实现的恰当时，屏幕阅读器会连同有关的说明和表单元素的标签一起朗读。以我们在上一篇文章中看到的例子为例：
    
 
 
    <label for="name">Name:</label> <input type="text" id="name" name="user_name">
    
 
-
    <label> 标签与 <input> 通过他们各自的for 属性和 id 属性正确相关联（label的for属性和它对应的小部件的id属性），这样，屏幕阅读器会读出诸如“Name, edit text”之类的东西。
    
+
    <label> 标签与 <input> 通过他们各自的for 属性和 id 属性正确相关联（label 的 for 属性和它对应的小部件的 id 属性），这样，屏幕阅读器会读出诸如“Name, edit text”之类的东西。
    
 
 
    如果标签没有正确设置，屏幕阅读器只会读出“Edit text blank”之类的东西，这样会没什么帮助。
    
 
@@ -93,7 +93,7 @@ 
     <label> 元素
    
 
 
    尽管可以这样做，但人们认为设置for属性才是最好的做法，因为一些辅助技术不理解标签和小部件之间的隐式关系。
    
 
-
    标签也可点击!
    
+
    标签也可点击！
    
 
 
    正确设置标签的另一个好处是可以在所有浏览器中单击标签来激活相应的小部件。这对于像文本输入这样的例子很有用，这样你可以通过点击标签，和点击输入区效果一样，来聚焦于它，这对于单选按钮和复选框尤其有用——这种控件的可点击区域可能非常小，设置标签来使它们可点击区域变大是非常有用的。
    
 
@@ -153,32 +153,32 @@ 
    多个标签
    
 
 
 
    
-
    注意：你可能会得到一些不同的结果，这取决于你的屏幕阅读器。这是在VoiceOver上测试的（NVDA的行为也类似）。我们也乐于听听你的试验结果。
    
+
    注意：你可能会得到一些不同的结果，这取决于你的屏幕阅读器。这是在 VoiceOver 上测试的（NVDA 的行为也类似）。我们也乐于听听你的试验结果。
    
 
    
 
 
    
-
    注意: 你可以在 GitHub 上看到 required-labels.html (你也可以看预览版)。不要运行2个或3个未注释版本的示例—— 如果您有多个标签和多个输入相同的ID，那么屏幕阅读器肯定会感到困惑！
    
+
    注意: 你可以在 GitHub 上看到 required-labels.html (你也可以看预览版)。不要运行 2 个或 3 个未注释版本的示例—— 如果您有多个标签和多个输入相同的 ID，那么屏幕阅读器肯定会感到困惑！
    
 
    
 
-
    用于表单的通用HTML结构
    
+
    用于表单的通用 HTML 结构
    
 
-
    除了特定于HTML表单的结构之外，还应该记住表单同样是HTML。这意味着您可以使用HTML的所有强大功能来构造一个HTML表单。
    
+
    除了特定于 HTML 表单的结构之外，还应该记住表单同样是 HTML。这意味着您可以使用 HTML 的所有强大功能来构造一个 HTML 表单。
    
 
-
    正如您在示例中可以看到的，用{{HTMLElement("div")}}元素包装标签和它的小部件是很常见的做法。{{HTMLElement("p")}}元素也经常被使用，HTML列表也是如此（后者在构造多个复选框或单选按钮时最为常见）。
    
+
    正如您在示例中可以看到的，用{{HTMLElement("div")}}元素包装标签和它的小部件是很常见的做法。{{HTMLElement("p")}}元素也经常被使用，HTML 列表也是如此（后者在构造多个复选框或单选按钮时最为常见）。
    
 
-
    除了{{HTMLElement("fieldset")}}元素之外，使用HTML标题（例如，{{htmlelement("h1")}}、{{htmlelement("h2")}}）和分段（如{{htmlelement("section")}}）来构造一个复杂的表单也是一种常见的做法。
    
+
    除了{{HTMLElement("fieldset")}}元素之外，使用 HTML 标题（例如，{{htmlelement("h1")}}、{{htmlelement("h2")}}）和分段（如{{htmlelement("section")}}）来构造一个复杂的表单也是一种常见的做法。
    
 
 
    最重要的是，你要找到一种你觉得很舒服的风格去码代码，而且它也能带来可访问的、可用的形式。
    
 
 
    它包含了从功能上划分开并分别包含在{{htmlelement("section")}}元素中的部分，以及一个{{htmlelement("fieldset")}}来包含单选按钮。
    
 
-
    自主学习:构建一个表单结构
    
+
    自主学习：构建一个表单结构
    
 
 
    让我们把这些想法付诸实践，建立一个稍微复杂一点的表单结构——一个支付表单。这个表单将包含许多您可能还不了解的小部件类型—现在不要担心这个；在下一篇文章（原生表单小部件）中，您将了解它们是如何工作的。现在，当您遵循下面的指令时，请仔细阅读这些描述，并开始理解我们使用的包装器元素是如何构造表单的，以及为什么这么做。
    
 
 
      
- 
    1. 在开始之前，在计算机上的一个新目录中，创建一个空白模板文件和我们的支付表单的CSS样式的本地副本。
      2. 
- 
    2. 首先，通过添加下面这行代码到你的HTML{{htmlelement("head")}}使你的HTML应用CSS。
+ 
    3. 在开始之前，在计算机上的一个新目录中，创建一个空白模板文件和我们的支付表单的 CSS 样式的本地副本。
      4. 
+ 
    4. 首先，通过添加下面这行代码到你的 HTML{{htmlelement("head")}}使你的 HTML 应用 CSS。
   
      <link href="payment-form.css" rel="stylesheet">
      
  
      5. 
  
    5. 接下来，通过添加外部{{htmlelement("form")}}元素来开始一张表单：
@@ -186,11 +186,11 @@ 
      自主学习:构建一个表单结
 
 </form>
    
  
- 
  • 在 <form> 标签内，以添加一个标题和段落开始，告诉用户必需的字段是如何标记的:
+ 
  • 在 <form> 标签内，以添加一个标题和段落开始，告诉用户必需的字段是如何标记的：
   
    <h1>Payment form</h1>
 <p>Required fields are followed by <strong><abbr title="required">*</abbr></strong>.</p>
    
  
    • 
- 
  • 接下来，我们将在表单中添加一个更大的代码段，在我们之前的代码下面。在这里，您将看到，我们正在将联系人信息字段包装在一个单独的{{htmlelement("section")}}元素中。此外，我们有一组两个单选按钮，每个单选按钮都放在自己的列表中({{htmlelement("li")}}))元素。最后，我们有两个标准文本{{htmlelement("input")}}和它们相关的{{htmlelement("label")}}元素，每个元素包含在{{htmlelement("p")}}中，加上输入密码的密码输入。现在将这些代码添加到您的表单中:
+ 
  • 接下来，我们将在表单中添加一个更大的代码段，在我们之前的代码下面。在这里，您将看到，我们正在将联系人信息字段包装在一个单独的{{htmlelement("section")}}元素中。此外，我们有一组两个单选按钮，每个单选按钮都放在自己的列表中 ({{htmlelement("li")}})) 元素。最后，我们有两个标准文本{{htmlelement("input")}}和它们相关的{{htmlelement("label")}}元素，每个元素包含在{{htmlelement("p")}}中，加上输入密码的密码输入。现在将这些代码添加到您的表单中：
   
    <section>
     <h2>Contact information</h2>
     <fieldset>
@@ -239,7 +239,7 @@ 
    自主学习:构建一个表单结
     </p>
 </section>
    
  
    • 
- 
  • 现在，我们将转到表单的第二个<section>——支付信息。在这里，我们有三个不同的小部件以及它们的标签，每个都包含在一个<p>中。第一个是选择信用卡类型的下拉菜单({{htmlelement("select")}})。第二个是输入一个信用卡号的类型编号的 <input> 元素。最后一个是输入date类型的<input> 元素，用来输入卡片的过期日期（这将在支持的浏览器中出现一个日期选择器小部件，并在非支持的浏览器中回退到普通的文本输入）。同样，在之前的代码后面输入以下内容：
+ 
  • 现在，我们将转到表单的第二个<section>——支付信息。在这里，我们有三个不同的小部件以及它们的标签，每个都包含在一个<p>中。第一个是选择信用卡类型的下拉菜单 ({{htmlelement("select")}})。第二个是输入一个信用卡号的类型编号的 <input> 元素。最后一个是输入date类型的<input> 元素，用来输入卡片的过期日期（这将在支持的浏览器中出现一个日期选择器小部件，并在非支持的浏览器中回退到普通的文本输入）。同样，在之前的代码后面输入以下内容：
   
    <section>
     <h2>Payment information</h2>
     <p>
@@ -269,18 +269,18 @@ 
    自主学习:构建一个表单结
     </p>
 </section>
    
  
    • 
- 
  • 我们要添加的最后一个部分要简单得多，它只包含了一个submit类型的 {{htmlelement("button")}} ，用于提交表单数据。现在把这个添加到你的表单的底部:
+ 
  • 我们要添加的最后一个部分要简单得多，它只包含了一个submit类型的 {{htmlelement("button")}} ，用于提交表单数据。现在把这个添加到你的表单的底部：
   
    <p> <button type="submit">Validate the payment</button> </p>
    
  
    • 
 
 
-
    您可以在下面看到已完成的表单 (你可以在Github上看到源码和预览版）：
    
+
    您可以在下面看到已完成的表单 (你可以在 Github 上看到源码和预览版）：
    
 
 
    {{EmbedLiveSample("a_payment_form","100%",620, "", "Learn/Forms/How_to_structure_a_web_form/Example")}}
    
 
 
    总结
    
 
-
    现在，您已经具备了正确地构造HTML表单所需的所有知识;下一篇文章将深入介绍各种不同类型的表单小部件，您将希望从用户那里收集信息。
    
+
    现在，您已经具备了正确地构造 HTML 表单所需的所有知识;下一篇文章将深入介绍各种不同类型的表单小部件，您将希望从用户那里收集信息。
    
 
 
    另见
    
 
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 f7e3e291921e1f..3b6ddc5316ff11 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
@@ -1,27 +1,27 @@
 ---
-title: 旧式浏览器中的HTML 表单
+title: 旧式浏览器中的 HTML 表单
 slug: Learn/Forms/HTML_forms_in_legacy_browsers
 translation_of: Learn/Forms/HTML_forms_in_legacy_browsers
 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％的问题。
    
+
    可悲的是，处理这些传统浏览器的问题是工作的一部分。幸运的是，有一些技巧可以帮助您解决旧式浏览器导致的大约 80％的问题。
    
 
 
    了解这些问题
    
 
-
    实际上，最重要的事情是阅读那些浏览器的文档，并尝试理解通用的（解决）模式。例如，在许多情况下，HTML表单是否支持CSS是最大的问题。这是正确的开始，只需要检查你想用的元素或接口是否支持CSS即可。MDN有一个关于包含HTML中可用的元素、属性或API的兼容表单可查。 此外，仍有其他一些非常有用的资源：
    
+
    实际上，最重要的事情是阅读那些浏览器的文档，并尝试理解通用的（解决）模式。例如，在许多情况下，HTML 表单是否支持 CSS 是最大的问题。这是正确的开始，只需要检查你想用的元素或接口是否支持 CSS 即可。MDN 有一个关于包含 HTML 中可用的元素、属性或 API 的兼容表单可查。 此外，仍有其他一些非常有用的资源：
    
 
 
    浏览器厂商的文档
    
 
 
      
- 
    • Mozilla: 直接查看MDN即可
      • 
+ 
    • Mozilla: 直接查看 MDN 即可
      • 
  
    • Microsoft: Internet Explorer Standards Support Documentation
      • 
- 
    • WebKit: 由于有多个版本的引擎，稍微有点棘手.
+ 
    • WebKit: 由于有多个版本的引擎，稍微有点棘手。
   
@@ -31,25 +31,25 @@ 
      浏览器厂商的文档
      
 
      独立文档
      
 
 
        
- 
      • Can I Use 有关于是否支持最新技术的信息.
        • 
- 
      • Quirks Mode 是关于浏览器兼容性的精彩资源. mobile部分是当前最好的内容之一.
        • 
- 
      • Position Is Everything 关于旧式浏览器渲染bug以及解决办法（如果有）的最佳资源.
        • 
+ 
      • Can I Use 有关于是否支持最新技术的信息。
        • 
+ 
      • Quirks Mode 是关于浏览器兼容性的精彩资源。mobile 部分是当前最好的内容之一。
        • 
+ 
      • Position Is Everything 关于旧式浏览器渲染 bug 以及解决办法（如果有）的最佳资源。
        • 
  
      • Mobile HTML5 有关于大量手机浏览器的兼容性信息，而不仅仅是是前五名（包括诺基亚，亚马逊和黑莓）.
        • 
 
      
 
 
      让事情变得更简单
      
 
-
      由于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) 是 web 开发者最好的朋友
      
 
 
      Graceful degradation and progressive enhancement 是一个开发模式，它允许你通过同时支持多种浏览器来构建优秀内容。当你为现代浏览器构建内容时，你想确保它能在旧式浏览器中以某种方式工作，这就是优雅地降级（graceful degradation）.
      
 
-
      让我们看一些关于HTML表单的例子：
      
+
      让我们看一些关于 HTML 表单的例子：
      
 
 
      HTML input 类型
      
 
-
      HTML5引入的新input类型十分酷，因为他们的降级(degrade)是高度可预测的。如果一个浏览器不能理解  {{HTMLElement("input")}}元素的 {{htmlattrxref("type","input")}} 属性, 它将会后退到text一样的行为。
      
+
      HTML5 引入的新 input 类型十分酷，因为他们的降级 (degrade) 是高度可预测的。如果一个浏览器不能理解  {{HTMLElement("input")}}元素的 {{htmlattrxref("type","input")}} 属性，它将会后退到text一样的行为。
      
 
 
      <label for="myColor">
   Pick a color
@@ -73,7 +73,7 @@ 
      HTML input 类型
      
 
 
      CSS 属性选择器
      
 
-
      CSS属性选择器  在 HTML Forms 中十分有用，然而旧式浏览器不支持. 在那种情形下，一般会习惯性使用等价的class:
      
+
      CSS 属性选择器  在 HTML Forms 中十分有用，然而旧式浏览器不支持。在那种情形下，一般会习惯性使用等价的 class:
      
 
 
      <input type="number" class="number">
      
 
@@ -85,7 +85,7 @@ 
      CSS 属性选择器
      
   /* 可以在任何浏览器中执行 */
 }
      
 
-
      注意下面的写法没有用（由于它是重复的），在某些浏览器中会失败:
      
+
      注意下面的写法没有用（由于它是重复的），在某些浏览器中会失败：
      
 
 
      input[type=number],
 input.number {
@@ -94,19 +94,19 @@ 
      CSS 属性选择器
      
 
 
      表单按钮
      
 
-
      有两种定义HTML表单按钮的方式:
      
+
      有两种定义 HTML 表单按钮的方式：
      
 
 
        
  
      • {{HTMLElement("input")}} 元素使用{{htmlattrxref("type","input")}} 属性并设置其值为button, submit, reset or image
        • 
  
      • {{HTMLElement("button")}} 元素
        • 
 
      
 
-
      如果你想通过元素选择器在按钮上应用CSS的话，采用 {{HTMLElement("input")}} 元素的方式会让事情变得稍微有点复杂:
      
+
      如果你想通过元素选择器在按钮上应用 CSS 的话，采用 {{HTMLElement("input")}} 元素的方式会让事情变得稍微有点复杂：
      
 
 
      <input type="button" class="button" value="click me">
      
 
 
      input {
-  /* 此规则关闭了input元素定义的按钮的默认渲染样式 */
+  /* 此规则关闭了 input 元素定义的按钮的默认渲染样式 */
   border: 1px solid #CCC;
 }
 
@@ -116,15 +116,15 @@ 
      表单按钮
      
 }
 
 input.button {
-  /* 这条也不会(恢复)! 实际上在浏览器中没有标准方式实现这一目标 */
+  /* 这条也不会 (恢复)! 实际上在浏览器中没有标准方式实现这一目标 */
   border: auto;
 }
      
 
-
      {{HTMLElement("button")}} 元素有两个问题令人困扰:
      
+
      {{HTMLElement("button")}} 元素有两个问题令人困扰：
      
 
 
        
- 
      • 在某些旧版本的IE浏览器中有bug。当用户点击按钮时，它不是发送{{htmlattrxref("value","button")}}属性中的内容，而是发送 {{HTMLElement("button")}} 的开闭标签之间的HTML内容. 如果我们想发送值时，这是一个问题，例如发送的处理数据依赖于用户点击不同的按钮时.
        • 
- 
      • 一些旧浏览器不使用submit 作为 {{htmlattrxref("type","button")}} 属性的默认值, 所以建议总是在{{HTMLElement("button")}} 元素上设置设置 {{htmlattrxref("type","button")}} 属性.
        • 
+ 
      • 在某些旧版本的 IE 浏览器中有 bug。当用户点击按钮时，它不是发送{{htmlattrxref("value","button")}}属性中的内容，而是发送 {{HTMLElement("button")}} 的开闭标签之间的 HTML 内容。如果我们想发送值时，这是一个问题，例如发送的处理数据依赖于用户点击不同的按钮时。
        • 
+ 
      • 一些旧浏览器不使用submit 作为 {{htmlattrxref("type","button")}} 属性的默认值，所以建议总是在{{HTMLElement("button")}} 元素上设置设置 {{htmlattrxref("type","button")}} 属性。
        • 
 
      
 
 
      <!-- 某些情形下，点击按钮将发送 "<em>Do A</em>" 而不是值"A" -->
@@ -134,41 +134,41 @@ 
      表单按钮
      
 
 
      给予你的工程限制来选择上述任一种解决方案。
      
 
-
      让我们过一遍CSS
      
+
      让我们过一遍 CSS
      
 
-
      HTML表单和旧式浏览器最大的问题是CSS的兼容性。正如你可以从这篇文章 Property compatibility table for form widgets 中看到的复杂性, 它非常的困难。即使仍然可以对文本元素（如大小、字体颜色等）进行一些调整，但那样做会有副作用。最好的办法还是不要美化HTML表单小组件。但你仍然可以将样式应用到表单周围的项目上。如果你是一个专业人士，并且你的客户需要那么做，在这种情况下，你可以研究一些硬技能，如 rebuilding widgets with JavaScript。但在那种情况下，最好还是毫不犹豫的让客户收回这些愚蠢的决定。
      
+
      HTML 表单和旧式浏览器最大的问题是 CSS 的兼容性。正如你可以从这篇文章 Property compatibility table for form widgets 中看到的复杂性，它非常的困难。即使仍然可以对文本元素（如大小、字体颜色等）进行一些调整，但那样做会有副作用。最好的办法还是不要美化 HTML 表单小组件。但你仍然可以将样式应用到表单周围的项目上。如果你是一个专业人士，并且你的客户需要那么做，在这种情况下，你可以研究一些硬技能，如 rebuilding widgets with JavaScript。但在那种情况下，最好还是毫不犹豫的让客户收回这些愚蠢的决定。
      
 
-
      功能检测和模拟(polyfills)
      
+
      功能检测和模拟 (polyfills)
      
 
-
      尽管JavaScript在现代浏览中是非常棒的技术，但在旧式浏览器中可能存在很多的问题。
      
+
      尽管 JavaScript 在现代浏览中是非常棒的技术，但在旧式浏览器中可能存在很多的问题。
      
 
 
      Unobtrusive JavaScript
      
 
-
      API的兼容性是最大的问题。由于这个原因，与"不引人注意的（unobtrusive）" JavaScript一起工作被认为是最佳实践（译者注：此处意思是说没有/忽略JS或JS出了问题也能工作）。这个开发模式定义了两个需求：
      
+
      API 的兼容性是最大的问题。由于这个原因，与"不引人注意的（unobtrusive）" JavaScript 一起工作被认为是最佳实践（译者注：此处意思是说没有/忽略 JS 或 JS 出了问题也能工作）。这个开发模式定义了两个需求：
      
 
 
        
  
      • 结构和行为之间的严格隔离
        • 
  
      • 如果代码出错，内容和基本功能必须保持可访问和可用状态
        • 
 
      
 
-
      The principles of unobtrusive JavaScript (最早是由Peter-Paul Koch为 Dev.Opera.com 所撰写，现在已转移到 Docs.WebPlatform.org) 同样阐述了上述观点。
      
+
      The principles of unobtrusive JavaScript (最早是由 Peter-Paul Koch 为 Dev.Opera.com 所撰写，现在已转移到 Docs.WebPlatform.org) 同样阐述了上述观点。
      
 
 
      Modernizr 库
      
 
-
      有很多情形，好的"polyfill"能通过提供缺少的API以提供帮助。一个 polyfill 是一些JavaScript(脚本) 用于填补旧式浏览器中的功能缺失。虽然它们可以用来改进对任何功能的支持，并且使用它们Nederland风险小于CSS和HTML，然而，JS仍然会在很多情况下不工作（网络问题，脚本冲突等）。但是对于JavaScript，如果你总是记住和unobetructive的Javascript一起工作，不适用polyfill也没什么大不了。
      
+
      有很多情形，好的"polyfill"能通过提供缺少的 API 以提供帮助。一个 polyfill 是一些 JavaScript(脚本) 用于填补旧式浏览器中的功能缺失。虽然它们可以用来改进对任何功能的支持，并且使用它们 Nederland 风险小于 CSS 和 HTML，然而，JS 仍然会在很多情况下不工作（网络问题，脚本冲突等）。但是对于 JavaScript，如果你总是记住和 unobetructive 的 Javascript 一起工作，不适用 polyfill 也没什么大不了。
      
 
-
      最好的polyfill缺失API的方式是使用Modernizr 库以及它的子项目 YepNope. Modernizr 库允许您测试功能可用性，以便采取相应的行动。YepNope 是一个条件加载库。
      
+
      最好的 polyfill 缺失 API 的方式是使用Modernizr 库以及它的子项目 YepNope. Modernizr 库允许您测试功能可用性，以便采取相应的行动。YepNope 是一个条件加载库。
      
 
-
      下面是一个例子:
      
+
      下面是一个例子：
      
 
 
      Modernizr.load({
-  // 这会测试您的浏览器是否支持HTML5表单验证API
+  // 这会测试您的浏览器是否支持 HTML5 表单验证 API
   test : Modernizr.formvalidation,
 
-  // 如果浏览器不支持它，则会加载以下polyfill
+  // 如果浏览器不支持它，则会加载以下 polyfill
   nope : form-validation-API-polyfill.js,
 
-  // 无论如何，你的核心App文件依赖于该API被加载
+  // 无论如何，你的核心 App 文件依赖于该 API 被加载
   both : app.js,
 
   // 一旦加载了这两个文件，就会调用该函数来初始化应用程序
@@ -180,12 +180,12 @@ 
      Modernizr 库
      
 
      Modernizr 团队按照惯例维护着a list of great polyfills。仅仅按需使用即可。
      
 
 
      
-
      Note: Modernizr还有其他很棒的功能可以帮助您处理unobstructive的JavaScript和优雅的降级技术。请阅读 Modernizr documentation.
      
+
      Note: Modernizr 还有其他很棒的功能可以帮助您处理 unobstructive 的 JavaScript 和优雅的降级技术。请阅读 Modernizr documentation.
      
 
      
 
 
      注意性能
      
 
-
      尽管像Modernizr这样的脚本对性能非常敏感，但加载200千字节的polyfill仍然会影响程序的性能。这对旧式浏览器来说尤其重要，这些浏览器有处理速度非常慢的JavaScript引擎，让polyfills的执行对于用户来说变得很痛苦。性能本身就是一个主题，但旧式浏览器对它非常敏感：基本上，它们速度慢，需要的poliyfill越多，它们需要处理的JavaScript越多。与现代浏览器相比，它们承受双重负担。使用旧版浏览器测试你的代码，了解它们的实际表现。有时，放弃某些功能会带来更好的用户体验，而不是在所有浏览器中具有完全相同的功能。作为最后提醒，总是优先考虑用户。
      
+
      尽管像 Modernizr 这样的脚本对性能非常敏感，但加载 200 千字节的 polyfill 仍然会影响程序的性能。这对旧式浏览器来说尤其重要，这些浏览器有处理速度非常慢的 JavaScript 引擎，让 polyfills 的执行对于用户来说变得很痛苦。性能本身就是一个主题，但旧式浏览器对它非常敏感：基本上，它们速度慢，需要的 poliyfill 越多，它们需要处理的 JavaScript 越多。与现代浏览器相比，它们承受双重负担。使用旧版浏览器测试你的代码，了解它们的实际表现。有时，放弃某些功能会带来更好的用户体验，而不是在所有浏览器中具有完全相同的功能。作为最后提醒，总是优先考虑用户。
      
 
 
      总结
      
 
@@ -207,7 +207,7 @@ 
      In this module
      
  
    • Form data validation
      • 
  
    • How to build custom form widgets
      • 
  
    • Sending forms through JavaScript
      • 
- 
    • 旧式浏览器中的HTML表单使用
      • 
+ 
    • 旧式浏览器中的 HTML 表单使用
      • 
  
    • Styling HTML forms
      • 
  
    • Advanced styling for HTML forms
      • 
  
    • Property compatibility table for form widgets
      • 
diff --git a/files/zh-cn/learn/forms/index.md b/files/zh-cn/learn/forms/index.md
index b9e2684809a438..ace32d8cbae07d 100644
--- a/files/zh-cn/learn/forms/index.md
+++ b/files/zh-cn/learn/forms/index.md
@@ -1,5 +1,5 @@
 ---
-title: HTML表单指南
+title: HTML 表单指南
 slug: Learn/Forms
 tags:
   - Beginner
@@ -53,7 +53,7 @@ translation_of: Learn/Forms
 ## 表单样式指南
 
 - [HTML 表单样式](/zh-CN/docs/Learn/Forms/Styling_web_forms)
-  - : 本文介绍了使用CSS的样式表单，包括您可能需要了解的基本样式任务的所有基础知识。
+  - : 本文介绍了使用 CSS 的样式表单，包括您可能需要了解的基本样式任务的所有基础知识。
 - [高级表单样式](/zh-CN/docs/Learn/Forms/Advanced_form_styling)
   - : 在这里，我们将看到一些更高级的表单样式技术，这些技术需要在处理一些更难以设置样式的元素时使用。
 - [UI 伪类](/zh-CN/docs/Learn/Forms/UI_pseudo-classes)
@@ -73,7 +73,7 @@ translation_of: Learn/Forms
 - [如何构建自定义表单控件](/zh-CN/docs/Learn/Forms/How_to_build_custom_form_controls)
   - : 在某些情况下，原生表单部件无法提供您需要的东西，例如，由于样式或功能。在这种情况下，您可能需要使用原生 HTML 构建自己的表单小部件。本文将说明您是如何做到这一点的，以及在实际案例研究中需要注意的事项。
 - [通过 JavaScript 发送表单](/zh-CN/docs/Learn/Forms/Sending_forms_through_JavaScript)
-  - : 本文将讨论如何使用表单来构建 HTTP 请求，并通过定制的 JavaScript 发送它，而不是标准的表单提交。它还说明了为什么要这么做，以及这样做的意义。（请参阅[使用 FormData 对象](/zh-CN/docs/Web/API/FormData/Using_FormData_Objects)。）
+  - : 本文将讨论如何使用表单来构建 HTTP 请求，并通过定制的 JavaScript 发送它，而不是标准的表单提交。它还说明了为什么要这么做，以及这样做的意义。（请参阅 [使用 FormData 对象](/zh-CN/docs/Web/API/FormData/Using_FormData_Objects)。）
 - [表单控件的 CSS 属性兼容性表](/zh-CN/docs/Learn/Forms/Property_compatibility_table_for_form_controls)
   - : 最后一篇文章提供了一个方便的参考，让您可以确定 CSS 属性与表单元素的兼容性关系。
 
diff --git a/files/zh-cn/learn/forms/property_compatibility_table_for_form_controls/index.html b/files/zh-cn/learn/forms/property_compatibility_table_for_form_controls/index.html
index 1d87092123f5ed..d957f70cfc6354 100644
--- a/files/zh-cn/learn/forms/property_compatibility_table_for_form_controls/index.html
+++ b/files/zh-cn/learn/forms/property_compatibility_table_for_form_controls/index.html
@@ -60,7 +60,7 @@ 
      Global behaviors
      
  
      {{cssxref("line-height")}}
      
  
      不同浏览器支持不同，避免使用
      
  
      {{cssxref("text-decoration")}}
      
- 
      Opera表单不支持
      
+ 
      Opera 表单不支持
      
  
      {{cssxref("text-overflow")}}
      
  
      Opera, Safari,  IE9 表单不支持
      
  
      {{cssxref("text-shadow")}}
      
@@ -206,7 +206,7 @@ 
      Text fields
      
    
     
        
      
      1. WebKit 浏览器 (主要在 Mac OSX and iOS 上) 的搜索域使用原生的样式和行为。因此，需要使用 -webkit-appearance:none 才能将这个属性应用到搜索域上。
        2. 
-     
      2. 在 Windows 7上, Internet Explorer 9 不会应用到边框上，除非 background:none 已应用。
        3. 
+     
      3. 在 Windows 7 上，Internet Explorer 9 不会应用到边框上，除非 background:none 已应用。
        4. 
     
      
    
   
@@ -217,7 +217,7 @@ 
      Text fields
      
    
     
        
      
      1. WebKit 浏览器 (主要在 Mac OSX and iOS 上) 的搜索域使用原生的样式和行为。因此，需要使用 -webkit-appearance:none 才能将这个属性应用到搜索域上。
        2. 
-     
      2. 在 Windows 7上, Internet Explorer 9 不会应用到边框上，除非 background:none 已应用。
        3. 
+     
      3. 在 Windows 7 上，Internet Explorer 9 不会应用到边框上，除非 background:none 已应用。
        4. 
      
      4. 在 Opera 上，只有当边框明确设定时 {{cssxref("border-radius")}} 属性才会应用
        5. 
     
      
    
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 89e2dd66b87ce0..3b16244faaeefe 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
@@ -13,14 +13,14 @@
 ---
 
      {{LearnSidebar}}{{PreviousMenuNext("Learn/HTML/Forms/The_native_form_widgets", "Learn/HTML/Forms/Form_validation", "Learn/HTML/Forms")}}
      
 
-
      本文将讨论当用户提交表单时发生了什么——数据去了哪，以及当它到达时该如何处理?我们还研究了与发送表单数据相关的一些安全问题。
      
+
      本文将讨论当用户提交表单时发生了什么——数据去了哪，以及当它到达时该如何处理？我们还研究了与发送表单数据相关的一些安全问题。
      
 
 
@@ -36,29 +36,29 @@ 
      数据都去哪儿了？
      客户端/服务器体系结构
      
 
-
      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
      
 
-
      在客户端，HTML表单只不过是一种方便的用户友好的方式，可以配置HTTP请求将数据发送到服务器。这使用户能够提供在HTTP请求中传递的信息。
      
+
      在客户端，HTML 表单只不过是一种方便的用户友好的方式，可以配置 HTTP 请求将数据发送到服务器。这使用户能够提供在 HTTP 请求中传递的信息。
      
 
      注意：为了更好地了解客户端—服务器架构是如何工作的，请阅读我们的服务器端网站编程的第一个步骤模块。
      
 
      
 
-
      在客户端:定义如何发送数据
      
+
      在客户端：定义如何发送数据
      {{HTMLElement("form")}}元素定义了如何发送数据。它的所有属性都是为了让您配置当用户点击提交按钮时发送的请求。两个最重要的属性是{{htmlattrxref("action","form")}}和{{htmlattrxref("method","form")}}。
       {{htmlattrxref("action","form")}} 属性
      
 
-
      这个属性定义了发送数据要去的位置。它的值必须是一个有效的URL。如果没有提供此属性，则数据将被发送到包含这个表单的页面的URL。
      
+
      这个属性定义了发送数据要去的位置。它的值必须是一个有效的 URL。如果没有提供此属性，则数据将被发送到包含这个表单的页面的 URL。
      
 
-
      在这个例子中，数据被发送到一个绝对URL —— http://foo.com：
      
+
      在这个例子中，数据被发送到一个绝对 URL —— http://foo.com：
      <form action="http://foo.com">
      
 
-
      这里，我们使用相对URL——数据被发送到服务器上的不同URL
      
+
      这里，我们使用相对 URL——数据被发送到服务器上的不同 URL
      <form action="/somewhere_else">
 
      
@@ -67,25 +67,25 @@ 
       {{htmlattrxref("action","form")}} 属
 
 
      <form>
      
 
-
      许多较老的页面使用下面的符号表示数据应该被发送到包含表单的相同页面；这是必需的，因为直到HTML5{{htmlattrxref("action", "form")}}属性都需要该符号。现在，这不再需要了。
      
+
      许多较老的页面使用下面的符号表示数据应该被发送到包含表单的相同页面；这是必需的，因为直到 HTML5{{htmlattrxref("action", "form")}}属性都需要该符号。现在，这不再需要了。
      
 
 
      <form action="#">
      
 
 
      
-
      注意：可以指定使用HTTPS(安全HTTP)协议的URL。当您这样做时，数据将与请求的其余部分一起加密，即使表单本身是托管在使用HTTP访问的不安全页面上。另一方面，如果表单是在安全页面上托管的，但是您指定了一个不安全的HTTP URL，它带有{{htmlattrxref("action","form")}}属性，所有的浏览器都会在每次尝试发送数据时向用户显示一个安全警告，因为数据不会被加密。
      
+
      注意：可以指定使用 HTTPS(安全 HTTP) 协议的 URL。当您这样做时，数据将与请求的其余部分一起加密，即使表单本身是托管在使用 HTTP 访问的不安全页面上。另一方面，如果表单是在安全页面上托管的，但是您指定了一个不安全的 HTTP URL，它带有{{htmlattrxref("action","form")}}属性，所有的浏览器都会在每次尝试发送数据时向用户显示一个安全警告，因为数据不会被加密。
      
 
      
 
 
       {{htmlattrxref("method","form")}}属性
      
 
-
      该属性定义了如何发送数据。HTTP协议提供了几种执行请求的方法；HTML表单数据可以通过许多不同的方法进行数据传输，其中最常见的是GET方法和POST方法。
      
+
      该属性定义了如何发送数据。HTTP 协议提供了几种执行请求的方法；HTML 表单数据可以通过许多不同的方法进行数据传输，其中最常见的是GET方法和POST方法。
      
 
-
      为了理解这两种方法之间的区别，让我们回过头来看看HTTP是如何工作的。
      
- 每当您想要访问Web上的资源时，浏览器都会向URL发送一个请求。
      
- HTTP请求由两个部分组成：一个包含关于浏览器功能的全局元数据集的头部，和一个包含服务器处理特定请求所需信息的主体。
      
+
      为了理解这两种方法之间的区别，让我们回过头来看看 HTTP 是如何工作的。
      
+ 每当您想要访问 Web 上的资源时，浏览器都会向 URL 发送一个请求。
      
+ HTTP 请求由两个部分组成：一个包含关于浏览器功能的全局元数据集的头部，和一个包含服务器处理特定请求所需信息的主体。
      GET 方法
      
 
-
      GET方法是浏览器使用的方法，请求服务器返回给定的资源:“嘿，服务器，我想要得到这个资源。”在这种情况下，浏览器发送一个空的主体。由于主体是空的，如果使用该方法发送一个表单，那么发送到服务器的数据将被追加到URL。
      
+
      GET方法是浏览器使用的方法，请求服务器返回给定的资源:“嘿，服务器，我想要得到这个资源。”在这种情况下，浏览器发送一个空的主体。由于主体是空的，如果使用该方法发送一个表单，那么发送到服务器的数据将被追加到 URL。
      考虑下面这个表单：
      
 
@@ -105,25 +105,25 @@ 
      GET 方法
      由于已经使用了GET方法，当你提交表单的时候，您将看到www.foo.com/?say=Hi&to=Mom在浏览器地址栏里。
      
 
-
      数据作为一系列的名称/值对被附加到URL。在URL web地址结束之后，我们得到一个问号(?)，后面跟着由一个与符号(&)互相分隔开的名称/值对。在本例中，我们将两个数据传递给服务器。
      
+
      数据作为一系列的名称/值对被附加到URL。在URL web 地址结束之后，我们得到一个问号 (?)，后面跟着由一个与符号 (&) 互相分隔开的名称/值对。在本例中，我们将两个数据传递给服务器。
        
  
      • say, 它有一个 Hi的值。
        • 
  
      • to, 它有一个 Mom的值。
        • 
 
      
 
-
      HTTP请求如下：
      
+
      HTTP 请求如下：
      GET /?say=Hi&to=Mom HTTP/2.0
 Host: foo.com
      
-
      注意：你可以在GitHub 上看到本例子——见 get-method.html (预览版).
      
+
      注意：你可以在 GitHub 上看到本例子——见 get-method.html (预览版).
      
 
      POST 方法
      
 
-
      POST方法略有不同。这是浏览器在询问响应时使用与服务器通信的方法，该响应考虑了HTTP请求正文中提供的数据:“嘿，服务器，看一下这些数据，然后给我回一个适当的结果。”如果使用该方法发送表单，则将数据追加到HTTP请求的主体中。
      
+
      POST方法略有不同。这是浏览器在询问响应时使用与服务器通信的方法，该响应考虑了 HTTP 请求正文中提供的数据:“嘿，服务器，看一下这些数据，然后给我回一个适当的结果。”如果使用该方法发送表单，则将数据追加到 HTTP 请求的主体中。
      让我们来看一个例子，这是我们在上面的GET部分中所看到的相同的形式，但是使用{{htmlattrxref("method","form")}}属性设置为post。
      
 
@@ -141,7 +141,7 @@ 
      POST 方法
      
   </div>
 </form>
 
-
      当使用POST方法提交表单时，没有数据会附加到URL，HTTP请求看起来是这样的，而请求主体中包含的数据是这样的：
      
+
      当使用POST方法提交表单时，没有数据会附加到 URL，HTTP 请求看起来是这样的，而请求主体中包含的数据是这样的：
      POST / HTTP/2.0
 Host: foo.com
@@ -156,9 +156,9 @@ 
      POST 方法
      
 
      注意：你可以在 GitHub 上看到本例—— 见 post-method.html (预览版).
      
 
 
-
      查看HTTP请求
      
+
      查看 HTTP 请求
      
 
-
      HTTP请求永远不会显示给用户(如果您想要看到它们，您需要使用诸如Firefox Network Monitor或Chrome Developer Tools之类的工具)。例如，您的表单数据将显示在Chrome网络选项卡中：
      
+
      HTTP 请求永远不会显示给用户 (如果您想要看到它们，您需要使用诸如Firefox Network Monitor或Chrome Developer Tools之类的工具)。例如，您的表单数据将显示在 Chrome 网络选项卡中：
      
 
 
        
  
      1. 按下 F12
        2. 
@@ -172,18 +172,18 @@ 
        查看HTTP请求
        
 
 
        
 
-
        唯一显示给用户的是被调用的URL。正如我们上面提到的，使用GET请求用户将在他们的URL栏中看到数据，但是使用POST请求用户将不会看到。这一点很重要，有两个原因：
        
+
        唯一显示给用户的是被调用的 URL。正如我们上面提到的，使用GET请求用户将在他们的 URL 栏中看到数据，但是使用POST请求用户将不会看到。这一点很重要，有两个原因：
        
 
 
          
- 
        1. 如果您需要发送一个密码(或其他敏感数据)，永远不要使用GET方法否则数据会在URL栏中显示，这将非常不安全。
          2. 
- 
        2. 如果您需要发送大量的数据，那么POST方法是首选的，因为一些浏览器限制了URL的大小。此外，许多服务器限制它们接受的URL的长度。
          3. 
+ 
        3. 如果您需要发送一个密码 (或其他敏感数据)，永远不要使用GET方法否则数据会在 URL 栏中显示，这将非常不安全。
          4. 
+ 
        4. 如果您需要发送大量的数据，那么POST方法是首选的，因为一些浏览器限制了 URL 的大小。此外，许多服务器限制它们接受的 URL 的长度。
          5. 
 
        
 
-
        在服务器端:检索数据
        
+
        在服务器端：检索数据
        
 
-
        无论选择哪种HTTP方法，服务器都会接收一个字符串并解析，以便将数据作为键/值对序列获取。您访问这个序列的方式取决于您使用的开发平台以及您可能使用的任何特定框架。您使用的技术也决定了如何处理密钥副本；通常，最近收到的密钥的值是优先的。
        
+
        无论选择哪种 HTTP 方法，服务器都会接收一个字符串并解析，以便将数据作为键/值对序列获取。您访问这个序列的方式取决于您使用的开发平台以及您可能使用的任何特定框架。您使用的技术也决定了如何处理密钥副本；通常，最近收到的密钥的值是优先的。
        
 
-
        例如：原始PHP
        
+
        例如：原始 PHP
        
 
 
        PHP提供了一些全局对象来访问数据。假设您已经使用了POST方法，那么下面的示例将获取数据并将其显示给用户。当然，你对数据的处理取决于你自己。您可以显示它，将它存储到数据库中，通过电子邮件发送它，或者以其他方式处理它。
        
 
@@ -196,18 +196,18 @@ 
        例如：原始PHP
        
   echo  $say, ' ', $to;
 ?>
      
 
-
      这个例子显示了一个带有我们发送的数据的页面。您可以在我们的示例php-example.html中看到这一点——该文件包含与我们之前看到的相同的示例表单，它使用了post的method和php-example.php的action。当提交时，它将表单数据发送到php-example.php，其中包含了上述代码块中所见的php代码。当执行此代码时，浏览器中的输出是Hi Mom。
      
+
      这个例子显示了一个带有我们发送的数据的页面。您可以在我们的示例php-example.html中看到这一点——该文件包含与我们之前看到的相同的示例表单，它使用了post的method和php-example.php的action。当提交时，它将表单数据发送到php-example.php，其中包含了上述代码块中所见的 php 代码。当执行此代码时，浏览器中的输出是Hi Mom。
      
-
      注意：当您将本例加载到本地浏览器中时，这个示例将无法工作---浏览器无法解析PHP代码，因此当提交表单时，浏览器只会为您提供下载PHP文件。为了让它生效，您需要通过某种类型的PHP服务器运行这个示例。本地PHP测试的好选择有MAMP(Mac和Windows)和AMPPS(Mac、Windows、Linux)。
      
+
      注意：当您将本例加载到本地浏览器中时，这个示例将无法工作---浏览器无法解析 PHP 代码，因此当提交表单时，浏览器只会为您提供下载 PHP 文件。为了让它生效，您需要通过某种类型的 PHP 服务器运行这个示例。本地 PHP 测试的好选择有MAMP(Mac 和 Windows) 和AMPPS(Mac、Windows、Linux)。
      
 
      
 
-
      例子： Python
      
+
      例子：Python
      
 
-
      这个例子展示了如何使用Python完成同样的事情——在web页面上显示提交的数据。
      
- 这将使用Flask framework来呈现模板、处理表单数据提交等(参见python-example.py)。
      
+
      这个例子展示了如何使用 Python 完成同样的事情——在 web 页面上显示提交的数据。
      
+ 这将使用Flask framework来呈现模板、处理表单数据提交等 (参见python-example.py)。
      from flask import Flask, render_template, request
 app = Flask(__name__)
@@ -226,13 +226,13 @@ 
      例子： Python
      
 
      以上代码中引用的两个模板如下：
      
 
 
        
- 
      • form.html: 与我们在 POST 方法 小节中看到的相同的表单，但是将action设置为\{{ url_for('hello') }}。(这是一个Jinja2模板，它基本上是HTML，但是可以包含对运行包含在花括号中的web服务器的Python代码的调用。url_for('hello')基本上是在“提交表单时重定向到/hello”。
        • 
+ 
      • form.html: 与我们在 POST 方法 小节中看到的相同的表单，但是将action设置为\{{ url_for('hello') }}。(这是一个Jinja2模板，它基本上是 HTML，但是可以包含对运行包含在花括号中的 web 服务器的 Python 代码的调用。url_for('hello')基本上是在“提交表单时重定向到/hello”。
        • 
  
      • greeting.html: 这个模板只包含一行，用于呈现渲染时传递给它的两个数据块。
        
-  这是通过前面所见的hello()函数完成的，该函数在/helloURL被导向时运行。
        • 
+  这是通过前面所见的hello()函数完成的，该函数在/helloURL 被导向时运行。
 
      
 
 
      
-
      注意：同样，如果您只是尝试将其直接加载到浏览器中，那么这段代码将无法工作。Python的工作方式与PHP略有不同——要在本地运行此代码，您需要安装Python/pip，然后使用pip3 install flask安装Flask。此时，您应该能够使用python3 python-example.py来运行这个示例，然后在浏览器中导航到localhost:5000。
      
+
      注意：同样，如果您只是尝试将其直接加载到浏览器中，那么这段代码将无法工作。Python 的工作方式与 PHP 略有不同——要在本地运行此代码，您需要安装Python/pip，然后使用pip3 install flask安装 Flask。此时，您应该能够使用python3 python-example.py来运行这个示例，然后在浏览器中导航到localhost:5000。
      
 
      
 
 
      其他语言和框架
      
@@ -240,7 +240,7 @@ 
      其他语言和框架
      
 
      还有许多其他的服务器端技术可以用于表单处理，包括Perl、Java、 .Net、Ruby等。只挑你最喜欢的用就好。话虽如此，但值得注意的是，直接使用这些技术并不常见，因为这可能很棘手。更常见的是使用许多优秀的框架，这些框架使处理表单变得更容易，例如：
      
 
 
        
- 
      • Django for Python （比Flask要重量级一些，但是有更多的工具和选项。）
        • 
+ 
      • Django for Python（比Flask要重量级一些，但是有更多的工具和选项。）
        • 
  
      • Express for Node.js
        • 
  
      • Laravel for PHP
        • 
  
      • Ruby On Rails for Ruby
        • 
@@ -253,18 +253,18 @@ 
        其他语言和框架
        
 
        注意：向您介绍任何服务器端语言或框架超出了本文的范围。如果你想要学习这些它们，上面的链接会给你一些帮助。
        
 
 
-
        特殊案例:发送文件
        
+
        特殊案例：发送文件
        
 
-
        用HTML表单发送文件是一个特殊的例子。文件是二进制数据——或者被认为是这样的——而所有其他数据都是文本数据。由于HTTP是一种文本协议，所以处理二进制数据有特殊的要求。
        
+
        用 HTML 表单发送文件是一个特殊的例子。文件是二进制数据——或者被认为是这样的——而所有其他数据都是文本数据。由于 HTTP 是一种文本协议，所以处理二进制数据有特殊的要求。
        
 
 
        {{htmlattrxref("enctype","form")}} 属性
        
 
-
        该属性允许您指定在提交表单时所生成的请求中的Content-Type的HTTP数据头的值。这个数据头非常重要，因为它告诉服务器正在发送什么样的数据。默认情况下，它的值是application/x-www-form-urlencoded。它的意思是：“这是已编码为URL参数的表单数据。”
        
+
        该属性允许您指定在提交表单时所生成的请求中的Content-Type的 HTTP 数据头的值。这个数据头非常重要，因为它告诉服务器正在发送什么样的数据。默认情况下，它的值是application/x-www-form-urlencoded。它的意思是：“这是已编码为 URL 参数的表单数据。”
        
 
 
        如果你想要发送文件，你需要额外的三个步骤：
        
 
 
          
- 
        • 将{{htmlattrxref("method","form")}}属性设置为POST，因为文件内容不能放入URL参数中。
          • 
+ 
        • 将{{htmlattrxref("method","form")}}属性设置为POST，因为文件内容不能放入 URL 参数中。
          • 
  
        • 将{{htmlattrxref("enctype","form")}}的值设置为multipart/form-data，因为数据将被分成多个部分，每个文件单独占用一个部分，表单正文中包含的文本数据（如果文本也输入到表单中）占用一个部分。
          • 
  
        • 包含一个或多个File picker小部件，允许用户选择将要上传的文件。
          • 
 
        
@@ -286,49 +286,49 @@ 
        {{htmlattrxref("enctype","form")}} 属
 
 
 
        
-
        警告：为了防止滥用，许多服务器配置了文件和HTTP请求的大小限制。在发送文件之前，先检查服务器管理员的权限是很重要的。
        
+
        警告：为了防止滥用，许多服务器配置了文件和 HTTP 请求的大小限制。在发送文件之前，先检查服务器管理员的权限是很重要的。
        
 
        
 
 
        常见的安全问题
        
 
-
        每次向服务器发送数据时，都需要考虑安全性。到目前为止，HTML表单是最常见的攻击路径(可能发生攻击的地方)。这些问题从来都不是来自HTML表单本身，它们来自于服务器如何处理数据。
        
+
        每次向服务器发送数据时，都需要考虑安全性。到目前为止，HTML 表单是最常见的攻击路径 (可能发生攻击的地方)。这些问题从来都不是来自 HTML 表单本身，它们来自于服务器如何处理数据。
        
 
 
        根据你所做的事情，你会遇到一些非常有名的安全问题：
        
 
 
        XSS 和 CSRF
        
 
-
        跨站脚本(XSS)和跨站点请求伪造(CSRF)是常见的攻击类型，它们发生在当您将用户发送的数据显示给这个用户或另一个用户时。
        
+
        跨站脚本 (XSS) 和跨站点请求伪造 (CSRF) 是常见的攻击类型，它们发生在当您将用户发送的数据显示给这个用户或另一个用户时。
        
 
-
        XSS允许攻击者将客户端脚本注入到其他用户查看的Web页面中。攻击者可以使用跨站点脚本攻击的漏洞来绕过诸如同源策略之类的访问控制。这些攻击的影响可能从一个小麻烦到一个重大的安全风险。
        
+
        XSS 允许攻击者将客户端脚本注入到其他用户查看的 Web 页面中。攻击者可以使用跨站点脚本攻击的漏洞来绕过诸如同源策略之类的访问控制。这些攻击的影响可能从一个小麻烦到一个重大的安全风险。
        
 
-
        CSRF攻击类似于XSS攻击，因为它们以相同的方式开始攻击——向Web页面中注入客户端脚本——但它们的目标是不同的。CSRF攻击者试图将权限升级到特权用户(比如站点管理员)的级别，以执行他们不应该执行的操作(例如，将数据发送给一个不受信任的用户)。
        
+
        CSRF 攻击类似于 XSS 攻击，因为它们以相同的方式开始攻击——向 Web 页面中注入客户端脚本——但它们的目标是不同的。CSRF 攻击者试图将权限升级到特权用户 (比如站点管理员) 的级别，以执行他们不应该执行的操作 (例如，将数据发送给一个不受信任的用户)。
        
 
-
        XSS攻击利用用户对web站点的信任，而CSRF攻击则利用网站对其用户的信任。
        
+
        XSS 攻击利用用户对 web 站点的信任，而 CSRF 攻击则利用网站对其用户的信任。
        
 
-
        为了防止这些攻击，您应该始终检查用户发送给服务器的数据(如果需要显示)，尽量不要显示用户提供的HTML内容。相反，您应该对用户提供的数据进行处理，这样您就不会逐字地显示它。当今市场上几乎所有的框架都实现了一个最小的过滤器，它可以从任何用户发送的数据中删除HTML{{HTMLElement("script")}}、{{HTMLElement("iframe")}} 和{{HTMLElement("object")}} 元素。这有助于降低风险，但并不一定会消除风险。
        
+
        为了防止这些攻击，您应该始终检查用户发送给服务器的数据 (如果需要显示)，尽量不要显示用户提供的 HTML 内容。相反，您应该对用户提供的数据进行处理，这样您就不会逐字地显示它。当今市场上几乎所有的框架都实现了一个最小的过滤器，它可以从任何用户发送的数据中删除 HTML{{HTMLElement("script")}}、{{HTMLElement("iframe")}} 和{{HTMLElement("object")}} 元素。这有助于降低风险，但并不一定会消除风险。
        
 
-
        SQL注入
        
+
        SQL 注入
        
 
-
        SQL 注入是一种试图在目标web站点使用的数据库上执行操作的攻击类型。这通常包括发送一个SQL请求，希望服务器能够执行它（通常发生在应用服务器试图存储由用户发送的数据时）。这实际上是攻击网站的主要途径之一。 
        
+
        SQL 注入是一种试图在目标 web 站点使用的数据库上执行操作的攻击类型。这通常包括发送一个 SQL 请求，希望服务器能够执行它（通常发生在应用服务器试图存储由用户发送的数据时）。这实际上是攻击网站的主要途径之一。 
        
 
-
        其后果可能是可怕的，从数据丢失到通过使用特权升级控制整个网站基础设施的攻击。这是一个非常严重的威胁，您永远不应该存储用户发送的数据，而不执行一些清理工作(例如，在php/mysql基础设施上使用mysql_real_escape_string()。
        
+
        其后果可能是可怕的，从数据丢失到通过使用特权升级控制整个网站基础设施的攻击。这是一个非常严重的威胁，您永远不应该存储用户发送的数据，而不执行一些清理工作 (例如，在 php/mysql 基础设施上使用mysql_real_escape_string()。
        
 
-
        HTTP数据头注入和电子邮件注入
        
+
        HTTP 数据头注入和电子邮件注入
        
 
-
        这种类型的攻击出现在当您的应用程序基于表单上用户的数据输入构建HTTP头部或电子邮件时。这些不会直接损害您的服务器或影响您的用户，但它们会引发一个更深入的问题，例如会话劫持或网络钓鱼攻击。
        
+
        这种类型的攻击出现在当您的应用程序基于表单上用户的数据输入构建 HTTP 头部或电子邮件时。这些不会直接损害您的服务器或影响您的用户，但它们会引发一个更深入的问题，例如会话劫持或网络钓鱼攻击。
        
 
 
        这些攻击大多是无声的，并且可以将您的服务器变成僵尸。
        
 
-
        偏执:永远不要相信你的用户
        
+
        偏执：永远不要相信你的用户
        
 
-
        那么，你如何应对这些威胁呢?这是一个远远超出本指南的主题，不过有一些规则需要牢记。最重要的原则是:永远不要相信你的用户，包括你自己；即使是一个值得信赖的用户也可能被劫持。
        
+
        那么，你如何应对这些威胁呢？这是一个远远超出本指南的主题，不过有一些规则需要牢记。最重要的原则是：永远不要相信你的用户，包括你自己；即使是一个值得信赖的用户也可能被劫持。
        
 
 
        所有到达服务器的数据都必须经过检查和消毒。总是这样。没有例外。
        
 
 
          
  
        • 远离有潜在危险的字符转义。应该如何谨慎使用的特定字符取决于所使用的数据的上下文和所使用的服务器平台，但是所有的服务器端语言都有相应的功能。
          • 
  
        • 限制输入的数据量，只允许有必要的数据。
          • 
- 
        • 沙箱上传文件(将它们存储在不同的服务器上，只允许通过不同的子域访问文件，或者通过完全不同的域名访问文件更好)。
          • 
+ 
        • 沙箱上传文件 (将它们存储在不同的服务器上，只允许通过不同的子域访问文件，或者通过完全不同的域名访问文件更好)。
          • 
 
        
 
 
        如果你遵循这三条规则，你应该避免很多问题，但是如果你想要得到一个有能力的第三方执行的安全检查，这是一个好主意。不要以为你已经看到了所有可能的问题。
        
@@ -343,7 +343,7 @@ 
        结论
        
 
 
        相关链接
        
 
-
        如果您想了解更多关于保护web应用程序的信息，您可以深入了解这些资源：
        
+
        如果您想了解更多关于保护 web 应用程序的信息，您可以深入了解这些资源：
        
 
 
          
  
        • Server-side website programming first steps
          • 
diff --git a/files/zh-cn/learn/forms/sending_forms_through_javascript/index.html b/files/zh-cn/learn/forms/sending_forms_through_javascript/index.html
index 217f17da1816e3..e7763ceb36175a 100644
--- a/files/zh-cn/learn/forms/sending_forms_through_javascript/index.html
+++ b/files/zh-cn/learn/forms/sending_forms_through_javascript/index.html
@@ -3,7 +3,7 @@
 slug: Learn/Forms/Sending_forms_through_JavaScript
 tags:
   - HTML
-  - HTML表单
+  - HTML 表单
   - JavaScript
   - Web 表单
   - 示例
@@ -14,55 +14,55 @@
 ---
 
          {{LearnSidebar}}{{PreviousMenuNext("Learn/HTML/Forms/How_to_build_custom_form_widgets", "Learn/HTML/Forms/HTML_forms_in_legacy_browsers", "Learn/HTML/Forms")}}
          
 
-
          正如在前面的文章中讲到的，HTML 表单可以声明式地发送一个 HTTP 请求。 但也可以通过 JavaScript 来为表单准备用于发送的 HTTP 请求。 本文探讨如何做到这一点。
          
+
          正如在前面的文章中讲到的，HTML 表单可以声明式地发送一个 HTTP 请求。但也可以通过 JavaScript 来为表单准备用于发送的 HTTP 请求。本文探讨如何做到这一点。
          
 
 
          表单不总是表单
          
 
-
          在开放式Web应用程序中，使用 HTML form 而不是文字表单让人们来填写变得越来越普遍了 — 越来越多的开发人员正致力于控制传输数据。
          
+
          在开放式 Web 应用程序中，使用 HTML form 而不是文字表单让人们来填写变得越来越普遍了 — 越来越多的开发人员正致力于控制传输数据。
          
 
 
          获得整体界面的控制
          
 
-
          标准的 HTML 表单提交会加载数据要发送到的URL，这意味着浏览器窗口以整页加载进行导航。 可以通过隐藏闪烁和网络滞后来避免整页加载以提供更平滑的体验。
          
+
          标准的 HTML 表单提交会加载数据要发送到的 URL，这意味着浏览器窗口以整页加载进行导航。可以通过隐藏闪烁和网络滞后来避免整页加载以提供更平滑的体验。
          
 
-
          许多现代用户界面只使用HTML表单来收集用户的输入。 当用户尝试发送数据时，应用程序将在后台采取控制并且异步地传输数据，只更新UI中需要更改的部分。
          
+
          许多现代用户界面只使用 HTML 表单来收集用户的输入。当用户尝试发送数据时，应用程序将在后台采取控制并且异步地传输数据，只更新 UI 中需要更改的部分。
          
 
 
          异步地发送任何数据被称为 AJAX，它代表 "Asynchronous JavaScript And XML"。
          
 
-
          表单提交和 AJAX 请求之间的区别?
          
+
          表单提交和 AJAX 请求之间的区别？
          
 
 
          AJAX 技术主要依靠 {{domxref("XMLHttpRequest")}} (XHR) DOM 对象。它可以构造 HTTP 请求、发送它们，并获取请求结果。
          
 
 
          
-
          注意: 老旧的 AJAX 技术可能不依赖 {{domxref("XMLHttpRequest")}}。例如 JSONP 加 eval() 函数。这也行得通，但是有严重的安全问题，不推荐使用它。使用它的唯一原因是为了不支持 {{domxref("XMLHttpRequest")}} 或 JSON的过时浏览器；但是那些浏览器实在是太古老了！避免使用这种技术。
          
+
          注意： 老旧的 AJAX 技术可能不依赖 {{domxref("XMLHttpRequest")}}。例如 JSONP 加 eval() 函数。这也行得通，但是有严重的安全问题，不推荐使用它。使用它的唯一原因是为了不支持 {{domxref("XMLHttpRequest")}} 或 JSON的过时浏览器；但是那些浏览器实在是太古老了！避免使用这种技术。
          
 
          
 
-
          创建之初, {{domxref("XMLHttpRequest")}} 被设计用来将 XML 作为传输数据的格式获取和发送。不过，如今 JSON 已经取代了 XML，而且要常用的多，无论这是不是一件好事。
          
+
          创建之初，{{domxref("XMLHttpRequest")}} 被设计用来将 XML 作为传输数据的格式获取和发送。不过，如今 JSON 已经取代了 XML，而且要常用的多，无论这是不是一件好事。
          
 
-
          但是 XML 和 JSON 都不适合对表单数据请求编码。 表单数据（application/x-www-form-urlencoded）由 URL编码的键/值对列表组成。为了传输二进制数据，HTTP请求被重新整合成multipart/form-data形式。
          
+
          但是 XML 和 JSON 都不适合对表单数据请求编码。表单数据（application/x-www-form-urlencoded）由 URL编码的键/值对列表组成。为了传输二进制数据，HTTP请求被重新整合成multipart/form-data形式。
          
 
-
          如果您控制前端（在浏览器中执行的代码）和后端（在服务器上执行的代码），则可以发送JSON / XML并根据需要处理它们。
          
+
          如果您控制前端（在浏览器中执行的代码）和后端（在服务器上执行的代码），则可以发送 JSON / XML 并根据需要处理它们。
          
 
-
          但是，如果你想使用第三方服务，没有那么简单。 有些服务只接受表单数据。 也有使用表单数据更简单的情况。 如果数据是键/值对，或是原始二进制数据，以现有的后端工具不需要额外的代码就可以处理它。
          
+
          但是，如果你想使用第三方服务，没有那么简单。有些服务只接受表单数据。也有使用表单数据更简单的情况。如果数据是键/值对，或是原始二进制数据，以现有的后端工具不需要额外的代码就可以处理它。
          
 
 
          那么如何发送这样的数据呢？
          
 
 
          发送表单数据
          
 
-
          一共有三种方式来发送表单数据：包括两种传统的方法和一种利用 {{domxref("XMLHttpRequest/FormData","formData")}}对象的新方法.让我们仔细看一下:
          
+
          一共有三种方式来发送表单数据：包括两种传统的方法和一种利用 {{domxref("XMLHttpRequest/FormData","formData")}}对象的新方法。让我们仔细看一下：
          
 
 
          构建 XMLHttpRequest
          
 
-
          {{domxref("XMLHttpRequest")}} 是进行 HTTP 请求的最安全和最可靠的方式。 要使用{{domxref("XMLHttpRequest")}}发送表单数据，请通过对其进行URL编码来准备数据，并遵守表单数据请求的具体细节。
          
+
          {{domxref("XMLHttpRequest")}} 是进行 HTTP 请求的最安全和最可靠的方式。要使用{{domxref("XMLHttpRequest")}}发送表单数据，请通过对其进行 URL 编码来准备数据，并遵守表单数据请求的具体细节。
          
 
 
          
-
          备注：如果想要了解更多关于 XMLHttpRequest 的知识，你可能会对两篇文章感兴趣:An introductory article to AJAX 和更高级点的using XMLHttpRequest.
          
+
          备注：如果想要了解更多关于 XMLHttpRequest 的知识，你可能会对两篇文章感兴趣：An introductory article to AJAX 和更高级点的using XMLHttpRequest.
          
 
          
 
-
          让我们重建之前的这个例子:
          
+
          让我们重建之前的这个例子：
          
 
 
          <button type="button" onclick="sendData({test:'ok'})">点击我！</button>
          
 
-
          正如你所看到的，HTML实际上没什么改变。 不过，JavaScript变得截然不同了：
          
+
          正如你所看到的，HTML 实际上没什么改变。不过，JavaScript 变得截然不同了：
          
 
 
          function sendData(data) {
   var XHR = new XMLHttpRequest();
@@ -81,7 +81,7 @@ 
          构建 XMLHttpRequest
          
 
   // 定义成功数据提交时发生的情况
   XHR.addEventListener('load', function(event) {
-    alert('耶! 已发送数据并加载响应。');
+    alert('耶！已发送数据并加载响应。');
   });
 
   // 定义错误提示
@@ -92,7 +92,7 @@ 
          构建 XMLHttpRequest
          
   // 建立我们的请求
   XHR.open('POST', 'https://example.com/cors.php');
 
-  // 为表单数据POST请求添加所需的HTTP头
+  // 为表单数据 POST 请求添加所需的 HTTP 头
   XHR.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
 
   // 最后，发送我们的数据。
@@ -104,14 +104,14 @@ 
          构建 XMLHttpRequest
          
 
          {{EmbedLiveSample("构建_xmlhttprequest", "100%", 50)}}
          
 
 
          
-
          注: 当你想要往第三方网站传输数据时，使用{{domxref("XMLHttpRequest")}}会受到同源策略的影响。如果你需要执行跨域请求,你需要熟悉一下CORS和HTTP访问控制.
          
+
          注： 当你想要往第三方网站传输数据时，使用{{domxref("XMLHttpRequest")}}会受到同源策略的影响。如果你需要执行跨域请求，你需要熟悉一下CORS 和 HTTP 访问控制.
          
 
          
 
 
          使用 XMLHttpRequest 和 the FormData object（表单数据对象）
          
 
-
          手动建立一个 HTTP 请求非常困难。 幸运的是，最近的 XMLHttpRequest 规范提供了一种方便简单的方法 — 利用{{domxref("XMLHttpRequest/FormData","FormData")}}对象来处理表单数据请求。
          
+
          手动建立一个 HTTP 请求非常困难。幸运的是，最近的 XMLHttpRequest 规范提供了一种方便简单的方法 — 利用{{domxref("XMLHttpRequest/FormData","FormData")}}对象来处理表单数据请求。
          
 
-
          {{domxref("XMLHttpRequest/FormData","FormData")}} 对象可以用来构建用于传输的表单数据，或是获取表单元素中的数据来管理它的发送方式。 请注意，{{domxref("XMLHttpRequest/FormData","FormData")}} 对象是“只写”的，这意味着您可以更改它们，但不能检索其内容。
          
+
          {{domxref("XMLHttpRequest/FormData","FormData")}} 对象可以用来构建用于传输的表单数据，或是获取表单元素中的数据来管理它的发送方式。请注意，{{domxref("XMLHttpRequest/FormData","FormData")}} 对象是“只写”的，这意味着您可以更改它们，但不能检索其内容。
          
 
 
          使用这个对象在Using FormData Objects中有详细的介绍，不过这里有两个例子：
          
 
@@ -119,13 +119,13 @@ 
          使用一个独立的 FormData 
 
 
          <button type="button" onclick="sendData({test:'ok'})">点我！</button>
          
 
-
          你应该会觉得那个HTML示例很熟悉。
          
+
          你应该会觉得那个 HTML 示例很熟悉。
          
 
 
          function sendData(data) {
   var XHR = new XMLHttpRequest();
   var FD  = new FormData();
 
-  // 把我们的数据添加到这个FormData对象中
+  // 把我们的数据添加到这个 FormData 对象中
   for(name in data) {
     FD.append(name, data[name]);
   }
@@ -143,7 +143,7 @@ 
          使用一个独立的 FormData 
   // 设置请求地址和方法
   XHR.open('POST', 'https://example.com/cors.php');
 
-  // 发送这个formData对象,HTTP请求头会自动设置
+  // 发送这个 formData 对象，HTTP 请求头会自动设置
   XHR.send(FD);
 }
          
 
@@ -155,7 +155,7 @@ 
          使用绑定到表单元素
 
 
          你也可以把一个 FormData 对象绑定到一个 {{HTMLElement("form")}} 元素上。这会创建一个代表表单中包含元素的 FormData 。
          
 
-
          这段HTML是典型的情况：
          
+
          这段 HTML 是典型的情况：
          
 
 
          <form id="myForm">
   <label for="myName">告诉我你的名字：</label>
@@ -206,32 +206,32 @@ 
          使用绑定到表单元素
 
 
          你甚至可以通过使用表单的{{domxref("HTMLFormElement.elements", "elements")}} 属性来更多的参与此过程，来得到一个包含表单里所有数据元素的列表，并且逐一手动管理他们。想了解更多，请参阅这里的例子：{{SectionOnPage("/en-US/docs/Web/API/HTMLFormElement.elements", "Accessing the element list's contents")}}
          
 
-
          在隐藏的iframe中构建DOM
          
+
          在隐藏的 iframe 中构建 DOM
          
 
-
          最古老的异步发送表单数据方法是用 DOM API 构建表单，然后将其数据发送到隐藏的 {{HTMLElement("iframe")}}。 要获得提交的结果，请获取{{HTMLElement("iframe")}}的内容。
          
+
          最古老的异步发送表单数据方法是用 DOM API 构建表单，然后将其数据发送到隐藏的 {{HTMLElement("iframe")}}。要获得提交的结果，请获取{{HTMLElement("iframe")}}的内容。
          
 
 
          
-
          警告：不要使用这项技术。有第三方服务的安全风险，因为它会使你暴露在 脚本注入攻击 中. 如果你使用 HTTPS，它会影响 同源策略, 这可以使 {{HTMLElement("iframe")}} 内容无法访问。然而，该方法可能是你需要支持很古老的浏览器的唯一选择。
          
+
          警告：不要使用这项技术。有第三方服务的安全风险，因为它会使你暴露在 脚本注入攻击 中。如果你使用 HTTPS，它会影响 同源策略, 这可以使 {{HTMLElement("iframe")}} 内容无法访问。然而，该方法可能是你需要支持很古老的浏览器的唯一选择。
          
 
          
 
-
          下面是个简单的例子:
          
+
          下面是个简单的例子：
          
 
 
          <button onclick="sendData({test:'ok'})">点击我！</button>
          
 
-
          所有操作都在下面这段脚本里:
          
+
          所有操作都在下面这段脚本里：
          
 
-
          // 首先创建一个用来发送数据的iframe.
+
          // 首先创建一个用来发送数据的 iframe.
 var iframe = document.createElement("iframe");
 iframe.name = "myTarget";
 
-// 然后，将iframe附加到主文档
+// 然后，将 iframe 附加到主文档
 window.addEventListener("load", function () {
   iframe.style.display = "none";
   document.body.appendChild(iframe);
 });
 
-// 下面这个函数是真正用来发送数据的.
-// 它只有一个参数,一个由键值对填充的对象.
+// 下面这个函数是真正用来发送数据的。
+// 它只有一个参数，一个由键值对填充的对象。
 function sendData(data) {
   var name,
       form = document.createElement("form"),
@@ -263,17 +263,17 @@ 
          在隐藏的iframe中构建DOM
          
 
 
          在线演示：
          
 
-
          {{EmbedLiveSample("在隐藏的iframe中构建DOM", "100%", 50)}}
          
+
          {{EmbedLiveSample("在隐藏的 iframe 中构建 DOM", "100%", 50)}}
          
 
 
          处理二进制数据
          
 
 
          如果你使用一个含有 <input type="file"> 组件的表格的 {{domxref("XMLHttpRequest/FormData","FormData")}} 对象，传给代码的数据会被自动处理。但是要手动发送二进制数据的话，还有额外的工作要做。
          
 
-
          在现代网络上，二进制数据有很多来源：例如{{domxref("FileReader")}} API、{{domxref("HTMLCanvasElement","Canvas")}} API、WebRTC API，等等。不幸的是，一些过时的浏览器无法访问二进制数据，或是需要非常复杂的工作环境。这些遗留问题已经超出了本文的涵盖范围。如果你想了解更多关于 FileReader API的知识，参阅：如何在web应用程序中使用文件。
          
+
          在现代网络上，二进制数据有很多来源：例如{{domxref("FileReader")}} API、{{domxref("HTMLCanvasElement","Canvas")}} API、WebRTC API，等等。不幸的是，一些过时的浏览器无法访问二进制数据，或是需要非常复杂的工作环境。这些遗留问题已经超出了本文的涵盖范围。如果你想了解更多关于 FileReader API 的知识，参阅：如何在 web 应用程序中使用文件。
          
 
 
          在 {{domxref("XMLHttpRequest/FormData","formData")}} 的帮助下，发送二进制数据非常简单，使用 append() 方法就可以了。如果你必须手动进行，那确实会有一些棘手。
          
 
-
          在下面的例子中，我们使用了{{domxref("FileReader")}} API来访问二进制数据，然后手动构建多重表单数据请求：
          
+
          在下面的例子中，我们使用了{{domxref("FileReader")}} API 来访问二进制数据，然后手动构建多重表单数据请求：
          
 
 
          <form id="myForm">
   <p>
@@ -289,8 +289,8 @@ 
          处理二进制数据
          
 
 
          如你所见，这个 HTML 只是一个标准的 <form>。没有什么神奇的事情发生。“魔法”都在 JavaScript 里：
          
 
-
          // 因为我们想获取 DOM 节点,
-// 我们在页面加载时初始化我们的脚本.
+
          // 因为我们想获取 DOM 节点，
+// 我们在页面加载时初始化我们的脚本。
 window.addEventListener('load', function () {
 
   // 这些变量用于存储表单数据
@@ -303,12 +303,12 @@ 
          处理二进制数据
          
   // 使用 FileReader API 获取文件内容
   var reader = new FileReader();
 
-  // 因为 FileReader 是异步的, 会在完成读取文件时存储结果
+  // 因为 FileReader 是异步的，会在完成读取文件时存储结果
   reader.addEventListener("load", function () {
     file.binary = reader.result;
   });
 
-  // 页面加载时, 如果一个文件已经被选择, 那么读取该文件.
+  // 页面加载时，如果一个文件已经被选择，那么读取该文件。
   if(file.dom.files[0]) {
     reader.readAsBinaryString(file.dom.files[0]);
   }
@@ -325,14 +325,14 @@ 
          处理二进制数据
          
   // 发送数据是我们需要的主要功能
   function sendData() {
     // 如果存在被选择的文件，等待它读取完成
-    // 如果没有, 延迟函数的执行
+    // 如果没有，延迟函数的执行
     if(!file.binary && file.dom.files.length > 0) {
       setTimeout(sendData, 10);
       return;
     }
 
-    // 要构建我们的多重表单数据请求,
-    // 我们需要一个XMLHttpRequest 实例
+    // 要构建我们的多重表单数据请求，
+    // 我们需要一个 XMLHttpRequest 实例
     var XHR = new XMLHttpRequest();
 
     // 我们需要一个分隔符来定义请求的每一部分。
@@ -352,7 +352,7 @@ 
          处理二进制数据
          
             + 'name="'         + file.dom.name          + '"; '
       // 提供文件的真实名字
             + 'filename="'     + file.dom.files[0].name + '"\r\n';
-      // 和文件的MIME类型
+      // 和文件的 MIME 类型
       data += 'Content-Type: ' + file.dom.files[0].type + '\r\n';
 
       // 元数据和数据之间有一条空行。
@@ -390,7 +390,7 @@ 
          处理二进制数据
          
     // 建立请求
     XHR.open('POST', 'https://example.com/cors.php');
 
-    // 添加需要的HTTP头部来处理多重表单数据POST请求
+    // 添加需要的 HTTP 头部来处理多重表单数据 POST 请求
     XHR.setRequestHeader('Content-Type','multipart/form-data; boundary=' + boundary);
 
     // 最后，发送数据。
@@ -413,11 +413,11 @@ 
          处理二进制数据
          
 
 
          总结
          
 
-
          取决于不同的浏览器，通过 JavaScript 发送数据可能会很简单，也可能会很困难。{{domxref("XMLHttpRequest/FormData","FormData")}} 对象是通用的答案, 所以请毫不犹豫的在旧浏览器上通过polyfill使用它:
          
+
          取决于不同的浏览器，通过 JavaScript 发送数据可能会很简单，也可能会很困难。{{domxref("XMLHttpRequest/FormData","FormData")}} 对象是通用的答案，所以请毫不犹豫的在旧浏览器上通过 polyfill 使用它：
          
 
 
            
  
          • 此 gist 通过 {{domxref("Using_web_workers","Web Workers")}} polyfill 了 FormData。
            • 
- 
          • HTML5-formdata 试图 polyfill FormData 对象, 但是它需要 File API
            • 
+ 
          • HTML5-formdata 试图 polyfill FormData 对象，但是它需要 File API
            • 
  
          • 这个 polyfill 提供了 FormData 所有的大部分新方法（entries, keys, values, 以及对 for...of 的支持）
            • 
 
          
 
diff --git a/files/zh-cn/learn/forms/styling_web_forms/index.html b/files/zh-cn/learn/forms/styling_web_forms/index.html
index ce617afc4f84aa..95cd272287e426 100644
--- a/files/zh-cn/learn/forms/styling_web_forms/index.html
+++ b/files/zh-cn/learn/forms/styling_web_forms/index.html
@@ -13,21 +13,21 @@
 ---
 
          {{LearnSidebar}}{{PreviousMenuNext("Learn/HTML/Forms/HTML_forms_in_legacy_browsers", "Learn/HTML/Forms/Advanced_styling_for_HTML_forms", "Learn/HTML/Forms")}}
          
 
-
          在这篇文章中，用户将学习如何使用HTML表单和CSS以使页面更加美观。令人惊讶的是，这可能有点棘手。由于历史和技术的原因，表单部件不能很好地与CSS配合工作。 由于这些困难，许多开发人员选择构建自己的HTML小部件以获得更好的控制和视觉观感。 然而，在现代浏览器中，web设计者越来越多地控制表单元素的设计。让我们深入研究。
          
+
          在这篇文章中，用户将学习如何使用 HTML 表单和 CSS 以使页面更加美观。令人惊讶的是，这可能有点棘手。由于历史和技术的原因，表单部件不能很好地与 CSS 配合工作。由于这些困难，许多开发人员选择构建自己的 HTML 小部件以获得更好的控制和视觉观感。然而，在现代浏览器中，web 设计者越来越多地控制表单元素的设计。让我们深入研究。
          
 
-
          为什么使用CSS美化表单组件这么困难？
          
+
          为什么使用 CSS 美化表单组件这么困难？
          
 
-
          在1995年左右的Web早期，表单组件(或控件)在 HTML 2规范中被添加到HTML。由于表单组件的复杂性，实现者选择依靠底层操作系统来管理和渲染它们。
          
+
          在 1995 年左右的 Web 早期，表单组件 (或控件) 在 HTML 2 规范中被添加到 HTML。由于表单组件的复杂性，实现者选择依靠底层操作系统来管理和渲染它们。
          
 
-
          若干年后，CSS被创建出来了，那么技术上的必要性，就是使用原生组件来实现表单控制，这是因为风格的要求。在CSS的早期，表单样式控制不是优先事项。
          
+
          若干年后，CSS 被创建出来了，那么技术上的必要性，就是使用原生组件来实现表单控制，这是因为风格的要求。在 CSS 的早期，表单样式控制不是优先事项。
          
 
 
          由于用户习惯于各自平台的视觉外观，浏览器厂商不愿意对表单控件样式进行调整;到目前为止，要重建所有控件以使它们可美化仍然是非常困难的。
          
 
-
          即使在今天，仍然没有一个浏览器完全实现了CSS 2.1。然而，随着时间的推移，浏览器厂商已经改进了对表单元素的CSS支持，尽管可用性的声誉不好，但现在已经可以使用CSS来设计HTML表单。
          
+
          即使在今天，仍然没有一个浏览器完全实现了 CSS 2.1。然而，随着时间的推移，浏览器厂商已经改进了对表单元素的 CSS 支持，尽管可用性的声誉不好，但现在已经可以使用 CSS 来设计HTML 表单。
          
 
-
          涉及到CSS，并非所有组件都是平等的
          
+
          涉及到 CSS，并非所有组件都是平等的
          
 
-
          目前，在使用表单时使用CSS仍然有一些困难。这些问题可以分为三类： 
          
+
          目前，在使用表单时使用 CSS 仍然有一些困难。这些问题可以分为三类： 
          
 
 
          好的
          
 
@@ -44,25 +44,25 @@ 
          好的
          
 
 
          不好的
          
 
-
          一些元素难以被美化，并且可能需要一些复杂的技巧，偶尔需要高级的CSS3知识。
          
+
          一些元素难以被美化，并且可能需要一些复杂的技巧，偶尔需要高级的 CSS3 知识。
          
 
-
          这些包括{{HTMLElement("legend")}}元素，但不能在所有平台上正确定位。 Checkbox和radio按钮也不能直接应用样式，但是，感谢CSS3，你可以解决这个问题。{{htmlattrxref("placeholder", "input")}} 的内容不能以任何标准方式应用样式，但是实现它的所有浏览器也都实现了私有的CSS伪元素或伪类，让你可以对其定义样式。
          
+
          这些包括{{HTMLElement("legend")}}元素，但不能在所有平台上正确定位。Checkbox 和 radio 按钮也不能直接应用样式，但是，感谢 CSS3，你可以解决这个问题。{{htmlattrxref("placeholder", "input")}} 的内容不能以任何标准方式应用样式，但是实现它的所有浏览器也都实现了私有的 CSS 伪元素或伪类，让你可以对其定义样式。
          
 
 
          我们会在如何构建自定义表单挂件一文中讲述如何处理更多特定的问题。
          
 
 
          丑陋的
          
 
-
          有些元素根本不能用应用CSS样式。 这些包括：所有高级用户界面小部件，如范围，颜色或日期控件; 和所有下拉小部件，包括{{HTMLElement("select")}}, {{HTMLElement("option")}}, {{HTMLElement("optgroup")}}和{{HTMLElement("datalist")}} 元素。 文件选择器小部件也被称为不可样式化。 新的{{HTMLElement("progress")}}和{{HTMLElement("meter")}} 元素也属于这个类别。
          
+
          有些元素根本不能用应用 CSS 样式。这些包括：所有高级用户界面小部件，如范围，颜色或日期控件; 和所有下拉小部件，包括{{HTMLElement("select")}}, {{HTMLElement("option")}}, {{HTMLElement("optgroup")}}和{{HTMLElement("datalist")}} 元素。文件选择器小部件也被称为不可样式化。新的{{HTMLElement("progress")}}和{{HTMLElement("meter")}} 元素也属于这个类别。
          
 
-
          所有这些小部件的主要问题来自于它们具有非常复杂的结构，而CSS目前还不足以表达这些小部件的所有细微部分。 如果你想定制这些小部件，你必须依靠JavaScript来构建一个你能够应用样式的DOM树。我们会在 How to build custom form widgets一文中探索如何实现这一点。
          
+
          所有这些小部件的主要问题来自于它们具有非常复杂的结构，而 CSS 目前还不足以表达这些小部件的所有细微部分。如果你想定制这些小部件，你必须依靠 JavaScript 来构建一个你能够应用样式的 DOM 树。我们会在 How to build custom form widgets一文中探索如何实现这一点。
          
 
 
          基本样式美化
          
 
-
          为了使用CSS美化容易被美化的元素，你并不会碰到任何困难，因为它们的大部分行为同其他HTML元素差不多。但是，每个浏览器的用户代理样式表可能会有点不一致，所以有一些技巧可以帮助您更轻松地设计它们。
          
+
          为了使用 CSS 美化容易被美化的元素，你并不会碰到任何困难，因为它们的大部分行为同其他 HTML 元素差不多。但是，每个浏览器的用户代理样式表可能会有点不一致，所以有一些技巧可以帮助您更轻松地设计它们。
          
 
-
          Search字段
          
+
          Search 字段
          
 
-
          搜索框是唯一一种应用CSS样式有点棘手的文本字段。 在基于WebKit的浏览器（Chrome，Safari等）上，您必须使用-webkit-appearance专有属性来调整它。 我们在文章中进一步讨论这个属性：HTML表单的高级样式。
          
+
          搜索框是唯一一种应用 CSS 样式有点棘手的文本字段。在基于 WebKit 的浏览器（Chrome，Safari 等）上，您必须使用-webkit-appearance专有属性来调整它。我们在文章中进一步讨论这个属性：HTML 表单的高级样式。
          
 
 
          Example
          
 
@@ -84,22 +84,22 @@ 
          Example
          
 
 
          字体和文本
          
 
-
          CSS font和text功能能被很容易的应用到任何组件上（当然你可以在form组件上使用{{cssxref("@font-face")}} ）。然而，浏览器的行为经常不一致。默认情况下，一些组件不会从它们的父元素继承 {{cssxref("font-family")}}和 {{cssxref("font-size")}} 。相反，许多浏览器使用系统默认的字体和文本。为了让form表单的外观和其他内容保持一致，你可以在你的样式表中增加以下内容:
          
+
          CSS font 和 text 功能能被很容易的应用到任何组件上（当然你可以在 form 组件上使用{{cssxref("@font-face")}} ）。然而，浏览器的行为经常不一致。默认情况下，一些组件不会从它们的父元素继承 {{cssxref("font-family")}}和 {{cssxref("font-size")}} 。相反，许多浏览器使用系统默认的字体和文本。为了让 form 表单的外观和其他内容保持一致，你可以在你的样式表中增加以下内容：
          
 
 
          button, input, select, textarea {
   font-family : inherit;
   font-size   : 100%;
 }
          
 
-
          下面的截图显示了不同之处; 左边是Mac OS X上Firefox中元素的默认渲染，其中使用了平台的默认字体样式。 在右边是相同的元素，应用了我们的字体统一样式规则。
          
+
          下面的截图显示了不同之处; 左边是 Mac OS X 上 Firefox 中元素的默认渲染，其中使用了平台的默认字体样式。在右边是相同的元素，应用了我们的字体统一样式规则。
          
 
 
          This is a screenshot of the main form widgets on Firefox on Mac OSX, with and without font harmonization
          
 
-
          关于使用系统默认样式的表单还是使用设计用于匹配内容的自定义样式表单，有很多争议。 作为网站或Web应用程序的设计者，您可以自己做出决定。
          
+
          关于使用系统默认样式的表单还是使用设计用于匹配内容的自定义样式表单，有很多争议。作为网站或 Web 应用程序的设计者，您可以自己做出决定。
          
 
 
          盒子模型
          
 
-
          所有文本字段都完全支持与CSS盒模型相关的每个属性({{cssxref("width")}}, {{cssxref("height")}}, {{cssxref("padding")}}, {{cssxref("margin")}}, 和 {{cssxref("border")}})。 但是，像以前一样，浏览器在显示这些小部件时依赖于系统默认的样式。 您需要定义如何将其融入到您的内容中。 如果你既想保持小部件的原生外观和感觉，又想给他们一个一致的尺寸，那么你会遇到一些困难(如果你想保持组件的原生观感，又想给它们一致的大小，你会面临一些困难)。
          
+
          所有文本字段都完全支持与 CSS 盒模型相关的每个属性 ({{cssxref("width")}}, {{cssxref("height")}}, {{cssxref("padding")}}, {{cssxref("margin")}}, 和 {{cssxref("border")}})。但是，像以前一样，浏览器在显示这些小部件时依赖于系统默认的样式。您需要定义如何将其融入到您的内容中。 如果你既想保持小部件的原生外观和感觉，又想给他们一个一致的尺寸，那么你会遇到一些困难 (如果你想保持组件的原生观感，又想给它们一致的大小，你会面临一些困难)。
          
 
 
          这是因为每个小部件都有自己的边框，填充和边距的规则。 所以如果你想给几个不同的小部件相同的大小，你必须使用{{cssxref("box-sizing")}} 属性：
          
 
@@ -114,17 +114,17 @@ 
          盒子模型
          
 
 
          This is a screenshot of the main form widgets on Chrome on Windows 7, with and without the use of box-sizing.
          
 
-
          在上面的屏幕截图中，左侧的列没有{{cssxref("box-sizing")}}，而右侧的列使用了这个属性和border-box。 请注意我们是怎样确保所有元素都占用相同的空间量，尽管平台对每种窗口小部件都有默认规则。
          
+
          在上面的屏幕截图中，左侧的列没有{{cssxref("box-sizing")}}，而右侧的列使用了这个属性和border-box。请注意我们是怎样确保所有元素都占用相同的空间量，尽管平台对每种窗口小部件都有默认规则。
          
 
 
          定位（Positioning）
          
 
-
          HTML表单部件的定位通常不是问题; 但是，您应该特别注意两点：
          
+
          HTML 表单部件的定位通常不是问题; 但是，您应该特别注意两点：
          
 
 
          legend
          
 
-
          {{HTMLElement("legend")}}元素易于应用CSS，除了定位。在所有浏览器中， {{HTMLElement("legend")}} 元素定位是其 {{HTMLElement("fieldset")}} 父元素的上边框的最顶端。在HTML流中无法改变它的绝对位置，无法让其远离顶部边框。然而，你可以使用 {{cssxref("position")}} 属性将其位置设置为绝对或相对。除此之外，它近几年是fieldset边框的一部分。
          
+
          {{HTMLElement("legend")}}元素易于应用 CSS，除了定位。在所有浏览器中， {{HTMLElement("legend")}} 元素定位是其 {{HTMLElement("fieldset")}} 父元素的上边框的最顶端。在 HTML 流中无法改变它的绝对位置，无法让其远离顶部边框。然而，你可以使用 {{cssxref("position")}} 属性将其位置设置为绝对或相对。除此之外，它近几年是 fieldset 边框的一部分。
          
 
-
          由于{{HTMLElement("legend")}}元素对可访问性非常重要，因为它能被无障碍技术作为每个fieldset中的表单元素的标签读出来，它通常与标题配对，并且在无障碍中被隐藏 。例如:
          
+
          由于{{HTMLElement("legend")}}元素对可访问性非常重要，因为它能被无障碍技术作为每个 fieldset 中的表单元素的标签读出来，它通常与标题配对，并且在无障碍中被隐藏 。例如：
          
 
 
          HTML
          
 
@@ -143,7 +143,7 @@ 
          CSS
          
 
 
          textarea
          
 
-
          默认情况下，所有浏览器都认为{{HTMLElement("textarea")}} 元素是inline block，与文本底线对齐。 这很少是我们真正想看到的。 要将内联(inline-block)块更改为块(block)，使用{{cssxref("display")}}属性非常简单。 但是如果你想以inline方式使用它，通常改变垂直对齐方式：
          
+
          默认情况下，所有浏览器都认为{{HTMLElement("textarea")}} 元素是 inline block，与文本底线对齐。这很少是我们真正想看到的。要将内联 (inline-block) 块更改为块 (block)，使用{{cssxref("display")}}属性非常简单。但是如果你想以 inline 方式使用它，通常改变垂直对齐方式：
          
 
 
          textarea {
   vertical-align: top;
@@ -188,12 +188,12 @@ 
          The HTML
          
 
 
          组织你的静态文件
          
 
-
          好戏要开始了! 在开始写代码之前，我们需要三个额外的静态文件：
          
+
          好戏要开始了！在开始写代码之前，我们需要三个额外的静态文件：
          
 
 
            
  
          1. 明信片的背景——下载这幅图片，把它和你的 HTML 文件保存在相同目录下。
            2. 
- 
          2. 打字机字体：源自 fontsquirrel.com 的 "Secret Typewriter“ 字体——将TTF文件下载到和上面相同的文件夹里。
            3. 
- 
          3. 手绘字体：源自 fontsquirrel.com 的 The "Journal" 字体  —— 将TTF文件下载到和上面相同的文件夹里。
            4. 
+ 
          4. 打字机字体：源自 fontsquirrel.com 的 "Secret Typewriter“字体——将 TTF 文件下载到和上面相同的文件夹里。
            5. 
+ 
          5. 手绘字体：源自 fontsquirrel.com 的 The "Journal" 字体  —— 将 TTF 文件下载到和上面相同的文件夹里。
            6. 
 
          
 
 
          在你开始之前需要对字体做一些处理：
          
@@ -202,7 +202,7 @@ 
          组织你的静态文件
          
  
        • 打开 fontsquirrel 网络字体生成器.
          • 
  
        • 使用表单，上传你的字体文件并生成一个网络字体包，将这个包下载到你的电脑上。
          • 
  
        • 解压提供的 zip 文件。
          • 
- 
        • 再解压后的文件内容里你会找到两个  .woff 文件和两个.woff2 文件。将这四个文件拷贝到一个叫 fonts 的文件夹里，而fonts 文件夹位于和上面相同的文件夹里。我们为每种字体使用两个不同的文件以最大限度地保证浏览器兼容性。查看我们的 Web 字体 一文获取更多信息。
          • 
+ 
        • 再解压后的文件内容里你会找到两个  .woff 文件和两个.woff2 文件。将这四个文件拷贝到一个叫 fonts 的文件夹里，而 fonts 文件夹位于和上面相同的文件夹里。我们为每种字体使用两个不同的文件以最大限度地保证浏览器兼容性。查看我们的 Web 字体 一文获取更多信息。
          • 
 
 
 
          CSS
          
@@ -361,7 +361,7 @@ 
          CSS
          
 
          瞧！
          
 
 
          
-
          注意：如果你的例子没有像你预期的那样工作，你想将它同我们的版本检查对比，你可以在Github 上找到它 —— 查看 在线演示 (也可以查看源代码)。
          
+
          注意：如果你的例子没有像你预期的那样工作，你想将它同我们的版本检查对比，你可以在 Github 上找到它 —— 查看 在线演示 (也可以查看源代码)。
          
 
          
 
 
          总结
          
diff --git a/files/zh-cn/learn/forms/your_first_form/index.html b/files/zh-cn/learn/forms/your_first_form/index.html
index 4c9a1acc10f06b..ffcd3c779b832c 100644
--- a/files/zh-cn/learn/forms/your_first_form/index.html
+++ b/files/zh-cn/learn/forms/your_first_form/index.html
@@ -6,34 +6,34 @@
 ---
 
          {{LearnSidebar}}{{NextMenu("Learn/HTML/Forms/How_to_structure_an_HTML_form", "Learn/HTML/Forms")}}
          
 
-
          本系列的第一篇文章提供了您第一次创建HTML表单的经验，包括设计一个简单表单，使用正确的HTML元素实现它，通过CSS添加一些非常简单的样式，以及如何将数据发送到服务器。
          
+
          本系列的第一篇文章提供了您第一次创建 HTML 表单的经验，包括设计一个简单表单，使用正确的 HTML 元素实现它，通过 CSS 添加一些非常简单的样式，以及如何将数据发送到服务器。
          
 
 
      
  
   
      
    预备知识：
    
-    
      基本计算机素养，对HTML的理解，对HTTP 和服务器端编程的基础知识。
      
+    
      基本计算机素养，对HTML 的理解，对HTTP 和服务器端编程的基础知识。
      
          		
   
      
   
      
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
      
-   
+   
      
  
   
      
    预备知识：
    
-    
      基本计算机素养和对HTML的基本理解。
      
+    
      基本计算机素养和对 HTML 的基本理解。
      
          		
   
      
   
      
    目标：为了熟悉HTML表单是什么，它们被用来做什么，如何设计它们，以及简单情况下需要的基本HTML元素。为了熟悉 HTML 表单是什么，它们被用来做什么，如何设计它们，以及简单情况下需要的基本 HTML 元素。
   
      
        
 
      
 
-
      HTML表单是什么？
      
+
      HTML 表单是什么？
      
 
-
      HTML表单是用户和web站点或应用程序之间交互的主要内容之一。它们允许用户将数据发送到web站点。大多数情况下，数据被发送到web服务器，但是web页面也可以自己拦截它并使用它。
      
+
      HTML 表单是用户和 web 站点或应用程序之间交互的主要内容之一。它们允许用户将数据发送到 web 站点。大多数情况下，数据被发送到 web 服务器，但是 web 页面也可以自己拦截它并使用它。
      
 
-
      HTML表单是由一个或多个小部件组成的。这些小部件可以是文本字段(单行或多行)、选择框、按钮、复选框或单选按钮。大多数情况下，这些小部件与描述其目的的标签配对——正确实现的标签能够清楚地指示视力正常的用户和盲人用户输入表单所需的内容。
      
+
      HTML 表单是由一个或多个小部件组成的。这些小部件可以是文本字段 (单行或多行)、选择框、按钮、复选框或单选按钮。大多数情况下，这些小部件与描述其目的的标签配对——正确实现的标签能够清楚地指示视力正常的用户和盲人用户输入表单所需的内容。
      
 
-
      HTML表单和常规HTML文档的主要区别在于，大多数情况下，表单收集的数据被发送到web服务器。在这种情况下，您需要设置一个web服务器来接收和处理数据。如何设置这样的服务器超出了本文的范围，但是如果您想了解更多，请参阅模块后面的发送表单数据。
      
+
      HTML 表单和常规 HTML 文档的主要区别在于，大多数情况下，表单收集的数据被发送到 web 服务器。在这种情况下，您需要设置一个 web 服务器来接收和处理数据。如何设置这样的服务器超出了本文的范围，但是如果您想了解更多，请参阅模块后面的发送表单数据。
      
 
 
      设计表单
      
 
-
      在开始编写代码之前，最好先退一步，花点时间考虑一下您的表单。设计一个快速的模型将帮助您定义您想要询问用户的正确的数据集。从用户体验(UX)的角度来看，要记住：表单越大，失去用户的风险就越大。保持简单，保持专注:只要求必要的数据。在构建站点或应用程序时，设计表单是非常重要的一步。这超出了本文的范围，涵盖了表单的用户体验，但是如果您想深入了解这个主题，您应该阅读下面的文章:
      
+
      在开始编写代码之前，最好先退一步，花点时间考虑一下您的表单。设计一个快速的模型将帮助您定义您想要询问用户的正确的数据集。从用户体验 (UX) 的角度来看，要记住：表单越大，失去用户的风险就越大。保持简单，保持专注：只要求必要的数据。在构建站点或应用程序时，设计表单是非常重要的一步。这超出了本文的范围，涵盖了表单的用户体验，但是如果您想深入了解这个主题，您应该阅读下面的文章：
      
 
 
        
  
      • 杂志<Smashing Magazine>中有很好的关于表单用户体验的文章，或许其中最重要的应该是他们的Extensive Guide To Web Form Usability.
        • 
@@ -44,17 +44,17 @@ 
        设计表单
        
 
 
        The form to build, roughly sketch
        
 
-
        我们的表单将包含三个文本字段和一个按钮。我们向用户询问他们的姓名、电子邮件和他们想要发送的信息。点击这个按钮将把他们的数据发送到一个web服务器。
        
+
        我们的表单将包含三个文本字段和一个按钮。我们向用户询问他们的姓名、电子邮件和他们想要发送的信息。点击这个按钮将把他们的数据发送到一个 web 服务器。
        
 
-
        主动学习:使用HTML实现我们的表单
        
+
        主动学习：使用 HTML 实现我们的表单
        
 
-
        好了，现在我们准备进入HTML代码并对表单进行编码。为了构建我们的联系人表单，我们将使用以下HTML元素:{{HTMLElement("form")}}, {{HTMLElement("label")}}, {{HTMLElement("input")}}, {{HTMLElement("textarea")}}, and {{HTMLElement("button")}}.
        
+
        好了，现在我们准备进入 HTML 代码并对表单进行编码。为了构建我们的联系人表单，我们将使用以下 HTML 元素:{{HTMLElement("form")}}, {{HTMLElement("label")}}, {{HTMLElement("input")}}, {{HTMLElement("textarea")}}, and {{HTMLElement("button")}}.
        
 
-
        在进一步讨论之前，先创建一个简单HTML模板的本地副本—您将在这里输入您的表单HTML。
        
+
        在进一步讨论之前，先创建一个简单 HTML 模板的本地副本—您将在这里输入您的表单 HTML。
        
 
 
        {{HTMLElement("form")}} 元素
        
 
-
        所有HTML表单都以一个{{HTMLElement("form")}}元素开始：
        
+
        所有 HTML 表单都以一个{{HTMLElement("form")}}元素开始：
        
 
 
        <form action="/my-handling-form-page" method="post">
 
@@ -63,21 +63,21 @@ 
        {{HTMLElement("form")}} 元素
        
 
        这个元素正式定义了一个表单。就像{{HTMLElement("div")}}元素或{{HTMLElement("p")}}元素，它是一个容器元素，但它也支持一些特定的属性来配置表单的行为方式。它的所有属性都是可选的，但实践中最好至少要设置action属性和method属性。
        
 
 
          
- 
        • action 属性定义了在提交表单时,应该把所收集的数据送给谁(/那个模块)(URL)去处理。.
          • 
- 
        •  method 属性定义了发送数据的HTTP方法(它可以是“get”或“post”).
          • 
+ 
        • action 属性定义了在提交表单时，应该把所收集的数据送给谁 (/那个模块)(URL) 去处理。.
          • 
+ 
        •  method 属性定义了发送数据的 HTTP 方法 (它可以是“get”或“post”).
          • 
 
        
 
 
        
-
        注意:如果您想深入了解这些属性是如何工作的，那么将在发送表单数据文章中详细说明。
        
+
        注意：如果您想深入了解这些属性是如何工作的，那么将在发送表单数据文章中详细说明。
        
 
        
 
-
        现在，将上面的{{htmlelement("form")}} 元素添加到您的HTML主体中
        
+
        现在，将上面的{{htmlelement("form")}} 元素添加到您的 HTML 主体中
        
 
 
        {{HTMLelement("label")}}, {{HTMLelement("input")}} 和 {{HTMLelement("textarea")}} 元素
        
 
 
        我们的联系人表单非常简单，包含三个文本字段，每个字段都有一个标签。该名称的输入字段将是一个基本的单行文本字段，电子邮件的输入字段将是一个只接受电子邮件地址的单行文本字段，而消息的输入字段将是一个基本的多行文本字段。
        
 
-
        就HTML代码而言，我们需要如下的东西来实现这些表单小部件：
        
+
        就 HTML 代码而言，我们需要如下的东西来实现这些表单小部件：
        
 
 
        <form action="/my-handling-form-page" method="post">
   <div>
@@ -96,7 +96,7 @@ 
        {{HTML
 
 
        更新您的表单代码，使其看起来像上面的代码。
        
 
-
        使用{{HTMLElement("div")}} 元素可以使我们更加方便地构造我们自己的代码，并且更容易样式化(参见本文后面的文章)。注意在所有{{HTMLElement("label")}}元素上使用for属性；它是将标签链接到表单小部件的一种正规方式。这个属性引用对应的小部件的id。这样做有一些好处。最明显的一个好处是允许用户单击标签以激活相应的小部件。如果您想更好地理解这个属性的其他好处，您可以找到如何构造HTML表单的详细信息。
        
+
        使用{{HTMLElement("div")}} 元素可以使我们更加方便地构造我们自己的代码，并且更容易样式化 (参见本文后面的文章)。注意在所有{{HTMLElement("label")}}元素上使用for属性；它是将标签链接到表单小部件的一种正规方式。这个属性引用对应的小部件的id。这样做有一些好处。最明显的一个好处是允许用户单击标签以激活相应的小部件。如果您想更好地理解这个属性的其他好处，您可以找到如何构造 HTML 表单的详细信息。
        
 
 
        在 {{HTMLElement("input")}}元素中，最重要的属性是type 属性。这个属性非常重要，因为它定义了{{HTMLElement("input")}}属性的行为方式。它可以从根本上改变元素，所以要注意它。稍后您将在原生表单控件文章中找到更多关于此的内容。
        
 
@@ -105,11 +105,11 @@ 
        {{HTML
  
      • 对于第二个输入，我们使用值email，它定义了一个只接受格式正确的电子邮件地址的单行文本字段。这会将一个基本的文本字段转换为一种“智能”字段，该字段将对用户输入的数据进行一些检查。在稍后的表单数据验证文章中，您将了解到更多关于表单验证的信息。
        • 
 
      
 
-
      最后但同样重要的是，要注意<input> 和 <textarea></textarea>的语法。这是HTML的一个奇怪之处。 <input> 标签是一个空元素，这意味着它不需要关闭标签。相反， {{HTMLElement("textarea")}}不是一个空元素，因此必须使用适当的结束标记来关闭它。这对HTML表单的特定特性有影响:定义默认值的方式。要定义{{HTMLElement("input")}}的默认值，你必须使用value 属性，如下所示：
      
+
      最后但同样重要的是，要注意<input> 和 <textarea></textarea>的语法。这是 HTML 的一个奇怪之处。 <input> 标签是一个空元素，这意味着它不需要关闭标签。相反， {{HTMLElement("textarea")}}不是一个空元素，因此必须使用适当的结束标记来关闭它。这对 HTML 表单的特定特性有影响：定义默认值的方式。要定义{{HTMLElement("input")}}的默认值，你必须使用value 属性，如下所示：
      
 
 
      <input type="text" value="by default this element is filled with this text" />
      
 
-
      相反，如果您想定义{{HTMLElement("textarea")}}的默认值，您只需在{{HTMLElement("textarea")}}元素的开始和结束标记之间放置默认值，就像这样:
      
+
      相反，如果您想定义{{HTMLElement("textarea")}}的默认值，您只需在{{HTMLElement("textarea")}}元素的开始和结束标记之间放置默认值，就像这样：
      
 
 
      <textarea>by default this element is filled with this text</textarea>
      
 
@@ -125,35 +125,35 @@ 
      {{HTMLelement("button")}} 元素
      
 
      您会看到{{htmlelement("button")}}元素也接受一个 type属性，它接受submit, reset或者 button 三个值中的任一个。
      
 
 
        
- 
      • 单击 type 属性定义为 submit 值(也是默认值)的按钮会发送表单的数据到{{HTMLElement("form")}}元素的action 属性所定义的网页。
        • 
+ 
      • 单击 type 属性定义为 submit 值 (也是默认值) 的按钮会发送表单的数据到{{HTMLElement("form")}}元素的action 属性所定义的网页。
        • 
  
      • 单击 type 属性定义为 reset 值的按钮 将所有表单小部件重新设置为它们的默认值。从用户体验的角度来看，这被认为是一种糟糕的做法。
        • 
- 
      • 单击 type 属性定义为 button 值的按钮……不会发生任何事！这听起来很傻，但是用JavaScript构建定制按钮非常有用。 
        • 
+ 
      • 单击 type 属性定义为 button 值的按钮……不会发生任何事！这听起来很傻，但是用 JavaScript 构建定制按钮非常有用。 
        • 
 
      
 
 
      
-
      注意：您还可以使用相应类型的 {{HTMLElement("input")}}元素来生成一个按钮，如 <input type="submit">。{{htmlelement("button")}}元素的主要优点是， {{HTMLElement("input")}}元素只允许纯文本作为其标签，而{{htmlelement("button")}}元素允许完整的HTML内容，允许更复杂、更有创意的按钮文本。
      
+
      注意：您还可以使用相应类型的 {{HTMLElement("input")}}元素来生成一个按钮，如 <input type="submit">。{{htmlelement("button")}}元素的主要优点是， {{HTMLElement("input")}}元素只允许纯文本作为其标签，而{{htmlelement("button")}}元素允许完整的 HTML 内容，允许更复杂、更有创意的按钮文本。
      
 
      
 
 
      基本表单样式
      
 
-
      现在您已经完成了表单的HTML代码，尝试保存它并在浏览器中查看它。
      
+
      现在您已经完成了表单的 HTML 代码，尝试保存它并在浏览器中查看它。
      
  现在，你会看到它看起来很丑。
      
 
 
      
 
 
      
-
      注意： 如果你怀疑你的HTML代码不对，试着把它和我们完成的例子进行比较 —— first-form.html (你也可以观看预览版)。
      
+
      注意： 如果你怀疑你的 HTML 代码不对，试着把它和我们完成的例子进行比较 —— first-form.html (你也可以观看预览版)。
      
 
      
 
-
      如何排布好表单是公认的难点。这超出了本文的讨论范围，所以现在我们只需要让您添加一些CSS来让它看起来很好。
      
+
      如何排布好表单是公认的难点。这超出了本文的讨论范围，所以现在我们只需要让您添加一些 CSS 来让它看起来很好。
      
 
-
      首先，在您的HTML头部中添加一个 {{htmlelement("style")}}元素。应该是这样的：
      
+
      首先，在您的 HTML 头部中添加一个 {{htmlelement("style")}}元素。应该是这样的：
      
 
 
      <style>
 
 </style>
      
 
-
      在样式标签中，添加如下的CSS，如下所示:
      
+
      在样式标签中，添加如下的 CSS，如下所示：
      
 
 
      form {
   /* 居中表单 */
@@ -176,7 +176,7 @@ 
      基本表单样式
      
 }
 
 label {
-  /* 确保所有label大小相同并正确对齐 */
+  /* 确保所有 label 大小相同并正确对齐 */
   display: inline-block;
   width: 90px;
   text-align: right;
@@ -184,7 +184,7 @@ 
      基本表单样式
      
 
 input, textarea {
   /* 确保所有文本输入框字体相同
-     textarea默认是等宽字体 */
+     textarea 默认是等宽字体 */
   font: 1em sans-serif;
 
   /* 使所有文本输入框大小相同 */
@@ -201,7 +201,7 @@ 
      基本表单样式
      
 }
 
 textarea {
-  /* 使多行文本输入框和它们的label正确对齐 */
+  /* 使多行文本输入框和它们的 label 正确对齐 */
   vertical-align: top;
 
   /* 给文本留下足够的空间 */
@@ -210,11 +210,11 @@ 
      基本表单样式
      
 
 .button {
   /* 把按钮放到和文本输入框一样的位置 */
-  padding-left: 90px; /* 和label的大小一样 */
+  padding-left: 90px; /* 和 label 的大小一样 */
 }
 
 button {
-  /* 这个外边距的大小与label和文本输入框之间的间距差不多 */
+  /* 这个外边距的大小与 label 和文本输入框之间的间距差不多 */
   margin-left: .5em;
 }
      
 
@@ -223,18 +223,18 @@ 
      基本表单样式
      
 
      
 
 
      
-
      注意: 你可以在GitHub上的这里找到它 first-form-styled.html (也可以在这儿看运行结果).
      
+
      注意: 你可以在 GitHub 上的这里找到它 first-form-styled.html (也可以在这儿看运行结果).
      
 
      
 
-
      向您的web服务器发送表单数据
      
+
      向您的 web 服务器发送表单数据
      
 
-
      最后一部分，也许是最棘手的部分，是在服务器端处理表单数据。如前所述，大多数时候HTML表单是向用户请求数据并将其发送到web服务器的一种方便的方式。
      
+
      最后一部分，也许是最棘手的部分，是在服务器端处理表单数据。如前所述，大多数时候 HTML 表单是向用户请求数据并将其发送到 web 服务器的一种方便的方式。
      
 
 
      {{HTMLelement("form")}} 元素将定义如何通过action 属性和 method属性来发送数据的位置和方式。
      
 
 
      但这还不够。我们还需要为我们的数据提供一个名称。这些名字对双方都很重要：在浏览器端，它告诉浏览器给数据各自哪个名称，在服务器端，它允许服务器按名称处理每个数据块。
      
 
-
      要将数据命名为表单，您需要在每个表单小部件上使用 name 属性来收集特定的数据块。让我们再来看看我们的表单代码:
      
+
      要将数据命名为表单，您需要在每个表单小部件上使用 name 属性来收集特定的数据块。让我们再来看看我们的表单代码：
      
 
 
      <form action="/my-handling-form-page" method="post">
   <div>
@@ -252,16 +252,16 @@ 
      向您的web服务器发送表
 
   ...
      
 
-
      在我们的例子中，表单会发送三个已命名的数据块 "user_name", "user_email", 和 "user_message"。这些数据将用使用HTTP POST 方法,把信息发送到URL为 "/my-handling-form-page"目录下。
      
+
      在我们的例子中，表单会发送三个已命名的数据块 "user_name", "user_email", 和 "user_message"。这些数据将用使用HTTP POST 方法，把信息发送到 URL 为 "/my-handling-form-page"目录下。
      
 
-
      在服务器端，位于URL"/my-handling-form-page" 上的脚本将接收的数据作为HTTP请求中包含的3个键/值项的列表。这个脚本处理这些数据的方式取决于您。每个服务器端语言(PHP、Python、Ruby、Java、c等等)都有自己的机制。深入到这个主题已经超出了本指南的范围，但是如果您想了解更多，我们已经在发送表单数据文章中提供了一些示例。 
      
+
      在服务器端，位于 URL"/my-handling-form-page" 上的脚本将接收的数据作为HTTP请求中包含的3个键/值项的列表。这个脚本处理这些数据的方式取决于您。每个服务器端语言(PHP、Python、Ruby、Java、c等等)都有自己的机制。深入到这个主题已经超出了本指南的范围，但是如果您想了解更多，我们已经在发送表单数据文章中提供了一些示例。 
      
 
 
      总结
      
 
-
      祝贺您，您已经构建了您的第一个HTML表单。它看起来就像这样:
      
+
      祝贺您，您已经构建了您的第一个 HTML 表单。它看起来就像这样：
      
 
 
      {{ EmbedLiveSample('A_simple_form', '100%', '240', '', 'Learn/HTML/Forms/Your_first_HTML_form/Example') }}
      
 
-
      然而，这仅仅是开始，现在是时候深入研究了。HTML表单比我们在这里看到的要强大得多，本指南的其他文章将帮助您掌握其余部分。
      
+
      然而，这仅仅是开始，现在是时候深入研究了。HTML 表单比我们在这里看到的要强大得多，本指南的其他文章将帮助您掌握其余部分。
      
 
 
      {{NextMenu("Learn/HTML/Forms/How_to_structure_an_HTML_form", "Learn/HTML/Forms")}}
      
diff --git a/files/zh-cn/learn/front-end_web_developer/index.md b/files/zh-cn/learn/front-end_web_developer/index.md
index 2f5240e5637b15..e2b8469b2bd1c8 100644
--- a/files/zh-cn/learn/front-end_web_developer/index.md
+++ b/files/zh-cn/learn/front-end_web_developer/index.md
@@ -20,7 +20,7 @@ translation_of: Learn/Front-end_web_developer
 
 ## 涵盖的主题
 
-该路线图涵盖的主题大致范围如下:
+该路线图涵盖的主题大致范围如下：
 
 - 基础准备以及如何学习
 - Web 标准和最佳实践 (例如辅助功能和跨浏览器兼容)
@@ -49,13 +49,13 @@ translation_of: Learn/Front-end_web_developer
 
 ### 起步
 
-学习用时: 1–2 小时
+学习用时：1–2 小时
 
 #### 预备知识
 
 仅需基础的计算机知识。
 
-#### 我怎么知道自己是否可以继续往下学习了?
+#### 我怎么知道自己是否可以继续往下学习了？
 
 本章节没有评估测试，但是请不要跳过它 — 这对于帮你准备好应对后面的练习和学习非常重要。
 
@@ -67,13 +67,13 @@ translation_of: Learn/Front-end_web_developer
 
 ### HTML 语义和结构
 
-学习用时: 35–50 小时
+学习用时：35–50 小时
 
 #### 预备知识
 
 基础的计算机知识和基本的 Web 开发环境。
 
-#### 我怎么知道自己是否可以继续往下学习了?
+#### 我怎么知道自己是否可以继续往下学习了？
 
 每个模块的评估练习都是针对测试你主题相关知识掌握能力设计的，完成了每个练习就表示你可以继续往后学习下一个模块了。
 
@@ -85,13 +85,13 @@ translation_of: Learn/Front-end_web_developer
 
 ### 使用 CSS 布局和美化
 
-学习用时: 90–120 小时
+学习用时：90–120 小时
 
 #### 预备知识
 
 学习 CSS 前需要有基础的 HTML 知识，请至少学习完 [HTML 介绍](/zh-CN/docs/Learn/HTML/Introduction_to_HTML)再开始。
 
-#### 我怎么知道自己是否可以继续往下学习了?
+#### 我怎么知道自己是否可以继续往下学习了？
 
 每个模块的评估练习都是针对测试你主题相关知识掌握能力设计的，完成了每个练习就表示你可以继续往后学习下一个模块了。
 
@@ -108,13 +108,13 @@ translation_of: Learn/Front-end_web_developer
 
 ### 使用 JavaScript 开发交互
 
-学习用时: 135–185 小时
+学习用时：135–185 小时
 
 #### 预备知识
 
 学习 JavaScript 前需要有基础的 HTML 知识，请至少学习完 [HTML 介绍](/zh-CN/docs/Learn/HTML/Introduction_to_HTML)再开始。
 
-#### 我怎么知道自己是否可以继续往下学习了?
+#### 我怎么知道自己是否可以继续往下学习了？
 
 每个模块的评估练习都是针对测试你主题相关知识掌握能力设计的，完成了每个练习就表示你可以继续往后学习下一个模块了。
 
@@ -128,13 +128,13 @@ translation_of: Learn/Front-end_web_developer
 
 ### Web 表单 — 处理用户数据
 
-学习用时: 40–50 小时
+学习用时：40–50 小时
 
 #### 预备知识
 
 高效使用 Web 表单需要 HTML、CSS 和 JavaScript 知识。鉴于与表格打交道的复杂性，这一节被独立了出来。
 
-#### 我怎么知道自己是否可以继续往下学习了?
+#### 我怎么知道自己是否可以继续往下学习了？
 
 每个模块的评估练习都是针对测试你主题相关知识掌握能力设计的，完成了每个练习就表示你可以继续往后学习下一个模块了。
 
@@ -144,13 +144,13 @@ translation_of: Learn/Front-end_web_developer
 
 ### 让所有人都能使用 Web
 
-学习用时: 45-55 小时
+学习用时：45-55 小时
 
 #### 预备知识
 
 学习本章前最好对 HTML、CSS 和 JavaScript 都有一定了解— 本章很多技术和最佳实践都需要用到它们。
 
-#### 我怎么知道自己是否可以继续往下学习了?
+#### 我怎么知道自己是否可以继续往下学习了？
 
 每个模块的评估练习都是针对测试你主题相关知识掌握能力设计的，完成了每个练习就表示你可以继续往后学习下一个模块了。
 
@@ -161,13 +161,13 @@ translation_of: Learn/Front-end_web_developer
 
 ### 现代工具
 
-学习用时: 55–90 小时
+学习用时：55–90 小时
 
 #### 预备知识
 
 学习本章前最好对 HTML、CSS 和 JavaScript 都有一定了解— 本章很多技术和最佳实践都需要用到它们。
 
-#### 我怎么知道自己是否可以继续往下学习了?
+#### 我怎么知道自己是否可以继续往下学习了？
 
 本章节各模块均没有评估测试，但是第 2 章和第 3 章的学习教程应该能够让你很好的掌握现代工具的要义。
 
diff --git a/files/zh-cn/learn/getting_started_with_the_web/css_basics/index.html b/files/zh-cn/learn/getting_started_with_the_web/css_basics/index.html
index 0f88c1fb9041df..97665460332a17 100644
--- a/files/zh-cn/learn/getting_started_with_the_web/css_basics/index.html
+++ b/files/zh-cn/learn/getting_started_with_the_web/css_basics/index.html
@@ -41,7 +41,7 @@ 
      CSS 究竟什么来头？
      
 
 
      “CSS 规则集”详解
      
 
-
      让我们来仔细看一看上述CSS：
      
+
      让我们来仔细看一看上述 CSS：
      
 
 
      图解CSS声明
      
 
@@ -97,7 +97,7 @@ 
      不同类型的选择器
      
  
   
    元素选择器（也称作标签或类型选择器）
-   所有指定(该)类型的 HTML 元素
+   所有指定 (该) 类型的 HTML 元素
    p
      
     选择 <p>
   
@@ -148,7 +148,7 @@ 
      字体和文本
      
   
      将下列代码添加到相应的位置，用你在 Google Fonts 找到的字体替代 font-family 中的占位行。（ font-family 意味着你想要你的文本使用的字体。）这条规则首先为整个页面设定了一个全局字体和字号（因为 <html> 是整个页面的父元素，而且它所有的子元素都会继承相同的 font-size 和 font-family）：
      
 
   
      html {
-  /* px 表示 “像素（pixels）”: 基础字号为 10 像素 */
+  /* px 表示“像素（pixels）”: 基础字号为 10 像素 */
   font-size: 10px;
   /* Google fonts 输出的 CSS */
   font-family: 'Open Sans', sans-serif;
@@ -233,7 +233,7 @@ 
      文档体格式设置
      
  
    • width: 600px; —— 强制页面永远保持 600 像素宽。
      • 
  
    • margin: 0 auto; —— 为 margin 或 padding 等属性设置两个值时，第一个值代表元素的上方和下方（在这个例子中设置为 0），而第二个值代表左边和右边（在这里，auto 是一个特殊的值，意思是水平方向上左右对称）。你也可以使用一个，三个或四个值，参考 这里 。
      • 
  
    • background-color: #FF9500; —— 如前文所述，指定元素的背景颜色。我们给 body 用了一种略微偏红的橘色以与深蓝色的 {{htmlelement("html")}}  元素形成反差，你也可以尝试其它颜色。
      • 
- 
    • padding: 0 20px 20px 20px; —— 我们给内边距设置了四个值来让内容四周产生一点空间。这一次我们不设置上方的内边距，设置右边，下方，左边的内边距为20像素。值以上、右、下、左的顺序排列。
      • 
+ 
    • padding: 0 20px 20px 20px; —— 我们给内边距设置了四个值来让内容四周产生一点空间。这一次我们不设置上方的内边距，设置右边，下方，左边的内边距为 20 像素。值以上、右、下、左的顺序排列。
      • 
  
    • border: 5px solid black; —— 直接为 body 设置 5 像素的黑色实线边框。
      • 
 
    
 
@@ -288,7 +288,7 @@ 
    小结
    
 
 
    若遇到问题，可以参考 GitHub 上的 完整示例代码 做对比。
    
 
-
    本章介绍的 CSS 知识非常有限，更多内容请访问 CSS学习页面。
    
+
    本章介绍的 CSS 知识非常有限，更多内容请访问 CSS 学习页面。
    
 
 
    {{PreviousMenuNext("Learn/Getting_started_with_the_web/HTML_basics", "Learn/Getting_started_with_the_web/JavaScript_basics", "Learn/Getting_started_with_the_web")}}
    
 
diff --git a/files/zh-cn/learn/getting_started_with_the_web/dealing_with_files/index.md b/files/zh-cn/learn/getting_started_with_the_web/dealing_with_files/index.md
index 135d62d30b7a59..16eae59b032147 100644
--- a/files/zh-cn/learn/getting_started_with_the_web/dealing_with_files/index.md
+++ b/files/zh-cn/learn/getting_started_with_the_web/dealing_with_files/index.md
@@ -24,7 +24,7 @@ translation_of: Learn/Getting_started_with_the_web/Dealing_with_files
 
 ## 关于大小写和空格的提示
 
-你会注意到，在这篇文章中，我们要求你完全用小写字母命名文件夹和文件，没有空格. 这是因为：
+你会注意到，在这篇文章中，我们要求你完全用小写字母命名文件夹和文件，没有空格。这是因为：
 
 1. 许多计算机，特别是网络服务器，是区分大小写的。因此，假如你把一张图片放在你的网站上 `test-site/MyImage.jpg`，然后在一个不同的文件中，你试图以 `test-site/myimage.jpg` 来调用该图片，它可能无法工作。
 2. 浏览器、网络服务器和编程语言对空格的处理并不一致。例如，如果你在文件名中使用空格，一些系统可能将其视为两个文件名。一些服务器会用“%20”（URL 中空格的字符代码）替换文件名中的区域，导致所有链接被破坏。最好用连字符而不是下划线来分隔单词。对比 `my-file.html` 与 `my_file.html`。
@@ -35,10 +35,10 @@ translation_of: Learn/Getting_started_with_the_web/Dealing_with_files
 
 接下来，让我们看看我们的测试网站应该是什么结构。在我们创建的任何网站项目中，最常见的是一个主页 HTML 文件和包含图像、样式文件和脚本文件的文件夹。现在让我们来创建这些：
 
-1. **`index.html`**： 这个文件一般会包含主页内容，也就是人们第一次进入网站时看到的文字和图片。使用文本编辑器，创建一个名为`index.html`的新文件，并将其保存在`test-site`文件夹内。
-2. **`images` 文件夹**： 这个文件夹包含网站上使用的所有图片。在 `test-site` 文件夹内创建一个名为 `images` 的文件夹。
-3. **`styles` 文件夹**： 这个文件夹包含用于设置内容样式的 CSS 代码（例如，设置文本和背景颜色）。在你的 `test-site` 文件夹内创建一个名为 `styles` 的文件夹。
-4. **`scripts` 文件夹**： 这个文件夹包含所有用于向网站添加交互功能的 JavaScript 代码（例如，点击时加载数据的按钮）。在 `test-site` 文件夹内创建一个名为 `scripts` 的文件夹。
+1. **`index.html`**：这个文件一般会包含主页内容，也就是人们第一次进入网站时看到的文字和图片。使用文本编辑器，创建一个名为`index.html`的新文件，并将其保存在`test-site`文件夹内。
+2. **`images` 文件夹**：这个文件夹包含网站上使用的所有图片。在 `test-site` 文件夹内创建一个名为 `images` 的文件夹。
+3. **`styles` 文件夹**：这个文件夹包含用于设置内容样式的 CSS 代码（例如，设置文本和背景颜色）。在你的 `test-site` 文件夹内创建一个名为 `styles` 的文件夹。
+4. **`scripts` 文件夹**：这个文件夹包含所有用于向网站添加交互功能的 JavaScript 代码（例如，点击时加载数据的按钮）。在 `test-site` 文件夹内创建一个名为 `scripts` 的文件夹。
 
 > **备注：** 在 Windows 上你可能看不到文件扩展名，因为 Windows 有一个默认开启的**隐藏已知文件类型的扩展名**的选项。一般来说，你可以通过 Windows 资源管理器，选择**文件夹选项**选项，取消勾选**隐藏已知文件类型的扩展名**复选框，然后点击**确认**将其关闭。对于涉及你的 Windows 版本的更多具体信息，你可以在网上搜索。
 
@@ -62,7 +62,7 @@ translation_of: Learn/Getting_started_with_the_web/Dealing_with_files
     
     ```
 
-3. 该行代码 `My test image` 用于向页面中插入图片。我们需要告知 HTML 图片的位置。这张图片位于 *images* 目录下，与 `index.html` 处于同一目录。 为了从 `index.html` 访问到我们的图像，我们需要的文件路径是 `images/your-image-filename`。 例如，这里的图像叫做 `firefox-icon.png`， 那么文件路径就是 `images/firefox-icon.png`。
+3. 该行代码 `My test image` 用于向页面中插入图片。我们需要告知 HTML 图片的位置。这张图片位于 *images* 目录下，与 `index.html` 处于同一目录。为了从 `index.html` 访问到我们的图像，我们需要的文件路径是 `images/your-image-filename`。例如，这里的图像叫做 `firefox-icon.png`，那么文件路径就是 `images/firefox-icon.png`。
 4. 在 HTML 代码 `src=""` 的双引号之间插入文件路径。
 5. 保存 HTML 文件，然后使用浏览器打开（双击该文件）。你应该看到新网页显示了新的图像！
 
@@ -72,7 +72,7 @@ translation_of: Learn/Getting_started_with_the_web/Dealing_with_files
 
 - 若引用的目标文件与 HTML 文件同级，只需直接使用文件名，例如：`my-image.jpg`。
 - 要引用子目录中的文件，请在路径前面写上目录名，再加上一个正斜杠。例如：`subdirectory/my-image.jpg`。
-- 若引用的目标文件位于 HTML 文件的**上级**，需要加上两个点。 举个例子，如果 `index.html` 在 `test-site` 的一个子文件夹内，而 `my-image.jpg` 在 `test-site` 内，你可以使用`../my-image.jpg` 从 `index.html` 引用 `my-image.jpg`。
+- 若引用的目标文件位于 HTML 文件的**上级**，需要加上两个点。举个例子，如果 `index.html` 在 `test-site` 的一个子文件夹内，而 `my-image.jpg` 在 `test-site` 内，你可以使用`../my-image.jpg` 从 `index.html` 引用 `my-image.jpg`。
 - 以上方法可以随意组合，比如：`../subdirectory/another-subdirectory/my-image.jpg`。
 
 这是你目前需要知道的全部内容。
diff --git a/files/zh-cn/learn/getting_started_with_the_web/how_the_web_works/index.html b/files/zh-cn/learn/getting_started_with_the_web/how_the_web_works/index.html
index ef2c5c93fa6af0..6099fa334a528a 100644
--- a/files/zh-cn/learn/getting_started_with_the_web/how_the_web_works/index.html
+++ b/files/zh-cn/learn/getting_started_with_the_web/how_the_web_works/index.html
@@ -30,7 +30,7 @@ 
    客户端和服务器
    
 
    
 
 
      
- 
    • 客户端是典型的Web用户入网设备（比如，你连接了Wi-Fi的电脑，或接入移动网络的手机）和设备上可联网的软件（通常使用像 Firefox 和 Chrome的浏览器）。
      • 
+ 
    • 客户端是典型的 Web 用户入网设备（比如，你连接了 Wi-Fi 的电脑，或接入移动网络的手机）和设备上可联网的软件（通常使用像 Firefox 和 Chrome 的浏览器）。
      • 
  
    • 服务器是存储网页，站点和应用的计算机。当一个客户端设备想要获取一个网页时，一份网页的拷贝将从服务器上下载到客户端机器上来在用户浏览器上显示。
      • 
 
    
 
@@ -70,8 +70,8 @@ 
    其他部分
    
  
  • HTTP: 超文本传输协议是一个定义客户端和服务器间交流的语言的协议（{{Glossary("Protocol" , "protocol")}} ）。就像你下订单时所说的话一样。
    • 
  
  • 组成文件: 一个网页由许多文件组成，就像商店里不同的商品一样。这些文件有两种类型：
   
      
-   
    • 代码 : 网页大体由 HTML、CSS、JavaScript组成，不过你会在后面看到不同的技术。
      • 
-   
    • 资源 : 这是其他组成网页的东西的集合，比如图像、音乐、视频、Word文档、PDF文件。
      • 
+   
    • 代码 : 网页大体由 HTML、CSS、JavaScript 组成，不过你会在后面看到不同的技术。
      • 
+   
    • 资源 : 这是其他组成网页的东西的集合，比如图像、音乐、视频、Word 文档、PDF 文件。
      • 
   
    
  
    • 
 
@@ -98,19 +98,19 @@ 
    解析组成文件的顺序
    
     
  • 伴随着构建 DOM 树、应用 CSSOM 树的样式、以及执行 JavaScript 脚本文件，浏览器会在屏幕上绘制出网页的界面；用户看到网页界面也就可以跟网页进行交互了。
    • 
 
 
-
    DNS解析
    
+
    DNS 解析
    
 
 
    真正的网址看上去并不像你输入到地址框中的那样美好且容易记忆。它们是一串数字，像 63.245.217.105。
    
 
 
    这叫做 IP 地址，它代表了一个互联网上独特的位置。然而，它并不容易记忆，不是吗？那就是域名系统（DNS）被发明的原因。它们是将你输入浏览器的地址（像 "mozilla.org"）与实际 IP 地址相匹配的特殊的服务器。
    
 
-
    网页可以通过  {{Glossary("IP Address", "IP地址")}}直接访问。您可以通过在 IP Checker 等工具中输入域名来查找网站的IP地址。
    
+
    网页可以通过  {{Glossary("IP Address", "IP 地址")}}直接访问。您可以通过在 IP Checker 等工具中输入域名来查找网站的 IP 地址。
    
 
 
    A domain name is just another form of an IP address
    
 
 
    数据包详解
    
 
-
    前面我们用“包”来描述了数据从服务器到客户端传输的格式。这是什么意思？基本上，当数据在Web上传输时，是以成千上万的小数据块的形式传输的。大量不同的用户都可以同时下载同一个网页。如果网页以单个大的数据块形式传输，一次就只有一个用户下载，无疑会让Web非常没有效率并且失去很多乐趣。
    
+
    前面我们用“包”来描述了数据从服务器到客户端传输的格式。这是什么意思？基本上，当数据在 Web 上传输时，是以成千上万的小数据块的形式传输的。大量不同的用户都可以同时下载同一个网页。如果网页以单个大的数据块形式传输，一次就只有一个用户下载，无疑会让 Web 非常没有效率并且失去很多乐趣。
    
 
 
    扩展阅读
    
 
diff --git a/files/zh-cn/learn/getting_started_with_the_web/html_basics/index.html b/files/zh-cn/learn/getting_started_with_the_web/html_basics/index.html
index 170c3b46a11cc5..60212f2eb2b947 100644
--- a/files/zh-cn/learn/getting_started_with_the_web/html_basics/index.html
+++ b/files/zh-cn/learn/getting_started_with_the_web/html_basics/index.html
@@ -18,7 +18,7 @@
 
 
    HTML 到底是什么？
    
 
-
    HTML 不是一门编程语言，而是一种用于定义内容结构的标记语言。HTML 由一系列的元素（{{Glossary("element", "elements")}}）组成，这些元素可以用来包围不同部分的内容，使其以某种方式呈现或者工作。 一对标签（ {{Glossary("tag", "tags")}}）可以为一段文字或者一张图片添加超链接，将文字设置为斜体，改变字号，等等。 例如，键入下面一行内容：
    
+
    HTML 不是一门编程语言，而是一种用于定义内容结构的标记语言。HTML 由一系列的元素（{{Glossary("element", "elements")}}）组成，这些元素可以用来包围不同部分的内容，使其以某种方式呈现或者工作。一对标签（ {{Glossary("tag", "tags")}}）可以为一段文字或者一张图片添加超链接，将文字设置为斜体，改变字号，等等。例如，键入下面一行内容：
    
 
 
    我的猫非常脾气暴躁
 
    
@@ -46,7 +46,7 @@ 
    HTML 元素详解
    
 
 
    HTML 属性
    
 
-
    属性包含了关于元素的一些额外信息，这些信息本身不应显现在内容中。本例中，class 是属性名称，editor-note 是属性的值 。class 属性可为元素提供一个标识名称，以便进一步为元素指定样式或进行其他操作时使用。
    
+
    属性包含了关于元素的一些额外信息，这些信息本身不应显现在内容中。本例中，class 是属性名称，editor-note 是属性的值。class 属性可为元素提供一个标识名称，以便进一步为元素指定样式或进行其他操作时使用。
    
 
 
    属性应该包含：
    
 
@@ -62,7 +62,7 @@ 
    HTML 元素详解
    
 
 
    嵌套元素
    
 
-
    也可以将一个元素置于其他元素之中 —— 称作嵌套。要表明猫咪非常暴躁，可以将 “暴躁” 用 {{htmlelement("strong")}} 元素包围，爆字将突出显示：
    
+
    也可以将一个元素置于其他元素之中 —— 称作嵌套。要表明猫咪非常暴躁，可以将“暴躁”用 {{htmlelement("strong")}} 元素包围，爆字将突出显示：
    
 
 
    <p>我的猫咪脾气<strong>暴躁</strong>:)</p>
    
 
@@ -101,7 +101,7 @@ 
    HTML 文档详解
    
  
  • <!DOCTYPE html> — 文档类型。混沌初分，HTML 尚在襁褓（大约是 1991/92 年）之时，DOCTYPE 用来链接一些 HTML 编写守则，比如自动查错之类。DOCTYPE 在当今作用有限，仅用于保证文档正常读取。现在知道这些就足够了。
    • 
  
  • <html></html> — {{htmlelement("html")}} 元素。该元素包含整个页面的内容，也称作根元素。
    • 
  
  • <head></head> — {{htmlelement("head")}} 元素。该元素的内容对用户不可见，其中包含例如面向搜索引擎的搜索关键字（{{Glossary("keyword", "keywords")}}）、页面描述、CSS 样式表和字符编码声明等。
    • 
- 
  • <meta charset="utf-8"> — 该元素指定文档使用 UTF-8 字符编码 ，UTF-8 包括绝大多数人类已知语言的字符。基本上 UTF-8 可以处理任何文本内容，还可以避免以后出现某些问题，没有理由再选用其他编码。
    • 
+ 
  • <meta charset="utf-8"> — 该元素指定文档使用 UTF-8 字符编码，UTF-8 包括绝大多数人类已知语言的字符。基本上 UTF-8 可以处理任何文本内容，还可以避免以后出现某些问题，没有理由再选用其他编码。
    • 
  
  • <title></title> — {{htmlelement("title")}} 元素。该元素设置页面的标题，显示在浏览器标签页上，也作为收藏网页的描述文字。
    • 
  
  • <body></body> — {{htmlelement("body")}} 元素。该元素包含期望让用户在访问页面时看到的内容，包括文本、图像、视频、游戏、可播放的音轨或其他内容。
    • 
 
@@ -192,7 +192,7 @@ 
    链接
    
 
    链接非常重要 — 它们赋予 Web 网络属性。要植入一个链接，我们需要使用一个简单的元素 — {{htmlelement("a")}} — a 是 "anchor" （锚）的缩写。要将一些文本添加到链接中，只需如下几步：
    
 
 
      
- 
    1. 选择一些文本。比如 “Mozilla 宣言”。
      2. 
+ 
    2. 选择一些文本。比如“Mozilla 宣言”。
      3. 
  
    3. 将文本包含在 {{htmlelement("a")}} 元素内，就像这样：
   
      <a>Mozilla 宣言</a>
      
  
      4. 
diff --git a/files/zh-cn/learn/getting_started_with_the_web/index.md b/files/zh-cn/learn/getting_started_with_the_web/index.md
index 56117aea4c2376..6c9021388063b4 100644
--- a/files/zh-cn/learn/getting_started_with_the_web/index.md
+++ b/files/zh-cn/learn/getting_started_with_the_web/index.md
@@ -18,13 +18,13 @@ translation_of: Learn/Getting_started_with_the_web
 
 ## 你的第一个网站
 
-创建一个专业的网站需要大量的工作，所以如果你是 Web 开发的新手，我们鼓励你从小事做起。你不可能立马再建一个Facebook，但做一个自己的简单网站并不难，我们将由此开始。
+创建一个专业的网站需要大量的工作，所以如果你是 Web 开发的新手，我们鼓励你从小事做起。你不可能立马再建一个 Facebook，但做一个自己的简单网站并不难，我们将由此开始。
 
-通过阅读下面列出的文章，你将从零开始获得你的第一个在线网页。让我们开始吧!
+通过阅读下面列出的文章，你将从零开始获得你的第一个在线网页。让我们开始吧！
 
 ### 安装基本软件
 
-说到建设网站的工具，有很多可供选择的。如果你初入门径，你可能会被外面的一系列代码编辑器、框架和测试工具所迷惑。在[安装基本软件](/zh-CN/docs/Learn/Getting_started_with_the_web/Installing_basic_software)中, 我们将逐步向你展示如何安装你需要的软件，以开始基本的 Web 开发。
+说到建设网站的工具，有很多可供选择的。如果你初入门径，你可能会被外面的一系列代码编辑器、框架和测试工具所迷惑。在[安装基本软件](/zh-CN/docs/Learn/Getting_started_with_the_web/Installing_basic_software)中，我们将逐步向你展示如何安装你需要的软件，以开始基本的 Web 开发。
 
 ### 你的网站会是什么样子？
 
@@ -36,7 +36,7 @@ translation_of: Learn/Getting_started_with_the_web
 
 ### HTML 基础知识
 
-超文本标记语言（HTML）是你用来组织你的网络内容，并赋予它意义和目的的代码。例如，我的内容是一组段落还是一个要点列表？我的页面上是否插入了图片？我有一个数据表吗？在你的接受能力之内，[HTML 基础知识](/zh-CN/docs/Learn/Getting_started_with_the_web/HTML_basics)提供了足够的信息，使你熟悉 HTML 。
+超文本标记语言（HTML）是你用来组织你的网络内容，并赋予它意义和目的的代码。例如，我的内容是一组段落还是一个要点列表？我的页面上是否插入了图片？我有一个数据表吗？在你的接受能力之内，[HTML 基础知识](/zh-CN/docs/Learn/Getting_started_with_the_web/HTML_basics)提供了足够的信息，使你熟悉 HTML。
 
 ### CSS 基础知识
 
@@ -44,7 +44,7 @@ translation_of: Learn/Getting_started_with_the_web
 
 ### JavaScript 基础知识
 
-JavaScript是一种编程语言，你用它来给你的网站添加交互功能。例如游戏、当按钮被按下或数据被输入表格时发生的事情、动态造型效果、动画等。[JavaScript 基础知识](/zh-CN/docs/Learn/Getting_started_with_the_web/JavaScript_basics)让你了解这种令人兴奋的语言的可能性，以及如何开始使用。
+JavaScript 是一种编程语言，你用它来给你的网站添加交互功能。例如游戏、当按钮被按下或数据被输入表格时发生的事情、动态造型效果、动画等。[JavaScript 基础知识](/zh-CN/docs/Learn/Getting_started_with_the_web/JavaScript_basics)让你了解这种令人兴奋的语言的可能性，以及如何开始使用。
 
 ### 发布你的网站
 
diff --git a/files/zh-cn/learn/getting_started_with_the_web/installing_basic_software/index.md b/files/zh-cn/learn/getting_started_with_the_web/installing_basic_software/index.md
index ebabeafae230a1..07a95a37002c39 100644
--- a/files/zh-cn/learn/getting_started_with_the_web/installing_basic_software/index.md
+++ b/files/zh-cn/learn/getting_started_with_the_web/installing_basic_software/index.md
@@ -18,14 +18,14 @@ translation_of: Learn/Getting_started_with_the_web/Installing_basic_software
 ## 专业人士使用什么工具？
 
 - **计算机**。也许这对一些人来说听起来习以为常，但你们中的一些人正在使用手机或图书馆的电脑阅读这篇文章。对于重度的 Web 开发，最好购买一台运行 Windows、macOS 或 Linux 的台式机或笔记本电脑。
-- **文本编辑器**，用来写代码。可以是一个文本编辑器（如[Visual Studio Code](https://code.visualstudio.com/) 、[Sublime Text](https://www.sublimetext.com/) 、[Atom](https://atom.io/) 、[GNU Emacs](https://www.gnu.org/software/emacs/) 或者 [VIM](https://www.vim.org/) ），或一个混合编辑器（ [Dreamweaver](https://www.adobe.com/products/dreamweaver.html) 或 [WebStorm](https://www.jetbrains.com/webstorm/) ）。 Office 文档不适合这种用途，因为它们依赖隐藏的元素，会干扰网络浏览器使用的渲染引擎。
-- **网络浏览器**，用以测试代码。目前，最常用的浏览器是[Firefox](https://www.mozilla.org/zh-CN/firefox/) 、[Chrome](https://www.google.cn/intl/zh-CN/chrome/) 、[Opera](https://www.opera.com/zh-cn) 、[Safari](https://www.apple.com.cn/safari/) 、[Internet Explorer](https://windows.microsoft.com/en-us/internet-explorer/download-ie) 和 [Microsoft Edge](https://www.microsoft.com/zh-cn/edge) 。你还应该测试你的网站在移动设备和你的目标受众可能仍在使用的任何旧浏览器（如 IE 8-10）上的表现。[Lynx](https://lynx.browser.org/) ，一个基于文本的终端网络浏览器，对于查看视力障碍用户对你的网站的体验是非常好的。
+- **文本编辑器**，用来写代码。可以是一个文本编辑器（如 [Visual Studio Code](https://code.visualstudio.com/) 、[Sublime Text](https://www.sublimetext.com/) 、[Atom](https://atom.io/) 、[GNU Emacs](https://www.gnu.org/software/emacs/) 或者 [VIM](https://www.vim.org/) ），或一个混合编辑器（ [Dreamweaver](https://www.adobe.com/products/dreamweaver.html) 或 [WebStorm](https://www.jetbrains.com/webstorm/) ）。Office 文档不适合这种用途，因为它们依赖隐藏的元素，会干扰网络浏览器使用的渲染引擎。
+- **网络浏览器**，用以测试代码。目前，最常用的浏览器是 [Firefox](https://www.mozilla.org/zh-CN/firefox/) 、[Chrome](https://www.google.cn/intl/zh-CN/chrome/) 、[Opera](https://www.opera.com/zh-cn) 、[Safari](https://www.apple.com.cn/safari/) 、[Internet Explorer](https://windows.microsoft.com/en-us/internet-explorer/download-ie) 和 [Microsoft Edge](https://www.microsoft.com/zh-cn/edge) 。你还应该测试你的网站在移动设备和你的目标受众可能仍在使用的任何旧浏览器（如 IE 8-10）上的表现。[Lynx](https://lynx.browser.org/) ，一个基于文本的终端网络浏览器，对于查看视力障碍用户对你的网站的体验是非常好的。
 - **图形编辑器**，如 [GIMP](https://www.gimp.org/) 、[Figma](https://www.figma.com/) 、[Paint.NET](https://www.getpaint.net/) 、[Photoshop](https://www.adobe.com/products/photoshop.html) 、[Sketch](https://www.sketch.com) 或 [XD](https://www.adobe.com/products/xd.html) ，为你的网页制作图像或图形。
 - **版本控制系统**，用来管理服务器上的文件，与团队合作开展项目，共享代码和资产，避免编辑冲突。现在，[Git](https://git-scm.com/) 是最流行的版本控制系统，还有 [GitHub](https://github.com/) 或 [GitLab](https://gitlab.com) 托管服务。
-- **FTP 工具**，老式 Web 托管账户，以管理服务器上的文件（ [Git](https://git-scm.com/) 正越来越多地取代FTP用于此目的）。有大量的 (S)FTP 程序可用，包括 [Cyberduck](https://cyberduck.io/) 、[Fetch](https://fetchsoftworks.com/) 和 [FileZilla](https://filezilla-project.org/).
+- **FTP 工具**，老式 Web 托管账户，以管理服务器上的文件（ [Git](https://git-scm.com/) 正越来越多地取代 FTP 用于此目的）。有大量的 (S)FTP 程序可用，包括 [Cyberduck](https://cyberduck.io/) 、[Fetch](https://fetchsoftworks.com/) 和 [FileZilla](https://filezilla-project.org/).
 - **自动化构建工具**，如 [Webpack](https://webpack.js.org/) 、[Grunt](https://gruntjs.com/) 或 [Gulp](https://gulpjs.com/) ，以自动执行重复性任务，如简化代码和运行测试。
 - 库、框架等，以加快编写常用功能。一个库往往是一个现有的 JavaScript 或 CSS 文件，它提供了现成的功能，供你在代码中使用。框架则更进一步，为你提供一个完整的系统和一些自定义的语法，让你在上面写一个 Web 应用。
-- 此外还有更多的工具!
+- 此外还有更多的工具！
 
 ## 现在，我究竟需要什么工具？
 
@@ -42,7 +42,7 @@ translation_of: Learn/Getting_started_with_the_web/Installing_basic_software
 现在，我们将安装几个桌面网络浏览器来测试我们的代码。在下面选择你的操作系统，然后点击相关链接，下载你喜欢的浏览器：
 
 - Linux：[Firefox](https://www.mozilla.org/zh-CN/firefox/) 、[Chrome](https://www.google.cn/intl/zh-CN/chrome/) 、[Opera](https://www.opera.com/zh-cn) 、[Brave](https://brave.com/zh/).
-- Windows：[Firefox](https://www.mozilla.org/zh-CN/firefox/) 、[Chrome](https://www.google.cn/intl/zh-CN/chrome/) 、[Opera](https://www.opera.com/zh-cn) 、[Internet Explorer](https://windows.microsoft.com/zh-cn/internet-explorer/download-ie) 、[Microsoft Edge](https://www.microsoft.com/zh-cn/edge) 、[Brave](https://brave.com/zh/) （Windows 10默认带有Edge；如果你有Windows 7或以上版本，你可以安装Internet Explorer 11；否则，你应该安装一个替代浏览器）。
+- Windows：[Firefox](https://www.mozilla.org/zh-CN/firefox/) 、[Chrome](https://www.google.cn/intl/zh-CN/chrome/) 、[Opera](https://www.opera.com/zh-cn) 、[Internet Explorer](https://windows.microsoft.com/zh-cn/internet-explorer/download-ie) 、[Microsoft Edge](https://www.microsoft.com/zh-cn/edge) 、[Brave](https://brave.com/zh/) （Windows 10 默认带有 Edge；如果你有 Windows 7 或以上版本，你可以安装 Internet Explorer 11；否则，你应该安装一个替代浏览器）。
 - macOS：[Firefox](https://www.mozilla.org/zh-CN/firefox/) 、[Chrome](https://www.google.cn/intl/zh-CN/chrome/) 、[Opera](https://www.opera.com/zh-cn) 、[Safari](https://www.apple.com.cn/safari/) 、[Brave](https://brave.com/zh/) （macOS 和 iOS 默认带有 Safari 浏览器）。
 
 在继续之前，你应该至少安装两款这样的浏览器，并准备好进行测试。
diff --git a/files/zh-cn/learn/getting_started_with_the_web/javascript_basics/index.html b/files/zh-cn/learn/getting_started_with_the_web/javascript_basics/index.html
index 683f8560c2c8f7..c2d3f406f97afd 100644
--- a/files/zh-cn/learn/getting_started_with_the_web/javascript_basics/index.html
+++ b/files/zh-cn/learn/getting_started_with_the_web/javascript_basics/index.html
@@ -1,5 +1,5 @@
 ---
-title: JavaScript基础
+title: JavaScript 基础
 slug: Learn/Getting_started_with_the_web/JavaScript_basics
 tags:
   - JavaScript
@@ -19,14 +19,14 @@
 
 
      JavaScript 到底是什么？
      
 
-
      {{Glossary("JavaScript")}}（缩写：JS）是一门完备的 {{Glossary("Dynamic programming language", "动态编程语言")}}。当应用于 {{Glossary("HTML")}} 文档时，可为网站提供动态交互特性。由布兰登·艾克（ Brendan Eich，Mozilla 项目、Mozilla 基金会和 Mozilla 公司的联合创始人）发明。
      
+
      {{Glossary("JavaScript")}}（缩写：JS）是一门完备的 {{Glossary("Dynamic programming language", "动态编程语言")}}。当应用于 {{Glossary("HTML")}} 文档时，可为网站提供动态交互特性。由布兰登·艾克（Brendan Eich，Mozilla 项目、Mozilla 基金会和 Mozilla 公司的联合创始人）发明。
      
 
 
      JavaScript 的应用场合极其广泛，简单到幻灯片、照片库、浮动布局和响应按钮点击，复杂到游戏、2D/3D 动画、大型数据库驱动程序等等。
      
 
 
      JavaScript 相当简洁，却非常灵活。开发者们基于 JavaScript 核心编写了大量实用工具，可以使 开发工作事半功倍。其中包括：
      
 
 
        
- 
      • 浏览器应用程序接口（{{Glossary("API","API")}}）—— 浏览器内置的 API 提供了丰富的功能，比如：动态创建 HTML 和设置 CSS 样式、从用户的摄像头采集处理视频流、生成3D 图像与音频样本等等。
        • 
+ 
      • 浏览器应用程序接口（{{Glossary("API","API")}}）—— 浏览器内置的 API 提供了丰富的功能，比如：动态创建 HTML 和设置 CSS 样式、从用户的摄像头采集处理视频流、生成 3D 图像与音频样本等等。
        • 
  
      • 第三方 API —— 让开发者可以在自己的站点中整合其它内容提供者（Twitter、Facebook 等）提供的功能。
        • 
  
      • 第三方框架和库 —— 用来快速构建网站和应用。
        • 
 
      
@@ -39,7 +39,7 @@ 
      “Hello World!”示例
      
 
 
      读到这里你一定很激动，诚然 —— JavaScript 是最振奋人心的 Web 技术之一，而且在娴熟驾驭之后，你的网站在功能和创新力上将达到一个新的维度。
      
 
-
      然而，JavaScript 比 HTML 和 CSS 学习起来更加复杂一点，所以必须一步一个脚印地学习。首先，来看看如何在页面中添加一些基本的 JavaScript 脚本来建造一个 “Hello world!” 示例（一切始于 Hello World）。
      
+
      然而，JavaScript 比 HTML 和 CSS 学习起来更加复杂一点，所以必须一步一个脚印地学习。首先，来看看如何在页面中添加一些基本的 JavaScript 脚本来建造一个“Hello world!”示例（一切始于 Hello World）。
      
 
 
      
 
      重要：如果你没有完成之前的课程实践，可下载 上一章节示例的压缩包 并在本地解压作出发点。
      
@@ -58,16 +58,16 @@ 
      “Hello World!”示例
      
  
    4. 最后，保存 HTML 和 JavaScript 文件，用浏览器打开 index.html。可以看到如下内容：
      5. 
 
    
 
-
    注：我们将 {{htmlelement("script")}} 放在HTML文件的底部附近的原因是浏览器会按照代码在文件中的顺序加载 HTML。如果先加载的 JavaScript 期望修改其下方的 HTML，那么它可能由于 HTML 尚未被加载而失效。因此，将 JavaScript 代码放在 HTML页面的底部附近通常是最好的策略。
    
+
    注：我们将 {{htmlelement("script")}} 放在 HTML 文件的底部附近的原因是浏览器会按照代码在文件中的顺序加载 HTML。如果先加载的 JavaScript 期望修改其下方的 HTML，那么它可能由于 HTML 尚未被加载而失效。因此，将 JavaScript 代码放在 HTML 页面的底部附近通常是最好的策略。
    
 
 
    发生了什么？
    
 
-
    JavaScript 把页面的标题改成了 “Hello world!” 。首先用 {{domxref("Document.querySelector", "querySelector()")}} 函数获取标题的引用，并把它储存在 myHeading 变量中。这与 CSS 选择器的用法非常相像：若要对某个元素进行操作，首先得选择它。
    
+
    JavaScript 把页面的标题改成了“Hello world!” 。首先用 {{domxref("Document.querySelector", "querySelector()")}} 函数获取标题的引用，并把它储存在 myHeading 变量中。这与 CSS 选择器的用法非常相像：若要对某个元素进行操作，首先得选择它。
    
 
-
    之后，把 myHeading 变量的属性 {{domxref("Node.textContent", "textContent")}} （标题内容）修改为 “Hello world!” 。
    
+
    之后，把 myHeading 变量的属性 {{domxref("Node.textContent", "textContent")}} （标题内容）修改为“Hello world!” 。
    
 
 
    
-
    注：上面用到的两个函数都来自 文档对象模型 (DOM) API， 均用于控制文档。
    
+
    注：上面用到的两个函数都来自 文档对象模型 (DOM) API，均用于控制文档。
    
 
    
 
 
    JavaScript 快速入门
    
@@ -75,7 +75,7 @@ 
    JavaScript 快速入门
    
 
    我们来学习一些 JavaScript 的核心特性，从而更好地理解它的运行机制。学习这些知识很有意义，因为这些原理普遍适用于所有编程语言，掌握好它们，可以做到融会贯通。
    
 
 
    
-
    重要：学习本节时，请尝试将示例代码输入到 JavaScript 控制台里看看会发生什么。 JavaScript 控制台的更多信息请查看 浏览器开发者工具。
    
+
    重要：学习本节时，请尝试将示例代码输入到 JavaScript 控制台里看看会发生什么。JavaScript 控制台的更多信息请查看 浏览器开发者工具。
    
 
    
 
 
    变量（Variable）
    
@@ -256,7 +256,7 @@ 
    条件语句
    
   alert('但是巧克力才是我的最爱呀……');
 }
    
 
-
    if ( ... ) 中的表达式进行测试，用（上文所提到的）等于运算符来比较变量 iceCream 与字符串 'chocolate' 是否相等。 如果返回 true，则运行第一个代码块；如果返回 false，则跳过第一块直接运行 else 之后的第二个代码块。
    
+
    if ( ... ) 中的表达式进行测试，用（上文所提到的）等于运算符来比较变量 iceCream 与字符串 'chocolate' 是否相等。如果返回 true，则运行第一个代码块；如果返回 false，则跳过第一块直接运行 else 之后的第二个代码块。
    
 
 
    函数（Function）
    
 
@@ -296,7 +296,7 @@ 
    函数（Function）
    
 
 
    事件
    
 
-
    事件能为网页添加真实的交互能力。它可以捕捉浏览器操作并运行一些代码做为响应。最简单的事件是 点击事件，鼠标的点击操作会触发该事件。 可尝试将下面的代码输入到控制台，然后点击页面的任意位置：
    
+
    事件能为网页添加真实的交互能力。它可以捕捉浏览器操作并运行一些代码做为响应。最简单的事件是 点击事件，鼠标的点击操作会触发该事件。可尝试将下面的代码输入到控制台，然后点击页面的任意位置：
    
 
 
    document.querySelector('html').onclick = function() {
     alert('别戳我，我怕疼。');
@@ -346,7 +346,7 @@ 
    添加一个图像切换器
    
 
 
      
  
    1. 获取这张图片的 src 属性值。
      2. 
- 
    2. 用一个条件句来判断 src 的值是否等于原始图像的路径:
+ 
    3. 用一个条件句来判断 src 的值是否等于原始图像的路径：
   
        
    
      1. 如果是，则将 src 的值改为第二张图片的路径，并在 {{htmlelement("img")}} 内加载该图片。
        2. 
    
      2. 如果不是（意味着它已经修改过）, 则把 src 的值重新设置为原始图片的路径，即原始状态。
        3. 
@@ -359,7 +359,7 @@ 
        添加个性化欢迎信息
        
 
        下面来添加另一段代码，在用户初次进入站点时将网页的标题改成一段个性化欢迎信息（即在标题中添加用户的名字）。名字信息会由 Web Storage API 保存下来，即使用户关闭页面之后再重新打开，仍可得到之前的信息。还会添加一个选项，可以根据需要改变用户名字以更新欢迎信息。
        
 
 
          
- 
        1. 打开 index.html， 在 {{htmlelement("script")}} 标签前添加以下代码，将在页面底部显示一个“切换用户”字样的按钮：
+ 
        2. 打开 index.html，在 {{htmlelement("script")}} 标签前添加以下代码，将在页面底部显示一个“切换用户”字样的按钮：
 
   
          <button>切换用户</button>
          
  
          3. 
@@ -373,7 +373,7 @@ 
          添加个性化欢迎信息
          
   localStorage.setItem('name', myName);
   myHeading.textContent = 'Mozilla 酷毙了，' + myName;
 }
    
-  该函数首先调用了 prompt() 函数， 与 alert() 类似会弹出一个对话框。但是这里需要用户输入数据，并在确定后将数据存储在 myName 变量里。接下来将调用 localStorage API ，它可以将数据存储在浏览器中供后续获取。这里用 localStorage 的 setItem() 函数来创建一个'name' 数据项，并把 myName 变量复制给它。最后将 textContent 属性设置为一个欢迎字符串加上这个新设置的名字。
+  该函数首先调用了 prompt() 函数，与 alert() 类似会弹出一个对话框。但是这里需要用户输入数据，并在确定后将数据存储在 myName 变量里。接下来将调用 localStorage API，它可以将数据存储在浏览器中供后续获取。这里用 localStorage 的 setItem() 函数来创建一个'name' 数据项，并把 myName 变量复制给它。最后将 textContent 属性设置为一个欢迎字符串加上这个新设置的名字。
  
  • 接下来，添加以下的 if ... else 块。我们可以称之为初始化代码，因为它在页面初次读取时进行构造工作：
   
    if(!localStorage.getItem('name')) {
   setUserName();
@@ -389,11 +389,11 @@ 
    添加个性化欢迎信息
    
  
    • 
 
 
-
    第一次访问网页时，页面将询问用户名并发出一段个性化的信息。可随时点击按钮来改变用户名 。告诉你一个额外的福利，因为用户名是保存在 localStorage 里的，网页关闭后也不会丢失，所以重新打开浏览器时所设置的名字信息将依然存在:)
    
+
    第一次访问网页时，页面将询问用户名并发出一段个性化的信息。可随时点击按钮来改变用户名。告诉你一个额外的福利，因为用户名是保存在 localStorage 里的，网页关闭后也不会丢失，所以重新打开浏览器时所设置的名字信息将依然存在:)
    
 
 
    用户名为 null?
    
 
-
    运行示例代码，弹出输入用户名的对话框，试着按下 取消 按钮。此时标题会显示为 “Mozilla 酷毙了，null”。这是因为取消提示对话框后值将设置为 null，这是 JavaScript 中的一个特殊值，表示引用不存在。
    
+
    运行示例代码，弹出输入用户名的对话框，试着按下 取消 按钮。此时标题会显示为“Mozilla 酷毙了，null”。这是因为取消提示对话框后值将设置为 null，这是 JavaScript 中的一个特殊值，表示引用不存在。
    
 
 
    也可以不输入任何名字直接按 确认，你的标题会显示为“Mozilla 酷毙了，”，原因么显而易见。
    
 
@@ -413,7 +413,7 @@ 
    用户名为 null?
    
 
 
    小结
    
 
-
    如果你按部就班完成本文的实践，那么最终可以得到以下页面 （可以 查看我们的版本）：
    
+
    如果你按部就班完成本文的实践，那么最终可以得到以下页面（可以 查看我们的版本）：
    
 
 
    测试页面，添加了 一个 js 脚本，可以显示用户名、更改 Firefox 图片。
    
 
diff --git a/files/zh-cn/learn/getting_started_with_the_web/publishing_your_website/index.html b/files/zh-cn/learn/getting_started_with_the_web/publishing_your_website/index.html
index 729e4d506f494e..ed2a202785fcb4 100644
--- a/files/zh-cn/learn/getting_started_with_the_web/publishing_your_website/index.html
+++ b/files/zh-cn/learn/getting_started_with_the_web/publishing_your_website/index.html
@@ -6,7 +6,7 @@
   - GitHub
   - Google App Engine
   - Web
-  - Web服务
+  - Web 服务
   - 初学者
   - 发布
 translation_of: Learn/Getting_started_with_the_web/Publishing_your_website
@@ -29,7 +29,7 @@ 
    获取主机服务和域名
    
 
 
      
  
    • 主机服务 — 在主机服务提供商的 Web 服务器上租用文件空间。将你网站的文件上传到这里，然后服务器会提供 Web 用户需求的内容。
      • 
- 
    • 域名——一个可以让人们访问的独一无二的地址，比如 http://www.mozilla.org，或 http://www.bbc.co.uk 。你可以从域名注册商租借域名 。
      • 
+ 
    • 域名——一个可以让人们访问的独一无二的地址，比如 http://www.mozilla.org，或 http://www.bbc.co.uk 。你可以从域名注册商租借域名。
      • 
 
    
 
 
    许多专业的网站通过这种方法接入互联网。
    
@@ -41,9 +41,9 @@ 
    获取主机服务和域名
    
 
    寻找主机服务和域名的建议
    
 
 
      
- 
    • 我们不会推荐任何商业化的主机公司。要找到主机公司和域名注册商，只需要搜索 "网络主机服务" 和 "域名" 来找到一家出售域名的公司。 所有这种类型的公司都允许你查看你想要的域名是否可用。
      • 
+ 
    • 我们不会推荐任何商业化的主机公司。要找到主机公司和域名注册商，只需要搜索 "网络主机服务" 和 "域名" 来找到一家出售域名的公司。所有这种类型的公司都允许你查看你想要的域名是否可用。
      • 
  
    • 你的家庭或办公 {{Glossary("ISP", "网络服务提供商")}} 可能会提供一些受限制的的小型主机空间。它们的能使用的功能都会受到限制，但是它们会非常适合你的第一个实验的——联系一下他们！
      • 
- 
    • 有一些免费服务比如 Neocities ， Blogspot ，和 Wordpress 。重复一遍， 一分钱一分货，不过它们对于你的初次实验可能会是很理想的。 免费服务大部分也不需要 FTP 软件来上传文件——你只需要将文件拖入到它们网页的界面里。
      • 
+ 
    • 有一些免费服务比如 Neocities ， Blogspot ，和 Wordpress 。重复一遍，一分钱一分货，不过它们对于你的初次实验可能会是很理想的。免费服务大部分也不需要 FTP 软件来上传文件——你只需要将文件拖入到它们网页的界面里。
      • 
  
    • 有时公司会打包提供主机服务和域名。
      • 
 
    
 
@@ -52,15 +52,15 @@ 
    使用在线工具
 
    有一些工具能使你在线发布网站 :
    
 
 
      
- 
    • GitHub 是一个“社交编程”网站。它允许你上传代码库并储存在 Git 版本控制系统里。 然后你可以协作代码项目，系统是默认开源的，也就是说世界上任何人都可以找到你 GitHub 上的代码。去使用 GitHub，从中学习并且提高自己吧！ 你也可以对别人的代码那样做！ 这是一个非常重要、有用的社区，而且 Git/GitHub 是非常流行的 版本控制系统 — 大部分科技公司在工作中使用它。 GitHub 有一个非常有用的特点叫 GitHub pages，允许你将网站代码放在网上。
      • 
- 
    • Google App Engine是一个让你可以在Google的基础架构上构建和运行应用的强劲平台——无论你是需要从头开始构建多级web应用还是托管一个静态网站。参阅How do you host your website on Google App Engine?以获取更多信息。
      • 
+ 
    • GitHub 是一个“社交编程”网站。它允许你上传代码库并储存在 Git 版本控制系统里。 然后你可以协作代码项目，系统是默认开源的，也就是说世界上任何人都可以找到你 GitHub 上的代码。去使用 GitHub，从中学习并且提高自己吧！ 你也可以对别人的代码那样做！这是一个非常重要、有用的社区，而且 Git/GitHub 是非常流行的 版本控制系统 — 大部分科技公司在工作中使用它。 GitHub 有一个非常有用的特点叫 GitHub pages，允许你将网站代码放在网上。
      • 
+ 
    • Google App Engine 是一个让你可以在 Google 的基础架构上构建和运行应用的强劲平台——无论你是需要从头开始构建多级 web 应用还是托管一个静态网站。参阅How do you host your website on Google App Engine?以获取更多信息。
      • 
 
    
 
 
    不同于大部分其它托管服务，这类工具通常是免费的，不过你只能使用有限的功能。
    
 
 
    使用像 CodePen 这样基于 Web 的集成开发环境
    
 
-
    有许多web应用能够仿真一个网站开发环境。你可以在这种应用——通常只有一个标签页——里输入 HTML、CSS 和 JavaScript 代码然后像显示网页一样显示代码的结果。通常这些工具都很简单，对学习很有帮助，而且至少有免费的基本功能，它们在一个独特的网址显示你提交的网页。不过，这些应用的基础功能很有限，而且应用通常不提供空间来存储图像等内容。
    
+
    有许多 web 应用能够仿真一个网站开发环境。你可以在这种应用——通常只有一个标签页——里输入 HTML、CSS 和 JavaScript 代码然后像显示网页一样显示代码的结果。通常这些工具都很简单，对学习很有帮助，而且至少有免费的基本功能，它们在一个独特的网址显示你提交的网页。不过，这些应用的基础功能很有限，而且应用通常不提供空间来存储图像等内容。
    
 
 
    使用一下以下几种工具，看看你最喜欢哪一个：
    
 
@@ -73,24 +73,24 @@ 
    使用像 Code
 
 
    
 
-
    通过GitHub发布
    
+
    通过 GitHub 发布
    
 
-
    现在，让我们通过Github页面告诉你公布的你的代码是如此的简单。
    
+
    现在，让我们通过 Github 页面告诉你公布的你的代码是如此的简单。
    
 
 
      
- 
    1. 首先， 注册一个GitHub账号， 并确认你的邮箱地址。
      2. 
- 
    2. 接下来，你需要创建一个新的资源库( repository )来存放你的文件。
      3. 
+ 
    3. 首先， 注册一个 GitHub 账号， 并确认你的邮箱地址。
      4. 
+ 
    4. 接下来，你需要创建一个新的资源库 ( repository ) 来存放你的文件。
      5. 
  
    5. 在这个页面上，在 Repository name 输入框里输入  username.github.io，username 是你的用户名。比如，我们的朋友 bobsmith 会输入  bobsmith.github.io。同时勾选  Initialize this repository with a README ，然后点击 Create repository。
      6. 
- 
    6. 然后，将你的网站文件夹里的内容拖拽到你的资源库( repository )，再点击 Commit changes 。
+ 
    7. 然后，将你的网站文件夹里的内容拖拽到你的资源库 ( repository )，再点击 Commit changes 。
   
      
-  
      提示: 确保你的文件夹有一个 index.html 文件.
      
+  
      提示: 确保你的文件夹有一个 index.html 文件。
      
   
      
  
      8. 
  
    8. 
-  
      现在将你的浏览器转到 username.github.io 来在线查看你的网站。比如，如果用户名为chrisdavidmills, 请转到 chrisdavidmills.github.io。
      
+  
      现在将你的浏览器转到 username.github.io 来在线查看你的网站。比如，如果用户名为 chrisdavidmills, 请转到 chrisdavidmills.github.io。
      
 
   
      
-  
      提示: 你的网站可能需要几分钟的时间才能投入使用。 如果它不能立即工作，你可能需要等待几分钟，然后再试一次。
      
+  
      提示: 你的网站可能需要几分钟的时间才能投入使用。如果它不能立即工作，你可能需要等待几分钟，然后再试一次。
      
   
      
  
      9. 
 
    
diff --git a/files/zh-cn/learn/getting_started_with_the_web/the_web_and_web_standards/index.html b/files/zh-cn/learn/getting_started_with_the_web/the_web_and_web_standards/index.html
index 48c2409852b0ef..1d01ffad2f2270 100644
--- a/files/zh-cn/learn/getting_started_with_the_web/the_web_and_web_standards/index.html
+++ b/files/zh-cn/learn/getting_started_with_the_web/the_web_and_web_standards/index.html
@@ -1,9 +1,9 @@
 ---
-title: Web 和 Web标准
+title: Web 和 Web 标准
 slug: Learn/Getting_started_with_the_web/The_web_and_web_standards
 tags:
   - Web
-  - Web标准
+  - Web 标准
   - 初学者
   - 前端
   - 学习
@@ -11,67 +11,67 @@
 ---
 
    {{learnsidebar}}
    
 
-
    这篇文章提供了一些有用的 Web 背景知识——它是如何产生的，什么是 Web 标准技术，它们是如何协同工作的，为什么“ Web 开发人员”是一个很好的职业选择，以及您将在本课程中学习哪些最佳做法。
    
+
    这篇文章提供了一些有用的 Web 背景知识——它是如何产生的，什么是 Web 标准技术，它们是如何协同工作的，为什么“Web 开发人员”是一个很好的职业选择，以及您将在本课程中学习哪些最佳做法。
    
 
 
    Web 简史
    
 
-
    我们会简单叙述，因为别处已有很多关于 Web 历史的详尽说明，稍后我们会链接到它们（如果那您对更多细节内容感兴趣，也请试着在您惯用的搜索引擎中搜索“ Web 的历史”以获取相关内容。）
    
+
    我们会简单叙述，因为别处已有很多关于 Web 历史的详尽说明，稍后我们会链接到它们（如果那您对更多细节内容感兴趣，也请试着在您惯用的搜索引擎中搜索“Web 的历史”以获取相关内容。）
    
 
-
    在20世纪60年代末期，美国军方开发了一个名为 ARPANET 的通信网络。这可以认为是 Web 的先驱，因为它基于 分组交换（ packet switching） 进行工作，并且首次实现了  TCP/IP协议族（TCP/IP protocol suite） 。这两种技术构成了互联网基础设施的基础。
    
+
    在 20 世纪 60 年代末期，美国军方开发了一个名为 ARPANET 的通信网络。这可以认为是 Web 的先驱，因为它基于 分组交换（ packet switching） 进行工作，并且首次实现了  TCP/IP 协议族（TCP/IP protocol suite） 。这两种技术构成了互联网基础设施的基础。
    
 
-
    1980 年，Tim Berners-Lee （通常称之为 TimBL ）写了一个叫 ENQUIRE 的笔记本程序，这个程序实现了不同节点之间链接的概念。听起来有点熟悉对吧？
    
+
    1980 年，Tim Berners-Lee（通常称之为 TimBL）写了一个叫 ENQUIRE 的笔记本程序，这个程序实现了不同节点之间链接的概念。听起来有点熟悉对吧？
    
 
-
    快进到 1989 年， TimBL 在 CERN 撰写了 《Information Management: A Proposal》 和 《HyperText》 ； 这两个出版物共同为 Web 将如何工作做了铺垫。两个出版物获得了极大的关注，这足以说服TimBL的上司让他继续前进，并创建一个全球超文本系统。
    
+
    快进到 1989 年，TimBL 在 CERN 撰写了 《Information Management: A Proposal》 和《HyperText》 ； 这两个出版物共同为 Web 将如何工作做了铺垫。两个出版物获得了极大的关注，这足以说服 TimBL 的上司让他继续前进，并创建一个全球超文本系统。
    
 
 
    到 1990 年底，TimBL 已经创建了运行第一个版本的 Web 所需的所有东西——  HTTP， HTML ，名为 WorldWideWeb 的第一个 Web 浏览器，一个 HTTP 服务器和一些用于查看的网页。
    
 
-
    在随后的几年中，随着多个浏览器的发布，数以千计 Web 服务器的建立，上百万网页的生成， Web 爆发式发展。OK，这只是对事件非常粗略的描述，但我向您说过会简单叙述。
    
+
    在随后的几年中，随着多个浏览器的发布，数以千计 Web 服务器的建立，上百万网页的生成，Web 爆发式发展。OK，这只是对事件非常粗略的描述，但我向您说过会简单叙述。
    
 
-
    最后一个值得分享的重要事件在1994年，TimBL建立了万维网联盟（ World Wide Web Consortium ，W3C ），该组织汇集了来自许多不同技术公司的代表，共同制定 Web 技术规范。随后其他的技术像 CSS 和 JavaScript 出现了， Web 开始看起来更像我们现在所了解的 Web 。
    
+
    最后一个值得分享的重要事件在 1994 年，TimBL 建立了万维网联盟（World Wide Web Consortium，W3C），该组织汇集了来自许多不同技术公司的代表，共同制定 Web 技术规范。随后其他的技术像 CSS 和 JavaScript 出现了，Web 开始看起来更像我们现在所了解的 Web。
    
 
 
    Web 标准
    
 
-
    Web 标准是我们用来建立 Web 网站的技术。这些标准存在于名为规范的较长的技术文档中，该文档详细说明了技术应如何工作。这些文档对于学习如何使用它们所描述的技术并不是很有用 （这就是我们建立像MDN Web Docs这样的网站的原因），而是旨在供软件工程师用来实现这些技术（通常在 Web 浏览器中）。
    
+
    Web 标准是我们用来建立 Web 网站的技术。这些标准存在于名为规范的较长的技术文档中，该文档详细说明了技术应如何工作。这些文档对于学习如何使用它们所描述的技术并不是很有用（这就是我们建立像 MDN Web Docs 这样的网站的原因），而是旨在供软件工程师用来实现这些技术（通常在 Web 浏览器中）。
    
 
-
    例如， HTML Living Standard 描述了应如何实现 HTML （所有 HTML 元素及其关联的 API 和其他相关技术）。
    
+
    例如， HTML Living Standard 描述了应如何实现 HTML（所有 HTML 元素及其关联的 API 和其他相关技术）。
    
 
-
    Web 标准是由标准机构创建的——这些机构邀请不同技术公司的人员聚集在一起，并就如何以最佳方式实现所有用例达成共识。W3C是最著名的 Web 标准组织，但还有其他组织，例如WHATWG（负责 HTML 语言的现代化），ECMA（发布基于 JavaScript 的ECMAScript标准），Khronos（发布3D图形技术，例如 Web GL）等。
    
+
    Web 标准是由标准机构创建的——这些机构邀请不同技术公司的人员聚集在一起，并就如何以最佳方式实现所有用例达成共识。W3C 是最著名的 Web 标准组织，但还有其他组织，例如WHATWG（负责 HTML 语言的现代化），ECMA（发布基于 JavaScript 的 ECMAScript 标准），Khronos（发布 3D 图形技术，例如 Web GL）等。
    
 
-
    “开放” 标准
    
+
    “开放”标准
    
 
-
    Web 标准的关键方面之一， TimBL 和 W3C 从一开始就认同的一点， Web （和 Web 技术）应该自由地贡献和使用，并且不受专利/许可的约束。因此，任何人都可以编写代码免费建立网站，并且任何人都可以为编写规范的标准创建过程做出贡献。
    
+
    Web 标准的关键方面之一，TimBL 和 W3C 从一开始就认同的一点，Web（和 Web 技术）应该自由地贡献和使用，并且不受专利/许可的约束。因此，任何人都可以编写代码免费建立网站，并且任何人都可以为编写规范的标准创建过程做出贡献。
    
 
-
    由于 Web 技术是开放的，因此在许多不同公司之间的协作中，这意味着没有一家公司可以控制它，这确实是一件好事。 您不会希望任何一家公司突然决定将整个 Web 置于付费壁垒之后，或者发布每个人都必须购买以继续制作网站的新版 HTML ，或者更糟糕的是，仅仅将他们不再感兴趣的网站关闭。
    
+
    由于 Web 技术是开放的，因此在许多不同公司之间的协作中，这意味着没有一家公司可以控制它，这确实是一件好事。 您不会希望任何一家公司突然决定将整个 Web 置于付费壁垒之后，或者发布每个人都必须购买以继续制作网站的新版 HTML，或者更糟糕的是，仅仅将他们不再感兴趣的网站关闭。
    
 
 
    这一点允许 Web 保持免费可用，使其成为公共资源。
    
 
 
    不要破坏 Web
    
 
-
    关于开放式 Web 标准，您将听到的另一句话是“不要破坏 Web ”——这句话是说，引入的任何新 Web 技术都应向后兼容以前的版本（即旧网站仍将继续工作），并向前兼容（将未来的技术与我们目前拥有的技术兼容）。在阅读此处介绍的学习材料时，您将开始学习如何通过一些非常精妙的设计和做法来实现这一点。
    
+
    关于开放式 Web 标准，您将听到的另一句话是“不要破坏 Web”——这句话是说，引入的任何新 Web 技术都应向后兼容以前的版本（即旧网站仍将继续工作），并向前兼容（将未来的技术与我们目前拥有的技术兼容）。在阅读此处介绍的学习材料时，您将开始学习如何通过一些非常精妙的设计和做法来实现这一点。
    
 
 
    Web 开发者是一个很好的选择
    
 
-
    如果您正在寻找工作，网络行业是一个非常有吸引力的市场。 最新公布的数据表明，目前全球大约有 1900 万网络开发人员，并且这个数字在接下来的十年中将增长两倍以上。 同时，该行业存在技能短缺的问题，那么还有什么更好的时间来学习 Web 开发呢？
    
+
    如果您正在寻找工作，网络行业是一个非常有吸引力的市场。最新公布的数据表明，目前全球大约有 1900 万网络开发人员，并且这个数字在接下来的十年中将增长两倍以上。同时，该行业存在技能短缺的问题，那么还有什么更好的时间来学习 Web 开发呢？
    
 
 
    然而，这并不仅仅是娱乐或者游戏——建立网站比以前要复杂得多，并且您必须花一些时间来研究要用到的所有不同的技术，所有您需要了解的技巧和最佳的技术做法，以及所有需要实现的典型模式。真正起步需要花几个月的时间，然后您需要继续学习，继续练习和完善自己的技术，以使您的知识与 Web 平台上出现的所有新工具和功能步调一致。
    
 
 
    唯一不变的就是变化。
    
 
-
    这听起来很难？ 不用担心——我们致力于为您提供入门所需的一切，事情将会变得更加轻松。 一旦您适应了网络的不断变化和不确定性，您将开始享受乐趣。 作为 Web 社区的一员，您将拥有整个 Web 的联系人和有用的资料来帮助您，并且您将开始享受它所带来的创造的可能性。
    
+
    这听起来很难？不用担心——我们致力于为您提供入门所需的一切，事情将会变得更加轻松。一旦您适应了网络的不断变化和不确定性，您将开始享受乐趣。作为 Web 社区的一员，您将拥有整个 Web 的联系人和有用的资料来帮助您，并且您将开始享受它所带来的创造的可能性。
    
 
 
    你现在是数字创意家了。享受这种体验和谋生的可能性吧。
    
 
 
    现代网络技术概述
    
 
-
    如果您想成为前端 Web 开发人员，可以学习多种技术。 在本节中，我们将简要描述它们。 有关其中某些功能是如何协同工作的详尽说明，请阅读我们的文章  Web 是如何工作的。
    
+
    如果您想成为前端 Web 开发人员，可以学习多种技术。在本节中，我们将简要描述它们。有关其中某些功能是如何协同工作的详尽说明，请阅读我们的文章  Web 是如何工作的。
    
 
 
    浏览器
    
 
-
    您可能此刻正在 Web 浏览器中阅读这些文字（除非您已将其打印出来，或正在使用辅助技术，例如屏幕阅读器将其读给您听）。 Web 浏览器是人们用来浏览 Web 的软件程序，包括 Firefox、Chrome、Opera、Safari 和 Edge.
    
+
    您可能此刻正在 Web 浏览器中阅读这些文字（除非您已将其打印出来，或正在使用辅助技术，例如屏幕阅读器将其读给您听）。Web 浏览器是人们用来浏览 Web 的软件程序，包括 Firefox、Chrome、Opera、Safari 和 Edge.
    
 
 
    HTTP
    
 
-
    超文本传输协议（ Hypertext Transfer Protocol ， HTTP），它允许 Web 浏览器与 Web 服务器（存储网站的位置）进行通信。 典型的通信就像这样
    
+
    超文本传输协议（Hypertext Transfer Protocol， HTTP），它允许 Web 浏览器与 Web 服务器（存储网站的位置）进行通信。典型的通信就像这样
    
 
 
    "你好 Web 服务器。你可以给我用于渲染 bbc.co.uk 的文件吗？"
 
@@ -79,7 +79,7 @@ 
    HTTP
    
 
 [下载文件并渲染 Web 页面]
    
 
-
    HTTP消息（称为请求和响应）的实际语法不是人类可读的，但这个例子为您提供了基本概念。
    
+
    HTTP 消息（称为请求和响应）的实际语法不是人类可读的，但这个例子为您提供了基本概念。
    
 
 
    HTML , CSS , 和 JavaScript
    
 
@@ -87,7 +87,7 @@ 
    HTML , CSS , 和 JavaScript
    
 
 
      
  
    • 
-  
      超文本标记语言（ HTML ）是一种标记语言，由可以包装（标记）内容以赋予其含义（语义）和结构的各种元素组成。简单的 HTML 看起来像这样：
      
+  
      超文本标记语言（HTML）是一种标记语言，由可以包装（标记）内容以赋予其含义（语义）和结构的各种元素组成。简单的 HTML 看起来像这样：
      
 
   
      <h1>这是一个顶级标题</h1>
 
@@ -95,16 +95,16 @@ 
      HTML , CSS , 和 JavaScript
      
 
 <img src="cat.jpg" alt="我家猫猫的图片">
      
 
-  
      如果我们采用房屋建筑类比的话， HTML 就像房屋的地基和墙壁一样，赋予房屋结构并将其结合在一起。
      
+  
      如果我们采用房屋建筑类比的话，HTML 就像房屋的地基和墙壁一样，赋予房屋结构并将其结合在一起。
      
  
      • 
  
    • 
-  
      级联样式表（ Cascading Style Sheets ， CSS ）是一种基于规则的语言，用于将样式应用于 HTML ，例如，设置文本和背景颜色，添加边框，设置动画效果或以某种方式布置页面。 作为一个简单的示例，以下代码会将我们的 HTML 段落变为红色：
      
+  
      级联样式表（Cascading Style Sheets，CSS）是一种基于规则的语言，用于将样式应用于 HTML，例如，设置文本和背景颜色，添加边框，设置动画效果或以某种方式布置页面。作为一个简单的示例，以下代码会将我们的 HTML 段落变为红色：
      
 
   
      p  {
   color: red;
 }
      
 
-  
      在房屋类比中， CSS 就像用来使房屋看起来更漂亮的油漆，墙纸，地毯和油画。
      
+  
      在房屋类比中，CSS 就像用来使房屋看起来更漂亮的油漆，墙纸，地毯和油画。
      
  
      • 
  
    • 
   
      从动态样式切换到从服务器获取更新，再到复杂的 3D 图形， JavaScript  是我们用来向网站添加交互性的编程语言。以下简单的 JavaScript 将在内存中存储对我们段落的引用，并更改其中的文本：
      
@@ -112,29 +112,29 @@ 
      HTML , CSS , 和 JavaScript
      
   
      let pElem = document.querySelector('p');
 pElem.textContent =  '我们改变了文本！';
      
 
-  
      在房屋类比中， JavaScript 就像炊具，电视，微波炉或吹风机，这些东西为您的房屋提供了有用的功能。
      
+  
      在房屋类比中，JavaScript 就像炊具，电视，微波炉或吹风机，这些东西为您的房屋提供了有用的功能。
      
  
      • 
 
    
 
 
    开发工具
    
 
-
    一旦了解了可用于构建网页的“原始”技术（例如 HTML ， CSS 和 JavaScript ），您很快就会发现各种可用于使工作更轻松或更有效的工具。 例如：
    
+
    一旦了解了可用于构建网页的“原始”技术（例如 HTML，CSS 和 JavaScript），您很快就会发现各种可用于使工作更轻松或更有效的工具。 例如：
    
 
 
      
- 
    • 现代浏览器中的 开发人员工具（ developer tools ）可用于调试代码。
      • 
- 
    • 可用于运行测试以显示您的代码是否按预期运行的 测试工具（ Testing tools ）。
      • 
+ 
    • 现代浏览器中的 开发人员工具（developer tools）可用于调试代码。
      • 
+ 
    • 可用于运行测试以显示您的代码是否按预期运行的 测试工具（Testing tools）。
      • 
  
    • 建立在 JavaScript 之上的库和框架，使您可以更快，更有效地构建某些类型的网站。
      • 
- 
    • 所谓的 “ Linters” ，它包含了一组规则，检查您的代码之后，会突出显示您未正确遵循规则的地方。
      • 
- 
    • Minifiers ，它将代码文件中的所有空格删除以使其更小，从而可以更快地从服务器下载。
      • 
+ 
    • 所谓的“Linters” ，它包含了一组规则，检查您的代码之后，会突出显示您未正确遵循规则的地方。
      • 
+ 
    • Minifiers，它将代码文件中的所有空格删除以使其更小，从而可以更快地从服务器下载。
      • 
 
    
 
 
    服务器端语言和框架
    
 
-
    HTML ， CSS 和 JavaScript 是前端（或客户端）语言，这意味着它们由浏览器运行以生成用户可以使用的网站前端。
    
+
    HTML，CSS 和 JavaScript 是前端（或客户端）语言，这意味着它们由浏览器运行以生成用户可以使用的网站前端。
    
 
-
    还有另一类语言，称为后端（或服务器端）语言，这意味着它们先在服务器上运行，然后再将结果发送到浏览器进行显示。 服务器端语言的一种典型用法是从数据库中获取一些数据并生成一些 HTML 以包含该数据，然后再将 HTML 发送给浏览器以将其显示给用户。
    
+
    还有另一类语言，称为后端（或服务器端）语言，这意味着它们先在服务器上运行，然后再将结果发送到浏览器进行显示。服务器端语言的一种典型用法是从数据库中获取一些数据并生成一些 HTML 以包含该数据，然后再将 HTML 发送给浏览器以将其显示给用户。
    
 
-
    服务器端语言的例子包括 ASP.NET ， Python ， PHP 和 NodeJS 。
    
+
    服务器端语言的例子包括 ASP.NET，Python，PHP 和 NodeJS。
    
 
 
    Web 最佳做法
    
 
@@ -149,17 +149,17 @@ 
    Web 最佳做法
    
  
  • 用户 4 可能正在使用无法运行现代浏览器的旧台式机。
    • 
 
 
-
    因为您不完全知道用户将使用什么，所以您需要进行防御性设计——使您的网站尽可能灵活，以便上述所有用户都可以使用它，即使他们可能得到并不完全相同的体验。简而言之，我们正在努力使所有人都能使用 Web 。
    
+
    因为您不完全知道用户将使用什么，所以您需要进行防御性设计——使您的网站尽可能灵活，以便上述所有用户都可以使用它，即使他们可能得到并不完全相同的体验。简而言之，我们正在努力使所有人都能使用 Web。
    
 
 
    在学习的某些时候，您将遇到以下概念。
    
 
 
      
- 
    • 跨浏览器兼容性（ Cross-browser compatibility ）是一种确保您的网页能够在尽可能多的设备上运行的做法。这包括使用所有浏览器都支持的技术，为可以处理这些浏览器的浏览器提供更好的体验（逐步增强），和/或编写代码，从而使之退回到较旧的浏览器中更简单但仍可用的体验（平稳降级）。它还涉及大量测试，以查看某些浏览器是否有任何故障，然后进行更多工作来修复这些故障。
      • 
- 
    • 响应式网页设计（ Responsive Web design ）是一种使功能和布局变得灵活以便它们可以自动适应不同的浏览器的做法。一个明显的例子是在桌面上的宽屏浏览器中以一种方式进行布局，但在手机浏览器中以另一种更紧凑的单列布局的网站。现在请尝试调整浏览器窗口的宽度，然后看看会发生什么。
      • 
- 
    • 性能（ Performance ）意味着要尽快加载网站，而且还应使其直观易用，以使用户不会碰壁离开。
      • 
- 
    • 可访问性（ Accessibility ）意味着使您的网站可供尽可能多的不同类型的人使用（相关概念是多样性和包容性，以及包容性设计）。这包括视力障碍，听力障碍，认知障碍或肢体障碍的人。它也不仅仅局限于残疾人——也包含年轻人或老年人、来自不同文化的人、使用移动设备的人、或网络连接不可靠或缓慢的人。
      • 
- 
    • 国际化（ Internationalization ）意味着使网站可以供来自不同文化背景的人使用，这些人会说和您不同的语言。这一点可以考虑一些技术手段（例如，更改布局以使其对于从右到左甚至垂直的语言仍然可以正常使用）和人为手段（例如，使用简单的非俚语，以便使以您的语言作为第二或第三语言的人更可能理解您的文字）。
      • 
- 
    • 隐私与安全（ Privacy & Security ） 这两个概念相关但不同。隐私是指允许人们私下从事其业务，而不是监视他们或收集您绝对不需要的更多数据。安全性是指以安全的方式构建您的网站，以使恶意用户无法从您或您的用户那里窃取信息。
      • 
+ 
    • 跨浏览器兼容性（Cross-browser compatibility）是一种确保您的网页能够在尽可能多的设备上运行的做法。这包括使用所有浏览器都支持的技术，为可以处理这些浏览器的浏览器提供更好的体验（逐步增强），和/或编写代码，从而使之退回到较旧的浏览器中更简单但仍可用的体验（平稳降级）。它还涉及大量测试，以查看某些浏览器是否有任何故障，然后进行更多工作来修复这些故障。
      • 
+ 
    • 响应式网页设计（Responsive Web design）是一种使功能和布局变得灵活以便它们可以自动适应不同的浏览器的做法。一个明显的例子是在桌面上的宽屏浏览器中以一种方式进行布局，但在手机浏览器中以另一种更紧凑的单列布局的网站。现在请尝试调整浏览器窗口的宽度，然后看看会发生什么。
      • 
+ 
    • 性能（Performance）意味着要尽快加载网站，而且还应使其直观易用，以使用户不会碰壁离开。
      • 
+ 
    • 可访问性（Accessibility）意味着使您的网站可供尽可能多的不同类型的人使用（相关概念是多样性和包容性，以及包容性设计）。这包括视力障碍，听力障碍，认知障碍或肢体障碍的人。它也不仅仅局限于残疾人——也包含年轻人或老年人、来自不同文化的人、使用移动设备的人、或网络连接不可靠或缓慢的人。
      • 
+ 
    • 国际化（Internationalization）意味着使网站可以供来自不同文化背景的人使用，这些人会说和您不同的语言。这一点可以考虑一些技术手段（例如，更改布局以使其对于从右到左甚至垂直的语言仍然可以正常使用）和人为手段（例如，使用简单的非俚语，以便使以您的语言作为第二或第三语言的人更可能理解您的文字）。
      • 
+ 
    • 隐私与安全（Privacy & Security） 这两个概念相关但不同。隐私是指允许人们私下从事其业务，而不是监视他们或收集您绝对不需要的更多数据。安全性是指以安全的方式构建您的网站，以使恶意用户无法从您或您的用户那里窃取信息。
      • 
 
    
 
 
    See also
    
diff --git a/files/zh-cn/learn/getting_started_with_the_web/what_will_your_website_look_like/index.md b/files/zh-cn/learn/getting_started_with_the_web/what_will_your_website_look_like/index.md
index afaee089cc3055..b21eef092e9b03 100644
--- a/files/zh-cn/learn/getting_started_with_the_web/what_will_your_website_look_like/index.md
+++ b/files/zh-cn/learn/getting_started_with_the_web/what_will_your_website_look_like/index.md
@@ -16,7 +16,7 @@ translation_of: Learn/Getting_started_with_the_web/What_will_your_website_look_l
 ---
 {{LearnSidebar}}{{PreviousMenuNext("Learn/Getting_started_with_the_web/Installing_basic_software", "Learn/Getting_started_with_the_web/Dealing_with_files", "Learn/Getting_started_with_the_web")}}
 
-*设计网站外观?* 在为网站编写代码之前必须进行规划和设计工作，包括“网站提供什么信息？”、“想要什么字体和颜色？”、“网站是做什么的？”
+*设计网站外观？* 在为网站编写代码之前必须进行规划和设计工作，包括“网站提供什么信息？”、“想要什么字体和颜色？”、“网站是做什么的？”
 
 ## 第一步：计划
 
@@ -59,7 +59,7 @@ translation_of: Learn/Getting_started_with_the_web/What_will_your_website_look_l
 访问 [Google 图像搜索](https://www.google.com/imghp?gws_rd=ssl) 来搜索合适的图片。
 
 1. 当找到你想要的图像时，点击该图像以获得其放大的视图。
-2. 右键单击图像（Mac上为 Ctrl + 单击），选择*将图像另存为...*，并选择一个安全的地方来保存你的图像。或者，从浏览器地址栏中复制图片的网址，以便以后使用。
+2. 右键单击图像（Mac 上为 Ctrl + 单击），选择*将图像另存为...*，并选择一个安全的地方来保存你的图像。或者，从浏览器地址栏中复制图片的网址，以便以后使用。
 
 ![](updated-google-images.png)
 
diff --git a/files/zh-cn/learn/html/howto/add_a_hit_map_on_top_of_an_image/index.html b/files/zh-cn/learn/html/howto/add_a_hit_map_on_top_of_an_image/index.html
index f5de33b8d4ab06..2e449f9f92e666 100644
--- a/files/zh-cn/learn/html/howto/add_a_hit_map_on_top_of_an_image/index.html
+++ b/files/zh-cn/learn/html/howto/add_a_hit_map_on_top_of_an_image/index.html
@@ -10,11 +10,11 @@
 
-   
+   
-   
+   
@@ -26,36 +26,36 @@
 
 
    图像映射和它的缺点
    
 
-
    当你在{{htmlelement('a')}}标签中嵌套图像, 整个图像是链接到一个网页的。但在图像映射中，包含多个活动区域（称为“热点”），可以链接到不同的资源地址。
    
+
    当你在{{htmlelement('a')}}标签中嵌套图像， 整个图像是链接到一个网页的。但在图像映射中，包含多个活动区域（称为“热点”），可以链接到不同的资源地址。
    图像映射原本非常流行于导航策略，但是前提需要考虑它的性能和可访问性。
    
 
-
    Text links (perhaps styled with CSS) 比图像映射更具优势：文本链接更轻量级、好维护、更易于SEO，而且支持更多形式需求的访问（如，屏幕阅读器、纯文本浏览器、翻译服务等）。
    
+
    Text links (perhaps styled with CSS) 比图像映射更具优势：文本链接更轻量级、好维护、更易于 SEO，而且支持更多形式需求的访问（如，屏幕阅读器、纯文本浏览器、翻译服务等）。
    如何正确的插入一张图像映射
    
 
-
    步骤1: 图片
    
+
    步骤 1: 图片
    不是所有图片都合适。
      
- 
    • 图片必须明确表明当用户跟随图片链接时会发生什么。 alt 属性是必须的,  但很多人注意不到。
      • 
+ 
    • 图片必须明确表明当用户跟随图片链接时会发生什么。 alt 属性是必须的，  但很多人注意不到。
      • 
  
    • 图片必须明确指出热点的开始和结束位置。
      • 
- 
    • 在任何尺寸的视口下，热点都需要足够大，方便用户可以点击。多大足够呢？72 × 72 CSS pixels 是一个推荐的最小尺寸,  包括触摸目标之间额外的间隙。在 50languages.com (as of time of writing) 上的世界地图可以完美诠释这一点。 用户点击Russia 或 North America 要比 Albania 或 Estonia容易得多。
      • 
+ 
    • 在任何尺寸的视口下，热点都需要足够大，方便用户可以点击。多大足够呢？72 × 72 CSS pixels 是一个推荐的最小尺寸，  包括触摸目标之间额外的间隙。在 50languages.com (as of time of writing) 上的世界地图可以完美诠释这一点。 用户点击 Russia 或 North America 要比 Albania 或 Estonia 容易得多。
      • 
 
    插入图片的方式 和通常一样 (用 {{htmlelement("img")}} 标签  和 {{htmlattrxref("alt",'img')}} 文本). 如果图片只是用作导航容器， 你可以设置图片的 alt=""， 改在后面{{htmlelement('area')}} 的{{htmlattrxref("alt",'area')}} 中提供合适的文本。
    
 
-
    你将需要一个特殊的 {{htmlattrxref("usemap","img")}} 属性。 为图像映射提供一个唯一标识，这个标识不能包含空格。将这个标识 (preceded by a hash) 作为 usemap 属性的值:
    
+
    你将需要一个特殊的 {{htmlattrxref("usemap","img")}} 属性。 为图像映射提供一个唯一标识，这个标识不能包含空格。将这个标识 (preceded by a hash) 作为 usemap 属性的值：
    <img
   src="image-map.png"
   alt=""
   usemap="#example-map-1" />
    
 
-
    步骤2: 激活你的热点
    
+
    步骤 2: 激活你的热点
    
 
-
    在这一步中, 将所有代码放置 {{htmlelement('map')}} 标签中. <map> 只需要一个属性,  设置{{htmlattrxref("name","map")}} 和上面usemap属性一样的map值：
    
+
    在这一步中， 将所有代码放置 {{htmlelement('map')}} 标签中。<map> 只需要一个属性，  设置{{htmlattrxref("name","map")}} 和上面usemap属性一样的map值：
    <map name="example-map-1">
 
@@ -63,26 +63,26 @@ 
    步骤2: 激活你的热点
    
 
 
    在<map> 元素中，我们需要嵌套 {{htmlelement('area')}} 元素。一个 <area> 元素对应一个热点.。为保持键盘导航的直观， 请确保<area> 的源顺序和视觉上的热点顺序一致。
    
 
-
    <area> 元素是空元素， 但是需要包含4个属性：
    
+
    <area> 元素是空元素， 但是需要包含 4 个属性：
    
 
 
    
  
    {{htmlattrxref('shape','area')}}
    
  
    {{htmlattrxref('coords','area')}}
    
  
    
- 
    shape 有4个值: circle, rect, poly, and default. ( default <area> 表示除去您定义的其他热点的剩余空间.)  根据你选择的形状需要在 coords 中提供对应的坐标信息。
    
+ 
    shape 有 4 个值：circle, rect, poly, and default. ( default <area> 表示除去您定义的其他热点的剩余空间.)  根据你选择的形状需要在 coords 中提供对应的坐标信息。
    
 
  
      
-  
    • 对于circle, 提供中心的x、y坐标，还需要提供半径。
      • 
-  
    • 对于rectangle,  提供左上角和右下角的x、y坐标。
      • 
-  
    • 对于polygon, 提供每个角的x、y坐标（至少6个值）。
      • 
+  
    • 对于 circle, 提供中心的 x、y 坐标，还需要提供半径。
      • 
+  
    • 对于 rectangle,  提供左上角和右下角的 x、y 坐标。
      • 
+  
    • 对于 polygon, 提供每个角的 x、y 坐标（至少 6 个值）。
      • 
  
    
 
- 
    坐标用CSS像素px表示。
    
+ 
    坐标用 CSS 像素 px 表示。
    
 
  
    In case of overlap, source order carries the day.
    
  
    
  
    {{htmlattrxref('href','area')}}
    
- 
    您需要链接的资源地址。 如果您不希望当前区域链接到任何地方(比方说，如果您正在创建一个空心圆)，您可以将这个属性保留为空。
    
+ 
    您需要链接的资源地址。 如果您不希望当前区域链接到任何地方 (比方说，如果您正在创建一个空心圆)，您可以将这个属性保留为空。
    
  
    {{htmlattrxref('alt','area')}}
    
  
    一个必选属性，告诉用户链接的指向或功能说明。alt 文本仅在图像不可用时显示。请参阅我们的guidelines for writing accessible link text。
    
  
    
@@ -100,13 +100,13 @@ 
    步骤2: 激活你的热点
    
 
 </map>
    
 
-
    步骤3: 确保它的可用范围
    
+
    步骤 3: 确保它的可用范围
    你还并没有完成除非你很严格的在多个浏览器和终端测试图像映射功能。尝试仅用键盘操作。尝试关掉图片。
    
 
-
    如果你的图像映射宽度大于240px，你将需要进一步调整来适应网站的响应式。仅调整小屏幕下的图片是不够的，因为不变的坐标无法适应这样的图像。
    
+
    如果你的图像映射宽度大于 240px，你将需要进一步调整来适应网站的响应式。仅调整小屏幕下的图片是不够的，因为不变的坐标无法适应这样的图像。
    
 
-
    如果必须使用图像映射， 您可以看看Matt Stow's jQuery plugin.。另外, Dudley Storey 示范了一种方法 use SVG for an image map effect，以及后来的ombined SVG-raster hack for bitmap images.
    
+
    如果必须使用图像映射， 您可以看看Matt Stow's jQuery plugin.。另外，Dudley Storey 示范了一种方法 use SVG for an image map effect，以及后来的ombined SVG-raster hack for bitmap images.
    Learn more
    
 
diff --git a/files/zh-cn/learn/html/howto/author_fast-loading_html_pages/index.html b/files/zh-cn/learn/html/howto/author_fast-loading_html_pages/index.html
index 0e6b81dc7294b5..6dd79302e4820e 100644
--- a/files/zh-cn/learn/html/howto/author_fast-loading_html_pages/index.html
+++ b/files/zh-cn/learn/html/howto/author_fast-loading_html_pages/index.html
@@ -1,5 +1,5 @@
 ---
-title: 小贴士：如何制作快速加载的HTML页面
+title: 小贴士：如何制作快速加载的 HTML 页面
 slug: Learn/HTML/Howto/Author_fast-loading_HTML_pages
 tags:
   - HTML
@@ -20,9 +20,9 @@ 
    HTML Tidy 这类的工具可以从有效的HTML源文件中自动截去行首空格和额外的空行，其它工具则可以通过重新格式化源代码来压缩JavaScript或者通过混淆源码将长标识符替换为短标识符来减小文件大小。
    
+
    诸如 HTML Tidy 这类的工具可以从有效的 HTML 源文件中自动截去行首空格和额外的空行，其它工具则可以通过重新格式化源代码来压缩 JavaScript 或者通过混淆源码将长标识符替换为短标识符来减小文件大小。
    
 
 
    最小化文件数量
    
 
@@ -46,7 +46,7 @@ 
    使用 CDN
    减少域名查找
    
 
-
    每个独立的域名都会消耗DNS查找的时间，页面加载时间会随着独立域名数量、CSS链接数量、JavaScript还有图片资源的数量增加而增加。
    
+
    每个独立的域名都会消耗 DNS 查找的时间，页面加载时间会随着独立域名数量、CSS 链接数量、JavaScript 还有图片资源的数量增加而增加。
    这条可能算不上实用，然而，在你的页面中尽量少的使用来自不同域名的资源链接。
    
 
@@ -57,7 +57,7 @@ 
    缓存重用的内容<
 
 
    确保任何内容可以被缓存，并且拥有一个合理的有效期。
    
 
-
    特别要注意 Last-Modified 头，它会让页面高效的缓存。 自上次修改之后，这部分 header 指示将信息传递给用户代理（要加载这些信息的文件）。大部分网页服务器会自动追加 Last-Modified header 部分到静态页面（如 .html，.css），基于上次修改的日期储存在文件系统中。至于动态页面（如 .php，.aspx），便无法做到，这部分请求的头也就不会被发送出去。
    
+
    特别要注意 Last-Modified 头，它会让页面高效的缓存。自上次修改之后，这部分 header 指示将信息传递给用户代理（要加载这些信息的文件）。大部分网页服务器会自动追加 Last-Modified header 部分到静态页面（如 .html，.css），基于上次修改的日期储存在文件系统中。至于动态页面（如 .php，.aspx），便无法做到，这部分请求的头也就不会被发送出去。
    
 
 
    所以，特别是动态产生的页面，花点时间研究一下这个课题会是有益的。或许有些什么关联，无论怎样，这么做在那些不能被缓存的网页中都会节省很多的页面请求。
    
 
@@ -72,19 +72,19 @@ 
    缓存重用的内容<
 
 
    高效地排列页面组件
    
 
-
    在页面最初显示时，会首先下载页面内容以及所需的CSS和JavaScript，这样在页面加载时用户可以最快获得外观的反馈。由于内容通常都是文本，有利于在传输过程中压缩，因此给用户以更快的响应。
    
+
    在页面最初显示时，会首先下载页面内容以及所需的 CSS 和 JavaScript，这样在页面加载时用户可以最快获得外观的反馈。由于内容通常都是文本，有利于在传输过程中压缩，因此给用户以更快的响应。
    
 
-
    页面中任何具有动态特性的资源需要在页面被完全加载后才可以使用，所以最好在初始化时关闭动态特性（disable dynamic features ），等页面加载完后再打开它。这样JavaScript就会在网页内容之后才加载，有助于提升页面加载的整体表现。
    
+
    页面中任何具有动态特性的资源需要在页面被完全加载后才可以使用，所以最好在初始化时关闭动态特性（disable dynamic features），等页面加载完后再打开它。这样 JavaScript 就会在网页内容之后才加载，有助于提升页面加载的整体表现。
    减少内联脚本的数量
    内联脚本在页面加载过程中消耗很多资源，因为解析器认为内联脚本会改变页面结构。通常，尽量少的使用内联脚本和减少用document.write()来输出内容，在一定情况下可以加速整体页面的载入。现在浏览器中一般使用现代的 W3C DOM 方法操作页面内容，优于使用document.write()的传统方法。
    
 
-
    使用现代CSS和合法标记
    
+
    使用现代 CSS 和合法标记
    
 
-
    使用现代CSS减少标记（markup）的用量，可以减少对（spacer）图片的需求。在布局方面，图片通常可以用风格化的文本（text）来替代，这样会“节省”许多资源。
    
+
    使用现代 CSS 减少标记（markup）的用量，可以减少对（spacer）图片的需求。在布局方面，图片通常可以用风格化的文本（text）来替代，这样会“节省”许多资源。
    
 
-
    使用合法标记还有其它优点。首先，浏览器在解释HTML时无需做错误校正（除了一些哲理性的问题，例如，是允许用户输入格式不一致，而后再用程序“校准”或统一化呢？ 还是加强约束规则，限制用户输入的格式？）。
    
+
    使用合法标记还有其它优点。首先，浏览器在解释 HTML 时无需做错误校正（除了一些哲理性的问题，例如，是允许用户输入格式不一致，而后再用程序“校准”或统一化呢？还是加强约束规则，限制用户输入的格式？）。
    再者，合法标记可以让那些给你的网站做预处理的工具功能最大化。例如，HTML Tidy 可以移除空白（whitespace）和可选的末尾标记（ending tags）；然而，在有严重的错误标记的网页中这些工具便无法工作。
    
 
@@ -132,11 +132,11 @@ 
    合理的选择 user-agent
    
 
-
    为使页面设计得到极大提升，应确保在工程中指定一个合理的user-agent。不要奢求你的内容在所有浏览器中都完美的展现，特别是在那些低版本的浏览器中。
    
+
    为使页面设计得到极大提升，应确保在工程中指定一个合理的 user-agent。不要奢求你的内容在所有浏览器中都完美的展现，特别是在那些低版本的浏览器中。
    
 
-
    理想情况下，你的页面运行的最小环境要基于现代浏览器，这个浏览器起码要支持一些相关的标准（如 html5 标准）。可以是最近版本的火狐，IE，谷歌Chrome，Opera还有Safari。
    
+
    理想情况下，你的页面运行的最小环境要基于现代浏览器，这个浏览器起码要支持一些相关的标准（如 html5 标准）。可以是最近版本的火狐，IE，谷歌 Chrome，Opera 还有 Safari。
    
 
-
    需要注意一下，这篇文章当中的许多tips都是些技术性常识，可以不必担心浏览器的支持需求而应用到任何user-agent和网页中去。
    
+
    需要注意一下，这篇文章当中的许多 tips 都是些技术性常识，可以不必担心浏览器的支持需求而应用到任何 user-agent 和网页中去。
    尽可能使用 async 和 defer
    
 
@@ -194,7 +194,7 @@ 
 
@@ -203,7 +203,7 @@ 
    
 
    
 
    基本结构
    
 
-
    HTML应用最基础的是文档结构。如果你是HTML新手那么你应该和我们一起从这里开始学习.
    
+
    HTML 应用最基础的是文档结构。如果你是 HTML 新手那么你应该和我们一起从这里开始学习。
    
 
 
 
 
    基本文本语义
    
 
-
    HTML专门为文档提供语义信息，因此，HTML能够解答关于如何在文档中最好地传递消息的许多问题。
    
+
    HTML 专门为文档提供语义信息，因此，HTML 能够解答关于如何在文档中最好地传递消息的许多问题。
    
 
 
 
    
 
 
    
 
    超链接
    
 
-
    使用HTML的主要原因之一，就是可以使用{{Glossary("hyperlink", "hyperlinks")}}来轻松导航，实现方式有以下几种：
    
+
    使用 HTML 的主要原因之一，就是可以使用{{Glossary("hyperlink", "hyperlinks")}}来轻松导航，实现方式有以下几种：
    
 
 
 
 
    图像 & 多媒体
    
@@ -58,31 +58,31 @@ 
    图像 & 多媒体
    
 
 
    脚本 & 样式
    
 
-
    HTML仅仅建立了文档结构。为解决演示文稿问题，可使用{{glossary("CSS")}}或脚本令页面交互。
    
+
    HTML 仅仅建立了文档结构。为解决演示文稿问题，可使用{{glossary("CSS")}}或脚本令页面交互。
    
 
 
 
 
    嵌入内容
    
 
 
 
    
 
 
 
    进阶问题
    
 
-
    除了基本问题,HTML还有更丰富的功能,其提供了高级特性用于解决复杂问题.这些文章可以帮助你解决一些相对不常见的问题:
    
+
    除了基本问题，HTML 还有更丰富的功能，其提供了高级特性用于解决复杂问题。这些文章可以帮助你解决一些相对不常见的问题：
    
 
    
 
    表单
    
 
-
    表单是一种复杂的HTML结构,用于从网页向网络服务器发送数据.我们鼓励你仔细阅读完整指南.你可由此入门:
    
+
    表单是一种复杂的 HTML 结构，用于从网页向网络服务器发送数据。我们鼓励你仔细阅读完整指南.你可由此入门：
    
 
 
    
 
@@ -120,8 +120,8 @@ 
    互动
    
 
    高级文本语义
    
 
 
 
 
    高级图像 & 多媒体
    
@@ -134,18 +134,18 @@ 
    高级图像 & 多媒体
    
 
 
    国际化
    
 
-
    HTML支持多语言. 其提供了用于解决常见的国际化问题的工具.
    
+
    HTML 支持多语言。其提供了用于解决常见的国际化问题的工具。
    
 
 
 
 
    性能
    
 
 
 
    
diff --git a/files/zh-cn/learn/html/howto/use_data_attributes/index.html b/files/zh-cn/learn/html/howto/use_data_attributes/index.html
index 9096accd1039a7..c1b041a369056f 100644
--- a/files/zh-cn/learn/html/howto/use_data_attributes/index.html
+++ b/files/zh-cn/learn/html/howto/use_data_attributes/index.html
@@ -9,11 +9,11 @@
 ---
 
    {{LearnSidebar}}
    
 
-
    HTML5是具有扩展性的设计，它初衷是数据应与特定的元素相关联，但不需要任何定义。data-* 属性允许我们在标准内于HTML元素中存储额外的信息，而不需要使用类似于 classList，标准外属性，DOM额外属性或是 setUserData 之类的技巧。
    
+
    HTML5是具有扩展性的设计，它初衷是数据应与特定的元素相关联，但不需要任何定义。data-* 属性允许我们在标准内于 HTML 元素中存储额外的信息，而不需要使用类似于 classList，标准外属性，DOM 额外属性或是 setUserData 之类的技巧。
    HTML 语法
    
 
-
    语法非常简单。所有在元素上以data-开头的属性为数据属性。比如说你有一篇文章，而你又想要存储一些不需要显示在浏览器上的额外信息。请使用data属性：
    
+
    语法非常简单。所有在元素上以data-开头的属性为数据属性。比如说你有一篇文章，而你又想要存储一些不需要显示在浏览器上的额外信息。请使用 data 属性：
    <article
   id="electriccars"
@@ -25,9 +25,9 @@ 
    HTML 语法
    
 
 
    JavaScript 访问
    
 
-
    在外部使用JavaScript去访问这些属性的值同样非常简单。你可以使用{{domxref("Element.getAttribute", "getAttribute()")}}配合它们完整的HTML名称去读取它们，但标准定义了一个更简单的方法：{{domxref("DOMStringMap")}}你可以使用{{domxref("HTMLElement.dataset", "dataset")}}读取到数据。
    
+
    在外部使用JavaScript去访问这些属性的值同样非常简单。你可以使用{{domxref("Element.getAttribute", "getAttribute()")}}配合它们完整的 HTML 名称去读取它们，但标准定义了一个更简单的方法：{{domxref("DOMStringMap")}}你可以使用{{domxref("HTMLElement.dataset", "dataset")}}读取到数据。
    
 
-
    为了使用dataset对象去获取到数据属性，需要获取属性名中data-之后的部分(要注意的是破折号连接的名称需要改写为骆驼拼写法(如"index-number"转换为"indexNumber"))。
    
+
    为了使用dataset对象去获取到数据属性，需要获取属性名中data-之后的部分 (要注意的是破折号连接的名称需要改写为骆驼拼写法 (如"index-number"转换为"indexNumber"))。
    
 
 
    var article = document.querySelector('#electriccars');
 
@@ -35,17 +35,17 @@ 
    JavaScript 访问
    
 article.dataset.indexNumber // "12314"
 article.dataset.parent // "cars"
    
 
-
    每一个属性都是一个可读写的字符串。在上面的例子中，article.dataset.columns = 5.将会调整属性的值为5。
    
+
    每一个属性都是一个可读写的字符串。在上面的例子中，article.dataset.columns = 5.将会调整属性的值为 5。
    
 
 
    CSS 访问
    
 
-
    注意，data设定为HTML属性，他们同样能被CSS访问。比如你可以通过generated content使用函数{{cssxref("attr")}}来显示data-parent的内容：
    
+
    注意，data 设定为 HTML 属性，他们同样能被CSS访问。比如你可以通过generated content使用函数{{cssxref("attr")}}来显示 data-parent 的内容：
    
 
 
    article::before {
   content: attr(data-parent);
 }
    
 
-
    你也同样可以在CSS中使用属性选择器根据data来改变样式：
    
+
    你也同样可以在 CSS 中使用属性选择器根据 data 来改变样式：
    
 
 
    article[data-columns='3'] {
   width: 400px;
@@ -56,19 +56,19 @@ 
    CSS 访问
    
 
 
    你可以在这个JSBin 里看到全部演示。
    
 
-
    Data属性同样可以存储不断变化的信息，比如游戏的得分。使用CSS选择器与JavaScript去访问可以让你得到花俏的效果，这里你并不需要用常规的编写方案来编写代码。有关使用生成内容和CSS转换（JSBin示例）的示例，请参阅此视频。
    
+
    Data 属性同样可以存储不断变化的信息，比如游戏的得分。使用 CSS 选择器与 JavaScript 去访问可以让你得到花俏的效果，这里你并不需要用常规的编写方案来编写代码。有关使用生成内容和 CSS 转换（JSBin 示例）的示例，请参阅此视频。
    
 
 
    数据值是字符串。必须在选择器中引用数值才能使样式生效。
    
 
 
    Issues
    
 
-
    不要在data attribute里储存需要显示及访问的内容，因为一些其他的技术可能访问不到它们。另外爬虫不能将data attribute的值编入索引中。
    
+
    不要在 data attribute 里储存需要显示及访问的内容，因为一些其他的技术可能访问不到它们。另外爬虫不能将 data attribute 的值编入索引中。
    
 
-
    IE的支持度及显示效果是最主要讨论的问题。IE11+支持这个标准，但所有更早期的版本都不支持dataset。为了支持IE10及以下的版本，你必须使用{{domxref("Element.getAttribute", "getAttribute()")}} 来访问。另外，读取 data-attributes的行为相比JS存储数据会慢。使用dataset 会比使用getAttribute()读取数据来得慢。
    
+
    IE 的支持度及显示效果是最主要讨论的问题。IE11+支持这个标准，但所有更早期的版本都不支持dataset。为了支持 IE10 及以下的版本，你必须使用{{domxref("Element.getAttribute", "getAttribute()")}} 来访问。另外，读取 data-attributes 的行为相比 JS 存储数据会慢。使用 dataset 会比使用 getAttribute() 读取数据来得慢。
    
 
-
    尽管如此,对于那些与元素相关的数据,这依然是一个很好的解决方案.
    
+
    尽管如此，对于那些与元素相关的数据，这依然是一个很好的解决方案。
    
 
-
    在FireFox 49.0.2(其他版本也有可能)中,javascript将无法读出包含1022个及以上字符的data属性(EcmaScript 4).
    
+
    在 FireFox 49.0.2(其他版本也有可能) 中，javascript 将无法读出包含 1022 个及以上字符的 data 属性 (EcmaScript 4).
    
 
 
    参阅
    
 
@@ -76,6 +76,6 @@ 
    参
 
 
diff --git a/files/zh-cn/learn/html/index.md b/files/zh-cn/learn/html/index.md
index a4e2467b414557..eee8c778a0d8dc 100644
--- a/files/zh-cn/learn/html/index.md
+++ b/files/zh-cn/learn/html/index.md
@@ -1,5 +1,5 @@
 ---
-title: 学习 HTML ：指南与教程
+title: 学习 HTML：指南与教程
 slug: Learn/HTML
 tags:
   - HTML
@@ -33,7 +33,7 @@ translation_of: Learn/HTML
 在学习了 HTML 之后，你就可以继续学习其他进阶主题了，例如：
 
 - [CSS](/zh-CN/docs/Learn/CSS)，以及如何用它装饰 HTML (例如：更改你的文本字号和字体，添加边框和阴影，将你的页面设计成多栏布局，添加动画和其他视觉效果。)
-- [JavaScript](/zh-CN/docs/Learn/JavaScript)，以及如何用它为网页添加动态功能(例如：找到并在地图上绘制出你的地址，触发按钮时让 UI 元素显示或消失，将用户的数据本地储存在他们的电脑里等等。))
+- [JavaScript](/zh-CN/docs/Learn/JavaScript)，以及如何用它为网页添加动态功能 (例如：找到并在地图上绘制出你的地址，触发按钮时让 UI 元素显示或消失，将用户的数据本地储存在他们的电脑里等等。))
 
 ## 模块
 
diff --git a/files/zh-cn/learn/html/introduction_to_html/advanced_text_formatting/index.html b/files/zh-cn/learn/html/introduction_to_html/advanced_text_formatting/index.html
index 51bf88fcd59146..b0e35d2ba42a11 100644
--- a/files/zh-cn/learn/html/introduction_to_html/advanced_text_formatting/index.html
+++ b/files/zh-cn/learn/html/introduction_to_html/advanced_text_formatting/index.html
@@ -14,7 +14,7 @@
 
 
    {{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Creating_hyperlinks", "Learn/HTML/Introduction_to_HTML/文件和网站结构", "Learn/HTML/Introduction_to_HTML")}}
    
 
-
    HTML中有许多其他元素可以用于格式化文本，我们没有在HTML 文字处理基础中提到它们。本文中所描述的元素虽然少有人知，但仍然值得去学习（尽管仍然不是完整的列表）。在这里你将了解标记引文、描述列表、计算机代码和其他相关文本、下标和上标、联系信息等。
    
+
    HTML 中有许多其他元素可以用于格式化文本，我们没有在HTML 文字处理基础中提到它们。本文中所描述的元素虽然少有人知，但仍然值得去学习（尽管仍然不是完整的列表）。在这里你将了解标记引文、描述列表、计算机代码和其他相关文本、下标和上标、联系信息等。
    
 
 
    
  
   
    前提:前提：
    你应该已经知道如何create a basic HTML document 以及add accessible images to a webpage.
   
    
   
    目标:目标：
    学习如何将一张图片的不同区域链接到不同页面。
   
    
      
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
    
@@ -40,7 +40,7 @@ 
    描述列表
    
 旁白
 戏剧中，为渲染幽默或戏剧性效果而进行的场景之外的补充注释念白，只面向观众，内容一般都是角色的感受、想法、以及一些背景信息等。
 
-
    描述列表使用与其他列表类型不同的闭合标签— {{htmlelement("dl")}}; 此外，每一项都用 {{htmlelement("dt")}} (description term) 元素闭合。每个描述都用 {{htmlelement("dd")}} (description definition) 元素闭合。让我们来完成下面的标记例子:
    
+
    描述列表使用与其他列表类型不同的闭合标签— {{htmlelement("dl")}}; 此外，每一项都用 {{htmlelement("dt")}} (description term) 元素闭合。每个描述都用 {{htmlelement("dd")}} (description definition) 元素闭合。让我们来完成下面的标记例子：
    <dl>
   <dt>内心独白</dt>
@@ -51,7 +51,7 @@ 
    描述列表
    
     <dd>戏剧中，为渲染幽默或戏剧性效果而进行的场景之外的补充注释念白，只面向观众，内容一般都是角色的感受、想法、以及一些背景信息等。</dd>
 </dl>
    
 
-
    浏览器的默认样式会在描述列表的描述部分（description definition）和描述术语（description terms）之间产生缩进。MDN非常严密地遵循这一惯例，同时也鼓励关于术语的其他更多的定义（but also embolden the terms for extra definition）。
    
+
    浏览器的默认样式会在描述列表的描述部分（description definition）和描述术语（description terms）之间产生缩进。MDN 非常严密地遵循这一惯例，同时也鼓励关于术语的其他更多的定义（but also embolden the terms for extra definition）。
    下面是前述代码的显示结果：
    
 
@@ -72,7 +72,7 @@ 
    描述列表
    写作中，指与当前主题相关的一段内容，通常不适于直接置于内容主线中，因此置于附近的其它位置（通常位于主线内容旁边一个文本框内）。
    
 
-
    主动学习: 标记一组定义
    
+
    主动学习：标记一组定义
    现在是时候尝试一下描述列表了; 在输入区域的原始文本里添加相应的元素，使得它在输出区域是以描述列表的形式出现。如果你喜欢，你也可以使用你自己的描述术语和描述。
    
 
@@ -198,11 +198,11 @@ 
    Playable code
    引用
    
 
-
    HTML也有用于标记引用的特性，至于使用哪个元素标记，取决于你引用的是一块还是一行。
    
+
    HTML 也有用于标记引用的特性，至于使用哪个元素标记，取决于你引用的是一块还是一行。
    块引用
    
 
-
    如果一个块级内容（一个段落、多个段落、一个列表等）从其他地方被引用，你应该把它用{{htmlelement("blockquote")}}元素包裹起来表示，并且在{{htmlattrxref("cite","blockquote")}}属性里用URL来指向引用的资源。例如，下面的例子就是引用的MDN的<blockquote>元素页面：
    
+
    如果一个块级内容（一个段落、多个段落、一个列表等）从其他地方被引用，你应该把它用{{htmlelement("blockquote")}}元素包裹起来表示，并且在{{htmlattrxref("cite","blockquote")}}属性里用 URL 来指向引用的资源。例如，下面的例子就是引用的 MDN 的<blockquote>元素页面：
    <p>The <strong>HTML <code>&lt;blockquote&gt;</code> Element</strong> (or <em>HTML Block
 Quotation Element</em>) indicates that the enclosed text is an extended quotation.</p>
    
@@ -214,7 +214,7 @@ 
    块引用
    
   Quotation Element</em>) indicates that the enclosed text is an extended quotation.</p>
 </blockquote>
 
-
    浏览器在渲染块引用时默认会增加缩进，作为引用的一个指示符；MDN是这样做的，但是也增加了额外的样式：
    
+
    浏览器在渲染块引用时默认会增加缩进，作为引用的一个指示符；MDN 是这样做的，但是也增加了额外的样式：
    
 
    The HTML <blockquote> Element (or HTML Block Quotation Element) indicates that the enclosed text is an extended quotation.
    
@@ -222,7 +222,7 @@ 
    块引用
    
 
 
    行内引用
    
 
-
    行内元素用同样的方式工作，除了使用{{htmlelement("q")}}元素。例如，下面的标记包含了从MDN<q>页面的引用：
    
+
    行内元素用同样的方式工作，除了使用{{htmlelement("q")}}元素。例如，下面的标记包含了从 MDN<q>页面的引用：
    
 
 
    <p>The quote element — <code>&lt;q&gt;</code> — is <q cite="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/q">intended
 for short quotations that don't require paragraph breaks.</q></p>
@@ -383,7 +383,7 @@ 
    Playable code 2
    
 
 
    缩略语
    
 
-
    另一个你在web上看到的相当常见的元素是{{htmlelement("abbr")}}——它常被用来包裹一个缩略语或缩写，并且提供缩写的解释（包含在{{htmlattrxref("title")}}属性中）。让我们看看下面两个例子：
    
+
    另一个你在 web 上看到的相当常见的元素是{{htmlelement("abbr")}}——它常被用来包裹一个缩略语或缩写，并且提供缩写的解释（包含在{{htmlattrxref("title")}}属性中）。让我们看看下面两个例子：
    
 
 
    <p>我们使用 <abbr title="超文本标记语言（Hyper text Markup Language）">HTML</abbr> 来组织网页文档。</p>
 
@@ -397,7 +397,7 @@ 
    缩略语
    
 
    第 33 届 奥运会 将于 2024 年 8 月在法国巴黎举行。
    
 
 
    
-
    Note: 还有另一个元素<acronym>，它基本上与<abbr>相同，专门用于首字母缩略词而不是缩略语。 然而，这已经被废弃了 - 它在浏览器的支持中不如<abbr>，并且具有类似的功能，所以没有意义。 只需使用<abbr>。
    
+
    Note: 还有另一个元素<acronym>，它基本上与<abbr>相同，专门用于首字母缩略词而不是缩略语。然而，这已经被废弃了 - 它在浏览器的支持中不如<abbr>，并且具有类似的功能，所以没有意义。只需使用<abbr>。
    
 
    
 
 
    主动学习：标记一个缩略语
    
@@ -508,13 +508,13 @@ 
    Playable code 3
    
 
 
    标记联系方式
    
 
-
    HTML有个用于标记联系方式的元素——{{htmlelement("address")}}。它仅仅包含你的联系方式，例如：
    
+
    HTML 有个用于标记联系方式的元素——{{htmlelement("address")}}。它仅仅包含你的联系方式，例如：
    
 
 
    <address>
   <p>Chris Mills, Manchester, The Grim North, UK</p>
 </address>
    
 
-
    但要记住的一点是，<address>元素是为了标记编写HTML文档的人的联系方式，而不是任何其他的内容。因此，如果这是Chris写的文档，上面的内容将会很好。注意，下面的内容也是可以的：
    
+
    但要记住的一点是，<address>元素是为了标记编写 HTML 文档的人的联系方式，而不是任何其他的内容。因此，如果这是 Chris 写的文档，上面的内容将会很好。注意，下面的内容也是可以的：
    
 
 
    <address>
   <p>Page written by <a href="../authors/chris-mills/">Chris Mills</a>.</p>
@@ -536,7 +536,7 @@ 
    上标和下标
    
 
 
    展示计算机代码
    
 
-
    有大量的HTML元素可以来标记计算机代码：
    
+
    有大量的 HTML 元素可以来标记计算机代码：
    
 
 
      
  
    • {{htmlelement("code")}}: 用于标记计算机通用代码。
      • 
@@ -574,7 +574,7 @@ 
      标记时间和日期
      
 
 
      HTML 还支持将时间和日期标记为可供机器识别的格式的 {{htmlelement("time")}} 元素。例如：
      
 
-
      <time datetime="2016-01-20">2016年1月20日</time>
      
+
      <time datetime="2016-01-20">2016 年 1 月 20 日</time>
      
 
 
      为什么需要这样做？因为世界上有许多种书写日期的格式，上边的日期可能被写成：
      
 
@@ -586,7 +586,7 @@ 
      标记时间和日期
      
  
    • 06/20/16
      • 
  
    • The 20th of next month
      • 
  
    • 20e Janvier 2016
      • 
- 
    • 2016年1月20日
      • 
+ 
    • 2016 年 1 月 20 日
      • 
  
    • And so on
      • 
 
    
 
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 c1c198f67cbec8..5ec5b0c481d240 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
@@ -2,7 +2,7 @@
 title: 建立超链接
 slug: Learn/HTML/Introduction_to_HTML/Creating_hyperlinks
 tags:
-  - HTML指南
+  - HTML 指南
   - URL
   - 超链接
 translation_of: Learn/HTML/Introduction_to_HTML/Creating_hyperlinks
@@ -16,22 +16,22 @@
 
    
  
 
 
 
 
  
 
 
 
 
 
 
 
 
 
 
 
    
-   
-   
+   
+   
-   
+   
    
  
   
    前提:熟悉基本HTML（包含在 开始学习HTML中），HTML 文本格式（包含在 HTML文字基础 中）。前提：熟悉基本 HTML（包含在 开始学习 HTML中），HTML 文本格式（包含在 HTML 文字基础 中）。
   
    
   
    目标:目标：
    学习如何实现一个有效地把多个文件链接在一起的超文本链接。
   
    
      
 
    
 
-
    什么是超链接?
    
+
    什么是超链接？
    
 
 
    超链接是互联网提供的最令人兴奋的创新之一，它们从一开始就一直是互联网的一个特性，使互联网成为互联的网络。超链接使我们能够将我们的文档链接到任何其他文档（或其他资源），也可以链接到文档的指定部分，我们可以在一个简单的网址上提供应用程序（与必须先安装的本地应用程序或其他东西相比）。几乎任何网络内容都可以转换为链接，点击（或激活）超链接将使网络浏览器转到另一个网址（{{glossary("URL")}}）。
    
 
 
    
-
    注意：URL可以指向HTML文件、文本文件、图像、文本文档、视频和音频文件以及可以在网络上保存的任何其他内容。 如果浏览器不知道如何显示或处理文件，它会询问您是否要打开文件（需要选择合适的本地应用来打开或处理文件）或下载文件（以后处理它）。
    
+
    注意：URL 可以指向 HTML 文件、文本文件、图像、文本文档、视频和音频文件以及可以在网络上保存的任何其他内容。如果浏览器不知道如何显示或处理文件，它会询问您是否要打开文件（需要选择合适的本地应用来打开或处理文件）或下载文件（以后处理它）。
    
 
    
 
 
    以 BBC 的主页为例，里面就包含了非常多的链接，各自连到不同新闻、网站的其它地方（导览功能），或者登入/注册页面等等。
    
@@ -40,7 +40,7 @@ 
    什么是超链接?
    
 
 
    链接的解析
    
 
-
    通过将文本（或其他内容，见块级链接)转换为{{htmlelement("a")}}元素内的链接来创建基本链接， 给它一个{{htmlattrxref("href", "a")}}属性（也称为目标），它将包含您希望链接指向的网址。
    
+
    通过将文本（或其他内容，见块级链接) 转换为{{htmlelement("a")}}元素内的链接来创建基本链接，给它一个{{htmlattrxref("href", "a")}}属性（也称为目标），它将包含您希望链接指向的网址。
    
 
 
    <p>我创建了一个指向
 <a href="https://www.mozilla.org/zh-CN/">Mozilla 主页</a>
@@ -51,9 +51,9 @@ 
    链接的解析
    
 
 
    我创建了一个指向 Mozilla 主页 的超链接。
    
 
-
    使用title属性添加支持信息
    
+
    使用 title 属性添加支持信息
    
 
-
    您可能要添加到您的链接的另一个属性是标题；这旨在包含关于链接的补充有用信息，例如页面包含什么样的信息或需要注意的事情。 例如：
    
+
    您可能要添加到您的链接的另一个属性是标题；这旨在包含关于链接的补充有用信息，例如页面包含什么样的信息或需要注意的事情。例如：
    
 
 
    <p>我创建了一个指向
 <a href="https://www.mozilla.org/zh-CN/"
@@ -71,10 +71,10 @@ 
    使用title属性添加支持信息
 
 
    主动学习：创建您自己的示例链接
    
 
-
    主动学习时间：我们希望您使用本地代码编辑器创建一个HTML文档（我们的 入门模板 很适合）
    
+
    主动学习时间：我们希望您使用本地代码编辑器创建一个 HTML 文档（我们的 入门模板 很适合）
    
 
 
      
- 
    • 在HTML内，尝试添加一个或者多个段落或其他你知道类型的内容。
      • 
+ 
    • 在 HTML 内，尝试添加一个或者多个段落或其他你知道类型的内容。
      • 
  
    • 将某些内容转换为链接。
      • 
  
    • 包含标题属性。
      • 
 
    
@@ -88,16 +88,16 @@ 
    块级链接
    
 </a>
    
 
 
    
-
    注意: 你会在未来的文章中发现更多在Web中使用图像的例子。
    
+
    注意: 你会在未来的文章中发现更多在 Web 中使用图像的例子。
    
 
    
 
-
    统一资源定位符(URL)与路径(path)快速入门
    
+
    统一资源定位符 (URL) 与路径 (path) 快速入门
    
 
 
    要全面地了解链接目标，你需要了解统一资源定位符和文件路径。本小节将介绍相关的信息。
    
 
 
    统一资源定位符（英文：Uniform Resource Locator，简写：URL）是一个定义了在网络上的位置的一个文本字符串。例如 Mozilla 的中文主页定位在 https://www.mozilla.org/zh-CN/.
    
 
-
    URL使用路径查找文件。路径指定文件系统中您感兴趣的文件所在的位置。看一下一个简单的目录结构的例子（源码可查看 创建超链接（creating-hyperlinks）。）A simple directory structure. The parent directory is called creating-hyperlinks and contains two files called index.html and contacts.html, and two directories called projects and pdfs, which contain an index.html and a project-brief.pdf file, respectively
    
+
    URL 使用路径查找文件。路径指定文件系统中您感兴趣的文件所在的位置。看一下一个简单的目录结构的例子（源码可查看 创建超链接（creating-hyperlinks）。）A simple directory structure. The parent directory is called creating-hyperlinks and contains two files called index.html and contacts.html, and two directories called projects and pdfs, which contain an index.html and a project-brief.pdf file, respectively
    
 
 
    此目录结构的根目录称为creating-hyperlinks。当在网站上工作时， 你会有一个包含整个网站的目录。在根目录，我们有一个index.html和一个contacts.html文件。在真实的网站上，index.html 将会成为我们的主页或登录页面。
    
 
@@ -105,34 +105,34 @@ 
    统一资源定位符
 
 
      
  
    • 
-  
      指向当前目录：如果index.html（目录顶层的index.html）想要包含一个超链接指向contacts.html，你只需要指定想要链接的文件名，因为它与当前文件是在同一个目录的. 所以你应该使用的URL是contacts.html:
      
+  
      指向当前目录：如果index.html（目录顶层的index.html）想要包含一个超链接指向contacts.html，你只需要指定想要链接的文件名，因为它与当前文件是在同一个目录的。所以你应该使用的 URL 是contacts.html:
      
 
   
      <p>要联系某位工作人员，请访问我们的 <a href="contacts.html">联系人页面</a>。</p>
 
      
  
      • 
  
    • 
-  
      指向子目录：如果index.html （目录顶层index.html）想要包含一个超链接指向 projects/index.html，您需要先进入projects/项目目录，然后指明要链接到的文件index.html。 通过指定目录的名称，然后是正斜杠，然后是文件的名称。因此您要使用的URL是projects/index.html：
      
+  
      指向子目录：如果index.html （目录顶层index.html）想要包含一个超链接指向 projects/index.html，您需要先进入projects/项目目录，然后指明要链接到的文件index.html。 通过指定目录的名称，然后是正斜杠，然后是文件的名称。因此您要使用的 URL 是projects/index.html：
      
 
   
      <p>请访问 <a href="projects/index.html">项目页面</a>。</p>
      
  
      • 
  
    • 
-  
      指向上级目录： 如果你想在projects/index.html中包含一个指向pdfs/project-brief.pdf的超链接，你必须先返回上级目录，然后再回到pdf目录。“返回上一个目录级”使用两个英文点号表示 — .. — 所以你应该使用的URL是 ../pdfs/project-brief.pdf：
      
+  
      指向上级目录： 如果你想在projects/index.html中包含一个指向pdfs/project-brief.pdf的超链接，你必须先返回上级目录，然后再回到pdf目录。“返回上一个目录级”使用两个英文点号表示 — .. — 所以你应该使用的 URL 是 ../pdfs/project-brief.pdf：
      
 
   
      <p>点击打开 <a href="../pdfs/project-brief.pdf">项目简介</a>。</p>
      
  
      • 
 
    
 
 
    
-
    注意：如果需要的话，你可以将这些功能的多个例子和复杂的url结合起来。例如：../../../complex/path/to/my/file.html.
    
+
    注意：如果需要的话，你可以将这些功能的多个例子和复杂的 url 结合起来。例如：../../../complex/path/to/my/file.html.
    
 
    
 
 
    文档片段
    
 
-
    超链接除了可以链接到文档外，也可以链接到HTML文档的特定部分（被称为文档片段）。要做到这一点，你必须首先给要链接到的元素分配一个{{htmlattrxref("id")}}属性。例如，如果你想链接到一个特定的标题，可以这样做：
    
+
    超链接除了可以链接到文档外，也可以链接到 HTML 文档的特定部分（被称为文档片段）。要做到这一点，你必须首先给要链接到的元素分配一个{{htmlattrxref("id")}}属性。例如，如果你想链接到一个特定的标题，可以这样做：
    
 
 
    <h2 id="Mailing_address">邮寄地址</h2>
    
 
-
    然后链接到那个特定的id，您可以在URL的结尾使用一个井号指向它，例如：
    
+
    然后链接到那个特定的id，您可以在 URL 的结尾使用一个井号指向它，例如：
    
 
 
    <p>要提供意见和建议，请将信件邮寄至 <a href="contacts.html#Mailing_address">我们的地址</a>。</p>
    
 
@@ -142,17 +142,17 @@ 
    文档片段
    
 
 
    绝对URL和相对URL
    
 
-
    你可能会在网络上遇到两个术语，绝对URL和相对URL（或者称为，绝对链接和相对链接）：
    
+
    你可能会在网络上遇到两个术语，绝对 URL和相对 URL（或者称为，绝对链接和相对链接）：
    
 
-
    绝对URL：指向由其在Web上的绝对位置定义的位置，包括 {{glossary("protocol")}}（协议） 和 {{glossary("domain name")}}（域名）。像下面的例子，如果index.html页面上传到projects这一个目录。并且projects目录位于web服务站点的根目录，web站点的域名为http://www.example.com，那么这个页面就可以通过http://www.example.com/projects/index.html访问（或者通过http://www.example.com/projects/来访问，因为在没有指定特定的URL的情况下，大多数web服务会默认访问加载index.html这类页面）
    
+
    绝对 URL：指向由其在 Web 上的绝对位置定义的位置，包括 {{glossary("protocol")}}（协议）和 {{glossary("domain name")}}（域名）。像下面的例子，如果index.html页面上传到projects这一个目录。并且projects目录位于 web 服务站点的根目录，web 站点的域名为http://www.example.com，那么这个页面就可以通过http://www.example.com/projects/index.html访问（或者通过http://www.example.com/projects/来访问，因为在没有指定特定的 URL 的情况下，大多数 web 服务会默认访问加载index.html这类页面）
    
 
-
    不管绝对URL在哪里使用，它总是指向确定的相同位置。
    
+
    不管绝对 URL 在哪里使用，它总是指向确定的相同位置。
    
 
-
    相对URL：指向与您链接的文件相关的位置，更像我们在前面一节中所看到的位置。例如，如果我们想从示例文件链接http://www.example.com/projects/index.html转到相同目录下的一个PDF文件，URL就是文件名URL——例如project-brief.pdf——没有其他的信息要求。如果PDF文件能够在projects的子目录pdfs中访问到，相对路径就是pdfs/project-brief.pdf（对应的绝对URL是http://www.example.com/projects/pdfs/project-brief.pdf）
    
+
    相对 URL：指向与您链接的文件相关的位置，更像我们在前面一节中所看到的位置。例如，如果我们想从示例文件链接http://www.example.com/projects/index.html转到相同目录下的一个 PDF 文件，URL 就是文件名 URL——例如project-brief.pdf——没有其他的信息要求。如果 PDF 文件能够在projects的子目录pdfs中访问到，相对路径就是pdfs/project-brief.pdf（对应的绝对 URL 是http://www.example.com/projects/pdfs/project-brief.pdf）
    
 
-
    一个相对URL将指向不同的位置，这取决于它所在的文件所在的位置——例如，如果我们把index.html文件从projects目录移动到Web站点的根目录（最高级别，而不是任何目录中），里面的pdfs/project-brief.pdf相对URL将会指向http://www.example.com/pdfs/project-brief.pdf，而不是http://www.example.com/projects/pdfs/project-brief.pdf
    
+
    一个相对 URL 将指向不同的位置，这取决于它所在的文件所在的位置——例如，如果我们把index.html文件从projects目录移动到 Web 站点的根目录（最高级别，而不是任何目录中），里面的pdfs/project-brief.pdf相对 URL 将会指向http://www.example.com/pdfs/project-brief.pdf，而不是http://www.example.com/projects/pdfs/project-brief.pdf
    
 
-
    当然，project-brief.pdf文件和pdfs文件夹的位置不会因为您移动了index.html文件而突然发生变化——这将使您的链接指向错误的位置，因此如果单击它，它将无法工作。你得小心点!
    
+
    当然，project-brief.pdf文件和pdfs文件夹的位置不会因为您移动了index.html文件而突然发生变化——这将使您的链接指向错误的位置，因此如果单击它，它将无法工作。你得小心点！
    
 
 
    链接最佳实践
    
 
@@ -173,24 +173,24 @@ 
    使用清晰的链接措辞
    
 
 
    下面是一个具体的例子：
    
 
-
    好的链接文本: 下载Firefox
    
+
    好的链接文本： 下载 Firefox
    
 
 
    <p><a href="https://firefox.com/">
-  下载Firefox
+  下载 Firefox
 </a></p>
    
 
-
    不好的链接文本: 点击这里下载Firefox
    
+
    不好的链接文本： 点击这里下载 Firefox
    
 
 
    <p><a href="https://firefox.com/">
   点击这里
 </a>
-下载Firefox</p>
+下载 Firefox</p>
 
    
 
 
    其他提示：
    
 
 
      
- 
    • 不要重复URL作为链接文本的一部分 ——URL看起来很丑，当屏幕朗读器一个字母一个字母的读出来的时候听起来就更丑了。
      • 
+ 
    • 不要重复 URL 作为链接文本的一部分 ——URL 看起来很丑，当屏幕朗读器一个字母一个字母的读出来的时候听起来就更丑了。
      • 
  
    • 不要在链接文本中说“链接”或“链接到”——它只是噪音。屏幕阅读器告诉人们有一个链接。可视化用户也会知道有一个链接，因为链接通常是用不同的颜色设计的，并且存在下划线（这个惯例一般不应该被打破，因为用户习惯了它。）
      • 
  
    • 保持你的链接标签尽可能短——长链接尤其惹恼屏幕阅读器用户，他们必须听到整件事读出来。
      • 
 
    
@@ -200,17 +200,17 @@ 
    尽可能使用相对链接
    
 
    从上面的描述中，您可能认为始终使用绝对链接是一个好主意；毕竟，当页面像相对链接那样移动时，它们不会中断。但是，当链接到同一网站的其他位置时，你应该使用相对链接（当链接到另一个网站时，你需要使用绝对链接）：
    
 
 
      
- 
    • 首先，检查代码要容易得多——相对URL通常比绝对URL短得多，这使得阅读代码更容易。
      • 
- 
    • 其次，在可能的情况下使用相对URL更有效。当使用绝对URL时，浏览器首先通过{{glossary("DNS")}}（见万维网是如何工作的）查找服务器的真实位置，然后再转到该服务器并查找所请求的文件。另一方面，相对URL，浏览器只在同一服务器上查找被请求的文件。因此，如果你使用绝对URL而不是相对URL，你就会不断地让你的浏览器做额外的工作，这意味着它的效率会降低。
      • 
+ 
    • 首先，检查代码要容易得多——相对 URL 通常比绝对 URL 短得多，这使得阅读代码更容易。
      • 
+ 
    • 其次，在可能的情况下使用相对 URL 更有效。当使用绝对 URL 时，浏览器首先通过{{glossary("DNS")}}（见万维网是如何工作的）查找服务器的真实位置，然后再转到该服务器并查找所请求的文件。另一方面，相对 URL，浏览器只在同一服务器上查找被请求的文件。因此，如果你使用绝对 URL 而不是相对 URL，你就会不断地让你的浏览器做额外的工作，这意味着它的效率会降低。
      • 
 
    
 
-
    链接到非HTML资源 ——留下清晰的指示
    
+
    链接到非 HTML 资源 ——留下清晰的指示
    
 
-
    当链接到一个需要下载的资源（如PDF或Word文档）或流媒体（如视频或音频）或有另一个潜在的意想不到的效果（打开一个弹出窗口，或加载Flash电影），你应该添加明确的措辞，以减少任何混乱。如下的例子会让人反感：
    
+
    当链接到一个需要下载的资源（如 PDF 或 Word 文档）或流媒体（如视频或音频）或有另一个潜在的意想不到的效果（打开一个弹出窗口，或加载 Flash 电影），你应该添加明确的措辞，以减少任何混乱。如下的例子会让人反感：
    
 
 
      
  
    • 如果你是在低带宽连接，点击一个链接，然后就开始下载大文件。
      • 
- 
    • 如果你没有安装Flash播放器，点击一个链接，然后突然被带到一个需要Flash的页面。
      • 
+ 
    • 如果你没有安装 Flash 播放器，点击一个链接，然后突然被带到一个需要 Flash 的页面。
      • 
 
    
 
 
    让我们看看一些例子，看看在这里可以使用什么样的文本：
    
@@ -220,16 +220,16 @@ 
    链接到非HTML资
 </a></p>
 
 <p><a href="http://www.example.com/video-stream/">
-  观看视频（将在新标签页中播放, HD画质）
+  观看视频（将在新标签页中播放，HD 画质）
 </a></p>
 
 <p><a href="http://www.example.com/car-game">
-  进入汽车游戏（需要Flash插件）
+  进入汽车游戏（需要 Flash 插件）
 </a></p>
    
 
 
    在下载链接时使用 download 属性
    
 
-
    当您链接到要下载的资源而不是在浏览器中打开时，您可以使用 download 属性来提供一个默认的保存文件名（译注：此属性仅适用于同源URL）。下面是一个下载链接到Firefox 的 Windows最新版本的示例：
    
+
    当您链接到要下载的资源而不是在浏览器中打开时，您可以使用 download 属性来提供一个默认的保存文件名（译注：此属性仅适用于同源 URL）。下面是一个下载链接到 Firefox 的 Windows 最新版本的示例：
    
 
 
    <a href="https://download.mozilla.org/?product=firefox-latest-ssl&os=win64&lang=zh-CN"
    download="firefox-latest-64bit-installer.exe">
@@ -249,7 +249,7 @@ 
    主动学习：创建一个导
  
  • social.html
    • 
 
 
-
    你应该:
    
+
    你应该：
    
 
 
      
  
    1. 在一个页面上的指定位置添加一个无序列表，其中包含要链接到的页面的名称。导航菜单通常只是一个链接列表，因此这在语义上是确定的。
      2. 
@@ -268,8 +268,8 @@ 
      主动学习：创建一个导
 
 
      电子邮件链接
      
 
-
      当点击一个链接或按钮时，打开一个新的电子邮件发送信息而不是连接到一个资源或页面，这种情况是可能做到的。这样做是使用{{HTMLElement("a")}}元素和mailto：URL的方案。
      
- 其最基本和最常用的使用形式为一个mailto:link （链接），链接简单说明收件人的电子邮件地址。例如:
      
+
      当点击一个链接或按钮时，打开一个新的电子邮件发送信息而不是连接到一个资源或页面，这种情况是可能做到的。这样做是使用{{HTMLElement("a")}}元素和mailto：URL 的方案。
      
+ 其最基本和最常用的使用形式为一个mailto:link（链接），链接简单说明收件人的电子邮件地址。例如：
      
 
 
      <a href="mailto:nowhere@mozilla.org">向 nowhere 发邮件</a>
 
      
@@ -280,16 +280,16 @@ 
      电子邮件链接
      
 
 
      具体细节
      
 
-
      除了电子邮件地址，您还可以提供其他信息。事实上，任何标准的邮件头字段可以被添加到你提供的邮件URL。 其中最常用的是主题(subject)、抄送(cc)和主体(body) (这不是一个真正的头字段，但允许您为新邮件指定一个短内容消息)。 每个字段及其值被指定为查询项。
      
+
      除了电子邮件地址，您还可以提供其他信息。事实上，任何标准的邮件头字段可以被添加到你提供的邮件 URL。其中最常用的是主题 (subject)、抄送 (cc) 和主体 (body) (这不是一个真正的头字段，但允许您为新邮件指定一个短内容消息)。 每个字段及其值被指定为查询项。
      
 
-
      下面是一个包含cc、bcc、主题和主体的示例：
      
+
      下面是一个包含 cc、bcc、主题和主体的示例：
      
 
 
      <a href="mailto:nowhere@mozilla.org?cc=name2@rapidtables.com&bcc=name3@rapidtables.com&subject=The%20subject%20of%20the%20email&body=The%20body%20of%20the%20email">
   Send mail with cc, bcc, subject and body
 </a>
      
 
 
      
-
      注意: 每个字段的值必须是URL编码的。 也就是说，不能有非打印字符（不可见字符比如制表符、换行符、分页符）和空格 percent-escaped. 同时注意使用问号（?）来分隔主URL与参数值，以及使用&符来分隔mailto:中的各个参数。 这是标准的URL查询标记方法。阅读 GET 方法 以了解哪种URL查询标记方法是更常用的。
      
+
      注意： 每个字段的值必须是 URL 编码的。也就是说，不能有非打印字符（不可见字符比如制表符、换行符、分页符）和空格 percent-escaped. 同时注意使用问号（?）来分隔主 URL 与参数值，以及使用&符来分隔mailto:中的各个参数。 这是标准的 URL 查询标记方法。阅读 GET 方法 以了解哪种 URL 查询标记方法是更常用的。
      
 
      
 
 
      这里有一些其他的示例mailto链接：
      
@@ -304,7 +304,7 @@ 
      具体细节
      
 
 
      小结
      
 
-
      这就是链接！当您开始查看样式时，您将在稍后的课程中返回链接。接下来是HTML，我们将返回文本语义，并查看一些更高级/不寻常的功能，您会发现有用的-高级文本格式是您的下一站。
      
+
      这就是链接！当您开始查看样式时，您将在稍后的课程中返回链接。接下来是 HTML，我们将返回文本语义，并查看一些更高级/不寻常的功能，您会发现有用的 - 高级文本格式是您的下一站。
      
 
 
      {{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals", "Learn/HTML/Introduction_to_HTML/Advanced_text_formatting", "Learn/HTML/Introduction_to_HTML")}}
      
 
diff --git a/files/zh-cn/learn/html/introduction_to_html/debugging_html/index.html b/files/zh-cn/learn/html/introduction_to_html/debugging_html/index.html
index f4ef5d2200f9e6..27c8f9ba48fb4f 100644
--- a/files/zh-cn/learn/html/introduction_to_html/debugging_html/index.html
+++ b/files/zh-cn/learn/html/introduction_to_html/debugging_html/index.html
@@ -21,11 +21,11 @@
 
-   
+   
-   
+   
@@ -112,7 +112,7 @@ 
      HTML 验证
      阅读以上示例后，你发现保持良好 HTML 格式的重要性。那么应该如何做呢？以上示例规模较小，查找错误还不难，但是一个非常庞大、复杂的 HTML 文档呢？
      
 
-
      最好的方法就是让你的HTML页面通过 Markup Validation Service。由 W3C（制定 HTML、CSS 和其他网络技术标准的组织） 创立并维护的标记验证服务。把一个 HTML 文档加载至本网页并运行 ，网页会返回一个错误报告。
      
+
      最好的方法就是让你的 HTML 页面通过 Markup Validation Service。由 W3C（制定 HTML、CSS 和其他网络技术标准的组织）创立并维护的标记验证服务。把一个 HTML 文档加载至本网页并运行，网页会返回一个错误报告。
      The HTML validator homepage
      
 
diff --git a/files/zh-cn/learn/html/introduction_to_html/document_and_website_structure/index.html b/files/zh-cn/learn/html/introduction_to_html/document_and_website_structure/index.html
index b0b395a04a2924..81ad499a86beb7 100644
--- a/files/zh-cn/learn/html/introduction_to_html/document_and_website_structure/index.html
+++ b/files/zh-cn/learn/html/introduction_to_html/document_and_website_structure/index.html
@@ -38,7 +38,7 @@ 
      文档的基本组成部分
      
  
      页眉
      
- 
      通常横跨于整个页面顶部有一个大标题 和/或 一个标志。 这是网站的主要一般信息，通常存在于所有网页。
      
+ 
      通常横跨于整个页面顶部有一个大标题 和/或 一个标志。这是网站的主要一般信息，通常存在于所有网页。
      
  
      导航栏
      
  
      指向网站各个主要区段的超链接。通常用菜单按钮、链接或标签页表示。类似于标题栏，导航栏通常应在所有网页之间保持一致，否则会让用户感到疑惑，甚至无所适从。许多 web 设计人员认为导航栏是标题栏的一部分，而不是独立的组件，但这并非绝对；还有人认为，两者独立可以提供更好的 无障碍访问特性，因为屏幕阅读器可以更清晰地分辨二者。
      
  
      主内容
      
@@ -46,7 +46,7 @@ 
      文档的基本组成部分
      
  
      侧边栏
      
  
      一些外围信息、链接、引用、广告等。通常与主内容相关（例如一个新闻页面上，侧边栏可能包含作者信息或相关文章链接），还可能存在其他的重复元素，如辅助导航系统。
      
  
      页脚
      
- 
      横跨页面底部的狭长区域。和标题一样，页脚是放置公共信息（比如版权声明或联系方式）的，一般使用较小字体，且通常为次要内容。 还可以通过提供快速访问链接来进行 {{Glossary("SEO")}}。
      
+ 
      横跨页面底部的狭长区域。和标题一样，页脚是放置公共信息（比如版权声明或联系方式）的，一般使用较小字体，且通常为次要内容。还可以通过提供快速访问链接来进行 {{Glossary("SEO")}}。
      
 
      一个“典型的网站”可能会这样布局：
      
@@ -55,15 +55,15 @@ 
      文档的基本组成部分
      用于构建内容的 HTML
      
 
-
      以上简单示例不是很精美，但是足够说明网站的典型布局方式了。 一些站点拥有更多列，其中一些远比这复杂，但一切在你掌握之中。通过合适的CSS， 你可以使用相当多种的任意页面元素来环绕在不同的页面区域来做成你想要的样子，但如前所述，我们要敬畏语义，做到正确选用元素。
      
+
      以上简单示例不是很精美，但是足够说明网站的典型布局方式了。一些站点拥有更多列，其中一些远比这复杂，但一切在你掌握之中。通过合适的 CSS，你可以使用相当多种的任意页面元素来环绕在不同的页面区域来做成你想要的样子，但如前所述，我们要敬畏语义，做到正确选用元素。
      
 
-
      这是因为视觉效果并不是一切。 我们可以修改最重要内容（例如导航菜单和相关链接）的颜色、字体大小来吸引用户的注意，但是这对视障人士是无效的，“粉红色”和“大字体”对他们并不奏效。
      
+
      这是因为视觉效果并不是一切。我们可以修改最重要内容（例如导航菜单和相关链接）的颜色、字体大小来吸引用户的注意，但是这对视障人士是无效的，“粉红色”和“大字体”对他们并不奏效。
      
-
      注：全球色盲患者比例为 4%，换句话说，每 12 名男性就有一位色盲，每 200 名女性就有一位色盲。全盲和视障人士约占世界人口（约 70 亿）的 13％（2015年 全球约有 9.4 亿人口存在视力问题）。
      
+
      注：全球色盲患者比例为 4%，换句话说，每 12 名男性就有一位色盲，每 200 名女性就有一位色盲。全盲和视障人士约占世界人口（约 70 亿）的 13％（2015 年 全球约有 9.4 亿人口存在视力问题）。
      
 
      
 
-
      HTML 代码中可根据功能来为区段添加标记。可使用元素来无歧义地表示上文所讲的内容区段，屏幕阅读器等辅助技术可以识别这些元素，并帮助执行“找到主导航 “或”找到主内容“等任务。参见前文所讲的 页面中元素结构和语义不佳所带来的后果。
      
+
      HTML 代码中可根据功能来为区段添加标记。可使用元素来无歧义地表示上文所讲的内容区段，屏幕阅读器等辅助技术可以识别这些元素，并帮助执行“找到主导航“或”找到主内容“等任务。参见前文所讲的 页面中元素结构和语义不佳所带来的后果。
      为了实现语义化标记，HTML 提供了明确这些区段的专用标签，例如：
      
 
@@ -97,7 +97,7 @@ 
      主动学习：研究示例代码
      主动学习：研究示例代码HTML 布局元素细节
      无语义元素
      
 
-
      有时你会发现，对于一些要组织的项目或要包装的内容，现有的语义元素均不能很好对应。有时候你可能只想将一组元素作为一个单独的实体来修饰来响应单一的用 {{glossary("CSS")}} 或 {{glossary("JavaScript")}}。为了应对这种情况，HTML提供了 {{HTMLElement("div")}} 和 {{HTMLElement("span")}} 元素。应配合使用 {{htmlattrxref('class')}} 属性提供一些标签，使这些元素能易于查询。
      
+
      有时你会发现，对于一些要组织的项目或要包装的内容，现有的语义元素均不能很好对应。有时候你可能只想将一组元素作为一个单独的实体来修饰来响应单一的用 {{glossary("CSS")}} 或 {{glossary("JavaScript")}}。为了应对这种情况，HTML 提供了 {{HTMLElement("div")}} 和 {{HTMLElement("span")}} 元素。应配合使用 {{htmlattrxref('class')}} 属性提供一些标签，使这些元素能易于查询。
      {{HTMLElement("span")}} 是一个内联的（inline）无语义元素，最好只用于无法找到更好的语义元素来包含内容时，或者不想增加特定的含义时。例如：
      
 
@@ -171,7 +171,7 @@ 
      无语义元素
      这里不应使用 <aside>，因为它和主内容并没有必要的联系（你想在任何地方都能看到它）。甚至不能用 <section> ，因为它也不是页面上主内容的一部分。所以在这种情况下就应使用 <div>，为满足无障碍使用特征，还应为购物车的标题设置一个可读标签。
      
-
      警告：<div> 非常便利但容易被滥用。由于它们没有语义值，会使 HTML 代码变得混乱。要小心使用，只有在没有更好的语义方案时才选择它，而且要尽可能少用， 否则文档的升级和维护工作会非常困难。
      
+
      警告：<div> 非常便利但容易被滥用。由于它们没有语义值，会使 HTML 代码变得混乱。要小心使用，只有在没有更好的语义方案时才选择它，而且要尽可能少用，否则文档的升级和维护工作会非常困难。
      
 
      换行与水平分割线
      
@@ -186,7 +186,7 @@ 
      换行与水平分割线
      
 他写的标签谁也懂不了。</p>
 
 
-
      没有 <br> 元素，这段会直接显示在长长的一行中（如前文所讲，HTML会忽略大部分空格）；使用 <br> 元素，才使得诗看上去像诗：
      
+
      没有 <br> 元素，这段会直接显示在长长的一行中（如前文所讲，HTML 会忽略大部分空格）；使用 <br> 元素，才使得诗看上去像诗：
      从前有个人叫小高
      
  他说写 HTML 感觉最好
      
diff --git a/files/zh-cn/learn/html/introduction_to_html/getting_started/index.html b/files/zh-cn/learn/html/introduction_to_html/getting_started/index.html
index c83e22fef4985d..3d448f74324dc8 100644
--- a/files/zh-cn/learn/html/introduction_to_html/getting_started/index.html
+++ b/files/zh-cn/learn/html/introduction_to_html/getting_started/index.html
@@ -29,7 +29,7 @@
 
 
      什么是 HTML?
      
 
-
      {{glossary("HTML")}} (HyperText Markup Language) 不是一门编程语言，而是一种用来告知浏览器如何组织页面的标记语言。HTML 可复杂、可简单，一切取决于开发者。它由一系列的元素（{{Glossary("Element", "elements")}}）组成，这些元素可以用来包围不同部分的内容，使其以某种方式呈现或者工作。 一对标签（ {{Glossary("Tag", "tags")}}）可以为一段文字或者一张图片添加超链接，将文字设置为斜体，改变字号，等等。 例如下面一行内容：
      
+
      {{glossary("HTML")}} (HyperText Markup Language) 不是一门编程语言，而是一种用来告知浏览器如何组织页面的标记语言。HTML 可复杂、可简单，一切取决于开发者。它由一系列的元素（{{Glossary("Element", "elements")}}）组成，这些元素可以用来包围不同部分的内容，使其以某种方式呈现或者工作。一对标签（ {{Glossary("Tag", "tags")}}）可以为一段文字或者一张图片添加超链接，将文字设置为斜体，改变字号，等等。例如下面一行内容：
      我的猫咪脾气爆:)
      
 
@@ -165,7 +165,7 @@ 
      Playable code
      嵌套元素
      
 
-
      你也可以把元素放到其它元素之中——这被称作嵌套。如果我们想要表明我们的小猫脾气很暴躁，可以将“爆”嵌套在{{htmlelement("strong")}} 中，意味着这个单词被着重强调:
      
+
      你也可以把元素放到其它元素之中——这被称作嵌套。如果我们想要表明我们的小猫脾气很暴躁，可以将“爆”嵌套在{{htmlelement("strong")}} 中，意味着这个单词被着重强调：
      <p>我的猫咪脾气<strong>爆</strong>:)</p>
      
 
@@ -177,10 +177,10 @@ 
      嵌套元素
      块级元素和内联元素
      
 
-
      在HTML中有两种你需要知道的重要元素类别，块级元素和内联元素。
      
+
      在 HTML 中有两种你需要知道的重要元素类别，块级元素和内联元素。
        
- 
      • 块级元素在页面中以块的形式展现 —— 相对于其前面的内容它会出现在新的一行，其后的内容也会被挤到下一行展现。块级元素通常用于展示页面上结构化的内容，例如段落、列表、导航菜单、页脚等等。一个以block形式展现的块级元素不会被嵌套进内联元素中，但可以嵌套在其它块级元素中。
        • 
+ 
      • 块级元素在页面中以块的形式展现 —— 相对于其前面的内容它会出现在新的一行，其后的内容也会被挤到下一行展现。块级元素通常用于展示页面上结构化的内容，例如段落、列表、导航菜单、页脚等等。一个以 block 形式展现的块级元素不会被嵌套进内联元素中，但可以嵌套在其它块级元素中。
        • 
  
      • 内联元素通常出现在块级元素中并环绕文档内容的一小部分，而不是一整个段落或者一组内容。内联元素不会导致文本换行：它通常出现在一堆文字之间例如超链接元素{{htmlelement("a")}}或者强调元素{{htmlelement("em")}}和 {{htmlelement("strong")}}。
        • 
 
      
 
@@ -196,11 +196,11 @@ 
      块级元素和内联元素
      {{ EmbedLiveSample('块级元素和内联元素', 700, 200, "", "", "hide-codepen-jsfiddle") }}
      
-
      注: HTML5重新定义了元素的类别：见 元素内容分类(译文)。尽管这些新的定义更精确，但却比上述的 “块级元素” 和 “内联元素” 更难理解，因此在之后的讨论中仍使用旧的定义。
      
+
      注: HTML5 重新定义了元素的类别：见 元素内容分类(译文)。尽管这些新的定义更精确，但却比上述的“块级元素”和“内联元素”更难理解，因此在之后的讨论中仍使用旧的定义。
      
 
      
-
      注: 在这篇文章中提到的“块”和“内联”，不应该与 the types of CSS boxes 中的同名术语相混淆. 尽管他们默认是相关的，但改变CSS显示类型并不会改变元素的分类，也不会影响它可以包含和被包含于哪些元素。防止这种混淆也是HTML5摒弃这些术语的原因之一。
      
+
      注: 在这篇文章中提到的“块”和“内联”，不应该与 the types of CSS boxes 中的同名术语相混淆。尽管他们默认是相关的，但改变 CSS 显示类型并不会改变元素的分类，也不会影响它可以包含和被包含于哪些元素。防止这种混淆也是 HTML5 摒弃这些术语的原因之一。
      
 
      
@@ -218,7 +218,7 @@ 
      空元素
      
 
      {{ EmbedLiveSample('空元素', 700, 300, "", "", "hide-codepen-jsfiddle") }}
      
 
 
      
-
      注: 空元素（Empty elements） 有时也被叫作 void elements.
      
+
      注: 空元素（Empty elements）有时也被叫作 void elements.
      
 
      
 
 
      属性
      
@@ -227,7 +227,7 @@ 
      属性
      
 
 
      &amp;amp;lt;p class="editor-note">我的猫咪脾气爆&amp;amp;lt;/p>
      
 
-
      属性包含元素的额外信息，这些信息不会出现在实际的内容中。在上述例子中，这个class属性给元素赋了一个识别的名字（id），这个名字此后可以被用来识别此元素的样式信息和其他信息。
      
+
      属性包含元素的额外信息，这些信息不会出现在实际的内容中。在上述例子中，这个 class 属性给元素赋了一个识别的名字（id），这个名字此后可以被用来识别此元素的样式信息和其他信息。
      
 
 
      一个属性必须包含如下内容：
      
 
@@ -242,12 +242,12 @@ 
      学习实践：为一个元
 
      另一个例子是关于元素{{htmlelement("a")}}的——元素{{htmlelement("a")}}是锚，它使被标签包裹的内容成为一个超链接。此元素也可以添加大量的属性，其中几个如下：
      
 
 
        
- 
      • href: 这个属性声明超链接的web地址，当这个链接被点击浏览器会跳转至href声明的web地址。例如：href="https://www.mozilla.org/"。
        • 
+ 
      • href: 这个属性声明超链接的 web 地址，当这个链接被点击浏览器会跳转至 href 声明的 web 地址。例如：href="https://www.mozilla.org/"。
        • 
  
      • title: 标题title属性为超链接声明额外的信息，比如你将链接至的那个页面。例如：title="The Mozilla homepage"。当鼠标悬停在超链接上面时，这部分信息将以工具提示的形式显示。
        • 
  
      • target: 目标target属性用于指定链接如何呈现出来。例如，target="_blank"将在新标签页中显示链接。如果你希望在当前标签页显示链接，忽略这个属性即可。
        • 
 
      
 
-
      编辑下面的文本框中的内容，使之变成指向任一个你喜欢的web地址的链接。首先，添加<a>元素，然后为它添加href属性和title属性。你可以即时的在输出区域看到你修改的内容。你应该可以看到一个连接，当鼠标移上此链接时会显示title属性值，当点击此链接时会跳转到href指定的web地址。记住：在元素名和属性名之间以及两个属性之间要有一个空格。
      
+
      编辑下面的文本框中的内容，使之变成指向任一个你喜欢的 web 地址的链接。首先，添加<a>元素，然后为它添加 href 属性和 title 属性。你可以即时的在输出区域看到你修改的内容。你应该可以看到一个连接，当鼠标移上此链接时会显示 title 属性值，当点击此链接时会跳转到 href 指定的 web 地址。记住：在元素名和属性名之间以及两个属性之间要有一个空格。
      
 
 
      如果写错了，可随时按【重置】按钮重新开始，如果实在想不出来，可按【显示答案】按钮查看答案。
      
 
@@ -360,34 +360,34 @@ 
      Playable code2
      
 
 
      布尔属性
      
 
-
      有时你会看到没有值的属性，它是合法的。这些属性被称为布尔属性，他们只能有跟它的属性名一样的属性值。例如{{htmlattrxref("disabled", "input")}} 属性，他们可以标记表单输入使之变为不可用(变灰色)，此时用户不能向他们输入任何数据。
      
+
      有时你会看到没有值的属性，它是合法的。这些属性被称为布尔属性，他们只能有跟它的属性名一样的属性值。例如{{htmlattrxref("disabled", "input")}} 属性，他们可以标记表单输入使之变为不可用 (变灰色)，此时用户不能向他们输入任何数据。
      
 
 
      <input type="text" disabled="disabled">
      
 
-
      方便起见，我们完全可以将其写成以下形式(我们还提供了一个非禁止输入的表单元素供您参考，以作为对比)：
      
+
      方便起见，我们完全可以将其写成以下形式 (我们还提供了一个非禁止输入的表单元素供您参考，以作为对比)：
      
 
-
      <!-- 使用disabled属性来防止终端用户输入文本到输入框中 -->
+
      <!-- 使用 disabled 属性来防止终端用户输入文本到输入框中 -->
 <input type="text" disabled>
 
-<!-- 下面这个输入框没有disabled属性，所以用户可以向其中输入 -->
+<!-- 下面这个输入框没有 disabled 属性，所以用户可以向其中输入 -->
 <input type="text">
 
      
 
-
      上面两段HTML代码产生的效果如下：
      
+
      上面两段 HTML 代码产生的效果如下：
      
 
 
      {{ EmbedLiveSample('布尔属性', 700, 100, "", "", "hide-codepen-jsfiddle") }}
      
 
 
      省略包围属性值的引号
      
 
-
      当你浏览那些粗糙的web网站，你将会看见各种各样奇怪的标记风格，其中就有不给属性值添加引号。在某些情况下它是被允许的，但是其他情况下会破坏你的标记。例如，我们可以写一个只拥有一个href属性的链接，如下：
      
+
      当你浏览那些粗糙的 web 网站，你将会看见各种各样奇怪的标记风格，其中就有不给属性值添加引号。在某些情况下它是被允许的，但是其他情况下会破坏你的标记。例如，我们可以写一个只拥有一个 href 属性的链接，如下：
      
 
 
      <a href=https://www.mozilla.org/>收藏页面</a>
      
 
-
      然而，当我们再添加一个title属性时就会出错，如下：
      
+
      然而，当我们再添加一个 title 属性时就会出错，如下：
      
 
 
      <a href=https://www.mozilla.org/ title=The Mozilla homepage>收藏页面</a>
      
 
-
      此时浏览器会误解你的标记，它会把title属性理解为三个属性——title的属性值为"The“，另外还有两个布尔属性“Mozilla”和“homepage”。看下面的例子，它明显不是我们所期望的，并且在这个编码里面它会报错或者出现异常行为。试一试把鼠标移动到链接上，看会显示什么title属性值!
      
+
      此时浏览器会误解你的标记，它会把 title 属性理解为三个属性——title 的属性值为"The“，另外还有两个布尔属性“Mozilla”和“homepage”。看下面的例子，它明显不是我们所期望的，并且在这个编码里面它会报错或者出现异常行为。试一试把鼠标移动到链接上，看会显示什么 title 属性值！
      
 
 
      {{ EmbedLiveSample('省略包围属性值的引号', 700, 100, "", "", "hide-codepen-jsfiddle") }}
      
 
@@ -395,7 +395,7 @@ 
      省略包围属性值的引号
      
 
 
      单引号或者双引号？
      
 
-
      在目前为止，本章内容所有的属性都是由双引号来包裹。也许在一些HTML中，你以前也见过单引号。这只是风格的问题，你可以从中选择一个你喜欢的。以下两种情况都可以：
      
+
      在目前为止，本章内容所有的属性都是由双引号来包裹。也许在一些 HTML 中，你以前也见过单引号。这只是风格的问题，你可以从中选择一个你喜欢的。以下两种情况都可以：
      
 
 
      <a href="http://www.example.com">示例站点链接</a>
 
@@ -405,15 +405,15 @@ 
      单引号或者双引号？
      
 
 
      <a href="http://www.example.com'>示例站点链接</a>
      
 
-
      在一个HTML中已使用一种引号，你可以在此引号中嵌套另外一种引号：
      
+
      在一个 HTML 中已使用一种引号，你可以在此引号中嵌套另外一种引号：
      
 
 
      <a href="http://www.example.com" title="你觉得'好玩吗'？">示例站点链接</a>
      
 
-
      如果你想将引号当作文本显示在html中，你就必须使用实体引用。
      
+
      如果你想将引号当作文本显示在 html 中，你就必须使用实体引用。
      
 
-
      剖析HTML文档
      
+
      剖析 HTML 文档
      
 
-
      学习了一些HTML元素的基础知识，这些元素单独一个是没有意义的。现在我们来学习这些特定元素是怎么被结合起来，从而形成一个完整的HTML页面的：
      
+
      学习了一些 HTML 元素的基础知识，这些元素单独一个是没有意义的。现在我们来学习这些特定元素是怎么被结合起来，从而形成一个完整的 HTML 页面的：
      
 
 
      <!DOCTYPE html>
 <html>
@@ -426,27 +426,27 @@ 
      剖析HTML文档
      
   </body>
 </html>
      
 
-
      分析如下:
      
+
      分析如下：
      
 
 
        
- 
      1. <!DOCTYPE html>: 声明文档类型. 很久以前，早期的HTML(大约1991年2月)，文档类型声明类似于链接，规定了HTML页面必须遵从的良好规则，能自动检测错误和其他有用的东西。使用如下：
+ 
      2. <!DOCTYPE html>: 声明文档类型。很久以前，早期的 HTML(大约 1991 年 2 月)，文档类型声明类似于链接，规定了 HTML 页面必须遵从的良好规则，能自动检测错误和其他有用的东西。使用如下：
 
   
        <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
        
   然而这种写法已经过时了，这些内容已成为历史。只需要知道 <!DOCTYPE html> 是最短有效的文档声明。
        3. 
  
      3. <html></html>: <html>元素。这个元素包裹了整个完整的页面，是一个根元素。
        4. 
- 
      4. <head></head>: <head>元素。这个元素是一个容器，它包含了所有你想包含在HTML页面中但不想在HTML页面中显示的内容。这些内容包括你想在搜索结果中出现的关键字和页面描述，CSS样式，字符集声明等等。以后的章节能学到更多关于<head>元素的内容。
        5. 
- 
      5. <meta charset="utf-8">: 这个元素设置文档使用utf-8字符集编码，utf-8字符集包含了人类大部分的文字。基本上他能识别你放上去的所有文本内容。毫无疑问要使用它，并且它能在以后避免很多其他问题。
        6. 
+ 
      6. <head></head>: <head>元素。这个元素是一个容器，它包含了所有你想包含在 HTML 页面中但不想在 HTML 页面中显示的内容。这些内容包括你想在搜索结果中出现的关键字和页面描述，CSS 样式，字符集声明等等。以后的章节能学到更多关于<head>元素的内容。
        7. 
+ 
      7. <meta charset="utf-8">: 这个元素设置文档使用 utf-8 字符集编码，utf-8 字符集包含了人类大部分的文字。基本上他能识别你放上去的所有文本内容。毫无疑问要使用它，并且它能在以后避免很多其他问题。
        8. 
  
      8. <title></title>: 设置页面标题，出现在浏览器标签上，当你标记/收藏页面时它可用来描述页面。
        9. 
- 
      9. <body></body>: <body>元素。 包含了你访问页面时所有显示在页面上的内容，文本，图片，音频，游戏等等。
        10. 
+ 
      10. <body></body>: <body>元素。包含了你访问页面时所有显示在页面上的内容，文本，图片，音频，游戏等等。
        11. 
 
      
 
-
      学习实践：为HTML文档添加一些特征
      
+
      学习实践：为 HTML 文档添加一些特征
      
 
-
      如果你想在你的本地练习写一些HTML页面，你可以这样做：
      
+
      如果你想在你的本地练习写一些 HTML 页面，你可以这样做：
      
 
 
        
- 
      1. 复制上面的HTML页面例子。
        2. 
+ 
      2. 复制上面的 HTML 页面例子。
        3. 
  
      3. 在编辑器创建一个新文件。
        4. 
  
      4. 粘贴代码到这个文件。
        5. 
  
      5. 保存为index.html.
        6. 
@@ -458,14 +458,14 @@ 
        学习实践：为HTML
 
 
        你可以打开浏览器看看这段代码的效果是什么样的，然后改变代码刷新浏览器看看新的结果。最开始的代码是这样的效果：
        
 
-
        A simple HTML page that says This is my page所以在这段练习中, 你可以用你的电脑在本地编写运行代码，如上所述, 你也可以在下面的简单可编辑窗口编辑它 (此时这个简单的可编辑窗口仅显示<body>标签内的内容.) 我们希望你能够实践以下步骤：
        
+
        A simple HTML page that says This is my page所以在这段练习中，你可以用你的电脑在本地编写运行代码，如上所述，你也可以在下面的简单可编辑窗口编辑它 (此时这个简单的可编辑窗口仅显示<body>标签内的内容.) 我们希望你能够实践以下步骤：
        
 
 
          
- 
        • 就在{{htmlelement("body")}} 元素开始标签下方,为这个文档添加一个主标题。这个主标题应该被包含在<h1>开始标签和</h1>结束标签之间。
          • 
+ 
        • 就在{{htmlelement("body")}} 元素开始标签下方，为这个文档添加一个主标题。这个主标题应该被包含在<h1>开始标签和</h1>结束标签之间。
          • 
  
        • 编辑这个段落以包含一些你感兴趣的文本。
          • 
  
        • 把字词包含在开始标记<strong>和结束标记</strong>之间可以使他们以粗体显示，从而突出任何重要的字词。
          • 
  
        • 在你的文档中添加一个超文本链接，如前所述。
          • 
- 
        • 在段落下方向你的文档添加一张图片，如前所述。如果你尝试对不同的图片(在你的本地电脑或是在Web的其他位置上)添加链接，那你就更棒了。
          • 
+ 
        • 在段落下方向你的文档添加一张图片，如前所述。如果你尝试对不同的图片 (在你的本地电脑或是在 Web 的其他位置上) 添加链接，那你就更棒了。
          • 
 
        
 
 
        如果写错了，可随时按【重置】按钮重新开始，如果实在想不出来，可按【显示答案】按钮查看答案。
        
@@ -580,7 +580,7 @@ 
        Playable code3
        
 
 
        {{ EmbedLiveSample('Playable_code3', 700, 600,"", "", "hide-codepen-jsfiddle")}}
        
 
-
        HTML中的空白
        
+
        HTML 中的空白
        
 
 
        在上面的例子中，你可能已经注意到了在代码中包含了很多的空格——这是没有必要的；下面的两个代码片段是等价的：
        
 
@@ -589,15 +589,15 @@ 
        HTML中的空白
        
 <p>狗 狗        很
          呆 萌。</p>
      
 
-
      无论你在HTML元素的内容中使用多少空格(包括空白字符，包括换行)，当渲染这些代码的时候，HTML解释器会将连续出现的空白字符减少为一个单独的空格符。
      
+
      无论你在 HTML 元素的内容中使用多少空格 (包括空白字符，包括换行)，当渲染这些代码的时候，HTML 解释器会将连续出现的空白字符减少为一个单独的空格符。
      
 
-
      那么为什么我们会在HTML元素的嵌套中使用那么多的空白呢? 答案就是为了可读性 —— 如果你的代码被很好地进行格式化，那么就很容易理解你的代码是怎么回事，反之就只有聚做一团的混乱.。在我们的HTML代码中，我们让每一个嵌套的元素以两个空格缩进。 你使用什么风格来格式化你的代码取决于你 (比如所对于每层缩进使用多少个空格)，但是你应该坚持使用某种风格。
      
+
      那么为什么我们会在 HTML 元素的嵌套中使用那么多的空白呢？答案就是为了可读性 —— 如果你的代码被很好地进行格式化，那么就很容易理解你的代码是怎么回事，反之就只有聚做一团的混乱.。在我们的 HTML 代码中，我们让每一个嵌套的元素以两个空格缩进。你使用什么风格来格式化你的代码取决于你 (比如所对于每层缩进使用多少个空格)，但是你应该坚持使用某种风格。
      
 
-
      实体引用： 在HTML中包含特殊字符
      
+
      实体引用：在 HTML 中包含特殊字符
      
 
-
      在HTML中，字符 <, >,",' 和 & 是特殊字符. 它们是HTML语法自身的一部分, 那么你如何将这些字符包含进你的文本中呢, 比如说如果你真的想要在文本中使用符号&或者小于号, 而不想让它们被浏览器视为代码并被解释?
      
+
      在 HTML 中，字符 <, >,",' 和 & 是特殊字符。它们是 HTML 语法自身的一部分，那么你如何将这些字符包含进你的文本中呢，比如说如果你真的想要在文本中使用符号&或者小于号，而不想让它们被浏览器视为代码并被解释？
      
 
-
      我们必须使用字符引用 —— 表示字符的特殊编码, 它们可以在那些情况下使用. 每个字符引用以符号&开始, 以分号(;)结束.
      
+
      我们必须使用字符引用 —— 表示字符的特殊编码，它们可以在那些情况下使用。每个字符引用以符号&开始，以分号 (;) 结束。
      
 
 
      
  
   
      预备知识:预备知识：
    阅读并理解 HTML 入门、HTML 文字处理初步 和 创建超链接 等文章，熟悉 HTML 的基本概念。
   
      
   
      学习目标:学习目标：
    学习调试工具的基础用法，以查找 HTML 中的错误。
   
      
        
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
      
@@ -630,25 +630,25 @@ 
      实体引用： 在HTML中
  
 
      
  
      
 
-
      在下面的例子中你可以看到两个段落，它们在谈论web技术:
      
+
      在下面的例子中你可以看到两个段落，它们在谈论 web 技术：
      
 
 
      <p>HTML 中用 <p> 来定义段落元素。</p>
 
 <p>HTML 中用 &lt;p&gt; 来定义段落元素</p>
      
 
-
      在下面的实时输出中，你会看到第一段是错误的，因为浏览器会认为第二个<p>是开始一个新的段落！ 第二段是正确的，因为我们用字符引用来代替了角括号（'<'和'>'符号）.
      
+
      在下面的实时输出中，你会看到第一段是错误的，因为浏览器会认为第二个<p>是开始一个新的段落！第二段是正确的，因为我们用字符引用来代替了角括号（'<'和'>'符号）.
      
 
-
      {{ EmbedLiveSample('实体引用：_在HTML中包含特殊字符', 700, 200, "", "", "hide-codepen-jsfiddle") }}
      
+
      {{ EmbedLiveSample('实体引用：_在 HTML 中包含特殊字符', 700, 200, "", "", "hide-codepen-jsfiddle") }}
      
 
 
      
-
      提示: 维基百科上有一个包含所有可用HTML字符实体引用的列表：XML和HTML字符实体引用列表。
      
+
      提示: 维基百科上有一个包含所有可用 HTML 字符实体引用的列表：XML 和 HTML 字符实体引用列表。
      
 
      
 
-
      HTML注释
      
+
      HTML 注释
      
 
-
      如同大部分的编程语言一样，在HTML中有一种可用的机制来在代码中书写注释 —— 注释是被浏览器忽略的，而且是对用户不可见的，它们的目的是允许你描述你的代码是如何工作的和不同部分的代码做了什么等等。 如果你在半年后重新返回你的代码库，而且不能记起你所做的事情 —— 或者当你处理别人的代码的时候， 那么注释是很有用的.
      
+
      如同大部分的编程语言一样，在 HTML 中有一种可用的机制来在代码中书写注释 —— 注释是被浏览器忽略的，而且是对用户不可见的，它们的目的是允许你描述你的代码是如何工作的和不同部分的代码做了什么等等。如果你在半年后重新返回你的代码库，而且不能记起你所做的事情 —— 或者当你处理别人的代码的时候，那么注释是很有用的。
      
 
-
      为了将一段HTML中的内容置为注释，你需要将其用特殊的记号<!--和-->包括起来， 比如：
      
+
      为了将一段 HTML 中的内容置为注释，你需要将其用特殊的记号<!--和-->包括起来，比如：
      
 
 
      <p>我在注释外！</p>
 
@@ -656,14 +656,14 @@ 
      HTML注释
      
 
 
      正如你下面所见的那样，第一段出现在了实时输出中，但是第二段却没有。
      
 
-
      {{ EmbedLiveSample('HTML注释', 700, 100,"", "", "hide-codepen-jsfiddle") }}
      
+
      {{ EmbedLiveSample('HTML 注释', 700, 100,"", "", "hide-codepen-jsfiddle") }}
      
 
 
      总结
      
 
-
      你已经来到了这篇文章的结尾 —— 希望你享受你的基础的HTML学习的旅程。 在这里你应该可以理解HTML语言的全貌， 它在基础的级别是如何工作，而且可以使用一些元素和属性。 在这个模块的后续文章中，我们会深入一些你已经见过的东西的细节，并且介绍一些新的HTML的特性。未完待续！
      
+
      你已经来到了这篇文章的结尾 —— 希望你享受你的基础的 HTML 学习的旅程。在这里你应该可以理解 HTML 语言的全貌，它在基础的级别是如何工作，而且可以使用一些元素和属性。在这个模块的后续文章中，我们会深入一些你已经见过的东西的细节，并且介绍一些新的 HTML 的特性。未完待续！
      
 
 
      
-
      提示: 现在，你将开始学习更多关于HTML的知识，你可能也想了解一些层叠样式列表（CSS）的基础知识。CSS是一种用来设计网页样式的语言（比如，用它改变字体、颜色或页面布局等）。你很快就会发现，HTML和CSS能很好地协调配合。
      
+
      提示: 现在，你将开始学习更多关于 HTML 的知识，你可能也想了解一些层叠样式列表（CSS）的基础知识。CSS 是一种用来设计网页样式的语言（比如，用它改变字体、颜色或页面布局等）。你很快就会发现，HTML 和 CSS 能很好地协调配合。
      
 
      
 
 
      {{NextMenu("Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML", "Learn/HTML/Introduction_to_HTML")}}
      
diff --git a/files/zh-cn/learn/html/introduction_to_html/html_text_fundamentals/index.html b/files/zh-cn/learn/html/introduction_to_html/html_text_fundamentals/index.html
index cc4d7d84608929..7a341e49817c40 100644
--- a/files/zh-cn/learn/html/introduction_to_html/html_text_fundamentals/index.html
+++ b/files/zh-cn/learn/html/introduction_to_html/html_text_fundamentals/index.html
@@ -2,7 +2,7 @@
 title: HTML 文字处理基础
 slug: learn/HTML/Introduction_to_HTML/HTML_text_fundamentals
 tags:
-  - HTML指南
+  - HTML 指南
   - 学习
 translation_of: Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals
 ---
@@ -10,30 +10,30 @@
 
 
      {{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML", "Learn/HTML/Introduction_to_HTML/Creating_hyperlinks", "Learn/HTML/Introduction_to_HTML")}}
      
 
-
      HTML的主要工作是编辑文本结构和文本内容（也称为语义{{glossary("semantics")}}），以便浏览器能正确的显示。 本文介绍了 {{glossary("HTML")}}的使用方法：在一段文本中添加标题和段落，强调语句，创建列表等等。
      
+
      HTML 的主要工作是编辑文本结构和文本内容（也称为语义{{glossary("semantics")}}），以便浏览器能正确的显示。本文介绍了 {{glossary("HTML")}}的使用方法：在一段文本中添加标题和段落，强调语句，创建列表等等。
      
 
 
-   
+   
-   
-   
+   
+   
      
  
   
      先决条件:先决条件：
    阅读 开始学习 HTML，了解基本的 HTML 知识。
   
      
   
      目的:学习如何用标记(段落、标题、列表、强调、引用)来建立基础文本页面的文本结构和文本内容。目的：学习如何用标记 (段落、标题、列表、强调、引用) 来建立基础文本页面的文本结构和文本内容。
   
      
        
 
      
 
-
      基础: 标题和段落
      
+
      基础：标题和段落
      
 
-
      大部分的文本结构由标题和段落组成。 不管是小说、报刊、教科书还是杂志等。
      
+
      大部分的文本结构由标题和段落组成。不管是小说、报刊、教科书还是杂志等。
      
 
 
      An example of a newspaper front cover, showing use of a top level heading, subheadings and paragraphs.
      
 
 
      内容结构化会使读者的阅读体验更轻松，更愉快。
      
 
-
      在HTML中，每个段落是通过 {{htmlelement("p")}} 元素标签进行定义的, 比如下面这样：
      
+
      在 HTML 中，每个段落是通过 {{htmlelement("p")}} 元素标签进行定义的，比如下面这样：
      
 
 
      <p>我是一个段落，千真万确。</p>
      
 
@@ -71,9 +71,9 @@ 
      编辑结构层次
      
  
    2. 在可用的六个标题级别中，您应该只在每页使用不超过三个，除非您认为有必要使用更多。具有许多级别的文档（即，较深的标题层次结构）变得难以操作并且难以导航。在这种情况下，如果可能，建议将内容分散在多个页面上。
      3. 
 
 
-
      为什么我们需要结构化?
      
+
      为什么我们需要结构化？
      
 
-
      回答这个问题前，让我们先来看一段文档示例“text-start.html” — 并从运行这段文档示例（美味的豆沙食谱）开始。首先，您可以复制一份并保存到本地机器上，在之后的练习中您将用到它。在这个文档的主体 （body）中包含了多个内容 — 这些内容没有做任何标记，但是编辑时使用了换行 (输入回车/换行跳转到下一行)处理。
      
+
      回答这个问题前，让我们先来看一段文档示例“text-start.html” — 并从运行这段文档示例（美味的豆沙食谱）开始。首先，您可以复制一份并保存到本地机器上，在之后的练习中您将用到它。在这个文档的主体（body）中包含了多个内容 — 这些内容没有做任何标记，但是编辑时使用了换行 (输入回车/换行跳转到下一行) 处理。
      
 
 
      然而，当您在浏览器中打开文档时，您会看到文本显示为一整块！
      
 
@@ -85,12 +85,12 @@ 
      为什么我们需要结构化?
      
  
    3. 用户在阅读网页时，往往会快速浏览以查找相关内容，经常只是阅读开头的标题（我们通常在一个网页上会花费很少的时间 spend a very short time on a web page)。如果用户不能在几秒内看到一些有用的内容，他们很可能会感到沮丧并离开。
      4. 
  
    4. 对您的网页建立索引的搜索引擎将标题的内容视为影响网页搜索排名的重要关键字。没有标题，您的网页在{{glossary("SEO")}}（搜索引擎优化）方面效果不佳。
      5. 
  
    5. 严重视力障碍者通常不会阅读网页；他们用听力来代替。完成这项工作的软件叫做屏幕阅读器（screen reader）。该软件提供了快速访问给定文本内容的方法。在使用的各种技术中，它们通过朗读标题来提供文档的概述，让用户能快速找到他们需要的信息。如果标题不可用，用户将被迫听到整个文档的大声朗读。
      6. 
- 
    6. 使用{{glossary("CSS")}}样式化内容，或者使用{{glossary("JavaScript")}}做一些有趣的事情，你需要包含相关内容的元素，所以CSS / JavaScript可以有效地定位它。
      7. 
+ 
    7. 使用{{glossary("CSS")}}样式化内容，或者使用{{glossary("JavaScript")}}做一些有趣的事情，你需要包含相关内容的元素，所以 CSS / JavaScript 可以有效地定位它。
      8. 
 
 
 
      因此，我们需要给我们的内容结构标记。
      
 
-
      实践操作: 编辑我们的内容结构
      
+
      实践操作：编辑我们的内容结构
      
 
 
      让我们直接跳进一个实例。在下面的示例中，向“Input”字段中的原始文本添加元素，使其在“Output”字段中显示为标题和两个段落。
      
 
@@ -204,19 +204,19 @@ 
      Playable code
      
 
 
      为什么我们需要语义？
      
 
-
      在我们身边的任何地方都要依赖语义学 — 我们依靠以前的经验就知道日常事物都代表什么；当我们看到什么，我们就会知道它代表什么。举个例子, 我们知道红色交通灯表示“停止”，绿色交通灯表示”通行“。 如果运用了错误的语义，事情会迅速地变得非常棘手 (难道有某个国家使用红色代表通行？我不希望如此)
      
+
      在我们身边的任何地方都要依赖语义学 — 我们依靠以前的经验就知道日常事物都代表什么；当我们看到什么，我们就会知道它代表什么。举个例子，我们知道红色交通灯表示“停止”，绿色交通灯表示”通行“。如果运用了错误的语义，事情会迅速地变得非常棘手 (难道有某个国家使用红色代表通行？我不希望如此)
      
 
 
      同样的道理，我们需要确保使用了正确的元素来给予内容正确的意思、作用以及外形。在这里，{{htmlelement("h1")}} 元素也是一个语义元素，它给出了包裹在您的页面上用来表示顶级标题的角色（或意义）的文本。
      
 
 
      <h1>这是一个顶级标题</h1>
      
 
-
      一般来说，浏览器会给它一个更大的字形来让它看上去像个标题（虽然你可以使用CSS让它变成任何你想要的样式。更重要的是，它的语义值将以多种方式被使用，比如通过搜索引擎和屏幕阅读器（上文提到过的）。
      
+
      一般来说，浏览器会给它一个更大的字形来让它看上去像个标题（虽然你可以使用 CSS 让它变成任何你想要的样式。更重要的是，它的语义值将以多种方式被使用，比如通过搜索引擎和屏幕阅读器（上文提到过的）。
      
 
 
      在另一方面，你可以让任一元素看起来像一个顶级标题，如下：
      
 
 
      <span style="font-size: 32px; margin: 21px 0;">这是顶级标题吗？</span>
      
 
-
      这是一个 {{htmlelement("span")}} 元素，它没有语义。当您想要对它用CSS（或者JS）时，您可以用它包裹内容，且不需要附加任何额外的意义（在未来的课程中你会发现更多这类元素）。我们已经对它使用了CSS来让它看起来像一个顶级标题。然而，由于它没有语义值，所以它不会有任何上文提到的帮助。最好的方法是使用相关的HTML元素来标记这个项目。
      
+
      这是一个 {{htmlelement("span")}} 元素，它没有语义。当您想要对它用 CSS（或者 JS）时，您可以用它包裹内容，且不需要附加任何额外的意义（在未来的课程中你会发现更多这类元素）。我们已经对它使用了 CSS 来让它看起来像一个顶级标题。然而，由于它没有语义值，所以它不会有任何上文提到的帮助。最好的方法是使用相关的 HTML 元素来标记这个项目。
      
 
 
      列表 Lists
      
 
@@ -250,9 +250,9 @@ 
      无序 Unordered
      
   <li>焦圈</li>
 </ul>
      
 
-
      实践操作: 标记无序列表
      
+
      实践操作：标记无序列表
      
 
-
      尝试编辑下面的示例来创建一个HTML无序列表。
      
+
      尝试编辑下面的示例来创建一个 HTML 无序列表。
      
 
 
    
 
-
    这个标记的结构和无序列表一样，除了需要用{{htmlelement("ol")}} 元素将所有项目包裹, 而不是<ul>：
    
+
    这个标记的结构和无序列表一样，除了需要用{{htmlelement("ol")}} 元素将所有项目包裹，而不是<ul>：
    
 
 
    <ol>
   <li>沿着条路走到头</li>
@@ -384,9 +384,9 @@ 
    有序 Ordered
    
   <li>继续走 300 米，学校就在你的右手边</li>
 </ol>
    
 
-
    实践操作: 标记有序列表
    
+
    实践操作：标记有序列表
    
 
-
    尝试编辑下面的示例来创建一个HTML有序列表：
    
+
    尝试编辑下面的示例来创建一个 HTML 有序列表：