recursal/MDN huggingface dataset:
MDN 專案
======

**MDN Web Docs** 是我們為開放網路、Mozilla 技術、Firefox 與其他開發者相關專題建立文件的 Wiki 系統。歡迎任何人新增與編輯內容。你不需要是程式設計師或非常了解技術；這邊有各種需要協助的工作，從最簡單（閱讀文件、改錯字）到最複雜（撰寫 API 文件）都有。

MDN Web Docs 的使命是提供*開發者*在*網站平台*上*輕鬆*建立專案所需的資訊。歡迎加入！

我們歡迎你的直接協助，非常容易！也不需要擔心「要不要獲得許可」之類的問題。在此同時，請試著了解並融入 MDN 社群 (en-US)；我們都在這裡協助你！以下文件能作為起步的指引。

* 新手起手式
 你是 MDN 新人，想要學習該如何開始嗎？就從這起步吧！
* 我是進階用戶
 當你覺得適當之時，閱讀我們的完整、深入 MDN 貢獻指引以學習更多
* 向世界宣傳
 如果你愛 MDN，幫助我們傳達給全世界！找尋圖片、工具與 MDN 宣傳指引。
給開發者的網頁技術文件
===========

全球資訊網的開放性提供了開發人員非常棒的機會。要充分發揮網路潛能，你需要知道如何使用它們。你可以從以下連結找到各種 網頁技術說明。

網頁技術
----

### 基礎

HTML

**超文字標記語言**（HyperText Markup Language）是一種用來結構化描述及定義網頁內容的語言。

CSS

**階層樣式表**（Cascading Style Sheets）可用來描述網頁內容的外觀。

HTTP

**超文字傳輸協議**（Hypertext Transfer Protocol）用於傳送網路的 HTML 及其他網頁中會使用到的 hypermedia 文件。

### 腳本語言

JavaScript

JavaScript 是在瀏覽器中執行的程式語言，你可以用它來增進網站或網路程式的互動性、及其他動態功能。

Web APIs

提供了能擴展網路腳本化能力的每個 API 的參考資訊，包含了 DOM 及所有相關的 API 及介面，能用於製作網站內容與應用程式。Web API 介面參考——以字母順序排序的所有介面資訊

* WebAPI 列出裝置 API 及其他益於開發應用程式時的 API
* 事件參考 列出可以用來追蹤和回應在網頁或網路程式中所發生的有趣事情的所有事件。

### 圖像

SVG

可縮放向量圖形（Scalable Vector Graphics）使你能夠使用一組向量（線條）與形狀來描述圖片，在顯示時可提供無關大小的零失真的平滑縮放。

WebGL (en-US)

WebGL 導入一系列近似 OpenGL ES 2.0 標準的 API，可用於 HTML `<canvas>` 元件中，將 3D 圖像帶進網路。

### 音訊、影片、多媒體

網路媒體科技

跟多媒體相關的 API 及文件連結清單。

網路媒體科技概觀

網路科技及提供影音撥放、操作與錄製的 APIs 概觀。如果你不知道該使用哪一個 API，可以從這裡開始。

影像擷取及串流 API

提供本地或是網路上媒體串流，錄製及操作的 API 參考資料。包含使用本地相機及麥克風擷取影片，音檔和靜態影像。

### 其他

MathML

數學標記語言（Mathematical Markup Language）使網頁得以展示複雜的數學運算式及語法。

學習區
---

學習網路開發

這些文章給初學者任何他們開發一個簡單的網頁所需要的東西。

其他主題
----

開發網頁應用程式 (en-US)

網頁應用程式開發者的文件。Web App 真的只需要單次撰寫，即可佈署到手機、桌面與 Firefox OS 平台。

網頁親和力

網頁親和力（Accessibility）意指讓最大多數人都得以使用網站，包含某些身心能力受限者。這裡我們提供製作具親和力的網頁內容的相關資訊。

安全

不要讓你的網站或應用程式洩漏隱私資料給壞人。使用此系列文章確保你的專案安全。

WebAssembly

WebAssembly 是一種可以在現代瀏覽器執行和編譯的新型態的程式語言。這個語言是一種擁有高效率的二進位格式類似組合語言的低階語言。他提供接近原生的效率，並且提供像是 C/C++這些語言作為編譯標的，能夠讓他們在網頁上執行。
Mozilla
=======

以下文章內容，與如何下載與組建 Mozilla 的程式碼有關。此外，也會收錄一些有助於理解程式碼如何運作、如何組建 Mozilla 程式的附加元件之類的文章。

FirefoxFirefox 是 Mozilla 基金會最受歡迎的網頁瀏覽程式，在眾多平台包含 Windows、Mac OS X、桌面版 Linux 及 Android 行動裝置上發行。 具有廣大相容性，整合最新的 Web 技術和強大的開發工具。不管你是一般使用者還是開發者，Firefox 都是你的最佳選擇。

附加元件附加元件允許開發者擴充並訂製 Firefox 的功能。它們使用標準的 Web 技術－－JavaScript、HTML、CSS、還有一些專門的 JavaScript API－－寫成。另外，附加元件還能：
學習該如何開發 Web
===========

歡迎來到 MDN 的「學習專區（Learning Area）」。本系列文章將提供撰寫程式碼的必要網站，讓剛接觸的新手也能開發 Web。

MDN 學習專區不是要讓「初學者」變成「專家」；而是想讓「初學者」能夠更怡然自得。你在這裡可完全安排自己的進度，逐步探索 MDN 的其他部分，再接觸進階資源來堆砌之前所習得的知識。

