JavaScript中的基本數學 - 數字和運算符 - 學習該如何開發 Web

JavaScript中的基本數學 - 數字和運算符
=========================

* 前頁
* Overview: First steps
* 次頁

在本課程的這一點上，我們將討論 JavaScript 中的數學 - 我們如何使用operators (en-US) 和其他功能來成功操縱數字來進行我們的出價。

|  |  |
| --- | --- |
| 先備知識: | 電腦基礎知識，了解基本的 HTML 和 CSS ，了解 JavaScript 是什麼。 |
| 目標: | 熟悉JavaScript中的基礎數學。 |

每個人都喜歡數學
--------

好吧，也許不是。 我們中的一些人喜歡數學，我們有些人討厭數學，因為我們必須在學校學習乘法和除法，而我們中的一些人兩者皆要。 但我們都不能否認數學是生活中的一個基本組成部分，我們離不開它們。 當我們學習 JavaScript（或任何其他語言）的程式時，尤其如此 - 我們所做的很多事情都依賴於處理數值數據，計算新值等等，你不會驚訝學習 JavaScript 有一套功能齊全的數學函數。

本文僅討論你現在需了解的基本部分。

### 數字的種類

在程式裡，即使眾所周知的十進位數字系統也比你想像的要複雜。我們使用不同的術語來描述不同類型的十進位數字，例如：

* **Integers** 是整數，如：10，400，或 -5。
* **Floating point numbers** (floats) 浮點數具有小數點跟小數位，例如 12.5 和 56.7786543。
* **Doubles** 是一種特定型態的浮點數 that have greater precision than standard floating point numbers (meaning that they are accurate to a greater number of decimal places).

我們甚至有不同類型的號碼系統！十進位以 10 為單位（表示每列使用 0–9），但是也有像這些：

* **二進位** —計算機的最底層語言；0 和 1。
* **八進位** —以 8 為單位，每列使用 0–7。
* **十六進位** —以 16 為單位，在每列中使用 0–9，然後使用 a–f。你之前在 CSS 中設置顏色時，可能已經遇到過這些數字。

\*\*在開始擔心大腦融化之前，先等等！\*\*首先，我們將在整個課程中完全使用十進位數；你很少會想到其他類型的需求，如果有的話。

第二個好消息是 JavaScript 只有一種數字資料類型 ，猜對了！就是`Number`。這代表無論你在 JavaScript 需要處理哪種數字，處理方法都是一樣的。

**備註：** 事實上, JavaScript 有第二種數字型態， BigInt (en-US), 用於非常、非常、非常大的整數。但這節課我只需要擔心 `Number` 的值。

### 我怎麼看都是些數字!

讓我們來快速操作一些數字來重新認識一下我們會需要用到的基本語法。將下面的需求表輸入進你的開發者工具 js 控制台(developer tools JavaScript console (en-US))，或是簡單建立在任何你偏好的控制台。

1. 首先，先來宣告兩個變數，並分別賦予他們初始值為整數與浮點數，然後接著打上變數名稱來確認萬事預備:

```js
var myInt = 5;
var myFloat = 6.667;
myInt;
myFloat;
```

2. 數字的值不需要引號框起來 — 試著宣告和賦予更多初始值為數字的變數，在繼續下去之前。
3. 現在，來確認 Now let's check that both our original variables are of the same datatype. There is an operator called `typeof` in JavaScript that does this. Enter the below two lines as shown:

```js
typeof myInt;
typeof myFloat;
```

You should get `"number"` returned in both cases — this makes things a lot easier for us than if different numbers had different data types, and we had to deal with them in different ways. Phew!
算術運算符
-----

Arithmetic operators are the basic operators that we use to do sums:

| Operator | Name | Purpose | Example |
| --- | --- | --- | --- |
| `+` | 加法 | Adds two numbers together. | `6 + 9` |
| `-` | 減法 | Subtracts the right number from the left. | `20 - 15` |
| `*` | 乘法 | Multiplies two numbers together. | `3 * 7` |
| `/` | 除法 | Divides the left number by the right. | `10 / 5` |
| `%` | 餘數 (sometimes called modulo) |
 Returns the remainder left over after you've divided the left number
 into a number of integer portions equal to the right number.
  | `8 % 3` (returns 2, as three goes into 8 twice, leaving 2
 left over.)
  |
| \*\* | 指數 |
 Raises a `base` number to the `exponent` power,
 that is, the `base` number multiplied by itself,
 `exponent` times. It was first Introduced in EcmaScript 2016.
  | `5 ** 2` (5的2次方得 `25`，跟
 `5 * 5`結果相同)
  |

**備註：** You'll sometimes see numbers involved in sums referred to as operands (en-US).

**備註：** You may sometimes see exponents expressed using the older `Math.pow()` (en-US) method, which works in a very similar way. For example, in `Math.pow(7, 3)`, `7` is the base and `3` is the exponent, so the result of the expression is `343`. `Math.pow(7, 3)` is equivalent to `7**3`.

We probably don't need to teach you how to do basic math, but we would like to test your understanding of the syntax involved. Try entering the examples below into your developer tools JavaScript console (en-US), or use the simple built in console seen earlier if you'd prefer, to familiarize yourself with the syntax.

1. First try entering some simple examples of your own, such as

```js
10 + 7;
9 \* 8;
60 % 3;
```

2. You can also try declaring and initializing some numbers inside variables, and try using those in the sums — the variables will behave exactly like the values they hold for the purposes of the sum. For example:

```js
var num1 = 10;
var num2 = 50;
9 \* num1;
num2 / num1;
```

3. Last for this section, try entering some more complex expressions, such as:

```js
5 + 10 \* 3;
(num2 % 9) \* num1;
num2 + num1 / 8 + 2;
```

Some of this last set of sums might not give you quite the result you were expecting; the below section might well give the answer as to why.

### Operator precedence

Let's look at the last example from above, assuming that `num2` holds the value 50 and `num1` holds the value 10 (as originally stated above):

```js
num2 + num1 / 8 + 2;
```

As a human being, you may read this as *"50 plus 10 equals 60"*, then *"8 plus 2 equals 10"*, and finally *"60 divided by 10 equals 6"*.

But the browser does *"10 divided by 8 equals 1.25"*, then *"50 plus 1.25 plus 2 equals 53.25"*.

This is because of **operator precedence** — some operators will be applied before others when calculating the result of a sum (referred to as an expression, in programming). Operator precedence in JavaScript is the same as is taught in math classes in school — Multiply and divide are always done first, then add and subtract (the sum is always evaluated from left to right).

If you want to override operator precedence, you can put parentheses round the parts that you want to be explicitly dealt with first. So to get a result of 6, we could do this:

```js
(num2 + num1) / (8 + 2);
```

Try it and see.

**備註：** A full list of all JavaScript operators and their precedence can be found in Expressions and operators.

遞增和遞減運算符
--------

Sometimes you'll want to repeatedly add or subtract one to/from a numeric variable value. This can be conveniently done using the increment (`++`) and decrement(`--`) operators. We used `++` in our "Guess the number" game back in our first splash into JavaScript (en-US) article, when we added 1 to our `guessCount` variable to keep track of how many guesses the user has left after each turn.

```js
guessCount++;
```

**備註：** They are most commonly used in loops, which you'll learn about later on in the course. For example, say you wanted to loop through a list of prices, and add sales tax to each one. You'd use a loop to go through each value in turn and do the necessary calculation for adding the sales tax in each case. The incrementor is used to move to the next value when needed. We've actually provided a simple example showing how this is done — check it out live, and look at the source code to see if you can spot the incrementors! We'll look at loops in detail later on in the course.

Let's try playing with these in your console. For a start, note that you can't apply these directly to a number, which might seem strange, but we are assigning a variable a new updated value, not operating on the value itself. The following will return an error:

```js
3++;
```

So, you can only increment an existing variable. Try this:

```js
var num1 = 4;
num1++;
```

Okay, strangeness number 2! When you do this, you'll see a value of 4 returned — this is because the browser returns the current value, *then* increments the variable. You can see that it's been incremented if you return the variable value again:

```js
num1;
```

The same is true of `--` : try the following

```js
var num2 = 6;
num2--;
num2;
```

**備註：** You can make the browser do it the other way round — increment/decrement the variable *then* return the value — by putting the operator at the start of the variable instead of the end. Try the above examples again, but this time use `++num1` and `--num2`.

賦值運算符
-----

Assignment operators are operators that assign a value to a variable. We have already used the most basic one, `=`, loads of times — it simply assigns the variable on the left the value stated on the right:

```js
var x = 3; // x contains the value 3
var y = 4; // y contains the value 4
x = y; // x now contains the same value y contains, 4
```

But there are some more complex types, which provide useful shortcuts to keep your code neater and more efficient. The most common are listed below:

| Operator | Name | Purpose | Example | Shortcut for |
| --- | --- | --- | --- | --- |
| `+=` | Addition assignment | Adds the value on the right to the variable value on the left, then returns the new variable value | `x = 3; x += 4;` | `x = 3; x = x + 4;` |
| `-=` | Subtraction assignment | Subtracts the value on the right from the variable value on the left, and returns the new variable value | `x = 6; x -= 3;` | `x = 6; x = x - 3;` |
| `*=` | Multiplication assignment | Multiples the variable value on the left by the value on the right, and returns the new variable value | `x = 2; x *= 3;` | `x = 2; x = x * 3;` |
| `/=` | Division assignment | Divides the variable value on the left by the value on the right, and returns the new variable value | `x = 10; x /= 5;` | `x = 10; x = x / 5;` |

Try typing some of the above examples into your console, to get an idea of how they work. In each case, see if you can guess what the value is before you type in the second line.

Note that you can quite happily use other variables on the right hand side of each expression, for example:

```js
var x = 3; // x contains the value 3
var y = 4; // y contains the value 4
x \*= y; // x now contains the value 12
```

**備註：** There are lots of other assignment operators available, but these are the basic ones you should learn now.

Active learning: sizing a canvas box
------------------------------------

In this exercise, you will manipulate some numbers and operators to change the size of a box. The box is drawn using a browser API called the Canvas API. There is no need to worry about how this works — just concentrate on the math for now. The width and height of the box (in pixels) are defined by the variables `x` and `y`, which are initially both given a value of 50.

**Open in new window**

In the editable code box above, there are two lines marked with a comment that we'd like you to update to make the box grow/shrink to certain sizes, using certain operators and/or values in each case. Let's try the following:

* Change the line that calculates x so the box is still 50px wide, but the 50 is calculated using the numbers 43 and 7 and an arithmetic operator.
* Change the line that calculates y so the box is 75px high, but the 75 is calculated using the numbers 25 and 3 and an arithmetic operator.
* Change the line that calculates x so the box is 250px wide, but the 250 is calculated using two numbers and the remainder (modulo) operator.
* Change the line that calculates y so the box is 150px high, but the 150 is calculated using three numbers and the subtraction and division operators.
* Change the line that calculates x so the box is 200px wide, but the 200 is calculated using the number 4 and an assignment operator.
* Change the line that calculates y so the box is 200px high, but the 200 is calculated using the numbers 50 and 3, the multiplication operator, and the addition assignment operator.

Don't worry if you totally mess the code up. You can always press the Reset button to get things working again. After you've answered all the above questions correctly, feel free to play with the code some more or create your own challenges.

比較運算符
-----

Sometimes we will want to run true/false tests, then act accordingly depending on the result of that test — to do this we use **comparison operators**.

| Operator | Name | Purpose | Example |
| --- | --- | --- | --- |
| `===` | Strict equality | Tests whether the left and right values are identical to one another | `5 === 2 + 4` |
| `!==` | Strict-non-equality | Tests whether the left and right values **not** identical to one another | `5 !== 2 + 3` |
| `<` | Less than | Tests whether the left value is smaller than the right one. | `10 < 6` |
| `>` | Greater than | Tests whether the left value is greater than the right one. | `10 > 20` |
| `<=` | Less than or equal to | Tests whether the left value is smaller than or equal to the right one. | `3 <= 2` |
| `>=` | Greater than or equal to | Tests whether the left value is greater than or equal to the right one. | `5 >= 4` |

**備註：** You may see some people using `==` and `!=` in their tests for equality and non-equality. These are valid operators in JavaScript, but they differ from `===`/`!==`. The former versions test whether the values are the same but not whether the values' datatypes are the same. The latter, strict versions test the equality of both the values and their datatypes. The strict versions tend to result in fewer errors, so we recommend you use them.

If you try entering some of these values in a console, you'll see that they all return `true`/`false` values — those booleans we mentioned in the last article. These are very useful, as they allow us to make decisions in our code, and they are used every time we want to make a choice of some kind. For example, booleans can be used to:

* Display the correct text label on a button depending on whether a feature is turned on or off
* Display a game over message if a game is over or a victory message if the game has been won
* Display the correct seasonal greeting depending what holiday season it is
* Zoom a map in or out depending on what zoom level is selected

We'll look at how to code such logic when we look at conditional statements in a future article. For now, let's look at a quick example:

```html
<button>Start machine</button>
<p>The machine is stopped.</p>
```

```js
var btn = document.querySelector("button");
var txt = document.querySelector("p");

btn.addEventListener("click", updateBtn);

function updateBtn() {
  if (btn.textContent === "Start machine") {
    btn.textContent = "Stop machine";
    txt.textContent = "The machine has started!";
  } else {
    btn.textContent = "Start machine";
    txt.textContent = "The machine is stopped.";
  }
}
```

**Open in new window**

You can see the equality operator being used just inside the `updateBtn()` function. In this case, we are not testing if two mathemetical expressions have the same value — we are testing whether the text content of a button contains a certain string — but it is still the same principle at work. If the button is currently saying "Start machine" when it is pressed, we change its label to "Stop machine", and update the label as appropriate. If the button is currently saying "Stop machine" when it is pressed, we swap the display back again.

**備註：** Such a control that swaps between two states is generally referred to as a **toggle**. It toggles between one state and another — light on, light off, etc.

Summary
-------

In this article we have covered the fundamental information you need to know about numbers in JavaScript, for now. You'll see numbers used again and again, all the way through your JavaScript learning, so it's a good idea to get this out of the way now. If you are one of those people that doesn't enjoy math, you can take comfort in the fact that this chapter was pretty short.

In the next article, we'll explore text and how JavaScript allows us to manipulate it.

**備註：** If you do enjoy math and want to read more about how it is implemented in JavaScript, you can find a lot more detail in MDN's main JavaScript section. Great places to start are our Numbers and dates and Expressions and operators articles.

* 前頁
* Overview: First steps
* 次頁


如何建構 HTML 表單 - 學習該如何開發 Web

如何建構 HTML 表單
============

* 前頁  (en-US)
* Overview: Forms
* 次頁  (en-US)

有了基礎後，我們就能探討表單元素，所提供的結構與文意之詳細資訊；還有各表單部份的相異之處。

|  |  |
| --- | --- |
| 先決條件： |
 對電腦還有
 HTML
 有基本理解。
  |
| 目標： | 理解如何構建 HTML 表單並給予無障礙的語意化。 |

表單表單的彈性化令其成為 HTML 最複雜的結構之一。你能使用專用的表單元素和屬性，來構建任何類型的基本表單。使用正確的 HTML 表單結構能讓確保表單可用、且無障礙。

<form> 元素
---------

`<form>` (en-US) 元素會形式上的定義表單和決定行為屬性。每次建立 HTML 表單時，都必須使用 form 元素；並將所有內容嵌進去。大多數的輔助技術與瀏覽器套件，都能抓到 `<form>` (en-US) 元素，並實做特殊的 hook，使其更易於使用。

我們之前就講過這件事了。

**警告：** 絕對不能在表單裡面再嵌入表單。這會讓表單行為變得難以理解，所以是一個壞主意。

你可以從表單外面控制 `<form>` (en-US) 。這麼做的話，除非使用 `form` 將其與表單關聯，否則該操作預設上和任何表單無關。引入此功能是為了可以在即使該操作未嵌在表單中，其依舊能顯式地將操作與表單綁定。

接下來就開始探討表單裡面可能會嵌入什麼吧。

<fieldset> and <legend> 元素
--------------------------

`<fieldset>` (en-US) 元素能方便地建立用途相近、樣式及語意化都很方便的小部件組（groups of widgets）。你可以透過添加 `<legend>` (en-US) 來給 `<fieldset>` (en-US) 的內部開頭添加標籤。`<legend>` (en-US) 的文字內容能描述 `<legend>` (en-US) 目的。

多數輔助科技會在 `<legend>` (en-US) 元素被 `<fieldset>` (en-US) 包住時偵測並使用它。比如說 Jaws 與 NVDA 之類的螢幕報讀器就會在讀到每個控件的標籤前，讀出 legend 的內容。

下面就有一個示例：

```html
<form>
  <fieldset>
    <legend>Fruit juice size</legend>
    <p>
      <input type="radio" name="size" id="size\_1" value="small" />
      <label for="size\_1">Small</label>
    </p>
    <p>
      <input type="radio" name="size" id="size\_2" value="medium" />
      <label for="size\_2">Medium</label>
    </p>
    <p>
      <input type="radio" name="size" id="size\_3" value="large" />
      <label for="size\_3">Large</label>
    </p>
  </fieldset>
</form>
```

**備註：** 你可以在fieldset-legend.html 觀察範例（或著觀察這個動態互動）。

在閱讀表單時，螢幕報讀器會針對第一個小部件組，說出「Fruit juice size small」、接著針對第二個小部件組，說出「Fruit juice size medium」、第三個則是「Fruit juice size large」。

這個示例的是最重要的用法之一：每次有一組 radio 按鈕時，就該在裡面放一個 `<fieldset>` (en-US) 元素。`<fieldset>` (en-US) 也能用在表單的其他地方。理想上，要是表單一長，就要把他放到其他頁面。但如果做不到這點，那將不同的相關部分，放在不同的 fieldsets 之中，也可以提高可用性。

由於 `<fieldset>` (en-US) 對輔助技術的影響，這個元素是建立無障礙表單的基石，但請注意不要濫用這個元素。可以的話，聽聽螢幕報讀是怎麼講的 (en-US)。如果踢起來怪怪的，那就試著改進表單。

<label> 元素
----------

正如上篇文章中所見，`<label>` (en-US) 元素是定義 HTML 表單控件的正式方法。如果要構建無障礙的表單，這是最重要的元素：正確實做後，螢幕閱讀器會說出表單元素標籤、以及相關說明，同時也對有視力的用戶很有用。以這個例子為例，我們在上一篇文章中看過：

```html
<label for="name">Name:</label> <input type="text" id="name" name="user\_name" />
```

在 `<label>` 元素透過 `for` 屬性與 `<input>` 元素的 `id` 屬性正確連結後，螢幕閱讀器就會讀出「Name, edit text」這樣的文字。

