fix yari h2m dry run errors (zh-CN)

17 files changed, 275 insertions, 210 deletions

diff --git a/files/zh-cn/web/javascript/guide/control_flow_and_error_handling/index.html b/files/zh-cn/web/javascript/guide/control_flow_and_error_handling/index.html
index 4ec8d52e11..cc837aafb0 100644
--- a/files/zh-cn/web/javascript/guide/control_flow_and_error_handling/index.html
+++ b/files/zh-cn/web/javascript/guide/control_flow_and_error_handling/index.html
@@ -95,12 +95,13 @@ alert(x); // 输出的结果为 2
 
 <p>不建议在条件表达式中使用赋值语句，因为在快速查阅代码时容易把它看成等值比较。例如，不要使用下面的代码：</p>
 
-<div class="blockIndicator warning">
-<p>   if(x = y){</p>
-
-<p> /*  语句  */</p>
-
-<p>}</p>
+<div class="warning">
+<p><strong>警告：</strong></p>
+<pre class="brush: js">
+  if(x = y){
+    /*  语句  */
+  }
+</pre>
 </div>
 
 <p>如果你需要在条件表达式中使用赋值，通常在赋值语句前后额外添加一对括号。例如： </p>
@@ -231,9 +232,8 @@ throw {toString: function() { return "I'm an object!"; } };
 
 </pre>
 
-<div class="note"><strong>注意：</strong>你可以在抛出异常时声明一个对象。那你就可以在catch块中查询到对象的属性。
-
-
+<div class="note">
+  <p><strong>备注：</strong>你可以在抛出异常时声明一个对象。那你就可以在catch块中查询到对象的属性。</p>
 </div>
 
 <pre class="brush: js">// Create an object type UserException