如果你是完全的新手，那 Web 開發過程可能頗有難度。我們希望能帶領你輕鬆學習，另提供相關細節以培養你的正確觀念。不論你是要學習 Web 開發（自學或參與課程）的學生、尋找教材的老師、純粹興趣使然的業餘工程師，甚至只是想進一步了解 Web 技術的人，都希望你在這裡就像在家裡一樣自在。

**警告：** 此學習專區將定期新增更多資訊。如果你希望能納入其他自己感興趣的主題，或覺得某個地方尚有缺漏，請到下方的聯絡我們尋找相關資訊並取得聯繫。

入門
--

* 完全新手：如果你正打算接觸 Web 開發，我們建議先從提供了實用 Web 開發介紹的入門 Web模組。
* 特殊問題：如果你對 Web 開發有著特殊問題，常見問題可能有你所需要的資訊。
* 基礎以外：如果你已經具備基本知識，則下一步就是了解 HTML 與 CSS 的細節。可從HTML 介紹模組著手，再進到CSS 介紹。
* 寫些腳本：如果你嫻熟 HTML 與 CSS 或想動手寫程式碼，要不要去 JavaScript 或伺服器端語言那邊看看呢 ── 就從我們的 JavaScript 起步走與伺服器端程式設計起步走開始吧。

**備註：** 我們的字彙庫另提供專有名詞的定義。

涵蓋主題
----

以下是 MDN 學習專區內涵蓋的主題清單。

Web 入門

針對完全新手提供實際介紹。

HTML：構建 Web

HTML 是構建不同區域的內容、還有定義這些區域意義和用途的語言。這個主題詳述了 HTML。

CSS：裝飾 Web

CSS 是用來妝點和編排 web 內容、添加動畫行為之類的語言。這個主題總括 CSS 的一切。

JavaScript：動態用戶端腳本

JavaScript 是給網頁添加動態功能的語言。這個主題會教你要自在理解並撰寫 JavaScript 所需的一切。

無障礙網頁：讓大家都能用上 Web

無障礙網頁是給盡可能給任何人提供 Web 內容的做法，無論那個人是否受障礙、設備、地點、或其他原因影響。這個主題提供你需要知道的一切。

工具與測試

這個主題介紹開發者用來改善工作的工具，如跨瀏覽器測試工具。

伺服端網站程式設計

就算對用戶端 Web 開發熟悉了，理解伺服器和伺服器端程式如何做動是很有用的。這個主題提供了伺服器端做動原理的總體介紹，並藉著兩大熱門框架 ──Django（Python）與 Express（node.js）── 詳細說明如何建立伺服器端 app。

取得我們的範例程式碼
----------

在學習專區看到的所有程式碼都放在 GitHub 上了。如果想把它們複製到自己的電腦，最簡單的方法是：

1. 在電腦上安裝 Git。這個版本控制系統，是 GitHub 運作的基礎。
2. 在 GitHub 註冊一個帳號。很簡單的。
3. 註冊好後用自己的帳密登入 github.com。
4. 開啟你的命令提示字元（Windows）（譯註：如果使用 Windows 7 以後，建議使用 Powershell）或是終端機（Linux、MacOSX）
5. 要把學習專區的 repo 透過命令提示字元/終端機複製到目錄裡面，稱作 learning-area 的資料夾，只要鍵入以下指令：

```bash
git clone https://github.com/mdn/learning-area
```

6. 現在你能透過檔案管理員或 cd 指令進入目錄，找到想要的檔案了。

你可以在 GitHub 的 `learning-area` repository 做任何更新，只要這麼做：

1. 在命令提示字元/終端機裡面，用 `cd` 進到 `learning-area` 目錄，例如說你要是在上一層目錄的話：

```bash
cd learning-area
```

2. 用這個指令更新 repository：

```bash
git pull
```

聯絡我們
----

如果你想向我們詢問任何事情，最快的方式就是透過學習專區討論串或 IRC 頻道留下訊息。不論你覺得網站有哪個地方做錯或缺漏，想看到新的學習主題、對自己不了解的地方尋求協助，或其他疑難雜症，都歡迎你提供意見給我們。

如果你想幫我們添增＼改善內容，則請先了解該如何協助並聯絡我們！不論你是學生、教師、Web 開發老手，或是想幫我們改善學習經驗，都歡迎和我們聯絡。

另可參閱
----

Mozilla Developer Newsletter

我們針對網頁開發者發行的電子報，對於所有程度的開發者都是很好的學習資源。

EXLskills

免費和開放的課程，學習技術技能，指導和基於項目的學習

Codecademy

絕妙的互動式網站，可從頭開始學習程式設計語言。

Code.org

基本的編碼理論與實作，主要為孩童與初學者所設計。

freeCodeCamp.com

富含教學與專案實做的互動式網路開發學習網站。

Web Literacy Map

Web 素養與 21 世紀常見技術的入門，亦已分門別類提供教學活動。

Teaching activities

由 Mozilla 基金會所設計的一系列教學 (與學習) 活動，涵蓋 JavaScript 的基本 Web 素養與隱私概念，並可嘗試開發 Minecraft。
術語表
===

網路技術包含了一長串的術語以及縮寫，這些會被使用在文件跟程式碼中。此術語表提供你需要知道的辭彙與縮寫的定義，以便能成功理解和建構網路。

你可以從側邊欄中選擇術語。

**備註：** 這個術語表永遠不會寫完。你可以幫忙撰寫新術語 (en-US)或是改寫現有的術語。
遊戲開發
====

遊戲絕對是最受歡迎的電腦功能之一。而相關技術不斷推陳出新，讓玩家在任何相容標準的網路瀏覽器上，也能盡情享受畫質更優、效能更好的遊戲。

web 遊戲開發
--------