還有另一種控制標籤與表單控件關聯的方法：那就是把表單控件嵌在 `<label>` 元素裡面，以便隱式關聯。

```html
<label for="name">
  Name: <input type="text" id="name" name="user\_name" />
</label>
```

但即使在這種情況下，最好還是設置 `for` 屬性，以確保所有輔具都能理解標籤和控件之間的關係。

如果沒有標籤、或著說表單控件沒有被顯式或隱式關聯，螢幕閱讀器會讀出沒啥幫助的「Edit text blank」。

### 標籤也能點喔！

使用標籤的另一個好處，就是能在點選該標籤後，啟動相對應的小部件。這種功能在控制文字輸入的時候會很好用：用戶點選標籤時就可以 focus 到 input 那邊。這對 button 與 checkbox 尤其有用：因為點選的區域可能很小，因此使它盡可能簡單地啟用，會是很有用的。

例如在下面的示例中，點選「I like cherry」標籤文字後會切換 *taste\_cherry* checkbox 的點選狀態：

```html
<form>
  <p>
    <input type="checkbox" id="taste\_1" name="taste\_cherry" value="cherry" />
    <label for="taste\_1">I like cherry</label>
  </p>
  <p>
    <input type="checkbox" id="taste\_2" name="taste\_banana" value="banana" />
    <label for="taste\_2">I like banana</label>
  </p>
</form>
```

**備註：** 你可以在 checkbox-label.html 觀察示例（這裡有展示版本！）

### 多個標籤

嚴格來說，一個小部件組能放很多個標籤，但由於部分輔助科技處理上會有問題，所以這也不是個好點子。如果有多個標籤，請試著把巢狀各個小部件，並在裡面只安插一個 `<label>` (en-US) 元素。

來看看這個例子：

```html
<p>Required fields are followed by <abbr title="required">*</abbr>.</p>

<!-- So this: -->
<div>
  <label for="username">Name:</label>
  <input id="username" type="text" name="username" />
  <label for="username"
 ><abbr title="required" aria-label="required">*</abbr></label
 >
</div>

<!-- would be better done like this: -->
<div>
  <label for="username">
    <span>Name:</span>
    <input id="username" type="text" name="username" />
    <abbr title="required" aria-label="required">*</abbr>
  </label>
</div>

<!-- But this is probably best: -->
<div>
  <label for="username"
 >Name: <abbr title="required" aria-label="required">*</abbr></label
 >
  <input id="username" type="text" name="username" />
</div>
```

The paragraph at the top states a rule for required elements. The rule must be included *before* it is used so that sighted users and users of assistive technologies such as screen readers can learn what it means before they encounter a required element. While this helps inform users what an asterisk means, it can not be relied upon. A screen reader will speak an asterisk as "*star*" when encountered. When hovered by a sighted mouse user, "*required*" should appear, which is achieved by use of the `title` attribute. Titles being read aloud depend on the screen reader's settings, so it is more reliable to also include the `aria-label` attribute, which is always read by screen readers.

The above variants increase in effectiveness as you go through them:

* In the first example, the label is not read out at all with the input — you just get "edit text blank", plus the actual labels are read out separately. The multiple `<label>` elements confuse the screenreader.
* In the second example, things are a bit clearer — the label read out along with the input is "name star name edit text required", and the labels are still read out separately. Things are still a bit confusing, but it's a bit better this time because the `<input>` has a label associated with it.
* The third example is best — the actual label is read out all together, and the label read out with the input is "name required edit text".

**備註：** You might get slightly different results, depending on your screenreader. This was tested in VoiceOver (and NVDA behaves similarly). We'd love to hear about your experiences too.

**備註：** You can find this example on GitHub as required-labels.html (see it live also). don't test the example with 2 or 3 of the versions uncommented — screenreaders will definitely get confused if you have multiple labels AND multiple inputs with the same ID!

建立表單所常用的 HTML 結構
----------------

Beyond the structures specific to web forms, it's good to remember that form markup is just HTML. This means that you can use all the power of HTML to structure a web form.

As you can see in the examples, it's common practice to wrap a label and its widget with a `<li>` (en-US) element within a `<ul>` (en-US) or `<ol>` (en-US) list. `<p>` (en-US) and `<div>` elements are also commonly used. Lists are recommended for structuring multiple checkboxes or radio buttons.

In addition to the `<fieldset>` (en-US) element, it's also common practice to use HTML titles (e.g. `<h1>` (en-US), `<h2>` (en-US)) and sectioning (e.g. `<section>` (en-US)) to structure complex forms.

Above all, it is up to you to find a comfortable coding style that results in accessible, usable forms. Each separate section of functionality should be contained in a separate `<section>` (en-US) element, with `<fieldset>` (en-US) elements to contain radio buttons.

### 主動學習：建立表單結構

Let's put these ideas into practice and build a slightly more involved form — a payment form. This form will contain a number of control types that you may not yet understand. Don't worry about this for now; you'll find out how they work in the next article (Basic native form controls (en-US)). For now, read the descriptions carefully as you follow the below instructions, and start to form an appreciation of which wrapper elements we are using to structure the form, and why.

1. To start with, make a local copy of our blank template file and the CSS for our payment form in a new directory on your computer.
2. Apply the CSS to the HTML by adding the following line inside the HTML `<head>`:

```html
<link href="payment-form.css" rel="stylesheet" />
```

3. Next, create your form by adding the outer `<form>` (en-US) element:

```html
<form></form>
```

4. Inside the `<form>` tags, add a heading and paragraph to inform users how required fields are marked:

```html
<h1>Payment form</h1>
<p>
  Required fields are followed by
  <strong><abbr title="required">*</abbr></strong
 >.
</p>
```

5. Next we'll add a larger section of code into the form, below our previous entry. Here you'll see that we are wrapping the contact information fields inside a distinct `<section>` (en-US) element. Moreover, we have a set of two radio buttons, each of which we are putting inside its own list (`<li>` (en-US)) element. We also have two standard text `<input>` (en-US)s and their associated `<label>` (en-US) elements, each contained inside a `<p>` (en-US), and a password input for entering a password. Add this code to your form:

```html
<section>
  <h2>Contact information</h2>
  <fieldset>
    <legend>Title</legend>
    <ul>
      <li>
        <label for="title\_1">
          <input type="radio" id="title\_1" name="title" value="K" />
          King
        </label>
      </li>
      <li>
        <label for="title\_2">
          <input type="radio" id="title\_2" name="title" value="Q" />
          Queen
        </label>
      </li>
      <li>
        <label for="title\_3">
          <input type="radio" id="title\_3" name="title" value="J" />
          Joker
        </label>
      </li>
    </ul>
  </fieldset>
  <p>
    <label for="name">
      <span>Name: </span>
      <strong><abbr title="required">*</abbr></strong>
    </label>
    <input type="text" id="name" name="username" />
  </p>
  <p>
    <label for="mail">
      <span>E-mail: </span>
      <strong><abbr title="required">*</abbr></strong>
    </label>
    <input type="email" id="mail" name="usermail" />
  </p>
  <p>
    <label for="pwd">
      <span>Password: </span>
      <strong><abbr title="required">*</abbr></strong>
    </label>
    <input type="password" id="pwd" name="password" />
  </p>
</section>
```

6. The second `<section>` of our form is the payment information. We have three distinct controls along with their labels, each contained inside a `<p>`. The first is a drop-down menu (`<select>` (en-US)) for selecting credit card type. The second is an `<input>` element of type `tel`, for entering a credit card number; while we could have used the `number` type, we don't want the number's spinner UI. The last one is an `<input>` element of type `date`, for entering the expiration date of the card; this one will come up with a date picker widget in supporting browsers, and fall back to a normal text input in non-supporting browsers. These newer input types are reintroduced in The HTML5 input types (en-US).
 Enter the following below the previous section:

```html
<section>
  <h2>Payment information</h2>
  <p>
    <label for="card">
      <span>Card type:</span>
    </label>
    <select id="card" name="usercard">
      <option value="visa">Visa</option>
      <option value="mc">Mastercard</option>
      <option value="amex">American Express</option>
    </select>
  </p>
  <p>
    <label for="number">
      <span>Card number:</span>
      <strong><abbr title="required">*</abbr></strong>
    </label>
    <input type="tel" id="number" name="cardnumber" />
  </p>
  <p>
    <label for="date">
      <span>Expiration date:</span>
      <strong><abbr title="required">*</abbr></strong>
      <em>formatted as mm/dd/yyyy</em>
    </label>
    <input type="date" id="date" name="expiration" />
  </p>
</section>
```

7. The last section we'll add is a lot simpler, containing only a `<button>` (en-US) of type `submit`, for submitting the form data. Add this to the bottom of your form now:

```html
<p><button type="submit">Validate the payment</button></p>
```

You can see the finished form in action below (also find it on GitHub — see our payment-form.html source and running live):

結論
--

你現在擁有了正確建構 HTML 表單的所有知識。接下來將介紹本章介紹的許多功能。在下一篇文章中，將詳細探討如何使用各種不同類型的表單小部件，來收集用戶的訊息。

參見
--

* A List Apart: *Sensible Forms: A Form Usability Checklist*
* 前頁  (en-US)
* Overview: Forms
* 次頁  (en-US)


使用 CSS 解決常見問題 - 學習該如何開發 Web

使用 CSS 解決常見問題
=============

此頁總結問與答，以及 MDN 網站上其它能幫助你解決常見 CSS 問題的資源。

修飾盒子
----

如何為元素新增 Drop-Shadow？ (en-US)

陰影可以透過 `box-shadow` 屬性添加給盒子。這個教學解釋它如何運作並提供範例。

如何用圖片填滿盒子同時不讓該圖片變形？ (en-US)

`object-fit` (en-US) 屬性提供將圖片置入長寬比不同的盒子中的各種方式。你能在這個教學中了解如何利用它們。

什麼方法可以用來修飾盒子？ (en-US)

展示一系列用 CSS 修飾盒子時能派上用場的屬性。

如何把元素設為半透明？ (en-US)

`opacity` (en-US) 屬性及擁有 alpha 通道的顏色數值可以解決這個問題。

### 盒子修飾教學與指南

* 盒子模型 (en-US)
* 修飾背景與邊界 (en-US)
CSS 與文字
-------

如何為文字新增 Drop-Shadow？ (en-US)

陰影可以透過 `text-shadow` (en-US) 屬性添加給文字。這個教學解釋它如何運作並提供範例。

如何強調段落第一行？ (en-US)

了解如何透過偽元素 `::first-line` (en-US) 抓到段落第一行。

如何強調文章第一段？ (en-US)

了解如何透過偽類別 `::first-child` 抓到第一個段落。

如何僅強調出現在標題之後的第一段？ (en-US)

組合器能幫助你基於文件裡的位置精準抓取元素；這個教學解釋如何使用讓 CSS 僅套用於出現在標題之後的第一段。

### 文字修飾教學與指南

* 如何修飾文字？ (en-US)
* 如何修飾列表元素？ (en-US)
* 如何修飾超連結？ (en-US)
* CSS 選擇器 (en-US)
CSS 布局
------

如何置中項目？ (en-US)

在盒子裡將項目水平或垂直置中以前很麻煩，但現在彈性盒子讓它變得很簡單。

### 布局指南

* 使用 CSS 彈性盒子
* 使用 CSS 多行布局 (en-US)
* 使用 CSS 格線布局
* 使用 CSS 生成內容 (en-US)

**備註：** 我們有一本針對 CSS 布局解法 (en-US)的食譜，內有可正常執行的範例與常見布局任務說明。


CSS 排版 - 學習該如何開發 Web

CSS 排版
======

基於我們已經看過了 CSS 基本原理：如何將文字賦予樣式、如何該便樣式或操作你的文字內容所處的 box 模型。現在是時候看看如何將你的 box 模型在視圖中放置於相對應的正確位置。我們已經涵蓋了必要的先備知識，接下來我們可以深入 CSS 排版，看一些不同的顯示方式，如現代的排版方式——彈性盒子、CSS 網格及定位，當然還有一些舊式的技術你可能會想要理解。

先備知識
----

開始這個單元之前，需要做如下準備：

1. 對 HTML 有基本的認知，如 HTML 簡介 單元中所述。
2. 熟悉 CSS 基本原理，如 CSS 簡介中所述。
3. 了解如何 樣式框 (en-US)。

**備註：** 如果你正在使用的電腦/平板/其他設備讓你無法建立自己的文件，你可以透過線上工具如 JSBin 或 Glitch 編輯並嘗試（大部分的）範例程式碼。

指導
--

這些文章旨在提供關於 CSS 中可用的技術以及基本排版工具和技術的指導。在課程的結尾有一個評估測驗——配置一個網頁的版面，這可以幫助你了解你對 CSS 排版方式的理解程度。

CSS 排版介紹 (en-US)

這篇文章將回顧一些之前單元中提過的 CSS 排版特性，像是不同的`display` (en-US) 參數，藉由這個單元我們將介紹一些基本概念。

常規流 (en-US)

在我們做任何事之前，網頁上的元素會根據常規流自行排列。這篇文章解釋常規流的基礎知識，用來學習如何改變它。

彈性盒子 (en-US)

彈性盒子 (en-US)是一維空間的排版方式，用來讓項目以行或列的方式排列。項目會延展或限縮來符合較大或較小的空間。這篇文章會解釋基礎原理。

網格 (en-US)

CSS 網格排版是一個二維空間的網頁排版系統。它讓你將內容排入行與列中，且它有許多功能讓你在建立複雜的排版時變得簡單明瞭。這篇文章會告訴你全部。

浮動 (en-US)

最初是為了在文字區塊中浮動排列圖片，而後為了在網頁中建造多攔排版`float` (en-US) 屬性成為了最常用的工具之一。這篇文章會解釋如何使用。

定位 (en-US)

定位准許將元素從正常的文檔流中脫離出來，讓他們表現不同，例如設置在另一個模塊的上方，或使模塊在瀏覽器視窗內部始終停留在相同的地方。這篇文章將解釋不同的`position` (en-US) 值和如何使用它們。

多欄排版 (en-US)

多欄排版規格提供你將內容排進欄位的排版方式，像你可能在報紙上看到的那樣。這篇文章會解釋如何使用這個功能。

舊式排版方式 (en-US)

網格系統是另一個在 CSS 排版中非常常用的特性，在網格排版出現之前，它通常使用浮動或其他佈局來實現。想像你的佈局為一組列數（如 4, 6, 或 12），然後將你的內容放置在這些虛構的列中。在這篇文章中我們將隨著創建網格系統、看看使用網格框架提供現成的網格框架和體驗 CSS 網格來結束-一個新興的瀏覽器特性使得在 Web 實現網格設計變得大為容易等來探索這些基本的想法。

支援舊版瀏覽器 (en-US)

在這個單元，我們建議你使用彈性盒子和網格作為主要的設計方式。但是有些造訪你網站的人會使用舊版瀏覽器，或者他使用的瀏覽器不支援你的設計方式。以下情形在網路上一定會發生——當新功能開發出來了，不同的瀏覽器會有不同的支援優先級。這篇文章會解釋如何使用現代網頁技術且不遺漏舊技術的使用者。

基礎排版理解測驗 (en-US)

配置網頁版面，這是一個測試你對於不同排版方式理解程度的測驗。

參見
--

實際的定位排版範例 (en-US)

這篇文章會告訴你如何建立一些真實的範例來說明什麼樣的情況你可以使用定位排版。


CSS 入門 - 學習該如何開發 Web

CSS 入門
======

CSS（階層式樣式表）被用來設定網頁的樣式及佈局。舉例來說，改變字體、顏色、尺寸以及擺放你的內容、拆分為多欄，或是添加動畫效果和其它裝飾的特性。這個單元提供一個平緩的學習路徑，透過介紹 CSS 的工作原理、語法的樣式，以及如何在 HTML 中添加樣式設定。

### 想要成為網頁前端開發員？

我們整理了一門課程，包含了你實現目標所需要的所有基本知識。

開始

先備知識
----

開始這個單元之前，你應該具備：

1. 基本熟悉電腦的操作，以及網路的使用（即：在網路查資料，看看內容）。
2. 設定好一個基本的工作環境（參考安裝基本軟體單元），並知道如何建立以及管檔案（參考檔案的管理單元）。
3. 對 HTML 有基本的認識，像是 HTML 介紹單元裡所提到的。

**備註：** 如果你使用的電腦／平板／或其它裝置上，無法建立你所需要的檔案。你可以在像是 JSBin 或 Glitch 的線上程式編輯平台上嘗試（絕大部分的）範例程式。

導覽
--

這個單元包含以下的主題，會帶你瀏覽所有 CSS 的基本理論，並提供你一些測試技巧的機會：

CSS 是什麼？

**CSS** （階層式樣式表）讓你能夠建立好看的網頁，但是它骨子是是怎麼運作的？這個主題用一個簡單的語法範例來解釋 CSS 是什麼，並涵蓋有關這個語言的一些關鍵術語。

開始使用 CSS

這個主題中，我們將把 CSS 套用到一個簡單的 HTML 文件上，逐步學習有關這個語言的一些實用知識。

CSS 的結構 (en-US)

現在你對 CSS 是什麼以及基本使用方法有了一些概念，是時候去更深入看看這個語言的結構了。我們在這裡討論了許多的觀念；如果之後你對任何概念感到模糊，可以到這裡來回顧。

CSS 的運作方式

我們已經學到了什麼是 CSS 以及如何寫一個簡單樣式表的基礎概念。我們會在這堂課裡看看瀏覽器是如何依據 CSS 和 HTML 的內容轉化為網頁的呈現。

使用你的新知識 (en-US)

透過你在前面堂課所學到的東西，你應該會發現你可以對簡單的文字內套用 CSS 設定，加入你想要的樣式。這個主題給你一個機會來做這件事。

參見
--

Intermediate Web Literacy 1: Intro to CSS

一個很好的 Mozilla 基礎課程，探討及測試許多 CSS 技巧。了解關於在網頁上設定 HTML 元素樣式、 CSS 選擇器、屬性、數值。


文字樣式 - 學習該如何開發 Web

文字樣式
====

託了 CSS 語言基礎的福，下一個讓你專攻的 CSS 主題是文字樣式——最常會在 CSS 使用的部分。讓我們來看看文字樣式的基礎知識，包含設定字形、粗細、斜體、行距與字距、陰影以及更多文字功能。我們會套用客製化字形、設定清單樣式和連結樣式到你的網頁來完成這個單元。

先備知識
----

在開始這個單元之前，你應該先熟悉基礎的 HTML，如 HTML 介紹 這個單元所討論的，並且要對 CSS 的基礎感到輕鬆，如 CSS 介紹 討論的。

