@@ -36,29 +36,29 @@ 数据都去哪儿了？
客户端/服务器体系结构
-web基于非常基本的客户端/服务器体系结构，可以总结如下:客户端(通常是web浏览器)向服务器发送请求(大多数情况下是Apache、Nginx、IIS、Tomcat等web服务器)，使用HTTP 协议。服务器使用相同的协议来回答请求。
+web基于非常基本的客户端/服务器体系结构，可以总结如下:客户端(通常是web浏览器)向服务器发送请求(大多数情况下是Apache、Nginx、IIS、Tomcat等 web 服务器)，使用HTTP 协议。服务器使用相同的协议来回答请求。
-在客户端，HTML表单只不过是一种方便的用户友好的方式，可以配置HTTP请求将数据发送到服务器。这使用户能够提供在HTTP请求中传递的信息。
+在客户端，HTML 表单只不过是一种方便的用户友好的方式，可以配置 HTTP 请求将数据发送到服务器。这使用户能够提供在 HTTP 请求中传递的信息。
-在客户端:定义如何发送数据
+在客户端：定义如何发送数据
{{HTMLElement("form")}}元素定义了如何发送数据。它的所有属性都是为了让您配置当用户点击提交按钮时发送的请求。两个最重要的属性是{{htmlattrxref("action","form")}}和{{htmlattrxref("method","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 @@ 许多较老的页面使用下面的符号表示数据应该被发送到包含表单的相同页面；这是必需的，因为直到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")}}属性，所有的浏览器都会在每次尝试发送数据时向用户显示一个安全警告，因为数据不会被加密。
该属性定义了如何发送数据。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
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 网络选项卡中：
- 按下 F12
@@ -172,18 +172,18 @@ 查看HTTP请求
-唯一显示给用户的是被调用的URL。正如我们上面提到的，使用GET请求用户将在他们的URL栏中看到数据，但是使用POST请求用户将不会看到。这一点很重要，有两个原因：
+唯一显示给用户的是被调用的 URL。正如我们上面提到的，使用GET请求用户将在他们的 URL 栏中看到数据，但是使用POST请求用户将不会看到。这一点很重要，有两个原因：
- - 如果您需要发送一个密码(或其他敏感数据)，永远不要使用
GET方法否则数据会在URL栏中显示，这将非常不安全。
- - 如果您需要发送大量的数据，那么
POST方法是首选的，因为一些浏览器限制了URL的大小。此外，许多服务器限制它们接受的URL的长度。
+ - 如果您需要发送一个密码 (或其他敏感数据)，永远不要使用
GET方法否则数据会在 URL 栏中显示，这将非常不安全。
+ - 如果您需要发送大量的数据，那么
POST方法是首选的，因为一些浏览器限制了 URL 的大小。此外，许多服务器限制它们接受的 URL 的长度。
-在服务器端:检索数据
+在服务器端：检索数据
-无论选择哪种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 是一种文本协议，所以处理二进制数据有特殊的要求。
-该属性允许您指定在提交表单时所生成的请求中的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 @@ 每次向服务器发送数据时，都需要考虑安全性。到目前为止，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 编码来准备数据，并遵守表单数据请求的具体细节。
-让我们重建之前的这个例子:
+让我们重建之前的这个例子：
<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 访问控制.
手动建立一个 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 @@ 你应该会觉得那个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 @@
@@ -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 使用它：
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 中元素的默认渲染，其中使用了平台的默认字体样式。在右边是相同的元素，应用了我们的字体统一样式规则。
-关于使用系统默认样式的表单还是使用设计用于匹配内容的自定义样式表单，有很多争议。 作为网站或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 @@ 盒子模型
-在上面的屏幕截图中，左侧的列没有{{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
组织你的静态文件
-好戏要开始了! 在开始写代码之前，我们需要三个额外的静态文件：
+好戏要开始了！在开始写代码之前，我们需要三个额外的静态文件：
- 明信片的背景——下载这幅图片，把它和你的 HTML 文件保存在相同目录下。
- - 打字机字体：源自 fontsquirrel.com 的 "Secret Typewriter“ 字体——将TTF文件下载到和上面相同的文件夹里。
- - 手绘字体：源自 fontsquirrel.com 的 The "Journal" 字体 —— 将TTF文件下载到和上面相同的文件夹里。
+ - 打字机字体：源自 fontsquirrel.com 的 "Secret Typewriter“字体——将 TTF 文件下载到和上面相同的文件夹里。
+ - 手绘字体：源自 fontsquirrel.com 的 The "Journal" 字体 —— 将 TTF 文件下载到和上面相同的文件夹里。
在你开始之前需要对字体做一些处理：
@@ -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的基本理解。
+ 基本计算机素养和对 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 @@ 设计表单
-我们的表单将包含三个文本字段和一个按钮。我们向用户询问他们的姓名、电子邮件和他们想要发送的信息。点击这个按钮将把他们的数据发送到一个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。
-所有HTML表单都以一个{{HTMLElement("form")}}元素开始：
+所有 HTML 表单都以一个{{HTMLElement("form")}}元素开始：
<form action="/my-handling-form-page" method="post">
@@ -63,21 +63,21 @@
这个元素正式定义了一个表单。就像{{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")}}元素也接受一个 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 代码，尝试保存它并在浏览器中查看它。
现在，你会看到它看起来很丑。
-如何排布好表单是公认的难点。这超出了本文的讨论范围，所以现在我们只需要让您添加一些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 @@ 基本表单样式
-向您的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：
@@ -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