歡迎來到 MDN 遊戲開發中心！我們將給想要開發遊戲的 web 開發者，提供 web 遊戲開發相關的資源。你會找到很多有用的教學與技術文章，所以請盡情瀏覽。

我們也涵蓋了參考的章節，你可以從那裡找到遊戲開發最需要用到的一些 API。

**備註：** 建立遊戲會需要用上一些 web 的核心技術，如 HTML、CSS、JavaScript。學習專區會是個很好的學習區域。

從原生到 Web
--------

如果你是原生介面開發者（例如，你寫 C++ 的遊戲）、對於怎麼把遊戲移植到 Web 有興趣的話，請看看我們的工具 Emscripten：這是個 LLVM 轉到 JavaScript 的編譯器，它使用了 LLVM 位元碼（例如，使用 Clang 從 C/C++ 產生。其他語言亦可）並編譯到能在 Web 運行的 asm.js (en-US)。

要入門請參見：

* About Emscripten for an introduction including high-level details.
* Download and Install for installing the toolchain.
* 有關如何開始的教學：Emscripten Tutorial
示例
--

需要 web 遊戲的示例，請參考我們的 示例頁。也請參考下 openwebgames.com 以獲取更多資源與示範！

參見
--

Build New Games

A collaborative site featuring a large number of open web game development tutorials. Has not been very active recently, but still holds some nice resources.

Creative JS

A collection of impressive JavaScript techniques and experiments, not specific to games, but helpful nonetheless. Has not been very active recently, but still holds some nice resources.

Game programming patterns

An online book, written by Bob Nystrom, which discusses programming patterns in the context of game development with the aim of helping game developers produce more effective and efficient code.

Gamedev.js Weekly

Weekly newsletter about HTML5 game development, sent every Friday. Contains the latest articles, tutorials, tools and resources.

HTML5 Game Devs Forum

Forums for developers, framework creators and publishers. Ask questions, get feedback and help others.

HTML5 Game Engine

List of the most popular HTML5 game frameworks along with their rating, features and samples.

JSBreakouts

Compare JavaScript Breakout clones in different frameworks to help you choose the right one for you.

Tuts+ Game Development

Tutorials and articles about game development in general.

HTML5 Gamedev Starter

Starter for the new game developers, a curated list of links to various, useful resources around the web.

js13kGames

JavaScript coding competition for HTML5 game developers with the file size limit set to 13 kilobytes. All the submitted games are available in a readable form on GitHub.

Mozilla Hacks blog

Games category on the Mozilla Hacks blog containing interesting gamedev related articles.
JPEG
====

**JPEG**（Joint Photographic Experts Group，聯合圖像專家小組）通常指是一種圖片的失真壓縮法。

深入理解
----

### 一般資訊

* 維基百科的 JPEG
防火墻
===

**防火墻**是一個過濾網路流量的系統。它也可以根據一些特定的規則，讓它穿透或阻止它。例如，它可以阻止特定端口的傳入鏈接或者是傳出鏈接到特定的 IP 地址。

防火墻可以像單一軟體的一樣簡單或者更複雜，就像專門的軟體，衹有防火墻一個功能。

了解更多
----

### 基礎知識

* 維基百科上的 Firewall (computing)
SEO
===

**搜尋引擎最佳化**（Search Engine Optimization、SEO）是提高網站於搜尋引擎的能見度之過程，又稱搜索排名改進。

搜尋引擎會爬行網路，從某個頁面連結到另一個頁面，並編篡找到的內容。當你搜尋的時候，搜尋引擎就會顯示已編好的內容。爬蟲遵循規則。如果你在給網站 SEO 時遵循這些規則，就能提高網站出現在搜尋結果首位的機會。它能增進流量，並透過電子商務與廣告，增加潛在收入。

搜尋引擎針對 SEO 給予一些建議，但大型搜尋引擎，把排名結果視為商業機密。SEO 結合了官方搜尋引擎的指引、經驗知識、以及源自論文或專利的理論知識。

SEO 方法分為三大類：

技術

使用語意化的 HTML 標示內容。當爬蟲在探索網站時，它只會找要索引的內容。

文案

使用閱覽者的詞彙來編寫內容。使用文字和圖像，讓爬蟲能夠理解主題。

聲望

當其他網站連結到你的網站時，你會得到最多流量。

深入理解
----

### 一般常識

* 維基百科的 SEO
### 理解 SEO

* 什麼是 SEO？由淺入深新手教學
* SEO 新手初入門，3 分鐘了解什麼是 SEO 教學
* Google Webmaster Central
* 你需要 SEO 嗎？ - Search Console 說明
HTML5
=====

HTML 最新的穩定版本, HTML5 將 HTML 從簡單的文檔結構標記帶領到全 app 開發平臺。新增了更多其他的功能, HTML5 包含了新的元素和JavaScript APIs，它們提高了存儲、多媒體和硬體訪問的效率。

了解更多
----

* 我們的 HTML5 引導
引數
==

**引數**（argument）是作爲函式 (en-US)輸入的原始型別 (en-US)值 (en-US)或著物件。

了解更多
----

### 基礎知識

* Difference between Parameter and Argument on Wikipedia
### 技術參考

* JavaScript 的 `arguments` (en-US) 物件
通訊埠
===

對使用 IP address 連線到網路的電腦來說，**通訊埠**是傳輸時的端點。我們可用不同的數字（通訊埠號）來分辨不同的通訊埠，而小於 1024 號的每個埠通常都有自己預設使用的 protocol。

舉例來說，HTTP 通訊協定的預設埠號是 80，而 HTTPS 通訊協定預設的埠號是 443，這麼 HTTP 伺服器預設就會在這些通訊埠上等待請求。網際網路上的每個通訊協定都會有自己的預設通訊埠: SMTP (en-US) (25)、POP3 (en-US) (110)、IMAP (en-US) (143)、IRC (en-US) (194) 等等。