**備註：** If you are working on a computer/tablet/other device where you don't have the ability to create your own files, you could try out (most of) the code examples in an online coding program such as JSBin, CodePen or Glitch.

指南
--

這個單元包含以下的文章會教導你?設定 HTML 文字內容樣式的全部要領。

基本的字形及文字樣式 (en-US)

In this article we go through all the basics of text/font styling in detail, including setting font weight, family and style, font shorthand, text alignment and other effects, and line and letter spacing.

清單樣式 (en-US)

Lists behave like any other text for the most part, but there are some CSS properties specific to lists that you need to know about, and some best practices to consider. This article explains all.

連結樣式 (en-US)

When styling links, it is important to understand how to make use of pseudo-classes to style link states effectively, and how to style links for use in common varied interface features such as navigation menus and tabs. We'll look at all these topics in this article.

網頁字形 (en-US)

Here we will explore web fonts in detail — these allow you to download custom fonts along with your web page, to allow for more varied, custom text styling.

Assessments
-----------

The following assessments will test your understanding of the text styling techniques covered in the guides above.

Typesetting a community school homepage (en-US)

In this assessment we'll test your understanding of styling text by getting you to style the text for a community school's homepage.


CSS 一般問題 - 學習該如何開發 Web

CSS 一般問題
========

我的 CSS 合乎規格，但繪出的版面有誤
--------------------

如果想讓大部分的瀏覽器都能正確繪製標準 HTML/CSS 頁面，便須於 HTML 檔案中放上完整的正確 DOCTYPE。

新近瀏覽器都有兩種佈局模式：

* *Quirks 模式*：也稱為相容模式，讓舊網頁能依照以前舊瀏覽器的方式顯現。
* *標準模式*：瀏覽器將依循 W3C 規範決定網頁的顯示方式。

以 Gecko 為核心的瀏覽器都有第三種\*近乎標準\*模式，其中只有一些些不合規範的地方。

如果你宣告的 DTD 不合標準或過期了，那麼瀏覽器就會進入 Quirks 模式。

以下是常用的 DTD 列表，可以讓瀏覽器進入標準或近乎標準模式。
```

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
```

`id` 與 `class` 之間的差別
--------------------

HTML 元素都可有 `id` 及 `class` 屬性。`id` 屬性是讓你為元素命名的，整個頁面中的元素名稱也不應有重複；`class` 屬性則可將元素歸為某特定類別，通常也會有很多元素屬於同一種類別 (意即 `class` 屬性值相同。) CSS 可以讓你以 `id` 或 `class` 來決定某元素的樣式。

如果你想指定某特定單一元素的樣式，則應使用 `id`。

若有很多個元素皆有相同樣式，則可使用 `class`。

這方面的資訊亦可參考 CSS 選取符。

恢復某特性的預設值
---------

CSS2 並不提供任何指定某特性預設值的方法，所以要恢復某特性預設值的唯一方法就是重新指定此值。此外你自己得知道預設值是什麼，因為 CSS 也沒有所謂 *default* 的關鍵字。

所以，以選取符撰寫樣式時須特別注意 (例如以標籤名稱 `p` 作為選取符)，或許可以用更明確的選取符 (例如 ID 或 class)。以標籤名稱作選取符茲事體大，一旦使用便將影響整個網頁，而且沒有自動恢復預設值的方法。

此外，由於 CSS 具*串聯*特性，指定選取符時通常越明確越好，以免把不相干的元素都牽扯進來。

相依樣式
----

CSS 並不支援「以另一個樣式規則為基準」的樣式設定法。 (參考 Eric Meyer 所寫、關於 CSS 工作小組的說明。) 不過，你可以為某單一元素套上多重樣式，製作出類似效果。

套用多重類別
------

你可以在 HTML 元素的 `class` 屬性裡以空白字元分隔填上多個樣式類別名稱，便能同時套用多重類別。

```html
<style type="text/css">
 .firstclass {
 background: black;
 color: white;
 }
 .secondclass {
 font-weight: bold;
 }
</style>

<div class="firstclass secondclass">
  <!-- ... content ... -->
</div>
```

若是這些規則中設定了同一種特性值，則會依序以明確性（specificity）、定義位置先後決定顯示方式，與`class` 屬性中的次序無關。

無用樣式
----

即使樣式規則已經正確設定完畢，還是可能為瀏覽器所忽略，此時通常是經過語法及優先權法則判斷後的正常現象。

以下是導致樣式被略過的常見情形：

* HTML 元素層次問題
* 樣式規則重新定義
* 特性的簡寫法
* 使用 `*` 選取符
* CSS 明確性

你可以使用 DOM 觀察器 的 *CSS Style Rules* 來檢查上述問題。

### HTML 元素層次問題

此時 CSS 樣式套用與否與元素的層次大有相關，請留意：套用到子元素的樣式必定會蓋過母元素的樣式，跟明確性或 CSS 規則的優先權無關。

```html
#section { font-weight: bold; } .redtext { font-weight: normal; color: red; }

<div id="section">
  粗體、
  <span class="redtext">正常紅字、</span>
  又見粗體
</div>
```

如果你的 HTML 層級錯綜複雜，發生規則意外被忽略的情形時，請檢查元素層級問題。可能有某個子元素套上了不該用的樣式。

### 樣式規則重新定義

在 CSS 樣式表中，先後次序**非常**重要。如果你定義了某規則後又重新定義一次，則晚定義的才算數。
```

#section { font-weight: bold; }
.redtext { color: red; }
/* 其他規則 */
/* 其他規則 */
/* 其他規則 */
.redtext { color: green; }

<div id="section">
粗體、
<span class="redtext">正常紅字？</span>
又見粗體
</div>
```

為避免此類錯誤發生，每個特定選取符請僅定義一次樣式，集中特性一次定義也便於管理些。

### 特性的簡寫法

使用簡寫法來定義樣式簡明扼要，是個不錯的方法。你也可以用簡寫法設定某組特性中的部分特性值，但須留意其他沒寫到的部分會自動採用預設值。這表示之前的規則中為某單一特性定義的值可能失效。
```

#section { font-size: 12px; font-family: Verdana; font-weight: bold; }
.redtext { font: 14px Arial; color: red; }

<div id="section">
   採用 Verdana 粗體的 12px 字樣；
   <span class="redtext">採用 Arial 正常字體的 14px 紅字；</span>
   還是採用 Verdana 粗體的 12px 字樣。
</div>
```

前一個例子中，套用到不同元素範圍的同族特性是問題所在，但就算特性都寫在同一條規則裡也可能出問題，因為順序**真的**很重要。

```css
#section {
  font-weight: bold;
  font: 12px Verdana; /\* 有了這行，font-weight 又回到預設的 normal 了 \*/
}
```

### 使用 `*` 選取符

`*` 選取符表示任何元素皆符合，但使用上應多加小心。
```

body * { font-weight: normal; }
#section { font: 12px Verdana; }
.boldtext { font-weight: bold; }
.redtext { color: red; }

<div id="section">
   正常、
   <span class="boldtext">
      <span class="redtext">正常紅字、</span>
   </span>
   又見正常。
</div>
```

在此例中，選取符為 `body *` 的規則會套用到所有 `body` 內的元素，也包括 *redtext*，所以原先套用到 *boldtext* 的 `font-weight: bold;` 就被覆蓋為 `font-weight: normal;` 了。

### CSS 明確性

如果某元素會套用好幾條規則，則相衝突的特性就要靠規則的明確性來分高下。行內樣式（放在 HTML 各標籤的 `style` 屬性中）優先權最高，其次是以 `id` 做選取符的規則，再其次是以 `class` 套用的類別，最後則是單純以元素名稱當選取符的規則。
```

div { color: black; }
#orange { color: orange; }
.green { color: green; }

<div id="orange" class="green" style="color: red;">是紅的！</div>
```

如果樣式規則的選取符分成好幾段，計算方式就更為複雜一些。需要瞭解完整資訊者，請參考 CSS 2.1 規格書的 6.4.3 一節。

-moz-\* 特性是什麼玩意？
----------------

請見 Mozilla 擴充的 CSS (en-US)。由於這些擴充規格不是 W3C 標準的一部分，因此並不建議使用。


How CSS works - 學習該如何開發 Web

How CSS works
=============

* 前頁  (en-US)
* Overview: First steps
* 次頁  (en-US)

我們已經學會基本 CSS 的用途與用法了，這堂課我們就來看看瀏覽器是如何將 CSS 和 HTML 變化成網頁的吧。

|  |  |
| --- | --- |
| 需求： |
 基本電腦操作、已安裝基本的軟體、
 檔案處理的基本知識、HTML 基礎 (請參閱
 HTML 入門)。
  |
| 目標： |
 了解瀏覽器如何解析 CSS 和 HTML ，以及當瀏覽器遇到不認識的 CSS
 時會發生什麼事。
  |

CSS 實際上是怎麼運作的？
--------------

每當瀏覽器要顯示一份文件時，它得先為文件內容穿上樣式，這會歷經許多程序，我們已經列在下方了。記得喔，這只是非常簡化的版本，不同的瀏覽器會有自己的做法，不過原則上就是這樣。

1. 瀏覽器載入 HTML (比如從網路上接收(receive))。
2. 它將 HTML 轉換成 DOM (Document Object Model，文件物件模型)，這東西是文件在電腦記憶體中的表示形式，詳情我們下個小節再說。
3. 瀏覽器蒐集所有 HTML 文件連到的資源，像是嵌入網頁的圖片和影片等等，當然，裡面也包含 CSS！JavaScript 也是其中的一種資源，在此步驟的稍後就會處理，但我們先不要把事情弄得這麼複雜，這邊暫且不講。
4. 瀏覽器解析 (parse) CSS，先按照選擇器的類型(如元素、類別、ID 等等)，將規則放入相對應的「桶子(buckets)」裡。接著再依找到的選擇器，推算哪些規則應該要套用在哪些 DOM 節點上，並將樣式附著上去，最後產生的東西叫做轉譯樹(render tree)。
5. 當規則都套用完畢後，開始按照網頁結構布局(layout)轉譯樹。
6. 網頁被呈現在螢幕上，這個步驟稱為繪製(painting)。

下面是此流程的示意圖。

![](/zh-TW/docs/Learn/CSS/First_steps/How_CSS_works/rendering.svg)

關於 DOM
------

DOM 有著一個樹狀結構，每個標記語言中的元素、屬性，以及文字片段都會是這個樹狀結構裡的節點 (en-US)。每個節點與其他節點間的關係都有定義：若節點有子節點(child)，則自己是他們的父節點(parent)；若子節點為複數，則這些子節點稱彼此為兄弟/姊妹節點(sibling)。

了解 DOM 對於設計、除錯以及維護 CSS 有相當大的助益，因為 DOM 正是 CSS 與文件內容的交會之處。當你要利用瀏覽器的開發者工具(DevTools)來查看元素套用的規則時，你就會見到它們。

一個活生生的 DOM 例子
-------------

我們就別絮絮叨叨了，直接看個簡單的例子，來瞭解 HTML 片段是如何轉換成 DOM 的吧。

以下列 HTML 原始碼為例：

```html
<p>
  Let's use:
  <span>Cascading</span>
  <span>Style</span>
  <span>Sheets</span>
</p>
```

在 DOM 中，`<p>` 元素對應到的節點是一個父節點，它的子節點有一個純文字節點以及三個 `<span>` 元素節點，而 `SPAN` 節點也是有著純文字子節點的父節點：
```

P
├─ "Let's use:"
├─ SPAN
|  └─ "Cascading"
├─ SPAN
|  └─ "Style"
└─ SPAN
   └─ "Sheets"
```

這就是瀏覽器如何解析上段的 HTML 片段的 — 它轉譯了以上的 DOM 樹，並產生了以下的輸出：
```

p {
  margin: 0;
}
```

將 CSS 套用至 DOM
-------------

讓我們在上例中加入一些 CSS 來增添樣式。同樣地，HTML 如下：

```html
<p>
  Let's use:
  <span>Cascading</span>
  <span>Style</span>
  <span>Sheets</span>
</p>
```

假設我們把以下 CSS 套用上去：

```css
span {
  border: 1px solid black;
  background-color: lime;
}
```

瀏覽器會先解析 HTML 並產生 DOM 樹，然後再解析 CSS。因為這個 CSS 中只有使用 `span` 選擇器，所以瀏覽器可以很快地完成分類！接著它會將這個規則套用到每一個 `<span>` 上，並在螢幕上繪製出最終的畫面。

現在輸出變成這樣：

在下個主題裡的為 CSS 除錯 (en-US)中我們將會使用瀏覽器的 DevTools 來為 CSS 除錯，屆時我們將會學到更多瀏覽器解析 CSS 的方法。

瀏覽器遇到不認識的 CSS 時會發生什麼事？
----------------------

在先前的課程中，我們曾提過瀏覽器並不會一次實作全部的新 CSS。此外，很多人都不是使用最新版的瀏覽器。要知道 CSS 是與時俱進的，會超出瀏覽器可辨認的範圍是很正常的事，所以啦，你可能會很好奇，當瀏覽器遇到它看不懂的 CSS 選擇器或宣告時會發生什麼事呢？

答案就是裝作沒看到，繼續往下解析其它的 CSS！

如果瀏覽器在解析規則時，遇到它不認識的屬性或值，它會忽略它，並繼續解析下一個宣告。因此當它這麼做的時候，如果不是你拼錯字了，那就是那個屬性或值太新奇了，所以你的瀏覽器還沒有支援它。

同樣地，如果瀏覽器遇到一個它不認識的選擇器時，它會忽略整條規則，並繼續解析其他規則。

下面的例子使用英式英語來拼寫 color (也就是 colour)，進而導致該屬性失效，因為現在瀏覽器看不懂它了。也因此下面的段落無法以藍字顯示，不過其他的 CSS 還是成功地套用上去了，只有無效的會被忽略掉。

```html
<p>I want this text to be large, bold and blue.</p>
```

```css
p {
  font-weight: bold;
  colour: blue; /\* incorrect spelling of the color property \*/
  font-size: 200%;
}
```

這樣做有個很大的好處，就是你可以放心地利用新 CSS 做出很炫炮的效果，而不用擔心瀏覽器不支援時會出錯 — 反正差別只在於那個新特性有或沒有而已。再加上 CSS 層疊 (cascade) 的天性，只要你提供兩條具有相同具體程度(specificity)的規則，就能讓不支援的瀏覽器套用另一條規則。

這在想要使用某個剛推出的值，但它還未普及時非常有用。舉個例子，一些老舊的瀏覽器不支援以 `calc()` 來當作值，所以當我想要用它來決定寬的時候，可能會先寫一個備用的寬(以像素為單位的值)，然後再寫一個值為 `calc(100% - 50px)` 的寬。這樣一來，老舊的瀏覽器會使用像素版本 ，並忽略 `calc()` 版本，因為它們看不懂這個；而新的瀏覽器則會先解析像素版本，然後再將 `calc()` 版本覆寫上去，因為它比較晚出現。

```css
.box {
  width: 500px;
  width: calc(100% - 50px);
}
```

我們在之後的課程中還會學到更多支援不同瀏覽器的方法。

最後
--

你已經快完成這個主題了，但是還差臨門一腳，在下篇文章裡，你將會利用你學到的新知識 (en-US)來重新美化一個範例，並在過程中重溫你所學到的 CSS 技巧。

* 前頁  (en-US)
* Overview: First steps
* 次頁  (en-US)


開始使用 CSS - 學習該如何開發 Web

開始使用 CSS
========

* 前頁
* Overview: First steps
* 次頁  (en-US)

在這個主題中，我們將 CSS 套用到一個簡單的 HTML 文件上，在過程中學習這個語言一些實際的東西。

|  |  |
| --- | --- |
| 先備知識： | 基本的電腦概念、能夠安裝基本軟體，基本與各種檔案打交道的能力，以及 HTML 的基礎（由HTML介紹學到）。 |
| 學習目標： |
 了解將 CSS 文件與 HTML 檔案連接的基本知識，並且能夠使用 CSS
 對文字作簡單的格式變化。
  |

由某個 HTML 開始
-----------

我們的起點是一個 HTML 文件。如果你想要在自己的電腦上操作，可以把下面的程式碼複製下來。在你電腦上的目錄中，用 `index.html` 為檔名儲存。

```html
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Getting started with CSS</title>
  </head>

  <body>
    <h1>I am a level one heading</h1>

    <p>
      This is a paragraph of text. In the text is a
      <span>span element</span> and also a
      <a href="http://example.com">link</a>.
    </p>

    <p>
      This is the second paragraph. It contains an <em>emphasized</em> element.
    </p>

    <ul>
      <li>Item one</li>
      <li>Item two</li>
      <li>Item <em>three</em></li>
    </ul>
  </body>
</html>
```

**備註：** 如果你用來閱讀這篇文章的環境沒辦法簡單地建立檔案，也別擔心。底下會提供線上程式編輯器讓你就在這個頁面中撰寫範例程式。

為我們的文件加入 CSS
------------

首先，第一個步驟是告訴 HTML 文件我們有些 CSS 規則要加入。你通常有三種不同的方式來將 CSS 套用到 HTML 文件上，然而，現在我們先將焦點放在其中最常見並且實用的方式：在你文件標頭的位置將 CSS 連結進去。

建立一個檔案，存在與你 HTML 文件同一個目錄之中，並命名為 `styles.css` 。副檔名 `.css` 會讓它被當作一個 CSS 檔案。

為了連結 `styles.css` 到 `index.html` 中，在 HTML 文件的 `<head>` 中，加入下面這行：

```html
<link rel="stylesheet" href="styles.css" />
```

`<link>` (en-US) 元素使用 `rel` 屬性告訴瀏覽器我們有一個樣式表，接著 `href` 屬性指向到這個樣式表的位置。你可以在 `styles.css` 裡加入規則，來測試它是否能夠運作。使用程式碼編輯器，在你的 CSS 檔案中加入下面這段規則：

```css
h1 {
  color: red;
}
```

將你的 HTML 與 CSS 檔案儲存後，重新整理瀏覽器裡的頁面。文件中最上頭的第一級標題現在應該會是紅色的。如果是，恭喜！你成功地套到了一些 CSS 設定到 HTML 中了。如果結果不是如此，仔細檢查你的每段文字並確認都輸入正確。

你可以在你電腦裡的 `styles.css` 上繼續，或是使用我們下的互動編輯器來繼續本教學指引。 互動編輯器的行為，就像是這個 CSS 已經連結到 HTML 中，就如同我們在前面剛剛完成的一樣。

裝飾 HTML 元素
----------