@@ -406,7 +406,7 @@ catch (e) {
  <li><em>settled：</em>Promise 处于 fulfilled 或 rejected 二者中的任意一个状态, 不会是 pending。</li>
 </ul>
 
-<p><img alt="" src="https://mdn.mozillademos.org/files/8633/promises.png" style="height: 297px; width: 801px;"></p>
+<p><img alt="" src="https://mdn.mozillademos.org/files/8633/promises.png"></p>
 
 <h3 id="通过_XHR_加载图片">通过 XHR 加载图片</h3>
 
diff --git a/files/zh-cn/web/javascript/guide/details_of_the_object_model/index.html b/files/zh-cn/web/javascript/guide/details_of_the_object_model/index.html
index 7df37741c4..17e15ee9bc 100644
--- a/files/zh-cn/web/javascript/guide/details_of_the_object_model/index.html
+++ b/files/zh-cn/web/javascript/guide/details_of_the_object_model/index.html
@@ -31,8 +31,8 @@ translation_of: Web/JavaScript/Guide/Details_of_the_Object_Model
 
 <p>JavaScript 大体上与之类似，但并没有专门的<em>类定义</em>，你通过定义构造函数的方式来创建一系列有着特定初始值和方法的对象。任何JavaScript函数都可以被用作构造函数。你也可以使用 <code>new</code> 操作符来创建一个新对象。</p>
 
-<div class="blockIndicator note">
-<p><strong>提示：</strong>在ES6中引入了 <a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Classes">类定义</a> ，但它实际上是已有的原型继承方式的语法糖而已，并没有引入新的面向对象继承模型。</p>
+<div class="note">
+<p><strong>备注：</strong>在ES6中引入了 <a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Classes">类定义</a> ，但它实际上是已有的原型继承方式的语法糖而已，并没有引入新的面向对象继承模型。</p>
 </div>
 
 <h3 id="子类和继承">子类和继承</h3>
@@ -227,7 +227,7 @@ public class Engineer extends WorkerBee {
 <p>使用这些定义，您可以创建这些对象的实例，以获取其属性的默认值。下图说明了如何使用这些 JavaScript 定义创建新对象并显示新对象的属性值。</p>
 
 <div class="note">
-<p><strong>提示：</strong>实例在基于类的语言中具有特定的技术含义。在这些语言中，一个实例是一个类的单独实例化，与一个类本质上是不同的。在 JavaScript 中，“实例”没有这个技术含义，因为JavaScript在类和实例之间不存在这样的区别。然而，在讨论 JavaScript 时，可以非正式地使用“实例”来表示使用特定构造函数创建的对象。 所以，在这个例子中，你可以非正式地说<code>jane</code> 是 <code>Engineer</code>的一个实例。同样，虽然术语 parent，child，ancestor 和 descendant 在 JavaScript 中没有正式含义；你可以非正式地使用它们来引用原型链中较高或更低的对象。</p>
+<p><strong>备注：</strong>实例在基于类的语言中具有特定的技术含义。在这些语言中，一个实例是一个类的单独实例化，与一个类本质上是不同的。在 JavaScript 中，“实例”没有这个技术含义，因为JavaScript在类和实例之间不存在这样的区别。然而，在讨论 JavaScript 时，可以非正式地使用“实例”来表示使用特定构造函数创建的对象。 所以，在这个例子中，你可以非正式地说<code>jane</code> 是 <code>Engineer</code>的一个实例。同样，虽然术语 parent，child，ancestor 和 descendant 在 JavaScript 中没有正式含义；你可以非正式地使用它们来引用原型链中较高或更低的对象。</p>
 </div>
 
 <h3 id="用简单的定义创建对象">用简单的定义创建对象</h3>
@@ -310,14 +310,14 @@ mark.projects = ["navigator"];</pre>
 
 <p>只要 JavaScript 执行了该语句，则 <code>mark</code> 对象也将具有 <code>specialty</code> 属性，其值为 <code>"none"</code>。下图则表示了在 <code>Employee</code> 原型中添加该属性，然后在 <code>Engineer</code> 的原型中重载该属性的效果。</p>
 
-<p><img alt="" class="internal" src="/@api/deki/files/4422/=figure8.4.png" style="height: 519px; width: 833px;"><br>
+<p><img alt="" class="internal" src="/@api/deki/files/4422/=figure8.4.png"><br>
  <small><strong>添加属性</strong></small></p>
 
 <h2 id="more_flexible_constructors">更灵活的构造器</h2>
 
 <p>到目前为止，本文所展示的构造函数都不能让你在创建新实例时为其制定属性值。其实我们也可以像 Java 一样，为构造器提供参数以初始化实例的属性值。下图展示了一种实现方式。</p>
 
-<p><img alt="" class="internal" src="/@api/deki/files/4423/=figure8.5.png" style="height: 481px; width: 1012px;"><br>
+<p><img alt="" class="internal" src="/@api/deki/files/4423/=figure8.5.png"><br>
  <small><strong>Specifying properties in a constructor, take 1</strong></small></p>
 
 <p>下面的表格中罗列了这些对象在 Java 和 JavaScript 中的定义。</p>
@@ -420,7 +420,7 @@ public class Engineer extends WorkerBee {
 <p>JavaScript 的逻辑或操作符（<code>||</code>）会对第一个参数进行判断。如果该参数值运算后结果为真，则操作符返回该值。否则，操作符返回第二个参数的值。因此，这行代码首先检查 <code>name</code> 是否是对<code>name</code> 属性有效的值。如果是，则设置其为 <code>this.name</code> 的值。否则，设置 <code>this.name</code> 的值为空的字符串。尽管这种用法乍看起来有些费解，为了简洁起见，本章将使用这种习惯用法。</p>
 
 <div class="note">
-<p><strong>提示：</strong>如果调用构造函数时，指定了可以转换为 <code><code>false</code></code> 的参数（比如<code>0</code>和空字符串），结果可能出乎调用者意料。此时，将使用默认值（译注：不是指定的参数值 0 和 ""）。</p>
+<p><strong>备注：</strong>如果调用构造函数时，指定了可以转换为 <code><code>false</code></code> 的参数（比如<code>0</code>和空字符串），结果可能出乎调用者意料。此时，将使用默认值（译注：不是指定的参数值 0 和 ""）。</p>
 </div>
 
 <p>使用这些定义，当创建对象的实例时，可以为本地定义的属性指定值。你可以使用以下语句创建一个新的<code>Engineer</code>：</p>
@@ -440,7 +440,7 @@ jane.machine == "belau"
 
 <p>到目前为止，构造函数已经能够创建一个普通对象，然后为新对象指定本地的属性和属性值。您还可以通过直接调用原型链上的更高层次对象的构造函数，让构造器添加更多的属性。下图即实现了这一功能。</p>
 
-<p><img alt="" class="internal" src="/@api/deki/files/4430/=figure8.6.png" style="height: 534px; width: 1063px;"><br>
+<p><img alt="" class="internal" src="/@api/deki/files/4430/=figure8.6.png"><br>
  <small><strong>Specifying properties in a constructor, take 2</strong></small></p>
 
 <p>我们来详细看一下这些定义。这是<code>Engineer</code>构造函数的新定义：</p>
@@ -636,7 +636,9 @@ chris.__proto__.__proto__.__proto__.__proto__.__proto__ == null;
 }
 </pre>
 
-<div class="note"><strong>Note:</strong> 在上面的实现中，检查对象的类型是否为 "xml" 的目的在于解决新近版本的 JavaScript 中表达 XML 对象的特异之处。如果您想了解其中琐碎细节，可以参考 {{ bug(634150) }}。</div>
+<div class="note">
+<p><strong>备注：</strong> 在上面的实现中，检查对象的类型是否为 "xml" 的目的在于解决新近版本的 JavaScript 中表达 XML 对象的特异之处。如果您想了解其中琐碎细节，可以参考 {{ bug(634150) }}。</p>
+</div>
 
 <div>使用上面定义的 instanceOf 函数，这些表达式为真：</div>
 
diff --git a/files/zh-cn/web/javascript/guide/expressions_and_operators/index.html b/files/zh-cn/web/javascript/guide/expressions_and_operators/index.html
index be9944cc48..20ac54e8b8 100644
--- a/files/zh-cn/web/javascript/guide/expressions_and_operators/index.html
+++ b/files/zh-cn/web/javascript/guide/expressions_and_operators/index.html
@@ -136,7 +136,7 @@ translation_of: Web/JavaScript/Guide/Expressions_and_Operators
 
 <p>对于更复杂的赋值，<a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment">解构赋值</a>语法是一个能从数组或对象对应的数组结构或对象字面量里提取数据的 Javascript 表达式。</p>
 
-<pre class="brush: js line-numbers  language-js">var foo = ["one", "two", "three"];
+<pre class="brush: js">var foo = ["one", "two", "three"];
 
 // 不使用解构
 var one   = foo[0];
@@ -150,7 +150,7 @@ var [one, two, three] = foo;</pre>
 
 <p><a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/Comparison_Operators">比较运算符</a>比较它的操作数并返回一个基于表达式是否为真的逻辑值。操作数可以是数字，字符串，逻辑，对象值。字符串比较是基于标准的字典顺序，使用Unicode值。在多数情况下，如果两个操作数不是相同的类型， JavaScript 会尝试转换它们为恰当的类型来比较。这种行为通常发生在数字作为操作数的比较。类型转换的例外是使用 <code>===</code> 和 <code>!==</code> 操作符，它们会执行严格的相等和不相等比较。这些运算符不会在检查相等之前转换操作数的类型。下面的表格描述了该示例代码中的各比较运算符</p>
 
-<pre class="brush: js line-numbers  language-js">var var1 = 3;
+<pre class="brush: js">var var1 = 3;
 var var2 = 4;</pre>
 
 <table class="standard-table">
@@ -217,7 +217,7 @@ var var2 = 4;</pre>
 </table>
 
 <div class="note">
-<p><strong>注意: </strong>（<strong>=&gt;</strong>） 不是运算符，而是<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions">箭头函数</a>的标记符号 。</p>
+<p><strong>备注：</strong>（<strong>=&gt;</strong>） 不是运算符，而是<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions">箭头函数</a>的标记符号 。</p>
 </div>
 
 <h3 id="算术运算符">算术运算符</h3>
@@ -376,12 +376,10 @@ var var2 = 4;</pre>
  <li>操作数被转换为32bit整數，以位序列（0和1组成）表示.若超過32bits，則取低位32bit，如下所示：</li>
 </ul>
 
-<dl>
- <dt>
- <pre><code>Before: 11100110111110100000000000000110000000000001
-After:              10100000000000000110000000000001</code></pre>
- </dt>
-</dl>
+<pre>
+  <code>Before: 11100110111110100000000000000110000000000001</code>
+  <code>After:              10100000000000000110000000000001</code>
+</pre>
 
 <ul>
  <li>第一个操作数的每一位都与第二个操作数的对应位组对: 第一位对应第一位,第二位对应第二位,以此类推.</li>
@@ -551,7 +549,7 @@ var n3 = !"Cat"; // !t returns false
 
 <p>例如，</p>
 
-<pre class="brush: js line-numbers  language-js">console.log("my " + "string"); // console logs the string "my string".</pre>
+<pre class="brush: js">console.log("my " + "string"); // console logs the string "my string".</pre>
 
 <p>简写操作符 <code>+=</code> 也可以用来拼接字符串，例如：</p>
 
@@ -719,11 +717,11 @@ void expression
 
 <p>如下创建了一个超链接文本，当用户单击该文本时，不会有任何效果。</p>
 
-<pre class="brush: html line-numbers  language-html">&lt;a href="javascript:void(0)"&gt;Click here to do nothing&lt;/a&gt;</pre>
+<pre class="brush: html">&lt;a href="javascript:void(0)"&gt;Click here to do nothing&lt;/a&gt;</pre>
 
 <p>下面的代码创建了一个超链接，当用户单击它时，提交一个表单。</p>
 
-<pre class="brush: html line-numbers  language-html">&lt;a href="javascript:void(document.form.submit())"&gt;
+<pre class="brush: html">&lt;a href="javascript:void(document.form.submit())"&gt;
 Click here to submit&lt;/a&gt;</pre>
 
 <h3 id="关系操作符">关系操作符</h3>
@@ -913,7 +911,7 @@ this.propertyName
 
 <p>分组操作符（）控制了表达式中计算的优先级. 举例来说, 你可以改变先乘除后加减的顺序，转而先计算加法。</p>
 
-<pre class="brush:js line-numbers  language-js">var a = 1;
+<pre class="brush:js">var a = 1;
 var b = 2;
 var c = 3;
 
@@ -941,7 +939,7 @@ a * c + b * c // 9</pre>
 
 <p>Comprehensions特性被许多编程语言所采用，该特性能够使你快速地通过一个已有的数组来创建出一个新的数组，比如：</p>
 
-<pre class="brush:js line-numbers  language-js">[for (i of [ 1, 2, 3 ]) i*i ];
+<pre class="brush:js">[for (i of [ 1, 2, 3 ]) i*i ];
 // [ 1, 4, 9 ]
 
 var abc = [ "A", "B", "C" ];
diff --git a/files/zh-cn/web/javascript/guide/functions/index.html b/files/zh-cn/web/javascript/guide/functions/index.html
index 73a1efbdc4..e37f71e8a8 100644
--- a/files/zh-cn/web/javascript/guide/functions/index.html
+++ b/files/zh-cn/web/javascript/guide/functions/index.html
@@ -85,7 +85,7 @@ console.log(factorial(3));
 
 <p>下面的代码：</p>
 
-<pre class="brush: js line-numbers  language-js">function map(f, a) {
+<pre class="brush: js">function map(f, a) {
   let result = []; // 创建一个数组
   let i; // 声明一个值，用来循环
   for (i = 0; i != a.length; i++)
@@ -133,10 +133,10 @@ function square(n) { return n*n }
 <p>函数域是指函数声明时的所在的地方，或者函数在顶层被声明时指整个程序。</p>
 
 <div class="note">
-<p><strong>提示：</strong>注意只有使用如上的语法形式（即 <code>function funcName(){}</code>）才可以。而下面的代码是无效的。就是说，函数提升仅适用于函数声明，而不适用于函数表达式。</p>
+<p><strong>备注：</strong>注意只有使用如上的语法形式（即 <code>function funcName(){}</code>）才可以。而下面的代码是无效的。就是说，函数提升仅适用于函数声明，而不适用于函数表达式。</p>
 </div>
 
-<pre class="brush: js example-bad line-numbers  language-js">console.log(square); // square is hoisted with an initial value undefined.
+<pre class="brush: js example-bad">console.log(square); // square is hoisted with an initial value undefined.
 console.log(square(5)); // Uncaught TypeError: square is not a function
 const square = function (n) {
   return n * n;
@@ -167,7 +167,7 @@ e = factorial(5); // 120赋值给e
 
 <p>还有其它的方式来调用函数。常见的一些情形是某些地方需要动态调用函数，或者函数的实参数量是变化的，或者调用函数的上下文需要指定为在运行时确定的特定对象。显然，函数本身就是对象，因此这些对象也有方法（参考{{jsxref("Function")}} ）。作为此中情形之一，{{jsxref("Function.apply", "apply()")}}方法可以实现这些目的。</p>
 
-<h2 class="deki-transform" id="函数作用域">函数作用域</h2>
+<h2 id="函数作用域">函数作用域</h2>
 
 <p>在函数内定义的变量不能在函数之外的任何地方访问，因为变量仅仅在该函数的域的内部有定义。相对应的，一个函数可以访问定义在其范围内的任何变量和函数。换言之，定义在全局域中的函数可以访问所有定义在全局域中的变量。在另一个函数中定义的函数也可以访问在其父函数中定义的所有变量和父函数有权访问的任何其他变量。</p>
 
@@ -442,8 +442,8 @@ pet.getName();                  // Oliver
 getCode();    // Returns the secret code
 </pre>
 
-<div class="blockIndicator note">
-<p>尽管有上述优点，使用闭包时仍然要小心避免一些陷阱。如果一个闭包的函数定义了一个和外部函数的某个变量名称相同的变量，那么这个闭包将无法引用外部函数的这个变量。</p>
+<div class="note">
+<p><strong>备注：</strong>尽管有上述优点，使用闭包时仍然要小心避免一些陷阱。如果一个闭包的函数定义了一个和外部函数的某个变量名称相同的变量，那么这个闭包将无法引用外部函数的这个变量。</p>
 
 <pre class="brush: js">var createPet = function(name) {  // Outer function defines a variable called "name"
   return {
@@ -468,7 +468,7 @@ getCode();    // Returns the secret code
 
 <p>例如，设想有一个用来连接字符串的函数。唯一事先确定的参数是在连接后的字符串中用来分隔各个连接部分的字符（译注：比如例子里的分号“；”）。该函数定义如下：</p>
 
-<pre class="brush: js line-numbers  language-js">function myConcat(separator) {
+<pre class="brush: js">function myConcat(separator) {
    var result = ''; // 把值初始化成一个字符串，这样就可以用来保存字符串了！！
    var i;
    // iterate through arguments
@@ -490,7 +490,9 @@ myConcat("; ", "elephant", "giraffe", "lion", "cheetah");
 myConcat(". ", "sage", "basil", "oregano", "pepper", "parsley");
 </pre>
 
-<div class="note"><strong>提示：</strong><code>arguments</code>变量只是 <em>”</em><strong>类数组对象</strong>“，并不是一个数组。称其为类数组对象是说它有一个索引编号和<code>length</code>属性。尽管如此，它并不拥有全部的Array对象的操作方法。</div>
+<div class="note">
+<p><strong>备注：</strong><code>arguments</code>变量只是 <em>”</em><strong>类数组对象</strong>“，并不是一个数组。称其为类数组对象是说它有一个索引编号和<code>length</code>属性。尽管如此，它并不拥有全部的Array对象的操作方法。</p>
+</div>
 
 <p>更多信息请阅读JavaScript参考里的{{jsxref("Function")}}一文。</p>
 
@@ -544,7 +546,7 @@ console.log(arr); // [2, 4, 6]</pre>
 
 <p>在一些函数模式中，更简洁的函数很受欢迎。对比一下：</p>
 
-<pre class="brush: js line-numbers  language-js">var a = [
+<pre class="brush: js">var a = [
   "Hydrogen",
   "Helium",
   "Lithium",
@@ -563,7 +565,7 @@ console.log(a3); // logs [ 8, 6, 7, 9 ]</pre>
 
 <p>在箭头函数出现之前，每一个新函数都重新定义了自己的 <a href="/zh-CN/docs/Web/JavaScript/Reference/Operators/this">this</a> 值（在构造函数中是一个新的对象；在严格模式下是未定义的；在作为“对象方法”调用的函数中指向这个对象；等等）。以面向对象的编程风格，这样着实有点恼人。</p>
 
-<pre class="brush: js line-numbers  language-js">function Person() {
+<pre class="brush: js">function Person() {
   // 构造函数Person()将`this`定义为自身
   this.age = 0;
 
@@ -579,7 +581,7 @@ var p = new Person();</pre>
 
 <p>在ECMAScript 3/5里，通过把<code>this</code>的值赋值给一个变量可以修复这个问题。</p>
 
-<pre class="brush: js line-numbers  language-js">function Person() {
+<pre class="brush: js">function Person() {
   var self = this; // 有的人习惯用`that`而不是`self`，
                    // 无论你选择哪一种方式，请保持前后代码的一致性
   self.age = 0;
@@ -594,7 +596,7 @@ var p = new Person();</pre>
 
 <p>箭头函数捕捉闭包上下文的<code>this</code>值，所以下面的代码工作正常。</p>
 
-<pre class="brush: js line-numbers  language-js">function Person(){
+<pre class="brush: js">function Person(){
   this.age = 0;
 
   setInterval(() =&gt; {
diff --git a/files/zh-cn/web/javascript/guide/grammar_and_types/index.html b/files/zh-cn/web/javascript/guide/grammar_and_types/index.html
index 7fb7d70567..4ac46cbc48 100644
--- a/files/zh-cn/web/javascript/guide/grammar_and_types/index.html
+++ b/files/zh-cn/web/javascript/guide/grammar_and_types/index.html
@@ -357,7 +357,7 @@ console.log(a.length); // 1
 console.log(a[0]); // 3</pre>
 
 <div class="note">
-<p><strong>注意</strong><strong> </strong>这里的数组字面值也是一种对象初始化器。参考<a href="https://developer.mozilla.org/zh-CN/docs/JavaScript/Guide/Working_with_Objects#Using_Object_Initializers" title="zh-CN/docs/JavaScript/Guide/Working with Objects#Using Object Initializers">对象初始化器的使用</a>。</p>
+<p><strong>备注：</strong><strong> </strong>这里的数组字面值也是一种对象初始化器。参考<a href="https://developer.mozilla.org/zh-CN/docs/JavaScript/Guide/Working_with_Objects#Using_Object_Initializers" title="zh-CN/docs/JavaScript/Guide/Working with Objects#Using Object Initializers">对象初始化器的使用</a>。</p>
 </div>
 
 <p>若在顶层（全局）脚本里用字面值创建数组，JavaScript语言将会在每次对包含该数组字面值的表达式求值时解释该数组。另一方面，在函数中使用的数组，将在每次调用函数时都会被创建一次。</p>
@@ -376,7 +376,7 @@ console.log(a[0]); // 3</pre>
 <p>如果你在元素列表的尾部添加了一个逗号，它将会被忽略。在下面的例子中，数组的长度是3，并不存在myList[3]这个元素（译注：这是指数组的第4个元素噢，作者是在帮大家复习数组元素的排序命名方法）。元素列表中其它所有的逗号都表示一个新元素（的开始）。</p>
 
 <div class="note">
-<p><strong>注意：</strong>尾部的逗号在早期版本的浏览器中会产生错误，因而编程时的最佳实践方式就是移除它们。</p>
+<p><strong>备注：</strong>尾部的逗号在早期版本的浏览器中会产生错误，因而编程时的最佳实践方式就是移除它们。</p>
 </div>
 
 <p>(译注：而“现代”的浏览器似乎鼓励这种方式，这也很好解释原因。尾部逗号可以减少向数组的最后添加元素时，因为忘记为这最后一个元素加逗号 所造成的错误。)</p>
@@ -495,7 +495,7 @@ console.log(unusualPropertyNames["!"]); // Bang!</pre>
 
 <p>在ES2015，对象字面值扩展支持在创建时设置原型，简写了 foo: foo 形式的属性赋值，方法定义，支持父方法调用，以及使用表达式动态计算属性名。总之，这些也使对象字面值和类声明更加紧密地联系起来，让基于对象的设计从这些便利中更加受益。</p>
 
-<pre class="brush: js line-numbers  language-js">var obj = {
+<pre class="brush: js">var obj = {
     // __proto__
     __proto__: theProtoObj,
     // Shorthand for ‘handler: handler’
@@ -523,7 +523,7 @@ console.log(foo["2"]); // two</pre>
 
 <p>一个正则表达式是字符被斜线（译注：正斜杠“/”）围成的表达式。下面是一个正则表达式文字的一个例子。</p>
 
-<pre class="brush: js line-numbers  language-js">var re = /ab+c/;</pre>
+<pre class="brush: js">var re = /ab+c/;</pre>
 
 <h3 id="字符串字面量_String_literals">字符串字面量 (String literals)</h3>
 
diff --git a/files/zh-cn/web/javascript/guide/index.html b/files/zh-cn/web/javascript/guide/index.html
index 7917823730..419d7d24e7 100644
--- a/files/zh-cn/web/javascript/guide/index.html
+++ b/files/zh-cn/web/javascript/guide/index.html
@@ -10,126 +10,189 @@ translation_of: Web/JavaScript/Guide
 
 <p>JavaScript 指南向你介绍如何使用 <a href="/zh-CN/docs/Web/JavaScript">JavaScript</a>，并且给出了语言概述。如果你需要了解某些语言特性的详细信息，请参阅 <a href="/zh-CN/docs/Web/JavaScript/Reference">JavaScript 参考</a>。</p>
 
-<h2 id="章节">章节</h2>
-
-<p>本指南分为以下章节：</p>
-
-<ul class="card-grid">
- <li><a href="/zh-CN/docs/Web/JavaScript/Guide/Introduction">介绍</a>
-
-  <p><a href="/zh-CN/docs/Web/JavaScript/Guide/Introduction#What_is_JavaScript.3F">关于这份指南</a><br>
-   <a href="/zh-CN/docs/Web/JavaScript/Guide/Introduction#什么是_JavaScript">关于 JavaScript</a><br>
-   <a href="/zh-CN/docs/Web/JavaScript/Guide/Introduction#JavaScript_and_Java">JavaScript 与 Java</a><br>
-   <a href="/zh-CN/docs/Web/JavaScript/Guide/Introduction#JavaScript_and_the_ECMAScript_Specification">ECMAScript</a><br>
-   <a href="/zh-CN/docs/Web/JavaScript/Guide/Introduction#Getting_started_with_JavaScript">工具</a><br>
-   <a href="/zh-CN/docs/Web/JavaScript/Guide/Introduction#Hello_world">Hello World</a></p>
- </li>
- <li><a href="/zh-CN/docs/Web/JavaScript/Guide/Grammar_and_types">语法与数据类型</a>
-  <p><a href="/zh-CN/docs/Web/JavaScript/Guide/Grammar_and_types#基础">基本语法与注释</a><br>
-   <a href="/zh-CN/docs/Web/JavaScript/Guide/Grammar_and_types#声明">声明</a><br>
-   <a href="/zh-CN/docs/Web/JavaScript/Guide/Grammar_and_types#变量的作用域">变量作用域</a><br>
-   <a href="/zh-CN/docs/Web/JavaScript/Guide/Grammar_and_types#变量提升">变量提升</a><br>
-   <a href="/zh-CN/docs/Web/JavaScript/Guide/Grammar_and_types#数据结构和类型">数据结构和类型</a><br>
-   <a href="/zh-CN/docs/Web/JavaScript/Guide/Grammar_and_types#字面量_(Literals)">字面量</a></p>
- </li>
- <li><a href="/zh-CN/docs/Web/JavaScript/Guide/Control_flow_and_error_handling">控制流与错误处理</a>
-  <p><a href="/zh-CN/docs/Web/JavaScript/Guide/Control_flow_and_error_handling#if...else_语句"><code>if...else</code></a><br>
-   <a href="/zh-CN/docs/Web/JavaScript/Guide/Control_flow_and_error_handling#switch_语句"><code>switch</code></a><br>
-   <a href="/zh-CN/docs/Web/JavaScript/Guide/Control_flow_and_error_handling#异常处理语句"><code>try</code>/<code>catch</code>/<code>throw</code></a><br>
-   <a href="/zh-CN/docs/Web/JavaScript/Guide/Control_flow_and_error_handling#使用Error对象">Error 对象</a></p>
- </li>
- <li><a href="/zh-CN/docs/Web/JavaScript/Guide/Loops_and_iteration">循环与迭代</a>
-  <p><a href="/zh-CN/docs/Web/JavaScript/Guide/Loops_and_iteration#for_语句"><code>for</code></a><br>
-   <a href="/zh-CN/docs/Web/JavaScript/Guide/Loops_and_iteration#while_语句"><code>while</code></a><br>
-   <a href="/zh-CN/docs/Web/JavaScript/Guide/Loops_and_iteration#do...while_语句"><code>do...while</code></a><br>
-   <a href="/zh-CN/docs/Web/JavaScript/Guide/Loops_and_iteration#break_语句"><code>break</code></a>/<a href="/zh-CN/docs/Web/JavaScript/Guide/Loops_and_iteration#continue_语句"><code>continue</code></a><br>
-   <a href="/zh-CN/docs/Web/JavaScript/Guide/Loops_and_iteration#for...in_语句"><code>for..in</code></a><br>
-   <a href="/zh-CN/docs/Web/JavaScript/Guide/Loops_and_iteration#for...of_语句"><code>for..of</code></a></p>
- </li>
+<h2 id="介绍">介绍</h2>
+
+<p>概述：<a href="/zh-CN/docs/Web/JavaScript/Guide/Introduction">介绍</a></p>
+
+<ul>
+  <li><a href="/zh-CN/docs/Web/JavaScript/Guide/Introduction#What_is_JavaScript.3F">关于这份指南</a></li>
+  <li><a href="/zh-CN/docs/Web/JavaScript/Guide/Introduction#什么是_JavaScript">关于 JavaScript</a></li>
+  <li><a href="/zh-CN/docs/Web/JavaScript/Guide/Introduction#JavaScript_and_Java">JavaScript 与 Java</a></li>
+  <li><a href="/zh-CN/docs/Web/JavaScript/Guide/Introduction#JavaScript_and_the_ECMAScript_Specification">ECMAScript</a></li>
+  <li><a href="/zh-CN/docs/Web/JavaScript/Guide/Introduction#Getting_started_with_JavaScript">工具</a></li>
+  <li><a href="/zh-CN/docs/Web/JavaScript/Guide/Introduction#Hello_world">Hello World</a></li>
+</ul>
+
+<h2 id="语法与数据类型">语法与数据类型</h2>
+
+<p>概述：<a href="/zh-CN/docs/Web/JavaScript/Guide/Grammar_and_types">语法与数据类型</a></p>
+
+<ul>
+  <li><a href="/zh-CN/docs/Web/JavaScript/Guide/Grammar_and_types#基础">基本语法与注释</a></li>
+  <li><a href="/zh-CN/docs/Web/JavaScript/Guide/Grammar_and_types#声明">声明</a></li>
+  <li><a href="/zh-CN/docs/Web/JavaScript/Guide/Grammar_and_types#变量的作用域">变量作用域</a></li>
+  <li><a href="/zh-CN/docs/Web/JavaScript/Guide/Grammar_and_types#变量提升">变量提升</a></li>
+  <li><a href="/zh-CN/docs/Web/JavaScript/Guide/Grammar_and_types#数据结构和类型">数据结构和类型</a></li>
+  <li><a href="/zh-CN/docs/Web/JavaScript/Guide/Grammar_and_types#字面量_(Literals)">字面量</a></li>
+</ul>
+
+<h2 id="控制流与错误处理">控制流与错误处理</h2>
+
+<p>概述：<a href="/zh-CN/docs/Web/JavaScript/Guide/Control_flow_and_error_handling">控制流与错误处理</a></p>
+
+<ul>
+  <li><a href="/zh-CN/docs/Web/JavaScript/Guide/Control_flow_and_error_handling#if...else_语句"><code>if...else</code></a></li>
+  <li><a href="/zh-CN/docs/Web/JavaScript/Guide/Control_flow_and_error_handling#switch_语句"><code>switch</code></a></li>
+  <li><a href="/zh-CN/docs/Web/JavaScript/Guide/Control_flow_and_error_handling#异常处理语句"><code>try</code>/<code>catch</code>/<code>throw</code></a></li>
+  <li><a href="/zh-CN/docs/Web/JavaScript/Guide/Control_flow_and_error_handling#使用Error对象">Error 对象</a></li>
+</ul>
+
+<h2 id="循环与迭代">循环与迭代</h2>
+
+<p>概述：<a href="/zh-CN/docs/Web/JavaScript/Guide/Loops_and_iteration">循环与迭代</a></p>
+
+<ul>
+  <li><a href="/zh-CN/docs/Web/JavaScript/Guide/Loops_and_iteration#for_语句"><code>for</code></a></li>
+  <li><a href="/zh-CN/docs/Web/JavaScript/Guide/Loops_and_iteration#while_语句"><code>while</code></a></li>
+  <li><a href="/zh-CN/docs/Web/JavaScript/Guide/Loops_and_iteration#do...while_语句"><code>do...while</code></a></li>
+  <li><a href="/zh-CN/docs/Web/JavaScript/Guide/Loops_and_iteration#break_语句"><code>break</code></a>/<a href="/zh-CN/docs/Web/JavaScript/Guide/Loops_and_iteration#continue_语句"><code>continue</code></a></li>
+  <li><a href="/zh-CN/docs/Web/JavaScript/Guide/Loops_and_iteration#for...in_语句"><code>for..in</code></a></li>
+  <li><a href="/zh-CN/docs/Web/JavaScript/Guide/Loops_and_iteration#for...of_语句"><code>for..of</code></a></li>
+</ul>
+
+<h2 id="函数">函数</h2>
+
+<p>概述：<a href="/zh-CN/docs/Web/JavaScript/Guide/Functions">函数</a></p>
+
+<ul>
+  <li><a href="/zh-CN/docs/Web/JavaScript/Guide/Functions#定义函数">定义函数</a></li>
+  <li><a href="/zh-CN/docs/Web/JavaScript/Guide/Functions#调用函数">调用函数</a></li>
+  <li><a href="/zh-CN/docs/Web/JavaScript/Guide/Functions#函数作用域">函数作用域</a></li>
+  <li><a href="/zh-CN/docs/Web/JavaScript/Guide/Functions#闭包">闭包</a></li>
+  <li><a href="/zh-CN/docs/Web/JavaScript/Guide/Functions#使用_arguments_对象">arguments 对象</a> 和 <a href="/zh-CN/docs/Web/JavaScript/Guide/Functions#函数参数">参数</a></li>
+  <li><a href="/zh-CN/docs/Web/JavaScript/Guide/Functions#箭头函数">箭头函数</a></li>
+</ul>
+
+<h2 id="表达式和运算符">表达式和运算符</h2>
+
+<p>概述：<a href="/zh-CN/docs/Web/JavaScript/Guide/Expressions_and_Operators">表达式和运算符</a></p>
+
+<ul>
+  <li><a href="/zh-CN/docs/Web/JavaScript/Guide/Expressions_and_Operators#赋值运算符(Assignment_operators)">赋值</a> &amp; </li>
+  <li><a href="/zh-CN/docs/Web/JavaScript/Guide/Expressions_and_Operators#比较运算符(Comparison_operators)">比较</a></li>
+  <li><a href="/zh-CN/docs/Web/JavaScript/Guide/Expressions_and_Operators#算术运算符(Arithmetic_operators)">算术运算符</a></li>
+  <li><a href="/zh-CN/docs/Web/JavaScript/Guide/Expressions_and_Operators#位运算符(Bitwise_operators)">位运算</a> &amp; <li><a href="/zh-CN/docs/Web/JavaScript/Guide/Expressions_and_Operators#逻辑运算符(Logical_operators)">逻辑运算符</a></li></li>
+  <li><a href="/zh-CN/docs/Web/JavaScript/Guide/Expressions_and_Operators#conditional_operator">条件（三元）运算符</a></li>
+</ul>
+
+<h2 id="数字与日期">数字与日期</h2>
+
+<p>概述：<a href="/zh-CN/docs/Web/JavaScript/Guide/Numbers_and_dates">数字与日期</a></p>
+
+<ul>
+ <li><a href="/zh-CN/docs/WJavaScript/概述：Guide/Numbers_and_dates#数字"><code>Number</code> 字面量</a></li>
+ <li><a href="/zh-CN/docs/Web/JavaScript/Guide/Numbers_and_dates#数字对象"><code>Number</code> 对象</a></li>
+ <li><a href="/zh-CN/docs/Web/JavaScript/Guide/Numbers_and_dates#数学对象（Math）"><code>Math</code> 对象</a></li>
+ <li><a href="/zh-CN/docs/Web/JavaScript/Guide/Numbers_and_dates#日期对象"><code>Date</code> 对象</a></li></li>
+</ul>
+
+<h2 id="文本格式化">文本格式化</h2>
+
+<p>概述：<a href="/zh-CN/docs/Web/JavaScript/Guide/Text_formatting">文本格式化</a></p>
+
+<ul>
+  <li><a href="/zh-CN/docs/Web/JavaScript/Guide/Text_formatting#字符串">字符串字面量</a></li>
+  <li><a href="/zh-CN/docs/Web/JavaScript/Guide/Text_formatting#字符串对象">字符串对象</a></li>
+  <li><a href="/zh-CN/docs/Web/JavaScript/Guide/Text_formatting#多行模板字符串">模版字面量</a></li>
+  <li><a href="/zh-CN/docs/Web/JavaScript/Guide/Text_formatting#国际化">国际化</a></li>
+  <li><a href="/zh-CN/docs/Web/JavaScript/Guide/Regular_Expressions">正则表达式</a></li>
+</ul>
+
+<h2 id="索引集合">索引集合</h2>
+
+<p>概述：<a href="/zh-CN/docs/Web/JavaScript/Guide/Indexed_collections">索引集合</a></p>
+
+<ul>
+  <li><a href="/zh-CN/docs/Web/JavaScript/Guide/Indexed_collections#map%E6%95%B0%E7%BB%84">数组</a></li>
+  <li><a href="/zh-CN/docs/Web/JavaScript/Guide/Indexed_collections#类型化数组(Typed_Arrays_)">类型数组</a></li>
 </ul>
 
-<ul class="card-grid">
- <li><a href="/zh-CN/docs/Web/JavaScript/Guide/Functions">函数</a>
-
-  <p><a href="/zh-CN/docs/Web/JavaScript/Guide/Functions#定义函数">定义函数</a><br>
-   <a href="/zh-CN/docs/Web/JavaScript/Guide/Functions#调用函数">调用函数</a><br>
-   <a href="/zh-CN/docs/Web/JavaScript/Guide/Functions#函数作用域">函数作用域</a><br>
-   <a href="/zh-CN/docs/Web/JavaScript/Guide/Functions#闭包">闭包</a><br>
-   <a href="/zh-CN/docs/Web/JavaScript/Guide/Functions#使用_arguments_对象">arguments 对象</a> 和 <a href="/zh-CN/docs/Web/JavaScript/Guide/Functions#函数参数">参数</a><br>
-   <a href="/zh-CN/docs/Web/JavaScript/Guide/Functions#箭头函数">箭头函数</a></p>
- </li>
- <li><a href="/zh-CN/docs/Web/JavaScript/Guide/Expressions_and_Operators">表达式和运算符</a>
-  <p><a href="/zh-CN/docs/Web/JavaScript/Guide/Expressions_and_Operators#赋值运算符(Assignment_operators)">赋值</a> &amp; <a href="/zh-CN/docs/Web/JavaScript/Guide/Expressions_and_Operators#比较运算符(Comparison_operators)">比较</a><br>
-   <a href="/zh-CN/docs/Web/JavaScript/Guide/Expressions_and_Operators#算术运算符(Arithmetic_operators)">算术运算符</a><br>
-   <a href="/zh-CN/docs/Web/JavaScript/Guide/Expressions_and_Operators#位运算符(Bitwise_operators)">位运算</a> &amp; <a href="/zh-CN/docs/Web/JavaScript/Guide/Expressions_and_Operators#逻辑运算符(Logical_operators)">逻辑运算符</a><br>
-   <a href="/zh-CN/docs/Web/JavaScript/Guide/Expressions_and_Operators#conditional_operator">条件（三元）运算符</a></p>
- </li>
- <li><a href="/zh-CN/docs/Web/JavaScript/Guide/Numbers_and_dates">数字与日期</a> <a href="/zh-CN/docs/Web/JavaScript/Guide/Numbers_and_dates#数字"><code>Number</code> 字面量</a><br>
-  <a href="/zh-CN/docs/Web/JavaScript/Guide/Numbers_and_dates#数字对象"><code>Number</code> 对象</a><br>
-  <a href="/zh-CN/docs/Web/JavaScript/Guide/Numbers_and_dates#数学对象（Math）"><code>Math</code> 对象</a><br>
-  <a href="/zh-CN/docs/Web/JavaScript/Guide/Numbers_and_dates#日期对象"><code>Date</code> 对象</a></li>
- <li><a href="/zh-CN/docs/Web/JavaScript/Guide/Text_formatting">文本格式化</a>
-  <p><a href="/zh-CN/docs/Web/JavaScript/Guide/Text_formatting#字符串">字符串字面量</a><br>
-   <a href="/zh-CN/docs/Web/JavaScript/Guide/Text_formatting#字符串对象">字符串对象</a><br>
-   <a href="/zh-CN/docs/Web/JavaScript/Guide/Text_formatting#多行模板字符串">模版字面量</a><br>
-   <a href="/zh-CN/docs/Web/JavaScript/Guide/Text_formatting#国际化">国际化</a><br>
-   <a href="/zh-CN/docs/Web/JavaScript/Guide/Regular_Expressions">正则表达式</a></p>
- </li>
+<h2 id="带键集合">带键集合</h2>
+
+<p>概述：<a href="/zh-CN/docs/Web/JavaScript/Guide/Keyed_collections">带键集合</a></p>
+<p>
+<ul>
+  <li><a href="/zh-CN/docs/Web/JavaScript/Guide/Keyed_collections#Map对象"><code>Map</code></a></li>
+  <li><a href="/zh-CN/docs/Web/JavaScript/Guide/Keyed_collections#WeakMap对象"><code>WeakMap</code></a></li>
+  <li><a href="/zh-CN/docs/Web/JavaScript/Guide/Keyed_collections#Set对象"><code>Set</code></a></li>
+  <li><a href="/zh-CN/docs/Web/JavaScript/Guide/Keyed_collections#WeakSet对象"><code>WeakSet</code></a></li>
 </ul>
 
-<ul class="card-grid">
- <li><a href="/zh-CN/docs/Web/JavaScript/Guide/Indexed_collections">索引集合</a>
-
-  <p><a href="/zh-CN/docs/Web/JavaScript/Guide/Indexed_collections#map%E6%95%B0%E7%BB%84">数组</a><br>
-   <a href="/zh-CN/docs/Web/JavaScript/Guide/Indexed_collections#类型化数组(Typed_Arrays_)">类型数组</a></p>
- </li>
- <li><a href="/zh-CN/docs/Web/JavaScript/Guide/Keyed_collections">带键集合</a>
-  <p><a href="/zh-CN/docs/Web/JavaScript/Guide/Keyed_collections#Map对象"><code>Map</code></a><br>
-   <a href="/zh-CN/docs/Web/JavaScript/Guide/Keyed_collections#WeakMap对象"><code>WeakMap</code></a><br>
-   <a href="/zh-CN/docs/Web/JavaScript/Guide/Keyed_collections#Set对象"><code>Set</code></a><br>
-   <a href="/zh-CN/docs/Web/JavaScript/Guide/Keyed_collections#WeakSet对象"><code>WeakSet</code></a></p>
- </li>
- <li><a href="/zh-CN/docs/Web/JavaScript/Guide/Working_with_Objects">处理对象</a>
-  <p><a href="/zh-CN/docs/Web/JavaScript/Guide/Working_with_Objects#%E5%AF%B9%E8%B1%A1%E5%92%8C%E5%B1%9E%E6%80%A7_2">对象和属性</a><br>
-   <a href="/zh-CN/docs/Web/JavaScript/Guide/Working_with_Objects#%E5%88%9B%E5%BB%BA%E6%96%B0%E5%AF%B9%E8%B1%A1">创建对象</a><br>
-   <a href="/zh-CN/docs/Web/JavaScript/Guide/Working_with_Objects#%E5%AE%9A%E4%B9%89%E6%96%B9%E6%B3%95">定义方法</a><br>
-   <a href="/zh-CN/docs/Web/JavaScript/Guide/Working_with_Objects#%E5%AE%9A%E4%B9%89_getters_%E4%B8%8E_setters">getter 和 setter</a></p>
- </li>
- <li><a href="/zh-CN/docs/Web/JavaScript/Guide/Details_of_the_Object_Model">对象模型的细节</a>
-  <p><a href="/zh-CN/docs/Web/JavaScript/Guide/Details_of_the_Object_Model#class-based_vs_prototype-based_languages">基于原型的面向对象编程</a><br>
-   <a href="/zh-CN/docs/Web/JavaScript/Guide/Details_of_the_Object_Model#%E5%88%9B%E5%BB%BA%E5%B1%82%E7%BA%A7%E7%BB%93%E6%9E%84">创建对象层次结构</a><br>
-   <a href="/zh-CN/docs/Web/JavaScript/Guide/Details_of_the_Object_Model#%E5%AF%B9%E8%B1%A1%E7%9A%84%E5%B1%9E%E6%80%A7">继承</a></p>
- </li>
+<h2 id="处理对象">处理对象</h2>
+
+<p>概述：<a href="/zh-CN/docs/Web/JavaScript/Guide/Working_with_Objects">处理对象</a></p>
+
+<ul>
+  <li><a href="/zh-CN/docs/Web/JavaScript/Guide/Working_with_Objects#%E5%AF%B9%E8%B1%A1%E5%92%8C%E5%B1%9E%E6%80%A7_2">对象和属性</a></li>
+  <li><a href="/zh-CN/docs/Web/JavaScript/Guide/Working_with_Objects#%E5%88%9B%E5%BB%BA%E6%96%B0%E5%AF%B9%E8%B1%A1">创建对象</a></li>
+  <li><a href="/zh-CN/docs/Web/JavaScript/Guide/Working_with_Objects#%E5%AE%9A%E4%B9%89%E6%96%B9%E6%B3%95">定义方法</a></li>
+  <li><a href="/zh-CN/docs/Web/JavaScript/Guide/Working_with_Objects#%E5%AE%9A%E4%B9%89_getters_%E4%B8%8E_setters">getter 和 setter</a></li>
 </ul>
 
-<ul class="card-grid">
- <li><a href="/zh-CN/docs/Web/JavaScript/Guide/Using_promises">Promises</a>
-
-  <p><a href="/zh-CN/docs/Web/JavaScript/Guide/Using_promises#%E7%BA%A6%E5%AE%9A">约定</a><br>
-   <a href="/zh-CN/docs/Web/JavaScript/Guide/Using_promises#%E9%93%BE%E5%BC%8F%E8%B0%83%E7%94%A8">链式调用</a><br>
-   <a href="/zh-CN/docs/Web/JavaScript/Guide/Using_promises#%E9%94%99%E8%AF%AF%E4%BC%A0%E9%80%92">错误传递</a><br>
-   <a href="/zh-CN/docs/Web/JavaScript/Guide/Using_promises#%E7%BB%84%E5%90%88">组合</a><br>
-   <a href="/zh-CN/docs/Web/JavaScript/Guide/Using_promises#%E6%97%B6%E5%BA%8F">时序</a></p>
- </li>
- <li><a href="/zh-CN/docs/Web/JavaScript/Guide/Iterators_and_Generators">迭代器与生成器</a>
-  <p><a href="/zh-CN/docs/Web/JavaScript/Guide/Iterators_and_Generators#%E8%BF%AD%E4%BB%A3%E5%99%A8">迭代器</a><br>
-   <a href="/zh-CN/docs/Web/JavaScript/Guide/Iterators_and_Generators#%E7%94%9F%E6%88%90%E5%99%A8">生成器</a><br>
-   <a href="/zh-CN/docs/Web/JavaScript/Guide/Iterators_and_Generators#%E5%8F%AF%E8%BF%AD%E4%BB%A3%E5%AF%B9%E8%B1%A1">可迭代对象</a></p>
- </li>
- <li><a href="/zh-CN/docs/Web/JavaScript/Guide/Meta_programming">元编程</a>
-  <p><a href="/zh-CN/docs/Web/JavaScript/Guide/Meta_programming#%E4%BB%A3%E7%90%86"><code>Proxy</code></a><br>
-   <a href="/zh-CN/docs/Web/JavaScript/Guide/Meta_programming#%E5%8F%A5%E6%9F%84%E5%92%8C%E9%99%B7%E9%98%B1">Handlers 和 traps</a><br>
-   <a href="/zh-CN/docs/Web/JavaScript/Guide/Meta_programming#%E6%92%A4%E9%94%80_Proxy">撤销 Proxy</a><br>
-   <a href="/zh-CN/docs/Web/JavaScript/Guide/Meta_programming#%E5%8F%8D%E5%B0%84"><code>Reflect</code></a></p>
- </li>
- <li><a href="/zh-CN/docs/Web/JavaScript/Guide/Modules">JavaScript 模块</a>
-  <p><a href="/zh-CN/docs/Web/JavaScript/Guide/Modules#Exporting_module_features">导出模块</a><br>
-   <a href="/zh-CN/docs/Web/JavaScript/Guide/Modules#Importing_features_into_your_script">导入模块</a><br>
-   <a href="/zh-CN/docs/Web/JavaScript/Guide/Modules#Default_exports_versus_named_exports">默认导出</a><br>
-   <a href="/zh-CN/docs/Web/JavaScript/Guide/Modules#Renaming_imports_and_exports">重命名模块</a><br>
-   <a href="/zh-CN/docs/Web/JavaScript/Guide/Modules#Aggregating_modules">合并模块</a><br>
-   <a href="/zh-CN/docs/Web/JavaScript/Guide/Modules#Dynamic_module_loading">动态加载模块</a></p>
- </li>
+<h2 id="对象模型的细节">对象模型的细节</h2>
+
+<p>概述：<a href="/zh-CN/docs/Web/JavaScript/Guide/Details_of_the_Object_Model">对象模型的细节</a></p>
+
+<ul>
+  <li><a href="/zh-CN/docs/Web/JavaScript/Guide/Details_of_the_Object_Model#class-based_vs_prototype-based_languages">基于原型的面向对象编程</a></li>
+  <li><a href="/zh-CN/docs/Web/JavaScript/Guide/Details_of_the_Object_Model#%E5%88%9B%E5%BB%BA%E5%B1%82%E7%BA%A7%E7%BB%93%E6%9E%84">创建对象层次结构</a></li>
+  <li><a href="/zh-CN/docs/Web/JavaScript/Guide/Details_of_the_Object_Model#%E5%AF%B9%E8%B1%A1%E7%9A%84%E5%B1%9E%E6%80%A7">继承</a></li>
 </ul>
 
+<h2 id="Promises">Promises</h2>
+
+<p>概述：<a href="/zh-CN/docs/Web/JavaScript/Guide/Using_promises">Promises</a></p>
+
+<ul>
+  <li><a href="/zh-CN/docs/Web/JavaScript/Guide/Using_promises#%E7%BA%A6%E5%AE%9A">约定</a></li>
+  <li><a href="/zh-CN/docs/Web/JavaScript/Guide/Using_promises#%E9%93%BE%E5%BC%8F%E8%B0%83%E7%94%A8">链式调用</a></li>
+  <li><a href="/zh-CN/docs/Web/JavaScript/Guide/Using_promises#%E9%94%99%E8%AF%AF%E4%BC%A0%E9%80%92">错误传递</a></li>
+  <li><a href="/zh-CN/docs/Web/JavaScript/Guide/Using_promises#%E7%BB%84%E5%90%88">组合</a></li>
+  <li><a href="/zh-CN/docs/Web/JavaScript/Guide/Using_promises#%E6%97%B6%E5%BA%8F">时序</a></li>
+</ul>
+
+<h2 id="迭代器与生成器">迭代器与生成器</h2>
+
+<p>概述：<a href="/zh-CN/docs/Web/JavaScript/Guide/Iterators_and_Generators">迭代器与生成器</a></p>
+
+<ul>
+  <li><a href="/zh-CN/docs/Web/JavaScript/Guide/Iterators_and_Generators#%E8%BF%AD%E4%BB%A3%E5%99%A8">迭代器</a></li>
+  <li><a href="/zh-CN/docs/Web/JavaScript/Guide/Iterators_and_Generators#%E7%94%9F%E6%88%90%E5%99%A8">生成器</a></li>
+  <li><a href="/zh-CN/docs/Web/JavaScript/Guide/Iterators_and_Generators#%E5%8F%AF%E8%BF%AD%E4%BB%A3%E5%AF%B9%E8%B1%A1">可迭代对象</a></li>
+</ul>
+
+<h2 id="元编程">元编程</h2>
+
+<p>概述：<a href="/zh-CN/docs/Web/JavaScript/Guide/Meta_programming">元编程</a></p>
+
+<ul>
+  <li><a href="/zh-CN/docs/Web/JavaScript/Guide/Meta_programming#%E4%BB%A3%E7%90%86"><code>Proxy</code></a></li>
+  <li><a href="/zh-CN/docs/Web/JavaScript/Guide/Meta_programming#%E5%8F%A5%E6%9F%84%E5%92%8C%E9%99%B7%E9%98%B1">Handlers 和 traps</a></li>
+  <li><a href="/zh-CN/docs/Web/JavaScript/Guide/Meta_programming#%E6%92%A4%E9%94%80_Proxy">撤销 Proxy</a></li>
+  <li><a href="/zh-CN/docs/Web/JavaScript/Guide/Meta_programming#%E5%8F%8D%E5%B0%84"><code>Reflect</code></a></li>
+</ul>
+
+<h2 id="JavaScript 模块">JavaScript 模块</h2>
+
+<p>概述：<a href="/zh-CN/docs/Web/JavaScript/Guide/Modules">JavaScript 模块</a></p>
+
+<ul>
+  <li><a href="/zh-CN/docs/Web/JavaScript/Guide/Modules#Exporting_module_features">导出模块</a></li>
+  <li><a href="/zh-CN/docs/Web/JavaScript/Guide/Modules#Importing_features_into_your_script">导入模块</a></li>
+  <li><a href="/zh-CN/docs/Web/JavaScript/Guide/Modules#Default_exports_versus_named_exports">默认导出</a></li>
+  <li><a href="/zh-CN/docs/Web/JavaScript/Guide/Modules#Renaming_imports_and_exports">重命名模块</a></li>
+  <li><a href="/zh-CN/docs/Web/JavaScript/Guide/Modules#Aggregating_modules">合并模块</a></li>
+  <li><a href="/zh-CN/docs/Web/JavaScript/Guide/Modules#Dynamic_module_loading">动态加载模块</a></li>
+ </ul>
+
 <p>{{Next("Web/JavaScript/Guide/Introduction")}}</p>
diff --git a/files/zh-cn/web/javascript/guide/indexed_collections/index.html b/files/zh-cn/web/javascript/guide/indexed_collections/index.html
index 53e12083af..5e29a8d49e 100644
--- a/files/zh-cn/web/javascript/guide/indexed_collections/index.html
+++ b/files/zh-cn/web/javascript/guide/indexed_collections/index.html
@@ -39,7 +39,7 @@ arr.length = arrayLength;
 </pre>
 
 <div class="note">
-<p><strong>注意: </strong>以上代码，数组长度（arrayLength）必须为一个数字（Number）。否则，将会创建一个只有单个（所输入的）元素的数组。 调用 <code>arr.length</code> 会返回数组长度，但是数组实际上包含了空的（<code>undefined</code>）元素。 因此在数组上使用 <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/for...in">for...in</a></code> 循环，将不会返回任何的值 。</p>
+<p><strong>备注：</strong>以上代码，数组长度（arrayLength）必须为一个数字（Number）。否则，将会创建一个只有单个（所输入的）元素的数组。 调用 <code>arr.length</code> 会返回数组长度，但是数组实际上包含了空的（<code>undefined</code>）元素。 因此在数组上使用 <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/for...in">for...in</a></code> 循环，将不会返回任何的值 。</p>
 </div>
 
 <p>除了如上所示创建新定义的变量，数组(array)也可以作为一个属性(property)分配给一个新的或者已存在的对象(object)：</p>
@@ -82,7 +82,7 @@ emp[2] = "August West";
 </pre>
 
 <div class="note">
-<p><strong>注意：</strong>如果你在以上代码中给数组操作符的是一个非整形数值，那么将作为一个代表数组的对象的属性(property)创建，而非作为数组的元素。</p>
+<p><strong>备注：</strong>如果你在以上代码中给数组操作符的是一个非整形数值，那么将作为一个代表数组的对象的属性(property)创建，而非作为数组的元素。</p>
 </div>
 
 <pre class="brush: js">var arr = [];
@@ -107,7 +107,7 @@ var myArray = ["Mango", "Apple", "Orange"]
 <p>你可以用 <code>myArray[0]</code>引用第一个元素，<code>myArray[1]</code>引用第二个元素。元素的索引是从<code>0</code>开始的。</p>
 
 <div class="note">
-<p><strong>注意：</strong>数组操作符（方括号 [ ]）也可以用来访问数组的属性(在 JavaScript 中，数组也是对象)。例如：</p>
+<p><strong>备注：</strong>数组操作符（方括号 [ ]）也可以用来访问数组的属性(在 JavaScript 中，数组也是对象)。例如：</p>
 </div>
 
 <pre class="brush: js">var arr = ["one", "two", "three"];
@@ -461,7 +461,7 @@ var interpolatedZeros = [c+'0' for (c of str) ].join(''); // 'a0b0c0d0e0f0'
 
 <p>为了实现最大的灵活性和效率，JavaScript类型数组被分解为缓冲(Buffer)和视图(views)。缓冲(由{{jsxref("ArrayBuffer")}} 实现)是代表数据块的对象，它没有格式可言，并没有提供任何机制来访问其内容。为了访问包含在缓冲区中的内存，您需要使用视图。视图提供了一个上下文，即数据类型、起始偏移量和元素数，这些元素将数据转换为实际类型数组。</p>
 
-<p><img alt="Typed arrays in an ArrayBuffer" src="https://mdn.mozillademos.org/files/8629/typed_arrays.png" style="height: 278px; width: 666px;"></p>
+<p><img alt="Typed arrays in an ArrayBuffer" src="https://mdn.mozillademos.org/files/8629/typed_arrays.png"></p>
 
 <h3 id="ArrayBuffer">ArrayBuffer</h3>
 
diff --git a/files/zh-cn/web/javascript/guide/introduction/index.html b/files/zh-cn/web/javascript/guide/introduction/index.html
index f6a85d1e2d..36bcfc6639 100644
--- a/files/zh-cn/web/javascript/guide/introduction/index.html
+++ b/files/zh-cn/web/javascript/guide/introduction/index.html
@@ -111,7 +111,7 @@ translation_of: Web/JavaScript/Guide/Introduction
 
 <p>在火狐浏览器菜单栏的 “工具" =&gt; "Web开发者" =&gt; "Web控制台" 可以打开控制台( 在Windows和Linux上<kbd>Ctrl</kbd>+<kbd>Shift</kbd>+<kbd>K</kbd> ，Mac上<kbd>Cmd</kbd>+<kbd>Option</kbd>+<kbd>K</kbd>) ，它会如期出现在浏览器窗口的底部。如图，最下一行就是可以执行输入的命令行，面板上可以显示执行结果：</p>
 
-<p><img alt="" src="https://mdn.mozillademos.org/files/7363/web-console-commandline.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
+<p><img alt="" src="https://mdn.mozillademos.org/files/7363/web-console-commandline.png"></p>
 
 <p>控制台的工作方式与eval完全相同：返回最后输入的表达式。为了简单起见，可以想象每次输入到控制台的东西实际上都被 console.log 所包围。</p>
 
@@ -125,7 +125,7 @@ translation_of: Web/JavaScript/Guide/Introduction
 
 <p>如果你选择显示，草稿纸中的代码会在浏览器中执行，并在内容后面以注释的形式插入返回的结果：</p>
 
-<p><img alt="" src="https://mdn.mozillademos.org/files/7365/scratchpad.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
+<p><img alt="" src="https://mdn.mozillademos.org/files/7365/scratchpad.png"></p>
 
 <h3 id="Hello_world">Hello world</h3>
 
diff --git a/files/zh-cn/web/javascript/guide/iterators_and_generators/index.html b/files/zh-cn/web/javascript/guide/iterators_and_generators/index.html
index 1694adbd61..9e5bbe3cbd 100644
--- a/files/zh-cn/web/javascript/guide/iterators_and_generators/index.html
+++ b/files/zh-cn/web/javascript/guide/iterators_and_generators/index.html
@@ -70,7 +70,7 @@ console.log("Iterated over sequence of size: ", result.value); // 5
 </pre>
 
 <div class="note">
-<p>反射性地知道特定对象是否是迭代器是不可能的。 如果您需要这样做，请使用 <a href="#Iterables">Iterables</a>.</p>
+<p><strong>备注：</strong>反射性地知道特定对象是否是迭代器是不可能的。 如果您需要这样做，请使用 <a href="#Iterables">Iterables</a>.</p>
 </div>
 
 <h2 id="生成器函数">生成器函数</h2>
diff --git a/files/zh-cn/web/javascript/guide/modules/index.html b/files/zh-cn/web/javascript/guide/modules/index.html
index 3ad682563c..e3db44e9a0 100644
--- a/files/zh-cn/web/javascript/guide/modules/index.html
+++ b/files/zh-cn/web/javascript/guide/modules/index.html
@@ -39,8 +39,8 @@ translation_of: Web/JavaScript/Guide/Modules
 
 <p>这的确有点简单，但是保持足够简单能够清晰地演示模块。</p>
 
-<div class="blockIndicator note">
-<p><strong>Note</strong>: 如果你想去下载这个例子在本地运行，你需要通过本地 web 服务器去运行。</p>
+<div class="note">
+<p><strong>备注：</strong>如果你想去下载这个例子在本地运行，你需要通过本地web 服务器去运行。</p>
 </div>
 
 <h2 id="基本的示例文件的结构">基本的示例文件的结构</h2>
@@ -53,8 +53,8 @@ modules/
     canvas.mjs
     square.mjs</pre>
 
-<div class="blockIndicator note">
-<p><strong>Note</strong>: 在这个指南的全部示例项目的文件结构是基本相同的； 需要熟悉上面的内容</p>
+<div class="note">
+<p><strong>备注：</strong>在这个指南的全部示例项目的文件结构是基本相同的； 需要熟悉上面的内容</p>
 </div>
 
 <p>modules 目录下的两个模块的描述如下:</p>
@@ -77,8 +77,8 @@ modules/
  </li>
 </ul>
 
-<div class="blockIndicator note">
-<p><strong>Note</strong>: 在原生JavaScript模块中, 扩展名 <code>.mjs</code> 非常重要，因为使用 MIME-type 为<code>javascript/esm</code> 来导入文件(其他的JavaScript 兼容 MIME-type 像 <code>application/javascript</code> 也可以), 它避免了严格的 MIME 类型检查错误，像 "The server responded with a non-JavaScript MIME type". 除此之外,  <code>.mjs</code> 的扩展名很明了(比如这个就是一个模块，而不是一个传统 JavaScript文件)，还能够和其他工具互相适用. 看这个 <a href="https://v8.dev/features/modules#mjs">Google's note for further details</a>.</p>
+<div class="note">
+<p><strong>备注：</strong>在原生JavaScript模块中, 扩展名 <code>.mjs</code> 非常重要，因为使用 MIME-type 为<code>javascript/esm</code> 来导入文件(其他的JavaScript 兼容 MIME-type 像 <code>application/javascript</code> 也可以), 它避免了严格的 MIME 类型检查错误，像 "The server responded with a non-JavaScript MIME type". 除此之外,  <code>.mjs</code> 的扩展名很明了(比如这个就是一个模块，而不是一个传统 JavaScript文件)，还能够和其他工具互相适用. 看这个 <a href="https://v8.dev/features/modules#mjs">Google's note for further details</a>.</p>
 </div>
 
 <h2 id=".mjs_与_.js"><code>.mjs</code> 与 <code>.js</code></h2>
@@ -151,8 +151,8 @@ export function draw(ctx, length, x, y, color) {
 
 <p>你可以在<code><a href="https://github.com/mdn/js-examples/blob/master/modules/basic-modules/main.js">main.mjs</a></code>中看到这些。</p>
 
-<div class="blockIndicator note">
-<p><strong>Note</strong>:在一些模块系统中你可以忽略文件扩展名（比如<code>'/model/squre'</code> .这在原生JavaScript 模块系统中不工作。<s>此外，记住你需要包含最前面的正斜杠。  </s> （修订版 1889482）</p>
+<div class="note">
+<p><strong>备注：</strong>在一些模块系统中你可以忽略文件扩展名（比如<code>'/model/squre'</code> .这在原生JavaScript 模块系统中不工作。<del>此外，记住你需要包含最前面的正斜杠。</del> （修订版 1889482）</p>
 </div>
 
 <p>因为你导入了这些功能到你的脚本文件，你可以像定义在相同的文件中的一样去使用它。下面展示的是在 <code>main.mjs</code> 中的import 语句下面的内容。</p>
@@ -177,8 +177,8 @@ reportPerimeter(square1.length, reportList);
 
 <p>你只能在模块内部使用 <code>import</code> 和<code>export</code> 语句 ；不是普通脚本文件。</p>
 
-<div class="blockIndicator note">
-<p><strong>Note</strong>: 您还可以将模块导入内部脚本，只要包含 <code>type="module"</code>，例如 <code>&lt;script type="module"&gt; //include script here &lt;/script&gt;</code>.</p>
+<div class="note">
+<p><strong>备注：</strong>您还可以将模块导入内部脚本，只要包含 <code>type="module"</code>，例如 <code>&lt;script type="module"&gt; //include script here &lt;/script&gt;</code>.</p>
 </div>
 
 <h2 id="其他模块与标准脚本的不同">其他模块与标准脚本的不同</h2>
@@ -216,8 +216,8 @@ reportPerimeter(square1.length, reportList);
 
 <pre class="brush: js">import {default as randomSquare} from './modules/square.mjs';</pre>
 
-<div class="blockIndicator note">
-<p><strong>Note</strong>: 重命名导出项的as语法在下面的{{anch("Renaming imports and exports")}}部分中进行了说明。</p>
+<div class="note">
+<p><strong>备注：</strong>重命名导出项的as语法在下面的{{anch("Renaming imports and exports")}}部分中进行了说明。</p>
 </div>
 
 <h2 id="避免命名冲突">避免命名冲突</h2>
@@ -362,8 +362,8 @@ square1.reportPerimeter();</pre>
 <pre class="brush: js">export * from 'x.mjs'
 export { name } from 'x.mjs'</pre>
 
-<div class="blockIndicator note">
-<p><strong>Note</strong>: 这实际上是导入后跟导出的简写，即“我导入模块<code>x.mjs</code>，然后重新导出部分或全部导出”。</p>
+<div class="note">
+<p><strong>备注：</strong>这实际上是导入后跟导出的简写，即“我导入模块<code>x.mjs</code>，然后重新导出部分或全部导出”。</p>
 </div>
 
 <p>有关示例，请参阅我们的<a href="https://github.com/mdn/js-examples/tree/master/modules/module-aggregation">module-aggregation</a>。 在这个例子中（基于我们之前的类示例），我们有一个名为<code>shapes.mjs</code>的额外模块，它将<code>circle.mjs</code>，<code>square.mjs</code>和<code>riangle.mjs</code>中的所有功能聚合在一起。 我们还将子模块移动到名为shapes的modules目录中的子目录中。 所以模块结构现在是这样的：</p>
@@ -388,12 +388,12 @@ export { Circle } from '/js-examples/modules/module-aggregation/modules/shapes/c
 
 <p>它们从各个子模块中获取导出，并有效地从<code>shapes.mjs</code>模块中获取它们。</p>
 
-<div class="blockIndicator note">
-<p><strong>Note</strong>: 即使<code>shapes.mjs</code>文件位于 modules 目录中，我们仍然需要相对于模块根目录编写这些URL，因此需要<code>/modules/</code>。 这是使用JavaScript模块时混淆的常见原因。</p>
+<div class="note">
+<p><strong>备注：</strong>即使<code>shapes.mjs</code>文件位于modules目录中，我们仍然需要相对于模块根目录编写这些URL，因此需要<code>/modules/</code>。 这是使用JavaScript模块时混淆的常见原因。</p>
 </div>
 
-<div class="blockIndicator note">
-<p><strong>Note</strong>: <code>shapes.mjs</code>中引用的导出基本上通过文件重定向，并且实际上并不存在，因此您将无法在同一文件中编写任何有用的相关代码。</p>
+<div class="note">
+<p><strong>备注：</strong><code>shapes.mjs</code>中引用的导出基本上通过文件重定向，并且实际上并不存在，因此您将无法在同一文件中编写任何有用的相关代码。</p>
 </div>
 
 <p>所以现在在<code>main.mjs</code> 文件中，我们可以通过替换来访问所有三个模块类</p>
diff --git a/files/zh-cn/web/javascript/guide/regular_expressions/assertions/index.html b/files/zh-cn/web/javascript/guide/regular_expressions/assertions/index.html
index 0d3757acd6..783c2985e0 100644
--- a/files/zh-cn/web/javascript/guide/regular_expressions/assertions/index.html
+++ b/files/zh-cn/web/javascript/guide/regular_expressions/assertions/index.html
@@ -32,8 +32,8 @@ translation_of: Web/JavaScript/Guide/Regular_Expressions/Assertions
    <td>
     <p>匹配输入的开头。如果多行模式设为 true，<code>^</code> 在换行符后也能立即匹配，比如 <code>/^A/</code> 匹配不了 "an A" 里面的 "A"，但是可以匹配 "An A" 里面第一个 "A"。</p>
 
-    <div class="blockIndicator note">
-    <p><code>^</code> 出现在集合或范围开头时的含义与此不同（参见 <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions/Groups_and_Ranges">group</a>）。</p>
+    <div class="note">
+    <p><strong>备注：</strong><code>^</code> 出现在集合或范围开头时的含义与此不同（参见 <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions/Groups_and_Ranges">group</a>）。</p>
     </div>
    </td>
   </tr>
@@ -71,8 +71,8 @@ translation_of: Web/JavaScript/Guide/Regular_Expressions/Assertions
 
 <h3 id="其他断言">其他断言 </h3>
 
-<div class="blockIndicator note">
-<p>提示：<code>？</code>字符也可用作量词</p>
+<div class="note">
+<p><strong>备注：</strong><code>？</code>字符也可用作量词</p>
 </div>
 
 <table class="standard-table">
diff --git a/files/zh-cn/web/javascript/guide/regular_expressions/character_classes/index.html b/files/zh-cn/web/javascript/guide/regular_expressions/character_classes/index.html
index 84bf4e0090..09cf23daa0 100644
--- a/files/zh-cn/web/javascript/guide/regular_expressions/character_classes/index.html
+++ b/files/zh-cn/web/javascript/guide/regular_expressions/character_classes/index.html
@@ -130,8 +130,8 @@ translation_of: Web/JavaScript/Guide/Regular_Expressions/Character_Classes
      <li>For characters that are usually treated specially, indicates that the next character is not special and should be interpreted literally. For example, "*" is a special character that means 0 or more occurrences of the preceding character should be matched; for example, <code>/a*/</code> means match 0 or more "a"s. To match <code>*</code> literally, precede it with a backslash; for example, <code>/a\*/</code> matches "a*".</li>
     </ul>
 
-    <div class="blockIndicator note">
-    <p>To match this character literally, escape it with itself. In other words to search for <code>\</code> use <code>/\\/</code>.</p>
+    <div class="note">
+    <p><strong>备注：</strong>To match this character literally, escape it with itself. In other words to search for <code>\</code> use <code>/\\/</code>.</p>
     </div>
    </td>
   </tr>
diff --git a/files/zh-cn/web/javascript/guide/regular_expressions/groups_and_ranges/index.html b/files/zh-cn/web/javascript/guide/regular_expressions/groups_and_ranges/index.html
index ac6334b3df..f0045774ff 100644
--- a/files/zh-cn/web/javascript/guide/regular_expressions/groups_and_ranges/index.html
+++ b/files/zh-cn/web/javascript/guide/regular_expressions/groups_and_ranges/index.html
@@ -46,8 +46,8 @@ translation_of: Web/JavaScript/Guide/Regular_Expressions/Groups_and_Ranges
    <td>
     <p>一个否定的或被补充的字符集。也就是说，它匹配任何没有包含在括号中的字符。可以通过使用连字符来指定字符范围，但是如果连字符作为方括号中的第一个或最后一个字符出现，那么它将被视为作为普通字符包含在字符集中。例如，[^abc]和[^a-c]一样。它们最初匹配“bacon”中的“o”和“chop”中的“h”。</p>
 
-    <div class="blockIndicator note">
-    <p> ^ 字符也可以表示   <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions/Boundaries">输入的起始</a></p>
+    <div class="note">
+    <p><strong>备注：</strong> ^ 字符也可以表示   <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions/Boundaries">输入的起始</a></p>
     </div>
    </td>
   </tr>
@@ -125,8 +125,8 @@ do {
 // Hellow 李 雷
 // Hellow 韩 梅梅</pre>
 
-<div class="blockIndicator note">
-<p><strong>Note:</strong> 并不是所有的浏览器都支持这个功能; 参考兼容表： <a href="/en-US/docs/Web/JavaScript/Guide/Regular_Expressions#Browser_compatibility">compatibility table</a>.</p>
+<div class="note">
+<p><strong>备注：</strong> 并不是所有的浏览器都支持这个功能; 参考兼容表： <a href="/en-US/docs/Web/JavaScript/Guide/Regular_Expressions#Browser_compatibility">compatibility table</a>.</p>
 </div>
 
 <h2 id="技术指标">技术指标</h2>
diff --git a/files/zh-cn/web/javascript/guide/regular_expressions/index.html b/files/zh-cn/web/javascript/guide/regular_expressions/index.html
index 945081c966..b8f02f1a9b 100644
--- a/files/zh-cn/web/javascript/guide/regular_expressions/index.html
+++ b/files/zh-cn/web/javascript/guide/regular_expressions/index.html
@@ -245,7 +245,7 @@ translation_of: Web/JavaScript/Guide/Regular_Expressions
      /\w\b\w/将不能匹配任何字符串，因为在一个单词中间的字符永远也不可能同时满足没有“字”字符跟随和有“字”字符跟随两种情况。</p>
 
     <div class="note">
-    <p><strong>注意:</strong> JavaScript的正则表达式引擎将<a href="http://www.ecma-international.org/ecma-262/5.1/#sec-15.10.2.6">特定的字符集</a>定义为“字”字符。不在该集合中的任何字符都被认为是一个断词。这组字符相当有限：它只包括大写和小写的罗马字母，十进制数字和下划线字符。不幸的是，重要的字符，例如“<a></a>é”或“ü”，被视为断词。</p>
+    <p><strong>备注：</strong> JavaScript的正则表达式引擎将<a href="http://www.ecma-international.org/ecma-262/5.1/#sec-15.10.2.6">特定的字符集</a>定义为“字”字符。不在该集合中的任何字符都被认为是一个断词。这组字符相当有限：它只包括大写和小写的罗马字母，十进制数字和下划线字符。不幸的是，重要的字符，例如“é”或“ü”，被视为断词。</p>
     </div>
    </td>
   </tr>
@@ -543,7 +543,7 @@ console.log("The value of lastIndex is " + /d(b+)d/g.lastIndex);
 
 <p>当发生/d(b+)d/g使用两个不同状态的正则表达式对象，lastIndex属性会得到不同的值。如果你需要访问一个正则表达式的属性，则需要创建一个对象初始化生成器，你应该首先把它赋值给一个变量。</p>
 
-<h3 id="使用括号的子字符串匹配_2"><a>使用括号的子字符串匹配</a></h3>
+<h3 id="使用括号的子字符串匹配_2">使用括号的子字符串匹配</h3>
 
 <p>一个正则表达式模式使用括号，将导致相应的子匹配被记住。例如，/a(b)c /可以匹配字符串“abc”，并且记得“b”。回调这些括号中匹配的子串，使用数组元素[1],……[n]。</p>
 
diff --git a/files/zh-cn/web/javascript/guide/regular_expressions/unicode_property_escapes/index.html b/files/zh-cn/web/javascript/guide/regular_expressions/unicode_property_escapes/index.html
index cf8a7207b6..64254c284c 100644
--- a/files/zh-cn/web/javascript/guide/regular_expressions/unicode_property_escapes/index.html
+++ b/files/zh-cn/web/javascript/guide/regular_expressions/unicode_property_escapes/index.html
@@ -9,12 +9,12 @@ translation_of: Web/JavaScript/Guide/Regular_Expressions/Unicode_Property_Escape
 
 <div>{{EmbedInteractiveExample("pages/js/regexp-unicode-property-escapes.html", "taller")}}</div>
 
-<div class="blockIndicator note">
-<p><strong>Note: </strong>使用 Unicode 属性转义依靠 <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp/unicode"><code>\u</code> 标识</a>，<code>\u</code> 表示该字符串被视为一串 Unicode 代码点。参考 <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp/unicode">RegExp.prototype.nicode</a></code>.</p>
+<div class="note">
+<p><strong>备注：</strong>使用 Unicode 属性转义依靠 <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp/unicode"><code>\u</code> 标识</a>，<code>\u</code> 表示该字符串被视为一串 Unicode 代码点。参考 <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp/unicode">RegExp.prototype.nicode</a></code>.</p>
 </div>
 
-<div class="blockIndicator note">
-<p><strong>Note:</strong> 某些 Unicode 属性比<a href="/en-US/docs/Web/JavaScript/Guide/Regular_Expressions/Character_Classes">字符类</a>(如 <code>\w</code> 只匹配拉丁字母 <code>a</code> 到 <code>z</code>)包含更多的字符  ，但后者浏览器兼容性更好 (截至2020 一月).</p>
+<div class="note">
+<p><strong>备注：</strong> 某些 Unicode 属性比<a href="/en-US/docs/Web/JavaScript/Guide/Regular_Expressions/Character_Classes">字符类</a>(如 <code>\w</code> 只匹配拉丁字母 <code>a</code> 到 <code>z</code>)包含更多的字符  ，但后者浏览器兼容性更好 (截至2020 一月).</p>
 </div>
 
 <h2 id="句法">句法</h2>
@@ -48,8 +48,8 @@ translation_of: Web/JavaScript/Guide/Regular_Expressions/Unicode_Property_Escape
  <dd>很多值有同名或简写(e.g. 对应着 <code>General_Category</code> 属性名的属性值 <code>Decimal_Number</code> 可以写作 <code>Nd</code>, <code>digit</code>, 或 <code>Decimal_Number</code>). 大多数属性值的 <em><code>Unicode属性名</code></em> 和等号可以省去。如果想明确某 <em><code>Unicode属性名</code></em>，必须给出它的值。</dd>
 </dl>
 
-<div class="blockIndicator note">
-<p><strong>Note:</strong> 因为可使用的属性和值太多，这里不一一赘述，仅提供几个例子。</p>
+<div class="note">
+<p><strong>备注：</strong> 因为可使用的属性和值太多，这里不一一赘述，仅提供几个例子。</p>
 </div>
 
 <h2 id="基本原理">基本原理</h2>
diff --git a/files/zh-cn/web/javascript/guide/using_promises/index.html b/files/zh-cn/web/javascript/guide/using_promises/index.html
index 22a0163216..5d7c65bf68 100644
--- a/files/zh-cn/web/javascript/guide/using_promises/index.html
+++ b/files/zh-cn/web/javascript/guide/using_promises/index.html
@@ -36,13 +36,13 @@ createAudioFileAsync(audioSettings, successCallback, failureCallback)</pre>
 
 <p>如果函数 <code>createAudioFileAsync()</code> 被重写为返回 Promise 的形式，那么我们可以像下面这样简单地调用它：</p>
 
-<pre class="brush: js line-numbers  language-js">const promise = createAudioFileAsync(audioSettings);
+<pre class="brush: js">const promise = createAudioFileAsync(audioSettings);
 promise.then(successCallback, failureCallback);
 </pre>
 
 <p>或者简写为：</p>
 
-<pre class="brush: js line-numbers  language-js">createAudioFileAsync(audioSettings).then(successCallback, failureCallback);
+<pre class="brush: js">createAudioFileAsync(audioSettings).then(successCallback, failureCallback);
 </pre>
 
 <p>我们把这个称为 <em>异步函数调用</em>，这种形式有若干优点，下面我们将会逐一讨论。</p>
@@ -65,7 +65,7 @@ promise.then(successCallback, failureCallback);
 
 <p>见证奇迹的时刻：<code>then()</code> 函数会返回一个和原来不同的<strong>新的 Promise</strong>：</p>
 
-<pre class="brush: js line-numbers  language-js">const promise = doSomething();
+<pre class="brush: js">const promise = doSomething();
 const promise2 = promise.then(successCallback, failureCallback);
 </pre>
 
diff --git a/files/zh-cn/web/javascript/guide/working_with_objects/index.html b/files/zh-cn/web/javascript/guide/working_with_objects/index.html
index dbdc3294a6..3cde5dd29d 100644
--- a/files/zh-cn/web/javascript/guide/working_with_objects/index.html
+++ b/files/zh-cn/web/javascript/guide/working_with_objects/index.html
@@ -75,7 +75,7 @@ console.log(myObj);
   myCar[propertyName] = "Mustang";
   </pre>
 
-<p>你可以在  <a class="internal" href="/zh-CN/docs/JavaScript/Guide/Statements#for...in_Statement" title="zh-CN/docs/JavaScript/Guide/Statements#for...in Statement">for...in</a> 语句中使用方括号标记以枚举一个对象的所有属性。为了展示它如何工作，下面的函数当你将对象及其名称作为参数传入时，显示对象的属性：</p>
+<p>你可以在  <a href="/zh-CN/docs/JavaScript/Guide/Statements#for...in_Statement">for...in</a> 语句中使用方括号标记以枚举一个对象的所有属性。为了展示它如何工作，下面的函数当你将对象及其名称作为参数传入时，显示对象的属性：</p>
 
 <pre class="brush: js">function showProps(obj, objName) {
   var result = "";
@@ -491,7 +491,7 @@ fruit === fruitbear // return false
 </pre>
 
 <div class="note">
-<p><strong>注意:</strong> "===" 运算符用来检查数值是否相等: 1 === "1"返回false，而1 == "1" 返回true</p>
+<p><strong>备注：</strong> "===" 运算符用来检查数值是否相等: 1 === "1"返回false，而1 == "1" 返回true</p>
 </div>
 
 <pre class="brush: js">// 两个变量, 同一个对象