了解更多
----

### 一般知識

* 維基百科上的 Port 條目
Doctype
=======

`<!DOCTYPE>`會告知你的瀏覽器這個文件是用哪個版本的 HTML （或 XML (en-US)）撰寫。Doctype 是一種宣告，而非 tag (en-US)。你也可以把它想作「document type declaration」（文件類型宣告），或是縮寫的 「DTD」。

了解詳情
----

### 基本知識

* 英文維基百科的 Document type declaration
* 怪異模式與標準模式
### 技術參考

* Document.doctype (en-US)，以 JavaScript 回傳文件類型的方法
字符集
===

**字符集**是能讓電腦知道如何解讀字符的編碼系統。解讀範圍包括字母、數字、標點符號、還有空白等。

早期各國出於各自的語言考量，而開發各自的字符集：例如日文的漢字 JIS（有 Shift-JIS、EUC-JP 等）、繁體中文的 Big5、俄文的 KOI8-R 等等。不過支持多語言的 Unicode (en-US)，逐漸成了最通用的字符集。

如果字符集使用不當（像是用 Unicode 閱覽 Big5 編碼的文章），可能會看到一大堆破碎的文字。這些破碎的文字，一般被俗稱為亂碼。

參見
--

* 字元編碼（維基百科）
* 亂碼（維基百科）
* 術語表
    + 字符
    + Unicode (en-US)
資料結構
====

**資料結構**用一些特別的方式去組織與儲存資料使得資料能夠更有效率的被使用。

了解更多
----

* 維基百科:Data structure
區塊級元素
=====

HTML（超文字標記語言, **Hypertext Markup Language**）元素通常為『區塊級』元素或是『行內級』元素 (en-US)。一個區塊級元素會藉由建立『區塊』的動作，完全佔滿其父元素（容器）的空間。本文將為你說明其意涵.

瀏覽器預設以在元素前後換行的方式，表現區塊級元素。視覺上會呈現為一排縱向堆疊的方塊。

**備註：** 區塊級元素必定以換行方式，取得完整寬度的空間（向左右兩側儘可能地延伸出去）。

以下範例將展示區塊級元素的影響：

區塊級元素
-----

### HTML


```html
<p>
  This paragraph is a block-level element; its background has been colored to
  display the paragraph's parent element.
</p>
```

### CSS


```css
p {
  background-color: #8abb55;
}
```

用法
--

* 區塊級元素只能出現於 `<body>` (en-US) 元素之內。
區塊級 vs. 行內元素
------------

There are a couple of key differences between block-level elements and inline elements:

Formatting

By default, block-level elements begin on new lines, but inline elements can start anywhere in a line.

Content model

Generally, block-level elements may contain inline elements and other block-level elements. Inherent in this structural distinction is the idea that block elements create "larger" structures than inline elements.

The distinction of block-level vs. inline elements is used in HTML specifications up to 4.01. In HTML5, this binary distinction is replaced with a more complex set of content categories (en-US). The "block-level" category roughly corresponds to the category of flow content (en-US) in HTML5, while "inline" corresponds to phrasing content (en-US), but there are additional categories.

相關元素
----

The following is a complete list of all HTML block level elements (although "block-level" is not technically defined for elements that are new in HTML5).

`<address>` (en-US)

Contact information.

`<article>` (en-US)

Article content.

`<aside>` (en-US)

Aside content.

`<blockquote>`

Long ("block") quotation.

`<dialog>` (en-US)

Dialog box.

`<dd>` (en-US)

Describes a term in a description list.

`<div>`

Document division.

`<dl>` (en-US)

Description list.

`<dt>` (en-US)

Description list term.

`<fieldset>` (en-US)

Field set label.

`<figcaption>` (en-US)

Figure caption.

`<figure>` (en-US)

Groups media content with a caption (see `<figcaption>` (en-US)).

`<footer>` (en-US)

Section or page footer.

`<form>` (en-US)

Input form.

`<h1>` (en-US), `<h2>` (en-US), `<h3>` (en-US), `<h4>` (en-US), `<h5>` (en-US), `<h6>` (en-US)

Heading levels 1-6.

`<header>` (en-US)

Section or page header.

`<hgroup>` (en-US)

Groups header information.

`<hr>`

Horizontal rule (dividing line).

`<li>` (en-US)

List item.

`<main>` (en-US)

Contains the central content unique to this document.

`<nav>`

Contains navigation links.

`<ol>` (en-US)

Ordered list.

`<p>` (en-US)

Paragraph.

`<pre>` (en-US)

Preformatted text.

`<section>` (en-US)

Section of a web page.

`<table>`

Table.

`<ul>` (en-US)

Unordered list.

### 參閱

* 行內級元素 (en-US)
* Block formatting context (en-US)
* `display` (en-US)
* `writing-mode` (en-US)
Head
====

**Head** **是**一個 HTML 文檔的一部分，它包含了關於文檔的 metadata (en-US)，如作者(author)、描述(description)、和引入 CSS 或 JavaScript 文件 并將應用于 HTML。

了解更多
----

### HTML head

* MDN 上的 `<head>` 元件參考
* The HTML <head> (en-US) 在 MDN 上的學習領域
緩衝區
===

緩衝區是物理記憶軟體中的一個存儲區，用於在數據從一個地方傳輸到另一個地方時臨時存儲數據。

了解更多
----

### 基礎知識

* 維基百科上的數據緩衝區
Ruby
====

*Ruby* 是個開源的程式語言。在網際網路 (en-US)的脈落下，Ruby 常藉由伺服器端的 *Ruby On Rails*（ROR）框架構建網站或 app。