藉由的將我們的標題設定為紅色，已經證明了我們可以指定並修飾 HTML 元素。我們透過一個*元素選擇器*來達成，它會指定名稱相符的 HTML 元素。想要指向所有段落元素的話，你會將選擇器設為 `p`。要把所有段落文字改成綠色，你會這麼作：

```css
p {
  color: green;
}
```

藉由逗號的分隔，你可以一次設定多個選擇器。如果我想要讓所有段落與清單項目都變綠色，我的規則會長得像：

```css
p,
li {
  color: green;
}
```

在底下的互動式編輯器（編輯程式區塊）中，或是在你本地的 CSS 檔案嘗試編輯看看。

改變元素的預設樣式
---------

當我們看一個標記清楚的 HTML 文件，即便是像我們範例這樣的簡單。能夠看到瀏覽器藉由加上一些預設的樣式讓 HTML 變得可閱讀。標題字體較大且較粗，而清單的項目前添加上符號。會如此表現，是因為瀏覽器裡有包含預設樣式的內部樣式表，它預設會套用到所有的頁面。少了它們的話，所有的內容會全擠在一起，而我們得從頭一個一個設定樣式。所有現代的瀏覽器，預設以很相似的方式來呈現 HTML 內容。

然而，你通常會想要一些不同於瀏覽器預設的選擇。可以通過選擇想改變的 HTML 元素，使用 CSS 規則來改變它的外觀來達成。拿我們的 `<ul>` 為例，它是一個無序清單。如果我決定不要顯示項目前的清單符號，可以如此移除它們：

```css
li {
  list-style-type: none;
}
```

現在試著把這個加到你的 CSS 中。

在 MDN 上可以查到 `list-style-type` 個好好屬性能夠設定哪些值。看一看 `list-style-type` (en-US) 頁面，你將能在開頭處看到一個互動式範例，可以嘗試選擇不同的值看到其呈現結果，可用值的詳細描述放在頁面後面一點的位置。

經由查讀頁面的內容，你將會發現除了移除項目符號之外，也可以改變項目符號的樣式。試試看使用值 `square` 把項目符號改為方形。

添加分類（class）
-----------

到目前為止，我們依元素的名稱來設定過樣式。當你希望同類型的元素在你的文件中都以相同的方式呈現，這種作法就行得通。但絕大多數的時候並非如此，所以你將需要一個能選擇某部分的元素、以避免更動到其它部分樣式的方法。最常見的作法，是在你要改變的 HTML 元素上設定 class（分類）並藉由它來定義要修改的範圍。

在你的 HTML 文件中，加上一個 class 屬性 (en-US)到第二個清單項目上。你的清單會變得如同底下這樣：

```html
<ul>
  <li>Item one</li>
  <li class="special">Item two</li>
  <li>Item <em>three</em></li>
</ul>
```

你可以使用英文句點 `.` 作開頭，在你的 CSS 中指定 `special` 分類來建立選擇器。加上底下這些到你的 CSS 檔案中：

```css
.special {
  color: orange;
  font-weight: bold;
}
```

存檔後重新整理網頁，看看有什麼樣的結果。

你可以將 `special` 分類套用到任何你希望與這個清單項目相同方式呈現的元素。舉例來說，你可能想要在段落中的 `<span>` 元素一樣以橘色粗體呈現。嘗試添加 `class` 屬性並設定為 `special` 到它上頭，然後重新載入頁面看看發生了什麼。

有些時候，你會看到選擇器中，將元素名稱與分類合在一起：

```css
li.special {
  color: orange;
  font-weight: bold;
}
```

這個語法表示「選擇任何帶有 special 分類屬性的 `li` 元素」。如果你改用了這個選擇器，樣式將不會被套用到具有一樣分類的 `<span>` 及其它元素上。要維持原本的呈現結果，你應該再增加選擇器把元素包含進規則當中：

```css
li.special,
span.special {
  color: orange;
  font-weight: bold;
}
```

你可以想像，有些分類的設定可能會被套用在多種元素上，而且你不希望當有新的元素要套用相同樣式的時候，得回頭修改選擇器。因此選擇器應該只指定分類（class）而不指定元素名稱，除非要為了這個分類下的特定元素設定樣式，確保不會套用到其它元素上。

依所在位置指定樣式
---------

有些時候，你會想要一些在不同位置的東西看起來有所差別。有許多選擇器可以作到，但現在我們只介紹其中兩種。在我們的文件中有兩個 `<em>` 元素，一個在段落中另一個在清單項目裡。要只選擇到被包含在 `<li>` 元素裡的 `<em>` 元素，我可以使用被稱**後裔連結器（descendant combinator）** 的語法，它是用空格（一到多個）連結兩個選擇器。

在你的樣式表加入以下規則。

```css
li em {
  color: rebeccapurple;
}
```

這個選擇器將會指向任何在 `<li>` 內部的 `<em>` 元素（後裔）。所以在範例裡中，你應該會發現在第三個清單項目裡的 `<em>` 變成紫色，但是在段落裡的則沒有改變。

另外有些時候，你可能會想嘗試對直接跟在標題後面的那個段落設定樣式。要作到就使用一個 `+` （**相鄰連結器 adjacent sibling combinator**）放在選擇器的中間。

試著加入面這個規則到

```css
h1 + p {
  font-size: 200%;
}
```

下面真實運作的例子中，包含了上面提到的兩個規則。試著將段落（p）裡的 span 改為紅色。藉由確認第一個段落裡的 span 變成紅色，但清單第一項裡的沒有改變，你將會知道所加入規則是否正確。

**備註：** 如你所見， CSS 提供我們一些方法來選擇元素，而目前為止我們只涉及到表面！我們將在課程後面的選擇器 (en-US)章節裡有更深入的探討。

依狀態指定樣式
-------

在這篇教學中我們要看的最後一種類型，是依照元素的狀態來設定樣式的能力。最直接的例子就是設定連結的樣式。當我們設定連結的樣式，我們的目標是 `<a>` (en-US) （錨點 anchor）元素。它具有不同的狀態來表示其連結：還沒被訪問過、訪問過、滑鼠停留其上方、由鍵盤取得焦點或是正被點擊中。你可以使用 CSS 來指定不同的狀態，下面的 CSS 設定連結（錨點元素）在未訪問過時為粉紅色，訪問過為綠色。

```css
a:link {
  color: pink;
}

a:visited {
  color: green;
}
```

你可以改變連結當滑鼠停留在上頭（或稱為懸停）時的樣子，假如要把連結的底線移除，可以用接下來的規則作到：

```css
a:hover {
  text-decoration: none;
}
```

在下面真實運作的例子裡，你可以為連結的不同狀態設定不同的樣式。我已經將上面例子中的規則加進去，而現在意識到粉紅色實在是太淺而且不好閱讀，何不換個更好的顏色？你能讓連結變成粗體嗎？

我們已經將連結在懸停狀態下的底線移除。你也可以移除連結在所有狀態下的底線。但是在實際運作的網站上，值得注意的是你要確保使用網站的人能分判哪些元素是連結。留著底線會是一個讓人意識到段落中的某些文字以可點擊的重要線索，這是人們已經習慣的行為。就像所有 CSS 規則一樣，你所作的更改可能會使得內容難被閱讀或使用，我們將儘可能將這些可能的問題點突顯出來。

**備註：** 你將會在 MDN 網站以及這些課程中經常看到可用性的觀點被提起。當我們討論可用性的時候，指的是為了讓我們網頁能被每個人了解及使用所必須的東西。

你的訪客可能使用帶滑鼠或觸控面板的電腦，或是有觸控螢幕的電話。又或著他們使用螢幕閱讀器，它會將網站的內容唸出來，或著他們需要更大的文體，或著只能使用鍵盤來瀏覽網站。

沒經過裝飾（瀏覽器預設樣式）的 HTML 內容，通常每個人都能使用（不見得最方便，但可以閱讀），當你開始設定樣式的時候，請不要讓讓它變得更難被使用，這一點很重要。

組合選擇器和連結器
---------

值得一提的是，你可以把多個選擇器和連結器組合在一起，例如：

```css
/\* selects any <span> that is inside a <p>, which is inside an <article> \*/
article p span {
  ...;
}

/\* selects any <p> that comes directly after a <ul>, which comes directly after an <h1> \*/
h1 + ul + p {
  ...;
}
```

你也可以使用不同種類的選擇器和連結器，試著把下面的規則加到你的 CSS 中：

```css
body h1 + p .special {
  color: yellow;
  background-color: black;
  padding: 5px;
}
```

這個規則會對任何在 `<body>` 內，跟在 `<h1>` 後 `<p>` 裡的 `special` 分類元素設定樣式！

在們提供的 HTML 文件中，樣式只會套用在 `<span class="special">` 元素上。

如果這現在看起來有很複雜，別擔心，隨著開始撰寫更多 CSS ，你很快就會掌握它了。

小結
--

在這個課程中，我們探討了一些使用 CSS 來設定樣式的方法。我們將在後續的課程中學習這些知識。不過，你現在已經知識怎麼調整文字的樣式，以不同的方式指定文件中想套用樣式的元素，並且在 MDN 文件中查找可以使用的屬性及支援的值。

在下一個課程中，我們將看看 CSS 的結構是如何。

* 前頁
* Overview: First steps
* 次頁  (en-US)


CSS 是什麼？ - 學習該如何開發 Web

CSS 是什麼？
========

* Overview: First steps
* 次頁

**CSS** （階層式樣式表）可以讓你建立出好看的網頁，但是它背後是怎麼運作的？在這個主題裡，藉由簡單的語法範例來說明 CSS 是什麼，以及含蓋這個語言的一些關鍵項目。

|  |  |
| --- | --- |
| 先備知識： | 基本的電腦概念、能夠安裝基本軟體，基本與各種檔案打交道的能力，以及 HTML 的基礎（由HTML 入門學到）。 |
| 學習目標： | 學到 CSS 是什麼。 |

在 HTML 入門單元中，我們含蓋了什麼是 HTML 以及它是如何被用來標記文件。這些文件能夠被瀏覽器讀取，標題的文字會看起來比一般段落更大，段落之間會換行並帶有間隔。連結會帶有顏色及底線，讓它與其它一般的文字有區別。你所看到的這些是瀏覽器的預設樣式，用來確保當作者沒有指定任何樣式的狀況下，仍有一些非常基本的樣式被套用上，好讓內容基本上能夠被閱讀（如下圖所示）。

![The default styles used by a browser](/zh-TW/docs/Learn/CSS/First_steps/What_is_CSS/html-example.png)

然而，如果所有的網站都長這個樣子，網路世界將是個很無趣的地方。你能使用 CSS 對 HTML 元件的樣子作更多控制，將這些標記以任何你喜歡的設計作調整。

看看下面的影片，了解更多關於瀏覽器預設樣式（可開 CC 字幕並自動翻譯為中文）。

CSS 是作什麼用的？
-----------

如同我們前面所提到的， CSS 是一種用來指定文件該用什麼方式呈現的語言，可以定義它們的樣式、布局…等。

**文件**通常指的是使用標記語言的文字檔案，HTML 是其中最常見的，但是你也可能遇到其它例如 SVG 或 XML (en-US) 的標記語言。

所謂的**呈現**文件，指的是將文件轉換為你的讀者可用的形式。像是 Firefox (en-US) 、 Chrome (en-US) 或 Edge (en-US) 這類的瀏灠器，是設計來將文件視覺化，再呈現電腦螢幕、投影機上或是由列表機列印出來。

**備註：** 瀏覽器有時候被稱為 user agent (en-US)（用戶終端），它基本上泛指電腦裡安裝的應用軟體。雖然並不是唯一，當我們在討論 CSS 的時候，用戶終端主要指的是瀏覽器。至於其它的用戶終端，有些能夠將 HTML 和 CSS 轉換為 PDF 再列印出來。

CSS 可以用在很基本文字樣式上頭，像是改變標題和連結的顏色 (en-US)及尺寸 (en-US)。它可以用在建立布局，像是將原本單欄的文字內容加入布局 (en-US)，劃分出主要的內容以及包含相關資訊的側邊欄。它甚至可以用在建立動畫 (en-US)效果。點進上面的連結，看看相關的例子。

CSS 語法
------

CSS 是一種基於規則的語言，你對網頁裡特定或一群元素指定一系列的規則。舉例來說：「我要讓頁面裡的主標題，以紅色且大號的字體呈現」。

下面這段語法是為了實現上面的需求，用簡單 CSS 規則示範：

```css
h1 {
  color: red;
  font-size: 5em;
}
```

樣式規則以一個選擇器開始。它*選擇*了你預計改變樣式的 HTML 元素。在這個例子中，我們要調整的是第一級的標題元素（`<h1>` (en-US)）。

接著我們跟著一組花括號 `{ }`，裡面是一到多個**聲明**，它的形式是一對一對**屬性名稱**和**屬性內容**的組合。每一對聲明會將我們選中元素的屬性，付予我們所想要設定的內容（或數值）。

在冒號（:）前面的是屬性的名稱，後面的是屬性內容（值）。CSS 的屬性 (en-US)依照其類型可以使用的值而有所不同。在我們的例子中，有個 `color` 屬性，它可以設定各種顏色值 (en-US)。而 `font-size` 屬性則可以採用不同尺寸單位 (en-US)的值。

一個 CSS 樣式表包含了許多這樣子的規則，一個接著一個。

```css
h1 {
  color: red;
  font-size: 5em;
}

p {
  color: black;
}
```

你將會發些有些值很容易學會，而另一些則需要查資料確認。MDN 上有各個屬性的獨立頁面讓你能查到屬性及其可使用的值，在你忘記了或是想知道其它可能用法的時候提供一個快速的路徑。

**備註：** 你可以在 MDN 的 CSS 參考資源 (en-US)找到所有的 CSS 屬性（以及其它 CSS 特性）頁面的連結。 另外，當你需要得到某個 CSS 特性的更多資訊，應該去習慣使用「mdn *特性名稱*」的方式在你喜歡搜尋引擊上搜尋。舉例來說，嘗試以「mdn color」和「mdn font-size」作關鍵字搜尋！

CSS 的各個主題（單元）
-------------

由於 CSS 有太多的項目可以進行設定，因此將這個語言依不同主題切分出單元。你將會在探索 MDN 的時候看到這些單元，並發現許多文章是圍繞著特定單元所組織的。舉例來說，你可以在 MDN 關於背景與邊框 (en-US)的單元裡，看到它的目的，以及其包含了哪些不同的屬性及特性。 你也將在文末發現到相關 *CSS 規範*的連結。

在這裡不用太煩惱 CSS 的架構，可以讓尋找資訊變得簡單一些。例如說，當你知道某個屬性可能用在其它類似的東西上，因此它們可能被放在同一個規範（單元）裡。

舉個特別的例子，讓我們回到背景與邊框的單元中，你可能會認為在邏輯上 `background-color` 和 `border-color` 會在同一個單元裡被定義。所以你猜對了。

### CSS 規範

所有網路標準技術（HTML、CSS、JavaScript…等）都被定義在稱為定義（specifications 或簡稱 specs）巨型文件中，由像是 W3C、WHATWG (en-US)、ECMA 或 Khronos (en-US) 之類的標準組織所發布，並且很精確地定義這些技術的行為方式。

CSS 並沒有什麼不同，它由 W3C 一個被稱為 CSS 工作組的團體所發展。這個團體是由對 CSS 感興趣的瀏覽器供應商和其它公司的代表所組成。還有其它被稱為*邀請專家*的人，與其它的成員組織無關，可以獨立的發聲。

新的 CSS 特性被 CSS 工作組所發展、定義。有時候是因為特定瀏覽器對某個功能有興趣，而有時候是因為網站設計師與開發人員的要求，還有一些時候是工作組本身定義的需求。CSS 正不斷發展，新的可用特性正在出現。然而，每個人很努力達到的 CSS 重要方針，是不要往會破壞舊網站的方向進行改變。一個在 2000 年建立的網站，使用了當時能用的 CSS 特性，應該到今天仍能夠在瀏覽器上使用。

作為一個 CSS 新手，你會發現 CSS 的規範不勝枚舉，它們是用來給開發用戶端程式的開發者實作功能所使用，而不是讓網站開發人員閱讀來了解 CSS。許多經驗的豐富的開發者，寧願看 MDN 上的文件或其它指引。然而，知道規範的存在還是有價值的，可以了解它們與你正使用的 CSS 之間的關係，瀏覽器支援（如下）以及相關定義。

瀏覽器支援
-----

被定義好的 CSS 特性，只有被一個或更多瀏覽器實作出來之後，才會在我們開發網頁上面有所幫助。這意味著已經編寫了程式，可以將 CSS 檔案裡的設定轉換為輸出在畫面上的結果。我們將在 CSS 工作原理中詳細介紹這個過程。一個（新）特性被所有瀏覽器同時實作出來是不常見的，通常會缺了幾個，CSS 某些部分你可以在某些瀏覽器上使用，然而在其它瀏覽器人則沒有作用。基於這個原因，確認特性被實作的狀況是有用的。在每個 MDN 的資源頁面上，你可以看到感興趣的屬性現在的狀態，因此你可以確定能不能把它使用在網站上。例如，參見 CSS `font-family` 屬性的瀏覽器相容性表 (en-US)。

下一步…
----

現在你已經知卜 CSS 是什麼，接著移動到 CSS 入門單元，你可以在這裡開始寫一些 CSS。

* Overview: First steps
* 次頁


多媒體：圖像跟影片 - 學習該如何開發 Web

多媒體：圖像跟影片
=========

媒體，換句話說就是圖像跟影片，平均占了網站超過 70%的下載流量。以下載的效能來考慮的話，減少媒體數量和檔案大小是一個簡單可以實現的目標。 這篇文章聚焦在優化圖像跟影片來改善網站的效能。

**備註：** 這是一篇進階的在 web 上優化多媒體的介紹，包含基本的原則還有技巧，想了更多的話，可以看 https://images.guide。

為什麼要優化你的多媒體
-----------

對於平均的網站, 51% 的頻寬消耗來自圖像, 而影像則是 25%，所以我們可以說處理和優化你的多媒體是很重要的。

你必須考慮流量的使用. 很多的人都是使用流量有限制的上網方案， 或是用多少付多少的上網方案，也就是根據用了多少 MB 來付費。這樣的問題不是只發生在新興國家的市場. 在 2018 年, 英國仍有 24% 在使用「用多少付多少」的方案。

你還需要考慮記憶體的問題，因為許多移動設備的 RAM 都有限。有一件很重要的事你必須要記住，下載的圖像是被儲存在記憶體裡的。

優化圖像傳送
------

儘管是頻寬的最大消耗者，但因為圖像是非同步載入的，所以訪問者可以在下載的同時看到頁面。因此，它們對感知性能的影響 (en-US)遠低於許多人的預期。 然而，圖像在內容中很常被使用，因此，重要的應該是讓訪問者盡快地看到它們，以獲得良好的體驗。

