From f01f2fc1491dca3f243c9b4ae8d3ab7465cfc77e Mon Sep 17 00:00:00 2001 From: allo Date: Wed, 27 Jul 2022 14:51:24 +0800 Subject: [PATCH 1/3] prepare markdown convertion for tools_and_testing --- .../index.html | 6 +- .../main_features/index.html | 2 +- .../react_components/index.html | 6 +- .../react_getting_started/index.html | 12 +- .../vue_first_component/index.html | 12 +- .../vue_getting_started/index.html | 18 +- .../vue_methods_events_models/index.html | 4 +- .../vue_resources/index.html | 2 +- .../accessibility/index.html | 32 +- .../automated_testing/index.html | 28 +- .../feature_detection/index.html | 20 +- .../html_and_css/index.html | 74 +-- .../introduction/index.html | 8 +- .../javascript/index.html | 44 +- .../testing_strategies/index.html | 24 +- .../index.html | 24 +- .../learn/tools_and_testing/github/index.html | 6 +- .../zh-cn/learn/tools_and_testing/index.html | 2 +- .../command_line/index.html | 609 +----------------- .../overview/index.html | 188 ------ 20 files changed, 154 insertions(+), 967 deletions(-) diff --git a/files/zh-cn/learn/tools_and_testing/client-side_javascript_frameworks/index.html b/files/zh-cn/learn/tools_and_testing/client-side_javascript_frameworks/index.html index c04d583fdf9ae1..9a9006e6134438 100644 --- a/files/zh-cn/learn/tools_and_testing/client-side_javascript_frameworks/index.html +++ b/files/zh-cn/learn/tools_and_testing/client-side_javascript_frameworks/index.html @@ -46,7 +46,7 @@

说明指导

React 教程

-

Note: React 教程最后测试于 2020 年 5 月，基于 React/ReactDOM 16.13.1 和 create-react-app 3.4.1.

+

备注： React 教程最后测试于 2020 年 5 月，基于 React/ReactDOM 16.13.1 和 create-react-app 3.4.1.

如果你需要确认你的代码与我们的版本区别，你可以在我们的todo-react repository仓库找到 React 应用示例代码的完整版本。想要获取当前最新的版本，查看https://mdn.github.io/todo-react-build/.

@@ -71,7 +71,7 @@

React 教程

Ember 教程

-

Note: Ember 教程最后测试于 2020 年 5 月，基于 Ember/Ember CLI version 3.18.0.

+

备注： Ember 教程最后测试于 2020 年 5 月，基于 Ember/Ember CLI version 3.18.0.

如果你需要确认你的代码与我们的版本区别，你可以在ember-todomvc-tutorial repository找到 Ember 应用示例代码的完整版本。想要获取当前最新的版本，查看https://nullvoxpopuli.github.io/ember-todomvc-tutorial/ （这还包含了本教程未覆盖到的一些额外的特性）。

@@ -94,7 +94,7 @@

Ember 教程

Vue 教程

-

Note: Vue 教程最后测试于 2020 年 5 月，基于 Vue 2.6.11.

+

备注： Vue 教程最后测试于 2020 年 5 月，基于 Vue 2.6.11.

如果你需要确认你的代码与我们的版本区别，你可以在todo-vue repository找到 Vue 应用示例代码的完整版本。想要获取当前当前最新的版本，查看https://mdn.github.io/todo-vue/dist/.

diff --git a/files/zh-cn/learn/tools_and_testing/client-side_javascript_frameworks/main_features/index.html b/files/zh-cn/learn/tools_and_testing/client-side_javascript_frameworks/main_features/index.html index 10cee9b569a3f6..82a4d10bd3a30d 100644 --- a/files/zh-cn/learn/tools_and_testing/client-side_javascript_frameworks/main_features/index.html +++ b/files/zh-cn/learn/tools_and_testing/client-side_javascript_frameworks/main_features/index.html @@ -295,7 +295,7 @@

Summary

-

Note: We only have three framework tutorial series available now, but we hope to have more available in the future.

+

备注： We only have three framework tutorial series available now, but we hope to have more available in the future.

{{PreviousMenuNext("Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Introduction","Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_getting_started", "Learn/Tools_and_testing/Client-side_JavaScript_frameworks")}}

diff --git a/files/zh-cn/learn/tools_and_testing/client-side_javascript_frameworks/react_components/index.html b/files/zh-cn/learn/tools_and_testing/client-side_javascript_frameworks/react_components/index.html index 91bb19e04c42d8..242967d6396ce5 100644 --- a/files/zh-cn/learn/tools_and_testing/client-side_javascript_frameworks/react_components/index.html +++ b/files/zh-cn/learn/tools_and_testing/client-side_javascript_frameworks/react_components/index.html @@ -78,7 +78,7 @@

Make a <Todo />

}
-

Note: Components must always return something. If at any point in the future you try to render a component that does not return anything, React will display an error in your browser.

+

备注： Components must always return something. If at any point in the future you try to render a component that does not return anything, React will display an error in your browser.

Our Todo component is complete, at least for now; now we can use it. In App.js, add the following line near the top of the file to import Todo:

@@ -212,7 +212,7 @@

Tasks as data

This array is now available to the App component as props.tasks. You can console.log() it to check, if you’d like.

-

Note: ALL_CAPS constant names have no special meaning in JavaScript; they’re a convention that tells other developers "this data will never change after being defined here”.

+

备注： ALL_CAPS constant names have no special meaning in JavaScript; they’re a convention that tells other developers "this data will never change after being defined here”.

Rendering with iteration

@@ -340,7 +340,7 @@

The <FilterButton />

export default FilterButton;
-

Note: You might notice that we are making the same mistake here as we first made for the <Todo /> component, in that each button will be the same. That’s fine! We’re going to fix up this component later on, in Back to the filter buttons.

+

备注： You might notice that we are making the same mistake here as we first made for the <Todo /> component, in that each button will be the same. That’s fine! We’re going to fix up this component later on, in Back to the filter buttons.

Importing all our components

diff --git a/files/zh-cn/learn/tools_and_testing/client-side_javascript_frameworks/react_getting_started/index.html b/files/zh-cn/learn/tools_and_testing/client-side_javascript_frameworks/react_getting_started/index.html index c701d9690eb5ee..590a81319ba340 100644 --- a/files/zh-cn/learn/tools_and_testing/client-side_javascript_frameworks/react_getting_started/index.html +++ b/files/zh-cn/learn/tools_and_testing/client-side_javascript_frameworks/react_getting_started/index.html @@ -47,9 +47,7 @@

用例

与本模块中涵盖的其他框架不同，React 不会对代码约定或文件组织实施严格的规则。这使团队可以设置最适合自己的约定，并以他们希望的任何方式采用 React。React 可以处理一个按钮，一个界面的几个部分或应用程序的整个用户界面。

-

尽管 React 可以用于界面的小片段中，但要和 jQuery 这样的库，甚至是像 Vue 这样的框架那样“引入”应用程序并不容易 —— 当你使用 React 构建整个应用程序时更容易上手。

-

另外，许多开发人员的经验对于 React 应用程序也是有用处的，例如使用 JSX 编写界面是需要编译过程的。在网站上添加类似于 Babel 的编译器会让网站上代码的运行速度变慢，因此开发人员通常会在构建项目的时候设置这样的工具。React 对于工具的要求可以说是很高的，但这是能够学习解决的。

@@ -72,7 +70,7 @@

React 如何使用 JavaScript?

);
-

注意：上一个代码段中的括号并非 JSX 的一部分，它对您的应用程序没有任何影响，括号只是用来向您（和您的计算机）表明其中的多行代码属于同一个表达式 (译者注：原文表述实在有点啰嗦)。因此上面的代码等同于：

+

备注： 上一个代码段中的括号并非 JSX 的一部分，它对您的应用程序没有任何影响，括号只是用来向您（和您的计算机）表明其中的多行代码属于同一个表达式 (译者注：原文表述实在有点啰嗦)。因此上面的代码等同于：

const header = <header>
     <h1>Mozilla Developer Network</h1>
@@ -133,7 +131,7 @@ 
初始化您的应用

 
 
 

-
备注：如果你的电脑上安装了 yarn 的话，create-react-app 会默认使用 yarn 而非 npm。如果你同时安装了 yarn 和 npm，但你希望使用 npm 的话，在 create-react-app 的时候需要输入 --use-npm :

+
备注： 如果你的电脑上安装了 yarn 的话，create-react-app 会默认使用 yarn 而非 npm。如果你同时安装了 yarn 和 npm，但你希望使用 npm 的话，在 create-react-app 的时候需要输入 --use-npm :

 
 
npx create-react-app moz-todo-react --use-npm

 

@@ -222,13 +220,13 @@ 
import 语句

 
第二句代码引入了 './logo.svg'。注意文件路径以 ./ 开头、由 .svg 尾——表明这是一个本地文件，并且它不是 JavaScript 文件。

 
 

-
我们没有指定 React 模块的路径——表明它并非来自本地文件，而是在 package.json 文件中列为依赖项。在整个学习过程中，请务必留心这两种引入方式的不同之处。

+
备注： 我们没有指定 React 模块的路径——表明它并非来自本地文件，而是在 package.json 文件中列为依赖项。在整个学习过程中，请务必留心这两种引入方式的不同之处。

 

 
 
第三行引入了我们的组件所需的 CSS 文件。与上面两句不同，这里没有将引入的内容赋给任何变量、也没有用到 from 指令。请注意这种特殊的语法并非原生 JS 的语法 —— 它源自前端资源打包工具 webpack，而 create-react-app 正是基于 webpack 配置而来的。

 
 

-
译者补充：webpack 可用于打包 JS 和非 JS 的内容 (当然，非 JS 的内容需要一些插件或加载器来处理)，但是 JavaScript 标准只有关于 JS 的内容，所以 webpack 社区使用这种特殊的 `import` 语句来声明对非 JS 内容的引用。

+
备注： 译者补充：webpack 可用于打包 JS 和非 JS 的内容 (当然，非 JS 的内容需要一些插件或加载器来处理)，但是 JavaScript 标准只有关于 JS 的内容，所以 webpack 社区使用这种特殊的 `import` 语句来声明对非 JS 内容的引用。

 
 
详情参见 webpack 官方和社区，截止目前 (2020 年下旬)，webpack 仍是现代前端工作中必不可少的技能之一。

 

@@ -315,7 +313,7 @@ 
Interrogating the index

 
上述所有都告诉 React 我们想把 App 组件作为 root 或者第一个组件来渲染我们的 React App。

 
 

-
备注：在 JSX 中，React 组件和 HTML 元素必须有关闭斜杠（/），如 <App />，如果我们写 <App> 或者 <img> 将会报错。

+
备注： 在 JSX 中，React 组件和 HTML 元素必须有关闭斜杠（/），如 <App />，如果我们写 <App> 或者 <img> 将会报错。

 

 
 
Service workers 能让我们的 App 离线运行，但它不在本篇文章的范围中，您可以删除第 5 行和第 9 到 12 行。

diff --git a/files/zh-cn/learn/tools_and_testing/client-side_javascript_frameworks/vue_first_component/index.html b/files/zh-cn/learn/tools_and_testing/client-side_javascript_frameworks/vue_first_component/index.html
index e1a10b528ab8bb..4817b3d65b6d95 100644
--- a/files/zh-cn/learn/tools_and_testing/client-side_javascript_frameworks/vue_first_component/index.html
+++ b/files/zh-cn/learn/tools_and_testing/client-side_javascript_frameworks/vue_first_component/index.html
@@ -10,7 +10,7 @@
 
现在是时候深入了解 Vue，并创建我们自己的自定义组件了--我们将从创建一个组件来表示待办事项列表中的每个项目开始。在这一过程中，我们将学习一些重要的概念，例如在其他组件中调用组件，通过道具向它们传递数据，以及保存数据状态。

 
 

-
注意: 如果你需要根据我们的版本检查您的代码， 你可以在我们的 todo-vue 仓库找到中找到示例 Vue 程序代码的完成版本。 有关运行中的实时版本，请参见 https://mdn.github.io/todo-vue/dist/。

+
备注： 如果你需要根据我们的版本检查您的代码， 你可以在我们的 todo-vue 仓库找到中找到示例 Vue 程序代码的完成版本。 有关运行中的实时版本，请参见 https://mdn.github.io/todo-vue/dist/。

 

 
 
@@ -134,7 +134,7 @@ 
注册 props

-
注意: 注意：prop 验证只能在 development 模式下进行，所以你不能在生产环境中严格依赖它。此外，prop 验证函数在组件实例创建之前被调用，因此它们不能访问组件状态 (或其他 props)。

+
备注： 注意：prop 验证只能在 development 模式下进行，所以你不能在生产环境中严格依赖它。此外，prop 验证函数在组件实例创建之前被调用，因此它们不能访问组件状态 (或其他 props)。

 
针对 ToDoItem 组件，我们将使用对象注册法。

@@ -187,7 +187,7 @@ 
使用已注册的 props
回到网页浏览器中，您将会看到 todo item 与之前相同，但是没有 label。转到浏览器的开发者工具，您会在控制台中看到这样的警告：

 
-
[Vue warn]: Missing required prop: "label"
+
[Vue warn]: Missing required prop: "label"
 
 found in
 
@@ -224,7 +224,7 @@ 
Vue 的数据对象

 
 
您可以使用this从内部数据访问组件的 props 和其他属性，如所你料。我们很快就会看到一个示例。

 

-
注意：由于this在箭头函数中的工作方式（绑定到父级的上下文），如果使用箭头函数，您将无法从内部data访问任何必要的属性。因此，不要对data属性使用箭头函数。

+
备注： 由于this在箭头函数中的工作方式（绑定到父级的上下文），如果使用箭头函数，您将无法从内部data访问任何必要的属性。因此，不要对data属性使用箭头函数。

 

 
 
因此，让我们向 ToDoItem 组件添加一个data属性。这将返回一个包含单个属性的对象，即我们将调用isDone，其值为 this.done。

@@ -247,7 +247,7 @@ 
Vue 的数据对象

 
 
因此，现在我们需要将 isDone 属性附加到我们的组件。与 Vue 使用 \{{}} 表达式在模板中显示 JavaScript 表达式的方式类似，Vue 有一种特殊的语法将 JavaScript 表达式绑定到 HTML 元素和组件：v-bind。v-bind表达式如下所示：

 
-
v-bind:attribute="expression"

+
v-bind:attribute="expression"

 
 
换句话说，你可以在要绑定到的任何 attribute/prop 前面加上 v-bind:。在大多数情况下，你可以对 v-bind: 属性使用速记，即只在 attribute/prop 前面加上冒号。所以 :attribute="expression" 的工作方式与 v-bind:attribute="expression"相同。

 
@@ -288,7 +288,7 @@ 
给 Todos 一个唯一的 ID

 
npm install --save lodash.uniqueid

 
 

-
注意：如果你更喜欢 yarn，则可以改用yarn add lodash.uniqueid。

+
备注： 如果你更喜欢 yarn，则可以改用yarn add lodash.uniqueid。

 

 
 
现在，我们可以将此包导入我们的ToDoItem组件中。在ToDoItem.vue的<script>元素的顶部添加以下行：

diff --git a/files/zh-cn/learn/tools_and_testing/client-side_javascript_frameworks/vue_getting_started/index.html b/files/zh-cn/learn/tools_and_testing/client-side_javascript_frameworks/vue_getting_started/index.html
index 5b9c29fea8e39e..46eae310db67ec 100644
--- a/files/zh-cn/learn/tools_and_testing/client-side_javascript_frameworks/vue_getting_started/index.html
+++ b/files/zh-cn/learn/tools_and_testing/client-side_javascript_frameworks/vue_getting_started/index.html
@@ -63,7 +63,7 @@ 
安装 Vue

 
 
 

-
备注：如果您还没有安装上述软件，有关安装 NPM 和 Node.js 的方法在这里。

+
备注： 如果您还没有安装上述软件，有关安装 NPM 和 Node.js 的方法在这里。

 

 
 
安装 CLI，终端中运行以下命令：

@@ -101,7 +101,7 @@ 
初始化一个新项目

 
如果你以前从来没有使用过 Vue CLI 的话，你可能还会遇到其他的问题，会让你选择包管理器，你可以通过方向键选择一个你喜欢的，然后从此时起 Vue CLI 就会默认使用你这次选择的包管理器。如果你只后又想换用其他包管理器，你也可以在创建项目执行  vue create 的时候传入参数 --packageManager=<package-manager>。比如你之前已经选择了 yarn，而你现在在创建 moz-todo-vue 示例程序的时候可以通过执行  vue create moz-todo-vue --packageManager=npm 来使用 npm 包管理器。

 
 

-
注意：我们这里并没有列举所有的配置项，如果你想了解更多信息可以访问 Vue 官方文档的 CLI 部分。

+
备注： 我们这里并没有列举所有的配置项，如果你想了解更多信息可以访问 Vue 官方文档的 CLI 部分。

 

 
 
项目结构

@@ -116,7 +116,7 @@ 
项目结构

   
    
    
  • favicon.ico: 这个是项目的图标，当前就是一个 Vue 的 logo。
    • 
    
  • index.html: 这是应用的模板文件，Vue 应用会通过这个 HTML 页面来运行，也可以通过 lodash 这种模板语法在这个文件里插值。
-    
    注意：这个不是负责管理页面最终展示的模板，而是管理 Vue 应用之外的静态 HTML 文件，一般只有在用到一些高级功能的时候才会修改这个文件。
    
+    
    备注： 这个不是负责管理页面最终展示的模板，而是管理 Vue 应用之外的静态 HTML 文件，一般只有在用到一些高级功能的时候才会修改这个文件。
    
    
    • 
   

  
@@ -131,7 +131,7 @@ 
项目结构

 
 
 

-
注意：根据创建项目时候的一些配置项，可能会有一些其他的预设目录（例如，如果你选择了路由配置，会看到一个 views  的文件夹）

+
备注： 根据创建项目时候的一些配置项，可能会有一些其他的预设目录（例如，如果你选择了路由配置，会看到一个 views  的文件夹）

 

 
 
.vue 文件（单文件组件）

@@ -140,7 +140,7 @@ 
.vue 文件（单文件组件）

 
 
在其他框架都鼓励把模板、逻辑和样式的代码区分成不同文件的时候，Vue 却反其道行之。使用单文件组件，Vue 把模板、相关脚本和 CSS 一起整合放在 .vue 结尾的一个单文件中。这些文件最终会通过 JS 打包工具（例如 Webpack）处理，这意味着你可以使用构建时工具。你可以使用比如 Babel、TypeScript、SCSS 等来创建更多复杂的组件。

 
-
 另外，使用 Vue CLI 创建的项目被配置为在开箱即用的情况下借助 Webpack 使用 .vue 文件。实际上，如果您查看我们使用 CLI 创建的项目中的 src 文件夹，您会看到第一个.vue 文件：App.vue。

+
 另外，使用 Vue CLI 创建的项目被配置为在开箱即用的情况下借助 Webpack 使用 .vue文件。实际上，如果您查看我们使用 CLI 创建的项目中的 src 文件夹，您会看到第一个.vue 文件：App.vue。

 
 
现在我们来开始探讨。

 
@@ -151,7 +151,7 @@ 
App.vue

 
<template> 包含了所有的标记结构和组件的展示逻辑。template 可以包含任何合法的 HTML，以及一些我们接下来要讲的 Vue 特定的语法。

 
 

-
注意：通过设置 <template> 标签的 lang 属性，例如可以通过设置 <template lang="pug"> 就可以在使用 Pub 模板来替代标准 HTML。在本教程中我们依然会使用标准 HTML，但是这种方式可行你还是值得知道。

+
备注： 通过设置 <template> 标签的 lang 属性，例如可以通过设置 <template lang="pug"> 就可以在使用 Pub 模板来替代标准 HTML。在本教程中我们依然会使用标准 HTML，但是这种方式可行你还是值得知道。

 

 
 
<script> 包含组件中所有的非显示逻辑，最重要的是， <script> 标签需要默认导出一个 JS 对象。该对象是您在本地注册组件、定义属性、处理本地状态、定义方法等的地方。在构建阶段这个对象会被处理和转换（包含 template 模板）成为一个有 render() 函数的 Vue 组件。

@@ -169,13 +169,13 @@ 
App.vue

 };

 
 

-
注意: 如果想要使用 TypeScript 语法，你应该将  <script> 标签的  lang 属性设置为 <script lang="ts"> 来告诉编译器你要使用 TypeScript。

+
备注： 如果想要使用 TypeScript 语法，你应该将  <script> 标签的  lang 属性设置为 <script lang="ts"> 来告诉编译器你要使用 TypeScript。

 

 
 
组件的 CSS 应该写在 <style> 标签里，如果你添加了 scoped 属性，形如 <style scoped> ，Vue 会把样式的范围限制到单文件组件的内容里。这个类似 CSS-in-JS 的解决方案，不过允许你书写文本格式的 CSS 了。

 
 

-
注意: 如果通过 CLI 创建项目时选择了 CSS 预处理器，则可以将 lang 属性添加到 <style> 标签中，以便 Webpack 可以在构建时处理内容。例如，<style lang ="scss"> 将允许您在样式信息中使用 SCSS 语法。

+
备注： 如果通过 CLI 创建项目时选择了 CSS 预处理器，则可以将 lang 属性添加到 <style> 标签中，以便 Webpack 可以在构建时处理内容。例如，<style lang ="scss"> 将允许您在样式信息中使用 SCSS 语法。

 

 
 
本地运行程序

@@ -184,7 +184,7 @@ 
本地运行程序

 
 
在您的终端中，尝试运行 npm run serve（或者如果希望使用 yarn，则运行 yarn serve ）。您的终端应输出类似以下内容的内容：

 
-
INFO  Starting development server...
+
INFO  Starting development server...
 98% after emitting CopyPlugin
 
  DONE  Compiled successfully in 18121ms
diff --git a/files/zh-cn/learn/tools_and_testing/client-side_javascript_frameworks/vue_methods_events_models/index.html b/files/zh-cn/learn/tools_and_testing/client-side_javascript_frameworks/vue_methods_events_models/index.html
index 00b300669b074a..5ee75801eb691c 100644
--- a/files/zh-cn/learn/tools_and_testing/client-side_javascript_frameworks/vue_methods_events_models/index.html
+++ b/files/zh-cn/learn/tools_and_testing/client-side_javascript_frameworks/vue_methods_events_models/index.html
@@ -185,7 +185,7 @@ 
用 v-model 来绑定数据到输
 

 
   

-  
注意：你还可以通过事件和 v-bind 属性的组合将数据与 <input> 值同步。事实上，这就是 v-model 在幕后所做的。但是，确切的事件和属性组合因输入类型而异，并且比仅使用 v-model 快捷方式需要更多代码。

+  
备注： 你还可以通过事件和 v-bind 属性的组合将数据与 <input> 值同步。事实上，这就是 v-model 在幕后所做的。但是，确切的事件和属性组合因输入类型而异，并且比仅使用 v-model 快捷方式需要更多代码。

    

  
  
  • 
@@ -202,7 +202,7 @@ 
    用 v-model 来绑定数据到输
  
  • 
   
    现在回到你正在运行的应用程序，在 <input> 字段中添加一些文本，然后单击“添加”按钮。你应该会看到你输入的值已记录到控制台，例如：
    
    
-  
    Label value: My value
    
+  
    Label value: My value
    
  
    • 
 
 
diff --git a/files/zh-cn/learn/tools_and_testing/client-side_javascript_frameworks/vue_resources/index.html b/files/zh-cn/learn/tools_and_testing/client-side_javascript_frameworks/vue_resources/index.html
index 393a333c2428da..4e833e1daeda15 100644
--- a/files/zh-cn/learn/tools_and_testing/client-side_javascript_frameworks/vue_resources/index.html
+++ b/files/zh-cn/learn/tools_and_testing/client-side_javascript_frameworks/vue_resources/index.html
@@ -52,7 +52,7 @@ 
    构建并发布你的 Vue app
    
 
    这将创建一个新的dist 文件夹来包含你的准备生产的所有文件内容 .为了发布你的网站到网上 , 复制这个文件夹的所有内容到你的主机环境。
    
 
 
    
-
    提示: The Vue CLI 文档也包含一个 特别的指导来发布你的 app 到许多的公共主机平台 .
    
+
    备注： The Vue CLI 文档也包含一个 特别的指导来发布你的 app 到许多的公共主机平台 .
    
 
    
 
 
    Vue 3
    
diff --git a/files/zh-cn/learn/tools_and_testing/cross_browser_testing/accessibility/index.html b/files/zh-cn/learn/tools_and_testing/cross_browser_testing/accessibility/index.html
index 3df303dc8cb218..2b6a0884a93316 100644
--- a/files/zh-cn/learn/tools_and_testing/cross_browser_testing/accessibility/index.html
+++ b/files/zh-cn/learn/tools_and_testing/cross_browser_testing/accessibility/index.html
@@ -60,7 +60,7 @@ 
    什么是可访问性？
    
 
    也就是说，本文将涵盖跨浏览器和有关残疾人的测试问题以及他们如何使用 Web。我们在其他地方已经讨论过其他领域，例如响应式设计问题和性能。
    
 
 
    
-
    Note: 就像 Web 开发中的许多事情一样，可访问性不是 100% 的成功或失败可以定义的；对于所有内容而言，几乎不可能实现 100％的可访问性，尤其是当站点变得越来越复杂时。我们更多的是通过防御性编码并遵循最佳实践，努力使尽可能多的人可以访问尽可能多的内容。
    
+
    备注： 就像 Web 开发中的许多事情一样，可访问性不是 100% 的成功或失败可以定义的；对于所有内容而言，几乎不可能实现 100％的可访问性，尤其是当站点变得越来越复杂时。我们更多的是通过防御性编码并遵循最佳实践，努力使尽可能多的人可以访问尽可能多的内容。
    
 
    
 
 
    常见可访问性问题
    
@@ -68,7 +68,7 @@ 
    常见可访问性问题
    
 
    在本节中，我们将围绕 Web 可访问性，详细介绍与特定技术相关的一些主要问题、要遵循的最佳实践，以及可以进行的一些快速测试，以查看你的网站是否朝着正确的方向发展。
    
 
 
    
-
    Note: 可访问性在道德上是正确的事情，对企业也有好处 (残疾用户，移动用户等构成了重要的细分市场), 并且在世界许多地方，提供出来的网络媒体资源无法为残疾人服务也是违法的。阅读无障碍指南和法律获取更多相关信息。
    
+
    备注： 可访问性在道德上是正确的事情，对企业也有好处 (残疾用户，移动用户等构成了重要的细分市场), 并且在世界许多地方，提供出来的网络媒体资源无法为残疾人服务也是违法的。阅读无障碍指南和法律获取更多相关信息。
    
 
    
 
 
    HTML
    
@@ -136,7 +136,7 @@ 
    使用键盘
    
 
 
 
    
-
    重要: 你应该在所写的任何新页面上执行这种测试 — 确保可以通过键盘使用功能。
    
+
    警告： 你应该在所写的任何新页面上执行这种测试 — 确保可以通过键盘使用功能。
    
 
    
 
 
    这个例子强调了正确使用语义元素的重要性。可以用 CSS 将任何元素的样式设置为看起来像链接或按钮，并使用 JavaScript 让其表现为像链接或按钮一样，但实际上它们不是链接或按钮，你将失去很多语义化元素带给你的可访问性。因此，尽量避免这样做。
    
@@ -149,7 +149,7 @@ 
    使用键盘
    
 }
    • 
 
 
    
-
    Note: 如果你决定使用 CSS 删除默认的焦点样式，请确保将其替换为更适合你的设计的其他样式 — 这是一种非常有价值的可访问性工具，不应删除。
    
+
    备注： 如果你决定使用 CSS 删除默认的焦点样式，请确保将其替换为更适合你的设计的其他样式 — 这是一种非常有价值的可访问性工具，不应删除。
    
 
    
 
 
    模拟键盘
    
@@ -169,7 +169,7 @@ 
    模拟键盘
    
 
 
 
    
-
    Note: 仅当你通过事件处理程序属性（例如onclick）设置原始事件处理程序时，此技术才有效。addEventListener将无法正常工作。重新构建功能会有很多额外的麻烦。并且肯定还有其他问题。最好能从根源解决问题，使用正确的语义化元素。
    
+
    备注： 仅当你通过事件处理程序属性（例如onclick）设置原始事件处理程序时，此技术才有效。addEventListener将无法正常工作。重新构建功能会有很多额外的麻烦。并且肯定还有其他问题。最好能从根源解决问题，使用正确的语义化元素。
    
 
    
 
 
    替代文本
    
@@ -177,7 +177,7 @@ 
    替代文本
    
 
    替代文本对于可访问性非常重要 — 如果一个人有视觉或听觉障碍使他们无法看到或听到某些内容，那么这就是一个问题。可用的最简单的文本替代方法是alt属性，我们应该在所有包含相关内容的图像上包括该属性。其中应包含对图像的描述，该描述可在页面上成功传达其含义和内容，并由屏幕阅读器读取并读出给用户。
    
 
 
    
-
    Note: 更多信息请阅读Text alternatives
    
+
    备注： 更多信息请阅读Text alternatives
    
 
    
 
 
    可以通过多种方法来测试缺少的替代文本，例如，使用可访问性审计工具。
    
@@ -193,7 +193,7 @@ 
    元素关系和上下文
    
 
    表单{{htmlelement("label")}}元素是允许我们使表单可访问的主要功能之一。表单的麻烦在于，你需要标签来说明应在每个表单输入中输入哪些数据。每个标签都必须包含在{{htmlelement("label")}}内，以将其明确链接到其对应的表单输入框（属性值的每个<label>的for属性值必须与表单元素id值匹配），即使源顺序不是完全合乎逻辑的，也能提供很好的可访问性。
    
 
 
    
-
    Note: 更多关于链接文本和表单标签，请阅读有意义的文字标签
    
+
    备注： 更多关于链接文本和表单标签，请阅读有意义的文字标签
    
 
    
 
 
    最后，简要介绍一下数据表。基本数据表可以用非常简单的标记编写（请参阅bad-table.html和源码)），但这存在问题 — 屏幕阅读器用户无法将行或列作为数据分组关联在一起，但你需要知道标题行是什么，以及标题行行的标题还是列的标题等。这些只能从可视化的表格才能知道。
    
@@ -201,7 +201,7 @@ 
    元素关系和上下文
    
 
    相反，如果你看一下我们的punk-bands-complete.html示例（示例，源码），则可以在此处看到一些可访问性辅助，例如表头（{{htmlelement("th")}}和作用域属性），{{htmlelement("caption")}}元素等。
    
 
 
    
-
    Note: 更多信息，请阅读可访问的表格
    
+
    备注： 更多信息，请阅读可访问的表格
    
 
    
 
 
    CSS
    
@@ -223,7 +223,7 @@ 
    颜色和颜色对比度
    
 
    另一个提示是不要仅依靠颜色来表示界标/信息，因为这对于看不见颜色的人来说是不好的。例如，不要将所需的表单字段标记为红色，而应使用星号和红色标记它们。
    
 
 
    
-
    Note: 高对比度也可以让使用带有光滑屏幕的设备（例如智能手机或平板电脑）的人在明亮的环境（例如阳光）下可以更好地阅读页面。
    
+
    备注： 高对比度也可以让使用带有光滑屏幕的设备（例如智能手机或平板电脑）的人在明亮的环境（例如阳光）下可以更好地阅读页面。
    
 
    
 
 
    隐藏的内容
    
@@ -237,7 +237,7 @@ 
    隐藏的内容
    
 
    另一方面，你不应该使用{{cssxref("visibility")}}:hidden或者{{cssxref("display")}}:none, 因为它们会让屏幕阅读器取不到那些内容，除非你真的想让屏幕阅读器不读取那些内容。
    
 
 
    
-
    Note: Invisible Content Just for Screen Reader Users有更多关于这个话题的详细信息
    
+
    备注： Invisible Content Just for Screen Reader Users有更多关于这个话题的详细信息
    
 
    
 
 
    JavaScript
    
@@ -254,7 +254,7 @@ 
    简单的功能
    
 
 
 
    
-
    Note: WebAIM 的Accessible JavaScript提供了一些关于 JavaScript 可访问性注意事项的信息。
    
+
    备注： WebAIM 的Accessible JavaScript提供了一些关于 JavaScript 可访问性注意事项的信息。
    
 
    
 
 
    更复杂的 JavaScript 实现可能会带来可访问性问题 — 你需要尽力而为。例如，期望让使用 WebGL 编写的复杂 3D 游戏对盲人来说 100％可访问性是不合理的，但是你可以实现键盘控件，以便非鼠标用户可以使用它，并使配色方案具有足够的对比度供有颜色分辨障碍的人使用。
    
@@ -312,12 +312,12 @@ 
    审计工具
    
  
  • 下滑，直到你看到错误/描述部分，如下图。
    • 
 
 
-
    
+
    
 
 
    你还可以探索一些选项（请参阅页面顶部附近的Show Options（译者注：显示选项）链接），或者使用 Tenon 的 API。
    
 
 
    