Ruby 也可以指 HTML 文件內，東亞文字的註釋方法。請參考 `<ruby>` 元素。

參見
--

* 維基百科的 Ruby
* Ruby 中文官方網頁
* Ruby On Rails 官方網頁
Document directive
==================

**CSP 文件指令** 被用在 `Content-Security-Policy` (en-US) 頭部和管理應用策略的文件或工作者 (en-US)環境的屬性。

文件指令不會回退到 `default-src` (en-US) 指令。

這些 CSP 指令是文件指令:

* `base-uri` (en-US)
* `plugin-types` (en-US)
* `sandbox` (en-US)
* `disown-opener`
了解更多
----

### 技術資訊

* `Content-Security-Policy` (en-US)
* 其他類型的指令:
    + Fetch directive (en-US)
    + Navigation directive (en-US)
    + Reporting directive (en-US)
提升（Hoisting）
============

提升（Hoisting）是在 ECMAScript® 2015 Language Specification 裡面找不到的專有名詞。它是一種釐清 JaveScript 在執行階段內文如何運行的思路（尤其是在創建和執行階段）。然而，提升一詞可能會引起誤解：例如，提升看起來是單純地將變數和函式宣告，移動到程式的區塊頂端，然而並非如此。變數和函數的宣告會在編譯階段就被放入記憶體，但實際位置和程式碼中完全一樣。

了解更多
----

### 技術範例

 在執行任何程式碼前，JavaScript 會把函式宣告放進記憶體裡面，這樣做的優點是：可以在程式碼宣告該函式之前使用它。
 例如：


```js
function catName(name) {
  console.log("My cat's name is " + name);
}

catName("Tigger");
/\*
上面程式的結果是: "My cat's name is Tigger"
\*/
```


上面的程式碼片段，就是你希望程式碼運作的樣子。現在讓我們看看，如果在這一段函式宣告之前就執行它，到底會發生什麼事：


```js
catName("Chloe");

function catName(name) {
  console.log("My cat's name is " + name);
}
/\*
上面程式的結果是: "My cat's name is Chloe"
\*/
```


即使我們函式的程式碼之前就先呼叫它，程式碼仍然可以運作。這是出於 JavaScript 內文執行的運作原理。

提升也適用於其他型別和變數。變數可以在宣告之前進行初始化和使用。但如果沒有初始化，就不能使用它們。


```js
num = 6;
num + 7;
var num;
/\* 只要 num 有被宣告，就不會有錯誤 \*/
```


JavaScript 僅提升宣告的部分，而不是初始化。如果在使用該變數後才宣告和初始化，那麼該值將是 undefined。以下兩個範例顯示了這個特性。


```js
var x = 1; // 初始化 x
console.log(x + " " + y); // '1 undefined'
var y = 2;
//上下的程式結果都一樣

var x = 1; // 初始化 x
var y; // 宣告 y
console.log(x + " " + y); // '1 undefined'
y = 2; // 初始化 y
```

### 技術參考

* JavaScript: Understanding the Weird Parts - Udemy.com Course
* var statement - MDN
* function statement (en-US) - MDN
PHP
===

PHP（PHP: Hypertext Preprocessor 的遞歸縮寫，意為「PHP：超文字預處理器」）是一個開源的伺服器端腳本語言，可用於建制網頁應用和動態網站。

範例
--

### 基本語法


```php
  // PHP 程式開始
<?php
 // PHP 程式在此執行
 ?>
// PHP 程式結束
```

### 在螢幕上印東西


```php
<?php
 echo "Hello World!";
?>
```

### PHP 變數


```php
<?php
 // 變數
 $nome='Danilo';
 $sobrenome='Santos';
 $pais='Brasil';
 $email='danilocarsan@gmailcom';

 // 印出變數
 echo $nome;
 echo $sobrenome;
 echo $pais;
 echo $email;
?>
```

參見
--

* PHP - 官方網站
* 維基百科的 PHP
* 維基教科書的 PHP
* 臺灣 php 聯盟
* MDN Web Docs 術語
    + Java
    + JavaScript
    + Python
    + Ruby
瀏覽器
===

*網頁瀏覽器*是種從 Web (en-US) 擷取並顯示頁面的程式，且讓用戶透過 hyperlinks (en-US) 來進入其他頁面。

更進一步了解
------

### 一般知識

* 維基百科的 網頁瀏覽器
* 網路演進
### 下載瀏覽器

* Mozilla Firefox
* Google Chrome
* Microsoft Internet Explorer
* Opera Browser
DOM
===

DOM(Document Object Model, DOM) 是用來表示和與任何HTML 或 XML (en-US) 文件互動的 API。DOM 是一個載入於browser中的文件模組，它的表示方式像樹的節點一樣, 每個節點代表著文件的一部分(如：element、 文字或留言)。

DOM 是一個在Web (en-US)中最常被使用的APIs，因為它在瀏覽器中允許程式碼執行存取和互動任何在文件中的節點。 節點可以被創建、移動和變更。事件監聽器可以被新增至節點中，當發生特定事件時會被觸發。

DOM 最初並沒有被定義—它是來自於當瀏覽器開始啟用JavaScript時出現。這個老舊的 DOM 有時候會稱 DOM 0。此時此刻, WHATWG 推動著 DOM 現存的標準.

了解更多
----

### 基本知識

* 維基百科上的The Document Object Model
### 技術參考

* The DOM documentation on MDN
* The DOM Standard
Grid
====

*CSS 格線*(CSS grid) 使用 `display: grid;` 值，你可以透過 `grid-template-rows` (en-US) 與 `grid-template-columns` (en-US) 屬性定義格線的行（Row）與列（Column）。