### 載入策略

對於大多數網站來說，最大改進之一是將不在視窗裡的圖像做 lazy-loading ，而不是在初始頁面載入時就全部下載下來，不管訪問者是否之後會往下滾動查看它們。 許多 JavaScript 函式庫都可以為你實現這個功能，例如說 lazysize，並且瀏覽器的供應商也正在著手原生的 `lazyload` 屬性，然而目前還處於實驗階段。

除了載入圖像的子集之外，接下來你還應該研究一下圖像本身的格式：

* 你是否正在載入最佳格式？ （見下文）
* 你載入的尺寸正確嗎？
* 你已經壓縮圖像了嗎？ (查看 ImageOptim)

#### 最佳格式

這非常值得用一個章節來介紹。因為為圖像選擇正確的格式可能很棘手。格式通常取決於圖像的用途：

* **Progressive JPEG**—不需要移動卷軸就能看到的網頁圖像。
* **WebP / JPEG-XR / JPEG2000**—往下移動卷軸才能看到網頁圖像。
* **PNG / WebP**—有透明度的圖像。
* **SVG**—向量圖, 圖示 (備註： SVGs 比 icon fonts 還要好得多！).

優先在不需要移動卷軸就能看到的網頁區域使用 Progressive JPEG 的原因是因為它們會逐漸地進行渲染（因此得名），這意味著用戶可以先看到低解析度的版本，然後再逐漸地變得清晰。而不是從頂部一行一行的以最高解析度來載入圖像，或甚至只有在完全下載好後才顯示。

#### 控制下載圖像的優先級別（和順序）

將最重要的圖像更早地呈現在訪問者面前，可以改善感知性能。

第一件要確認的事情是，你的前景圖像標籤 `<img />` 跟你定義在 CSS 裡 `background-image` 的背景圖像 — 前景圖像比背景圖像被賦予更高的優先級別。

其次，通過採用優先級別提示，你可以在圖像標籤中添加`importance` 屬性來進一步控制優先級別。輪播是一個在圖像上使用優先級別提示的例子，它的第一個圖像的優先級高於其他的圖像。

### 渲染策略

由於圖像是非同步載入的，並且會在第一次渲染後繼續載入，因此，如果在載入之前未定義尺寸的話，則可能會導致頁面內容的重新編排。比如說，當圖像載入時，文字內容可能會被擠壓到下面。所以， 很重要的是，定義 `width` 跟 `height` 或是新的 `intrinsicsize` 屬性。

對於任何的背景圖像，設置 `background-color` 的值非常重要，因為在圖像下載之前，它能讓上面的內容是能夠被閱讀的。

優化影像傳送
------

為了確保你不會將不必要的大文件發送給用戶，最好 壓縮所有你要傳輸的影像、優化`<source>` 順序、設定 autoplay、移除靜音影像的聲音、優化影像預載，還有考慮串流這部影像。

### 壓縮所有影像

大多數的影像壓縮工作都包含，比較影像裡的相鄰幀，並刪除原始幀和後續幀中相同的細節。你想同時壓縮影像並將其匯出為多種影像格式, 包含 WebM，MPEG-4/H.264，以及 Ogg/Theora.

你用來創建影像的軟體可能包含優化檔案大小的功能。如果沒有的話，那麼可以考慮幾種線上工具，像是之後篇章會討論的 FFmpeg，他可以協助編碼，解碼，轉換，以及呈現其他神奇的功能。

### 優化 `<source>` 順序

從最小到最大來排序影像的來源。例如說，給定三個壓縮影像，分別為 10 MB，12MB，以及 13MB, 把最小的擺在第一個，最大的擺在最後一格。

```html
<video width="400" height="300" controls="controls">
  <!-- WebM: 10 MB -->
  <source src="video.webm" type="video/webm" />
  <!-- MPEG-4/H.264: 12 MB -->
  <source src="video.mp4" type="video/mp4" />
  <!-- Ogg/Theora: 13 MB -->
  <source src="video.ogv" type="video/ogv" />
</video>
```

就順序的角度來說，瀏覽器會下載它看到的第一個影像來源，因此先讓他載入一個較小的影像。就＂最小＂的角度來說，要確認你的壓縮影響仍然看起來不會太糟。有幾個演算法可能會讓你的影像看起來像是個會動的 gif 。雖然 128 Kb 的影像可能在用戶體驗上會比 10 MB 的影像好，可是把看起來像是 gif 粒狀的影像放在內容後面，也可能會對你的品牌產生負面影響。

查看 CanIUse.com 來確認現今瀏覽器對於影像以及不同媒體格式的支持。

### 影像自動播放

為了確保循環播放背景影像，你需要向影像標籤裡添加多個屬性： `autoplay`, `muted`, 以及 `playsinline.`

```html
<video
 autoplay=""
 loop=""
 muted="true"
 playsinline=""
 src="backgroundvideo.mp4"></video>
```

雖然屬性 `loop` 和 `autoplay` 在對於影像的循環跟自動播放很合理，可是 `muted` 屬性在行動裝置的瀏覽器裡是必須添加的。

`Playsinline` 在行動裝置裡的 Safari 是必須的，他讓影像可以在不需要全螢幕的模式下被播放。

### 移除靜音影像的聲音

如果你有一個 `hero-video` 或是其他靜音影片, 請將聲音從影像中移除。

```html
<video autoplay="" loop="" muted="true" playsinline="" id="hero-video">
  <source src="banner\_video.webm" type='video/webm; codecs="vp8, vorbis"' />
  <source src="web\_banner.mp4" type="video/mp4" />
</video>
```

這段 `hero-video` 代碼, 常出現在許多研討會網站以及公司的主頁， 它是個包括自動播放，循環播放和靜音的影像。它不包含任何控制選單，因此無法收聽聲音。通常它是沒有聲音的，但仍然存在音軌，因此它仍會消耗頻寬。然而，我們沒有理由將頻寬分給靜音影像的聲音。移除聲音可以節省 20% 的頻寬。這代表，如果你的影像是 10 MB，則節省了 2 MB。

根據你的影像創作軟體，你也許可以在匯出和壓縮過程中刪除聲音。 如果沒有，那麼有一個免費的工具 FFmpeg ，可以使用以下指令來為你完成此任務

```bash
ffmpeg -i original.mp4 -an -c:v copy audioFreeVersion.mp4
```

`FFmpeg` 稱自己為＂用於記錄，轉換和串流音頻和影像的完整，跨平台解決方案＂。

### 影像預載

preload 屬性具有 3 個可用選項：`auto`|`metadata`|`none`。預設選項是 `metadata`.

將選項更改為 `auto` 會告訴瀏覽器自動下載整個影像。僅有在極有可能播放時才應該執行此操作，否則會浪費大量的頻寬。

`preload="metadata"` 最多可讓 3％ 的影像在頁面加載時被下載。 然後對於較大的影像來說，這可能或是大量的頻寬。

`preload="none"` 不會在播放之前下載任何的影像。 這會延遲影像的啟動時間，但能夠為播放可能性較低的影像保存大量的頻寬。

### 考慮串流

串流影像讓適當的影像大小和頻寬 (根據網路速度) 被傳遞給用戶。 就像使用響應式圖像一樣，正確大小的影像將被傳遞到瀏覽器，從而確保用戶的快速影像啟動、低緩衝以及優化的播放。


Web 安全

Web 安全
======

確保你的網站或開放式 Web 應用程式的安全相當重要。即使是程式中的小臭蟲也可能導致私敏資訊洩露，而有心人士無時無刻都在嘗試竊取資料。這裡所列出的網路安全方面的文章提供了相關資訊，協助你保護你的網站以及程式防範網路攻擊和資料竊取。

不安全的密碼提供 HTTP 的登入表單非常危險，因為目前有很多已知的用戶密碼擷取手法。竊聽者可以透過側錄該網路或修改傳輸頁面進行大量的惡意攻擊，並直接竊取用戶憑證或密碼。本頁將詳細說明 Firefox 用以警示用戶與開發者有關不安全的密碼及密碼竊取風險的安全機制。

同源政策 (Same-origin policy)同源政策限制了程式碼和不同網域資源間的互動。

弱簽章演算法在簽署憑證時，雜湊演算法的完整性是非常重要的一環。雜湊演算法的漏洞可能導致攻擊者獲取假造的憑證。隨著科技發展出現更多可行的攻擊新手法，並不建議繼續使用舊的演算法，且這些演算法最終該被移除。

混合內容當使用者以 HTTPS 瀏覽網站時，他們與伺服器之間的連線就會以 TLS 加密，以防受到竊聽或中間人攻擊。一個含有 HTTP 明文內容的 HTTPS 頁面稱為**混合內容（mixed content）**。這種頁面只有部份加密，沒有加密的內容，易於遭到竊聽和中間人攻擊。這會令網頁不安全。


網路性能

網路性能
====

Web 性能是負載時間和運行時的客觀度量和用戶體驗。Web 性能是指站點加載、交互和回應所需的時間，以及用戶交互過程中內容的流暢程度——滾動是否流暢?按鈕可點擊嗎?彈出窗口加載和顯示的速度是否很快?它們的動畫是否流暢?Web 性能包括加載時間、每秒幀數和交互時間等客觀度量，以及加載內容所需時間的主觀體驗。

一個站點的回應時間越長，就會有越多的用戶放棄這個站點。重要的是最小化加載和回應時間，並添加額外的特性來隱藏延遲，使體驗盡可能快地可用並具有交互性，同時非同步地加載體驗的較長尾部分。

有一些工具、api 和最佳實踐可以幫助我們度量和改進 web 性能。我們將在本節介紹它們:

在這一節中
-----

選定的教程
-----

MDN 網路性能學習領域包含現代的、最新的教程，涵蓋性能要點:

什麼是網路性能

本文首先介紹了性能實際上是什麼—包括在考慮性能時需要考慮的工具、指標、api、網路和人員組，以及如何將性能作為 web 開發工作流的一部分。

網路性能基本知識

除了 HTML、CSS、JavaScript 和媒體檔的前端組件外，還有一些特性可以使應用程式變慢，也有一些特性可以使應用程式主觀上和客觀上變得更快。與 web 性能相關的 api、開發工具、最佳實踐和不良實踐有很多。在這裏，我們將介紹許多基本級別的特性，並提供到更深層次的鏈接，以提高每個主題的性能。

用戶如何看待性能?

比你的網站在幾毫秒內有多快更重要的是你的用戶認為你的網站有多快。頁面加載時間、空閒時間、對用戶交互的回應以及滾動和其他動畫的流暢性都會影響這些感知。在本文中，我們將討論各種加載指標、動畫和回應性指標，以及改進用戶感知的最佳實踐(如果不是實際計時本身)。

多媒體:圖像和視頻

通常，媒體優化是 web 性能的最低掛果。根據每個用戶代理的功能、大小和像素密度提供不同的媒體檔是可能的。額外的技巧，比如從背景圖像中刪除音軌，可以進一步提高性能。在本文中，我們將討論視頻、音頻和圖像內容對性能的影響，以及確保影響盡可能小的方法。

CSS 性能特性

對於改進性能，CSS 可能不是很重要的優化重點，但是有一些 CSS 特性對性能的影響更大。在本文中，我們將介紹一些影響性能的 CSS 屬性，並介紹一些處理樣式的方法，以確保不會對性能造成負面影響。

使用性能 api
--------

性能的 API

本指南描述了如何使用高解析度時間標準中定義的性能介面。

資源時機 API

資源加載和這些資源的加載計時，包括管理資源緩衝區和處理 CORS

表演時間

性能時間軸標準定義了對性能介面的擴展，以支持應用程式中的客戶端延遲測量。這些介面可以一起用來幫助確定應用程式的性能瓶頸。

用戶時間 API

使用用戶計時 API 的「標記」和「度量」條目類型來創建特定於應用程式的時間戳——這是流覽器性能時間表的一部分。

幀定時 API

PerformanceFrameTiming 介面提供有關流覽器事件迴圈的幀計時數據。

燈塔 API

信標介面將非同步和非阻塞請求調度到 web 伺服器。

十字路口觀察者 API

學習使用交集觀察者 API 對元素的可見性進行計時，並在感興趣的元素變得可見時得到非同步通知。

其他文檔
----

開發工具性能特性

本節提供有關如何使用和理解開發人員工具(包括瀑布圖、調用樹圖和火焰圖)中的性能特性的資訊。

理解延遲

延遲是指從流覽器請求資源到流覽器返回請求的資源的第一個位元組之間所花費的時間。本文將解釋延遲是什麼、它如何影響性能、如何度量延遲以及如何減少延遲。

術語表
---

* Beacon (en-US)
* Brotli compression (en-US)
* Client hints (en-US)
* Code splitting (en-US)
* CSSOM
* Domain sharding (en-US)
* Effective connection type (en-US)
* First contentful paint
* First CPU idle
* First input delay
* First interactive (en-US)
* First meaningful paint (en-US)
* First paint (en-US)
* HTTP
* HTTP/2 (en-US)
* Jank
* Latency (en-US)
* Lazy load (en-US)
* Long task (en-US)
* Lossless compression (en-US)
* Lossy compression (en-US)
* Main thread (en-US)
* Minification (en-US)
* Network throttling (en-US)
* Packet (en-US)
* Page load time (en-US)
* Page prediction (en-US)
* Parse (en-US)
* Perceived performance (en-US)
* Prefetch
* Prerender (en-US)
* QUIC (en-US)
* RAIL (en-US)
* Real User Monitoring (en-US)
* Resource Timing (en-US)
* Round Trip Time (RTT) (en-US)
* Server Timing (en-US)
* Speculative parsing (en-US)
* Speed index (en-US)
* SSL (en-US)
* Synthetic monitoring (en-US)
* TCP handshake (en-US)
* TCP slow start (en-US)
* Time to first byte (en-US)
* Time to interactive (en-US)
* TLS (en-US)
* Transmission Control Protocol (TCP) (en-US)
* Tree shaking (en-US)
* Web performance (en-US)
檔有待書寫
-----

JavaScript 性能最佳實踐

如果使用得當，JavaScript 可以提供互動式的、沉浸式的 web 體驗……或者它會嚴重影響下載時間、渲染時間、應用程式性能、電池壽命和用戶體驗。本文概述了一些 JavaScript 最佳實踐，這些實踐可以確保即使是複雜內容的性能也是最高的。

手機的性能

隨著移動設備上的 web 訪問變得如此流行，所有的移動平臺都有成熟的 web 流覽器，但是帶寬、CPU 和電池壽命可能有限，因此考慮在這些平臺上 web 內容的性能非常重要。本文還討論了特定於移動設備的性能注意事項。

理解帶寬

帶寬是每秒可以發送的以兆(Mb)或千比特(Kb)為單位的數據量。本文解釋了帶寬在富媒體 internet 應用程式中的作用，如何度量它，以及如何優化應用程式以最大限度地利用可用帶寬。

HTTP / 2 和你

傳輸層(即 HTTP)對 web 的功能至關重要，直到最近才以 HTTP/2 的形式出現重大更新。與它的前輩相比，HTTP/2 提供了許多開箱即用的性能改進和優勢，但它也改變了環境。在本文中，你將瞭解 HTTP/2 為你做了什麼，以及如何對應用程式進行調優，使其更進一步。

TLS 在性能中的作用

在創建安全的用戶體驗時，tlls(我們傾向於稱之為 HTTPS)是至關重要的。雖然硬體已經減少了 TLS 對伺服器性能的負面影響，但它仍然占了我們等待流覽器連接到伺服器所用時間的很大一部分。本文解釋了 TLS 握手過程，並提供了一些減少這種時間的技巧，如 OCSP 裝訂、HSTS 預加載頭，以及資源提示在掩蓋第三方 TLS 延遲方面的潛在作用。

讀性能圖表

開發人員工具提供有關性能、記憶體和網路請求的資訊。瞭解如何在流覽器開發人員工具中讀取瀑布圖、調用樹、跟蹤、火焰圖和分配，將有助於你在其他性能工具中理解瀑布圖和火焰圖。

分析 JavaScript 包

毫無疑問，JavaScript 是現代 web 開發的重要組成部分。雖然你應該始終努力減少應用程式中使用的 JavaScript 的數量，但是很難知道從哪里開始。在本指南中，我們將向你展示如何分析應用程式的腳本包，以便你瞭解自己在使用什麼，以及如何檢測應用程式是否包含包之間的重複腳本。

延遲加載

在初始頁面加載時加載所有 web 應用程式資產並不總是必要的。延遲加載是將頁面上的資產(如腳本、圖像等)的加載延遲到以後的某個時間點。當這些資產確實需要的時候。

使用 import()延遲加載 JavaScript

術語「延遲加載」通常指加載時不需要的資產的延遲加載技術，例如僅在圖像滾動到視圖中時才加載折疊下麵的圖像。現在有了加載 JavaScript 的本地特性!在本指南中，我們將討論 dynamic import()語句，這是一個較新的流覽器特性，可以根據需要加載 JavaScript 模組。

使用資源提示控制資源交付

當涉及到資源優先順序和交付時，流覽器通常比我們更清楚，但是他們離 clairyovant 還很遠。本地流覽器特性使我們能夠在流覽器連接到另一個伺服器時提示它，或者在流覽器知道它需要資源之前預加載資源。如果使用得當，這可以讓快速體驗看起來更快。在本文中，我們將介紹一些本地流覽器特性，如 rel=preconnect、rel=dn -prefetch、rel=prefetch 和 rel=preload，以及如何充分利用它們。

績效預算

市場行銷、設計和銷售需求，以及開發人員的經驗，通常是廣告膨脹、第三方腳本和其他會降低 web 性能的特性。為了幫助設置優先順序，最好設置一個性能預算:一組在開發階段不能超過的限制。在本文中，我們將討論如何創建和堅持性能預算。

網路性能檢查表

在開發帶有如何實現每個特性的教程鏈接的應用程式時，需要考慮的特性性能檢查表，包括服務人員、診斷性能問題、字體加載最佳實踐、客戶端提示、創建性能動畫等。

手機性能檢查表

影響移動網路用戶在手持電池操作設備上的性能考慮的簡明清單。

### 應用程式的性能

性能的基礎

對 Web 應用程式性能的廣泛概述，它是什麼，流覽器如何幫助改進它，以及你可以使用什麼工具和流程來測試和進一步改進它。

優化啟動性能

在編寫新應用程式和將應用程式從其他平臺移植到 Web 上時，幫助你提高啟動性能的技巧和建議。

使用內置的剖析器進行剖析

瞭解如何使用 Firefox 的內置分析器分析應用程式性能。

CSS 和 JavaScript 動畫性能

