recursal/MDN huggingface dataset:
SyntaxError: missing variable name
==================================

错误提示
----
```

SyntaxError: missing variable name (Firefox)
SyntaxError: Unexpected token = (Chrome)
```

错误类型
----

`SyntaxError`哪里出错了？
------

缺失变量名。这有很大的可能性是由你的代码中的语法错误造成的。也许是什么地方的逗号出了问题，或者是你正在绞尽脑汁想一个合适的名字。完全可以理解！为变量起名确实让人头疼。

示例
--

### 变量名缺失


```js
var = "foo";
```


为变量起一个合适的明确确实不是一件容易的事情。这种经历每个人都遇到过。


```js
var ohGodWhy = "foo";
```

### 保留字不能作为变量名

有一些名称是作为保留字而存在的。不好意思，你不能使用！:(


```js
var debugger = "whoop";
// SyntaxError: missing variable name
```

### 一次性声明多个变量

在一次性声明多个变量的时候要特别留意逗号。看看是否有多余的逗号？以及是否不小心把逗号用作了分号？


```js
var x, y = "foo",
var x, = "foo"

var first = document.getElementById('one'),
var second = document.getElementById('two'),

// SyntaxError: missing variable name
```


修复后的代码：


```js
var x,
  y = "foo";
var x = "foo";

var first = document.getElementById("one");
var second = document.getElementById("two");
```

### 数组

在 JavaScript 中 `Array` 字面量需要使用方括号将值包裹起来。下面这样是不对的：


```js
var arr = 1,2,3,4,5;
// SyntaxError: missing variable name
```


这样写才是正确的：


```js
var arr = [1, 2, 3, 4, 5];
```

相关内容
----

* Good variable names
* `var`
* Variable declarations in the JavaScript Guide
TypeError: property "x" is non-configurable and can't be deleted
================================================================

消息
--
```

TypeError: property "x" is non-configurable and can't be deleted. (Firefox)
TypeError: Cannot delete property 'x' of #<Object> (Chrome)
```

错误类型
----

`TypeError` 只出现在严格模式下。

哪里有问题？
------

尝试删除某个属性，但是这个属性是不可配置的。`configurable` 属性控制是否该属性能从对象上删除，以及它的属性（除了`writable`）能否被修改。

这个错误仅仅在严格模式下出现。在非严格模式下，这个操作返回 `false`。

示例
--

不可配置的属性并不特别常见，但是它们可以使用 `Object.defineProperty()` 或 `Object.freeze()` 创建。


```js
"use strict";
var obj = Object.freeze({ name: "Elsa", score: 157 });
delete obj.score; // TypeError

("use strict");
var obj = {};
Object.defineProperty(obj, "foo", { value: 2, configurable: false });
delete obj.foo; // TypeError

("use strict");
var frozenArray = Object.freeze([0, 1, 2]);
frozenArray.pop(); // TypeError
```


也有一些内建于 JavaScript 的不可配置属性。你可能会尝试删除一个数学常量。


```js
"use strict";
delete Math.PI; // TypeError
```

另见
--

* delete operator
* `Object.defineProperty()`
* `Object.freeze()`
Warning: unreachable code after return statement
================================================

当在 `return` 语句之后使用别的语句，或在无分号返回语句之后直接在后面跟随表达式，会出现 JavaScript 警告“unreachable code after return statement”。

信息
--
```

Warning: unreachable code after return statement (Firefox)
```

错误类型
----

警告

什么地方出错了？
--------

在 `return` 语句之后的不可达的语句会在下列情形中产生：

* 在 `return` 语句之后出现其他表达式；
* 在省略分号的 return 语句之后直接跟随一个表达式。

当一个表达式出现在一个有效的 `return` 表达式之后时，会出现这个警告，用以说明在 `return` 语句之后的表达式不可达，即这条语句之后的表达式永远不会运行。

为什么需要在 `return` 语句之后添加分号？在省略分号的 `return` 语句之后，开发者想要终止当前函数的执行还是返回 return 之后表达式的结果的意图是不明确的。这个警告表明这种情况下 `return` 语句的表述具有二义性。

当在省略分号的 return 语句之后出现下列语句时，不会出现警告：

* `throw`
* `break`
* `var`
* `function`
示例
--

### 无效的例子


```js
function f() {
  let x = 3;
  x += 4;
  return x; // return 语句立即退出当前方法
  x -= 3; // 因而该语句从不会执行，即该语句为不可达语句
}

function f() {
  return; // 这条语句被视作 `return;`
  3 + 4; // 因而此处该函数已经返回，该语句永不会执行
}
```

### 有效的例子


```js
function f() {
  let x = 3;
  x += 4;
  x -= 3;
  return x; // OK: 执行完成所有语句之后返回
}

function f() {
  return 3 + 4; // OK: 省略分号的 return 语句与执行的表达式在同一行
}
```

参见
--

* 自动插入分号
轴
=

XPath 规范中定义了 13 种不同的轴（axes）。轴表示与上下文节点的关系，并用于定位树上相对于该节点的节点。

有关使用 XPath 表达式的更多信息，请参阅使用 XSLT 转换 XML的扩展阅读部分，以及 xpath 规范的“axes”部分。

`ancestor`

表示上下文节点的所有祖先，从父节点开始，一直到根节点。

`ancestor-or-self`

表示上下文节点及其所有祖先，包括根节点。

`attribute`

表示上下文节点的属性。只有元素有属性。该轴可以用 at 符号（`@`）缩写。

`child`

表示上下文节点的子节点。如果 XPath 表达式没有指定轴，则默认情况下会解释为该轴。由于只有根节点或元素节点有子节点，因此任何其他用法都不会选择任何内容。

`descendant`

表示上下文节点的所有子节点，以及子节点的所有子节点，依此类推。**不**包括属性和命名空间节点——`attribute` 节点的 `parent` 是一个元素节点，但 `attribute` 节点不是其父节点的子节点。

`descendant-or-self`

表示上下文节点及其所有子节点。**不**包括属性和命名空间节点——`attribute` 节点的 `parent` 是一个元素节点，但 `attribute` 节点不是其父节点的子节点。

`following`

表示上下文节点之后出现的，除了任何 `descendant`、`attribute` 和 `namespace` 节点之外的所有节点。

`following-sibling`

表示与上下文节点具有相同父节点并在源文档中出现在上下文节点之后的所有节点。

`namespace`（*不支持*）

表示上下文节点的作用域内的所有节点。对于该轴，上下文节点必须是元素节点。

`parent`

表示上下文节点的父节点。它可以缩写为两个句点（`..`）。

`preceding`

表示文档中在上下文节点之前的，除了任何 `ancestor`、`attribute` 和 `namespace` 节点之外的所有节点。

`preceding-sibling`

表示与上下文节点具有相同父节点并在源文档中出现在上下文节点之前的所有节点。

`self`

表示上下文节点本身。它可以缩写为一个句点（`.`）。
CSS 选择器与 XPath 的对比
==================

本文旨在记录 CSS 选择器和 XPath 之间的区别，以便 Web 开发人员能够更好地为正确的工作选择合适的工具。

| XPath 特性 | CSS 等价形式 |
| --- | --- |
| `ancestor`、`parent` 或 `preceding-sibling` 轴 | `:has()` 选择器 
实验性
 |
| `attribute` 轴 | 属性选择器 |
| `child` 轴 | 子代组合器 |
| `descendant` 轴 | 后代组合器 |
| `following-sibling` 轴 | 后续兄弟组合器或接续兄弟组合器 |
| `self` 轴 | `:scope` 或 `:host` 选择器 |
MathML 元素参考
===========

这是一份按字母排序的 MathML **呈现型**元素列表。

**呈现型标记**（**presentation markup**）相关条目被用来描述数学记号的布局结构，而**内容型标记**（**content markup**）则用于提供潜在的数学含义，MathML 解析器不支持渲染内容型标记（见 Firefox bug 276028）。若想了解更多关于内容型标记的信息，可以考虑阅读 MathML 3 规范的第四章。

MathML 元素实现了 `MathMLElement` 类。

MathML 呈现型元素（字母排序）
------------------

### math

* `<math>`（顶层元素）
### A

* `<maction>`（将动作绑定到子表达式）
* `<maligngroup>`（对齐分组）
* `<malignmark>`（对齐点）
### E

* `<menclose> (en-US)`（被包裹的内容）
* `<merror> (en-US)`（被包裹的语法错误消息）
### F

* `<mfenced> (en-US)`（圆括号）
已弃用
* `<mfrac> (en-US)`（因子 Fraction）
### G

* `<mglyph>`（显示非标准符号）
### I

* `<mi> (en-US)`（标识符 Identifier）
### L

* `<mlabeledtr>`（表格或矩阵中，带标记的行）
* `<mlongdiv>`（长除法记号）
### M

* `<mmultiscripts> (en-US)`（Prescript 和张量指标 tensor indice）
### N

* `<mn> (en-US)`（数字）
### O

* `<mo> (en-US)`（运算符 Operator）
* `<mover> (en-US)`（上标）
### P

* `<mpadded> (en-US)`（在内容周围增设空白）
* `<mphantom> (en-US)`（保留空白占位的不可见内容）
### R

* `<mroot>`（带指定根数的根号）
* `<mrow>`（分组后的子表达式）
### S

* `<ms> (en-US)`（字符串字面量）
* `<mscarries>`（附注 Annotation，比如进位）
* `<mscarry>`（单进位， `<mscarries>` 的子元素）
* `<msgroup>`（`<mstack>` 和 `<mlongdiv>` 元素内的行组）
* `<msline>`（在 `<mstack>` 元素内的水平行）
* `<mspace>`（空白）
* `<msqrt>`（不带根数的平方根）
* `<msrow>`（在 `<mstack>` 元素中的行）
* `<mstack>`（堆叠式对齐）
* `<mstyle> (en-US)`（改变样式）
* `<msub>`（下角标）
* `<msup>`（上角标）
* `<msubsup>`（上下角标对）
### T

* `<mtable> (en-US)`（表格或矩阵）
* `<mtd> (en-US)`（表格或矩阵中的单元格）
* `<mtext> (en-US)`（文本）
* `<mtr> (en-US)`（表格或矩阵中的行）
### U

* `<munder> (en-US)`（下标）
* `<munderover> (en-US)`（上标 - 下标对）
### 其他元素

* `<semantics> (en-US)`（语义附注的容器）
* `<annotation>` (en-US)（数据附注）
* `<annotation-xml>` (en-US)（XML 附注）
MathML 呈现型元素（类别分类）
------------------

### 顶层元素

* `<math>`
### 字符/符号元素

* `<mglyph>`
* `<mi> (en-US)`
* `<mn> (en-US)`
* `<mo> (en-US)`
* `<ms> (en-US)`
* `<mspace>`
* `<mtext> (en-US)`
### 通用布局元素

* `<menclose> (en-US)`
* `<merror> (en-US)`
* `<mfenced> (en-US)` 
已弃用
* `<mfrac> (en-US)`
* `<mpadded> (en-US)`
* `<mphantom> (en-US)`
* `<mroot>`
* `<mrow>`
* `<msqrt>`
* `<mstyle> (en-US)`
### 边标和角标元素

* `<mmultiscripts> (en-US)`
* `<mover> (en-US)`
* `<mprescripts> (en-US)`
* `<msub>`
* `<msubsup>`
* `<msup>`
* `<munder> (en-US)`
* `<munderover> (en-US)`
* `<none> (en-US)`
### 表格数学

* `<maligngroup>`
* `<malignmark>`
* `<mlabeledtr>`
* `<mtable> (en-US)`
* `<mtd> (en-US)`
* `<mtr> (en-US)`
### 初等数学

* `<mlongdiv>`
* `<mscarries>`
* `<mscarry>`
* `<msgroup>`
* `<msline>`
* `<msrow>`
* `<mstack>`
### 尚无分类的元素

* `<maction>`
语义附注元素
------

* `<annotation>` (en-US)
* `<annotation-xml>` (en-US)
* `<semantics> (en-US)`
请参阅
---

* MathML
* MathML 属性参考
举个例子
====

你可以在下面找到一些可以参考的例子，以帮助你了解如何使用 MathML 在 Web 内容中显示越来越复杂的数学概念。

勾股定理

展示一个勾股定理的证明的小例子。

推导二次方程式

简述二次方程式的推导过程。

MathML 极限测试

渲染大量数据的测试。
<mroot>
=======

MathML **`<mroot>`** 元素用来表示一个有明确根指数的根式。它接受两个参数，语法如下：`<mroot> base index </mroot>`。

属性
--

该元素接受全局 MathML 属性 (en-US)。

示例
--


```html
<math display="block">
  <mroot>
    <mi>x</mi>
    <mn>3</mn>
  </mroot>
</math>
```

规范
--

| Specification |
| --- |
| MathML Core # radicals-msqrt-mroot |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

参见
--

* `<msqrt>`（不带根指数的平方根）
<math>
======

**`<math>`** MathML 元素是顶级的 MathML 元素，用于编写单个数学公式。可以将其放在允许流式内容的 HTML 内容中。

**备注：** 参阅编写 MathML 页面以了解如何正确地在网页中集成 MathML 公式，有关更多的演示，请参阅示例页面。

属性
--

该元素的属性包括全局 MathML 属性 (en-US)和以下属性：

`display`

该枚举 (en-US)属性指定了应如何渲染封闭的 MathML 标记。其可以是以下值之一：

* `block`，这意味着该元素将显示在当前文本范围之外的块中，并将 `math-style` (en-US) 设置为 `normal`。
* `inline`，这意味着该元素将显示在当前的文本范围内，并将 `math-style` (en-US) 设置为 `compact`。

如果没有指定该属性，其默认值为 `inline`。

示例
--

该示例包含两个 MathML 公式。第一个在其自己的居中的块中渲染，根据需要占用足够的空间。第二个公式则在其文本段落中渲染，缩小其尺寸和间距以最小化其高度。


```html
<p>
  无穷级数
  <math display="block">
    <mrow>
      <munderover>
        <mo>∑</mo>
        <mrow>
          <mi>n</mi>
          <mo>=</mo>
          <mn>1</mn>
        </mrow>
        <mrow>
          <mo>+</mo>
          <mn>∞</mn>
        </mrow>
      </munderover>
      <mfrac>
        <mn>1</mn>
        <msup>
          <mi>n</mi>
          <mn>2</mn>
        </msup>
      </mfrac>
    </mrow>
  </math>
  的和等于实数
  <math display="inline">
    <mfrac>
      <msup>
        <mi>π</mi>
        <mn>2</mn>
      </msup>
      <mn>6</mn>
    </mfrac></math
 >。
</p>
```

规范
--

| Specification |
| --- |
| MathML Core # the-top-level-math-element |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

参见
--

* HTML 顶级元素：`<html>`
* SVG 顶级元素：`<svg>`
<maction>
=========

**已弃用:** 不再推荐使用该特性。虽然一些浏览器仍然支持它，但也许已从相关的 web 标准中移除，也许正准备移除或出于兼容性而保留。请尽量不要使用该特性，并更新现有的代码；参见本页面底部的兼容性表格以指导你作出决定。请注意，该特性随时可能无法正常工作。

**`<maction>`** MathML 元素允许将行为绑定到数学表达式上。默认情况下，只有第一个子元素会被渲染，但是一些浏览器可能会根据 `actiontype` 和 `selection` 属性来实现自定义行为。

**备注：** 从历史的角度来看，该元素提供了一种使 MathML 公式可以交互的机制。但如今，建议使用 JavaScript 和其他 Web 技术来实现这种用例。

属性
--

该元素的属性包括全局 MathML 属性 (en-US)以及以下属性：

`actiontype` 
已弃用

非标准

指定该元素发生的行为。某些浏览器会根据以下值实现特殊行为：

* `statusline`：如果*表达式*被点击或者读者将指针移至其上，将会把*消息*（message）发送到浏览器的状态栏。语法如下：`<maction actiontype="statusline"> expression message </maction>`。
* `toggle`：当子表达式被点击时，选中的子表达式会交替显示。因此，每次单击都会增加 `selection` 的值。语法如下：`<maction actiontype="toggle" selection="positive-integer" > expression1 expression2 expressionN </maction>`。

`selection` 
已弃用

非标准

当前可见的子元素，仅适用于 `actiontype="toggle"` 或非标准的 `actiontype` 值。默认值为 `1`，即第一个子元素。

示例
--

以下示例演示了如何使用“toggle”这个 `actiontype`：


```html
<p>
  尝试多次点击这个公式：

  <math display="block">
    <maction actiontype="toggle">
      <mfrac>
        <mn>6</mn>
        <mn>8</mn>
      </mfrac>

      <mfrac>
        <mrow>
          <mn>3</mn>
          <mo>×</mo>
          <mn>2</mn>
        </mrow>
        <mrow>
          <mn>4</mn>
          <mo>×</mo>
          <mn>2</mn>
        </mrow>
      </mfrac>

      <mfrac>
        <mn>3</mn>
        <mn>4</mn>
      </mfrac>
    </maction>
  </math>
</p>
```

规范
--

| Specification |
| --- |
| MathML Core # dfn-maction |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
<msub>
======

MathML **`<msub>`** 元素用于为表达式附加下标。

使用语法如下：`<msub> base subscript </msub>`。

属性
--

该元素的属性包括全局 MathML 属性 (en-US)和以下已弃用的属性：

`subscriptshift` 
已弃用

非标准

`<length-percentage>` 值，表示下标基线向下移动的最小距离。


**备注：** 对于 `subscriptshift` 属性，一些浏览器可能也会接受旧版 MathML 长度 (en-US)。

示例
--


```html
<math display="block">
  <msub>
    <mi>X</mi>
    <mn>1</mn>
  </msub>
</math>
```

规范
--

| Specification |
| --- |
| MathML Core # subscripts-and-superscripts-msub-msup-msubsup |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

参见
--

* `<msup>`（上标）
* `<msubsup>`（上下标）
* `<mmultiscripts> (en-US)`（四角标，张量式标记）
<msqrt>
=======

MathML **`<msqrt>`** 元素用于表示平方根（不显示根指数）。它只接受一个参数，语法如下：`<msqrt> base </msqrt>`。

属性
--

该元素接受全局 MathML 属性 (en-US)。

示例
--


```html
<math display="block">
  <msqrt>
    <mi>x</mi>
  </msqrt>
</math>
```

规范
--

| Specification |
| --- |
| MathML Core # radicals-msqrt-mroot |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

参见
--

* `<mroot>`（带有根指数的方根）
<mspace>
========

**`<mspace>`** MathML 元素用来显示一段空白，空白的大小由它自身的属性设置。

属性
--

该元素的属性包括全局 MathML 属性 (en-US)以及下列属性：

`depth`

`<length-percentage>` 值，表示空白（在基线下方）的深度。

`height`

`<length-percentage>` 值，表示空白（在基线上方）的高度。

`width`

`<length-percentage>` 值，表示空白的宽度。


**备注：** 对于 `depth`、`height`、`width` 属性，一些浏览器可能也接受旧版 MathML 长度值 (en-US)。

示例
--


```html
<math display="block">
  <mn>1</mn>
  <mspace depth="40px" height="20px" width="100px"
 style="background: lightblue;"/>
  <mn>2</mn>
</math>
```

规范
--

| Specification |
| --- |
| MathML Core # space-mspace |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

参见
--

* `<mpadded> (en-US)`
* `<mphantom> (en-US)`
<msubsup>
=========

MathML `<msubsup>` 元素用于为表达式同时附加上标和下标。

使用语法如下：`<msubsup> base subscript superscript </msubsup>`。

属性
--

该元素的属性包括全局 MathML 属性 (en-US)和以下已弃用的属性：

`subscriptshift` 
已弃用

非标准

`<length-percentage>` 值，表示下标基线向下移动的最小距离。

`superscriptshift` 
已弃用

非标准

`<length-percentage>` 值，表示上标基线向上移动的最小距离。


**备注：** 对于 `subscriptshift` 和 `superscriptshift` 属性，一些浏览器可能也会接受旧版 MathML 长度 (en-US)。

示例
--


```html
<math display="block">
  <msubsup>
    <mo>&#x222B;<!-- 积分符号 --></mo>
    <mn>0</mn>
    <mn>1</mn>
  </msubsup>
</math>
```

规范
--

| Specification |
| --- |
| MathML Core # subscripts-and-superscripts-msub-msup-msubsup |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

参见
--

* `<msub>`（上标）
* `<msup>`（下标）
* `<mmultiscripts> (en-US)`（四角标，张量式标记）
<mrow>
======

MathML `<mrow>` 元素用于对连续多行表达式的不同子表达式进行分组，一条子表达式通常算作一行，至少包含一或多个操作符 (en-US)与其运算对象（比如 `<mi> (en-US)` 和 `<mn> (en-US)`）。此元素呈现为包含其内容的水平行。

在编写 MathML 表达式时，你应该使用 `<mrow>` 将表达式中的元素分组，就像它们在数学解释时的分成一行行一样。正确的分组有助于表达式的呈现，具体体现在以下几个方面：

* 如果有需要，它会改变间距来改善显示效果。
* 它允许采用更明智的断行和缩进算法。
* 通过自动化系统，如计算机代数系统和音频渲染器（automated systems such as computer algebra systems and audio renderers），它能简化表达式的解释（interpretation）过程。
属性
--

class, id, style

用来供样式表使用。

dir

行内公式的书写方向。可能的值为 `ltr`（自左向右）或 `rtl`（自右向左）。

href

用于设置一个指向指定的 URI 的超链接。

mathbackground

背景色。支持 `#rgb`、`#rrggbb` 和 HTML 颜色 (en-US)。

mathcolor

文本颜色。支持 `#rgb`、`#rrggbb` 和 HTML 颜色 (en-US)。

示例
--


```html
<math>
  <mrow>
    <mn> 1 </mn>
    <mo> + </mo>
    <mn> 1 </mn>
  </mrow>

  <mrow>
    <mo> ( </mo>
    <mrow>
      <mi> x </mi>
      <mo> , </mo>
      <mi> y </mi>
    </mrow>
    <mo> ) </mo>
  </mrow>
</math>
```

规范
--

| Specification |
| --- |
| MathML Core # horizontally-group-sub-expressions-mrow |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

参见
--

* HTML 分组元素：`<div>`
<msup>
======

MathML **`<msup>`** 元素用于为表达式附加上标。

使用语法如下：`<msup> base superscript </msup>`。

属性
--

该元素的属性包括全局 MathML 属性 (en-US)和以下已弃用的属性：

`superscriptshift` 
已弃用

非标准

`<length-percentage>` 值，表示上标基线向上移动的最小距离。


**备注：** 对于 `superscriptshift` 属性，一些浏览器可能也会接受旧版 MathML 长度 (en-US)。

示例
--


```html
<math display="block">
  <msup>
    <mi>X</mi>
    <mn>2</mn>
  </msup>
</math>
```

规范
--

| Specification |
| --- |
| MathML Core # subscripts-and-superscripts-msub-msup-msubsup |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

参见
--

* `<msub>`（下标）
* `<msubsup>`（上下标）
* `<mmultiscripts> (en-US)`（四角标，张量式标记）
证明毕达哥拉斯定理
=========

现在，我们来证明毕达哥拉斯定理（勾股定理）：

**命题**：在一个直角三角形中，斜边的平方等于其他两边的平方之和。

例如，设 a 和 b 为两直角边，c 为斜边，那么 


a 
2

+ 

b 
2

= 

c 
2

。

**证明：** 我们可以通过代数证明来展示大正方形面积等于内正方形（斜边的平方）加上四个三角形的面积：



( 
a 
+ 
b 
) 

2 

= 

c 
2

+ 
4 
⋅ 
(

1 
2 

a 
b 
)


a 
2

+ 
2 
a 
b 
+ 

b 
2

= 

c 
2

+ 
2 
a 
b



a 
2

+ 

b 
2

= 

c 
2
推导二次方程求根公式
==========

本页概述了二次方程求根公式的推导过程。

我们取一般形式的二次方程，并解出 x：




a
⁢

x
2

+
b
⁢
x

+
c

=

0



a
⁢

x
2

+
b
⁢
x

=

−
c


x
2

+

b
a

⁤
x

=

−
c

a

两边同时除以二次项系数



x
2

+

b

a

⁤
x
+

(

b

2
a

)

2


=


−
c
(
4
a
)

a
(
4
a
)

+

b
2

4

a
2


完成配方


(
x
+

b

2
a

)
(
x
+

b

2
a

)

=


b
2

−
4
a
c

4

a
2



推导出判别式



(
x
+

b

2
a

)

2


=


b
2

−
4
a
c

4

a
2





x
+

b

2
a


=



b
2

−
4
a
c

4

a
2





x

=

−
b

2
a

±

{
C
}


b
2

−
4
a
c

4

a
2


这就是顶点公式


x

=

−
b
±

{
C
}

b
2

−
4
a
c

2
a
怪异模式和标准模式
=========

在很久以前的网络上，页面通常有两种版本：为网景（Netscape）的 Navigator 准备的版本，以及为微软（Microsoft）的 Internet Explorer 准备的版本。当 W3C 创立网络标准后，为了不破坏当时既有的网站，浏览器不能直接弃用这些标准。因此，浏览器采用了两种模式，用以把能符合新规范的网站和老旧网站区分开。

目前浏览器的排版引擎使用三种模式：怪异模式（Quirks mode）、接近标准模式（Almost standards mode）、以及标准模式（Standards mode）。在**怪异模式**下，排版会模拟 Navigator 4 与 Internet Explorer 5 的非标准行为。为了支持在网络标准被广泛采用前，就已经建好的网站，这么做是必要的。在**标准模式**下，行为即（但愿如此）由 HTML 与 CSS 的规范描述的行为。在**接近标准模式**下，只有少数的怪异行为被实现。

浏览器如何决定使用哪个模式？
--------------

对 HTML 文件来说，浏览器使用文件开头的 DOCTYPE 来决定用怪异模式处理或标准模式处理。为了确保你的页面使用标准模式，请确认你的页面如同本范例一样拥有 DOCTYPE：


```html
<!doctype html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hello World!</title>
  </head>
  <body></body>
</html>
```


范例中的 DOCTYPE，`<!DOCTYPE html>`，是所有可用的 DOCTYPE 之中最简单的，也是 HTML5 所推荐的。HTML 的早期变种也属于推荐标准，不过，当今的浏览器都会对这个 DOCTYPE 使用标准模式，就算是早已过时的 Internet Explorer 6 也一样。目前，并没有正当的理由，去使用其他更复杂的 DOCTYPE。如果你使用其他的 DOCTYPE，你可能会面临触发接近标准模式或者怪异模式的风险。

请确定你把 DOCTYPE 正确地置于 HTML 文件的顶端。如果有任何其他字符位于 DOCTYPE 之前，比如注释或 XML 声明，会导致 Internet Explorer 9 或更早期的浏览器触发怪异模式。

`<!DOCTYPE html>` 唯一的作用是启用标准模式。更早期的 HTML 标准中，DOCTYPE 会附加其他意义，但没有任何浏览器会将 DOCTYPE 用于怪异模式和标准模式之间互换以外的用途。

另请参阅浏览器如何选择各种模式文章的详细说明。

### XHTML

如果你的网页使用 XHTML 并在 `Content-Type` HTTP 标头使用 `application/xhtml+xml` MIME 类型，你不需要使用 DOCTYPE 启动标准模式，因为这种文件会永远使用标准模式。不过请注意，页面使用 `application/xhtml+xml` 会令 Internet Explorer 8 出于未知格式之故出现下载对话框，因为首个支持 XHTML 的 Internet Explorer 版本是 Internet Explorer 9。

如果你的类 XHTML 网页使用 `text/html` MIME 类型，浏览器会将其视为 HTML，这时就需要使用 DOCTYPE 启用标准模式。

我要如何知道目前是哪个模式？
--------------

在 Firefox 中，请从右键菜单选择*查看页面信息*，然后查看*渲染模式*。（了解 Firefox 页面信息窗口）

在 Internet Explorer 中，请按下 *F12*，然后查看*文档模式*。
HTML 参考
=======

HTML 是一种描述 Web 文档结构和语义的语言；它由**元素**组成，每个元素可以有一些**属性**。网页中的内容通过 HTML 元素标记，如`<img>`、`<title>`、`<p>`、`<div>` 等等。

本文提供了你进行 Web 开发时可以参考的资料。MDN 提供了组成 HTML 的所有元素的参考和每个属性的参考，这些属性可以控制元素的行为。

内容
--

HTML 元素参考

此页面列出了所有 tag 创建的 HTML elements。它们按功能分组，以帮助你轻松找到想要的内容。页面左侧边栏中列出了所有元素，当然也包含在了这个页面中。

HTML 属性参考

HTML 中的元素是有属性的；这些额外的属性值可以配置元素或者以各种方式来调整元素的行为，进而满足用户所需的标准。

全局属性

TBD

链接类型

在超文本标记语言中，在两种文档之间可以指定<a>, <area>或<link> 元素使一个页面链接到另一个页面。

指南和教程
-----

HTML 开发者指南

MDN 文章介绍了用于构建网页的特定 HTML 技巧，还有教程和其他资料。
viewport meta 标记
================

本文介绍如何使用 "viewport" `<meta>` 标记来控制视口的大小和形状。

背景
--

浏览器的视口是一个在其中查看 Web 内容的窗口区域。这通常与渲染的页面大小不同，在这种情况下，浏览器为用户提供滚动条以滚动和访问所有内容。

在移动设备和其他窄屏设备中，某些内容在比普通屏幕更宽的虚拟窗口或视口中渲染页面，然后缩小渲染的结果，以便可以一次看到所有内容。然后，用户可以通过平移和缩放以查看页面的不同区域。例如，如果移动屏幕的宽度为 640px，则页面可能会使用 980px 的虚拟视口渲染，然后页面将缩小以适应 640px 的空间。

这是因为并非所有页面都针对移动设备进行了优化，并且在以较小的视口宽度渲染时会被截断（或至少看起来很糟糕）。虚拟视口则是一种使非移动设备优化页面在窄屏设备上看起来更好的一个方法。

但是，此机制不太适用于使用媒体查询针对窄屏幕进行优化的页面。例如，如果虚拟视口为 980px，那么在 640px 或 480px 或更低时启动的媒体查询将不会被使用，从而限制了这些响应式设计方法的有效性。viewport meta 标签可缓解此类屏幕内部较窄的终端上的虚拟视口问题。

视口基础知识
------

典型的针对移动页面优化一般如下所示：


```html
<meta name="viewport" content="width=device-width, initial-scale=1" />
```


并非所有的设备都有着相同的宽度，你应该确保即使屏幕大小或方向有很大差异，页面也能够正常工作。

"viewport" `<meta>` 标签的基本属性如下所示：

`width`

控制视口的大小。这可以设置为特定像素数（如'width=600'），也可以设置为特殊值`device-width`，即 100vw，100% 的视口宽度。最小值为 `1`。最大值为 `10000`。负值会被忽略。

`height`

控制视口的大小。这可以设置为特定像素数（如 `width=600`），也可以设置为特殊值 `device-height`，即 100vh，100% 的视口高度。最小值为 `1`。最大值为 `10000`。负值会被忽略。

`initial-scale`

控制页面首次加载时显示的缩放倍数。最小值是 `0.1`。最大值是 `10`。默认值为 `1`。负值会被忽略。

`minimum-scale`

控制页面允许缩小的倍数。最小值是 `0.1`。最大值是 `10`。默认值为 `1`。负值会被忽略。

`maximum-scale`

控制页面允许放大的倍数。设置一个低于 `3` 的值将不具备无障碍访问性。最小值是 `0.1`。最大值是 `10`。默认值为 `1`。负值会被忽略。

`user-scalable`

控制是否允许页面上的放大和缩小操作。有效值为 `0`、`1`、`yes` 或 `no`。默认值为 `1`，与 `yes` 相同。将值设置为 `0`（即与 `no` 相同）将违反 Web 内容无障碍指南（WCAG）。

`interactive-widget`

指定交互式 UI 组件（如虚拟键盘）对页面视口的影响。有效值：`resizes-visual`、`resizes-content` 或 `overlays-content`。默认值：`resizes-visual`。


**警告：** 使用 `user-scalable=no` 会给有视觉障碍的用户造成无障碍问题，如弱视力。WCAG (en-US) 要求至少有 2 倍的缩放；然而，最佳做法是启用 5 倍的缩放。

屏幕密度
----

屏幕分辨率已经上升到人眼无法辨别单个像素的程度了。例如，智能手机的屏幕通常很小，但分辨率却高达 1920-1080 像素（≈400dpi）。正因为如此，许多浏览器可以通过为每个 CSS“像素”转换多个硬件像素，以较小的物理尺寸显示其页面。最初，这在许多触摸优化的网站上造成了可用性和可读性问题。

在高 dpi 屏幕上，初始情况为 `initial-scale=1` 的页面将被浏览器有效放大。它们的文本将是平滑和清晰的，但它们的位图图像可能无法利用全屏幕分辨率。为了在这些屏幕上获得更清晰的图像，网站开发人员可能希望以高于其最终尺寸的比例设计图像——或整个布局，然后使用 CSS 或视口属性将其缩小。

默认的像素比取决于显示器的密度。在密度小于 200dpi 的显示器上，比率是 1.0。在密度介于 200 和 300dpi 之间的显示器上，比率是 1.5。对于密度超过 300dpi 的显示器，比率是整数底线（*屏幕密度*/150dpi）。注意，只有当视口比例等于 1 时，默认比例才是真的。否则，CSS 像素和设备像素之间的关系取决于当前的缩放级别。

视口宽度和屏幕宽度
---------

页面可以将其视口设置为特定尺寸。例如，`"width=320, initial-scale=1"` 的定义可以用来精确地适应纵向模式下的小型手机显示屏。当浏览器以较大的尺寸渲染页面时，这可能导致问题。为了解决这个问题，如果有必要，浏览器会扩大视口宽度，以便按要求的比例填充屏幕。这在大屏幕设备上特别有用。

对于设置了初始或最大比例的页面，这意味着宽度属性实际上转化为最小视口宽度。例如，如果你的布局需要至少 500 像素的宽度，那么你可以使用以下标记。当屏幕的宽度超过 500 像素时，浏览器将扩大视口（而不是放大）以适应屏幕。


```html
<meta name="viewport" content="width=500, initial-scale=1" />
```


其他可用的属性有 `minimum-scale`、`maximum-scale` 和 `user-scalable`。这些属性会影响初始比例和宽度，以及限制缩放级别的变化。

交互式 UI 组件效果
-----------

浏览器的交互式 UI 组件可以影响页面视口的大小。最常见的这种 UI 组件是虚拟键盘。要控制浏览器应该使用哪种调整大小的行为，可以设置 `interactive-widget` 属性。

允许的值为：

`resizes-visual`

可视视口 (en-US)会被交互式组件调整大小。

`resizes-content`

视口会被交互式组件调整大小。

`overlays-content`

视口和可视视口 (en-US)都不会被交互式组件调整大小。

当视口的大小被调整时，初始布局和包含块的大小也会被调整，从而影响视口单位的计算所得的大小。

移动和平板电脑设备的常见视口大小
----------------

如果你想知道各类移动和平板设备都有哪些视口宽度，这里有一个全面的移动和平板视口尺寸列表。它提供的信息包括纵向和横向的视口宽度，以及物理屏幕尺寸、操作系统和设备的像素密度。

规范
--

| Specification |
| --- |
| CSS Viewport Module Level 1 # viewport-meta |

参见
--

* 文章：为 Android 版 Chrome 做好视口大小调整行为变更的准备
HTML 属性：readonly
================

当 **`readonly`** 布尔属性存在时，元素是不可变的，意味着用户无法编辑控件。

尝试一下
----

概述
--

如果在 input 元素上指定了 `readonly` 属性，由于用户无法编辑输入内容，因此该元素不参与约束验证。

`text`、`search`、`url`、`tel`、`email`、`password`、`date`、`month`、`week`、`time`、`datetime-local`、`number` 这些 `<input>` 类型和 `<textarea>` 表单控件元素均支持 `readonly` 属性。如果这些输入类型和元素中存在这个属性，则匹配 `:read-only` 伪类。如果不包含该属性，则将匹配 `:read-write` 伪类。

该属性不支持 `<select>` 或已不可变的 input 类型，也与之无关，如 `checkbox`、`radio` 或根据定义不能以值开头的 input 类型，如 `file` input 类型。`range` 和 `color` 都有默认值。`hidden` input 类型也不支持该属性，因为用户不可能填写隐藏的表单。也不支持任何按钮类型，包括 `image`。

**备注：** 只有文本控件可以设置为只读，因为对于其他控件（如复选框和按钮）来说，只读和禁用之间没有任何有用的区别，所以 `readonly` 属性并不适用。

当输入具有 `readonly` 属性时，`:read-only` 伪类也适用于该输入。反之，支持 `readonly` 属性但未设置该属性的输入将匹配 `:read-write` 伪类。

### 属性交互

`disabled` 与 `readonly` 的区别在于，只读控件仍可发挥作用，仍可被聚焦，而禁用控件不能接收聚焦，不能随表单提交，一般在启用前不能作为控件发挥作用。

由于只读字段不能通过用户交互改变其值，因此 `required` (en-US) 对同时指定了 `readonly` 属性的输入没有任何影响。

动态修改只读属性值的唯一方法是通过脚本。

**备注：** `required` 属性不可以在指定了 `readonly` 属性上的 input 控件上使用。

### 可用性

浏览器会显示 `readonly` 属性。

### 约束验证

如果元素是只读的，则用户不能更新该元素的值，元素的值也不参与约束验证。

示例
--

### HTML


```html
<div class="group">
  <input type="text" value="一些值" readonly="readonly" id="text" />
  <label for="text">文本框</label>
</div>
<div class="group">
  <input type="date" value="2020-01-01" readonly="readonly" id="date" />
  <label for="date">日期</label>
</div>
<div class="group">
  <input type="email" value="一些值" readonly="readonly" id="email" />
  <label for="email">电子邮件</label>
</div>
<div class="group">
  <input type="password" value="一些值" readonly="readonly" id="pwd" />
  <label for="pwd">密码</label>
</div>
<div class="group">
  <textarea readonly="readonly" id="ta">一些值</textarea>
  <label for="ta">消息</label>
</div>
```

### 结果

规范
--

| Specification |
| --- |
| HTML Standard # the-readonly-attribute |

浏览器兼容性
------

### html.elements.input.readonly

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

### html.elements.textarea.readonly

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

参见
--

* `:read-only` 和 `:read-write` 伪类
* `<input>`
* `<select>`