使用這些屬性的格線會稱做*明式格線*（explicit grid）。

如果把內容放在明式格線外；或是依賴自動配置、而格線演算法要建立額外的格線軌道 (en-US)以支持格線單元的話，明式格線內就會建立額外的格線軌道。*明式格線*是指內容因為定義的軌道外增添，而自動建立內容的格線。

下例創建了三列兩行的*明式格線*。格線第三行是明式格線行軌道，它是為了讓超過六個單元的格線，能夠填滿明式格線。

範例
--
```

\* {
  box-sizing: border-box;
}

.wrapper {
  border: 2px solid #f76707;
  border-radius: 5px;
  background-color: #fff4e6;
}

.wrapper > div {
  border: 2px solid #ffa94d;
  border-radius: 5px;
  background-color: #ffd8a8;
  padding: 1em;
  color: #d9480f;
}
```



```css
.wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 100px 100px;
}
```



```html
<div class="wrapper">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
  <div>Four</div>
  <div>Five</div>
  <div>Six</div>
  <div>Seven</div>
  <div>Eight</div>
</div>
```

深入理解 re
-------

### 屬性參考

* `grid-template-columns` (en-US)
* `grid-template-rows` (en-US)
* `grid` (en-US)
* `grid-template`
### 參閱

* CSS 格線布局教學：*格線布局的基本概念*
Crawler
=======

網路爬蟲（web crawler）是個程式，也被稱作機器人（bot、robot），會系統化瀏覽網路 (en-US)以蒐集網頁資料。通常，搜尋引擎會用爬蟲建立網頁索引。

深入理解
----

* 維基百科的 網路爬蟲
密碼學
===

**密碼學**, 或者說隱語, 是研究如何安全地編碼和傳遞信息的科學。加密學設計和研究用於在不安全的環境中對消息進行編碼和解碼的算法和應用。密碼學不僅僅涉及數據保密性，它還包含了**識別、認證**、\*\*無依賴性和數據完整性。\*\*因此它同樣研究密碼學方法在上下文、**密碼系統**的用法。

了解更多
----

### 基礎知識

* 維基百科上的 密碼學
* cryptanalysis (en-US)
* 信息安全教程
域名
==

域名是指在網際網路(Internet (en-US))上的網站地址。它在網址(URLs)裡被用來確定所屬伺服器的具體網頁。它由一組層次順序標籤 (labels)組成並以句點 (dots)分割和擴展名(extension (en-US))結尾。

了解更多
----

### 基礎知識

* 維基百科上的 域名
* 理解域名 (en-US)
Adobe Flash
===========

Flash 是一個由 Adobe 開發的過時網路技術。它能展現出富有表現力的 Web 程式、向量圖形、還有各種多媒體。Adobe Flash 需要在瀏覽器安裝相對應的擴充套件後才能使用。

自 2021 年起，Adobe 或任何主要網絡瀏覽器不再支援 Flash。

參見
--

* Adobe Flash end-of-life announcement
* Saying goodbye to Flash in Chrome
* Firefox Roadmap for Flash End-of-Life
* Microsoft Windows Flash Player removal
主機
==

主機是一種連接網際網路（Internet (en-US)）或本地網路的設備。有些稱作伺服器（server）的主機還會提供額外的服務：像是提供網頁服務、存放文件和郵件。

伺服器的主機服務可以是由硬體直接產生，也可以由軟體程式產生虛擬實體。後者被稱為虛擬主機（Virtual hosting）。

了解更多
----

### 基礎知識

* 維基百科上的主機
Opera 瀏覽器
=========

**Opera** 是最常使用的 browser 第五名，1996 年正式推出，一開始僅能在 Windows 使用。Opera 自 2013 年起使用 Blink 排版引擎，在那之前使用的是 Presto。Opera 也有提供行動與平板電腦版本。

了解更多
----

### 一般知識

* 維基百科上的 Opera Browser 條目
* Opera 瀏覽器官方網站
Git
===

**Git** 是一套自由、開放原始碼，分散式原始碼管理（SCM (en-US)）的工具軟體。它有助於分散式的開發團隊處理程式碼協同作業。有別於以前的原始碼管理系統，本地開發環境能處理常用的操作（分支、提交等），而無需更改主要的程式碼儲存倉庫，即使沒有寫入權限。

學習更多
----

### 一般知識

* 內含文件的官方網站
* GitHub，以 Git 為基礎的圖像式專案託管服務
Ligature
========

所謂「**連字**」(ligature)，即是將兩個字母整合為單一字母。以法文的「œ」為例，即是「o」與「e」的連字。

你可使用 `font-variant-ligatures` (en-US) 在自己的網頁上設計出連字。

Learn more
----------

### General knowledge

* Ligature on Wikipedia
CSP
===

**CSP** (内容安全策略)是被用於檢測和緩解某些網站相關的攻擊類型如XSS (en-US) 和資料注入。

這個策略的履行是基於 HTTP 頭部的 `Content-Security-Policy`.

了解更多
----

### 基礎知識

* 維基百科上的内容安全策略
### 技術資訊

* MDN 上的内容安全策略文檔 (en-US)
JavaScript
==========

JavaScript（JS）是個程式語言。通常用於用戶端（client-side）的動態網頁腳本，不過也常藉由 Node.js 之類的軟體包，使用到伺服器端（Server-side）。

不要把 JavaScript 與 Java 這兩個程式語言混淆了。雖然「Java」與「JavaScript」都是甲骨文公司（Oracle）在美國和其他國家或地區註冊的商標，但這兩個程式語言在語法、語意、還有用處上，都有極大的不同。