動畫是一個愉快的用戶體驗的關鍵。本文討論了 CSS 和基於 javascript 的動畫之間的性能差異

See also
--------

HTML

* The `<picture>` Element
* The `<video>` Element (en-US)
* The `<source>` Element (en-US)
* The `<img> srcset` attribute (en-US)
    + Responsive images (en-US)
* Preloading content with `rel="preload"` (en-US) - https://w3c.github.io/preload/

CSS

* will-change (en-US)
* GPU v CPU
* Measuring layout
* Font-loading best practices

JavaScript

* DOMContentLoaded (en-US)
* Garbage collection (en-US)
* requestAnimationFrame

APIs

* Performance API (en-US)
* Navigation Timing API (en-US)
* Media Capabilities API (en-US)
* Network Information API
* PerformanceNavigationTiming (en-US)
* Battery Status API
* Navigator.deviceMemory (en-US)
* Intersection Observer (en-US)
* Using the User Timing AP (en-US)I
* Long Tasks API (en-US)
* High Resolution Timing API (en-US) (https://w3c.github.io/hr-time/)
* Resource Timing API (en-US)
* Page Visibility (en-US)
* Cooperative Scheduling of Background Tasks API (en-US)
    + requestIdleCallback() (en-US)
* Beacon API (en-US)
* Resource Hints - dns-prefetch (en-US), preconnect, prefetch, and prerender
* Fetchevent.navigationPreload (en-US)
* Performance Server Timing API (en-US)

Headers

* Content-encoding (en-US)
* HTTP/2
* gZip (en-US)
* Client Hints

Tools

* Performance in Firefox Developer Tools
* Flame charts
* The Network panel
* Waterfall charts

Additional Metrics

* Speed Index and Perceptual Speed Index

Best Practices

* Using Service Workers (en-US)
* Using Web Workers
    + Web Workers API (en-US)
* PWA (en-US)
* Caching
* Content Delivery Networks (CDN)


HTML：超文本標記語言

HTML：超文本標記語言
============

**HTML**（HyperText Markup Language，超文本標記語言）是打造網頁的基石。它表述並定義網頁的*內容*。伴隨 HTML 而來的技術還有描述網頁外觀（CSS）及功能性的程式語言（JavaScript）。

「超文本」（HyperText）是指從某個網頁連到其他網頁的連結，不管它連結到站內抑或站外。連結連結 Web 的核心概念。藉由撰寫與上載網頁到網際網路中，你就積極參與了全球資訊網（World Wide Web)。

HTML 使用「標記」（markup）來詮釋文字、圖像、或是其他能在瀏覽器裡面顯示的內容。HTML 標記還包括一些特殊「元素」（element），例如：`<head>`、`<title>`、`<body>` (en-US)、`<header>` (en-US)、`<footer>` (en-US)、`<article>` (en-US)、`<section>` (en-US)、`<p>` (en-US)、`<div>`、`<span>` (en-US)、`<img>` (en-US)……等等。

HTML 文件中的元素和其他內容文字不同的地方，在於元素名稱本身用「<」與「>」包圍，稱作「標籤」。HTML 標籤不分英文大小寫。也就是說，它們可以寫成英文全大寫、全小寫、或是混在一起。像是 **<title>** 能寫成 <Title>,<TiTlE>……等等。

以下這些文章將幫助你理解 HTML。

* HTML 介紹
 如果是網站開發的新手，請先閱讀我們的 HTML 基礎文章以理解 HTML 是什麼還有它怎麼使用。
* HTML 教學
 有關如何使用 HTML、教學、完整範例，請參考我們的 HTML 學習專區。
* HTML 參考資料
 在我們廣泛的 HTML 參考資料章節，你可以找到構成 HTML 每個元素和屬性的細節。.
初學者教學
-----

我們的HTML 學習專區提供數個從頭開始的 HTML 教學單元：你不需要任何先備知識。

HTML 介紹

本單元會為你打下基礎，帶你熟悉重要概念和語法，像是如何把 HTML 套用到文本、如何建立超連結、還有如何使用 HTML 構建網頁。

多媒體與嵌入

本模塊探究如何使用 HTML 在你的網頁裡置入多媒體，包含多種不同載入圖片的方式，如何嵌入影音，甚至是另外一整個網頁。

HTML 表格

要以簡單易懂的方式將表格式的資訊呈現在網頁上會是一件挑戰。本模組涵蓋了基本的表格使用與更複雜的功能，例如標題和總結。

HTML 表單

表單是網頁相當重要的部分，能夠提供與網頁互動時所需的各式的功能性。例如：註冊和登入、發送回饋意見、購買產品以及更多實用的功能。這個單元將帶領你建立網頁端的表單功能。

用 HTML 解決常見問題

提供部分內容註釋連結。 當你建立一個網頁時，如何解決 HTML 中常見問題，例如 : 處理標題、增加圖片或影片、強調內文、建立基本表單等。.

進階部份
----

CORS 圖像 (en-US)

`當結合了一個適合的`CORS，`crossorigin` (en-US) 屬性允許 `<img>` (en-US) 元素定義的圖像被從一個地方載入，並被使用於 `<canvas>`，即便載入的地方是原處也一樣。

設定 CORS 屬性 (en-US)

有些 HTML 元素可以支援 CORS,像 `<img>` (en-US) 或者 `<video>` (en-US),有著 `crossorigin` (`crossOrigin` property)的屬性, 讓你能直接使用 CORS 的元素。

管理 HTML 中的焦點 (en-US)

The `activeElement` (en-US) DOM attribute and the `hasFocus()` (en-US) DOM method help you track and control a user's interactions with elements on a web page.

使用 application cache

Application caching lets web-based applications run offline. You can use the **Application Cache** (*AppCache*) interface to specify resources that the browser should cache and make available to offline users. Applications that are cached load and work correctly even if users click the refresh button when they are offline.

使用 rel="preload" 來預載內容 (en-US)

The `preload` value of the `<link>` (en-US) element's `rel` (en-US) attribute allows you to write declarative fetch requests in your HTML `<head>`, specifying resources that your pages will need very soon after loading, which you therefore want to start preloading early in the lifecycle of a page load, before the browser's main rendering machinery kicks in. This ensures that they are made available earlier and are less likely to block the page's first render, leading to performance improvements. This article provides a basic guide to how `preload` works.

參考資料
----

HTML 參考資料

HTML 包含**元素**，每個元素都可以被幾個**屬性**修飾。HTML 文件透過連結 (en-US)把彼此連結在一起。

HTML 元素參考 (en-US)

瀏覽 HTML 所有元素的清單。

HTML 屬性參考

HTML 元素都有**屬性**。這些額外屬性能透過數種方法設定元素、調整行為。

全域屬性 (en-US)

HTML 元素 (en-US)能指定全域屬性，*就算它不是標準元素*。也就是說，即使是與 HTML5 標準不相容的非標準元素，依舊允許全域屬性。

行內元素 (en-US)與塊級元素

HTML 元素通常為**行內**或**區塊**。行內元素佔據由標籤所定義的其餘空白位置，區塊元素則占據母元素的所有空白位置。

超連結類型 (en-US)

在 HTML 中有多種超連結類型能夠使用，並解定義兩個頁面間的關係，超連結元素包含了`<a>` (en-US), `<area>` (en-US), `<link>` (en-US)

HTML audio 及 video 元素對媒體的支援程度 (en-US)

`<audio>` (en-US) 及 `<video>` (en-US) 元素允許播放聲音和影像檔。這些元素提供了瀏覽器替代 Adobe Flash 和其它類似外掛功能的方案。

HTML 內容種類 (en-US)

HTML 由多個不同類別的內容組合, 每種內容在特殊情況下在前後關係中有效，而在其它前後關系中無效。相似地，每一組內容，也指定了可以被包含在一起的類別，以及可以或不可以在其中使用的元素。此篇提供了這些類別的指南。

怪異模式與標準模式

有關怪異模式與標準模式的歷史。

相關焦點
----

使用 CSS 把色彩套用到 HTML 元素 (en-US)

本文章概括了把 CSS 加到 HTML 內容的方法，列出 HTML 文件的哪些部份可以套用色彩、而 CSS 有哪些屬性搬到這種事。裡面有示範、色彩選擇器的連結......等等。


SVG

SVG
===

**可縮放向量圖形**（Scalable Vector Graphics，SVG）是用於描述二維向量圖形的 XML (en-US) 標記語言。基本上，SVG 用於圖形，而
 XHTML 用於文字。

 SVG 類似 Adobe 專有的 Flash 技術，SVG 與 Flash 兩者最大的分別在於 SVG 為 W3C 所推薦 (即標準)，並以
 XML 為基礎，而非封閉的二進制格式。SVG 設計為與其他 W3C 標準 (如 CSS、DOM 及 SMIL) 一同運作。

為何使用 SVG？
---------

### 更好的圖形格式

SVG 是一種向量圖形格式。向量圖形可縮可放，圖形完全不會失真，為像素圖形所不能及。

* Lion, Butterfy & Tiger
* SVG 藝術圖庫
* 更多範例 (SVG 範例 croczilla.com, carto.net)
### 增強 HTML 內容的表現

SVG 可和 HTML、CSS 及 JavaScript 一同運作。使用 SVG 增強普通 HTML 頁面或 web 應用程式。

* Google Maps (路徑圖) & Docs (試算表繪圖)
* SVG 泡沫選單
工具
--

* SVG Test Suite
* SVG Validator
動畫和互動
-----

如同 HTML，SVG 也有一個 DOM、事件，並且可由 JavaScript 存取。這可讓開發者建立豐富的動畫和互動式圖形。

* Firefox extension (Grafox) to add a subset of SMIL animation support
* Interactive photos manipulation
* HTML transformations using
 SVG's `foreignObject`
* Animated art
繪圖、圖表、遊戲 & 3D 實驗
----------------

只需少許 SVG 即可增強網頁內容，這裡有一些重量級 SVG 用法的範例。

* Tetris, Yet Another SVG Tetris & Connect 4
* Find the State game
* US popuplation map & Germany
population chart
* 3D box & 3D boxes
* SVG+DOM based drawing tool
關聯主題
----

* XML (en-US), Canvas


Web App Manifest

Web App Manifest
================

**實驗性質:** **這是一個實驗中的功能 (en-US)**
此功能在某些瀏覽器尚在開發中，請參考兼容表格以得到不同瀏覽器用的前輟。

Web App manifest 是一個 JSON 格式的文件，它提供了應用程式相關的資訊（像是名稱、作者、圖示、描述）。 manifest 的功用是將 Web 應用程式安裝到設備的主畫面，為使用者提供更快速的訪問和更豐富的體驗。

Web App manifests 是屬於 progressive web apps 的 Web 技術系列的一部分， 這是一個能不透過 App 商店就能被安裝到設備主畫面的 Web 應用程式，伴隨著其他功能，比如離線使用和通知的接收發送。

部署 manifest
-----------

Web app manifest 的部署只需要在 HTML 文件中的 head 區域加上 link 元素 (en-US)即可。

```html
<link rel="manifest" href="/manifest.json" />
```

manifest 範例
-----------

```json
{
  "name": "HackerWeb",
  "short\_name": "HackerWeb",
  "start\_url": ".",
  "display": "standalone",
  "background\_color": "#fff",
  "description": "A simply readable Hacker News app.",
  "icons": [
    {
      "src": "images/touch/homescreen48.png",
      "sizes": "48x48",
      "type": "image/png"
    },
    {
      "src": "images/touch/homescreen72.png",
      "sizes": "72x72",
      "type": "image/png"
    },
    {
      "src": "images/touch/homescreen96.png",
      "sizes": "96x96",
      "type": "image/png"
    },
    {
      "src": "images/touch/homescreen144.png",
      "sizes": "144x144",
      "type": "image/png"
    },
    {
      "src": "images/touch/homescreen168.png",
      "sizes": "168x168",
      "type": "image/png"
    },
    {
      "src": "images/touch/homescreen192.png",
      "sizes": "192x192",
      "type": "image/png"
    }
  ],
  "related\_applications": [
    {
      "platform": "web"
    },
    {
      "platform": "play",
      "url": "https://play.google.com/store/apps/details?id=cheeaun.hackerweb"
    }
  ]
}
```

成員
--

### `background_color`

定義 Web 應用程式預期的背景顏色。 其值雖然與應用程式樣式表中的值有所重複，但是在 manifest 已可用而樣式表載入之前，瀏覽器可使用該值來繪製 Web 應用程式的背景色。 這能在 Web 應用程式的啟動和載入內容之間創建平順的過場。

```json
"background\_color": "red"
```

**備註：** `background_color` 成員僅用於改善 Web 應用程式載入時體驗，並且當 Web 應用程式的樣式表可用時，使用者代理不能再將其用作背景顏色。

### `description`

提供一段描述來形容這個 Web 應用程式的作用是什麼。

```json
"description": "The app that helps you find the best food in town!"
```

### `dir`

指定一個對於 `name`、`short_name`、`description` 等成員的主要書寫方向。 包含 `lang` 成員，其能夠為右至左書寫的語言提供幫助。

```json
"dir": "rtl",
"lang": "ar",
"short\_name": "أنا من التطبيق!"
```

其值可以是下列的其中之一：

* `ltr`（左至右）
* `rtl`（右至左）
* `auto`（讓瀏覽器根據 Unicode 雙向演算法對書寫方向做出最佳的猜測）

**備註：** 當省略其值時，預設為 `auto`。

### `display`

定義開發者喜好的 Web 應用程式顯示模式。

```json
"display": "standalone"
```

有效值：

| 顯示模式 | 描述 | Fallback 顯示模式 |
| --- | --- | --- |
| `fullscreen` | 所有可用的顯示區域都被填充並且不顯示使用者代理 chrome 。 | `standalone` |
| `standalone` | 這看起來和感覺上就像是獨立應用程式一樣，包括有不同的執行視窗、有圖示的應用程式啟動器 ... 等等。 在這模式下，使用者代理將不包含控制導覽列，但能包含其他的 UI 元素，像是狀態列。 | `minimal-ui` |
| `minimal-ui` | 這看起來和感覺上就像是獨立應用程式一樣，但將有控制導覽列 UI 元素的最小設置，元素會因瀏覽器而不同。 | `browser` |
| `browser` | 預設值。 應用程式如常規般地被開啟於瀏覽器分頁或新視窗，依瀏覽器與平台而不同。 | (None) |

**備註：** 你能根據顯示模式選擇性地將 CSS display-mode media 功能運用於你的應用程式，這可以提供一致的使用者體驗不管是由網址開啟網站或者由桌面圖示啟動。

### `icons`

指定一個陣列，其包含可以在不同上下文情況當中做為應用程式圖示的物件。 舉例來說，其可能被用作代表該 web 應用程式出現在其他應用程式的列表當中，或是作業系統的任務切換器 task switcher 與系統偏好設定 system preferences。

```json
"icons": [
  {
    "src": "icon/lowres.webp",
    "sizes": "48x48",
    "type": "image/webp"
  },
  {
    "src": "icon/lowres",
    "sizes": "48x48"
  },
  {
    "src": "icon/hd\_hi.ico",
    "sizes": "72x72 96x96 128x128 256x256"
  },
  {
    "src": "icon/hd\_hi.svg",
    "sizes": "72x72"
  }
]
```

圖示物件能包含下列的值：

| 成員 | 描述 |
| --- | --- |
| `sizes` | 以空白間隔各圖片尺吋的一個字串。 |
| `src` | 圖檔的路徑。 若 src 為相對路徑，則網址將以 manifest 的位置為基準。 |
| `type` | 關於圖片媒體類型的提示。 其使用目的是允許使用者代理快速地去忽略其不支持的媒體類型的圖片。 |

### `lang`

指定一個對於 `name`、`short_name` 等成員的主要語言。 其值限單一種語言標籤的字串。

```json
"lang": "en-US"
```

### `name`

提供一個人類可讀的應用程式名稱，其值是對使用者顯示的，可能在其他應用程式的列表之中，或是做為圖示的標籤。

```json
"name": "Google I/O 2017"
```

### `orientation`

定義預設的顯示方向，其將作用在 all the web application's top level browsing contexts.

```json
"orientation": "portrait-primary"
```

其值可以是下列的其中之一：

* `any`
* `natural`
* `landscape`
* `landscape-primary`
* `landscape-secondary`
* `portrait`
* `portrait-primary`
* `portrait-secondary`
### `prefer_related_applications`

提供一個布林值告訴使用者代理是否要在 Web 應用程式上去推薦一個相關的應用程式（見下文）給使用者。 這應該只被使用在當原生應用程式提供了 Web 應用程式無法替代其功用的時候。

```json
"prefer\_related\_applications": false
```

**備註：** 當省略其值時，預設為 `false。`

### `related_applications`

指定一個包含「應用程式物件」的陣列，其物件用以表示一個能被底層平台安裝或訪問的原生應用程式 — 例如能由 Google Play 商店獲取的原生 Android 應用程式。 這是一個可選的替代方案，如同原生應用程式版的 Web 應用程式一般去提供相似或等同的功能。

```json
"related\_applications": [
  {
    "platform": "play",
    "url": "https://play.google.com/store/apps/details?id=com.example.app1",
    "id": "com.example.app1"
  }, {
    "platform": "itunes",
    "url": "https://itunes.apple.com/app/example-app1/id123456789"
  }]
```

應用程式物件能包含下列的值：

| 成員 | 描述 |
| --- | --- |
| `platform` | 可以找到該應用程式的平台。 |
| `url` | 可以找到該應用程式的網址。 |
| `id` | 在特定平台上代表該應用程式的 ID。 |

### `scope`

Defines the navigation scope of this web application's application context. This basically restricts what web pages can be viewed while the manifest is applied. If the user navigates the application outside the scope, it returns to being a normal web page.

If the scope is a relative URL, the base URL will be the URL of the manifest.

```json
"scope": "/myapp/"
```

### `short_name`

提供一個人類可讀且較簡短的應用程式名稱，其值將被使用在較不足以去顯示 Web 應用程式全名的空間。

```json
"short\_name": "I/O 2017"
```

### `start_url`

指定一個當使用者由裝置上啟動應用程式時所開啟的網址。 若使用相對路徑，則網址將以 manifest 的位置為基準。

```json
"start\_url": "./?utm\_source=web\_app\_manifest"
```

### `theme_color`

定義一個應用程式預設的主題顏色。 其值會被作業系統在某些時候運用來顯示應用程式（如： Android 的任務切換器 task switcher 就以主題顏色圍繞著應用程式）。

```json
"theme\_color": "aliceblue"
```

啟動畫面（Splash screens）
--------------------