-
    Note: 这些工具不足以单独解决你的所有可访问性问题。你需要将这些，知识和经验，用户测试等结合起来才能获得完整的解决方案。
    
+
    备注： 这些工具不足以单独解决你的所有可访问性问题。你需要将这些，知识和经验，用户测试等结合起来才能获得完整的解决方案。
    
 
    
 
 
    自动化工具
    
@@ -350,7 +350,7 @@ 
    屏幕阅读器
    
 
    一起看一下我们对几款不同的屏幕阅读器的测试。这将帮助你大致了解它们如何工作以及如何测试它们。
    
 
 
    
-
    Note: WebAIM 的 Designing for Screen Reader Compatibility提供了一些关于屏幕阅读器的使用和如何开发应用以最好的适用屏幕阅读器的信息。你也可以看下Screen Reader User Survey #6 Results这篇有关屏幕阅读器一些有趣的统计信息的文章。
    
+
    备注： WebAIM 的 Designing for Screen Reader Compatibility提供了一些关于屏幕阅读器的使用和如何开发应用以最好的适用屏幕阅读器的信息。你也可以看下Screen Reader User Survey #6 Results这篇有关屏幕阅读器一些有趣的统计信息的文章。
    
 
    
 
 
    VoiceOver
    
@@ -360,7 +360,7 @@ 
    VoiceOver
    
 
    按下 Cmd + Fn + F5 打开它。如果你之前没用过 VO，将会出现一个可以选择是否开启 VO 的欢迎界面，并且还会有教程指导你如何使用。再次按下 Cmd + Fn + F5 可以关闭。
    
 
 
    
-
    Note: 你应该至少看一遍教程，它对于你了解 VO 是非常有用的。
    
+
    备注： 你应该至少看一遍教程，它对于你了解 VO 是非常有用的。
    
 
    
 
 
    当 VO 开启时，你会看到一个会显示当前选中信息的黑色框在屏幕的左下角，除此之外屏幕显示大体还是相同的。当前选中的部分也会出现一个黑色的边框以进行高亮显示，这个黑色框就是 VO 的光标。
    
@@ -468,7 +468,7 @@ 
    NVDA
    
 
    在使用中，你会用到"NVDA 修饰键"，"NVDA 修饰键"是一个单独键，当你使用 NVDA 的快捷键时，你需要额外按下这个"NVDA 修饰键"。屏幕阅读器通常都会有修饰键，防止它们的快捷键和其他程序的快捷键冲突。NVDA 的修饰键是 Insert 键（默认）, 或 CapsLock 键（在欢迎界面可以选择使用该键）。
    
 
 
    
-
    Note: 关于高亮方面，NVDA 比 VoiceOver 做的更好。当滚动过标题、列表等元素时，你选中的项目会被一个细微的边框包住以高亮，但不是对于所有元素都是这样的。如果你感觉迷失方向了，可以按 Ctrl + F5 刷新页面，并从顶部重新开始。
    
+
    备注： 关于高亮方面，NVDA 比 VoiceOver 做的更好。当滚动过标题、列表等元素时，你选中的项目会被一个细微的边框包住以高亮，但不是对于所有元素都是这样的。如果你感觉迷失方向了，可以按 Ctrl + F5 刷新页面，并从顶部重新开始。
    
 
    
 
 
    NVDA 有很多快捷键，我们没有全部列出来。只把测试网页可访问性常用的一些在下面列出了。表格里，"NVDA"代表"NVDA 修饰键"。
    
diff --git a/files/zh-cn/learn/tools_and_testing/cross_browser_testing/automated_testing/index.html b/files/zh-cn/learn/tools_and_testing/cross_browser_testing/automated_testing/index.html
index 8f6f8617ae0585..0f4caa4a65b276 100644
--- a/files/zh-cn/learn/tools_and_testing/cross_browser_testing/automated_testing/index.html
+++ b/files/zh-cn/learn/tools_and_testing/cross_browser_testing/automated_testing/index.html
@@ -36,7 +36,7 @@ 
    自动化让事情变得简单
    
 
    We will look at how to set up your own Selenium-based testing system in the next article. In this article, we'll look at how to set up a task runner, and use the basic functionality of commercial systems like the ones mentioned above.
    
 
 
    
-
    Note: the above two categories are not mutually exclusive. It is possible to set up a task runner to access a service like Sauce Labs via an API, run cross browser tests, and return results. We will look at this below as well.
    
+
    备注： the above two categories are not mutually exclusive. It is possible to set up a task runner to access a service like Sauce Labs via an API, run cross browser tests, and return results. We will look at this below as well.
    
 
    
 
 
    使用任务运行器作为自动化测试工具
    
@@ -60,7 +60,7 @@ 
    Setting up Node and npm
    
 
 
 
    
-
    Note: If the above command fails with permissions errors, Fixing npm permissions should sort you out.
    
+
    备注： If the above command fails with permissions errors, Fixing npm permissions should sort you out.
    
 
    
 
 
    要在你的工程上使用基于Node/npm的包，你还需要把你的工程目录设为npm工程。这并不难。
    
@@ -149,10 +149,10 @@ 
    html-tidy
    
 
    
-  
    Note: --save-dev adds the package as a dependency to your project. If you look in your project's package.json file, you'll see an entry for it as, it has been added to the devDependencies property.
    
+  
    备注： --save-dev adds the package as a dependency to your project. If you look in your project's package.json file, you'll see an entry for it as, it has been added to the devDependencies property.
    
   
    
- 
  • Add the following dependencies to gulpfile.js:
+ 
  • Add the following dependencies to gulpfile.js:
   
    var htmltidy = require('gulp-htmltidy');
    
  
  • Add the following test to the bottom of gulpfile.js:
@@ -203,16 +203,16 @@ 
    js-hint and babel
    
 
 
      
  
    1. Install using the following lines:
-  
      npm install --save-dev gulp-babel babel-preset-es2015
+  
      npm install --save-dev gulp-babel babel-preset-es2015
 npm install jshint gulp-jshint --save-dev
 
      
  
      2. 
  
    2. Add the following dependencies to gulpfile.js:
-  
      var babel = require('gulp-babel');
+  
      var babel = require('gulp-babel');
 var jshint = require('gulp-jshint');
 
      
  
      3. 
- 
    3. Add the following test to the bottom of gulpfile.js:
+ 
    4. Add the following test to the bottom of gulpfile.js:
   
      gulp.task('js', function() {
     return gulp.src('src/main.js')
         .pipe(jshint())
@@ -249,11 +249,11 @@ 
      Further ideas
      
 
      Now try entering the gulp watch command into your terminal. Gulp will now watch your directory, and run the appropriate tasks whenever you save a change to an HTML, CSS, or JavaScript file.
      
 
 
      
-
      Note: The * character is a wildcard character — here we're saying "run these tasks when any files of these types are saved. You could also use wildcards in your main tasks, for example gulp.src('src/*.css') would grab all your CSS files and then run piped tasks on them.
      
+
      备注： The * character is a wildcard character — here we're saying "run these tasks when any files of these types are saved. You could also use wildcards in your main tasks, for example gulp.src('src/*.css') would grab all your CSS files and then run piped tasks on them.
      
 
      
 
 
      
-
      Note: One problem with our watch command above is that our CSSLint/Autoprefixer combination throws full-blown errors when a CSS error is encountered, which stops the watch working. You'll have to restart the watch once a CSS error is encountered, or find another way to do this.
      
+
      备注： One problem with our watch command above is that our CSSLint/Autoprefixer combination throws full-blown errors when a CSS error is encountered, which stops the watch working. You'll have to restart the watch once a CSS error is encountered, or find another way to do this.
      
 
      
 
 
      There's a lot more you can do with Gulp. The Gulp plugin directory has literally thousands of plugins to search through.
      
@@ -276,7 +276,7 @@ 
      使用商业测试服务
 
      You can then step up a gear, using an API to access functionality programmatically, which means that such apps can be combined with task runners, such as your own local Selenium environments and others, to create automated tests.
      
 
 
      
-
      Note: There are other commercial browser testing systems available but in this article, we'll focus on Sauce Labs and BrowserStack. We're not saying that these are necessarily the best tools available, but they are good ones that are simple for beginners to get up and running with.
      
+
      备注： There are other commercial browser testing systems available but in this article, we'll focus on Sauce Labs and BrowserStack. We're not saying that these are necessarily the best tools available, but they are good ones that are simple for beginners to get up and running with.
      
 
      
 
 
      Sauce Labs
      
@@ -313,7 +313,7 @@ 
      The basics: Manual tests
      
 
      Once you stop the session, you'll return to the Manual Tests tab, where you'll see an entry for each of the previous manual sessions you started. Clicking on one of these entries shows more data for the session. In here you can download any screenshots you took , watch a video of the session, and view data logs for the session for example.
      
 
 
      
-
      Note: This is already very useful, and way more convenient than having to set up all these emulators and virtual machines by yourself.
      
+
      备注： This is already very useful, and way more convenient than having to set up all these emulators and virtual machines by yourself.
      
 
      
 
 
      Advanced: The Sauce Labs API
      
@@ -327,7 +327,7 @@ 
      Advanced: The Sauce Labs API
      
 
        
  
      1. First, set up a new npm project to test this out, as detailed in Setting up Node and npm. Use a different directory name than before, like sauce-test for example.
        2. 
  
      2. Install the Node Sauce Labs wrapper using the following command:
-  
        npm install saucelabs
        
+  
        npm install saucelabs
        
  
        3. 
  
      3. Create a new file inside your project root called call_sauce.js. give it the following contents:
   
        var SauceLabs = require('saucelabs');
@@ -393,7 +393,7 @@ 
        基础：手动测试
        
 
        
 
 
        
-
        Note: The blue device icon next to some of the mobile device choices signals that you will be testing on a real device; choices without that icon will be run on an emulator.
        
+
        备注： The blue device icon next to some of the mobile device choices signals that you will be testing on a real device; choices without that icon will be run on an emulator.
        
 
        
 
 
        You'll find that you can enter URLs into the address bar, and use the other controls like you'd expect on a real device. You can even do things like copy and paste from the device to your clipboard, scroll up and down by dragging with the mouse, or use appropriate gestures (e.g. pinch/zoom, two fingers to scroll) on the touchpads of supporting devices (e.g. Macbook). Note that not all features are available on all devices.
        
@@ -419,7 +419,7 @@ 
        基础：手动测试
        
 
 
 
        
-
        Note: This is already very useful, and way more convenient than having to set up all these emulators and virtual machines by yourself.
        
+
        备注： This is already very useful, and way more convenient than having to set up all these emulators and virtual machines by yourself.
        
 
        
 
 
        其他基本功能
        
diff --git a/files/zh-cn/learn/tools_and_testing/cross_browser_testing/feature_detection/index.html b/files/zh-cn/learn/tools_and_testing/cross_browser_testing/feature_detection/index.html
index 4649d3b5955ad6..2f02196db6a7c6 100644
--- a/files/zh-cn/learn/tools_and_testing/cross_browser_testing/feature_detection/index.html
+++ b/files/zh-cn/learn/tools_and_testing/cross_browser_testing/feature_detection/index.html
@@ -28,7 +28,7 @@ 
        特性检测的概念
        
 
 
        Let's recap and look at the example we touched on in our Handling common JavaScript problems — the Geolocation API (which exposes available location data for the device the web browser is running on) has the main entry point for its use, a geolocation property available on the global Navigator object. Therefore, you can detect whether the browser supports geolocation or not by using something like the following:
        
 
-
        if ("geolocation" in navigator) {
+
        if ("geolocation" in navigator) {
   navigator.geolocation.getCurrentPosition(function(position) {
     // show the location on a map, perhaps using the Google Maps API
   });
@@ -55,7 +55,7 @@ 
        CSS
        
 
          
  
        1. Start by making local copies of our css-feature-detect.html, flex-layout.css, float-layout.css, and basic-styling.css files. Save them in a new directory.
          2. 
  
        2. We will add the HTML5 Shiv to our example too so that the HTML5 semantic elements will style properly in older versions of IE. Download the latest version (see Manual installation), unzip the ZIP file, copy the html5shiv-printshiv.min.js and html5shiv.min.js files into your example directory, and link to one of the files by putting the following under your {{htmlelement("title")}} element:
-  
          <script src="html5shiv.min.js"></script>
          
+  
          <script src="html5shiv.min.js"></script>
          
  
          3. 
  
        3. Have a look at your example CSS files — you'll see that basic-styling.css handles all the styling that we want to give to every browser, whereas the other two CSS files contain the CSS we want to selectively apply to browser depending on their support levels. You can look at the different effects these two files have by manually changing the CSS file referred to by the second {{htmlelement("link")}} element, but let's instead implement some JavaScript to automatically swap them as needed.
          4. 
  
        4. First, remove the contents of the second <link> element's href attribute. We will fill this in dynamically later on.
          5. 
@@ -74,13 +74,13 @@ 
          CSS
          
 
          Here we are grabbing a reference to the second <link> element, and creating a <div> element as part of our test. In our conditional statement, we test that the {{cssxref("flex")}} and {{cssxref("flex-flow")}} properties exist in the browser. Note how the JavaScript representations of those properties that are stored inside the {{domxref("HTMLElement.style")}} object use lower camel case, not hyphens, to separate the words.
          
 
 
          
-
          Note: If you have trouble getting this to work, you can compare it to our css-feature-detect-finished.html code (see also the live version).
          
+
          备注： If you have trouble getting this to work, you can compare it to our css-feature-detect-finished.html code (see also the live version).
          
 
          
 
 
          When you save everything and try out your example, you should see the flexbox layout applied to the page if the browser supports modern flexbox, and the float layout if not.
          
 
 
          
-
          Note: Often such an approach is overkill for a minor feature detection problem — you can often get away with using multiple vendor prefixes and fallback properties, as described in CSS fallback behavior and Handling CSS prefixes.
          
+
          备注： Often such an approach is overkill for a minor feature detection problem — you can often get away with using multiple vendor prefixes and fallback properties, as described in CSS fallback behavior and Handling CSS prefixes.
          
 
          
 
 
          @supports
          
@@ -162,7 +162,7 @@ 
          JavaScript
          
 
    • 
 
 
 
 
 
 
 
 
   
  
  
    
 
 
    
-
    Note: The double NOT in the above example (!!) is a way to force a return value to become a "proper" boolean value, rather than a {{glossary("Truthy")}}/{{glossary("Falsy")}} value that may skew the results.
    
+
    备注： The double NOT in the above example (!!) is a way to force a return value to become a "proper" boolean value, rather than a {{glossary("Truthy")}}/{{glossary("Falsy")}} value that may skew the results.
    
 
    
 
 
    The Dive into HTML5 Detecting HTML5 Features page has a lot more useful feature detection tests besides the ones listed above, and you can generally find a feature detection test for most things by searching for "detect support for YOUR-FEATURE-HERE" in your favorite search engine. Bear in mind though that some features, however, are known to be undetectable — see Modernizr's list of Undetectables.
    
@@ -220,7 +220,7 @@ 
    CSS
    
 
 
    At this point, try loading your page, and you'll get an idea of how Modernizr works for CSS features. If you look at the DOM inspector of your browser's developer tools, you'll see that Modernizr has updated your <html> class value like so:
    
 
-
    <html class="js no-htmlimports sizes flash transferables applicationcache blobconstructor
+
    <html class="js no-htmlimports sizes flash transferables applicationcache blobconstructor
 blob-constructor cookies cors ...AND LOADS MORE VALUES!>
    
 
 
    It now contains a large number of classes that indicate the support status of different technology features. As an example, if the browser didn't support flexbox at all, <html> would be given a class name of no-flexbox. If it did support modern flexbox, it would get a class name of flexbox. If you search through the class list, you'll also see others relating to flexbox, like:
    
@@ -232,7 +232,7 @@ 
    CSS
    
 
 
 
    
-
    Note: You can find a list of what all the class names mean — see Features detected by Modernizr.
    
+
    备注： You can find a list of what all the class names mean — see Features detected by Modernizr.
    
 
    
 
 
    Moving on, let's update our CSS to use Modernizr rather than @supports. Go into modernizr-css.css, and replace the two @supports blocks with the following:
    
@@ -271,11 +271,11 @@ 
    CSS
    
 
    So how does this work? Because all those class names have been put on the <html> element, you can target browsers that do or don't support a feature using specific descendant selectors. So here we're applying the top set of rules only to browsers that do support flexbox, and the bottom set of rules only to browsers that don't (no-flexbox).
    
 
 
    
-
    Note: Bear in mind that all of Modernizr's HTML and JavaScript feature tests are also reported in these class names, so you can quite happily apply CSS selectively based on whether the browser supports HTML or JavaScript features, if needed.
    
+
    备注： Bear in mind that all of Modernizr's HTML and JavaScript feature tests are also reported in these class names, so you can quite happily apply CSS selectively based on whether the browser supports HTML or JavaScript features, if needed.
    
 
    
 
 
    
-
    Note: If you have trouble getting this to work, check your code against our modernizr-css.html and modernizr-css.css files (see this running live also).
    
+
    备注： If you have trouble getting this to work, check your code against our modernizr-css.html and modernizr-css.css files (see this running live also).
    
 
    
 
 
    JavaScript
    
@@ -284,7 +284,7 @@ 
    JavaScript
    
 
 
    For example, load up our modernizr-css.html example in your browser, then try going to your JavaScript console and typing in Modernizr. followed by some of those class names (they are the same here too). For example:
    
 
-
    Modernizr.flexbox
+
    Modernizr.flexbox
 Modernizr.websqldatabase
 Modernizr.xhr2
 Modernizr.fetch
    
diff --git a/files/zh-cn/learn/tools_and_testing/cross_browser_testing/html_and_css/index.html b/files/zh-cn/learn/tools_and_testing/cross_browser_testing/html_and_css/index.html
index 1676420988e000..cf2aa33ceeca32 100644
--- a/files/zh-cn/learn/tools_and_testing/cross_browser_testing/html_and_css/index.html
+++ b/files/zh-cn/learn/tools_and_testing/cross_browser_testing/html_and_css/index.html
@@ -35,8 +35,8 @@ 
    HTML 和 CSS 的问题
    
 
 
    实际上，HTML 和 CSS 的问题在于，它们相当简单，简单到开发人员通常不会认真对待它们，因此难以确保代码简洁、高效，或是能在语义上描述页面各部分的功能。在最坏的情况下，一些网站甚至选择使用 JavaScript 来生成整个网页的内容和样式，这使得页面的可读性较差，并且性能低下（对性能而言，生成大量 DOM 元素的操作是较为昂贵的）。
    
 
-
    
-
    译者注：关于使用 JavaScript 生成网页的选择，抛开一切非决定性的因素，最终的关键还是我们开发者。
    
+
    
+
    备注： 关于使用 JavaScript 生成网页的选择，抛开一切非决定性的因素，最终的关键还是我们开发者。
    
  非决定性因素，比如页面本身，举个例子，如果页面是由大量的重复或有规律片段组成，使用适当、理想的 JavaScript 来生成这样的页面会是不错的选择。
    
 
 
    但是，如果我们的决定性因素，开发者，不了解或不重视有关的问题，甚至盲目地崇拜一些基于 JavaScript 的前端页面生成方案，可能一切都是白搭。
    
@@ -56,7 +56,7 @@ 
    首先：解决一般问题
    
 
    基本上，这是一个如何检查您的 HTML 和 CSS 代码，是否格式正确、不包含任何语法错误的问题。
    
 
 
    
-
    注意：CSS 和 HTML 之间的一个常见问题，就是不同的 CSS 规则之间发生冲突。当您使用第三方代码时，问题可能大到难以修补。例如，你可能正用着一个 CSS 框架，并发现它使用的一个类名与你已经用于某处的类名冲突。或者，您可能会发现，由某种第三方 API（例如生成广告横幅的脚本）生成的 HTML 包含您已经用于别处的类名称或者 ID。
    
+
    备注： CSS 和 HTML 之间的一个常见问题，就是不同的 CSS 规则之间发生冲突。当您使用第三方代码时，问题可能大到难以修补。例如，你可能正用着一个 CSS 框架，并发现它使用的一个类名与你已经用于某处的类名冲突。或者，您可能会发现，由某种第三方 API（例如生成广告横幅的脚本）生成的 HTML 包含您已经用于别处的类名称或者 ID。
    
  为了确保不会发生这种情况，您需要首先研究一下您正在使用的工具，了解它们可能使用的类名与 ID，并围绕，或者规避着它们来设计您的代码。设法为 CSS 加上“命名空间”也是值得的，例如，如果有一个小部件，就先确保它有一个独特的类，然后基于这个类来选择元件内的这个类的选择器，这样一来，冲突的可能性就小下来了。例如 .audio-player ul a。
    
 
    
 
@@ -101,7 +101,7 @@ 
    浏览器开发者工具
    
 
    大多数浏览器中内置的开发人员工具还提供了有用的工具来查找错误，主要是针对 CSS 的。
    
 
 
    
-
    注意：在开发工具中，HTML 错误不会直接显示，因为浏览器会尝试自动纠正错误形成的标记；目前，W3C 验证器是获取 HTML 错误的最佳方法——请参阅上面的验证。
    
+
    备注： 在开发工具中，HTML 错误不会直接显示，因为浏览器会尝试自动纠正错误形成的标记；目前，W3C 验证器是获取 HTML 错误的最佳方法——请参阅上面的验证。
    
 
    
 
 
    例如，在 Firefox 中，CSS 检查器将显示未应用的 CSS 声明，并带有警告三角形。悬停警告三角将提供一个描述性的错误信息：
    
@@ -127,14 +127,14 @@ 
    HTML 回退行为
    
 
    无法识别的 HTML 元素被浏览器视为匿名内联元素（有效内联元素，没有语义值，类似于 {{htmlelement("span")}} 元素）。您还可以参考他们通过自己的名字，并用 CSS 样式它们，例如 - 你只需要确保它们表现为你想让他们，例如对所有新的语义元素设置 display: block;（如 {{htmlelement("article")}}、{{htmlelement("aside")}} 等），但现在，基本只有在旧版本的 IE 不能识别他们（IE 8 和更低）。这样，新的浏览器就可以正常使用这些代码，但是旧的 IE 版本也可以对这些元素进行样式化。
    
 
 
    
-
    注意：请参阅IE 条件注释以获取最佳实践。
    
+
    备注： 请参阅IE 条件注释以获取最佳实践。
    
 
    
 
 
    更复杂的元素，如 HTML  <video>、<audio>，和 <canvas>（和其他功能除外）有自然的 fallback 加入机制，其工作原理与上述相同。您可以在开始和结束标记之间添加回退内容，非支持的浏览器将有效地忽略外部元素并运行嵌套的内容。
    
 
 
    例如：
    
 
-
    <video id="video" controls preload="metadata" poster="img/poster.jpg">
+
    <video id="video" controls preload="metadata" poster="img/poster.jpg">
   <source src="video/tears-of-steel-battle-clip-medium.mp4" type="video/mp4">
   <source src="video/tears-of-steel-battle-clip-medium.webm" type="video/webm">
   <source src="video/tears-of-steel-battle-clip-medium.ogg" type="video/ogg">
@@ -169,50 +169,10 @@ 
    HTML 回退行为
    
 
 
    此代码的输出如下所示：
    
 
-
-
-
    {{ EmbedLiveSample('Hidden_example', '100%', 150) }}
    
+
    {{EmbedGHLiveSample("learning-area/tools-testing/cross-browser-testing/html-css/forms-test", '100%', 150)}}
    
 
 
    
-
    注意：您也可以在 GitHub 上以forms-test.html 的形式直接看到这个运行（参见源代码）。
    
+
    备注： 您也可以在 GitHub 上以forms-test.html 的形式直接看到这个运行（参见源代码）。
    
 
    
 
 
    如果您在支持的浏览器（如桌面/ Android Chrome 或 iOS Safari）上查看该示例，则会在尝试输入数据时看到特殊的小部件/功能。在一个非支持的平台上，例如 Firefox 或 Internet Explorer，输入只会回退到正常的文本输入，所以至少用户仍然可以输入一些信息。
    
@@ -228,7 +188,7 @@ 
    CSS 回退行为
    
 
    
 
 
    
-
    注意：你也可以在 GitHub 上浏览这个例子：button-with-fallback.html 的形式运行（另见源代码）。
    
+
    备注： 你也可以在 GitHub 上浏览这个例子：button-with-fallback.html 的形式运行（另见源代码）。
    
 
    
 
 
    该按钮有一些样式声明，但我们最感兴趣的两个如下：
    
@@ -258,14 +218,14 @@ 
    CSS 回退行为
    
 
    为了解决这个问题，我们添加了第二个 background-color 声明，它只是指定了一个十六进制颜色 - 这在旧版本的浏览器中得到了支持，并且在现代闪亮功能无法使用的情况下作为后备。访问此页面的浏览器首先应用第一个 background-color 值，当它到达第二个 background-color 声明时，如果它支持 RGBA 颜色，它将用这个值覆盖初始值。如果不是的话，它会忽略整个声明，继续前进。
    
 
 
    
-
    注意：这同样适用于其他 CSS 功能，如真正的媒体查询，@font-face 以及 @supports 块 - 如果不支持他们，浏览器只是忽略它们。
    
+
    备注： 这同样适用于其他 CSS 功能，如真正的媒体查询，@font-face 以及 @supports 块 - 如果不支持他们，浏览器只是忽略它们。
    
 
    
 
 
    IE 条件注释
    
 
 
    IE 条件注释是修改后的专有 HTML 注释语法，可用于将 HTML 代码有选择地应用于不同版本的 IE。这已被证明是一个非常有效的机制来解决跨浏览器的错误。语法如下所示：
    
 
-
    <!--[if lte IE 8]>
+
    <!--[if lte IE 8]>
   <script src="ie-fix.js"></script>
   <link href="ie-fix.css" rel="stylesheet" type="text/css">
 <![endif]-->
    
@@ -273,7 +233,7 @@ 
    IE 条件注释
    
 
    只有当浏览器查看页面是 IE 8 或更旧时，此块才会应用 IE 特定的 CSS 和 JavaScript。lte 意思是“小于或等于”，但是也可以使用 lt、gt、gte、!(NOT) 以及其他逻辑语法。
    
 
 
    
-
    注意：Sitepoint 的 Internet Explorer 条件注释提供了一个有用的初学者教程/参考，详细解释了条件注释语法。
    
+
    备注： Sitepoint 的 Internet Explorer 条件注释提供了一个有用的初学者教程/参考，详细解释了条件注释语法。
    
 
    
 
 
    正如你所看到的，这对于将代码修复应用于旧版本的 IE 尤其有用。我们前面提到的用例（使旧版本的 IE 可以使用现代语义元素）可以通过使用条件注释来轻松实现，例如，您可以在 IE 样式表中添加类似这样的内容：
    
@@ -309,7 +269,7 @@ 
    选择器支持
    
  
  • 要尝试此示例，请创建 selectivizr-example-start.html 的本地副本。如果你看看这个现场直播，你会发现它包含两个段落，其中一个是风格。我们已经选择了这个段落 p:first-child，这在老版本的 IE 中不起作用。
    • 
  
  • 现在下载  MooTools和Selectivizr，并将它们保存在与示例 HTML 相同的目录中。
    • 
  
  • 将下面的代码放到 HTML 文档的开头，就在开始 <style> 标记之前：
-  
    <script type="text/javascript" src="MooTools-Core-1.6.0.js"></script>
+  
    <script type="text/javascript" src="MooTools-Core-1.6.0.js"></script>
     <!--[if (gte IE 6)&(lte IE 8)]>
       <script type="text/javascript" src="selectivizr-min.js"></script>
     <![endif]-->
    
@@ -386,7 +346,7 @@ 
    处理 CSS 前缀
    
 
 
    另一个解决方案是在开发过程中自动添加前缀，而这个（和其他的东西除外）可以使用像Autoprefixer和PostCSS这样的工具完成。这些工具可以以多种方式使用，例如 Autoprefixer 有一个在线版本，允许您在左侧输入非前缀 CSS，并在右侧给出前缀添加版本。您可以使用Autoprefixer 选项中列出的符号来选择要确保支持的浏览器; 另请参阅基于此的Browserslist 查询以获取更多详细信息。例如，以下查询将选择所有主流浏览器的最后 2 个版本和 IE9 以上的版本。
    
 
-
    last 2 versions, ie > 9
    
+
    last 2 versions, ie > 9
    
 
 
    Autoprefixer 也可用于其他更便捷的方式 - 请参阅Autoprefixer 使用情况。例如，您可以使用任务运行器/构建工具（如Gulp或Webpack）在开发完成后自动添加前缀。（解释这些工作如何超出本文的范围。）
    
 
@@ -422,11 +382,11 @@ 
    布局问题
    
 
 
 
    
-
    注意：过去，Web 开发人员使用 reset CSS 删除应用于 HTML 的所有默认浏览器样式，然后将自己的样式应用于顶部的所有样式 - 这样做是为了使项目的样式更加一致，并减少可能的跨浏览器问题，特别是像布局的东西。然而现在它被认为过头了。我们现在最好的等价物是normalize.css，这是一个整齐的 CSS，在默认的浏览器样式上略微增加一点，使事情更加一致，并解决一些布局问题。建议您将 normalize.css 应用于所有的 HTML 页面。
    
+
    备注： 过去，Web 开发人员使用 reset CSS 删除应用于 HTML 的所有默认浏览器样式，然后将自己的样式应用于顶部的所有样式 - 这样做是为了使项目的样式更加一致，并减少可能的跨浏览器问题，特别是像布局的东西。然而现在它被认为过头了。我们现在最好的等价物是normalize.css，这是一个整齐的 CSS，在默认的浏览器样式上略微增加一点，使事情更加一致，并解决一些布局问题。建议您将 normalize.css 应用于所有的 HTML 页面。
    
 
    
 
 
    
-
    注意：当试图追踪一个棘手的布局问题，一个好方法是添加一个明亮的颜色outline到有问题的元素，或附近的所有元素。这使得更容易看到一切放置在哪里。请参阅使用大纲可视化调试您的 CSS 以获取更多详细信息。
    
+
    备注： 当试图追踪一个棘手的布局问题，一个好方法是添加一个明亮的颜色outline到有问题的元素，或附近的所有元素。这使得更容易看到一切放置在哪里。请参阅使用大纲可视化调试您的 CSS 以获取更多详细信息。
    
 
    
 
 
    支持新的布局特性
    
@@ -445,7 +405,7 @@ 
    支持新的布局特性
    
 
    例如，您可以将 Flexbox 布局应用于现代浏览器，然后将浮动布局应用于不支持 Flexbox 的旧浏览器。
    
 
 
    
-
    注意：CSS 中还有一个相当新的特性 @supports，它允许你实现原生特征检测测试。
    
+
    备注： CSS 中还有一个相当新的特性 @supports，它允许你实现原生特征检测测试。
    
 
    
 
 
    响应式设计问题
    
diff --git a/files/zh-cn/learn/tools_and_testing/cross_browser_testing/introduction/index.html b/files/zh-cn/learn/tools_and_testing/cross_browser_testing/introduction/index.html
index 38d9df3525b545..098e9639eaf58c 100644
--- a/files/zh-cn/learn/tools_and_testing/cross_browser_testing/introduction/index.html
+++ b/files/zh-cn/learn/tools_and_testing/cross_browser_testing/introduction/index.html
@@ -35,7 +35,7 @@ 
    什么是跨浏览器测试？
    
 
    请记住，您不能代表产品的用户 - 您的网站能适配 Macbook Pro 或高端 Galaxy Nexus，并不意味它适用于所有用户 - 还有很多测试工作要做！
    
 
 
    
-
    Note: Make the web work for everyone 文章列出了浏览器的市场份额，使用情况和相关兼容性问题。
    
+
    备注： Make the web work for everyone 文章列出了浏览器的市场份额，使用情况和相关兼容性问题。
    
 
    
 
 
    我们先解释下术语。首先，我们所讨论的“跨浏览器使用（working cross browser）”，应该在不同浏览器中提供可接受的用户体验。虽然无法在所有浏览器上提供相同的体验，但确保核心功能使用顺畅就算可以。比如在现代浏览器上，能显示动画、3D 或闪光效果，而在较旧的浏览器上，可以呈现出相同信息的平面图片。只要网站主满意，你的工作就算完成了。
    
@@ -45,7 +45,7 @@ 
    什么是跨浏览器测试？
    
 
    其次，当我们说“可接受数量的浏览器（across an acceptable number of web browsers）” ，并不是说世界上 100% 的浏览器，这也是不可能。您可以通过信息收集了解用户都在使用哪些浏览器和设备，但也不能保证全都采集到（也是本专题第二篇所讨论的 — 参见 要测试全部的吗？（Gotta test 'em all?））。作为 web 开发者，您自然要确保网站主要求的浏览器都能正常工作，但除此之外，您需要防御性编程（code defensively），尽可能让其它浏览器也能正常查看内容。这是 Web 开发的重大挑战之一！
    
 
 
    
-
    Note: 后面会详细介绍防御性编程（code defensively）
    
+
    备注： 后面会详细介绍防御性编程（code defensively）
    
 
    
 
 
    为什么会出现跨浏览器问题？
    
@@ -90,10 +90,8 @@ 
    初步规划
    
 
 
    你应该列出这些潜在的问题。
    
 
-
-
 
    
-
    注意：你可在 MDN——就是本网站——找到浏览器对不同技术功能的支持情况的信息。
    
+
    备注： 你可在 MDN——就是本网站——找到浏览器对不同技术功能的支持情况的信息。
    
 
    
 
 
    一旦你们就这些问题达成共识，你就可以开始开发网站了。
    
diff --git a/files/zh-cn/learn/tools_and_testing/cross_browser_testing/javascript/index.html b/files/zh-cn/learn/tools_and_testing/cross_browser_testing/javascript/index.html
index b54524cb1e3f8e..b20cfed91e7c20 100644
--- a/files/zh-cn/learn/tools_and_testing/cross_browser_testing/javascript/index.html
+++ b/files/zh-cn/learn/tools_and_testing/cross_browser_testing/javascript/index.html
@@ -52,7 +52,7 @@ 
    修复一般的 JavaScript 问题
    
 
 
 
    
-
    Note: Buggy JavaScript Code: The 10 Most Common Mistakes JavaScript Developers Make has some nice discussions of these common mistakes and more.
    
+
    备注： Buggy JavaScript Code: The 10 Most Common Mistakes JavaScript Developers Make has some nice discussions of these common mistakes and more.
    
 
    
 
 
    Linters
    
@@ -95,7 +95,7 @@ 
    其他方式
    
 
    You can also use these tools with a task runner/build tool such as Gulp or Webpack to automatically lint your JavaScript during development. (see Using a task runner to automate testing tools in a later article.) See ESLint integrations for ESLint options; JSHint is supported out of the box by Grunt, and also has other integrations available, e.g. JSHint loader for Webpack.
    
 
 
    
-
    Note: ESLint takes a bit more setup and configuration than JSHint, but it is more powerful too.
    
+
    备注： ESLint takes a bit more setup and configuration than JSHint, but it is more powerful too.
    
 
    
 
 
    浏览器开发者工具
    
@@ -159,7 +159,7 @@ 
    Using the JavaScript debugger
    
 
    We have solved one problem, but we are still stuck with the error message "TypeError: heroes is undefined", reported on line 51. Let's investigate this now, using a more sophisticated feature of browser developer tools: the JavaScript debugger as it is called in Firefox.
    
 
 
    
-
    Note: Similar tools are available in other browsers; the Sources tab in Chrome, Debugger in Safari (see Safari Web Development Tools), etc.
    
+
    备注： Similar tools are available in other browsers; the Sources tab in Chrome, Debugger in Safari (see Safari Web Development Tools), etc.
    
 
    
 
 
    In Firefox, the Debugger tab looks as follows:
    
@@ -194,11 +194,11 @@ 
    Using the JavaScript debugger
    
 
 
 
    
-
    Note: We'd like you to try fixing this problem yourself. To give you a clue, you can either tell the XMLHttpRequest object explicitly to return JSON format, or convert the returned text to JSON after the response arrives. If you get stuck, consult our fixed-ajax.html example.
    
+
    备注： We'd like you to try fixing this problem yourself. To give you a clue, you can either tell the XMLHttpRequest object explicitly to return JSON format, or convert the returned text to JSON after the response arrives. If you get stuck, consult our fixed-ajax.html example.
    
 
    
 
 
    
-
    Note: The debugger tab has many other useful features that we've not discussed here, for example conditional breakpoints and watch expressions. For a lot more information, see the Debugger page.
    
+
    备注： The debugger tab has many other useful features that we've not discussed here, for example conditional breakpoints and watch expressions. For a lot more information, see the Debugger page.
    
 
    
 
 
    Performance issues
    
@@ -213,7 +213,7 @@ 
    Performance issues
    
 
 
 
    
-
    Note: Addy Osmani's Writing Fast, Memory-Efficient JavaScript contains a lot of detail and some excellent tips for boosting JavaScript performance.
    
+
    备注： Addy Osmani's Writing Fast, Memory-Efficient JavaScript contains a lot of detail and some excellent tips for boosting JavaScript performance.
    
 
    
 
 
    Cross-browser JavaScript problems
    
@@ -256,14 +256,14 @@ 
    Using modern JavaScript/API feature
 
    There are a few strategies for handling incompatibilities between browsers relating to feature support; let's explore the most common ones.
    
 
 
    
-
    Note: These strategies do not exist in separate silos — you can, of course combine them as needed. For example, you could use feature detection to determine whether a feature is supported; if it isn't, you could then run code to load a polyfill or a library to handle the lack of support.
    
+
    备注： These strategies do not exist in separate silos — you can, of course combine them as needed. For example, you could use feature detection to determine whether a feature is supported; if it isn't, you could then run code to load a polyfill or a library to handle the lack of support.
    
 
    
 
 
    Feature detection
    
 
 
    The idea behind feature detection is that you can run a test to determine whether a JavaScript feature is supported in the current browser, and then conditionally run code to provide an acceptable experience both in browsers that do and don't support the feature. As a quick example, the Geolocation API  (which exposes available location data for the device the web browser is running on) has a main entry point for its use — a geolocation property available on the global Navigator object. Therefore, you can detect whether the browser supports geolocation or not by using something like the following:
    
 
-
    if("geolocation" in navigator) {
+
    if("geolocation" in navigator) {
   navigator.geolocation.getCurrentPosition(function(position) {
     // show the location on a map, perhaps using the Google Maps API
   });
@@ -276,11 +276,11 @@ 
    Feature detection
    
 
    As a last point, don't confuse feature detection with browser sniffing (detecting what specific browser is accessing the site) — this is a terrible practice that should be discouraged at all costs. See Using bad browser sniffing code, later on, for more details.
    
 
 
    
-
    Note: Some features are known to be undetectable — see Modernizr's list of Undetectables.
    
+
    备注： Some features are known to be undetectable — see Modernizr's list of Undetectables.
    
 
    
 
 
    
-
    Note: Feature detection will be covered in a lot more detail in its own dedicated article, later in the module.
    
+
    备注： Feature detection will be covered in a lot more detail in its own dedicated article, later in the module.
    
 
    
 
 
    Libraries
    
@@ -300,13 +300,13 @@ 
    Libraries
    
 
    When choosing a library to use, make sure that it works across the set of browsers you want to support, and test your implementation thoroughly. Also make sure that the library is popular and well-supported, and isn't likely to just become obsolete next week. Talk to other developers to find out what they recommend, see how much activity and how many contributors the library has on Github (or wherever else it is stored), etc.
    
 
 
    
-
    Note: JavaScripting.com gives you a good idea of just how many JavaScript libraries there are available, and can be useful for finding libraries for specific purposes.
    
+
    备注： JavaScripting.com gives you a good idea of just how many JavaScript libraries there are available, and can be useful for finding libraries for specific purposes.
    
 
    
 
 
    Library usage at a basic level tends to consist of downloading the library's files (JavaScript, possibly some CSS or other dependencies too) and attaching them to your page (e.g. via a {{htmlelement("script")}} element), although there are normally many other usage options for such libraries, like installing them as Bower components, or including them as dependencies via the Webpack module bundler. You will have to read the libraries' individual install pages for more information.
    
 
 
    
-
    Note: You will also come across JavaScript frameworks in your travels around the Web, like Ember and Angular. Whereas libraries are often usable for solving individual problems and dropping into existing sites, frameworks tend to be more along the lines of complete solutions for developing complex web applications.
    
+
    备注： You will also come across JavaScript frameworks in your travels around the Web, like Ember and Angular. Whereas libraries are often usable for solving individual problems and dropping into existing sites, frameworks tend to be more along the lines of complete solutions for developing complex web applications.
    
 
    
 
 
    Polyfills
    
@@ -318,9 +318,9 @@ 
    Polyfills
    
 
    Let's work through an exercise — in this example we will use a Fetch polyfill to provide support for the Fetch API in older browsers; however we also need to use the es6-promise polyfill, as Fetch makes heavy use of promises, and browsers that don't support them will still be in trouble.
    
 
 
      
- 
    1. To get started, make a local copy of our fetch-polyfill.html example and our nice image of some flowers in a new directory. We are going to write code to fetch the flowers image and display it in the page.
      2. 
- 
    2. Next, save copies of the Fetch polyfill and the es6-promises polyfill in the same directory as the HTML.
      3. 
- 
    3. Apply the polyfill scripts to the page using the following code — place these above the existing {{htmlelement("script")}} element so they will be available on the page already when we start trying to use Fetch:
+ 
    4. To get started, make a local copy of our fetch-polyfill.html example and our nice image of some flowers in a new directory. We are going to write code to fetch the flowers image and display it in the page.
      5. 
+ 
    5. Next, save copies of the Fetch polyfill and the es6-promises polyfill in the same directory as the HTML.
      6. 
+ 
    6. Apply the polyfill scripts to the page using the following code — place these above the existing {{htmlelement("script")}} element so they will be available on the page already when we start trying to use Fetch:
   
      <script src="es6-promise.js"></script>
 <script src="fetch.js"></script>
      
  
      7. 
@@ -340,11 +340,11 @@ 
      Polyfills
      
 
    
 
 
    
-
    Note: You can find our finished version at fetch-polyfill-finished.html (see also the source code).
    
+
    备注： You can find our finished version at fetch-polyfill-finished.html (see also the source code).
    
 
    
 
 
    
-
    Note: Again, there are many different ways to make use of the different polyfills you will encounter — consult each polyfill's individual documentation.
    
+
    备注： Again, there are many different ways to make use of the different polyfills you will encounter — consult each polyfill's individual documentation.
    
 
    
 
 
    One thing you might be thinking is "why should we always load the polyfill code, even if we don't need it?" This is a good point — as your sites get more complex and you start to use more libraries, polyfills, etc., you can start to load a lot of extra code, which can start to affect performance, especially on less-powerful devices. It makes sense to only load files as needed.
    
@@ -389,7 +389,7 @@ 
    Polyfills
    
 
    You can see this code in action in fetch-polyfill-only-when-needed.html (see the source code also). We'd like to make it clear that we can't take credit for this code — it was originally written by Philip Walton.  Check out his article Loading Polyfills Only When Needed for the original code, plus a lot of useful explanation around the wider subject).
    
 
 
    
-
    Note: There are some 3rd party options to consider, for example Polyfill.io — this is a meta-polyfill library that will look at each browser's capabilities and apply polyfills as needed, depending on what APIs and JS features you are using in your code.
    
+
    备注： There are some 3rd party options to consider, for example Polyfill.io — this is a meta-polyfill library that will look at each browser's capabilities and apply polyfills as needed, depending on what APIs and JS features you are using in your code.
    
 
    
 
 
    JavaScript transpiling
    
@@ -397,7 +397,7 @@ 
    JavaScript transpiling
    
 
    Another option that is becoming popular for people that want to use modern JavaScript features now is converting code that makes use of ECMAScript 6/ECMAScript 2015 features to a version that will work in older browsers.
    
 
 
    
-
    Note: This is called "transpiling" — you are not compiling code into a lower level for to be run on a computer (like you would say with C code); instead, you are changing it into a syntax that exists at a similar level of abstraction so it can be used in the same way, but in slightly different circumstances (in this case, transforming one flavor of JavaScript into another).
    
+
    备注： This is called "transpiling" — you are not compiling code into a lower level for to be run on a computer (like you would say with C code); instead, you are changing it into a syntax that exists at a similar level of abstraction so it can be used in the same way, but in slightly different circumstances (in this case, transforming one flavor of JavaScript into another).
    
 
    
 
 
    So for example, we talked about arrow functions (see arrow-function.html live, and see the source code) earlier in the article, which only work in the newest browsers:
    
@@ -413,7 +413,7 @@ 
    JavaScript transpiling
    
 
    The easiest way to give Babel a try is to use the online version, which allows you to enter your source code on the left, and outputs a transpiled version on the right.
    
 
 
    
-
    Note: There are many ways to use Babel (task runners, automation tools, etc.), as you'll see on the setup page.
    
+
    备注： There are many ways to use Babel (task runners, automation tools, etc.), as you'll see on the setup page.
    
 
    
 
 
    Using bad browser sniffing code
    
@@ -433,7 +433,7 @@ 
    Using bad browser sniffing code
    
 
    The idea was fairly good — detect what browser is viewing the site, and run code as appropriate to make sure the browser will be able to use your site OK.
    
 
 
    
-
    Note: Try opening up your JavaScript console now and running navigator.userAgent, to see what you get returned.
    
+
    备注： Try opening up your JavaScript console now and running navigator.userAgent, to see what you get returned.
    
 
    
 
 
    However, as time went on, developers started to see major problems with this approach. For a start, the code was error prone. What if you knew a feature didn't work in say, Firefox 10 and below, and implemented code to detect this, and then Firefox 11 came out — which did support that feature? Firefox 11 probably wouldn't be supported because it's not Firefox 10. You'd have to change all your sniffing code regularly.
    
@@ -441,7 +441,7 @@ 
    Using bad browser sniffing code
    
 
    Many developers implemented bad browser sniffing code and didn't maintain it, and browsers start getting locked out of using websites containing features that they had since implemented. This became so common that browsers started to lie about what browser they were in their user-agent strings (or claim they were all browsers), to get around sniffing code. Browsers also implemented facilities to allow users to change what user-agent string the browser reported when queried with JavaScript. This all made browser sniffing even more error prone, and ultimately pointless. 
    
 
 
    
-
    Note: You should read History of the browser user-agent string by Aaron Andersen for a useful and amusing take on this situation.
    
+
    备注： You should read History of the browser user-agent string by Aaron Andersen for a useful and amusing take on this situation.
    
 
    
 
 
    The lesson to be learned here is — NEVER use browser sniffing. The only really use case for browser sniffing code in the modern day is if you are implementing a fix for a bug in a very specific version of a particular browser. But even then, most bugs get fixed pretty quickly in browser vendor rapid release cycles. It won't come up very often. Feature detection is almost always a better option — if you detect whether a feature is supported, you won't need to change your code when new browser versions come out, and the tests are much more reliable.
    
diff --git a/files/zh-cn/learn/tools_and_testing/cross_browser_testing/testing_strategies/index.html b/files/zh-cn/learn/tools_and_testing/cross_browser_testing/testing_strategies/index.html
index d35f7bef1f2b8f..ad65c7d2d8adce 100644
--- a/files/zh-cn/learn/tools_and_testing/cross_browser_testing/testing_strategies/index.html
+++ b/files/zh-cn/learn/tools_and_testing/cross_browser_testing/testing_strategies/index.html
@@ -50,7 +50,7 @@ 
    是否需要测试？
    
 
    在以下各节中，我们将以此等级为参考构建支持图表。
    
 
 
    
-
    注意：雅虎最先使这一方法流行起来，详情参见《浏览器分级支持系统》（ Graded browser Support）。
    
+
    备注： 雅虎最先使这一方法流行起来，详情参见《浏览器分级支持系统》（Graded browser Support）。
    
 
    
 
 
    有根据地假设
    
@@ -60,7 +60,7 @@ 
    有根据地假设
    
 
    例如，如果您居住在西欧或北美，您会发现许多人使用 Windows 和 Mac 的台式机或笔记本电脑，常用浏览器是 Chrome，Firefox，Safari，IE 和 Edge。您可以测试前三个浏览器的最新版本，因为它们会定期更新。对于 Edge 和 IE，您应当测试它们近期的几个版本。以上这些浏览器都属于 A 级别。
    
 
 
    
-
    注意：您一次只能在计算机上安装一个版本的 IE 或 Edge，因此您可能必须使用虚拟机或其他方法来执行所需的测试。稍后请参阅虚拟机部分。
    
+
    备注： 您一次只能在计算机上安装一个版本的 IE 或 Edge，因此您可能必须使用虚拟机或其他方法来执行所需的测试。稍后请参阅虚拟机部分。
    
 
    
 
 
    很多人使用 iOS 和 Android，因此您可能还想测试最新版本的 iOS Safari，最近几个版本的 Android stock 浏览器，以及适用于 iOS 和 Android 的 Chrome 和 Firefox。理想情况下，您应该在手机和平​​板电脑上测试它们，以确保响应式设计正常运行。
    
@@ -78,7 +78,7 @@ 
    有根据地假设
    
 
    如果您居住在其他地方，或者正在开发其他地方（例如某些国家或地区）的网站，那您可能需要对不同的常用浏览器进行测试。
    
 
 
    
-
    注意：“我老板用 Blackberry，所以我们最好确保它看起来很好”也是一个很有说服力的理由。
    
+
    备注： “我老板用 Blackberry，所以我们最好确保它看起来很好”也是一个很有说服力的理由。
    
 
    
 
 
    浏览器份额统计
    
@@ -128,7 +128,7 @@ 
    学习分析数据
    
 
    还应鼓励您查看左侧的不同选项，并查看您可以找到哪些类型的数据。例如，您可以通过从左侧菜单中选择" Audience > Technology > Browser & OS"来了解用户正在使用的浏览器和操作系统。
    
 
 
    
-
    注意：使用 Google 分析时，您需要提防误导性偏见，例如"我们没有 Firefox 移动用户"可能会导致您不必为 Firefox 移动提供支持。但是，你不会有任何火狐移动用户，如果该网站被打破在火狐手机摆在首位。
    
+
    备注： 使用 Google 分析时，您需要提防误导性偏见，例如"我们没有 Firefox 移动用户"可能会导致您不必为 Firefox 移动提供支持。但是，你不会有任何火狐移动用户，如果该网站被打破在火狐手机摆在首位。
    
 
    
 
 
    其他注意事项
    
@@ -214,11 +214,11 @@ 
    真实设备
    
 
    我们将介绍下面的其他选项。
    
 
 
    
-
    注意:已做出一些努力用来创建可公开访问的设备实验室，请参阅 Open Device Labs。
    
+
    备注： 已做出一些努力用来创建可公开访问的设备实验室，请参阅 Open Device Labs。
    
 
    
 
 
    
-
    注意:我们还需要考虑辅助功能 — 可以在计算机上安装许多有用的工具，以方便辅助功能测试，但我们将在本课程的后面部分介绍"处理常见辅助功能问题"一文中的工具。
    
+
    备注： 我们还需要考虑辅助功能 — 可以在计算机上安装许多有用的工具，以方便辅助功能测试，但我们将在本课程的后面部分介绍"处理常见辅助功能问题"一文中的工具。
    
 
    
 
 
    模拟器
    
@@ -243,7 +243,7 @@ 
    模拟器
    
 
 
 
    
-
    注意：许多模拟器实际上需要使用虚拟机（见下文）;在这种情况下，通常提供指令，和/或将虚拟机的使用合并到仿真器的安装程序中。
    
+
    备注： 许多模拟器实际上需要使用虚拟机（见下文）;在这种情况下，通常提供指令，和/或将虚拟机的使用合并到仿真器的安装程序中。
    
 
    
 
 
    虚拟机
    
@@ -251,7 +251,7 @@ 
    虚拟机
    
 
    虚拟机是在台式计算机上运行的应用程序，允许您运行整个操作系统的仿真，每个操作系统都划分在自己的虚拟硬盘驱动器中（通常由主机硬盘上存在的单个大文件表示）。有许多流行的虚拟机应用程序可用，例如Parallels，VMWare和Virtual Box;我们个人喜欢后者，因为它是免费的。
    
 
 
    
-
    注意：您需要可用的大容量硬盘空间来运行虚拟机模拟;模拟的每个操作系统都会占用大量内存。您可能倾向于为每次安装选择所需的硬盘空间;你也可能会试图侥幸使用 10GB 空间，但会被建议使用 50GB 空间或更多，以便让操作系统运行可靠。大多数虚拟机应用程序提供的一个很好的选择是创建一个动态分配（dynamically allocated）的硬盘驱动器，它会随着需要的增长和缩小而动态改变。
    
+
    备注： 您需要可用的大容量硬盘空间来运行虚拟机模拟;模拟的每个操作系统都会占用大量内存。您可能倾向于为每次安装选择所需的硬盘空间;你也可能会试图侥幸使用 10GB 空间，但会被建议使用 50GB 空间或更多，以便让操作系统运行可靠。大多数虚拟机应用程序提供的一个很好的选择是创建一个动态分配（dynamically allocated）的硬盘驱动器，它会随着需要的增长和缩小而动态改变。
    
 
    
 
 
    要使用虚拟盒，您需要：
    
@@ -277,7 +277,7 @@ 
    虚拟机
    
 
    
 
 
    
-
    重要提示：您需要确保此时要在虚拟机上安装要安装的操作系统映像，然后立即安装。如果此时取消该进程，它可能会使虚拟机无法使用，并使其成为您需要删除它并再次创建它。这不是致命的，但令人讨厌。
    
+
    警告： 你需要确保此时要在虚拟机上安装要安装的操作系统映像，然后立即安装。如果此时取消该进程，它可能会使虚拟机无法使用，并使其成为您需要删除它并再次创建它。这不是致命的，但令人讨厌。
    
 
    
 
 
    完成此过程后，您应该有一台虚拟机在主机窗口内运行操作系统。
    
@@ -300,7 +300,7 @@ 
    虚拟机
    
 
 
 
    
-
    注意：虚拟机的另一个好处是虚拟磁盘映像是相当独立的。如果您正在团队中工作，则可以创建一个虚拟磁盘映像，然后复制并传递它。如果它是许可产品，只需确保您拥有运行所有 Windows 副本或正在运行的任何其他副本所需的许可证。
    
+
    备注： 虚拟机的另一个好处是虚拟磁盘映像是相当独立的。如果您正在团队中工作，则可以创建一个虚拟磁盘映像，然后复制并传递它。如果它是许可产品，只需确保您拥有运行所有 Windows 副本或正在运行的任何其他副本所需的许可证。
    
 
    
 
 
    自动化和商业应用
    
@@ -336,11 +336,11 @@ 
    用户测试
    
 
    这些步骤旨在确保您正在测试的浏览器尽可能“纯粹（pure）”，即没有安装任何可能影响测试结果的内容。
    
 
 
    
-
    注意：如果您有可用的硬件，另一个有用的低功耗选项是在低端手机/其他设备上测试您的网站 - 随着网站变得更大并且具有更多效果，网站放慢速度的可能性更高，因此您需要开始给予表现更多考虑。尝试在低端设备上运行您的功能将使更高端设备的体验更有可能。
    
+
    备注： 如果您有可用的硬件，另一个有用的低功耗选项是在低端手机/其他设备上测试您的网站 - 随着网站变得更大并且具有更多效果，网站放慢速度的可能性更高，因此您需要开始给予表现更多考虑。尝试在低端设备上运行您的功能将使更高端设备的体验更有可能。
    
 
    
 
 
    
-
    注意：某些服务器端开发环境提供了有用的机制，可以将站点更改部署到仅部分用户，从而提供了一种有用的机制，可以在不需要单独的开发服务器的情况下获取由用户子集测试的功能。示例：Django Waffle Flags。
    
+
    备注： 某些服务器端开发环境提供了有用的机制，可以将站点更改部署到仅部分用户，从而提供了一种有用的机制，可以在不需要单独的开发服务器的情况下获取由用户子集测试的功能。示例：Django Waffle Flags。
    
 
    
 
 
    总结
    
diff --git a/files/zh-cn/learn/tools_and_testing/cross_browser_testing/your_own_automation_environment/index.html b/files/zh-cn/learn/tools_and_testing/cross_browser_testing/your_own_automation_environment/index.html
index 714e8d1b910d02..5b3428fea664e1 100644
--- a/files/zh-cn/learn/tools_and_testing/cross_browser_testing/your_own_automation_environment/index.html
+++ b/files/zh-cn/learn/tools_and_testing/cross_browser_testing/your_own_automation_environment/index.html
@@ -33,7 +33,7 @@ 
    Selenium
    
 
    我们将使用 Node.js 来编写和运行 Selenium 测试用例。Node.js 是一个前端开发者都很熟悉，并且容易上手的开发环境。
    
 
 
    
-
    注意: 如果你需要了解在其他服务器端环境下使用 WebDriver 的方式，也可以点击支持 Selenium 的平台来获取更多有用的链接。
    
+
    备注： 如果你需要了解在其他服务器端环境下使用 WebDriver 的方式，也可以点击支持 Selenium 的平台来获取更多有用的链接。
    
 
    
 
 
    在 Node 下建立 Selenium
    
@@ -46,7 +46,7 @@ 
    在 Node 下建立 Selenium
    
 
 
 
    
-
    注意: 即使你已经安装过 selenium-webdriver 并下载了浏览器驱动，我们仍然建议你按照步骤再来一遍，确定所有东西都是最新的。
    
+
    备注： 即使你已经安装过 selenium-webdriver 并下载了浏览器驱动，我们仍然建议你按照步骤再来一遍，确定所有东西都是最新的。
    
 
    
 
 
    接下来，你需要下载相应的驱动，使 WebDriver 能控制你需要测试的浏览器。在selenium-webdriver (第一部分的表格) 页面查看如何下载。 显然，有的浏览器是 OS 定制的，我们将使用 Firefox 和 Chrome, 它们在主流的 OS 下都支持。
    
@@ -58,7 +58,7 @@ 
    在 Node 下建立 Selenium
    
 
 
 
    
-
    注意: 重申一下，添加到 PATH 的路径是到包含驱动的那一级目录，而不是驱动目录自身！这是一个常犯的错误。
    
+
    备注： 重申一下，添加到 PATH 的路径是到包含驱动的那一级目录，而不是驱动目录自身！这是一个常犯的错误。
    
 
    
 
 
    在 Mac OS X 或大多数 Linux 系统中设置PATH 变量的操作如下：
    
@@ -221,7 +221,7 @@ 
    获取测试的 document
    
 
    driver.get('http://www.google.com');
    
 
 
    
-
    注意: 可以查看 WebDriver class reference 了解这一部分提到内容的详情。
    
+
    备注： 可以查看 WebDriver class reference 了解这一部分提到内容的详情。
    
 
    
 
 
    你可以使用包含file:// 的 URL 来指向需要测试的本地文件：
    
@@ -326,7 +326,7 @@ 
    等待操作完成
    
 
    WebDriver 等待 2 秒然后填充表单的文本框。接下来我们使用getAttribute()获取它的value属性值，并对它进行测试（如是否为空），最后将测试结果打印出来。
    
 
 
    
-
    注意: 还有一个方法叫 wait(), 它是在一定的时间内对某个条件进行反复测试，然后再继续执行代码，它也使用了 util 库, 其中定义了使用wait()的常见条件.
    
+
    备注： 还有一个方法叫 wait(), 它是在一定的时间内对某个条件进行反复测试，然后再继续执行代码，它也使用了 util 库, 其中定义了使用wait()的常见条件.
    
 
    
 
 
    使用后关闭驱动
    
@@ -361,7 +361,7 @@ 
    测试最佳实践
    
 
 
 
    
-
    注意: saucelabs-sample-test-frameworks 中包含了一些关于如何设置不同测试/断言工具组合的有用示例。
    
+
    备注： saucelabs-sample-test-frameworks 中包含了一些关于如何设置不同测试/断言工具组合的有用示例。
    
 
    
 
 
    运行远程测试
    
@@ -429,11 +429,11 @@ 
    BrowserStack
    
 
    点击测试链接，会打开一个屏幕播放记录了测试的视频，和在测试过程中相关的 log 详情。
    
 
 
    
-
    Note: Browserstack 自动化仪表盘的 Resources 菜单选项上 提供了许多运行自动化测试的有用信息。查看 关于 Node JS 编写自动化测试的文档 获取相关信息。研究一下使用 BrowserStack 可以帮你做到哪些事情。
    
+
    备注： Browserstack 自动化仪表盘的 Resources 菜单选项上 提供了许多运行自动化测试的有用信息。查看 关于 Node JS 编写自动化测试的文档 获取相关信息。研究一下使用 BrowserStack 可以帮你做到哪些事情。
    
 
    
 
 
    
-
    注意: 如果你不想自己写测试用例，可以使用 docs 中嵌入的生成器，查看 在手机浏览器上运行测试和在桌面浏览器上运行测试.
    
+
    备注： 如果你不想自己写测试用例，可以使用 docs 中嵌入的生成器，查看 在手机浏览器上运行测试和在桌面浏览器上运行测试.
    
 
    
 
 
    编程填充 BrowserStack 的测试详情
    
@@ -533,11 +533,11 @@ 
    Sauce Labs
    
 
 
 
    
-
    注意: Sauce Labs' Platform Configurator is a useful tool for generating capability objects to feed to your driver instances, based on what browser/OS you want to test on.
    
+
    备注： Sauce Labs' Platform Configurator is a useful tool for generating capability objects to feed to your driver instances, based on what browser/OS you want to test on.
    
 
    
 
 
    
-
    注意: 你可以查看 使用 Selenium 进行 Web 自动化测试, 和 实时 Selenium Node.js 测试获取更多关于 Sauce Labs 和 Selenium 测试的有用信息。
    
+
    备注： 你可以查看 使用 Selenium 进行 Web 自动化测试, 和 实时 Selenium Node.js 测试获取更多关于 Sauce Labs 和 Selenium 测试的有用信息。
    
 
    
 
 
    编程填充  Sauce Labs 的测试详情
    
@@ -548,10 +548,10 @@ 
    编程填充  Sauce Labs 的测
 
 
      
  
    1. 安装 Node Sauce Labs 套件 (如果你之前没有运行过):
-  
      npm install saucelabs --save-dev
      
+  
      npm install saucelabs --save-dev
      
  
      2. 
  
    2. Require saucelabs — 在 sauce_google_test.js 文件顶端，就在之前的变量声明下面添加如下代码：
-  
      var SauceLabs = require('saucelabs');
      
+  
      var SauceLabs = require('saucelabs');
      
  
      3. 
  
    3. 接着添加如下代码，创建一个新的 SauceLabs 实例：
   
      var saucelabs = new SauceLabs({
diff --git a/files/zh-cn/learn/tools_and_testing/github/index.html b/files/zh-cn/learn/tools_and_testing/github/index.html
index fbbbc184ae1a92..2af224cf189dae 100644
--- a/files/zh-cn/learn/tools_and_testing/github/index.html
+++ b/files/zh-cn/learn/tools_and_testing/github/index.html
@@ -21,7 +21,7 @@ 
      主要介绍
      
 
      版本控制系统提供了能够满足以上需求的工具。Git 是版本控制系统的典范，而 GitHub 是一个为个人或团队操作 Git 储存库 ( Git Repositories) 提供了 Git 服务器和一系列非常实用的工具的网站 + 基础设施。它提供了报告代码错误、检查工具以及分配任务和任务状态等项目管理工具等等。
      
 
 
      
-
      温馨提示：Git 实际上是一个分散式的版本控制系统，这意味你和其他所有人的电脑上都可以有一个这个复制了这个项目所有源代码的储存库的副本。你在自己的副本上进行了修改，然后提交给服务器，在那里将由这个项目的管理者来决定是否将你的修改添加到主本中。
      
+
      备注： Git 实际上是一个分散式的版本控制系统，这意味你和其他所有人的电脑上都可以有一个这个复制了这个项目所有源代码的储存库的副本。你在自己的副本上进行了修改，然后提交给服务器，在那里将由这个项目的管理者来决定是否将你的修改添加到主本中。
      
 
      
 
 
      事先准备
      
@@ -39,7 +39,7 @@ 
      事先准备
      
 
      建议你最好还能够有一些基础的命令行终端的知识，例如：切换目录、新建文件以及修改系统路径（PATH）。
      
 
 
      
-
      温馨提示： Github 并不是使用 Git 的唯一途径。还有很多像 GitLab 这样的选择值得你去尝试。你也可以尝试着去构建你自己的 Git 服务器来代替 Github 的功能。在这里我们只是将 Github 作为一种可行的途径进行介绍。
      
+
      备注： Github 并不是使用 Git 的唯一途径。还有很多像 GitLab 这样的选择值得你去尝试。你也可以尝试着去构建你自己的 Git 服务器来代替 Github 的功能。在这里我们只是将 Github 作为一种可行的途径进行介绍。
      
 
      
 
 
      带你入门
      
@@ -60,7 +60,7 @@ 
      带你入门
      
 
 
 
      
-
      温馨提示： 在 Git 和 GitHub 上面你还可以做一大堆事情，但我们认为，如果你想要有效地使用 Git，上面的这些知识是至少应该具备的。当你更深入地了解 Git 时，你将会意识到，当你开始使用更加复杂的指令时会更容易出错。但不要担心，即使是专业的网络工程师有时都会感到困惑，并通过网络检索或 Flight rules for Git 和 Dangit, git! 这样的网站来寻找答案。
      
+
      备注： 在 Git 和 GitHub 上面你还可以做一大堆事情，但我们认为，如果你想要有效地使用 Git，上面的这些知识是至少应该具备的。当你更深入地了解 Git 时，你将会意识到，当你开始使用更加复杂的指令时会更容易出错。但不要担心，即使是专业的网络工程师有时都会感到困惑，并通过网络检索或 Flight rules for Git 和 Dangit, git! 这样的网站来寻找答案。
      
 
      
 
 
      还可以看看
      
diff --git a/files/zh-cn/learn/tools_and_testing/index.html b/files/zh-cn/learn/tools_and_testing/index.html
index 117c5fde576ad1..580397c1814073 100644
--- a/files/zh-cn/learn/tools_and_testing/index.html
+++ b/files/zh-cn/learn/tools_and_testing/index.html
@@ -20,7 +20,7 @@
 
      找出你应该用什么样的工具是个困难的过程，所以我们这系列文章来告诉你哪些工具是可用的，它们能为你做什么，和如何利用行业的热门工具。
      
 
 
      
-
      提示：因为一直以来都是新的工具出现伴随着旧的工具过时，所以我们有意将材料写得尽可能地中立—我们想优先关注那些能够帮你完成通用类型任务的工具，而不是一些特殊工具。我们显然需要展示某些工具的用途来演示特殊的技术，但是要清楚我们并不是把它们作为最好的或者唯一的工具进行推荐—大多数情况下有很多其他的方式可以备选，我们只是想提供给你一个清晰的可用的方法。
      
+
      备注： 因为一直以来都是新的工具出现伴随着旧的工具过时，所以我们有意将材料写得尽可能地中立—我们想优先关注那些能够帮你完成通用类型任务的工具，而不是一些特殊工具。我们显然需要展示某些工具的用途来演示特殊的技术，但是要清楚我们并不是把它们作为最好的或者唯一的工具进行推荐—大多数情况下有很多其他的方式可以备选，我们只是想提供给你一个清晰的可用的方法。
      
 
      
 
 
      学习途径
      
diff --git a/files/zh-cn/learn/tools_and_testing/understanding_client-side_tools/command_line/index.html b/files/zh-cn/learn/tools_and_testing/understanding_client-side_tools/command_line/index.html
index 19f8142bf373ee..ccad060802ace9 100644
--- a/files/zh-cn/learn/tools_and_testing/understanding_client-side_tools/command_line/index.html
+++ b/files/zh-cn/learn/tools_and_testing/understanding_client-side_tools/command_line/index.html
@@ -37,77 +37,29 @@ 
      欢迎使用终端
      
 
 
      大量的工具可以通过在命令行中输入命令来使用;许多是预先安装在您的系统上的，还有大量其他的可以从包注册表中安装。包注册表类似于应用程序商店，但 (主要) 用于基于命令行的工具和软件。我们将在本章后面看到如何安装一些工具，在下一章我们将学习更多关于包注册表的知识。
      
 
-
      
-
      
-
      
 
      对命令行最大的一个批评是它在用户体验方面非常缺乏。第一次查看命令行可能是一种令人畏惧的体验：空白屏幕和闪烁的光标，对于要做什么几乎没有明显的帮助。
      
-
      
-
      
-
      
 
-
      
-
      
-
      
 
      表面上看，它们并不受欢迎，但您可以使用它们做很多事情，我们保证，通过一些指导和练习，使用它们会变得更容易！这就是为什么我们提供这一章来帮助你在这个看似不友好的环境中开始。
      
-
      
-
      
-
      
 
 
      终端从何而来？
      
 
-
      
-
      
-
      
 
      终端机起源于 20 世纪五六十年代，它最初的形式与我们今天使用的并不相似 (这是我们应该感谢的)。你可以在维基百科的词条中读到一些历史 Computer Terminal。
      
-
      
-
      
-
      
 
-
      
-
      
-
      
 
      从那时起，终端一直是所有操作系统的一个不变的特征，从台式电脑到隐藏在云中的服务器 (它并不是真正的云)，到像树莓 PI Zero 这样的微型计算机，甚至到移动电话。它提供了对计算机底层文件系统和底层特性的直接访问，因此，如果您知道自己在做什么，它对于快速执行复杂任务非常有用。
      
-
      
-
      
-
      
 
-
      
-
      
-
      
 
      例如，编写一个命令来立即更新数百个文件的标题，例如从 ch01-xxxx.png 更新到 ch02-xxxx.png，这对于自动化也很有用。如果您使用 finder 或 explorer GUI 应用程序更新文件名，这将花费您很长时间。
      
-
      
-
      
-
      
 
 
      总而言之，终端不会很快消失。
      
 
 
      终端像什么呢？
      
 
-
      
-
      
-
      
 
      下面你可以看到一些不同口味的程序，你可以得到一个终端。
      
-
      
-
      
-
      
 
-
      
-
      
-
      
 
      下面的图片显示了 Windows 中可用的命令提示，有很多种选项，从“cmd”程序到“powershell”，可以在开始菜单中输入程序名称运行。
      
-
      
-
      
-
      
 
 
      A vanilla windows cmd line window, and a windows powershell window
      
 
-
      
-
      
-
      
 
      下面是 macOS 终端应用程序。
      
-
      
-
      
-
      
 
 
      A basic vanilla mac terminal
      
 
@@ -121,129 +73,47 @@ 
      Linux/Unix
      
 
 
      macOS
      
 
-
      
-
      
-
      
 
      macOS 有一个名为 Darwin 的系统，它位于图形用户界面的下方。Darwin 是类 unix 系统，它提供了终端和对底层工具的访问。macOS Darwin 在很大程度上与 Unix 不相上下，当然在阅读本文时不会给我们带来任何担忧。
      
-
      
-
      
-
      
 
-
      终端可在 macOS 的“应用程序/实用程序/终端”上使用。
      
+
      终端可在 macOS 的“应用程序/实用程序/终端”上使用。
      
 
 
      Windows
      
 
-
      
-
      
-
      
 
      与其他一些编程工具一样，在 Windows 上使用终端 (或命令行) 传统上并不像在其他操作系统上那样简单。但情况正在好转。
      
-
      
-
      
-
      
 
-
      
-
      
-
      
 
      很长一段时间以来，Windows 一直有自己的名为 cmd(命令提示符) 的类似于终端的程序，但这显然与 Unix 命令不同，它相当于老式的 Windows DOS 提示符。
      
-
      
-
      
-
      
 
-
      
-
-
      
 
-
      
-
      
-
      
 
      然而，在现代，Windows 的最佳选择是 Windows Linux 子系统 (WSL)，它是一个兼容层，用于从 Windows 10 中直接运行 Linux 操作系统，允许您直接在 Windows 上运行真正的终端，而不需要虚拟机。
      
-
      
-
      
-
      
 
-
      
-
-
      
 
 
      a screenshot of the windows subsystem for linux documentation
      
 
-
      
-
      
-
      
 
      至于在 Windows 上选择什么选项，我们强烈建议尝试安装 WSL。您可以坚持使用默认的命令提示符 (cmd)，许多工具都可以正常工作，但是您会发现，如果与 Unix 工具具有更好的一致性，那么一切都会变得更容易。
      
-
      
-
      
-
      
 
 
      边注：命令行和终端的区别是什么？
      
 
-
      
-
      
-
      
 
      通常你会发现这两个术语可以互换使用。从技术上讲，终端是启动并连接到 shell 的软件。shell 是您的会话和会话环境 (提示符和快捷方式等内容可以在其中定制)。命令行是您输入命令并且光标闪烁的文字行。
      
-
      
-
      
-
      
 
 
      你必须使用终端吗
      
 
-
      
-
      
-
      
 
      尽管命令行提供了大量的工具，但是如果您使用的工具是这样像 Visual Studio Code
      
 
-
      
-
      
-
      
 
      还有大量的扩展可以作为代理使用终端命令，而不需要直接使用终端。但是，您不会找到一个代码编辑器扩展来满足您想要做的所有事情 — 你最终将会获得一些使用终端的经验。
      
-
      
-
      
-
      
-
      
-
      
-
      
 
 
      基本的内置终端命令
      
 
-
      
-
      
-
      
-
      
-
      
 
      说的够多了，让我们开始看看一些终端命令吧！下面是命令行可以做的一些事情，以及每种情况下相关工具的名称
      
-
      
-
      
-
      
-
      
-
      
 
 
        
  
      • 
-  
        
-  
        
-  
        
   
        导航计算机的文件系统以及基本级别的任务，如创建、复制、重命名和删除：
        
-  
        
-  
        
-  
        
 
   
          
    
        • 
-    
          
-    
          
-    
          
     
          移动您的目录结构 : cd
          
-    
          
-    
          
-    
          
    
          • 
    
        • 建立目录：mkdir
          • 
    
        • 创建文件（修改他们的原数据）: touch
          • 
@@ -259,150 +129,64 @@ 
          基本的内置终端命令
          
 
        
 
 
        
-
        注意：在 web 上有许多很好的教程深入了解 web 上的命令行——这只是一个简短的介绍
        
+
        备注： 在 web 上有许多很好的教程深入了解 web 上的命令行——这只是一个简短的介绍
        
 
        
 
-
        
-
        
-
        
 
        让我们继续，看看在命令行上使用这些工具中的几个。在进一步操作之前，先打开终端程序
        
-
        
-
        
-
        
 
 
        在命令行中导航
        
 
-
        
-
        
-
        
 
        当您访问命令行时，您将不可避免地需要导航到一个特定的目录“做一些事情”。所有的操作系统 (假设是默认设置) 都将在您的“home”目录中启动它们的终端程序，从那里您可能想要移动到另一个地方。
        
-
        
-
        
-
        
 
 
         cd 命令允许您更改目录。从技术上讲，cd 不是一个程序，而是内置的。这意味着您的操作系统可以开箱即用地提供它，而且您也不会意外地删除它，感谢上帝！您不需要过多地担心某个命令是否是内置的，但是要记住，内置的命令会在所有基于 unix 的系统上出现。
        
 
-
        
-
        
-
        
 
        要更改目录，请在终端中键入 cd，然后输入要移动到的目录。假设该目录在您的主目录中，您可以使用 cd Desktop (请参见下面的屏幕截图).
        
-
        
-
        
-
        
 
 
        results of the cd Desktop command being run in a variety of windows terminals - the terminal location moves into the desktop
        
 
-
        
-
        
-
        
 
        试着把这个输入到你的系统终端
        
-
        
-
        
-
        
 
 
        cd Desktop
        
 
-
        
-
        
-
        
 
        如果您想回到上一个目录，您可以使用两个点
        
-
        
-
        
-
        
 
 
        cd ..
        
 
 
        
-
        
-
        
-
        
-
        注意:一个非常有用的终端快捷方式是使用tab 键自动完成你知道的名字，而不是必须键入整个东西。例如，在键入以上两个命令后，尝试键入 cd D 并按下tab — 它应该自动完成目录名称 Desktop 对于您，只要它存在于当前目录中。在你前进的过程中记住这一点。
        
-
        
-
        
-
        
+
        备注： 一个非常有用的终端快捷方式是使用tab 键自动完成你知道的名字，而不是必须键入整个东西。例如，在键入以上两个命令后，尝试键入 cd D 并按下tab — 它应该自动完成目录名称 Desktop 对于您，只要它存在于当前目录中。在你前进的过程中记住这一点。
        
 
        
 
 
        如果要转到的目录嵌套得很深，则需要知道访问该目录的路径。当您更加熟悉文件系统的结构时，这通常会变得更容易，但是如果您不确定路径，通常可以使用 ls 命令（请参见下文）的组合并在其中单击来确定它的路径。 “资源管理器/查找器”窗口可查看目录相对于当前位置的位置。
        
 
-
        
-
        
-
        
 
        例如，如果您想进入一个名为 src 的目录，该目录位于桌面的一个名为 project 的目录中，您可以从您的主文件夹键入这三个命令来到达该目录
        
-
        
-
        
-
        
 
 
        cd Desktop
 cd project
 cd src
        
 
-
        
-
        
-
        
 
        但这只是浪费时间，相反，您可以键入一个命令，用斜杠分隔路径中的不同项，就像在 CSS、HTML 或 JavaScript 代码中指定图像或其他资产的路径一样
        
-
        
-
        
-
        
 
 
        cd Desktop/project/src
        
 
-
        
-
        
-
        
 
        例如，请注意，在路径上包含一个前斜线将使路径成为绝对路径 /Users/your-user-name/Desktop. 像我们上面做的那样，省略前导斜杠可以使路径相对于当前的工作目录。这与您在 web 浏览器中看到的 url 完全相同。前面的斜杠意味着“在网站的根”，而省略斜杠意味着“这个 URL 是相对于我当前页面的”。
        
 
-
        
-
        
-
        
-
        
-
 
        
-
        
-
        
-
        
-
        注意:在 windows 中，你使用反斜杠而不是正斜杠。cd Desktop\project\src — 他的可能看起来很奇怪，但是如果你感兴趣的话，watch this YouTube clip 微软的一位主要工程师对此进行了解释。
        
-
        
-
        
-
        
+
        备注： 在 windows 中，你使用反斜杠而不是正斜杠。cd Desktop\project\src — 他的可能看起来很奇怪，但是如果你感兴趣的话，watch this YouTube clip 微软的一位主要工程师对此进行了解释。
        
 
        
 
 
        列出目录内容
        
 
-
        
-
        
-
        
 
        另一个内置的 Unix 命令是 ls (list 的缩写)，它列出当前所在目录的内容。注意，这不会工作，如果你使用默认的 Windows 命令提示符 (cmd)，相当于 dir。
        
-
        
-
        
-
        
 
-
        
-
        
-
        
 
        现在试着在终端上运行它
        
-
        
-
        
-
        
 
 
        ls
        
 
-
        
-
        
-
        
 
        这提供了当前工作目录中的文件和目录的列表，但这些信息实际上很基本，您只能得到每个项的名称，而不能知道它是文件还是目录，或者其他任何东西。幸运的是，对命令的用法进行一个小小的更改就可以提供更多的信息。
        
-
        
-
        
-
        
 
 
        介绍命令选项
        
 
-
        
-
        
-
        
 
        大多数终端命令都有选项，这些选项是您添加到命令末尾的修饰符，它们使命令的行为略有不同。它们通常由命令名后的空格、后接破折号、后接一个或多个字母组成。
        
-
        
-
        
-
        
 
 
        例如，试一试看，你能得到什么？
        
 
@@ -410,218 +194,91 @@ 
        介绍命令选项
        
 
 
        至于 ls, the -l 选项为您提供每行一个文件或目录的清单，并显示更多信息。可以通过查找行最左边的字母“d”来识别目录。这些是我们可以做到的 cd 进入。
        
 
-
        
-
        
-
        
 
        下面是一个屏幕截图，顶部是一个普通的 macOS 终端，还有一个定制的终端，添加了一些额外的图标和颜色，让它看起来生动，都显示了运行的结果ls -l:
        
-
        
-
        
-
        
 
 
        A vanilla mac terminal and a more colorful custom mac terminal, showing a file listing - the result of running the ls -l command
        
 
 
        
-
        
-
        
-
        
-
        注意:要确切地了解每个命令有哪些可用选项，您可以查看它man page. 通过键入 man 命令，后跟要查找的命令的名称，例如man ls. 这将在终端的默认文本文件查看器中打开手册页 (例如，less(在我的终端中)，然后您应该能够使用箭头键或其他类似的机制在页面中滚动。手册页详细地列出了所有选项，一开始可能有点吓人，但至少在需要时您知道它就在那里。一旦您完成了对手册页的查看，您需要使用文本查看器的 quit 命令退出它 ("q" 在 less;如果不明显，你可能需要在网上搜索才能找到).
        
-
        
-
        
-
        
+
        备注： 要确切地了解每个命令有哪些可用选项，您可以查看它man page. 通过键入 man 命令，后跟要查找的命令的名称，例如man ls. 这将在终端的默认文本文件查看器中打开手册页 (例如，less(在我的终端中)，然后您应该能够使用箭头键或其他类似的机制在页面中滚动。手册页详细地列出了所有选项，一开始可能有点吓人，但至少在需要时您知道它就在那里。一旦您完成了对手册页的查看，您需要使用文本查看器的 quit 命令退出它 ("q" 在 less;如果不明显，你可能需要在网上搜索才能找到).
        
 
        
 
 
        
-
        注意:
        
-
-
        
-
        
-
        
-
        要同时运行具有多个选项的命令，通常可以将它们全部放在破折号后面的单个字符串中ls -lah, 或ls -ltrh.尝试在 ls 了解这些额外选项的作用
        
-
        
-
        
-
        
+
        备注： 要同时运行具有多个选项的命令，通常可以将它们全部放在破折号后面的单个字符串中ls -lah, 或ls -ltrh.尝试在 ls 了解这些额外选项的作用
        
 
        
 
-
        
-
        
-
        
 
        既然我们已经讨论了两个基本命令，那么稍微浏览一下您的目录，看看是否可以从一个位置导航到下一个位置。
        
-
        
-
        
-
        
 
 
        创建，复制，移动，删除
        
 
-
        
-
        
-
        
 
        在使用终端时，您可能会经常使用其他一些基本实用程序命令。它们非常简单，所以我们不会像前一对那样详细地解释它们。
        
-
        
-
        
-
        
-
-
        
 
-
        
-
        
-
        
 
        在您创建的某个地方的测试目录中使用它们，这样您就不会意外地删除任何重要的内容，使用下面的示例命令作为指导
        
-
        
-
        
-
        
-
-
        
 
 
          
  
        • mkdir —这将在您所在的当前目录中创建一个新目录，名称是您在命令名之后提供的。例如mkdir my-awesome-website将创建一个新目录叫my-awesome-website.
          • 
  
        • rmdir —删除指定目录，但仅当它为空时。例如rmdir my-awesome-website
-  
          
-  
          
-  
          
   
          将删除我们在上面创建的目录。如果您希望删除一个非空的目录 (并删除其中包含的所有内容)，则可以使用-r 选项（递归），但这很危险。确保以后在目录中不需要任何内容​​，因为它将永远消失。
          
-  
          
-  
          
-  
          
  
          • 
  
        • touch —在当前目录中创建一个新的空文件。例如touch mdn-example.md 创建一个新的空文件叫做 mdn-example.md.
          • 
  
        • mv —
-  
          
-  
          
-  
          
   
          例如，将文件从第一个指定的文件位置移动到第二个指定的文件位置mdn-example.md mdn-example.txt(这些位置被写成文件路径)。此命令移动一个名为mdn-example.md在当前目录中调用一个文件mdn-example.txt in the current directory.从技术上讲，文件正在被移动，但是从实际的角度来看，这个命令实际上是在重命名文件。
          
-  
          
-  
          
-  
          
  
          • 
  
        • cp — 类似于 mv, cp在指定的第一个位置和第二个位置创建文件的副本。例如
-  
          , cp mdn-example.txt mdn-example.txt.bak创建一个副本mdn-example.txt 叫做 mdn-example.txt.bak（当然，如果你愿意，你也可以叫它别的名字)。
          
+  cp mdn-example.txt mdn-example.txt.bak创建一个副本mdn-example.txt 叫做 mdn-example.txt.bak（当然，如果你愿意，你也可以叫它别的名字)。
  
          • 
  
        • rm —删除指定的文件。例如，rm mdn-example.txt 删除单个文件叫做 mdn-example.txt.请注意，此删除是永久性的，不能通过桌面用户界面上的回收站撤消。
          • 
 
        
 
 
        
-
        注意: 许多终端命令允许您使用星号作为“通配符”字符，意思是“任何字符序列”。这允许您一次对可能大量的文件运行操作，所有这些文件都匹配指定的模式。作为一个例子，rm mdn-* 将删除所有文件开头mdn-. rm mdn-*.bak 会删除所有文件的开头mdn- 结束 .bak.
        
+
        备注： 许多终端命令允许您使用星号作为“通配符”字符，意思是“任何字符序列”。这允许您一次对可能大量的文件运行操作，所有这些文件都匹配指定的模式。作为一个例子，rm mdn-* 将删除所有文件开头mdn-. rm mdn-*.bak 会删除所有文件的开头mdn- 结束 .bak.
        
 
        
 
 
        考虑终端有害吗？
        
 
-
        我们之前提到过这一点，但为了明确起见，您需要小心使用终端。简单的命令不会带来太多危险，但是当您开始将更复杂的命令组合在一起时，您需要仔细考虑该命令将执行什么操作，并在最终在指定的目录中运行它们之前先尝试测试它们。
        
-
-
        
-
-
        
-
        
-
        
-
        假设您在一个目录中有 1000 个文本文件，您想遍历它们，并且只删除文件名中有特定子字符串的文件。如果不小心，可能会删除一些重要的内容，在此过程中丢失大量工作。
        
-
        
-
        
-
        
+
        我们之前提到过这一点，但为了明确起见，您需要小心使用终端。简单的命令不会带来太多危险，但是当您开始将更复杂的命令组合在一起时，您需要仔细考虑该命令将执行什么操作，并在最终在指定的目录中运行它们之前先尝试测试它们。假设您在一个目录中有 1000 个文本文件，您想遍历它们，并且只删除文件名中有特定子字符串的文件。如果不小心，可能会删除一些重要的内容，在此过程中丢失大量工作。
        
 
-
        要养成的一个好习惯是在文本编辑器中编写您的 terminal 命令，弄清楚您认为它应该是什么样子，然后对目录进行备份，并首先尝试在该备份上运行命令，以测试它。
        
+
        要养成的一个好习惯是在文本编辑器中编写您的 terminal 命令，弄清楚您认为它应该是什么样子，然后对目录进行备份，并首先尝试在该备份上运行命令，以测试它。
        
 
-
        
-
        
-
        
 
        另一个好建议是，如果你不习惯在自己的机器上尝试终端命令，可以在 Glitch.com 上试试。除了是测试 web 开发代码的好地方外，这些项目还允许您访问终端，这样您就可以直接在该终端中运行所有这些命令，而且不会破坏您自己的机器。
        
-
        
-
        
-
        
 
 
        a double screenshot showing the glitch.com home page, and the glitch terminal emulator
        
 
-
        
-
        
-
        
 
        快速浏览特定终端命令的一个很好的资源是 tldr.sh. 这是一个社区驱动的文档服务，类似于 MDN，但特定于终端命令。
        
 
-
        在下一节中，让我们更进一步 (实际上是几个层次)，看看如何在命令行上将工具连接在一起，从而真正了解终端如何优于常规的桌面用户界面。
        
-
        
-
        
-
        
+
        在下一节中，让我们更进一步 (实际上是几个层次)，看看如何在命令行上将工具连接在一起，从而真正了解终端如何优于常规的桌面用户界面。
        
 
-
        与管道命令连接在一起
        
 
-
        
+
        与管道命令连接在一起
        
 
-
        
-
        
-
        
 
        当您开始使用。将命令链接在一起时，终端才真正成为自己的终端 | (pipe) 的象征。让我们看一个简单的例子来说明这意味着什么。
        
-
        
-
        
-
        
 
 
        我们已经看了 ls, 它可以输出文件目录：
        
 
 
        ls
        
 
-
        
-
        
-
        
 
        但是如果我们想要快速计算当前目录中的文件和目录的数量会怎样呢ls 不能单独运行
        
-
        
-
        
-
        
 
-
        
-
        
-
        
 
        还有另一个可用的 Unix 工具，称为wc. 它计算输入到其中的单词、行、字符或字节的数量。这可以是一个文本文件，下面的示例输出其中的行数
        
-
        
-
        
-
        
 
 
        myfile.txt:
        
 
 
        wc -l myfile.txt
        
 
-
        
-
        
-
        
 
        但是它还可以计算输入到它的输出的行数。例如，下面的命令计算 ls 命令输出的行数 (如果单独运行，它通常会打印到终端)，并计算到终端的输出
        
-
        
-
        
-
        
-
-
        
 
 
        ls | wc -l
        
 
 
        因为ls 在自己的行上打印每个文件或目录，这有效地为我们提供了目录和文件计数。
        
 
-
        
-
        
-
        
 
        这是怎么回事？(unix) 命令行工具的一般原理是，它们将文本打印到终端 (也称为“打印到标准输出”或STDOUT). 很多命令也可以从流输入 (称为“标准输入”o) 中读取内容 STDIN).
        
-
        
-
        
-
        
 
-
        
-
        
-
        
 
        管道操作符可以将这些输入和输出连接在一起，允许我们构建越来越复杂的操作，以满足我们的需要。一个命令的输出可以成为下一个命令的输入。在这种情况下，ls 通常会将其输出到STDOUT, 但是相反 ls输出被制成wc, 它将该输出作为输入，计算它包含的行数，然后将该计数输出到 STDOUT。
        
-
        
-
        
-
        
 
 
        一个稍微复杂一点的例子
        
 
-
        
-
-
        
 
-
        
-
-
        
 
 
        因此，如果您使用 curl 请求 https://developer.mozilla.org/docs/Web/API/fetch，则不会得到输出。现在就试试：
        
 
@@ -629,111 +286,51 @@ 
        一个稍微复杂一点的例子
        我们想精确的告诉 curl 遵循重定向使用-L 标签。
        
 
-
        
-
        
-
        
 
        让我们也看看标题 developer.mozilla.org 返回使用 curl's -I 标签，并打印它发送到终端的所有位置重定向，通过管道输出 curl 到grep (我们将要求 grep 返回包含单词“location”的所有行)。
        
 
 
        尝试运行以下代码，您将看到在到达最终页面之前，实际上发生了三次重定向
        
-
        
-
        
-
        
 
 
        curl https://developer.mozilla.org/docs/Web/API/fetch -L -I | grep location
        
 
-
        
-
        
-
        
 
        输出应该是这样的 (curl 首先会输出一些下载计数器之类的东西):
        
-
        
-
        
-
        
 
 
        location: /en-US/docs/Web/API/fetch
 location: /en-US/docs/Web/API/GlobalFetch/GlobalFetch.fetch()
 location: /en-US/docs/Web/API/GlobalFetch/fetch
 location: /en-US/docs/Web/API/fetch
        
 
-
        
-
        
-
        
 
        尽管有些做作，我们可以把这个结果做得更深入一点，并变换 location: 行内容，将基本的起点添加到每个起点的开始，这样我们就可以打印出完整的 url。为此，我们将在混合中添加 awk(它是一种类似于 JavaScript、Ruby 或 Python 的编程语言，只是要老得多 !)
        
-
        
-
        
-
        
 
 
        尝试运行这个：
        
 
 
        curl https://developer.mozilla.org/docs/Web/API/fetch -L -I | grep location | awk '{ print "https://developer.mozilla.org" $2 }'
        
 
-
        
-
        
-
        
 
        最终的输出应该是这样的
        
-
        
-
        
-
        
 
 
        https://developer.mozilla.org/en-US/docs/Web/API/fetch
 https://developer.mozilla.org/en-US/docs/Web/API/GlobalFetch/GlobalFetch.fetch()
 https://developer.mozilla.org/en-US/docs/Web/API/GlobalFetch/fetch
 https://developer.mozilla.org/en-US/docs/Web/API/fetch
        
 
-
        
-
        
-
        
 
        通过组合这些命令，我们定制了输出以显示完整的 url，当我们请求时，Mozilla 服务器将通过这些 url 重定向/docs/Web/API/fetch URL.了解您的系统将在未来几年证明是有用的，您将了解这些单一服务工具是如何工作的，以及它们如何成为您解决小众问题的工具库的一部分。
        
-
        
-
        
-
        
 
 
        添加工具
        
 
-
        
-
        
-
        
 
        现在我们已经了解了系统自带的一些内置命令，让我们看看如何安装和使用第三方 CLI 工具。
        
-
        
-
        
-
        
 
-
        
-
        
-
        
 
        目前，用于前端 web 开发的可安装工具的巨大生态系统主要存在于内部 npm, 与 Node.js 紧密合作的私有的包托管服务。随着时间的推移，您可以期望看到更多的包提供者。
        
-
        
-
        
-
        
 
 
        Installing Node.js 还要安装 npm 命令行工具 (以及一个以 npm 为中心的补充工具 npx)，它提供了安装其他命令行工具的网关。js 和 npm 在所有系统上都能工作:macOS、Windows 和 Linux。
        
 
-
        
-
        
-
        
 
        现在在您的系统上安装 npm，转到上面的 URL，下载并运行适合您的操作系统的 Node.js 安装程序。如果出现提示，请确保将 npm 作为安装的一部分。
        
-
        
-
        
-
        
 
 
        the node.js installer on windows, showing the option to include npm
        
 
-
        
-
        
-
        
 
        尽管我们将在下一篇文章中讨论许多不同的工具，但我们将继续深入研究 Prettier. Prettier 是一种固执己见的代码格式化程序，它只有“很少的选择”。更少的选择往往意味着更简单。考虑到工具在复杂性方面有时会失控，“很少的选项”可能非常有吸引力。
        
-
        
-
        
-
        
 
 
        在哪里下载我们的 CLI 工具？
        
 
-
        
-
        
-
        
 
        在开始安装 Prettier 之前，有一个问题需要回答：“我们应该安装到哪里？”
        
-
        
-
        
-
        
 
 
        用npm 我们可以选择在全局安装工具，因此我们可以在任何地方或本地访问当前项目目录。
        
 
@@ -743,11 +340,7 @@ 
        在哪里下载我们的 CLI 工
  
   
    
-    
        
-    
        
     
        全局安装的优点
        
-    
        
-    
        
    
    全局安装的缺点
   
@@ -755,143 +348,69 @@ 
        在哪里下载我们的 CLI 工
  
   
    
-    
        
-    
        
     
        任何地方在您的终端
        
-    
        
-    
        
    
    可能与您项目的代码库不兼容
   
   
    只下载一次
    
-    
        
-    
        
-    
        
     
        您团队中的其他开发人员无法使用这些工具，例如，如果您通过 git 这样的工具共享代码仓库。
        
-    
        
-    
        
-    
        
    
   
   
    
-    
        
-    
        
     
        使用较少的磁盘空间
        
-    
        
-    
        
    
    
-    
        
-    
        
-    
        
-    
        与前一点相关的是，它使得项目代码更难复制 (如果您在本地安装工具，可以将它们设置为依赖项并使用 npm 进行安装 (npm install).
        
-    
        
-    
        
-    
        
+    
        与前一点相关的是，它使得项目代码更难复制 (如果您在本地安装工具，可以将它们设置为依赖项并使用 npm 进行安装 (npm install).
        
    
   
   
    
-    
        
-    
        
-    
        
     
        总是相同的版本
        
-    
        
-    
        
-    
        
    
    
   
   
    
-    
        
-    
        
-    
        
     
        就像任何其他 unix 命令
        
-    
        
-    
        
-    
        
    
    
   
  
 
 
-
        
-
        
-
        
 
        尽管缺点清单比较短，但是全局安装的负面影响可能要比好处大得多。然而，现在我们宁可追求简单，而采用全局安装来保持简单。在下一篇文章中，我们将进一步了解本地安装以及它们的优点。
        
-
        
-
        
-
        
 
 
        下载 Prettier
        
 
-
        
-
        
-
        
 
        对于本文，我们将安装 Prettier 作为全局命令行实用程序。
        
-
        
-
        
-
        
 
-
        
-
        
-
        
 
        Prettier 是一款专门为前端开发人员设计的代码格式化工具，专注于基于 javascript 的语言，并增加了对 HTML、CSS、SCSS、JSON 等的支持。Prettier 能够：
        
-
        
-
        
-
        
 
 
          
  
        • 
-  
          省去了在所有代码文件中手动保持样式一致的认知开销;Prettier 可以自动为您完成此操作。
          
+  
          省去了在所有代码文件中手动保持样式一致的认知开销;Prettier 可以自动为您完成此操作。
          
  
          • 
  
        • 帮助 Web 新手以最佳方式完成他们的代码。
          • 
  
        • 安装在任何操作系统上，甚至直接作为项目工具的一部分，以确保从事您的代码工作的同事和朋友使用您正在使用的代码风格。
          • 
  
        • 
-  
          
-  
          
-  
          
   
          配置为在保存时运行、在键入时运行，甚至在发布代码之前运行 (使用稍后将在模块中看到的其他工具）。
          
-  
          
-  
          
-  
          
  
          • 
 
        
 
-
        
-
        
-
        
 
        安装 node 之后，打开终端并运行以下命令来安装 prettier 程序：
        
-
        
-
        
-
        
 
 
        npm install --global prettier
        
 
 
        命令运行完成后，Prettier 工具现在可以在终端中的文件系统中的任何位置使用。
        
 
-
        
-
        
-
        
 
        与许多其他命令一样，不带任何参数运行该命令将提供用法和帮助信息。现在试试这个
        
-
        
-
        
-
        
 
 
        prettier
        
 
-
        
-
        
-
        
 
        输出应该是这样的
        
-
        
-
        
-
        
 
 
        Usage: prettier [options] [file/dir/glob ...]
 
@@ -900,78 +419,34 @@ 
        下载 Prettier
        
 
 …
        
 
-
        
-
        
-
        
 
        即使它很长，至少浏览一下使用信息也是值得的。它将帮助您更好地理解如何使用该工具。
        
-
        
-
        
-
        
 
 
        尝试 Prettier
        
 
-
        
-
        
-
        
 
        让我们快速演示一下 Prettier，这样您就可以看到它是如何工作的。
        
-
        
-
        
-
        
 
-
        
-
-
        
-
        
-
        
 
        首先，在文件系统中容易找到的地方创建一个新目录。可能是一个叫做prettier-test 在你的 Desktop.
        
 
 
        现在将以下代码保存在一个名为index.js, 在测试目录中：
        
-
        
-
        
-
        
 
 
        const myObj = {
 a:1,b:{c:2}}
 function printMe(obj){console.log(obj.b.c)}
 printMe(myObj)
        
 
-
        
-
        
-
        
 
        我们可以在代码基上运行得更好，以检查我们的代码是否需要调整。cd 到您的目录中，并尝试运行此命令：
        
-
        
-
        
-
        
 
 
        prettier --check index.js
        
 
-
        
-
        
-
        
 
        你的产出应该是：
        
-
        
-
        
-
        
 
 
        Checking formatting...
 index.js
 Code style issues found in the above file(s). Forgot to run Prettier?
        
 
-
        
-
        
-
        
 
        有些代码样式是可以修改的。没有问题。添加 --write option to the prettier 命令将修复这些问题，让我们专注于实际编写有用的代码。
        
-
        
-
        
-
        
 
-
        
-
        
-
        
 
        现在尝试运行这个版本的命令：
        
-
        
-
        
-
        
 
 
        prettier --write index.js
        
 
@@ -981,13 +456,7 @@ 
        尝试 Prettier
        
 index.js
 Code style issues fixed in the above file(s).
      
 
-
      
-
      
-
      
 
      但更重要的是，如果你回头看你的 JavaScript 文件，你会发现它被重新格式化成这样：
      
-
      
-
      
-
      
 
 
      const myObj = {
   a: 1,
@@ -998,71 +467,27 @@ 
      尝试 Prettier
      
 }
 printMe(myObj);
      
 
-
      
-
      
-
      
 
      根据您的工作流 (或您选择的工作流)，您可以将其作为流程的自动化部分。自动化确实是工具的优势所在;我们的个人偏好是那种无需配置任何东西就能“自动发生”的自动化。
      
-
      
-
      
-
      
 
-
      
-
      
-
      
 
      使用 Prettier 有许多实现自动化的方法，尽管它们超出了本文的范围，但是有一些很好的在线资源可以提供帮助 (已经链接到其中一些)。您可以调用更漂亮的：
      
-
      
-
      
-
      
 
 
        
  
      • 
-  
        
-  
        
-  
        
   
        在将代码提交到 git 存储库之前，使用Husky.
        
-  
        
-  
        
-  
        
  
        • 
  
      • 
-  
        
-  
-  
        
  
        • 
  
      • 
-  
        
-  
        
-  
        
   
        作为持续集成检查的一部分，可以使用以下工具Github Actions.
        
-  
        
-  
        
-  
        
  
        • 
 
      
 
-
      
-
      
-
      
 
      我们个人的偏好是第二个当使用 say VS 代码时，Prettier 会启动并清理每次我们点击保存时需要做的格式化。关于以不同方式使用 Prettier，您可以在 Prettier docs.
      
-
      
-
      
-
      
 
 
      尝试其他的工具
      
 
-
      
-
      
-
      
 
      如果你想尝试更多的工具，这里有一个简短的列表，很有趣的尝试：
      
-
      
-
      
-
      
-
-
      
 
 
        
  
      • bat — 一个更好的 cat (cat 用于打印文件内容）。
        • 
@@ -1071,13 +496,7 @@ 
        尝试其他的工具
        
  
      • tldr —在本章前面提到的，但是可以作为命令行工具使用。
        • 
 
      
 
-
      
-
      
-
      
 
      注意，上面的一些建议可能需要使用 npm 进行安装，就像我们使用 Prettier 所做的那样。
      
-
      
-
      
-
      
 
 
      总结
      
 
diff --git a/files/zh-cn/learn/tools_and_testing/understanding_client-side_tools/overview/index.html b/files/zh-cn/learn/tools_and_testing/understanding_client-side_tools/overview/index.html
index 4b4ffe6582967f..015d012e12bae0 100644
--- a/files/zh-cn/learn/tools_and_testing/understanding_client-side_tools/overview/index.html
+++ b/files/zh-cn/learn/tools_and_testing/understanding_client-side_tools/overview/index.html
@@ -18,13 +18,7 @@
   
    目标
    
-    
      
-    
      
-    
      
     
      了解有什么类型的客户端工具，以及如何找到工具并获得这些工具的帮助。
      
-    
      
-    
      
-    
      
    
   
  
@@ -38,15 +32,7 @@ 
      现代工具概述
      
 
 
      单个项目中包含的大量工具很容易让人不知所措。同样，像 Webpack 这样的工具的一个配置文件可能有数百行之长，其中大多数都是神奇的咒语，似乎可以完成工作，但只有大神级工程师才能完全理解
      
 
-
      
-
      
-
      
 
      有时，即使是最有经验的 web 开发人员也会因为工具问题而陷入困境;甚至在接触到一行应用程序代码之前，都可能浪费数小时来尝试让工具管道工作。如果你发现自己在过去挣扎，那么用担心，你并不孤独。
      
-
      
-
      
-
      
-
-
      
 
 
      在这篇文章中，我们将不会回答所有关于 web 工具的所有问题，但我们将为您提供一个了解基本原理的有用起点，你可以从中构建。对于任何复杂的主题，最好从小处开始，然后逐步进行更高级的使用。
      
 
@@ -56,13 +42,7 @@ 
      现代工具系统
      
 
 
      虽然您选择的代码编辑器肯定是一种工具选择，但本系列文章将不止于此，重点关注帮助您更有效地生成 web 代码的开发人员工具。
      
 
-
      
-
      
-
      
 
      从高层次来看，您可以将客户端工具放入以下三大类需要解决的问题中：
      
-
      
-
      
-
      
 
 
        
  
      • 安全网络 — 在代码开发期间有用的工具。
        • 
@@ -70,35 +50,17 @@ 
        现代工具系统
        
  
      • 开发后阶段 — 编写完代码后有用的工具，如测试和部署工具。
        • 
 
      
 
-
      
-
      
-
      
 
      让我们更详细地看看每一个。
      
-
      
-
      
-
      
 
 
      安全网络
      
 
-
      
-
      
-
      
 
      这些工具可以使您编写的代码更好一些。
      
-
      
-
      
-
      
 
 
      这一部分的工具应该特定于您自己的开发环境，尽管对于公司来说，有某种策略或可用于安装的预备配置，以便所有开发人员都使用相同的流程的情况并不少见。
      
 
 
      这包括使您的开发过程更容易生成稳定可靠的代码的任何内容。安全网络工具还应该帮助您避免错误或自动纠正错误，而不必每次都从头开始构建代码。
      
 
-
      
-
      
-
      
 
      您将发现开发人员正在使用的一些非常常见的安全网络工具类型如下。
      
-
      
-
      
-
      
 
 
      Linters
      
 
@@ -106,31 +68,13 @@ 
      Linters
      
 
 
      eslint 业界标准的 JavaScript linter 是一种高度可配置的工具，用于捕获潜在的语法错误，并在代码中鼓励“最佳实践”。一些公司和项目也是这样 shared their eslint configs。
      
 
-
      
-
      
-
      
 
      您还可以找到用于其他语言的 linting 工具，比如csslint。
      
-
      
-
      
-
      
 
-
      
-
-
      
 
 
      源代码控制
      
 
-
      
-
      
-
      
 
      也称为版本控制系统 (VCS)，源代码控制对于备份工作和在团队中工作至关重要。典型的 VCS 包括拥有您要对其进行更改的代码的本地版本。然后将更改“推”到存储在某个服务器上的远程存储库中的代码的“主”版本。通常有一种方法来控制和协调对代码的“主”副本做了什么更改，以及什么时候做更改，这样开发团队就不会一直覆盖彼此的工作。
      
-
      
-
      
-
      
 
 
      Git 是现在大多数人使用的源代码控制系统。它主要通过命令行访问，但也可以通过友好的用户界面访问。使用 git 存储库中的代码，您可以将其推到自己的服务器实例中，或者使用托管的源代码控制网站，如GitHub, GitLab, or BitBucket.
      
 
@@ -144,13 +88,7 @@ 
      代码格式化
      
 
 
      打包工具
      
 
-
      
-
      
-
      
 
      这些工具让你的代码准备生产，例如，通过 tree-shaking 来确保只有实际使用的代码库的部分被放到最终的生产代码中，或“缩减”删除所有空格在生产代码中，使其尽可能小之前上传到服务器。
      
-
      
-
      
-
      
 
 
      Parcel 是一个特别好用的工具，都属于这个类别可以完成上面的任务，但也有助于资产包像 HTML, CSS 和图像文件方便的包，你可以继续部署，也为您自动添加依赖项当你试着使用它们。它甚至可以为您处理一些代码转换任务。
      
 
@@ -158,28 +96,15 @@ 
      打包工具
      
 
 
      转换
      
 
-
      
-
      
-
      
 
      web 应用程序生命周期的这个阶段通常允许您编写“未来代码”(比如最新的 CSS 或 JavaScript 特性，这些特性可能还没有得到浏览器的本地支持)，或者完全使用另一种语言编写代码，比如 TypeScript. 转换工具将为您生成与浏览器兼容的代码，以用于生产。
      
-
      
-
      
-
      
 
-
      
-
      
-
      
 
      通常 web 开发被认为是三种语言：HTML, CSS, and JavaScript, 所有这些语言都有转换工具。转换提供了两个主要好处 (还有其他好处)
      
-
      
-
      
-
      
 
 
        
  
      1. 能够使用最新的语言特性编写代码，并将其转换为可在日常设备上使用的代码。例如，您可能希望使用尖端的新语言特性来编 JavaScript，但是您的最终产品代码仍然可以在不支持这些特性的旧浏览器上工作。例如：
   
          
    
        • Babel:一个 JavaScript 编译器，允许开发人员使用最前沿的 JavaScript 编写代码，然后 Babel 将其转换为老式的 JavaScript，让更多的浏览器能够理解。开发人员也可以编写和发布plugins for Babel.
          • 
    
        • PostCSS:和 Babel 做同样的事情，但是有先进的 CSS 特性。如果没有相同的方法使用旧的 CSS 特性来做一些事情，PostCSS 将安装一个 JavaScript 填充来模拟您想要的 CSS 效果。
-    
          
    
          • 
   
        
  
        2. 
@@ -194,48 +119,20 @@ 
        转换
        
 
 
        开发后阶段
        
 
-
        
-
        
-
        
 
        开发后阶段工具可以确保您的软件能够访问 web 并继续运行。这包括部署流程、测试框架、审计工具等等。
        
-
        
-
        
-
        
 
-
        
-
        
-
        
 
        在开发过程的这个阶段，您希望与之进行最少的主动交互，这样，一旦配置完毕，它基本上是自动运行的，只有在出现错误时才弹出窗口打招呼。
        
-
        
-
        
-
        
 
 
        测试工具
        
 
-
        
-
        
-
        
 
        它们通常采用一种工具的形式，该工具将自动对您的代码运行测试，以确保在进行进一步操作之前它是正确的 (例如，当您试图将更改推送到 GitHub repo 时)。这可能包括 linting，但也包括更复杂的过程，如单元测试，在这里运行部分代码，以确保它们按照应有的方式运行。
        
-
        
-
        
-
        
 
 
 
@@ -247,136 +144,51 @@ 
        配置工具
        
 
 
        其他的
        
 
-
        
-
        
-
        
 
        在开发后期阶段，还有许多其他可用的工具类型，包括 Code Climate 对于收集代码质量度量， webhint browser extension 用于执行跨浏览器兼容性的运行时分析和其他检查，Github bots 提供更强大的 GitHub 功能，Updown 提供应用程序运行时间监控等等。
        
-
        
-
        
-
        
 
 
        工具种类的想法
        
 
-
        
-
        
-
        
 
        在开发生命周期中应用不同的工具类型当然是有顺序的，但请放心，您不必在发布一个网站时将所有这些工具都准备就绪。事实上，你不需要这些。然而，在您的过程中包括这些工具将改善您自己的开发体验，并可能提高代码的总体质量。
        
-
        
-
        
-
        
 
-
        
-
        
-
        
 
        新的开发人员工具通常需要一段时间才能适应其复杂性。Webpack 是最著名的工具之一，它以使用起来过于复杂而著称，但是在最新的主要版本中，它大力简化了常用的用法，因此所需的配置被减少到绝对最小。
        
-
        
-
        
-
        
 
-
        
-
        
-
        
 
        绝对没有银弹可以保证工具的成功，但是随着你经验的增加，你会发现适合你或者你的团队和他们的项目的工作流程。一旦过程中所有的扭结被平展，你的工具链应该是你可以忘记的东西，它应该只是工作。
        
-
        
-
        
-
        
 
 
        如何选择并寻求特殊工具的帮助
        
 
-
        
-
        
-
        
 
        大多数工具往往是独立编写和发布的，因此，尽管几乎可以肯定有可用的帮助，但它们的位置或格式永远不会相同。因此，很难找到使用工具的帮助，甚至很难选择使用什么工具。关于哪些是最好的工具的知识是有点部落式的，这意味着如果您还没有进入 web 社区，就很难确定到底应该使用哪些工具！这是我们编写本系列文章的原因之一，希望能够提供其他方法难以找到的第一步。
        
-
        
-
        
-
        
 
-
        
-
        
-
        
 
        您可能需要以下内容的组合
        
-
        
-
        
-
        
 
 
          
  
        • 
-  
          
-  
          
-  
          
   
          有经验的老师、导师、同学或有一定经验的同事以前解决过这类问题，并能提出建议。
          
-  
          
-  
          
-  
          
  
          • 
  
        • 
-  
          
-  
          
-  
          
   
          一个有用的特定地方搜索。对前端开发人员工具的一般 web 搜索通常是无用的，除非您已经知道您正在搜索的工具的名称。
          
-  
          
-  
          
-  
          
 
   
            
    
          • 
-    
            
-    
            
-    
            
     
            例如，如果您正在使用 npm 包管理器来管理依赖项，那么转到npm homepage 并搜索您正在寻找的工具的类型，例如，如果您想要日期格式化实用程序，请尝试搜索“date”，如果您想要搜索通用代码格式化程序，则尝试搜索“formatter”。请注意流行度、质量和维护分数，以及软件包最近更新的时间。还可以点击工具页面，了解每个包每月有多少下载，以及它是否有好的文档，可以用来了解它是否完成了您需要它做的事情。以这些标准为基础date-fns library 看起来是一个很好的日期格式化工具。在本模块的第 3 章中，您将看到这个工具的实际应用，并了解更多关于包管理器的信息。
            
-    
            
-    
            
-    
            
    
            • 
    
          • 如果您正在寻找将工具功能集成到代码编辑器中的插件，请查看代码编辑器的“插件/扩展名”页面 - 请参阅 Atom packages and VSCode extensions,为例。看一看首页上的特色扩展，然后再次尝试搜索你想要的扩展类型 (或者工具名称，例如在 VSCode 扩展页面上搜索“eslint”)。当你得到结果的时候，看看这个扩展有多少颗星或者下载了多少，作为它质量的一个指标。
-    
            
    
            • 
   
          
  
          • 
  
        • 
-  
          
-  
-  
          
  
          • 
 
        
 
-
        
-
        
-
        
 
        当您选择要使用的工具时，第一个端口应该是工具项目主页。这可能是一个完整的网站，也可能是代码库中的一个 readme 文档。例如 date-fns docs就很好、很完整、很容易理解。然而，有些文档可能相当技术性和学术性，并不适合您的学习需求。
        
-
        
-
        
-
        
 
-
        
-
        
-
        
 
        相反，您可能希望找到一些关于如何开始使用特定类型的工具的专门教程。好的起点是搜索网站喜欢CSS Tricks, Dev, freeCodeCamp, and Smashing Magazine, 因为它们是为 web 开发行业量身定做的。
        
-
        
-
        
-
        
 
-
        
-
        
-
        
 
        同样，在搜索适合自己的工具时，您可能会使用几种不同的工具，试用它们，看看它们是否有意义，是否得到良好的支持，并执行您希望它们执行的任务。这很好，这对学习很有好处，而且随着你获得更多经验，道路会变得更平坦。
        
-
        
-
        
-
        
 
 
        总结
        
 
-
        
-
        
-
        
 
        以上是我们对客户端 web 工具主题的简要介绍的最后一部分。接下来，我们将为您提供一个关于命令行的速成课程，许多工具都是从命令行调用的。我们将看一看命令行可以做什么，然后尝试安装和使用我们的第一个工具。
        
-
        
-
        
-
        
 
 
        {{NextMenu("Learn/Tools_and_testing/Understanding_client-side_tools/Command_line", "Learn/Tools_and_testing/Understanding_client-side_tools")}}
        
 

From d9bfc4f9396f353ad56cd590182aa92b495a8ff3 Mon Sep 17 00:00:00 2001
From: allo 
Date: Wed, 27 Jul 2022 14:52:03 +0800
Subject: [PATCH 2/3] move to .md for tools_and_testing

---
 .../client-side_javascript_frameworks/{index.html => index.md}    | 0
 .../main_features/{index.html => index.md}                        | 0
 .../react_components/{index.html => index.md}                     | 0
 .../react_getting_started/{index.html => index.md}                | 0
 .../vue_first_component/{index.html => index.md}                  | 0
 .../vue_getting_started/{index.html => index.md}                  | 0
 .../vue_methods_events_models/{index.html => index.md}            | 0
 .../vue_rendering_lists/{index.html => index.md}                  | 0
 .../vue_resources/{index.html => index.md}                        | 0
 .../vue_styling/{index.html => index.md}                          | 0
 .../cross_browser_testing/accessibility/{index.html => index.md}  | 0
 .../automated_testing/{index.html => index.md}                    | 0
 .../feature_detection/{index.html => index.md}                    | 0
 .../cross_browser_testing/html_and_css/{index.html => index.md}   | 0
 .../cross_browser_testing/{index.html => index.md}                | 0
 .../cross_browser_testing/introduction/{index.html => index.md}   | 0
 .../cross_browser_testing/javascript/{index.html => index.md}     | 0
 .../testing_strategies/{index.html => index.md}                   | 0
 .../your_own_automation_environment/{index.html => index.md}      | 0
 .../zh-cn/learn/tools_and_testing/github/{index.html => index.md} | 0
 files/zh-cn/learn/tools_and_testing/{index.html => index.md}      | 0
 .../command_line/{index.html => index.md}                         | 0
 .../understanding_client-side_tools/{index.html => index.md}      | 0
 .../overview/{index.html => index.md}                             | 0
 24 files changed, 0 insertions(+), 0 deletions(-)
 rename files/zh-cn/learn/tools_and_testing/client-side_javascript_frameworks/{index.html => index.md} (100%)
 rename files/zh-cn/learn/tools_and_testing/client-side_javascript_frameworks/main_features/{index.html => index.md} (100%)
 rename files/zh-cn/learn/tools_and_testing/client-side_javascript_frameworks/react_components/{index.html => index.md} (100%)
 rename files/zh-cn/learn/tools_and_testing/client-side_javascript_frameworks/react_getting_started/{index.html => index.md} (100%)
 rename files/zh-cn/learn/tools_and_testing/client-side_javascript_frameworks/vue_first_component/{index.html => index.md} (100%)
 rename files/zh-cn/learn/tools_and_testing/client-side_javascript_frameworks/vue_getting_started/{index.html => index.md} (100%)
 rename files/zh-cn/learn/tools_and_testing/client-side_javascript_frameworks/vue_methods_events_models/{index.html => index.md} (100%)
 rename files/zh-cn/learn/tools_and_testing/client-side_javascript_frameworks/vue_rendering_lists/{index.html => index.md} (100%)
 rename files/zh-cn/learn/tools_and_testing/client-side_javascript_frameworks/vue_resources/{index.html => index.md} (100%)
 rename files/zh-cn/learn/tools_and_testing/client-side_javascript_frameworks/vue_styling/{index.html => index.md} (100%)
 rename files/zh-cn/learn/tools_and_testing/cross_browser_testing/accessibility/{index.html => index.md} (100%)
 rename files/zh-cn/learn/tools_and_testing/cross_browser_testing/automated_testing/{index.html => index.md} (100%)
 rename files/zh-cn/learn/tools_and_testing/cross_browser_testing/feature_detection/{index.html => index.md} (100%)
 rename files/zh-cn/learn/tools_and_testing/cross_browser_testing/html_and_css/{index.html => index.md} (100%)
 rename files/zh-cn/learn/tools_and_testing/cross_browser_testing/{index.html => index.md} (100%)
 rename files/zh-cn/learn/tools_and_testing/cross_browser_testing/introduction/{index.html => index.md} (100%)
 rename files/zh-cn/learn/tools_and_testing/cross_browser_testing/javascript/{index.html => index.md} (100%)
 rename files/zh-cn/learn/tools_and_testing/cross_browser_testing/testing_strategies/{index.html => index.md} (100%)
 rename files/zh-cn/learn/tools_and_testing/cross_browser_testing/your_own_automation_environment/{index.html => index.md} (100%)
 rename files/zh-cn/learn/tools_and_testing/github/{index.html => index.md} (100%)
 rename files/zh-cn/learn/tools_and_testing/{index.html => index.md} (100%)
 rename files/zh-cn/learn/tools_and_testing/understanding_client-side_tools/command_line/{index.html => index.md} (100%)
 rename files/zh-cn/learn/tools_and_testing/understanding_client-side_tools/{index.html => index.md} (100%)
 rename files/zh-cn/learn/tools_and_testing/understanding_client-side_tools/overview/{index.html => index.md} (100%)

diff --git a/files/zh-cn/learn/tools_and_testing/client-side_javascript_frameworks/index.html b/files/zh-cn/learn/tools_and_testing/client-side_javascript_frameworks/index.md
similarity index 100%
rename from files/zh-cn/learn/tools_and_testing/client-side_javascript_frameworks/index.html
rename to files/zh-cn/learn/tools_and_testing/client-side_javascript_frameworks/index.md
diff --git a/files/zh-cn/learn/tools_and_testing/client-side_javascript_frameworks/main_features/index.html b/files/zh-cn/learn/tools_and_testing/client-side_javascript_frameworks/main_features/index.md
similarity index 100%
rename from files/zh-cn/learn/tools_and_testing/client-side_javascript_frameworks/main_features/index.html
rename to files/zh-cn/learn/tools_and_testing/client-side_javascript_frameworks/main_features/index.md
diff --git a/files/zh-cn/learn/tools_and_testing/client-side_javascript_frameworks/react_components/index.html b/files/zh-cn/learn/tools_and_testing/client-side_javascript_frameworks/react_components/index.md
similarity index 100%
rename from files/zh-cn/learn/tools_and_testing/client-side_javascript_frameworks/react_components/index.html
rename to files/zh-cn/learn/tools_and_testing/client-side_javascript_frameworks/react_components/index.md
diff --git a/files/zh-cn/learn/tools_and_testing/client-side_javascript_frameworks/react_getting_started/index.html b/files/zh-cn/learn/tools_and_testing/client-side_javascript_frameworks/react_getting_started/index.md
similarity index 100%
rename from files/zh-cn/learn/tools_and_testing/client-side_javascript_frameworks/react_getting_started/index.html
rename to files/zh-cn/learn/tools_and_testing/client-side_javascript_frameworks/react_getting_started/index.md
diff --git a/files/zh-cn/learn/tools_and_testing/client-side_javascript_frameworks/vue_first_component/index.html b/files/zh-cn/learn/tools_and_testing/client-side_javascript_frameworks/vue_first_component/index.md
similarity index 100%
rename from files/zh-cn/learn/tools_and_testing/client-side_javascript_frameworks/vue_first_component/index.html
rename to files/zh-cn/learn/tools_and_testing/client-side_javascript_frameworks/vue_first_component/index.md
diff --git a/files/zh-cn/learn/tools_and_testing/client-side_javascript_frameworks/vue_getting_started/index.html b/files/zh-cn/learn/tools_and_testing/client-side_javascript_frameworks/vue_getting_started/index.md
similarity index 100%
rename from files/zh-cn/learn/tools_and_testing/client-side_javascript_frameworks/vue_getting_started/index.html
rename to files/zh-cn/learn/tools_and_testing/client-side_javascript_frameworks/vue_getting_started/index.md
diff --git a/files/zh-cn/learn/tools_and_testing/client-side_javascript_frameworks/vue_methods_events_models/index.html b/files/zh-cn/learn/tools_and_testing/client-side_javascript_frameworks/vue_methods_events_models/index.md
similarity index 100%
rename from files/zh-cn/learn/tools_and_testing/client-side_javascript_frameworks/vue_methods_events_models/index.html
rename to files/zh-cn/learn/tools_and_testing/client-side_javascript_frameworks/vue_methods_events_models/index.md
diff --git a/files/zh-cn/learn/tools_and_testing/client-side_javascript_frameworks/vue_rendering_lists/index.html b/files/zh-cn/learn/tools_and_testing/client-side_javascript_frameworks/vue_rendering_lists/index.md
similarity index 100%
rename from files/zh-cn/learn/tools_and_testing/client-side_javascript_frameworks/vue_rendering_lists/index.html
rename to files/zh-cn/learn/tools_and_testing/client-side_javascript_frameworks/vue_rendering_lists/index.md
diff --git a/files/zh-cn/learn/tools_and_testing/client-side_javascript_frameworks/vue_resources/index.html b/files/zh-cn/learn/tools_and_testing/client-side_javascript_frameworks/vue_resources/index.md
similarity index 100%
rename from files/zh-cn/learn/tools_and_testing/client-side_javascript_frameworks/vue_resources/index.html
rename to files/zh-cn/learn/tools_and_testing/client-side_javascript_frameworks/vue_resources/index.md
diff --git a/files/zh-cn/learn/tools_and_testing/client-side_javascript_frameworks/vue_styling/index.html b/files/zh-cn/learn/tools_and_testing/client-side_javascript_frameworks/vue_styling/index.md
similarity index 100%
rename from files/zh-cn/learn/tools_and_testing/client-side_javascript_frameworks/vue_styling/index.html
rename to files/zh-cn/learn/tools_and_testing/client-side_javascript_frameworks/vue_styling/index.md
diff --git a/files/zh-cn/learn/tools_and_testing/cross_browser_testing/accessibility/index.html b/files/zh-cn/learn/tools_and_testing/cross_browser_testing/accessibility/index.md
similarity index 100%
rename from files/zh-cn/learn/tools_and_testing/cross_browser_testing/accessibility/index.html
rename to files/zh-cn/learn/tools_and_testing/cross_browser_testing/accessibility/index.md
diff --git a/files/zh-cn/learn/tools_and_testing/cross_browser_testing/automated_testing/index.html b/files/zh-cn/learn/tools_and_testing/cross_browser_testing/automated_testing/index.md
similarity index 100%
rename from files/zh-cn/learn/tools_and_testing/cross_browser_testing/automated_testing/index.html
rename to files/zh-cn/learn/tools_and_testing/cross_browser_testing/automated_testing/index.md
diff --git a/files/zh-cn/learn/tools_and_testing/cross_browser_testing/feature_detection/index.html b/files/zh-cn/learn/tools_and_testing/cross_browser_testing/feature_detection/index.md
similarity index 100%
rename from files/zh-cn/learn/tools_and_testing/cross_browser_testing/feature_detection/index.html
rename to files/zh-cn/learn/tools_and_testing/cross_browser_testing/feature_detection/index.md
diff --git a/files/zh-cn/learn/tools_and_testing/cross_browser_testing/html_and_css/index.html b/files/zh-cn/learn/tools_and_testing/cross_browser_testing/html_and_css/index.md
similarity index 100%
rename from files/zh-cn/learn/tools_and_testing/cross_browser_testing/html_and_css/index.html
rename to files/zh-cn/learn/tools_and_testing/cross_browser_testing/html_and_css/index.md
diff --git a/files/zh-cn/learn/tools_and_testing/cross_browser_testing/index.html b/files/zh-cn/learn/tools_and_testing/cross_browser_testing/index.md
similarity index 100%
rename from files/zh-cn/learn/tools_and_testing/cross_browser_testing/index.html
rename to files/zh-cn/learn/tools_and_testing/cross_browser_testing/index.md
diff --git a/files/zh-cn/learn/tools_and_testing/cross_browser_testing/introduction/index.html b/files/zh-cn/learn/tools_and_testing/cross_browser_testing/introduction/index.md
similarity index 100%
rename from files/zh-cn/learn/tools_and_testing/cross_browser_testing/introduction/index.html
rename to files/zh-cn/learn/tools_and_testing/cross_browser_testing/introduction/index.md
diff --git a/files/zh-cn/learn/tools_and_testing/cross_browser_testing/javascript/index.html b/files/zh-cn/learn/tools_and_testing/cross_browser_testing/javascript/index.md
similarity index 100%
rename from files/zh-cn/learn/tools_and_testing/cross_browser_testing/javascript/index.html
rename to files/zh-cn/learn/tools_and_testing/cross_browser_testing/javascript/index.md
diff --git a/files/zh-cn/learn/tools_and_testing/cross_browser_testing/testing_strategies/index.html b/files/zh-cn/learn/tools_and_testing/cross_browser_testing/testing_strategies/index.md
similarity index 100%
rename from files/zh-cn/learn/tools_and_testing/cross_browser_testing/testing_strategies/index.html
rename to files/zh-cn/learn/tools_and_testing/cross_browser_testing/testing_strategies/index.md
diff --git a/files/zh-cn/learn/tools_and_testing/cross_browser_testing/your_own_automation_environment/index.html b/files/zh-cn/learn/tools_and_testing/cross_browser_testing/your_own_automation_environment/index.md
similarity index 100%
rename from files/zh-cn/learn/tools_and_testing/cross_browser_testing/your_own_automation_environment/index.html
rename to files/zh-cn/learn/tools_and_testing/cross_browser_testing/your_own_automation_environment/index.md
diff --git a/files/zh-cn/learn/tools_and_testing/github/index.html b/files/zh-cn/learn/tools_and_testing/github/index.md
similarity index 100%
rename from files/zh-cn/learn/tools_and_testing/github/index.html
rename to files/zh-cn/learn/tools_and_testing/github/index.md
diff --git a/files/zh-cn/learn/tools_and_testing/index.html b/files/zh-cn/learn/tools_and_testing/index.md
similarity index 100%
rename from files/zh-cn/learn/tools_and_testing/index.html
rename to files/zh-cn/learn/tools_and_testing/index.md
diff --git a/files/zh-cn/learn/tools_and_testing/understanding_client-side_tools/command_line/index.html b/files/zh-cn/learn/tools_and_testing/understanding_client-side_tools/command_line/index.md
similarity index 100%
rename from files/zh-cn/learn/tools_and_testing/understanding_client-side_tools/command_line/index.html
rename to files/zh-cn/learn/tools_and_testing/understanding_client-side_tools/command_line/index.md
diff --git a/files/zh-cn/learn/tools_and_testing/understanding_client-side_tools/index.html b/files/zh-cn/learn/tools_and_testing/understanding_client-side_tools/index.md
similarity index 100%
rename from files/zh-cn/learn/tools_and_testing/understanding_client-side_tools/index.html
rename to files/zh-cn/learn/tools_and_testing/understanding_client-side_tools/index.md
diff --git a/files/zh-cn/learn/tools_and_testing/understanding_client-side_tools/overview/index.html b/files/zh-cn/learn/tools_and_testing/understanding_client-side_tools/overview/index.md
similarity index 100%
rename from files/zh-cn/learn/tools_and_testing/understanding_client-side_tools/overview/index.html
rename to files/zh-cn/learn/tools_and_testing/understanding_client-side_tools/overview/index.md

From fdb99a292af466dc76aa7bbfc9ab8e3e3a7419fc Mon Sep 17 00:00:00 2001
From: allo 
Date: Thu, 28 Jul 2022 09:12:46 +0800
Subject: [PATCH 3/3] convert to markdown for tools_and_testing

---
 .../index.md                                  | 232 ++--
 .../main_features/index.md                    | 457 ++++----
 .../react_components/index.md                 | 598 ++++++-----
 .../react_getting_started/index.md            | 585 +++++-----
 .../vue_first_component/index.md              | 539 +++++-----
 .../vue_getting_started/index.md              | 399 ++++---
 .../vue_methods_events_models/index.md        | 717 ++++++-------
 .../vue_rendering_lists/index.md              | 359 ++++---
 .../vue_resources/index.md                    | 217 ++--
 .../vue_styling/index.md                      | 343 +++---
 .../accessibility/index.md                    | 772 ++++++--------
 .../automated_testing/index.md                | 920 ++++++++--------
 .../feature_detection/index.md                | 464 ++++----
 .../html_and_css/index.md                     | 548 +++++-----
 .../cross_browser_testing/index.md            |  44 +-
 .../introduction/index.md                     | 236 ++---
 .../cross_browser_testing/javascript/index.md | 588 +++++------
 .../testing_strategies/index.md               | 423 ++++----
 .../your_own_automation_environment/index.md  | 996 ++++++++++--------
 .../learn/tools_and_testing/github/index.md   |  94 +-
 files/zh-cn/learn/tools_and_testing/index.md  |  30 +-
 .../command_line/index.md                     | 618 +++++------
 .../understanding_client-side_tools/index.md  |  48 +-
 .../overview/index.md                         | 230 ++--
 24 files changed, 5208 insertions(+), 5249 deletions(-)

diff --git a/files/zh-cn/learn/tools_and_testing/client-side_javascript_frameworks/index.md b/files/zh-cn/learn/tools_and_testing/client-side_javascript_frameworks/index.md
index 9a9006e6134438..a6017dc5174113 100644
--- a/files/zh-cn/learn/tools_and_testing/client-side_javascript_frameworks/index.md
+++ b/files/zh-cn/learn/tools_and_testing/client-side_javascript_frameworks/index.md
@@ -9,128 +9,110 @@ tags:
   - 客户端
 translation_of: Learn/Tools_and_testing/Client-side_JavaScript_frameworks
 ---
-
        {{LearnSidebar}}
        
-
-
        JavaScript 框架是现代前端 web 开发的重要部分，为开发人员提供了构建可伸缩、交互式 web 应用程序的经过测试的工具。许多现代公司使用框架作为工具的标准部分，因此许多前端开发工作现在需要框架经验。
        
-
-
        作为一个有抱负的前端开发人员，很难找出从哪里开始学习框架——有这么多不同的框架可供选择，新的问题出现，他们大多以类似的方式工作，但做一些不同的事情，还有一些具体的事情时要小心使用框架。
        
-
-
        在这一系列文章中，我们旨在为您提供一个舒适的起点，帮助您开始学习框架。我们的目标不是详尽地教给你所有你需要知道的关于 React/ReactDOM，或者 Vue，或者其他一些特定的框架;框架团队自己的文档已经完成了这项工作。相反，我们想备份和首先回答更基本的问题，如：
        
-
-
          
- 
        • 为什么要使用框架？他们为我解决了什么问题？
          • 
- 
        • 当我尝试选择一个框架时，我应该问什么问题？我甚至需要使用框架吗？
          • 
- 
        • 框架有什么特性？它们一般是如何工作的？框架对这些特性的实现有何不同？
          • 
- 
        • 它们与“普通的”JavaScript 或 HTML 有什么关系？
          • 
-
        
-
-
        在此之后，我们将提供一些教程，介绍一些主要框架的基本内容，为您提供足够的上下文和熟悉感，以便您自己开始更深入地学习。我们希望你以一种实用的方式来学习框架，不要忘记 web 平台的基本最佳实践，比如可访问性。
        
-
-
        通过“客户端框架介绍”即刻开始
        
-
-
        前提条件
        
-
-
        在尝试学习客户端框架 (HTML、CSS，特别是 JavaScript) 之前，您应该首先真正学习核心 web 语言的基础知识。
        
-
-
        如果你理解了框架底层的基础 Web 平台特性，你将能编写更加健壮和专业的代码，更容易地排除问题。
        
-
-
        说明指导
        
-
-
        
- 
        1. 客户端框架介绍
        
- 
        我们首先从以下话题开始研究框架，框架领域的总览，JavaScript 和框架历史的简介，为什么需要框架以及框架能带给我们什么，如何考虑选择一个框架开始学习，有什么其它的客户端框架可供选择。
        
- 
        2. 框架的主要特性
        
- 
        每种 JavaScript 框架都有自己不同的方式更新 DOM，处理浏览器事件，为开发者提供愉悦的使用体验，这篇文章将探索“四大”框架的主要特性，从高级角度探讨框架的工作方式以及它们之间的区别。
        
-
        
-
-
        React 教程
        
-
-
        
-
        备注： React 教程最后测试于 2020 年 5 月，基于 React/ReactDOM 16.13.1 和 create-react-app 3.4.1.
        
-
-
        如果你需要确认你的代码与我们的版本区别，你可以在我们的todo-react repository仓库找到 React 应用示例代码的完整版本。想要获取当前最新的版本，查看https://mdn.github.io/todo-react-build/.
        
-
        
-
-
        
- 
        1. 开始使用 React
        
- 
        此章节我们将向 React 打招呼。我们将能发现有关 React 的背景和使用场景的一些细节，在我们的计算机上设置基本的 React 工具链，创建和运行简单的入门应用，学习 React 在这个过程是如何工作的。
        
- 
        2. 开始我们的 React 待办清单
        
- 
        假设我们计划使用 React 创建 proof-of-concept，一个允许用户添加，编辑和删除工作任务，不删除的情况标记任务完成的应用。此章节将带你完成基本的App组件结构和样式，为最后即将添加的独立组件定义和交互做好准备。
        
- 
        3. 组件化我们的 React 应用
        
- 
        到这个阶段，我们的应用仍是一个单一结构。在让它工作之前，我们需要将它分解为可管理的描述性组件。React 对于组件没有任何硬性规定--这完全取决于你！在此章节我们将向你展示一个合理的方式来将我们的应用分解成 组件。
        
- 
        4. React 交互：事件和状态
        
- 
        我们的组件化计划已经完成，现在是时候开始将我们的应用从一个完全静态的界面更新成允许交互和变更的界面。在这个章节我们将继续研究事件和状态，借此实现上述功能。
        
- 
        5. React 交互：编辑，过滤，条件渲染
        
- 
        我们已经接近 React 旅程的终点（至少目前是这样），我们将对我们的 Todo 列表应用的主要功能区域做最后的更改。这包括允许编辑现有的任务，在所有列表，已完成列表和未完成列表中过滤任务。在这个过程中我们将研究条件渲染。
        
- 
        6. React 的可访问性支持
        
- 
        在我们最后的教程章节，我们将重点介绍可访问性，包括 React 的焦点管理，这可以提高可用性，降低纯键盘用户和屏幕阅读器用户的困扰。
        
- 
        7. React 资源
        
- 
        我们的最后章节提供了一个 React 资源列表，供你用于进一步的学习。
        
-
        
-
-
        Ember 教程
        
-
-
        
-
        备注： Ember 教程最后测试于 2020 年 5 月，基于 Ember/Ember CLI version 3.18.0.
        
-
-
        如果你需要确认你的代码与我们的版本区别，你可以在ember-todomvc-tutorial repository找到 Ember 应用示例代码的完整版本。想要获取当前最新的版本，查看https://nullvoxpopuli.github.io/ember-todomvc-tutorial/ （这还包含了本教程未覆盖到的一些额外的特性）。
        
-
        
-
-
        
- 
        1. 开始使用 Ember
        
- 
        在我们的 Ember 第一章节中我们将了解 Ember 的工作原理及其用途，本地安装 Ember 工具链，创建一个示例应用，然后做一些初始化设置以便开始开发。
        
- 
        2. Ember 应用结构和组件化
        
- 
        在此章节，我们将继续规划我们的 TodoMVC Ember 应用，为其添加 HTML 部分，随后将这些 HTML 分解为组件。
        
- 
        3. Ember 交互：事件，类和状态
        
- 
        至此，我们将添加一些交互行为到我们的应用，使其能够添加和显示新的待办事项。在此过程中，我们将研究如何在 Ember 中使用事件，创建包含 JavaScript 代码的组件类来控制交互功能，并且设置服务来跟踪我们的应用的数据状态。
        
- 
        4. Ember 交互：页脚功能，条件渲染
        
- 
        现在是时候开始在我们的应用中处理页脚功能了。这里我们将更新待办事项计数器以正确显示待完成待办事项的数量，并正确地为已完成事项应用样式（i.e. 对应列表项的复选框处于选中状态）。我们还将实装我们的“Clear completed”按钮。在这个过程中，我们将学习在我们的模板中使用条件渲染。
        
- 
        5. Ember 路由
        
- 
        在此章节我们学习路由，有时也称为 URL-based 过滤。我们将使用它来为三个待办视图------"All","Active"和"Completed"提供全局唯一的 URL。
        
- 
        6. Ember 资源和疑难解答
        
- 
        我们的最后一个 Ember 章节提供了一个供你进一步学习的资源列表，还有一些有用的疑难解答和其他信息。
        
-
        
-
-
        Vue 教程
        
-
-
        
-
        备注： Vue 教程最后测试于 2020 年 5 月，基于 Vue 2.6.11.
        
-
-
        如果你需要确认你的代码与我们的版本区别，你可以在todo-vue repository找到 Vue 应用示例代码的完整版本。想要获取当前当前最新的版本，查看https://mdn.github.io/todo-vue/dist/.
        
-
        
-
-
        
- 
        1. 开始使用 Vue
        
- 
        现在让我们开始介绍 Vue，我们的第三个框架。在此章节我们将简单了解 Vue 的背景，学习如何安装 Vue 以及如何创建一个新项目，学习整个项目的高级架构以及独立的组件，了解如何在本地运行这个项目，并准备开始构建我们的示例。
        
- 
        2. 创建我们的第一个 Vue 组件
        
- 
        现在是时候深入 Vue，创建我们自己的自定义组件了--我们将从创建一个用来展示待办列表项目的组件开始。在这个过程中，我们将学习一些重要的概念例如在一个组件中调用另一个组件，通过 props 传递数据给另一个组件并保存数据状态。
        
- 
        3. 渲染 Vue 组件列表
        
- 
        至此我们已经得到了一个完全可用的组件，我们现在已经准备好添加多个ToDoItem 组件到我们的应用中了。在此章节我们将了解如何添加一组待办项数据到我们的App.vue组件，这组数据我们随后使用v-for指令将它们循环并显示到ToDoItem组件中。
        
- 
        4. 添加一个新的待办表单：Vue 事件，方法和模型
        
- 
        现在我们的应用已经有了示例数据和一个循环来将每条数据渲染到ToDoItem中。下一步我们要做的是让用户能够输入他们自己的待办事项到这个应用中。 为此我们需要一个文本输入框<input>，一个在数据提交时触发的事件，一个在数据提交时被触发来添加数据和渲染列表的方法和一个用来控制数据的模型。这就是这个章节我们将要介绍的内容。
        
- 
        5. 使用 CSS 美化 Vue 组件
        
- 
        终于到了美化我们的应用的时间了。在此章节我们将探索用 CSS 美化 Vue 组件的不同方法。
        
- 
        6. 使用 Vue 计算属性
        
- 
        在这个章节我们将添加一个显示已完成待办项目数量的计数器，使用 Vue 的一个叫做计算属性的特性。计算属性与方法相似，但是只有它的依赖内容变更时才会再次运作。
        
- 
        7. Vue 条件渲染：编辑既有待办项
        
- 
        现在是时候加入我们还未实现一个主要功能部分了------编辑既有待办项。为了实现这个功能，我们将利用 Vue 的条件渲染能力------v-if和v-else来使既有待办项目在查看状态和文本编辑状态之间切换。我们还将添加删除待办项的功能。
        
- 
        8. 使用 Vue refs 进行焦点管理
        
- 
        我们快要完成 Vue 的使用了。最后要看的一个功能是焦点管理，换种说法，如何改善我们的应用的键盘可操作性。我们将解决这个问题，通过 Vue refs------一个允许你直接操作虚拟 DOM 的底层 DOM，或在组件中直接操作其子组件内部 DOM 结构的高级特性。
        
- 
        9. Vue 资源
        
- 
        我们将提供一个你可以用来进一步学习的资源列表来圆满结束我们的 Vue 学习教程，从这个列表中你也可以获取一些有用的技巧。
        
-
        
-
-
        我们应该选择哪个框架？
        
-
-
        我们在这里发布专注于主要三大框架的系列说明文章------React/ReactDOM，Ember和Vue的一些原因如下：
        
-
-
          
- 
        • 它们在今后的一段时间内都将是最受欢迎的选择------就像使用任何软件工具一样，依附于一个处于活跃开发状态并且不太会突然停止开发的工具是一个明智的选择，并且它们会成为你寻找工作时所需的技能之一。
          • 
- 
        • 它们拥有强大的社区和良好的文档支持。学习复杂的主题时得到帮助是很重要的，特别是你是刚开始学习时。
          • 
- 
        • 我们没有资源能覆盖所有现代框架。维护所有现代框架的最新列表是非常困难的，因为总有新的框架在不断被创造出来。
          • 
- 
        • 作为一个初学者，在大量的可选内容中选择关注哪部分是很难的，维持一个相对短的列表反而是有益的。
          • 
-
        
-
-
        我们想在前面说一下------我们没有因为我们认为它们是最好的或者我们赞同它们而选择这些我们正在关注的框架。我们只是认为它们在上面这些方面评价比较高。
        
-
-
        值得一提的是我们也希望在我们的初版发布时能够包含更多框架的内容，但是我们最终决定先把初版内容发布出来随后在此基础上再慢慢添加更多框架内容，而不是延后更长的时间。如果你最喜欢的框架没有包含在这部分内容中而且你想帮助改善这个情况，请立即告诉我们！你可以通过Matrix或Discourse联系我们或者发送邮件到我们的邮件列表mdn-admins list。
        
+{{LearnSidebar}}
+
+JavaScript 框架是现代前端 web 开发的重要部分，为开发人员提供了构建可伸缩、交互式 web 应用程序的经过测试的工具。许多现代公司使用框架作为工具的标准部分，因此许多前端开发工作现在需要框架经验。
+
+作为一个有抱负的前端开发人员，很难找出从哪里开始学习框架——有这么多不同的框架可供选择，新的问题出现，他们大多以类似的方式工作，但做一些不同的事情，还有一些具体的事情时要小心使用框架。
+
+在这一系列文章中，我们旨在为您提供一个舒适的起点，帮助您开始学习框架。我们的目标不是详尽地教给你所有你需要知道的关于 React/ReactDOM，或者 Vue，或者其他一些特定的框架;框架团队自己的文档已经完成了这项工作。相反，我们想备份和首先回答更基本的问题，如：
+
+- 为什么要使用框架？他们为我解决了什么问题？
+- 当我尝试选择一个框架时，我应该问什么问题？我甚至需要使用框架吗？
+- 框架有什么特性？它们一般是如何工作的？框架对这些特性的实现有何不同？
+- 它们与“普通的”JavaScript 或 HTML 有什么关系？
+
+在此之后，我们将提供一些教程，介绍一些主要框架的基本内容，为您提供足够的上下文和熟悉感，以便您自己开始更深入地学习。我们希望你以一种实用的方式来学习框架，不要忘记 web 平台的基本最佳实践，比如可访问性。
+
+**[通过“客户端框架介绍”即刻开始](/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Introduction)**
+
+## 前提条件
+
+在尝试学习客户端框架 (HTML、CSS，特别是 JavaScript) 之前，您应该首先真正学习核心 web 语言的基础知识。
+
+如果你理解了框架底层的基础 Web 平台特性，你将能编写更加健壮和专业的代码，更容易地排除问题。
+
+## 说明指导
+
+- [1. 客户端框架介绍](/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Introduction)
+  - : 我们首先从以下话题开始研究框架，框架领域的总览，JavaScript 和框架历史的简介，为什么需要框架以及框架能带给我们什么，如何考虑选择一个框架开始学习，有什么其它的客户端框架可供选择。
+- [2. 框架的主要特性](/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Main_features)
+  - : 每种 JavaScript 框架都有自己不同的方式更新 DOM，处理浏览器事件，为开发者提供愉悦的使用体验，这篇文章将探索“四大”框架的主要特性，从高级角度探讨框架的工作方式以及它们之间的区别。
+
+## React 教程
+
+> **备注：** React 教程最后测试于 2020 年 5 月，基于 React/ReactDOM 16.13.1 和 create-react-app 3.4.1.
+>
+> 如果你需要确认你的代码与我们的版本区别，你可以在我们的[todo-react repository](https://github.com/mdn/todo-react)仓库找到 React 应用示例代码的完整版本。想要获取当前最新的版本，查看.
+
+- [1. 开始使用 React](/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_getting_started)
+  - : 此章节我们将向 React 打招呼。我们将能发现有关 React 的背景和使用场景的一些细节，在我们的计算机上设置基本的 React 工具链，创建和运行简单的入门应用，学习 React 在这个过程是如何工作的。
+- [2. 开始我们的 React 待办清单](/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_todo_list_beginning)
+  - : 假设我们计划使用 React 创建 proof-of-concept，一个允许用户添加，编辑和删除工作任务，不删除的情况标记任务完成的应用。此章节将带你完成基本的`App`组件结构和样式，为最后即将添加的独立组件定义和交互做好准备。
+- [3. 组件化我们的 React 应用](/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_components)
+  - : 到这个阶段，我们的应用仍是一个单一结构。在让它工作之前，我们需要将它分解为可管理的描述性组件。React 对于组件没有任何硬性规定--这完全取决于你！在此章节我们将向你展示一个合理的方式来将我们的应用分解成 组件。
+- [4. React 交互：事件和状态](/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_interactivity_events_state)
+  - : 我们的组件化计划已经完成，现在是时候开始将我们的应用从一个完全静态的界面更新成允许交互和变更的界面。在这个章节我们将继续研究事件和状态，借此实现上述功能。
+- [5. React 交互：编辑，过滤，条件渲染](/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_interactivity_filtering_conditional_rendering)
+  - : 我们已经接近 React 旅程的终点（至少目前是这样），我们将对我们的 Todo 列表应用的主要功能区域做最后的更改。这包括允许编辑现有的任务，在所有列表，已完成列表和未完成列表中过滤任务。在这个过程中我们将研究条件渲染。
+- [6. React 的可访问性支持](/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_accessibility)
+  - : 在我们最后的教程章节，我们将重点介绍可访问性，包括 React 的焦点管理，这可以提高可用性，降低纯键盘用户和屏幕阅读器用户的困扰。
+- [7. React 资源](/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_resources)
+  - : 我们的最后章节提供了一个 React 资源列表，供你用于进一步的学习。
+
+## Ember 教程
+
+> **备注：** Ember 教程最后测试于 2020 年 5 月，基于 Ember/Ember CLI version 3.18.0.
+>
+> 如果你需要确认你的代码与我们的版本区别，你可以在[ember-todomvc-tutorial repository](https://github.com/NullVoxPopuli/ember-todomvc-tutorial/tree/master/steps/00-finished-todomvc/todomvc)找到 Ember 应用示例代码的完整版本。想要获取当前最新的版本，查看 （这还包含了本教程未覆盖到的一些额外的特性）。
+
+- [1. 开始使用 Ember](/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_getting_started)
+  - : 在我们的 Ember 第一章节中我们将了解 Ember 的工作原理及其用途，本地安装 Ember 工具链，创建一个示例应用，然后做一些初始化设置以便开始开发。
+- [2. Ember 应用结构和组件化](/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_structure_componentization)
+  - : 在此章节，我们将继续规划我们的 TodoMVC Ember 应用，为其添加 HTML 部分，随后将这些 HTML 分解为组件。
+- [3. Ember 交互：事件，类和状态](/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_interactivity_events_state)
+  - : 至此，我们将添加一些交互行为到我们的应用，使其能够添加和显示新的待办事项。在此过程中，我们将研究如何在 Ember 中使用事件，创建包含 JavaScript 代码的组件类来控制交互功能，并且设置服务来跟踪我们的应用的数据状态。
+- [4. Ember 交互：页脚功能，条件渲染](/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_conditional_footer)
+  - : 现在是时候开始在我们的应用中处理页脚功能了。这里我们将更新待办事项计数器以正确显示待完成待办事项的数量，并正确地为已完成事项应用样式（i.e. 对应列表项的复选框处于选中状态）。我们还将实装我们的“Clear completed”按钮。在这个过程中，我们将学习在我们的模板中使用条件渲染。
+- [5. Ember 路由](/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_routing)
+  - : 在此章节我们学习路由，有时也称为 URL-based 过滤。我们将使用它来为三个待办视图------"All","Active"和"Completed"提供全局唯一的 URL。
+- [6. Ember 资源和疑难解答](/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_resources)
+  - : 我们的最后一个 Ember 章节提供了一个供你进一步学习的资源列表，还有一些有用的疑难解答和其他信息。
+
+## Vue 教程
+
+> **备注：** Vue 教程最后测试于 2020 年 5 月，基于 Vue 2.6.11.
+>
+> 如果你需要确认你的代码与我们的版本区别，你可以在[todo-vue repository](https://github.com/mdn/todo-vue)找到 Vue 应用示例代码的完整版本。想要获取当前当前最新的版本，查看.
+
+- [1. 开始使用 Vue](/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_getting_started)
+  - : 现在让我们开始介绍 Vue，我们的第三个框架。在此章节我们将简单了解 Vue 的背景，学习如何安装 Vue 以及如何创建一个新项目，学习整个项目的高级架构以及独立的组件，了解如何在本地运行这个项目，并准备开始构建我们的示例。
+- [2. 创建我们的第一个 Vue 组件](/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_first_component)
+  - : 现在是时候深入 Vue，创建我们自己的自定义组件了--我们将从创建一个用来展示待办列表项目的组件开始。在这个过程中，我们将学习一些重要的概念例如在一个组件中调用另一个组件，通过 props 传递数据给另一个组件并保存数据状态。
+- [3. 渲染 Vue 组件列表](/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_rendering_lists)
+  - : 至此我们已经得到了一个完全可用的组件，我们现在已经准备好添加多个`ToDoItem` 组件到我们的应用中了。在此章节我们将了解如何添加一组待办项数据到我们的`App.vue`组件，这组数据我们随后使用`v-for`指令将它们循环并显示到`ToDoItem`组件中。
+- [4. 添加一个新的待办表单：Vue 事件，方法和模型](/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_methods_events_models)
+  - : 现在我们的应用已经有了示例数据和一个循环来将每条数据渲染到`ToDoItem`中。下一步我们要做的是让用户能够输入他们自己的待办事项到这个应用中。 为此我们需要一个文本输入框``，一个在数据提交时触发的事件，一个在数据提交时被触发来添加数据和渲染列表的方法和一个用来控制数据的模型。这就是这个章节我们将要介绍的内容。
+- [5. 使用 CSS 美化 Vue 组件](/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_styling)
+  - : 终于到了美化我们的应用的时间了。在此章节我们将探索用 CSS 美化 Vue 组件的不同方法。
+- [6. 使用 Vue 计算属性](/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_computed_properties)
+  - : 在这个章节我们将添加一个显示已完成待办项目数量的计数器，使用 Vue 的一个叫做计算属性的特性。计算属性与方法相似，但是只有它的依赖内容变更时才会再次运作。
+- [7. Vue 条件渲染：编辑既有待办项](/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_conditional_rendering)
+  - : 现在是时候加入我们还未实现一个主要功能部分了------编辑既有待办项。为了实现这个功能，我们将利用 Vue 的条件渲染能力------`v-if`和`v-else`来使既有待办项目在查看状态和文本编辑状态之间切换。我们还将添加删除待办项的功能。
+- [8. 使用 Vue refs 进行焦点管理](/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_refs_focus_management)
+  - : 我们快要完成 Vue 的使用了。最后要看的一个功能是焦点管理，换种说法，如何改善我们的应用的键盘可操作性。我们将解决这个问题，通过 Vue refs------一个允许你直接操作虚拟 DOM 的底层 DOM，或在组件中直接操作其子组件内部 DOM 结构的高级特性。
+- [9. Vue 资源](/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_resources)
+  - : 我们将提供一个你可以用来进一步学习的资源列表来圆满结束我们的 Vue 学习教程，从这个列表中你也可以获取一些有用的技巧。
+
+## 我们应该选择哪个框架？
+
+我们在这里发布专注于主要三大框架的系列说明文章------React/ReactDOM，Ember 和 Vue 的一些原因如下：
+
+- 它们在今后的一段时间内都将是最受欢迎的选择------就像使用任何软件工具一样，依附于一个处于活跃开发状态并且不太会突然停止开发的工具是一个明智的选择，并且它们会成为你寻找工作时所需的技能之一。
+- 它们拥有强大的社区和良好的文档支持。学习复杂的主题时得到帮助是很重要的，特别是你是刚开始学习时。
+- 我们没有资源能覆盖所有现代框架。维护所有现代框架的最新列表是非常困难的，因为总有新的框架在不断被创造出来。
+- 作为一个初学者，在大量的可选内容中选择关注哪部分是很难的，维持一个相对短的列表反而是有益的。
+
+我们想在前面说一下------我们**没有**因为我们认为它们是最好的或者我们赞同它们而选择这些我们正在关注的框架。我们只是认为它们在上面这些方面评价比较高。
+
+值得一提的是我们也希望在我们的初版发布时能够包含更多框架的内容，但是我们最终决定先把初版内容发布出来随后在此基础上再慢慢添加更多框架内容，而不是延后更长的时间。如果你最喜欢的框架没有包含在这部分内容中而且你想帮助改善这个情况，请立即告诉我们！你可以通过[Matrix](https://wiki.mozilla.org/Matrix)或[Discourse](https://discourse.mozilla.org/c/mdn)联系我们或者发送邮件到我们的邮件列表[mdn-admins list](mailto:mdn-admins@mozilla.org)。
diff --git a/files/zh-cn/learn/tools_and_testing/client-side_javascript_frameworks/main_features/index.md b/files/zh-cn/learn/tools_and_testing/client-side_javascript_frameworks/main_features/index.md
index 82a4d10bd3a30d..506a472a4f2431 100644
--- a/files/zh-cn/learn/tools_and_testing/client-side_javascript_frameworks/main_features/index.md
+++ b/files/zh-cn/learn/tools_and_testing/client-side_javascript_frameworks/main_features/index.md
@@ -3,278 +3,315 @@ title: 框架的主要特性
 slug: Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Main_features
 translation_of: Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Main_features
 ---
-
        {{LearnSidebar}}
        
+{{LearnSidebar}}{{PreviousMenuNext("Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Introduction","Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_getting_started", "Learn/Tools_and_testing/Client-side_JavaScript_frameworks")}}
 
-
        {{PreviousMenuNext("Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Introduction","Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_getting_started", "Learn/Tools_and_testing/Client-side_JavaScript_frameworks")}}
        
-
-
        每种 JavaScript 框架都有自己不同的方式更新 DOM，处理浏览器事件，为开发者提供愉快的使用体验，这篇文章将探索“四大”框架的主要特性，从高级角度探讨框架的工作方式以及它们之间的区别。
        
+每种 JavaScript 框架都有自己不同的方式更新 DOM，处理浏览器事件，为开发者提供愉快的使用体验，这篇文章将探索“四大”框架的主要特性，从高级角度探讨框架的工作方式以及它们之间的区别。
 
 
- 
-  
-   
-   
-  
-  
-   
-   
-  
- 
+  
+    
+      
+      
+    
+    
+      
+      
+    
+  
        先决条件：熟悉核心的 HTML, CSS 和 JavaScript 语言。
        目标：了解框架主要代码的特性。
        先决条件：
+        熟悉核心的 HTML,
+        CSS 和
+        JavaScript 语言。
+      
        目标：了解框架主要代码的特性。
        
 
        
 
-
        Domain-specific languages
        
+## Domain-specific languages
 
-
        All of the frameworks discussed in this module are powered by JavaScript, and all allow you to use domain-specific languages (DSLs) in order to build your applications. In particular, React has popularized the use of JSX for writing its components, while Ember utilizes Handlebars. Unlike HTML, these languages know how to read data variables, and this data can be used to streamline the process of writing your UI.
        
+All of the frameworks discussed in this module are powered by JavaScript, and all allow you to use domain-specific languages (DSLs) in order to build your applications. In particular, React has popularized the use of **JSX** for writing its components, while Ember utilizes **Handlebars**. Unlike HTML, these languages know how to read data variables, and this data can be used to streamline the process of writing your UI.
 
-
        Angular apps often make heavy use of TypeScript. TypeScript is not concerned with the writing of user interfaces, but it is a domain-specific language, and has significant differences to vanilla JavaScript.
        
+Angular apps often make heavy use of **TypeScript**. TypeScript is not concerned with the writing of user interfaces, but it is a domain-specific language, and has significant differences to vanilla JavaScript.
 
-
        DSLs can't be read by the browser directly; they must be transformed into JavaScript or HTML first. Transformation is an extra step in the development process, but framework tooling generally includes the required tools to handle this step, or can be adjusted to include this step. While it is possible to build framework apps without using these domain-specific languages, embracing them will streamline your development process and make it easier to find help from the communities around those frameworks.
        
+DSLs can't be read by the browser directly; they must be transformed into JavaScript or HTML first. [Transformation is an extra step in the development process](/en-US/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Overview#Transformation), but framework tooling generally includes the required tools to handle this step, or can be adjusted to include this step. While it is possible to build framework apps without using these domain-specific languages, embracing them will streamline your development process and make it easier to find help from the communities around those frameworks.
 
-
        JSX
        
+### JSX
 
-
        JSX, which stands for JavaScript and XML, is an extension of JavaScript that brings HTML-like syntax to a JavaScript environment. It was invented by the React team for use in React applications, but can be used to develop other applications — like Vue apps, for instance.
        
+[JSX](https://reactjs.org/docs/introducing-jsx.html), which stands for JavaScript and XML, is an extension of JavaScript that brings HTML-like syntax to a JavaScript environment. It was invented by the React team for use in React applications, but can be used to develop other applications — like Vue apps, for instance.
 
-
        The following shows a simple JSX example:
        
+The following shows a simple JSX example:
 
-
        const subject = "World";
+```js
+const subject = "World";
 const header = (
-  <header>
-    <h1>Hello, {subject}!</h1>
-  </header>
-);
        
+  
        
+    
        Hello, {subject}!
        
+  
        
+);
+```
 
-
        This expression represents an HTML <header> element with a <h1> element inside. The curly braces around subject on line 4 tell the application to read the value of the subject constant and insert it into our <h1>.
        
+This expression represents an HTML [`
        `](/en-US/docs/Web/HTML/Element/header) element with a [`
        `](/en-US/docs/Web/HTML/Element/Heading_Elements) element inside. The curly braces around `subject` on line 4 tell the application to read the value of the `subject` constant and insert it into our `
        `.
 
-
        When used with React, the JSX from the previous snippet would be compiled into this:
        
+When used with React, the JSX from the previous snippet would be compiled into this:
 
-
        var subject = "World";
+```js
+var subject = "World";
 var header = React.createElement("header", null,
   React.createElement("h1", null, "Hello, ", subject, "!")
-);
        
+);
+```
 
-
        When ultimately rendered by the browser, the above snippet will produce HTML that looks like this:
        
+When ultimately rendered by the browser, the above snippet will produce HTML that looks like this:
 
-
        <header>
-  <h1>Hello, World!</h1>
-</header>
        
+```html
+
        
+  
        Hello, World!
        
+
        
+```
 
-
        Handlebars
        
+### Handlebars
 
-
        The Handlebars templating language is not specific to Ember applications, but it is heavily utilized in Ember apps. Handlebars code resembles HTML, but it has the option of pulling data in from elsewhere. This data can be used to influence the HTML that an application ultimately builds.
        
+The [Handlebars](https://handlebarsjs.com/) templating language is not specific to Ember applications, but it is heavily utilized in Ember apps. Handlebars code resembles HTML, but it has the option of pulling data in from elsewhere. This data can be used to influence the HTML that an application ultimately builds.
 
-
        Like JSX, Handlebars uses curly braces to inject the value of a variable. Handlebars uses a double-pair of curly braces, instead of a single pair.
        
+Like JSX, Handlebars uses curly braces to inject the value of a variable. Handlebars uses a double-pair of curly braces, instead of a single pair.
 
-
        Given this Handlebars template:
        
+Given this Handlebars template:
 
-
        <header>
-  <h1>Hello, \{{subject}}!</h1>
-</header>
        
+```html
+
        
+  
        Hello, \{{subject}}!
        
+
        
+```
 
-
        And this data:
        
+And this data:
 
-
        {
+```js
+{
   subject: "World"
-}
        
+}
+```
 
-
        Handlebars will build HTML like this:
        
+Handlebars will build HTML like this:
 
-
        <header>
-  <h1>Hello, World!</h1>
-</header>
        
+```html
+
        
+  
        Hello, World!
        
+
        
+```
 
-
        TypeScript
        
+### TypeScript
 
-
        TypeScript is a superset of JavaScript, meaning it extends JavaScript — all JavaScript code is valid TypeScript, but not the other way around. TypeScript is useful for the strictness it allows developers to enforce on their code. For instance, consider a function add(), which takes integers a and b and returns their sum.
        
+[TypeScript](https://www.typescriptlang.org/) is a _superset_ of JavaScript, meaning it extends JavaScript — all JavaScript code is valid TypeScript, but not the other way around. TypeScript is useful for the strictness it allows developers to enforce on their code. For instance, consider a function `add()`, which takes integers `a` and `b` and returns their sum.
 
-
        In JavaScript, that function could be written like this:
        
+In JavaScript, that function could be written like this:
 
-
        function add(a, b) {
+```js
+function add(a, b) {
   return a + b;
-}
        
+}
+```
 
-
        This code might be trivial for someone accustomed to JavaScript, but it could still be clearer. JavaScript lets us use the + operator to concatenate strings together, so this function would technically still work if a and b were strings — it just might not give you the result you'd expect. What if we wanted to only allow numbers to be passed into this function? TypeScript makes that possible:
        
+This code might be trivial for someone accustomed to JavaScript, but it could still be clearer. JavaScript lets us use the `+` operator to concatenate strings together, so this function would technically still work if `a` and `b` were strings — it just might not give you the result you'd expect. What if we wanted to only allow numbers to be passed into this function? TypeScript makes that possible:
 
-
        function add(a: number, b: number) {
+```js
+function add(a: number, b: number) {
   return a + b;
-}
        
+}
+```
 
-
        The : number written after each parameter here tells TypeScript that both a and b must be numbers. If we were to use this function and pass '2' into it as an argument, TypeScript would raise an error during compilation, and we would be forced to fix our mistake. We could write our own JavaScript that raises these errors for us, but it would make our source code significantly more verbose. It probably makes more sense to let TypeScript handle such checks for us.
        
+The `: number` written after each parameter here tells TypeScript that both `a` and `b` must be numbers. If we were to use this function and pass `'2'` into it as an argument, TypeScript would raise an error during compilation, and we would be forced to fix our mistake. We could write our own JavaScript that raises these errors for us, but it would make our source code significantly more verbose. It probably makes more sense to let TypeScript handle such checks for us.
 
-
        Writing components
        
+## Writing components
 
-
        As mentioned in the previous chapter, most frameworks have some kind of component model. React components can be written with JSX, Ember components with Handlebars, and Angular and Vue components with a templating syntax that lightly extends HTML.
        
+As mentioned in the previous chapter, most frameworks have some kind of component model. React components can be written with JSX, Ember components with Handlebars, and Angular and Vue components with a templating syntax that lightly extends HTML.
 
-
        Regardless of their opinions on how components should be written, each framework's components offer a way to describe the external properties they may need, the internal state that the component should manage, and the events a user can trigger on the component's markup.
        
+Regardless of their opinions on how components should be written, each framework's components offer a way to describe the external properties they may need, the internal state that the component should manage, and the events a user can trigger on the component's markup.
 
-
        The code snippets in the rest of this section will use React as an example, and are written with JSX.
        
+The code snippets in the rest of this section will use React as an example, and are written with JSX.
 
-
        Properties
        
+### Properties
 
-
        Properties, or props, are external data that a component needs in order to render. Suppose you're building a website for an online magazine, and you need to be sure that each contributing writer gets credit for their work. You might create an AuthorCredit component to go with each article. This component needs to display a portrait of the author and a short byline about them. In order to know what image to render, and what byline to print, AuthorCredit needs to accept some props.
        
+Properties, or **props**, are external data that a component needs in order to render. Suppose you're building a website for an online magazine, and you need to be sure that each contributing writer gets credit for their work. You might create an `AuthorCredit` component to go with each article. This component needs to display a portrait of the author and a short byline about them. In order to know what image to render, and what byline to print, `AuthorCredit` needs to accept some props.
 
-
        A React representation of this AuthorCredit component might look something like this:
        
+A React representation of this `AuthorCredit` component might look something like this:
 
-
        function AuthorCredit(props) {
+```js
+function AuthorCredit(props) {
   return (
-    <figure>
-      <img src={props.src} alt={props.alt} />
-      <figcaption>{props.byline}</figcaption>
-    </figure>
+    
        
+      {props.alt}
+      
        {props.byline}
        
+    
        
   );
-}
        
+}
+```
 
-
        {props.src}, {props.alt}, and {props.byline} represent where our props will be inserted into the component. To render this component, we would write code like this in the place where we want it rendered (which will probably be inside another component):
        
+`{props.src}`, `{props.alt}`, and `{props.byline}` represent where our props will be inserted into the component. To render this component, we would write code like this in the place where we want it rendered (which will probably be inside another component):
 
-
        <AuthorCredit
+```js
+
+/>
+```
 
-
        This will ultimately render the following <figure> element in the browser, with its structure as defined in the AuthorCredit component, and its content as defined in the props included on the AuthorCredit component call:
        
+This will ultimately render the following [`
        `](/en-US/docs/Web/HTML/Element/figure) element in the browser, with its structure as defined in the `AuthorCredit` component, and its content as defined in the props included on the `AuthorCredit` component call:
 
-
        <figure>
-  <img
+```html
+
        
+  Portrait of Zelda Schiff
+  
        
     Zelda Schiff is editor-in-chief of the Library Times.
-  </figcaption>
-</figure>
        
+  
+
        
+```
 
-
        State
        
+### State
 
-
        We talked about the concept of state in the previous chapter — a robust state-handling mechanism is key to an effective framework, and each component may have data that needs its state controlled. This state will persist in some way as long as the component is in use. Like props, state can be used to affect how a component is rendered.
        
+We talked about the concept of **state** in the previous chapter — a robust state-handling mechanism is key to an effective framework, and each component may have data that needs its state controlled. This state will persist in some way as long as the component is in use. Like props, state can be used to affect how a component is rendered.
 
-
        As an example, consider a button that counts how many times it has been clicked. This component should be responsible for tracking its own count state, and could be written like this:
        
+As an example, consider a button that counts how many times it has been clicked. This component should be responsible for tracking its own _count_ state, and could be written like this:
 
-
        function CounterButton() {
+```js
+function CounterButton() {
   const [count] = useState(0);
   return (
-    <button>Clicked {count} times</button>
+    
   );
-}
        
+}
+```
 
-
        useState() is a React hook which, given an initial data value, will keep track of that value as it is updated. The code will be initially rendered like so in the browser:
        
+[`useState()`](https://reactjs.org/docs/hooks-reference.html#usestate) is a **[React hook](https://reactjs.org/docs/hooks-intro.html)** which, given an initial data value, will keep track of that value as it is updated. The code will be initially rendered like so in the browser:
 
-
        <button>Clicked 0 times</button>
        
+```html
+
+```
 
-
        The useState() call keeps track of the count value in a robust way across the app, without you needing to write code to do that yourself.
        
+The `useState()` call keeps track of the `count` value in a robust way across the app, without you needing to write code to do that yourself.
 
-
        Events
        
+### Events
 
-
        In order to be interactive, components need ways to respond to browser events, so our applications can respond to our users. Frameworks each provide their own syntax for listening to browser events, which reference the names of the equivalent native browser events.
        
+In order to be interactive, components need ways to respond to browser events, so our applications can respond to our users. Frameworks each provide their own syntax for listening to browser events, which reference the names of the equivalent native browser events.
 
-
        In React, listening for the click event requires a special property, onClick. Let’s update our CounterButton code from above to allow it to count clicks:
        
+In React, listening for the [`click`](/en-US/docs/Web/API/Element/click_event) event requires a special property, `onClick`. Let’s update our `CounterButton` code from above to allow it to count clicks:
 
-
        function CounterButton() {
+```js
+function CounterButton() {
   const [count, setCount] = useState(0);
   return (
-    <button onClick={() => setCount(count + 1)}>Clicked {count} times</button>
+    
   );
-}
        
+}
+```
 
-
        In this version we are using additional useState() functionality to create a special setCount() function, which we can invoke to update the value of count. We call this function on line 4, and set count to whatever its current value is, plus one.
        
+In this version we are using additional `useState()` functionality to create a special `setCount()` function, which we can invoke to update the value of `count`. We call this function on line 4, and set `count` to whatever its current value is, plus one.
 
-
        Styling components
        
+## Styling components
 
-
        Each framework offers a way to define styles for your components — or for the application as a whole. Although each framework’s approach to defining the styles of a component is slightly different, all of them give you multiple ways to do so. With the addition of some helper modules, you can style your framework apps in Sass or Less, or transpile your CSS stylesheets with PostCSS.
        
+Each framework offers a way to define styles for your components — or for the application as a whole. Although each framework’s approach to defining the styles of a component is slightly different, all of them give you multiple ways to do so. With the addition of some helper modules, you can style your framework apps in [Sass](https://sass-lang.com/) or [Less](http://lesscss.org/), or transpile your CSS stylesheets with [PostCSS](https://postcss.org/).
 
-
        Handling dependencies
        
+## Handling dependencies
 
-
        All major frameworks provide mechanisms for handling dependencies — using components inside other components, sometimes with multiple hierarchy levels. As with other features, the exact mechanism will differ between frameworks, but the end result is the same. Components tend to import components into other components using the standard JavaScript module syntax, or at least something similar.
        
+All major frameworks provide mechanisms for handling dependencies — using components inside other components, sometimes with multiple hierarchy levels. As with other features, the exact mechanism will differ between frameworks, but the end result is the same. Components tend to import components into other components using the standard [JavaScript module syntax](/en-US/docs/Web/JavaScript/Guide/Modules), or at least something similar.
 
-
        Components in components
        
+### Components in components
 
-
        One key benefit of component-based UI architecture is that components can be composed together. Just like you can write HTML tags inside each other to build a website, you can use components inside other components to build a web application. Each framework allows you to write components that utilize (and thus depend on) other components.
        
+One key benefit of component-based UI architecture is that components can be composed together. Just like you can write HTML tags inside each other to build a website, you can use components inside other components to build a web application. Each framework allows you to write components that utilize (and thus depend on) other components.
 
-
        For example, our AuthorCredit React component might be utilized inside an Article component. That means that Article would need to import AuthorCredit.
        
+For example, our `AuthorCredit` React component might be utilized inside an `Article` component. That means that `Article` would need to import `AuthorCredit`.
 
-
        import AuthorCredit from "./components/AuthorCredit";
        
+```js
+import AuthorCredit from "./components/AuthorCredit";
+```
 
-
        Once that’s done, AuthorCredit could be used inside the Article component like this:
        
+Once that’s done, `AuthorCredit` could be used inside the `Article` component like this:
 
-
          ...
+```js
+  ...
 
-<AuthorCredit />
+
 
-  ...
        
+  ...
+```
 
-
        Dependency injection
        
+### Dependency injection
 
-
        Real-world applications can often involve component structures with multiple levels of nesting. An AuthorCredit component nested many levels deep might, for some reason, need data from the very root level of our application.
        
+Real-world applications can often involve component structures with multiple levels of nesting. An `AuthorCredit` component nested many levels deep might, for some reason, need data from the very root level of our application.
 
-
        Let's say that the magazine site we're building is structured like this:
        
+Let's say that the magazine site we're building is structured like this:
 
-
        <App>
-  <Home>
-    <Article>
-      <AuthorCredit {/* props */} />
-    </Article>
-  </Home>
-</App>
        
+```js
+
+  
+    
        
+      
+    
        
+          
+        
+```
 
-
        Our App component has data that our AuthorCredit component needs. We could rewrite Home and Article so that they know to pass props down, but this could get tedious if there are many, many levels between the origin and destination of our data. It's also excessive: Home and Article don’t actually make use of the author's portrait or byline, but if we want to get that information into the AuthorCredit, we will need to change Home and Author to accommodate it.
        
+Our `App` component has data that our `AuthorCredit` component needs. We could rewrite `Home` and `Article` so that they know to pass props down, but this could get tedious if there are many, many levels between the origin and destination of our data. It's also excessive: `Home` and `Article` don’t actually make use of the author's portrait or byline, but if we want to get that information into the `AuthorCredit`, we will need to change `Home` and `Author` to accommodate it.
 
-
        The problem of passing data through many layers of components is called prop drilling, and it’s not ideal for large applications.
        
+The problem of passing data through many layers of components is called prop drilling, and it’s not ideal for large applications.
 
-
        To circumvent prop drilling, frameworks provide functionality known as dependency injection, which is a way to get certain data directly to the components that need it, without passing it through intervening levels. Each framework implements dependency injection under a different name, and in a different way, but the effect is ultimately the same.
        
+To circumvent prop drilling, frameworks provide functionality known as dependency injection, which is a way to get certain data directly to the components that need it, without passing it through intervening levels. Each framework implements dependency injection under a different name, and in a different way, but the effect is ultimately the same.
 
-
        Angular calls this process dependency injection; Vue has provide() and inject() component methods; React has a Context API; Ember shares state through services.
        
+Angular calls this process [dependency injection](https://angular.io/guide/dependency-injection); Vue has [`provide()` and `inject()` component methods](https://vuejs.org/v2/api/#provide-inject); React has a [Context API](https://reactjs.org/docs/context.html); Ember shares state through [services](https://guides.emberjs.com/release/services/).
 
-
        Lifecycle
        
+### Lifecycle
 
-
        In the context of a framework, a component’s lifecycle is a collection of phases a component goes through from the time it is rendered by the browser (often called mounting) to the time that it is removed from the DOM (often called unmounting). Each framework names these lifecycle phases differently, and not all give developers access to the same phases. All of the frameworks follow the same general model: they allow developers to perform certain actions when the component mounts, when it renders, when it unmounts, and at many phases in between these.
        
+In the context of a framework, a component’s **lifecycle** is a collection of phases a component goes through from the time it is rendered by the browser (often called _mounting_) to the time that it is removed from the DOM (often called _unmounting_). Each framework names these lifecycle phases differently, and not all give developers access to the same phases. All of the frameworks follow the same general model: they allow developers to perform certain actions when the component _mounts_, when it _renders_, when it _unmounts_, and at many phases in between these.
 
-
        The render phase is the most crucial to understand, because it is repeated the most times as your user interacts with your application. It's run every time the browser needs to render something new, whether that new information is an addition to what's in the browser, a deletion, or an edit of what’s there.
        
+The _render_ phase is the most crucial to understand, because it is repeated the most times as your user interacts with your application. It's run every time the browser needs to render something new, whether that new information is an addition to what's in the browser, a deletion, or an edit of what’s there.
 
-
        This diagram of a React component's lifecycle offers a general overview of the concept.
        
+This [diagram of a React component's lifecycle](http://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/) offers a general overview of the concept.
 
-
        Rendering elements
        
+## Rendering elements
 
-
        Just as with lifecycles, frameworks take different-but-similar approaches to how they render your applications. All of them track the current rendered version of your browser's DOM, and each makes slightly different decisions about how the DOM should change as components in your application re-render. Because frameworks make these decisions for you, you typically don't interact with the DOM yourself. This abstraction away from the DOM is more complex and more memory-intensive than updating the DOM yourself, but without it, frameworks could not allow you to program in the declarative way they’re known for.
        
+Just as with lifecycles, frameworks take different-but-similar approaches to how they render your applications. All of them track the current rendered version of your browser's DOM, and each makes slightly different decisions about how the DOM should change as components in your application re-render. Because frameworks make these decisions for you, you typically don't interact with the DOM yourself. This abstraction away from the DOM is more complex and more memory-intensive than updating the DOM yourself, but without it, frameworks could not allow you to program in the declarative way they’re known for.
 
-
        The Virtual DOM is an approach whereby information about your browser's DOM is stored in JavaScript memory. Your application updates this copy of the DOM, then compares it to the "real" DOM — the DOM that is actually rendered for your users — in order to decide what to render. The application builds a "diff" to compare the differences between the updated virtual DOM and the currently rendered DOM, and uses that diff to apply updates to the real DOM. Both React and Vue utilize a virtual DOM model, but they do not apply the exact same logic when diffing or rendering.
        
+The **Virtual DOM** is an approach whereby information about your browser's DOM is stored in JavaScript memory. Your application updates this copy of the DOM, then compares it to the "real" DOM — the DOM that is actually rendered for your users — in order to decide what to render. The application builds a "diff" to compare the differences between the updated virtual DOM and the currently rendered DOM, and uses that diff to apply updates to the real DOM. Both React and Vue utilize a virtual DOM model, but they do not apply the exact same logic when diffing or rendering.
 
-
        You can read more about the Virtual DOM in the React docs.
        
+You can [read more about the Virtual DOM in the React docs](https://reactjs.org/docs/faq-internals.html#what-is-the-virtual-dom).
 
-
        The Incremental DOM is similar to the virtual DOM in that it builds a DOM diff to decide what to render, but different in that it doesn't create a complete copy of the DOM in JavaScript memory. It ignores the parts of the DOM that do not need to be changed. Angular is the only framework discussed so far in this module that uses an incremental DOM.
        
+The **Incremental DOM** is similar to the virtual DOM in that it builds a DOM diff to decide what to render, but different in that it doesn't create a complete copy of the DOM in JavaScript memory. It ignores the parts of the DOM that do not need to be changed. Angular is the only framework discussed so far in this module that uses an incremental DOM.
 
-
        You can read more about the Incremental DOM on the Auth0 blog.
        
+You can [read more about the Incremental DOM on the Auth0 blog](https://auth0.com/blog/incremental-dom/).
 
-
        The Glimmer VM is unique to Ember. It is not a virtual DOM nor an incremental DOM; it is a separate process through which Ember's templates are transpiled into a kind of "byte code" that is easier and faster to read than JavaScript.
        
+The **Glimmer VM** is unique to Ember. It is not a virtual DOM nor an incremental DOM; it is a separate process through which Ember's templates are transpiled into a kind of "byte code" that is easier and faster to read than JavaScript.
 
-
        Routing
        
+## Routing
 
-
        As mentioned in the previous chapter, routing is an important part of the web experience. To avoid a broken experience in sufficiently complex apps with lots of views, each of the frameworks covered in this module provides a library (or more than one library) that helps developers implement client-side routing in their applications.
        
+As [mentioned in the previous chapter, routing](/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Introduction#Routing) is an important part of the web experience. To avoid a broken experience in sufficiently complex apps with lots of views, each of the frameworks covered in this module provides a library (or more than one library) that helps developers implement client-side routing in their applications.
 
-
        Testing
        
+## Testing
 
-
        All applications benefit from test coverage that ensures your software continues to behave in the way that you'd expect, and web applications are no different. Each framework's ecosystem provides tooling that facilitates the writing of tests. Testing tools are not built into the frameworks themselves, but the command-line interface tools used to generate framework apps give you access to the appropriate testing tools.
        
+All applications benefit from test coverage that ensures your software continues to behave in the way that you'd expect, and web applications are no different. Each framework's ecosystem provides tooling that facilitates the writing of tests. Testing tools are not built into the frameworks themselves, but the command-line interface tools used to generate framework apps give you access to the appropriate testing tools.
 
-
        Each framework has extensive tools in its ecosystem, with capabilities for unit and integration testing alike.
        
+Each framework has extensive tools in its ecosystem, with capabilities for unit and integration testing alike.
 
-
        Testing Library is a suite of testing utilities that has tools for many JavaScript environments, including React, Vue, and Angular.  The Ember docs cover the testing of Ember apps.
        
+[Testing Library](https://testing-library.com/) is a suite of testing utilities that has tools for many JavaScript environments, including React, Vue, and Angular. The Ember docs cover the [testing of Ember apps](https://guides.emberjs.com/release/testing/).
 
-
        Here’s a quick test for our CounterButton written with the help of React Testing Library — it tests a number of things, such as the button's existence, and whether the button is displaying the correct text after being clicked 0, 1, and 2 times:
        
+Here’s a quick test for our `CounterButton` written with the help of React Testing Library — it tests a number of things, such as the button's existence, and whether the button is displaying the correct text after being clicked 0, 1, and 2 times:
 
-
        import React from "react";
+```js
+import React from "react";
 import { render, fireEvent } from "@testing-library/react";
 import "@testing-library/jest-dom/extend-expect";
 
 import CounterButton from "./CounterButton";
 
-it("renders a semantic with an initial state of 0", () => {
-  const { getByRole } = render(<CounterButton />);
+it("renders a semantic with an initial state of 0", () => {
+  const { getByRole } = render();
   const btn = getByRole("button");
 
   expect(btn).toBeInTheDocument();
   expect(btn).toHaveTextContent("Clicked 0 times");
 });
 
-it("Increments the count when clicked", () => {
-  const { getByRole } = render(<CounterButton />);
+it("Increments the count when clicked", () => {
+  const { getByRole } = render();
   const btn = getByRole("button");
 
   fireEvent.click(btn);
@@ -282,73 +319,63 @@ it("Increments the count when clicked", () => {
 
   fireEvent.click(btn);
   expect(btn).toHaveTextContent("Clicked 2 times");
-});
        
-
-
        Summary
        
-
-
        At this point you should have more of an idea about the actual languages, features, and tools you'll be using as you create applications with frameworks. I'm sure you’re enthusiastic to get going and actually do some coding, and that's what you are going to do next! At this point you can choose which framework you'd like to start learning first:
        
-
-
-
-
        
-
        备注： We only have three framework tutorial series available now, but we hope to have more available in the future.
        
-
        
-
-
        {{PreviousMenuNext("Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Introduction","Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_getting_started", "Learn/Tools_and_testing/Client-side_JavaScript_frameworks")}}
        
-
-
        In this module
        
-
-
+});
+```
+
+## Summary
+
+At this point you should have more of an idea about the actual languages, features, and tools you'll be using as you create applications with frameworks. I'm sure you’re enthusiastic to get going and actually do some coding, and that's what you are going to do next! At this point you can choose which framework you'd like to start learning first:
+
+- [React](/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_getting_started)
+- [Ember](/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_getting_started)
+- [Vue](/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_getting_started)
+
+> **备注：** We only have three framework tutorial series available now, but we hope to have more available in the future.
+
+{{PreviousMenuNext("Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Introduction","Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_getting_started", "Learn/Tools_and_testing/Client-side_JavaScript_frameworks")}}
+
+## In this module
+
+- [Introduction to client-side frameworks](/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Introduction)
+- [Framework main features](/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Main_features)
+- React
+
+  - [Getting started with React](/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_getting_started)
+  - [Beginning our React todo list](/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_todo_list_beginning)
+  - [Componentizing our React app](/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_components)
+  - [React interactivity: Events and state](/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_interactivity_events_state)
+  - [React interactivity: Editing, filtering, conditional rendering](/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_interactivity_filtering_conditional_rendering)
+  - [Accessibility in React](/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_accessibility)
+  - [React resources](/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_resources)
+
+- Ember
+
+  - [Getting started with Ember](/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_getting_started)
+  - [Ember app structure and componentization](/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_structure_componentization)
+  - [Ember interactivity: Events, classes and state](/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_interactivity_events_state)
+  - [Ember Interactivity: Footer functionality, conditional rendering](/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_conditional_footer)
+  - [Routing in Ember](/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_routing)
+  - [Ember resources and troubleshooting](/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_resources)
+
+- Vue
+
+  - [Getting started with Vue](/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_getting_started)
+  - [Creating our first Vue component](/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_first_component)
+  - [Rendering a list of Vue components](/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_rendering_lists)
+  - [Adding a new todo form: Vue events, methods, and models](/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_methods_events_models)
+  - [Styling Vue components with CSS](/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_styling)
+  - [Using Vue computed properties](/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_computed_properties)
+  - [Vue conditional rendering: editing existing todos](/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_conditional_rendering)
+  - [Focus management with Vue refs](/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_refs_focus_management)
+  - [Vue resources](/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_resources)
+
+- Svelte
+
+  - [Getting started with Svelte](/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_getting_started)
+  - [Starting our Svelte Todo list app](/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_Todo_list_beginning)
+  - [Dynamic behavior in Svelte: working with variables and props](/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_variables_props)
+  - [Componentizing our Svelte app](/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_components)
+  - [Advanced Svelte: Reactivity, lifecycle, accessibility](/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_reactivity_lifecycle_accessibility)
+  - [Working with Svelte stores](/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_stores)
+  - [TypeScript support in Svelte](/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_TypeScript)
+  - [Deployment and next steps](/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_deployment_next)
diff --git a/files/zh-cn/learn/tools_and_testing/client-side_javascript_frameworks/react_components/index.md b/files/zh-cn/learn/tools_and_testing/client-side_javascript_frameworks/react_components/index.md
index 242967d6396ce5..35d74fa0139e7a 100644
--- a/files/zh-cn/learn/tools_and_testing/client-side_javascript_frameworks/react_components/index.md
+++ b/files/zh-cn/learn/tools_and_testing/client-side_javascript_frameworks/react_components/index.md
@@ -3,448 +3,484 @@ title: Componentizingapp
 slug: Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_components
 translation_of: Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_components
 ---
-
        {{LearnSidebar}}
        
+{{LearnSidebar}}{{PreviousMenuNext("Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_todo_list_beginning","Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_interactivity_events_state", "Learn/Tools_and_testing/Client-side_JavaScript_frameworks")}}
 
-
        {{PreviousMenuNext("Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_todo_list_beginning","Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_interactivity_events_state", "Learn/Tools_and_testing/Client-side_JavaScript_frameworks")}}
        
-
-
        At this point, our app is a monolith. Before we can make it do things, we need to break it apart into manageable, descriptive components. React doesn’t have any hard rules for what is and isn’t a component – that’s up to you! In this article we will show you a sensible way to break our app up into components.
        
+At this point, our app is a monolith. Before we can make it do things, we need to break it apart into manageable, descriptive components. React doesn’t have any hard rules for what is and isn’t a component – that’s up to you! In this article we will show you a sensible way to break our app up into components.
 
 
- 
-  
-   
-   
-  
-  
-   
-   
-  
- 
+  
+    
+      
+      
+    
+    
+      
+      
+    
+  
        Prerequisites:
-    
        Familiarity with the core HTML, CSS, and JavaScript languages, knowledge of the terminal/command line.
        
-   
        Objective:To show a sensible way of breaking our todo list app into components.
        Prerequisites:
+        
        
+          Familiarity with the core HTML,
+          CSS, and
+          JavaScript languages,
+          knowledge of the
+          terminal/command line.
+        
        
+      
        Objective:
+        To show a sensible way of breaking our todo list app into components.
+      
        
 
        
 
-
        Defining our first component
        
+## Defining our first component
 
-
        Defining a component can seem tricky until you have some practice, but the gist is:
        
+Defining a component can seem tricky until you have some practice, but the gist is:
 
-
          
- 
        • If it represents an obvious "chunk" of your app, it's probably a component
          • 
- 
        • If it gets reused often, it's probably a component.
          • 
-
        
+- If it represents an obvious "chunk" of your app, it's probably a component
+- If it gets reused often, it's probably a component.
 
-
        That second bullet is especially valuable: making a component out of common UI elements allows you to change your code in one place and see those changes everywhere that component is used. You don't have to break everything out into components right away, either. Let's take the second bullet point as inspiration and make a component out of the most reused, most important piece of the UI: a todo list item.
        
+That second bullet is especially valuable: making a component out of common UI elements allows you to change your code in one place and see those changes everywhere that component is used. You don't have to break everything out into components right away, either. Let's take the second bullet point as inspiration and make a component out of the most reused, most important piece of the UI: a todo list item.
 
-
        Make a <Todo />
        
+## Make a ``
 
-
        Before we can make a component, we should create a new file for it. In fact, we should make a directory just for our components. The following commands make a components directory and then, within that, a file called Todo.js. Make sure you're in the root of your app before you run these!
        
+Before we can make a component, we should create a new file for it. In fact, we should make a directory just for our components. The following commands make a `components` directory and then, within that, a file called `Todo.js`. Make sure you're in the root of your app before you run these!
 
-
        mkdir src/components
-touch src/components/Todo.js
        
+```bash
+mkdir src/components
+touch src/components/Todo.js
+```
 
-
        Our new Todo.js file is currently empty! Open it up and give it its first line:
        
+Our new `Todo.js` file is currently empty! Open it up and give it its first line:
 
-
        import React from "react";
        
+```js
+import React from "react";
+```
 
-
        Since we're going to make a component called Todo, you can start adding the code for that to Todo.js too, as follows. In this code, we define the function and export it on the same line:
        
+Since we're going to make a component called `Todo`, you can start adding the code for that to `Todo.js` too, as follows. In this code, we define the function and export it on the same line:
 
-
        export default function Todo() {
+```js
+export default function Todo() {
   return (
 
   );
-}
        
+}
+```
 
-
        This is OK so far, but our component has to return something! Go back to src/App.js, copy the first <li> from inside the unordered list, and paste it into Todo.js so that it reads like this:
        
+This is OK so far, but our component has to return something! Go back to `src/App.js`, copy the first [`
      2. `](/en-US/docs/Web/HTML/Element/li) from inside the unordered list, and paste it into `Todo.js` so that it reads like this:
 
-
        export default function Todo() {
+```js
+export default function Todo() {
   return (
-    <li className="todo stack-small">
-      <div className="c-cb">
-        <input id="todo-0" type="checkbox" defaultChecked={true} />
-        <label className="todo-label" htmlFor="todo-0">
+    
      3. 
+      
        
+        
+        
+      
        
+      
        
+        
+        
+      
        
+    
        4. 
   );
-}
        
+}
+```
 
-
        
-
        备注： Components must always return something. If at any point in the future you try to render a component that does not return anything, React will display an error in your browser.
        
-
        
+> **备注：** Components must always return something. If at any point in the future you try to render a component that does not return anything, React will display an error in your browser.
 
-
        Our Todo component is complete, at least for now; now we can use it. In App.js, add the following line near the top of the file to import Todo:
        
+Our `Todo` component is complete, at least for now; now we can use it. In `App.js`, add the following line near the top of the file to import `Todo`:
 
-
        import Todo from "./components/Todo";
        
+```js
+import Todo from "./components/Todo";
+```
 
-
        With this component imported, you can replace all of the <li> elements in App.js with <Todo /> component calls. Your <ul> should read like this:
        
+With this component imported, you can replace all of the `
      4. ` elements in `App.js` with `` component calls. Your `
          ` should read like this:
 
-
          <ul
+```js
+
            
+>
+  
+  
+  
+
          
+```
 
-
          When you look back at your browser, you'll notice something unfortunate: your list now repeats the first task three times!
          
+When you look back at your browser, you'll notice something unfortunate: your list now repeats the first task three times!
 
-
          Our todo list app, with todo components repeating because the label is hardcoded into the component
          
+![Our todo list app, with todo components repeating because the label is hardcoded into the component](todo-list-repeating-todos.png)
 
-
          We don't only want to eat; we have other things to — well — to do. Next we'll look at how we can make different component calls render unique content.
          
+We don't only want to eat; we have other things to — well — to do. Next we'll look at how we can make different component calls render unique content.
 
-
          Make a unique <Todo />
          
+## Make a _unique_ ``
 
-
          Components are powerful because they let us re-use pieces of our UI, and refer to one place for the source of that UI. The problem is, we don't typically want to reuse all of each component; we want to reuse most parts, and change small pieces. This is where props come in.
          
+Components are powerful because they let us re-use pieces of our UI, and refer to one place for the source of that UI. The problem is, we don't typically want to reuse all of each component; we want to reuse most parts, and change small pieces. This is where props come in.
 
-
          What's in a name?
          
+### What's in a `name`?
 
-
          In order to track the names of tasks we want to complete, we should ensure that each <Todo /> component renders a unique name.
          
+In order to track the names of tasks we want to complete, we should ensure that each `` component renders a unique name.
 
-
          In App.js, give each <Todo /> a name prop. Let’s use the names of our tasks that we had before:
          
+In `App.js`, give each `` a name prop. Let’s use the names of our tasks that we had before:
 
-
          <Todo name="Eat" />
-<Todo name="Sleep" />
-<Todo name="Repeat" />
          
+```js
+
+
+
+```
 
-
          When your browser refreshes, you will see… the exact same thing as before. We gave our <Todo /> some props, but we aren't using them yet. Let's go back to Todo.js and remedy that.
          
+When your browser refreshes, you will see… the exact same thing as before. We gave our `` some props, but we aren't using them yet. Let's go back to `Todo.js` and remedy that.
 
-
          First modify your Todo() function definition so that it takes props as a parameter. You can console.log() your props as we did before, if you'd like to check that they are being received by the component correctly.
          
+First modify your `Todo()` function definition so that it takes `props` as a parameter. You can `console.log()` your `props` as we did before, if you'd like to check that they are being received by the component correctly.
 
-
          Once you're confident that your component is getting its props, you can replace every occurrence of Eat with your name prop. Remember: when you're in the middle of a JSX expression, you use curly braces to inject the value of a variable.
          
+Once you're confident that your component is getting its `props`, you can replace every occurrence of `Eat` with your `name` prop. Remember: when you're in the middle of a JSX expression, you use curly braces to inject the value of a variable.
 
-
          Putting all that together, your Todo() function should read like this:
          
+Putting all that together, your `Todo()` function should read like this:
 
-
          export default function Todo(props) {
+```js
+export default function Todo(props) {
   return (
-    <li className="todo stack-small">
-      <div className="c-cb">
-        <input id="todo-0" type="checkbox" defaultChecked={true} />
-        <label className="todo-label" htmlFor="todo-0">
+    
        • 
+      
          
+        
+        
+      
          
+      
          
+        
+        
+      
          
+    
          • 
   );
-}
          
+}
+```
 
-
          Now your browser should show three unique tasks. Another problem remains though: they're all still checked by default.
          
+_Now_ your browser should show three unique tasks. Another problem remains though: they're all still checked by default.
 
-
          Our todo list, with different todo labels now they are passed into the components as props
          
+![Our todo list, with different todo labels now they are passed into the components as props](todo-list-unique-todos.png)
 
-
          Is it completed?
          
+### Is it `completed`?
 
-
          In our original static list, only Eat was checked. Once again, we want to reuse most of the UI that makes up a <Todo />  component, but change one thing. That's a good job for another prop!  Give each <Todo /> call in App.js a new prop of completed. The first (Eat) should have a value of true; the rest should be false:
          
+In our original static list, only `Eat` was checked. Once again, we want to reuse _most_ of the UI that makes up a `` component, but change one thing. That's a good job for another prop! Give each `` call in `App.js` a new prop of `completed`. The first (`Eat`) should have a value of `true`; the rest should be `false`:
 
-
          <Todo name="Eat" completed={true} />
-<Todo name="Sleep" completed={false} />
-<Todo name="Repeat" completed={false} />
          
+```js
+
+
+
+```
 
-
          As before, we must go back to Todo.js to actually use these props. Change the defaultChecked attribute on the <input /> so that its value is equal to the completed prop. Once you’re done, the Todo component's <input /> element will read like this:
          
+As before, we must go back to `Todo.js` to actually use these props. Change the `defaultChecked` attribute on the `` so that its value is equal to the `completed` prop. Once you’re done, the Todo component's `` element will read like this:
 
-
          <input id="todo-0" type="checkbox" defaultChecked={props.completed} />
          
+```js
+
+```
 
-
          And your browser should update to show only Eat being checked:
          
+And your browser should update to show only `Eat` being checked:
 
-
          Our todo list app, now with differing checked states - some checkboxes are checked, others not
          
+![Our todo list app, now with differing checked states - some checkboxes are checked, others not](todo-list-differing-checked-states.png)
 
-
          If you change each <Todo /> component’s completed prop, your browser will check or uncheck the equivalent rendered checkboxes accordingly.
          
+If you change each `` component’s `completed` prop, your browser will check or uncheck the equivalent rendered checkboxes accordingly.
 
-
          Gimme some id, please
          
+### Gimme some `id`, please
 
-
          Right now, our <Todo /> component gives every task an id attribute of todo-0. This is bad HTML because id attributes must be unique (they are used as unique identifiers for document fragments, by CSS, JavaScript, etc.). This means we should give our component an id prop that takes a unique value for each Todo.
          
+Right now, our `` component gives every task an `id` attribute of `todo-0`. This is bad HTML because [`id` attributes](/en-US/docs/Web/HTML/Global_attributes/id) must be unique (they are used as unique identifiers for document fragments, by CSS, JavaScript, etc.). This means we should give our component an `id` prop that takes a unique value for each `Todo`.
 
-
          To follow the same pattern we had initially, let's give each instance of the <Todo /> component an ID in the format of todo-i, where i gets larger by one every time:
          
+To follow the same pattern we had initially, let's give each instance of the `` component an ID in the format of `todo-i`, where `i` gets larger by one every time:
 
-
          <Todo name="Eat" completed={true} id="todo-0" />
-<Todo name="Sleep" completed={false} id="todo-1" />
-<Todo name="Repeat" completed={false} id="todo-2" />
          
+```js
+
+
+
+```
 
-
          Now go back to Todo.js and make use of the id prop. It needs to replace the value of the id attribute of the <input /> element, as well as the value of its label's htmlFor attribute:
          
+Now go back to `Todo.js` and make use of the `id` prop. It needs to replace the value of the `id` attribute of the `` element, as well as the value of its label's `htmlFor` attribute:
 
-
          <div className="c-cb">
-  <input id={props.id} type="checkbox" defaultChecked={props.completed} />
-  <label className="todo-label" htmlFor={props.id}>
+```js
+
          
+  
+  
          
+  
+
    • 
+```
 
-
    So far, so good?
    
+## So far, so good?
 
-
    We’re making good use of React so far, but we could do better! Our code is repetitive. The three lines that render our <Todo /> component are almost identical, with only one difference: the value of each prop.
    
+We’re making good use of React so far, but we could do better! Our code is repetitive. The three lines that render our `` component are almost identical, with only one difference: the value of each prop.
 
-
    We can clean up our code with one of JavaScript's core abilities: iteration. To use iteration, we should first re-think our tasks.
    
+We can clean up our code with one of JavaScript's core abilities: iteration. To use iteration, we should first re-think our tasks.
 
-
    Tasks as data
    
+## Tasks as data
 
-
    Each of our tasks currently contains three pieces of information: its name, whether it has been checked, and its unique ID. This data translates nicely to an object. Since we have more than one task, an array of objects would work well in representing this data.
    
+Each of our tasks currently contains three pieces of information: its name, whether it has been checked, and its unique ID. This data translates nicely to an object. Since we have more than one task, an array of objects would work well in representing this data.
 
-
    In src/index.js, make a new const beneath the final import, but above ReactDOM.render():
    
+In `src/index.js`, make a new `const` beneath the final import, but above `ReactDOM.render()`:
 
-
    const DATA = [
+```js
+const DATA = [
   { id: "todo-0", name: "Eat", completed: true },
   { id: "todo-1", name: "Sleep", completed: false },
   { id: "todo-2", name: "Repeat", completed: false }
-];
    
+];
+```
 
-
    Next, we'll pass DATA to <App /> as a prop, called tasks. The final line of src/index.js should read like this:
    
+Next, we'll pass `DATA` to `` as a prop, called `tasks`. The final line of `src/index.js` should read like this:
 
-
    ReactDOM.render(<App tasks={DATA} />, document.getElementById("root"));
    
+```js
+ReactDOM.render(, document.getElementById("root"));
+```
 
-
    This array is now available to the App component as props.tasks. You can console.log() it to check, if you’d like.
    
+This array is now available to the App component as `props.tasks`. You can `console.log()` it to check, if you’d like.
 
-
    
-
    备注： ALL_CAPS constant names have no special meaning in JavaScript; they’re a convention that tells other developers "this data will never change after being defined here”.
    
-
    
+> **备注：** `ALL_CAPS` constant names have no special meaning in JavaScript; they’re a convention that tells other developers "this data will never change after being defined here”.
 
-
    Rendering with iteration
    
+## Rendering with iteration
 
-
    To render our array of objects, we have to turn each one into a <Todo /> component. JavaScript gives us an array method for transforming data into something else: Array.prototype.map().
    
+To render our array of objects, we have to turn each one into a `` component. JavaScript gives us an array method for transforming data into something else: [`Array.prototype.map()`](/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map).
 
-
    Above the return statement of App(), make a new const called taskList and use map() to transform it. Let's start by turning our tasks array into something simple: the name of each task:
    
+Above the return statement of `App()`, make a new `const` called `taskList` and use `map()` to transform it. Let's start by turning our `tasks` array into something simple: the `name` of each task:
 
-
    const taskList = props.tasks.map(task => task.name);
    
+```js
+const taskList = props.tasks.map(task => task.name);
+```
 
-
    Let’s try replacing all the children of the <ul> with taskList:
    
+Let’s try replacing all the children of the `
      ` with `taskList`:
 
-
      <ul
+```js
+
        
   {taskList}
-</ul>
      
+
    
+```
 
-
    This gets us some of the way towards showing all the components again, but we’ve got more work to do: the browser currently renders each task's name as unstructured text. We’re missing our HTML structure — the <li> and its checkboxes and buttons!
    
+This gets us some of the way towards showing all the components again, but we’ve got more work to do: the browser currently renders each task's name as unstructured text. We’re missing our HTML structure — the `
  • ` and its checkboxes and buttons!
 
-
    Our todo list app with the todo item labels just shown bunched up on one line
    
+![Our todo list app with the todo item labels just shown bunched up on one line](todo-list-unstructured-names.png)
 
-
    To fix this, we need to return a <Todo /> component from our map() function — remember that JSX allows us to mix up JavaScript and markup structures! Let's try the following instead of what we have already:
    
+To fix this, we need to return a `` component from our `map()` function — remember that JSX allows us to mix up JavaScript and markup structures! Let's try the following instead of what we have already:
 
-
     const taskList = props.tasks.map(task => <Todo />);
    
+```js
+ const taskList = props.tasks.map(task => );
+```
 
-
    Look again at your app; now our tasks look more like they used to, but they’re missing the names of the tasks themselves.  Remember that each task we map over has the id, name, and checked properties we want to pass into our <Todo /> component. If we put that knowledge together, we get code like this:
    
+Look again at your app; now our tasks look more like they used to, but they’re missing the names of the tasks themselves. Remember that each task we map over has the `id`, `name`, and `checked` properties we want to pass into our `` component. If we put that knowledge together, we get code like this:
 
-
    const taskList = props.tasks.map(task => (
-  <Todo id={task.id} name={task.name} completed={task.completed} />
-));
    
+```js
+const taskList = props.tasks.map(task => (
+  
+));
+```
 
-
    Now the app looks like it did before, and our code is less repetitive.
    
+Now the app looks like it did before, and our code is less repetitive.
 
-
    Unique keys
    
+## Unique keys
 
-
    Now that React is rendering our tasks out of an array, it has to keep track of which one is which in order to render them properly. React tries to do its own guesswork to keep track of things, but we can help it out by passing a key prop to our <Todo /> components. key is a special prop that's managed by React – you cannot use the word key for any other purpose.
    
+Now that React is rendering our tasks out of an array, it has to keep track of which one is which in order to render them properly. React tries to do its own guesswork to keep track of things, but we can help it out by passing a `key` prop to our `` components. `key` is a special prop that's managed by React – you cannot use the word `key` for any other purpose.
 
-
    Because keys should be unique, we're going to re-use the id of each task object as its key. Update your taskList constant like so:
    
+Because keys should be unique, we're going to re-use the `id` of each task object as its key. Update your `taskList` constant like so:
 
-
    const taskList = props.tasks.map(task => (
-    <Todo
+```js
+const taskList = props.tasks.map(task => (
+    
   )
-);
    
+);
+```
 
-
    You should always pass a unique key to anything you render with iteration. Nothing obvious will change in your browser, but if you do not use unique keys, React will log warnings to your console and your app may behave strangely!
    
+**You should always pass a unique key to anything you render with iteration.** Nothing obvious will change in your browser, but if you do not use unique keys, React will log warnings to your console and your app may behave strangely!
 
-
    Componentizing the rest of the app
    
+## Componentizing the rest of the app
 
-
    Now that we've got our most important component sorted out, we can turn the rest of our app into components. Remembering that components are either obvious pieces of UI, or reused pieces of UI, or both, we can make two more components:
    
+Now that we've got our most important component sorted out, we can turn the rest of our app into components. Remembering that components are either obvious pieces of UI, or reused pieces of UI, or both, we can make two more components:
 
-
      
- 
    • <Form/>
      • 
- 
    • <FilterButton/>
      • 
-
    
+- `
    `
+- ``
 
-
    Since we know we need both, we can batch some of the file creation work together with a terminal command. Run this command in your terminal, taking care that you're in the root directory of your app:
    
+Since we know we need both, we can batch some of the file creation work together with a terminal command. Run this command in your terminal, taking care that you're in the root directory of your app:
 
-
    touch src/components/Form.js src/components/FilterButton.js
    
+```bash
+touch src/components/Form.js src/components/FilterButton.js
+```
 
-
    The <Form />
    
+### The ``
 
-
    Open components/Form.js and do the following:
    
+Open `components/Form.js` and do the following:
 
-
      
- 
    • Import React at the top of the file, like we did in Todo.js.
      • 
- 
    • Make yourself a new Form() component with the same basic structure as Todo(), and export that component.
      • 
- 
    • Copy the <form> tags and everything between them from inside App.js, and paste them inside Form()’s return statement.
      • 
- 
    • Export Form at the end of the file.
      • 
-
    
+- Import `React` at the top of the file, like we did in `Todo.js`.
+- Make yourself a new `Form()` component with the same basic structure as `Todo()`, and export that component.
+- Copy the `` tags and everything between them from inside `App.js`, and paste them inside `Form()`’s `return` statement.
+- Export `Form` at the end of the file.
 
-
    Your Form.js file should read like this:
    
+Your `Form.js` file should read like this:
 
-
    import React from "react";
+```js
+import React from "react";
 
 function Form(props) {
   return (
-    <form>
-      <h2 className="label-wrapper">
-        <label htmlFor="new-todo-input" className="label__lg">
+    
+      
    
+        
+      
    
+      
+      
+    
   );
 }
 
-export default Form;
    
+export default Form;
+```
 
-
    The <FilterButton />
    
+### The \
 
-
    Do the same things you did to create Form.js inside FilterButton.js, but call the component FilterButton() and copy the HTML for the first button inside the <div> element with the class of filters from App.js into the return statement.
    
+Do the same things you did to create `Form.js` inside `FilterButton.js`, but call the component `FilterButton()` and copy the HTML for the first button inside the `
    ` element with the `class` of `filters` from `App.js` into the `return` statement.
 
-
    The file should read like this:
    
+The file should read like this:
 
-
    import React from "react";
+```js
+import React from "react";
 
 function FilterButton(props) {
   return (
-    <button type="button" className="btn toggle-btn" aria-pressed="true">
-      <span className="visually-hidden">Show </span>
-      <span>all </span>
-      <span className="visually-hidden"> tasks</span>
-    </button>
+    
   );
 }
 
-export default FilterButton;
    
+export default FilterButton;
+```
 
-
    
-
    备注： You might notice that we are making the same mistake here as we first made for the <Todo /> component, in that each button will be the same. That’s fine! We’re going to fix up this component later on, in Back to the filter buttons.
    
-
    
+> **备注：** You might notice that we are making the same mistake here as we first made for the `` component, in that each button will be the same. That’s fine! We’re going to fix up this component later on, in [Back to the filter buttons](/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_interactivity_filtering_conditional_rendering#Back_to_the_filter_buttons).
 
-
    Importing all our components
    
+## Importing all our components
 
-
    Let's make use of our new components.
    
+Let's make use of our new components.
 
-
    Add some more import statements to the top of App.js, to import them.
    
+Add some more `import` statements to the top of `App.js`, to import them.
 
-
    Then, update the return statement of App() so that it renders our components. When you’re done, App.js will read like this:
    
+Then, update the `return` statement of `App()` so that it renders our components. When you’re done, `App.js` will read like this:
 
-
    import React from "react";
+```js
+import React from "react";
 import Form from "./components/Form";
 import FilterButton from "./components/FilterButton";
 import Todo from "./components/Todo";
 
 function App(props) {
-  const taskList = props.tasks.map(task => (
-    <Todo
+  const taskList = props.tasks.map(task => (
+    
     )
   );
   return (
-    <div className="todoapp stack-large">
-      <Form />
-      <div className="filters btn-group stack-exception">
-        <FilterButton />
-        <FilterButton />
-        <FilterButton />
-      </div>
-      <h2 id="list-heading">3 tasks remaining</h2>
-      <ul
+    
    
+      
    
+      
    
+        
+        
+        
+      
    
+      
    3 tasks remaining
    
+      
      
         {taskList}
-      </ul>
-    </div>
+      
    
+    
    
   );
 }
 
-export default App;
    
-
-
    With this in place, we’re almost ready to tackle some interactivity in our React app!
    
-
-
    Summary
    
-
-
    And that's it for this article — we've gone into some depth on how to break up your app nicely into components, end render them efficiently. Now we'll go on to look at how we handle events in React, and start adding some interactivity.
    
-
-
    {{PreviousMenuNext("Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_todo_list_beginning","Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_interactivity_events_state", "Learn/Tools_and_testing/Client-side_JavaScript_frameworks")}}
    
-
-
    In this module
    
-
-
+export default App;
+```
+
+With this in place, we’re _almost_ ready to tackle some interactivity in our React app!
+
+## Summary
+
+And that's it for this article — we've gone into some depth on how to break up your app nicely into components, end render them efficiently. Now we'll go on to look at how we handle events in React, and start adding some interactivity.
+
+{{PreviousMenuNext("Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_todo_list_beginning","Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_interactivity_events_state", "Learn/Tools_and_testing/Client-side_JavaScript_frameworks")}}
+
+## In this module
+
+- [Introduction to client-side frameworks](/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Introduction)
+- [Framework main features](/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Main_features)
+- React
+
+  - [Getting started with React](/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_getting_started)
+  - [Beginning our React todo list](/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_todo_list_beginning)
+  - [Componentizing our React app](/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_components)
+  - [React interactivity: Events and state](/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_interactivity_events_state)
+  - [React interactivity: Editing, filtering, conditional rendering](/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_interactivity_filtering_conditional_rendering)
+  - [Accessibility in React](/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_accessibility)
+  - [React resources](/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_resources)
+
+- Ember
+
+  - [Getting started with Ember](/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_getting_started)
+  - [Ember app structure and componentization](/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_structure_componentization)
+  - [Ember interactivity: Events, classes and state](/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_interactivity_events_state)
+  - [Ember Interactivity: Footer functionality, conditional rendering](/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_conditional_footer)
+  - [Routing in Ember](/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_routing)
+  - [Ember resources and troubleshooting](/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_resources)
+
+- Vue
+
+  - [Getting started with Vue](/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_getting_started)
+  - [Creating our first Vue component](/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_first_component)
+  - [Rendering a list of Vue components](/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_rendering_lists)
+  - [Adding a new todo form: Vue events, methods, and models](/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_methods_events_models)
+  - [Styling Vue components with CSS](/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_styling)
+  - [Using Vue computed properties](/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_computed_properties)
+  - [Vue conditional rendering: editing existing todos](/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_conditional_rendering)
+  - [Focus management with Vue refs](/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_refs_focus_management)
+  - [Vue resources](/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_resources)
+
+- Svelte
+
+  - [Getting started with Svelte](/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_getting_started)
+  - [Starting our Svelte Todo list app](/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_Todo_list_beginning)
+  - [Dynamic behavior in Svelte: working with variables and props](/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_variables_props)
+  - [Componentizing our Svelte app](/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_components)
+  - [Advanced Svelte: Reactivity, lifecycle, accessibility](/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_reactivity_lifecycle_accessibility)
+  - [Working with Svelte stores](/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_stores)
+  - [TypeScript support in Svelte](/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_TypeScript)
+  - [Deployment and next steps](/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_deployment_next)
diff --git a/files/zh-cn/learn/tools_and_testing/client-side_javascript_frameworks/react_getting_started/index.md b/files/zh-cn/learn/tools_and_testing/client-side_javascript_frameworks/react_getting_started/index.md
index 590a81319ba340..160f66ad7da52d 100644
--- a/files/zh-cn/learn/tools_and_testing/client-side_javascript_frameworks/react_getting_started/index.md
+++ b/files/zh-cn/learn/tools_and_testing/client-side_javascript_frameworks/react_getting_started/index.md
@@ -12,141 +12,157 @@ tags:
 translation_of: >-
   Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_getting_started
 ---
-
    {{LearnSidebar}}
    
+{{LearnSidebar}}{{PreviousMenuNext("Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Main_features","Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_todo_list_beginning", "Learn/Tools_and_testing/Client-side_JavaScript_frameworks")}}
 
-
    {{PreviousMenuNext("Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Main_features","Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_todo_list_beginning", "Learn/Tools_and_testing/Client-side_JavaScript_frameworks")}}
    
-
-
    本文会引导我们进入一段 React 学习之旅。我们将逐步了解有关它的背景和用例的一些细节，在自己的电脑上建起基本的 React 工具链，创建并使用一个简单的入门应用程序，以学习一些关于 React 在此过程中如何工作的知识。
    
+本文会引导我们进入一段 React 学习之旅。我们将逐步了解有关它的背景和用例的一些细节，在自己的电脑上建起基本的 React 工具链，创建并使用一个简单的入门应用程序，以学习一些关于 React 在此过程中如何工作的知识。
 
 
- 
-  
-   
-   
-  
-  
-   
-   
-  
- 
+  
+    
+      
+      
+    
+    
+      
+      
+    
+  
    先决条件：
-    
    熟悉核心 HTML，CSS 和 JavaScript 语言，了解终端/命令行。
    
-
-    
    React 使用称为 JSX（JavaScript 和 XML）的 HTML-in-JavaScript 语法。熟悉 HTML 和 JavaScript 可以帮助您学习 JSX，并更好地确定应用程序中的错误是与 JavaScript 还是与 React 的更特定领域相关。
    
-   
    目的：要设置本地 React 开发环境，创建一个启动应用程序，并了解其工作原理
    先决条件：
+        
    
+          熟悉核心 HTML，CSS
+          和 JavaScript 语言，了解终端/命令行。
+        
    
+        
    
+          React 使用称为 JSX（JavaScript 和 XML）的 HTML-in-JavaScript
+          语法。熟悉 HTML 和 JavaScript 可以帮助您学习
+          JSX，并更好地确定应用程序中的错误是与 JavaScript 还是与 React
+          的更特定领域相关。
+        
    
+      
    目的：要设置本地 React 开发环境，创建一个启动应用程序，并了解其工作原理
    
 
    
 
-
    你好 React
    
-
-
    如其官方口号所示，React 是一个用于构建用户界面的库。React 不是一个框架 —— 它的应用甚至不局限于 Web 开发，它可以与其他库一起使用以渲染到特定环境。例如，React Native 可用于构建移动应用程序；React 360 可用于构建虚拟现实应用程序……
    
+## 你好 React
 
-
    为了构建 Web 应用，开发人员将 React 与 ReactDOM 结合使用。React 和 ReactDOM 通常被与其他真正的 Web 开发框架相提并论，并用于解决相同的问题。当我们将 React 称为“框架”时，就是在进行口语化的理解。
    
+如其官方口号所示，[React](https://reactjs.org/) 是一个用于构建用户界面的库。React 不是一个框架 —— 它的应用甚至不局限于 Web 开发，它可以与其他库一起使用以渲染到特定环境。例如，[React Native](https://reactnative.dev/) 可用于构建移动应用程序；[React 360](https://facebook.github.io/react-360/) 可用于构建虚拟现实应用程序……
 
-
    React 的主要目标是最大程度地减少开发人员构建 UI 时发生的错误。它通过使用组件——描述部分用户界面的、自包含的逻辑代码段——来实现此目的。这些组件可以组合在一起以创建完整的 UI，React 将许多渲染工作进行抽象化，使您可以专注于 UI 设计 (译者注：显而易见，此设计不等于视觉稿的设计)。
    
+为了构建 Web 应用，开发人员将 React 与 [ReactDOM 结合使用](https://reactjs.org/docs/react-dom.html)。React 和 ReactDOM 通常被与其他真正的 Web 开发框架相提并论，并用于解决相同的问题。当我们将 React 称为“框架”时，就是在进行口语化的理解。
 
-
    用例
    
+React 的主要目标是最大程度地减少开发人员构建 UI 时发生的错误。它通过使用组件——描述部分用户界面的、自包含的逻辑代码段——来实现此目的。这些组件可以组合在一起以创建完整的 UI，React 将许多渲染工作进行抽象化，使您可以专注于 UI 设计 (译者注：显而易见，此设计不等于视觉稿的设计)。
 
-
    与本模块中涵盖的其他框架不同，React 不会对代码约定或文件组织实施严格的规则。这使团队可以设置最适合自己的约定，并以他们希望的任何方式采用 React。React 可以处理一个按钮，一个界面的几个部分或应用程序的整个用户界面。
    
+## 用例
 
-
    尽管 React 可以用于界面的小片段中，但要和 jQuery 这样的库，甚至是像 Vue 这样的框架那样“引入”应用程序并不容易 —— 当你使用 React 构建整个应用程序时更容易上手。
    
+与本模块中涵盖的其他框架不同，React 不会对代码约定或文件组织实施严格的规则。这使团队可以设置最适合自己的约定，并以他们希望的任何方式采用 React。React 可以处理一个按钮，一个界面的几个部分或应用程序的整个用户界面。
 
-
    另外，许多开发人员的经验对于 React 应用程序也是有用处的，例如使用 JSX 编写界面是需要编译过程的。在网站上添加类似于 Babel 的编译器会让网站上代码的运行速度变慢，因此开发人员通常会在构建项目的时候设置这样的工具。React 对于工具的要求可以说是很高的，但这是能够学习解决的。
    
+尽管 React 可以用于[界面的小片段](https://reactjs.org/docs/add-react-to-a-website.html)中，但要和 jQuery 这样的库，甚至是像 Vue 这样的框架那样“引入”应用程序并不容易 —— 当你使用 React 构建整个应用程序时更容易上手。
 
-
    本文将重点介绍使用 React 通过 Facebook 的 create-react-app 内的工具渲染应用程序中整个用户界面的用例。
    
+另外，许多开发人员的经验对于 React 应用程序也是有用处的，例如使用 JSX 编写界面是需要编译过程的。在网站上添加类似于 Babel 的编译器会让网站上代码的运行速度变慢，因此开发人员通常会在构建项目的时候设置这样的工具。React 对于工具的要求可以说是很高的，但这是能够学习解决的。
 
-
    React 如何使用 JavaScript?
    
+本文将重点介绍使用 React 通过 Facebook 的 [create-react-app](https://create-react-app.dev/) 内的工具渲染应用程序中整个用户界面的用例。
 
-
    React 中的许多模式都使用了现代 JavaScript 的功能。React 与 JavaScript 的最大区别在于 JSX 语法的使用上。JSX 是在 JavaScript 语法上的拓展，因此类似于 HTML 的代码可以和 JSX 共存。例如：
    
+## React 如何使用 JavaScript?
 
-
    const heading = <h1>Mozilla Developer Network</h1>;
    
+React 中的许多模式都使用了现代 JavaScript 的功能。React 与 JavaScript 的最大区别在于 [JSX](https://reactjs.org/docs/introducing-jsx.html) 语法的使用上。JSX 是在 JavaScript 语法上的拓展，因此类似于 HTML 的代码可以和 JSX 共存。例如：
 
-
    该 heading 常量称为 JSX 表达式。React 可以使用它在我们的应用程序中渲染 <h1> 标签。
    
+```js
+const heading = 
    Mozilla Developer Network
    ;
+```
 
-
    假设出于语义原因，我们想将 heading 包装 <header> 在标记中？JSX 方法允许我们将元素彼此嵌套，就像使用 HTML 一样：
    
+该 heading 常量称为 **JSX 表达式**。React 可以使用它在我们的应用程序中渲染 [`
    `](/en-US/docs/Web/HTML/Element/Heading_Elements) 标签。
 
-
    const header = (
-  <header>
-    <h1>Mozilla Developer Network</h1>
-  </header>
-);
    
+假设出于语义原因，我们想将 heading 包装 [`
    `](/en-US/docs/Web/HTML/Element/header) 在标记中？JSX 方法允许我们将元素彼此嵌套，就像使用 HTML 一样：
 
-
    
-
    备注： 上一个代码段中的括号并非 JSX 的一部分，它对您的应用程序没有任何影响，括号只是用来向您（和您的计算机）表明其中的多行代码属于同一个表达式 (译者注：原文表述实在有点啰嗦)。因此上面的代码等同于：
    
+```js
+const header = (
+  
    
+    
    Mozilla Developer Network
    
+  
    
+);
+```
 
-
    const header = <header>
-    <h1>Mozilla Developer Network</h1>
-</header>
    
+> **备注：** 上一个代码段中的括号并非 JSX 的一部分，它对您的应用程序没有任何影响，括号只是用来向您（和您的计算机）表明其中的多行代码属于同一个表达式 (译者注：原文表述实在有点啰嗦)。因此上面的代码等同于：
+>
+> ```js
+> const header = 
    
+>     
    Mozilla Developer Network
    
+> 
    
+> ```
+>
+> 这看起来多少有点不适感，因为表达式前面的 [`
    `](/en-US/docs/Web/HTML/Element/header) 标记没有缩进与其对应的结束标记相同的位置。
 
-
    这看起来多少有点不适感，因为表达式前面的 <header> 标记没有缩进与其对应的结束标记相同的位置。
    
-
    
+浏览器是无法读取直接解析 JSX 的。我们的 header 表达式经过（ [Babel](https://babeljs.io/) 或 [Parcel](https://parceljs.org/) 之类的工具）编译之后是这样的：
 
-
    浏览器是无法读取直接解析 JSX 的。我们的 header 表达式经过（ Babel 或 Parcel 之类的工具）编译之后是这样的：
    
-
-
    const header = React.createElement("header", null,
+```js
+const header = React.createElement("header", null,
   React.createElement("h1", null, "Mozilla Developer Network")
-);
    
-
-
    可以跳过编译步骤，并使用 React.createElement() 自己编写 UI。但是，这样做会失去 JSX 的声明性优势，并且代码变得更难以阅读。编译是开发过程中的一个额外步骤，但是 React 社区中的许多开发人员都认为 JSX 的可读性值得。另外，流行的工具使 JSX-to-JavaScript 编译成为其设置过程的一部分。除非您愿意，否则不必自己配置编译。
    
+);
+```
 
-
    由于 JSX 是 HTML 和 JavaScript 的结合，因此一些开发人员认为它很直观。其他人则说它的混合特性使它变得混乱。但是，一旦熟悉了它，它将使您能够更快，更直观地构建用户界面，并使其他人一眼就能更好地理解您的代码库。
    
+*可以*跳过编译步骤，并使用 [`React.createElement()`](https://reactjs.org/docs/react-api.html#createelement) 自己编写 UI。但是，这样做会失去 JSX 的声明性优势，并且代码变得更难以阅读。编译是开发过程中的一个额外步骤，但是 React 社区中的许多开发人员都认为 JSX 的可读性值得。另外，流行的工具使 JSX-to-JavaScript 编译成为其设置过程的一部分。除非您愿意，否则不必自己配置编译。
 
-
    要阅读有关 JSX 的更多信息，请查看 React 团队的 JSX In Depth 文章。
    
+由于 JSX 是 HTML 和 JavaScript 的结合，因此一些开发人员认为它很直观。其他人则说它的混合特性使它变得混乱。但是，一旦熟悉了它，它将使您能够更快，更直观地构建用户界面，并使其他人一眼就能更好地理解您的代码库。
 
-
    设置您的第一个 React 应用
    
+要阅读有关 JSX 的更多信息，请查看 React 团队的 [JSX In Depth](https://reactjs.org/docs/jsx-in-depth.html) 文章。
 
-
    有很多使用 React 的方法，但是我们将使用命令行界面（CLI）工具 create-react-app，如前所述，该方法通过安装一些软件包并创建一些软件包来加快开发 React 应用程序的过程。文件供您处理上述工具。
    
+## 设置您的第一个 React 应用
 
-
    通过将一些 <script> 元素复制到 HTML 文件中，可以在没有 create-react-app 的情况下将 React 添加到网站，但是 create-react-app CLI 是 React 应用程序的常见起点。使用它可以让您花费更多的时间来构建应用，而花更少的时间进行设置。
    
+有很多使用 React 的方法，但是我们将使用命令行界面（CLI）工具 create-react-app，如前所述，该方法通过安装一些软件包并创建一些软件包来加快开发 React 应用程序的过程。文件供您处理上述工具。
 
-
    要求
    
+通过将一些 [``部分。在`
+```
+
+现在我们可以开始为`ToDoItem`添加实际内容了。Vue 模板目前只允许一个根元素--一个元素需要包裹模板内的所有内容（Vue 3 发布后会改变这种情况）。我们将为该根元素使用一个[`
    `](/zh-CN/docs/Web/HTML/Element/div)。
 
-
    现在我们可以开始为ToDoItem添加实际内容了。Vue 模板目前只允许一个根元素--一个元素需要包裹模板内的所有内容（Vue 3 发布后会改变这种情况）。我们将为该根元素使用一个<div>。
    
+1.  现在在你的组件模板中添加一个空的`
    `。
+2.  在那个`
    `里面，让我们添加一个`checkbox`和一个对应的`label`。给复选框添加一个`id`，并添加一个`for`属性，将复选框映射到标签上，如下图所示。.
 
-
      
- 
    1. 
-  
      现在在你的组件模板中添加一个空的<div>。
      
- 
      2. 
- 
    2. 
-  
      在那个<div>里面，让我们添加一个checkbox和一个对应的label。给复选框添加一个id，并添加一个for属性，将复选框映射到标签上，如下图所示。.
      
+    ```html
+    
+    ```
 
-  
      <template>
-  <div>
-    <input type="checkbox" id="todo-item" checked="false" />
-    <label for="todo-item">My Todo Item</label>
-  </div>
-</template>
      
- 
      3. 
-
    
+### 在应用程序中使用 TodoItem 组件
 
-
    在应用程序中使用 TodoItem 组件
    
+这一切都很顺利，但我们还没有将组件添加到我们的应用程序中，所以没有办法测试它，看看一切是否正常。我们现在就把它添加进去吧。
 
-
    这一切都很顺利，但我们还没有将组件添加到我们的应用程序中，所以没有办法测试它，看看一切是否正常。我们现在就把它添加进去吧。
    
+1.  再次打开`App.vue`文件。
+2.  在`
+```
 
-
    使用已注册的 props
    
+### 使用已注册的 props
 
-
    随着组件对象中这些 props 的定义，我们可以在 template 里使用这些变量值。让我们开始向组件模版中添加 label prop。
    
+随着组件对象中这些 props 的定义，我们可以在 template 里使用这些变量值。让我们开始向组件模版中添加 `label` prop。
 
-
    在你的 <template> 中，将 <label> 标签的 contents 内容修改为 \{{label}}。
    
+在你的 `