前 Netscape 員工 Brendan Eich 原本想讓 JavaScript 成為伺服器端語言。但 JavaScript 卻在 1995 年九月於 Netscape Navigator 2.0 降生並得到隨之而來的成功。Internet Explorer 3.0 (en-US) 也在 1996 年八月以 JScript 的名義支援 JavaScript。

1996 年十一月，Netscape 開始與 ECMA International 合作以期使 JavaScript 成為行業標準（industry standard）。從此以後，標準化的 JavaScript 就被稱為 ECMAScript 並規範在 ECMA-262 之下，其最新的第八版於 2017 年六月生效。

JavaScript 通常用於瀏覽器，使開發者能透過 DOM 操縱網頁內容、或透過 AJAX 與 IndexedDB 操縱資料；還可以用它在 canvas 上面繪圖、透過各種 API 與各種設備的瀏覽器交流……等等。由於近年各大瀏覽器的增長、以及 APIs 的效能改進，JavaScript 成了全世界最常用的程式語言之一。

最近，JavaScript 挾著非瀏覽器跨平台執行環境 Node.js 的巨大成功，重返了伺服器世界。電腦上的 Node.js 能讓 JavaScript 作為腳本語言使用以處理自動化。另外，還可以組建完整的 HTTP 與 Web Sockets (en-US) 伺服器。

深入了解
----

### 基本知識

* 維基百科的 JavaScript
### 學習 JavaScript

* MDN 的 JavaScript 指南
* NodeSchool 的 javascripting 工作坊
* codecademy.com 的 JavaScript 課程
* John Resig 的 Learning Advanced JavaScript
### 技術參考

* 最新的 ECMAScript 標準
* MDN 的 JavaScript 參考文件
* *Eloquent JavaScript* 一書
PNG
===

**PNG** (*便攜式網路圖形*) 是一種支持無損數據壓縮的圖片文件格式。

了解更多
----

### 基礎知識

* 維基百科上的 PNG
Empty element
=============

\*\*置空元素(empty element)\*\*是一種來自 HTML、SVG 或 MathML **不能**有任何子節點 (如，嵌套元素或 文本節點)的元素(element)。

HTML、SVG 和 MathML 規範非常精確地定義了每個元素可以包含什麼。很多組合沒有語義意義，例如 `<audio>` (en-US) 元素嵌套`<hr>` 元素。

在 HTML，給置空元素使用閉合標籤是無效的。例如：`<input type="text"></input>` 就是無效的 HTML。

HTML 的置空元素列表如下：

* `<area>` (en-US)
* `<base>` (en-US)
* `<br>`
* `<col>` (en-US)
* `<embed>` (en-US)
* `<hr>`
* `<img>` (en-US)
* `<input>` (en-US)
* `<link>` (en-US)
* `<meta>` (en-US)
* `<param>` (en-US)
* `<source>` (en-US)
* `<track>` (en-US)
* `<wbr>` (en-US)
Cache 快取
========

**快取**（cache, web cache, HTTP cache）是暫時存放 HTTP 回應的組件。只要滿足特定要求，就能在接下來的 HTTP 請求派上用場。

深入理解
----

### 一般知識

* 維基百科的 Web cache
首次內容繪製
======

**首次內容繪製** (First Contentful Paint, FCP) 是當瀏覽器從文件物件模型 (DOM) 渲染第一塊內容，第一次提供頁面正在載入的回饋給使用者。這個問題是「它發生了嗎？」當首次內容繪製完成時，答案為「是的」。

首次內容繪製時間戳記是當瀏覽器第一次渲染任何文字、圖片（包含背景圖片），以及非空白的 canvas 標籤或 SVG 向量圖片。排除任何 iframe 裡的內容，但包含等待中的網路字體 (webfonts)。意即使用者第一次開始使用頁面內容。

也可以看看
-----

* First Meaningful Paint (en-US)
* Paint Timing specification
Firefox OS
==========

Firefox OS 是 Mozilla's 手機操作系統，基於 Linux 和 Firefox's (en-US) 强大的 Gecko (en-US) 渲染引擎。Firefox OS 主要由 Gaia、Gecko (en-US), 和 Gonk 組成。

了解更多
----

### 基礎知識

* 維基百科上的 Firefox OS
### 技術參考

* 在 MDN 找出更多關於 Firefox OS 的 Firefox OS Zone!
Cookie
======

Cookie 是一個網站通過瀏覽器訪問在訪客電腦裏留下的一小段信息。

Cookies 被網站用於個性化用戶個人的網頁體驗。訪問該網站時它可能覆蓋了用戶的喜好或輸入。用戶可以自定義他們的瀏覽器是個接受或是刪除 cookies.

Cookies 可以設置和修改，在伺服器級別使用`Set-Cookie` HTTP header, 或在 JavaScript 使用 `document.cookie` (en-US).

了解更多
----

### 基礎知識

* 維基百科上的 HTTP cookie
IndexedDB
=========

IndexedDB 是一個用來在瀏覽器內儲存大型數據結構，並對其建立索引以高效查詢的 Web API。類似基於 SQL 的 關連式資料庫管理系統（RDBMS），IndexedDB 是一套交易式資料庫系統。然而，它使用 JavaScript 物件而非固定欄位的資料表來記錄資料。

了解更多
----

* MDN 上的 IndexedDB API
* W3C 的 IndexedDB 標準
偽元素
===

CSS 中的偽元素選擇器可被應用在當 HTML 內沒有特定元素可以選擇，且文件內容需套用格式的時候。舉例來說，與其將每個段落的第一個字變成獨立元素，你也可選擇利用 `p` `::first-letter`的寫法選擇各段首字。

了解更多
----

### 技術參考

* Pseudo-elements (en-US)
CMS 內容管理系統
==========