在 Chrome 47 或較新版本，啟動畫面 splash screen 會被使用在當 Web 應用程式由主畫面開啟的時後。 這啟動畫面是依 Web App manifest 的屬性自動產生的，明確來說是由 `name`、`background_color` 、 `icons` 陣列中較接近裝置的 128dpi 的圖示。

Mime 類型
-------

Manifests 應該被使用 `application/manifest+json` 的 MIME 類型。不過這是可選的。

瀏覽器相容性
------

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


HTTP

HTTP
====

***超文本傳輸協定 (HTTP)*** 是一種用來傳輸超媒體文件 (像是 HTML 文件) 的應用層協定，被設計來讓瀏覽器和伺服器進行溝通，但也可做其他用途。HTTP 遵循標準客戶端—伺服器模式，由客戶端連線以發送請求，然後等待接收回應。HTTP 是一種無狀態協定，意思是伺服器不會保存任兩個請求間的任何資料 (狀態)。儘管作為 TCP/IP 的應用層，HTTP 亦可應用於其他可靠的傳輸層 (例如 UDP)，只要不會無聲無息地遺失訊息即可。

教學
--

學習如何使用 HTTP 的指南和教程。

HTTP 的概觀 (en-US)

基本特性：它能做什麼與它的用途

HTTP Cache

Cache 對網站速度很重要。 此文章描敘不同的方法使用 HTTP Header 控制它。

HTTP Cookies

RFC 6265 定義了 cookies 的工作方式，當 HTTP 請求一個服務時，一個伺服器可以發送一個`Set-Cookie`的 HTTP header 回應。客戶端將以 header 的方式回傳 cookie 值給每個請求的同 一個伺服器，Cookie 也會在某些時間進行更新，或是限制一個實體網域或路徑。

HTTP Access Control (CORS)

**Cross-site HTTP requests** 是來自不同網域的資源請求。舉個例子，一個 HTML 網頁從網域 A (`http://domaina.example/`) 從網域 B(`http://domainb.foo/image.jpg`)請求一個圖片，經由`img`元件。現今的網頁通常會讀取跨站資源，包括 CSS 樣式表、圖片、腳本與其他資源。CORS 允許網頁開發人員的網站響應跨站讀取。

HTTP 的演化 (en-US)

HTTP 早期版本變化的簡要說明，到現在的 HTTP/2 與其他版本。

網頁安全方針

一些技巧幫助運作團隊開發安全的網頁。

HTTP 訊息 (en-US)

描述 HTTP/1 與 HTTP/2 不同類別與結構。

一個典型 HTTP 對話 (en-US)

顯示並解釋 HTTP 的通常對話流程。

HTTP/1.x 的連接管理 (en-US)

描述在 HTTP/1.x 中可用的三種連接管理。

參考
--

詳細的 HTTP 參考文件。

HTTP Headers (en-US)

HTTP 訊息檔頭（header）用於描述資源、伺服器或用戶端的行為。可以透過 `X-` 前綴以增加自定義的專有項目。其他的項目可以在 IANA registry 中找到，其原始定義在 RFC 4229。IANA 同時也維護 新 HTTP 訊息檔頭的提案登記（registry of proposed new HTTP message headers）。

HTTP 請求方法

透過 HTTP 有幾種不同操作方法：`GET`、`POST` (en-US)，或是較少見的請求方法，如 `OPTIONS` (en-US)、`DELETE` (en-US)、或 `TRACE` (en-US)。

HTTP 狀態回應碼

HTTP 狀態碼用來表示特定的 HTTP 請求是否已成功完成。回應分為五類：資訊回應、成功回應、重定向、用戶端錯誤、以及伺服器錯誤。

CSP 指令 (en-US)

`Content-Security-Policy` (en-US) 回應檔頭讓網站管理員控制哪些頁面上的資源能被用戶端程式（user agent）載入。除了少數特例外，此政策主要關於指定來源伺服器和腳本程式的端點（endpoints）。

工具與資源
-----

有助了解與測試 HTTP 的工具和資源。

Firefox 開發者工具

網路監視器（Network Monitor）

Mozilla Observatory

旨在幫助開發者、系統管理員和安全專業人員安全地配置網站的專案。

RedBot

用於檢查與暫存相關的 HTTP 檔頭的工具。

瀏覽器的運作方式

關於瀏覽器內部實作及 HTTP 通訊協定請求流程的一篇非常詳盡的文章。可以說是所有 Web 開發者都**必讀**的內容。


Event reference

Event reference
===============

事件為一些有趣事情，發生後會被傳出以通知 code。每個事件被表示為一個根據 `Event` 所定義的物件，且可能會有額外自訂欄位與(或)函式來描述發生了什麼事。事件可以表示從使用者互動到自動通知等渲染 model 所有的事情。

This article offers a list of events that can be sent; some are standard events defined in official specifications, while others are events used internally by specific browsers; for example, Mozilla-specific events are listed so that add-ons can use them to interact with the browser.no

事件索引
----

| 事件類型 | 描述 | 文件 |
| --- | --- | --- |
| Animation |
 Events related to the
 Web Animation API (en-US).

 Used to respond to changes in animation status (e.g. when an animation
 starts or ends).
  |
 Animation events fired on
 `Document` (en-US),
 `Window` (en-US),
 `HTMLElement` (en-US).
  |
| Asynchronous data fetching | Events related to the fetching data. |
 Events fired on
 `AbortSignal` (en-US),
 `XMLHttpRequest`,
 `FileReader`.
  |
| Clipboard |
 Events related to the
 Clipboard API (en-US).

Used to notify when content is cut, copied, or pasted. |
 Events fired on
 `Document` (en-US),
 `Element` (en-US),
 `Window` (en-US).
  |
| Composition |
 Events related to composition; entering text "indirectly" (rather than
 using normal keyboard presses).

 For example, text entered via a speech to text engine, or using
 special key combinations that modify keyboard presses to represent new
 characters in another language.
  |
 Events fired on
 `Element` (en-US).
  |
| CSS transition |
 Events related to
 CSS Transitions (en-US).

 Provides notification events when CSS transitions start, stop, are
 cancelled, etc.
  |
 Events fired on
 `Document` (en-US),
 `HTMLElement` (en-US),
 `Window` (en-US).
  |
| Database |
 Events related to database operations: opening, closing, transactions,
 errors, etc.
  |
 Events fired on
 `IDBDatabase` (en-US),
 `IDBOpenDBRequest` (en-US),
 `IDBRequest` (en-US),
 `IDBTransaction` (en-US).
  |
| DOM mutation |
 Events related to modifications to the Document Object Model (DOM)
 hierarchy and nodes.
  |

**Warning:**
Mutation Events (en-US) are
 deprecated.
 Mutation Observers
 should be used instead.

 |
| Drag'n'drop, Wheel |
 Events related to using the
 HTML Drag and Drop API
 and wheel events.

 Drag and Wheel events are derived from mouse events. While they are
 fired when using mouse wheel or drag/drop, they may also be used with
 other appropriate hardware.
  |
 Drag events fired on
 `Document` (en-US)

 Wheel events fired on
 `Document` (en-US)
 and
 `Element` (en-US)
 |
| Focus | Events related to elements gaining and losing focus. |
 Events fired on
 `Element` (en-US),
 `Window` (en-US).
  |
| Form | Events related to forms being constructed, reset and submitted. |
 Events fired on
 `HTMLFormElement` (en-US).
  |
| Fullscreen |
 Events related to the
 Fullscreen API.

 Used to notify when the transitioning between full screen and windowed
 modes, and also of errors occurring during this transition.
  |
 Events fired on
 `Document` (en-US),
 `Element` (en-US).
  |
| Gamepad |
 Events related to the
 Gamepad API (en-US).
  |
 Events fired on
 `Window` (en-US).
  |
| Gestures |
Touch events are
 recommended for implementing gestures.
  |
 Events fired on
 `Document` (en-US),
 `Element` (en-US).

In addition there are a number of non-standard gesture events:* Non-standard WebKit specific events on
 `Element` (en-US):
 `gesturestart` event (en-US),
 `gesturechange` event (en-US),
 `gestureend` event (en-US).
* Non-standard IE specific events on
 `Element` (en-US):
 `MSGestureStart`,
 `MSGestureChange`,
 `MSGestureEnd`,
 `MSGestureHold`,
 `MSGestureTap`.
 |
| History |
 Events related to the
 History API.
  |
 Events fired on
 `Window` (en-US).
  |
| HTML element content display management | Events related to changing the state of a display or textual element. |
 Events fired on
 `HTMLDetailsElement` (en-US),
 `HTMLDialogElement` (en-US),
 `HTMLSlotElement` (en-US).
  |
| Inputs |
 Events related to HTML input elements e.g.
 `<input>` (en-US), `<select>` (en-US), or
 `<textarea>` (en-US).
  |
 Events fired on
 `HTMLElement` (en-US),
 `HTMLInputElement` (en-US).
  |
| Keyboard |
 Events related to using a
 keyboard.

Used to notify when keys are moved up, down, or just pressed. |
 Events fired on
 `Document` (en-US),
 `Element` (en-US).
  |
| Loading/unloading documents | Events related to loading and unloading documents. |
 Events fired on
 `Document` (en-US)
 and
 `Window` (en-US).
  |
| Manifests |
 Events related to installation of
 progressive web app manifests.
  |
 Events fired on
 `Window` (en-US).
  |
| Media |
 Events related to media usage (including the
 Media Capture and Streams API,
 Web Audio API,
 Picture-in-Picture API (en-US), etc.).
  |
 Events fired on
 `ScriptProcessorNode` (en-US),
 `HTMLMediaElement` (en-US),
 `AudioTrackList` (en-US),
 `AudioScheduledSourceNode` (en-US),
 `MediaRecorder` (en-US),
 `MediaStream` (en-US),
 `MediaStreamTrack` (en-US),
 `VideoTrackList` (en-US),
 `HTMLTrackElement` (en-US),
 `OfflineAudioContext` (en-US),
 `TextTrack` (en-US),
 `TextTrackList` (en-US),
 Element/audio (en-US),
 Element/video (en-US).
  |
| Messaging |
 Events related to a window receiving a message from another browsing
 context.
  |
 Events fired on
 `Window` (en-US).
  |
| Mouse |
 Events related to using a
 computer mouse (en-US).

 Used to notify when the mouse is clicked, doubleclicked, up and down
 events, right-click, movement in and out of an element, text
 selection, etc.

 Pointer events provide a hardware-agnostic alternative to mouse
 events. Drag and Wheel events are derived from mouse events.
  |
 Mouse events fired on
 `Element` (en-US) |
| Network/Connection | Events related to gaining and losing network connection. |
 Events fired on
 `Window` (en-US).

 Events fired on
 `NetworkInformation` (en-US)
 (Network Information API).
  |
| Payments |
 Events related to the
 Payment Request API.
  |
 Events fired on
 `PaymentRequest`,
 `PaymentResponse` (en-US).
  |
| Performance |
 Events related to
 High Resolution Time API (en-US),
 Performance Timeline API,
 Navigation Timing API (en-US), User Timing API (en-US),
 and
 Resource Timing API (en-US).
  |
 Events fired on
 `Performance` (en-US).
  |
| Pointer |
 Events related to the
 Pointer Events API (en-US).

 Provides hardware-agnostic notification from pointing devices
 including Mouse, Touch, pen/stylus.
  |
 Events fired on
 `Document` (en-US),
 `HTMLElement` (en-US).
  |
| Print | Events related to printing. |
 Events fired on
 `Window` (en-US).
  |
| Promise rejection |
 Events sent to the global script context when any JavaScript promise
 is rejected.
  |
 Events fired on
 `Window` (en-US).
  |
| Sockets |
 Events related to the
 WebSockets API.
  |
 Events fired on
 `Websocket`.
  |
| SVG | Events related to SVG images. |
 Events fired on
 `SVGElement` (en-US),
 `SVGAnimationElement` (en-US),
 `SVGGraphicsElement` (en-US).
  |
| Text selection |
Selection API (en-US) events
 related to selecting text.
  |
 Event (`selectionchange`) fired on
 `HTMLTextAreaElement` (en-US),
 `HTMLInputElement` (en-US).
  |
| Touch |
 Events related to the
 Touch Events API.

 Provides notification events from interacting with a touch sensitive
 screen (i.e. using a finger or stylus). Not related to the
 Force Touch API (en-US).
  |
 Events fired on
 `Document` (en-US),
 `Element` (en-US).
  |
| Virtual reality |
 Events related to the
 WebXR Device API (en-US).

**Warning:** The
 WebVR API (en-US) (and
 associated
 `Window` events (en-US)) are deprecated.

 |
 Events fired on
 `XRSystem` (en-US),
 `XRSession` (en-US),
 `XRReferenceSpace` (en-US).
  |
| RTC (real time communication) |
 Events related to the
 WebRTC API (en-US).
  |
 Events fired on
 `RTCDataChannel` (en-US),
 `RTCDTMFSender` (en-US),
 `RTCIceTransport` (en-US),
 `RTCPeerConnection` (en-US).
  |
| Server-sent events |
 Events related to the
 server sent events API.
  |
 Events fired on
 `EventSource` (en-US).
  |
| Speech |
 Events related to the
 Web Speech API (en-US).
  |
 Events fired on
 `SpeechSynthesisUtterance` (en-US).
  |
| Workers |
 Events related to the
 Web Workers API (en-US),
 Service Worker API (en-US),
 Broadcast Channel API (en-US), and
 Channel Messaging API.

 Used to respond to new messages and message sending errors. Service
 workers can also be notified of other events, including push
 notifications, users clicking on displayed notifications, that push
 subscription has been invalidated, deletion of items from the content
 index, etc.
  |
 Events fired on
 `ServiceWorkerGlobalScope` (en-US),
 `DedicatedWorkerGlobalScope` (en-US),
 `SharedWorkerGlobalScope` (en-US),
 `WorkerGlobalScope` (en-US), `Worker` (en-US),
 `WorkerGlobalScope` (en-US),
 `BroadcastChannel` (en-US),
 `MessagePort` (en-US).
  |

事件分類
----

* `AbortSignal` (en-US)
    + abort 事件 (en-US)
* `AudioScheduledSourceNode` (en-US)
    + ended 事件 (en-US)
* `AudioTrackList` (en-US)
    + addtrack 事件 (en-US)
    + change 事件 (en-US)
    + removetrack 事件 (en-US)
* `BroadcastChannel` (en-US)
    + messageerror 事件 (en-US)
    + message 事件 (en-US)
* `DedicatedWorkerGlobalScope` (en-US)
    + messageerror 事件 (en-US)
    + message 事件 (en-US)
* `Document` (en-US)
    + animationcancel 事件 (en-US)
    + animationend 事件 (en-US)
    + animationiteration 事件 (en-US)
    + animationstart 事件 (en-US)
    + copy 事件 (en-US)
    + cut 事件 (en-US)
    + DOMContentLoaded 事件 (en-US)
    + dragend 事件 (en-US)
    + dragenter 事件 (en-US)
    + dragleave 事件 (en-US)
    + dragover 事件 (en-US)
    + dragstart 事件 (en-US)
    + drag 事件 (en-US)
    + drop 事件 (en-US)
    + fullscreenchange 事件 (en-US)
    + fullscreenerror 事件 (en-US)
    + gotpointercapture 事件 (en-US)
    + keydown 事件 (en-US)
    + keypress 事件 (en-US)
    + keyup 事件 (en-US)
    + lostpointercapture 事件 (en-US)
    + paste 事件 (en-US)
    + pointercancel 事件 (en-US)
    + pointerdown 事件 (en-US)
    + pointerenter 事件 (en-US)
    + pointerleave 事件 (en-US)
    + pointerlockchange 事件 (en-US)
    + pointerlockerror 事件 (en-US)
    + pointermove 事件 (en-US)
    + pointerout 事件 (en-US)
    + pointerover 事件 (en-US)
    + pointerup 事件 (en-US)
    + readystatechange 事件 (en-US)
    + scroll 事件
    + selectionchange 事件 (en-US)
    + touchcancel 事件 (en-US)
    + touchend 事件 (en-US)
    + touchmove 事件 (en-US)
    + touchstart 事件 (en-US)
    + transitioncancel 事件 (en-US)
    + transitionend 事件 (en-US)
    + transitionrun 事件 (en-US)
    + transitionstart 事件 (en-US)
    + visibilitychange 事件 (en-US)
    + wheel 事件 (en-US)
* `Element` (en-US)
    + animationcancel 事件 (en-US)
    + animationend 事件 (en-US)
    + animationiteration 事件 (en-US)
    + animationstart 事件 (en-US)
    + afterscriptexecute 事件 (en-US)
    + auxclick 事件 (en-US)
    + beforescriptexecute 事件 (en-US)
    + blur 事件 (en-US)
    + click 事件 (en-US)
    + compositionend 事件 (en-US)
    + compositionstart 事件 (en-US)
    + compositionupdate 事件 (en-US)
    + contextmenu 事件 (en-US)
    + copy 事件 (en-US)
    + cut 事件 (en-US)
    + dblclick 事件 (en-US)
    + DOMActivate 事件 (en-US)
    + DOMMouseScroll 事件 (en-US)
    + error 事件 (en-US)
    + focusin 事件 (en-US)
    + focusout 事件 (en-US)
    + focus 事件 (en-US)
    + fullscreenchange 事件 (en-US)
    + fullscreenerror 事件 (en-US)
    + gesturechange 事件 (en-US)
    + gestureend 事件 (en-US)
    + gesturestart 事件 (en-US)
    + gotpointercapture 事件 (en-US)
    + keydown 事件 (en-US)
    + keypress 事件 (en-US)
    + keyup 事件
    + lostpointercapture 事件 (en-US)
    + mousedown 事件 (en-US)
    + mouseenter 事件 (en-US)
    + mouseleave 事件 (en-US)
    + mousemove 事件 (en-US)
    + mouseout 事件 (en-US)
    + mouseover 事件 (en-US)
    + mouseup 事件 (en-US)
    + mousewheel 事件 (en-US)
    + msContentZoom 事件
    + MSGestureChange 事件
    + MSGestureEnd 事件
    + MSGestureHold 事件
    + MSGestureStart 事件
    + MSGestureTap 事件
    + MSInertiaStart 事件
    + MSManipulationStateChanged 事件
    + paste 事件 (en-US)
    + pointercancel 事件 (en-US)
    + pointerdown 事件 (en-US)
    + pointerenter 事件 (en-US)
    + pointerleave 事件 (en-US)
    + pointermove 事件 (en-US)
    + pointerout 事件 (en-US)
    + pointerover 事件 (en-US)
    + pointerup 事件 (en-US)
    + scroll 事件 (en-US)
    + select 事件 (en-US)
    + show 事件
    + touchcancel 事件 (en-US)
    + touchend 事件 (en-US)
    + touchmove 事件 (en-US)
    + touchstart 事件 (en-US)
    + transitioncancel 事件 (en-US)
    + transitionend 事件 (en-US)
    + transitionrun 事件 (en-US)
    + transitionstart 事件 (en-US)
    + webkitmouseforcechanged 事件 (en-US)
    + webkitmouseforcedown 事件 (en-US)
    + webkitmouseforceup 事件 (en-US)
    + webkitmouseforcewillbegin 事件 (en-US)
    + wheel 事件 (en-US)
* `EventSource` (en-US)
    + error 事件 (en-US)
    + message 事件 (en-US)
    + open 事件 (en-US)
* `FileReader`
    + abort 事件 (en-US)
    + error 事件 (en-US)
    + loadend 事件 (en-US)
    + loadstart 事件 (en-US)
    + load 事件 (en-US)
    + progress 事件 (en-US)
* `HTMLCanvasElement` (en-US)
    + webglcontextcreationerror 事件 (en-US)
    + webglcontextlost 事件 (en-US)
    + webglcontextrestored 事件 (en-US)
* `HTMLDetailsElement` (en-US)
    + toggle 事件 (en-US)
* `HTMLDialogElement` (en-US)
    + cancel 事件
    + close 事件
* `HTMLElement` (en-US)
    + beforeinput 事件 (en-US)
    + change 事件 (en-US)
    + input 事件 (en-US)
* `HTMLFormElement` (en-US)
    + formdata 事件 (en-US)
    + reset 事件 (en-US)
    + submit 事件
* `HTMLInputElement` (en-US)
    + invalid 事件 (en-US)
    + search 事件 (en-US)
* `HTMLMediaElement` (en-US)
    + abort 事件
    + canplaythrough 事件 (en-US)
    + canplay 事件 (en-US)
    + durationchange 事件 (en-US)
    + emptied 事件 (en-US)
    + ended 事件 (en-US)
    + error 事件 (en-US)
    + loadeddata 事件 (en-US)
    + loadedmetadata 事件 (en-US)
    + loadstart 事件 (en-US)
    + pause 事件 (en-US)
    + playing 事件 (en-US)
    + play 事件 (en-US)
    + progress 事件 (en-US)
    + ratechange 事件
    + seeked 事件 (en-US)
    + seeking 事件 (en-US)
    + stalled 事件 (en-US)
    + suspend 事件 (en-US)
    + timeupdate 事件 (en-US)
    + volumechange 事件 (en-US)
    + waiting 事件 (en-US)
* `HTMLSlotElement` (en-US)
    + slotchange 事件 (en-US)
* `HTMLTrackElement` (en-US)
    + cuechange 事件 (en-US)
* `HTMLVideoElement` (en-US)
    + enterpictureinpicture 事件 (en-US)
    + leavepictureinpicture 事件 (en-US)
* `IDBDatabase` (en-US)
    + abort 事件 (en-US)
    + close 事件 (en-US)
    + error 事件 (en-US)
    + versionchange 事件 (en-US)
* `IDBOpenDBRequest` (en-US)
    + blocked 事件 (en-US)
    + upgradeneeded 事件 (en-US)
* `IDBRequest` (en-US)
    + error 事件 (en-US)
    + success 事件 (en-US)
* `IDBTransaction` (en-US)
    + abort 事件 (en-US)
    + complete 事件 (en-US)
    + error 事件 (en-US)
* `MediaDevices`
    + devicechange 事件 (en-US)
* `MediaRecorder` (en-US)
    + error 事件 (en-US)
* `MediaStream` (en-US)
    + addtrack 事件 (en-US)
    + removetrack 事件 (en-US)
* `MediaStreamTrack` (en-US)
    + ended 事件 (en-US)
    + mute 事件 (en-US)
    + unmute 事件 (en-US)
* `MessagePort` (en-US)
    + messageerror 事件 (en-US)
    + message 事件 (en-US)
* `OfflineAudioContext` (en-US)
    + complete 事件 (en-US)
* `PaymentRequest`
    + merchantvalidation 事件 (en-US)
    + paymentmethodchange 事件 (en-US)
    + shippingaddresschange 事件 (en-US)
    + shippingoptionchange 事件 (en-US)
* `PaymentResponse` (en-US)
    + payerdetailchange 事件 (en-US)
* `Performance` (en-US)
    + resourcetimingbufferfull 事件 (en-US)
* `PictureInPictureWindow` (en-US)
    + resize 事件 (en-US)
* `RTCDataChannel` (en-US)
    + bufferedamountlow 事件 (en-US)
    + close 事件 (en-US)
    + closing 事件 (en-US)
    + error 事件 (en-US)
    + message 事件 (en-US)
    + open 事件 (en-US)
* `RTCDtlsTransport` (en-US)
    + error 事件 (en-US)
* `RTCDTMFSender` (en-US)
    + tonechange 事件 (en-US)
* `RTCIceTransport` (en-US)
    + gatheringstatechange 事件 (en-US)
    + selectedcandidatepairchange 事件 (en-US)
    + statechange 事件 (en-US)
* `RTCPeerConnection` (en-US)
    + addstream 事件 (en-US)
    + connectionstatechange 事件 (en-US)
    + datachannel 事件 (en-US)
    + icecandidateerror 事件 (en-US)
    + icecandidate 事件 (en-US)
    + iceconnectionstatechange 事件 (en-US)
    + icegatheringstatechange 事件 (en-US)
    + negotiationneeded 事件 (en-US)
    + removestream 事件 (en-US)
    + signalingstatechange 事件 (en-US)
    + track 事件 (en-US)
* `ScriptProcessorNode` (en-US)
    + audioprocess 事件 (en-US)
* `ServiceWorkerContainer` (en-US)
    + message 事件 (en-US)
* `ServiceWorkerGlobalScope` (en-US)
    + activate 事件 (en-US)
    + contentdelete 事件 (en-US)
    + install 事件 (en-US)
    + message 事件 (en-US)
    + notificationclick 事件 (en-US)
    + pushsubscriptionchange 事件 (en-US)
    + push 事件 (en-US)
* `SharedWorkerGlobalScope` (en-US)
    + connect 事件 (en-US)
* `SpeechRecognition` (en-US)
    + audioend 事件 (en-US)
    + audiostart 事件 (en-US)
    + end 事件 (en-US)
    + error 事件 (en-US)
    + nomatch 事件 (en-US)
    + result 事件 (en-US)
    + soundend 事件 (en-US)
    + soundstart 事件 (en-US)
    + speechend 事件 (en-US)
    + speechstart 事件 (en-US)
    + start 事件 (en-US)
* `SpeechSynthesis` (en-US)
    + voiceschanged 事件 (en-US)
* `SpeechSynthesisUtterance` (en-US)
    + boundary 事件 (en-US)
    + end 事件 (en-US)
    + error 事件 (en-US)
    + mark 事件 (en-US)
    + pause 事件 (en-US)
    + resume 事件 (en-US)
    + start 事件 (en-US)
* `SVGAnimationElement` (en-US)
    + beginEvent 事件 (en-US)
    + endEvent 事件 (en-US)
    + repeatEvent 事件 (en-US)
* `SVGElement` (en-US)
    + abort 事件
    + error 事件 (en-US)
    + load 事件 (en-US)
    + resize 事件
    + scroll 事件
    + unload 事件
* `SVGGraphicsElement` (en-US)
    + copy 事件 (en-US)
    + cut 事件 (en-US)
    + paste 事件 (en-US)
* `TextTrack` (en-US)
    + cuechange 事件 (en-US)
* `TextTrackList` (en-US)
    + addtrack 事件 (en-US)
    + change 事件 (en-US)
    + removeTrack 事件 (en-US)
* `VideoTrackList` (en-US)
    + addtrack 事件 (en-US)
    + change 事件 (en-US)
    + removetrack 事件 (en-US)
* `VisualViewport` (en-US)
    + resize 事件 (en-US)
    + scroll 事件 (en-US)
* `WebSocket`
    + close 事件 (en-US)
    + error 事件 (en-US)
    + message 事件 (en-US)
    + open 事件 (en-US)
* `Window` (en-US)
    + afterprint 事件 (en-US)
    + animationcancel 事件 (en-US)
    + animationend 事件 (en-US)
    + animationiteration 事件 (en-US)
    + animationstart 事件 (en-US)
    + appinstalled 事件 (en-US)
    + beforeprint 事件 (en-US)
    + beforeunload 事件 (en-US)
    + blur 事件 (en-US)
    + copy 事件 (en-US)
    + cut 事件 (en-US)
    + devicemotion 事件
    + deviceorientation 事件
    + error 事件 (en-US)
    + focus 事件 (en-US)
    + gamepadconnected 事件 (en-US)
    + gamepaddisconnected 事件 (en-US)
    + hashchange 事件 (en-US)
    + languagechange 事件 (en-US)
    + load 事件 (en-US)
    + messageerror 事件 (en-US)
    + message 事件 (en-US)
    + offline 事件 (en-US)
    + online 事件 (en-US)
    + orientationchange 事件
    + pagehide 事件 (en-US)
    + pageshow 事件 (en-US)
    + paste 事件 (en-US)
    + popstate 事件
    + rejectionhandled 事件 (en-US)
    + resize 事件 (en-US)
    + storage 事件 (en-US)
    + transitioncancel 事件 (en-US)
    + transitionend 事件 (en-US)
    + transitionrun 事件 (en-US)
    + transitionstart 事件 (en-US)
    + unhandledrejection 事件 (en-US)
    + unload 事件 (en-US)
    + vrdisplayactivate 事件 (en-US)
    + vrdisplayblur 事件 (en-US)
    + vrdisplayconnect 事件 (en-US)
    + vrdisplaydeactivate 事件 (en-US)
    + vrdisplaydisconnect 事件 (en-US)
    + vrdisplayfocus 事件 (en-US)
    + vrdisplaypointerrestricted 事件 (en-US)
    + vrdisplaypointerunrestricted 事件 (en-US)
    + vrdisplaypresentchange 事件 (en-US)
* `Worker` (en-US)
    + messageerror 事件 (en-US)
    + message 事件 (en-US)
* `WorkerGlobalScope` (en-US)
    + languagechange 事件 (en-US)
* `XMLHttpRequest`
    + abort 事件 (en-US)
    + error 事件 (en-US)
    + loadend 事件 (en-US)
    + loadstart 事件 (en-US)
    + load 事件 (en-US)
    + progress 事件 (en-US)
    + timeout 事件 (en-US)
* `XRReferenceSpace` (en-US)
    + reset 事件 (en-US)
* `XRSession` (en-US)
    + end 事件 (en-US)
    + inputsourceschange 事件 (en-US)
    + selectend 事件 (en-US)
    + selectstart 事件 (en-US)
    + select 事件 (en-US)
    + squeezeend 事件 (en-US)
    + squeezestart 事件 (en-US)
    + squeeze 事件 (en-US)
    + visibilitychange 事件 (en-US)
* `XRSystem` (en-US)
    + devicechange 事件 (en-US)
規範
--

| Specification |
| --- |
| HTML Standard # events-2 |


無障礙網頁

無障礙網頁
=====

網路開發中的無障礙網頁，意味著盡可能令所有人都能使用網站，就算是在某些感官方面受限的人也不例外。本頁面會提供一些關於無障礙網頁的資訊。

「理想的無障礙環境就是在各方面都營造一個無障礙的環境。在有形方面，所應該考量事情包括，生活上、行動上、教育上所可能遭受到的障礙，並提供其足以克服這些環境的需求，此等需求包括個體本身的配備，如點字機……以及周圍環境中的裝設，如扶手、導盲磚……」 中文維基百科的「無障礙環境」、「理想無障礙環境」章節

「**從根本上，網路是為了在所有人面前都能運行而設計的**，無論他們使用的軟硬體、語言文化、地理位置、抑或身心功能如何。當聽覺、運動、視力或認知能力障礙的人，都能訪問網路的時候，這個目標才算達成。」W3C - Accessibility

重要概念
----

MDN Accessibility Learning Area 涵蓋了最新的無障礙網頁教學所需：

何謂無障礙網頁？

這篇文章針對何謂無障礙網頁，起了一個好開頭。這模塊包含了要考慮哪些族群以及理由、不同族群會用什麼工具和 Web 互動、還有怎麼把無障礙網頁導入 Web 開發工作流程。

HTML：無障礙網頁的好開始 (en-US)

只要確保在任何時候，正確的 HTML 元素都用於正確的目的，就能消除各種網頁的障礙。這篇文章詳述 HTML 如何確保網頁無障礙。

充分實踐 CSS 與 JavaScript 的無障礙 (en-US)

如果 CSS 與 JavaScript 使用得當，將可以為無障礙網頁提供助力……反過來的話，就會嚴重影響無障礙體驗。這篇文章詳述如何在內容複雜的情況下，確保能充分實踐 CSS 與 JavaScript 的無障礙。

WAI-ARIA 基礎

從之前的文章來看，有時製作要涉及到非語意的 HTML 還有動態 JavaScript 更新技術……等，會令複雜的 UI 控制變得很困難。WAI-ARIA 正是為了解決此一問題而生。它對瀏覽器和輔助技術添加進一步的語意，讓用戶能知道發生了什麼事。我們將介紹如何在基本層面使用此技術，以提昇無障礙。

無障礙多媒體 (en-US)

會導致無障礙網頁出問題的另一個根源是多媒體：影片、聲音、圖片等內容，需要有合適的文字替代，以便輔助技術和它的用戶能夠理解。我們將在這篇文章中闡明作法。

行動無障礙網頁 (en-US)

隨著行動設備訪問漸受歡迎、還有像是 iOS 與 Android 這般熱門平台，已經具備完善的輔助工具，考慮到如何在這些平台上實踐無障礙網頁，就變得十分重要。這篇文章將討論行動裝置特有的無障礙網頁相關議題。

其他文件
----

Understanding the Web Content Accessibility Guidelines (en-US)

This set of articles provides quick explanations to help you understand the steps that need to be taken to conform to the recommendations outlined in the W3C Web Content Accessibility Guidelines 2.0 (WCAG 2.0 or just WCAG, for the purposes of this writing).

Keyboard-navigable JavaScript widgets

Until now, web developers who want to make their styled <div> and <span> based widgets have lacked the proper techniques. **Keyboard accessibility** is part of the minimum accessibility requirements which a developer should be aware of.

ARIA (en-US)

A collection of articles to learn how to use ARIA to make your HTML documents more accessible.

Assistive technology (AT) development

A collection of articles intended for AT developers

Mobile accessibility checklist

This document provides a concise checklist of accessibility requirements for mobile app developers.


CSS

CSS
===

**層疊樣式表**（Cascading Style Sheets, CSS）是用來描述 HTML 或 XML (en-US)（包含 SVG 或 XHTML 等各種 XML 變形）文件外觀的樣式表 (en-US)語言。CSS 會描述文件裡的結構化元素，該如何呈現在螢幕、紙、語音報讀、或其他媒介上。

**CSS** 是**開放網路**的核心語言之一，具有標準化的 W3C 規範。歷經不同層級的開發，CSS1 目前已被棄用、CSS2.1 是建議規範，而 CSS3 目前被分作數個較小的模組，持續在標準化的路上行進。

* CSS 介紹
 若你剛接觸網路開發，請確定讀過我們的 CSS 基礎以了解何謂 CSS 並知道要怎麼用。
* CSS 教學
 我們的 CSS 學習專區包含所有必要的基礎資訊，能讓你從完全新手開始，帶向熟悉 CSS。
* CSS 參考
 這是給經驗豐富的網頁開發者的完整參考資訊 (en-US)，說明 CSS 的每一個屬性與概念。
教學
--

我們的 CSS 學習專區有很多從頭教起的 CSS 模組。你不需要背景知識。

CSS 介紹

此模組讓你理解 CSS 工作原理，包含選擇器與屬性、撰寫 CSS 規則、在 HTML 套用 CSS、如何在 CSS 指定長度、色彩、還有其它單位、階層與繼承、box model 基礎、以及針對 CSS 除錯。

文字樣式

在這裡我們專注在文字樣式的基礎，包含設定字體、粗細、斜體、行距、字距、陰影以及其他文字屬性。最後以應用自訂字體、樣式化列表、樣式化連結結束。

樣式化盒子 (en-US)

接著，我們關注樣式化盒子，這是網頁排版中一個基礎的環節。在這個系列中我們會複習盒子模型，然後操作盒子的排版，像是設定留白、邊框、邊距、背景顏色或圖片以及其他特色，還有一些酷炫的功能像是陰影、過濾器。

CSS 排版

到了這裡，我們已經看完 CSS 的基礎（樣式化文字、樣式化與操作盒子使你的內容可以合適的展示）。現在該來看看如何把你的盒子放在相對於可視區正確的地方。我們已經擁有必要的知識，所以你可以更深入了解 CSS 排版、看不同的顯示設定、傳統排版方法如浮動或定位、新的排版方法如彈性盒子。

參考
--

* CSS 參考 (en-US)：一個詳細的參考資料，為資深網頁開發人員設計，包含 CSS 各種屬性和觀念。
* CSS 關鍵概念：
    + 語法 (en-US)
    + 權重 (en-US)和繼承 (en-US)
    + 盒子模型 (en-US)和邊框的崩潰 (en-US)
    + 堆疊和格式化區塊 (en-US)
    + 初始值 (en-US) 、計算值（computed） (en-US)、 使用值（used） (en-US)和運作值 (en-US)
    + CSS 簡寫屬性 (en-US)
    + CSS 彈性盒子排版
    + CSS 格線排版
    + 媒體查詢 (en-US)
CSS 開發工具
--------

* The W3C CSS 驗證服務 能檢查 CSS 的有效性。OnlineWebCheck.com 也在做相同的事情。它們都是很重要的除錯工具。
* Firefox 開發者工具能透過頁面檢測器與樣式編輯器直接觀察、編輯網頁的 CSS。
* Firefox 的Firebug 套件，navigator 裡面，能直接觀察、編輯網頁的 CSS 的人氣套件。要測試某些變化的時候會非常實用，而這套件還能做得更多。
* Firefox 的Web Developer 套件 也能能直接觀察、編輯網頁的 CSS。與 Firebug 相比更簡單、但相比下也沒那麼強大。
* 其他 CSS 工具。 (en-US)
Meta 錯誤
-------

* Firefox: Firefox bug 1323667
參見
--

* CSS demos (en-US) 最新的 CSS 技術動向：給予創意的一拔。
* 常與 CSS 相關聯的語言：HTML、SVG、XHTML、XML (en-US)。
* 廣泛運用 CSS 的 Mozilla 科技：Firefox 及 Thunderbird 的套件與佈景 (en-US)