内容管理系统（Content Management System，CMS）是個能讓用戶發布、組織、變更、還有移除各種內容的軟體。所謂的內容，可以包含文字、嵌入式圖像，視頻，音頻、互動程式碼。

深入了解
----

### 基本知識

* 維基百科的 内容管理系统
CSS 物件模型 (CSSOM)
================

**CSS 物件模型 (CSS Object Model, CSSOM)** 是一個存放所有 CSS 選擇器與相關特性的樹狀結構容器，擁有根節點、鄰居節點、後代節點、子代節點以及其他關係。CSSCOM 非常類似於 DOM 文件物件模型 。它們兩者都是關鍵渲染路徑的其中一部分，是網站渲染的必要步驟。

CSSOM 與 DOM 一起建構渲染樹，瀏覽器依序使用它來排版與繪製網頁。

### CSSOM API

CSS Object Model (en-US) 的系列 API 允許從 JavaScript 處理操作 CSS。它更像是 DOM，但是用於 CSS 而非 HTML。允許使用者動態讀取與修改 CSS 樣式。

也可以看看
-----

* Populating the page: how browsers work (en-US)
WebGL
=====

**WebGL** (*Web Graphics Library*) 是一個可以畫出，2D 和 3D 圖像的 JavaScript API

WebGL 基於 OpenGL (en-US) ES 2.0. 且 正被科納斯組織 維護

你可以透過 HTML `<canvas>` 元素渲染呼叫 WebGL

現在，大多數主流 瀏覽器 支援 WebGL, 但 你的電腦 能不能使用又是另一則故事了 (EX: GPU 因素 ).

了解更多
----

### 基礎知識

* 維基百科上的 WebGL
* 看一下 你的電腦支不支援 WebGL
### 技術文章

* MDN 上的 Ｗ ebGL (en-US)
* 支援 WebGL 瀏覽器列表
關鍵詞
===

**關鍵詞**是描述内容的字或短語。在綫關鍵詞被用於搜索引擎的查詢或用來識別站點上的内容.

當你使用搜索引擎，你會使用指定的關鍵詞來搜索你想查找的東西，搜索引擎根據關鍵詞來返回相關的結果頁。爲了搜索到更精準的結果，需要嘗試更多指定的關鍵詞，如使用 "Blue Mustang GTO" 代替簡單的 "Mustang"。網頁也可以用 meta 標簽(寫在 `<head>`使用關鍵詞描述頁面的内容，它可以使搜索引擎更好的定義和組織網頁。

了解更多
----

### 基礎知識

* 維基百科上的 關鍵詞
密文
==

在密碼學(Cryptography)中, 密文是傳達信息的加密信息，正常情況下無法解讀除非使用正確的密碼(cipher (en-US))和秘密(通常叫做key) 來解密(decrypted (en-US))才可以再現原來的明文(cleartext (en-US))。一個密文的安全性以及包含信息的保密性依賴于安全的密碼和保持 key 的秘密性。

了解更多
----

### 基礎知識

* 維基百科上的 密文
WebExtensions
=============

WebExtensions 是一種跨瀏覽器系統，用於開發 Firefox 的瀏覽器附加元件。這個系統提供許多 API 能夠在不同的瀏覽器中執行，例如 Mozilla Firefox、Google Chrome、Opera 瀏覽器和 Microsoft Edge。

深入了解
----

### 技術資訊

* MDN 上的瀏覽器擴充功能
FTP
===

**FTP** (文件傳輸協定)作爲從一個伺服器(host) 到另一個伺服器通過網路傳輸文件的標準協定(protocol)很多年。不過逐漸現在很多團隊和托管賬戶不允許使用 FTP 并且使用依賴于版本控制系統如 Git 代替。你可能會發現在老的托管賬戶中仍有使用它，但確切的說，FTP 不再是最佳實踐。

了解更多
----

### 基礎知識

* 初學者指引通過 FTP 上傳文件 (en-US)
* 維基百科上的FTP
原型
==

原型（prototype）是在開發早期表現應用程式外觀或行為的模型。

請詳見繼承與原型鍊（Inheritance and the prototype chain）。

深入理解
----

### 一般知識

* 維基百科的軟體原型
演算法
===

演算法（algorithm）是包含了程式功能該如何執行的一連串指示。
W3C
===

*全球資訊網協會*（World Wide Web Consortium，W3C）是維護網路相關 (en-US)規則與架構的國際機構。

它由 420 多個開發網路標準、經營宣傳計畫、還有維護網路相關的公開討論會……等成員組織構成。W3C 的業界協調公司確保它們實行相同的 W3C 標準。

每個標準都會有四個成熟過程：工作草案（Working Draft、WD）、候選推薦標準（Candidate Recommendation、CR）、提案推薦標準（Proposed Recommendation、PR）、以及 W3C 推薦標準（W3C Recommendation、REC）。

深入了解
----

### 基本知識

* W3C 官方網站
* 維基百科的 W3C
ARIA
====

**ARIA**（Accessible Rich Internet (en-US) Applications，可訪問的富網際網路應用程式）是一個 W3C 規範，用已對 HTML 添加語義和元數據，以迎合需要輔助技術的用戶。

例如：你可以給一個 `<p>` (en-US) 標籤 (en-US)添加 `role="alert"` 屬性提醒視覺障礙用戶，這裏的訊息很重要並對時間敏感（針對非視覺障礙用戶，你可能本來會用文字顔色傳達這種事）。

了解更多
----

* ARIA (en-US)
編譯
==

編譯是將給定編程語言中的計算機程式轉換成用另一種語言（通常是計算機可執行的二進制語言）編寫的相同程式的過程。

了解更多
----

### 基礎知識

* 維基百科上的 編譯器
### 學習資源

* 在 StackOverflow 上的學習資料清單