recursal/MDN huggingface dataset:
文字樣式
====

託了 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.
Web 安全
======

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

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

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

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

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

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

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

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

**層疊樣式表**（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)
Web 開發者指引
=========

這些文章提供了如何幫助你使用特定技術和 APIs 的資訊。

**備註：** 很抱歉。這個頁面在我們完成內容遷移之前會很混亂。

JavaScript

JavaScript 是用來創造網頁應用程式的腳本化語言.

參見
--

* Web Developer Reference
漸進式網路應用程式
=========

漸進式網路應用程式（Progressive web app）使用當代 web API，並以漸進增強策略，建立跨平台 web 應用程式。 這些程式提供了能讓用戶體驗，逼近於原生程式的功能。這套文件將講述你需要知道的一切。

PWA 優勢
------

PWA 應該要可探索、可安裝、可連結、可獨立於網路、可漸進、可接合、響應式、以及安全（discoverable, installable, linkable, network independent, progressive, re-engageable, responsive, safe）。需要有關這方面的理解，請參閱漸進式網路應用程式的優勢 (en-US)。如果需要實作細節，請參考以下章節表列的教學。

PWA 核心教學
--------

以下教學將以簡單例子告訴你，在實作 PWA 時所需要的東西，並講述一切如何運行。

1. 漸進式網路應用程式簡介 (en-US)
2. 漸進式網路應用程式架構 (en-US)
3. 使用 Service worker 讓 PWA 能離線工作 (en-US)
4. 如何令 PWA 可安裝 (en-US)
5. 如何使用 Notifications 與 Push 令 PWA 可重連線 (en-US)
6. 漸進式載入 (en-US)
技術教學
----

* 用戶端儲存 (en-US)：展示如何與何時使用 web storage、IndexedDB、service worker 的長篇教學。
* 使用 service worker (en-US)：涵蓋 Service Worker API 的深入教學
* 使用 IndexedDB：詳細解釋 IndexedDB 的基礎。
* 使用 Web Storage API (en-US)：讓 Web storage API 變得簡單。
* Instant Loading Web Apps with An Application Shell Architecture：使用 App Shell 程式模式加快 app 的載入速度。
* 使用 Push API (en-US)：了解 Web Push API 所需的一切。
* 使用 Notifications API：web notification 簡介。
* 構建響應式設計 (en-US)：了解當今 app 佈局的關鍵——響應式設計——的基本。
* 行動優先 (en-US)：建立響應式設計很常見，預設以行動裝置的佈局優先、接著設計更寬廣的佈局，是相當合理的。
* Add to home screen guide (en-US) — learn how your apps can take advantage of Add to home screen (A2HS).
工具
--

* localForage：讓用戶端儲存變簡單的輕量化 JavaScript 函式庫。預設上使用 IndexedDB，必要時則改用 SQL/Web 儲存。
* ServiceWorkerWare — an *Express-like* microframework for easy Service Worker development.
* oghliner — not only a template but a tool for deploying Offline Web Apps to GitHub Pages.
* sw-precache — a node module to generate service worker code that will precache specific resources.
* workbox — spiritual successor to sw-precache with more advanced caching strategies and easy precaching.
* upup — a tiny script that makes sure your site is always there for your users.
* The service worker cookbook — A series of excellent service worker/push recipes, showing how to implement an offline app, but also much more.
參見
--

* Google Developers 的 Progressive web apps
* Alex Russell 寫的 Progressive Web Apps: Escaping Tabs Without Losing Our Soul
* Progressive Web Apps Check List
* Google 的 The Lighthouse Tool
* Tools for building progressive web apps with Angular
* React PWA Guide Kit
* Offline-capable Pokédex web site
* Hacker News readers as Progressive Web Apps
MathML
======

**Mathematical Markup Language (MathML)** 是一種基於 XML (en-US) 的延伸，可以用來描述數學符號以及保留數學式結構和內容。在這裡你可以找到參考文件, 範例以及工具。你可以從 slides for the innovation fairs at Mozilla Summit 2013 做個快速的大致瀏覽。

MathML references
-----------------

MathML element reference (en-US)

關於每一個 MathML element 的細節及其在桌面環境和瀏覽器的支援情形。

MathML attribute reference (en-US)

關於可改變 MathML element 外觀及行為的 MathML attributes。

MathML examples (en-US)

MathML 的範例。透過這些範例你能更明白 MathML 是如何運作的。

Authoring MathML (en-US)

這裡提供一些關於 MathML 的建議以及小提示，包括適當的編輯器以及如何將他們和你的網頁內容整合。

Getting help from the community
-------------------------------

* IRC channel
* Wiki used by Mozilla contributors
* W3C Math Home
* www-math w3.org mail archive
Tools
-----

* W3C Validator
* FireMath Firefox add-on
* Mathzilla Firefox add-on collection
* LaTeXML - 將 LaTeX 文件編譯為 HTML+MathML 網頁
* Web Equation - 將手寫的數學式轉換成 MathML 或 LaTeX
* MathJax - 使數學式的展現能跨瀏覽器的 JavaScript display engine
Related Topics
--------------

* CSS
* HTML
* SVG
Browser compatibility
---------------------

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

**JavaScript** (簡稱 **JS**) 是具有一級函數 (First-class functions) 的輕量級、直譯式或即時編譯（JIT-compiled）的程式語言。它因為用作網頁的腳本語言而大為知名，但也用於許多非瀏覽器的環境，像是 node.js、Apache CouchDB。JavaScript 是一個基於原型的 (Prototype-based (en-US))、多範型的、動態語言，支援物件導向、指令式以及宣告式 (如函數式程式設計) 風格。

本章節主要說明 JavaScript，不涉及網頁特有項目或主機環境。有關網頁特有的 APIs ，請參考 Web API 和 DOM。

JavaScript 所採用的標準是 ECMAScript Language Specification（ECMA-262），自 2012 年起，所有現代的瀏覽器均已全面支援 ECMAScript 5.1。較老舊的瀏覽器最少也會支援 ECMAScript 3。ECMA International 於 2015 年 6 月 17 日發布第六版的 ECMAScript，其正式名稱是 ECMAScript 2015，原先被稱作 ECMAScript 6 或 ES6。從那時起， ECMAScript 標準的發布週期是一年，本文件參考了最新的草稿版本，也就是目前的 ECMAScript 2017。

別搞混了 JavaScript 和 Java 程式語言。雖然 "Java" 和 "JavaScript" 都是 Oracle 公司在美國和其他國家的商標或註冊商標，但兩個語言有著非常不同的語法、語意和用途。

教學
--

透過指南和教學來學習編寫 JavaScript。

### 給完全新手

如果你想學習 JavaScript 但過去沒有 JavaScript 或程式設計經驗，請前往 JavaScrip-動態的用戶端指令。該處完整單元如下：

JavaScript 入門

說明一些基本問題像是「什麼是 JavaScript？」、「它看來像什麼？」、「它能做什麼？」，也討論 JavaScript 的主要特色，例如變數、字串、數值以及陣列。

JavaScript 組成元素

繼續我們對 JavaScript 主要基本特色的說明，焦點轉向經常碰到的程式碼區塊類型，像是條件式陳述、迴圈、函數以及事件。

介紹 JavaScript 物件

如果你想加深對 JavaScript 語言的認識並撰寫更有效率的程式，理解 JavaScript 的物件導向特質是件重要的事。

### JavaScript 指南

JavaScript 指南

更為詳細的 JavaScript 語言指南，供過去有 JavaScript 或其他語言的程式設計經驗的人看。

### 中階

客戶端 web APIs

在為網站或應用程序編寫客戶端 JavaScript 時，你將很快遇到應用程式介面（API）。 API 是應用程式介面，用於操作運行站點的瀏覽器和操作系統的不同方面，或操縱來自其他網站或服務的資料。 在本單元中，我們將探討 API 是什麼，以及如何使用你在開發工作中經常遇到的一些最常見的 API。

重新介紹 JavaScript

為了那些*以為*他們懂 JavaScript 的人寫的簡介。

JavaScript 資料結構

簡介在 JavaScript 可用的資料結構。

相等值比較和相等度

JavaScript 提供了三種不同的數值比較方式：嚴謹的相等用 `===`，寬鬆的相等用 `==，`以及 `Object.is()` (en-US) 方法。

閉包（Closure)

閉包（Closure）是函式以及該宣告函式所包含的作用域環境（lexical environment）的組合。

### 進階

繼承與原型鍊

對於原型繼承的常見的迷思和誤解。

嚴謹模式

嚴謹模式會禁止你使用未初始化過的變數。這樣的限制源自於 ECMAScript 5 的規範，為了提高效率和簡化偵錯。

JavaScript 型別陣列

JavaScript 類型陣列提供一個存取二進制資料的機制。

記憶體管理

JavaScript 的記憶體生命週期和垃圾回收機制。

併行模組和事件循環

JavaScript 具有基於「事件循環」的併行模組。

參考
--

瀏覽完整的 JavaScript 參考文件。

標準內建物件

瞭解標準內建物件： `Array`、 `Boolean`、 `Date`、 `Error` (en-US)、 `Function` (en-US)、 `JSON`、 `Math`、 `Number`、 `Object` (en-US)、 `RegExp` (en-US)、 `String`、 `Map`、 `Set`、 `WeakMap` (en-US)、 `WeakSet` (en-US) 等等。

表式法與運算子

瞭解更多 JavaScript 運算子的行為：`instanceof` (en-US)、 `typeof`、 `new`、 `this`、運算子優先序等等。

敘述和宣告 (en-US)

瞭解 `do-while`、`for-in`、 `for-of` (en-US)、 `try-catch`、`let`、 `var`、 `const`、 `if-else`、 `switch` 和其他 JavaScript 敘述和關鍵字的運作方式。

函數 (en-US)

瞭解如何運用函數來開發你的應用程式。

工具與資源
-----

有用的工具和資源幫助你更好的撰寫及除錯 **JavaScript** 程式碼。

Firefox 開發工具

網頁主控台 (Web Console)、JavaScript 效能分析器(JavaScript Profiler)、除錯器 (Debugger) 等等。

JavaScript Shell

JavaScript Shell 讓你更快的測試片段的 JavaScript。

TogetherJSPaste

合作更簡單了。藉著在你的網站增加 TogetherJS，你的用戶們能在網站上互助 in real time！

Stack Overflow

Stack Overflow 上有關 JavaScript 的問題。

JSFiddle

編輯 JavaScript、CSS、HTML 並取得及時結果。可以使用外部資源和與在線上與你的夥伴協作。
Demos of open web technologies
==============================

Mozilla 支援豐富、廣泛且扣人心弦的網路公開技術，並且我們鼓勵使用他們。這個頁面提供一些展示這些有趣技術的連結，包含那些曾經在 Demo Studio 有人氣的，但現在已經落伍了的技術。如果你知道有關於新的網路公開技術，不錯的展示或是應用程式，請將連結加到下方適合的區塊中。

2D 繪圖
-----

### Canvas

* An interactive blob using javascript and canvas (fun)
* Blob's demos
* Canvas3D & Flickr
* Playing with Canvas
* Using the Canvas Html element5
* RayCaster
* MSX Emulator
* processing.js
* 3D on 2D Canvas
* miniPaint - Image editor (source code)
### SVG

* Bubblemenu (visual effects and interaction)
* HTML transformations using `foreignObject` (visual effects and transforms)
* Phonetics Guide (interactive)
* 3D objects demo (interactive)
* Blobular (interactive)
* Video embedded in SVG (or use the local download)
* Summer HTML image map creator (source code)
* SVG/CSS demo firefox developer edition design by Rober Villar from Software RVG (source code) (debug mode)
### 影片

* Video 3D Animation "mozilla constantly evolving" Designed by Rober Villar ,SoftwareRVG developer.
* Video 3D animation "Floating Dance" . Designed by Rober Villar , developer from SoftwareRVGdesignS.
* Streaming Anime, Movie Trailer and Interview
* Billy's Browser Firefox Flick
* Virtual Barber Shop
* Transformers Movie Trailer
* A Scanner Darkly Movie Trailer (with built in controls)
* Events firing and volume control
* Dragable and sizable videos
3D 繪圖
-----

### WebGL

* Web Audio Fireworks
* IoQuake3 (source code)
* Escher puzzle (source code)
* Kai 'Opua (source code)
### 虛擬實境 ( Virtual Reality )

* The Polar Sea (source code)
* Sechelt fly-through (source code)
CSS
---

* CSS floating logo " mozilla " developed by Rober Villar , from Software RVG. (debug mode)
* CSS floating logo " mozilla " developed by Rober Villar , from Software RVG. (source code)
* Paperfold
* CSS Blockout
* Rubik's cube
* Pure CSS Slides
* Planetarium (source code)
### 轉換 ( Transformations )

* Impress.js (source code)
遊戲
--

* IoQuake3 (source code)
* Kai 'Opua (source code)
HTML
----

* Zen Photon Garden (source code)
Web APIs
--------

### 提示工具的 API

* HTML5 Notifications (source code)
### 網路 API

* Web Audio Fireworks
* oscope.js - JavaScript oscilloscope
* HTML5 Web Audio Showcase (source code)
* HTML5 Audio Visualizer (source code)
* Graphical Filter Editor and Visualizer (source code)
### 檔案的 API

* Slide My Text - presentation from plain text files
### Web Workers

* Web Worker Fractals
* 圖片編輯器
* Coral generator
* Raytracer
* HotCold Touch Typing
Web media technologies
======================

這些年來，網頁來表達，創作及運用視訊及音訊以至其他媒介的能力不斷上升。今時今日存在了 大量可供運用的 API 及 HTML 元件，DOM 介面，及其他不止於 發揮傳統效果，還能與其他網頁層面的技術產生協同效應和真實地令人深刻銘記 的特效。本文列出不同的 APIs 和連結其詳細資料的超連結，希望你能認為這些資訊能幫你盡快純熟這些技術。

References
----------

### HTML

這些文章包括 HTML 特效，供ＨＴＭＬ媒體開發者參考。

`<audio>` (en-US)

`<audio>` 元件，這是用來在網頁裡播放音效。此元件能 不被看見地運用來 作為一個 供更多其他繁雜的媒介放置的 位置。當然，也能放置一些可看見的控制器予用家來控制是否重播這些音訊。

`<video>` (en-US)

`<video>` 元件，這是一個為了視訊內容在網頁裡播放的端點(endpoint)．它能被簡單地只用作表現視訊，或者用作一個位置來放置即時視訊內容(streamed video).`<video>也能被用作一個途徑來連結媒介APIs和其他HTML及DOM技術,當中包括` `<canvas>` (這是作 frame grabbing(?) 和其管控).

### APIs

Media Capture and Streams API

這是一個參考資料，關於串流，記錄，管控媒體資料，無論是本地的，透過網路的。這些包括本地的攝錄機及來捕流視訊，音效或圖像的麥克風。

Web Audio API

你可以藉由此 API 產出、篩選及操作即時的聲音或是預先錄製好的材料，然後將音效送至`<audio>`元件、影音串流或是儲存起來。

WebRTC (en-US)

WebRTC (網頁即時通訊)能夠即時地串流影音，也能夠透過網際網路將兩個人的訊息資料互相傳遞，而不需要任何媒介。

指南
--

網頁傳播媒體的概述

支援影音撥放，操作與紀錄的網頁科技與 API 的概論。如果你不知道該使用哪一個 API，請從這裡開始。

Other topics
------------

Related topics which may be of interest, since they can be used in tandem with media APIs in interesting ways.

The Canvas API

The Canvas API lets you draw into an `<canvas>`, manipulating and changing the contents of an image. This can be used with media in many ways, including by setting a `<canvas>` element as the destination for video playback or camera capture so that you can capture and manipulate video frames.

WebGL (en-US)

WebGL provides an OpenGL ES compatible API on top of the existing Canvas API, making it possible to do powerful 3D graphics on the Web. Through a canvas, this can be used to add 3D imagery to media content.
:first-of-type
==============

在 CSS 虛擬類別（pseudo-class）中，**`:first-of-type`** 代表本節點為兄弟節點中第一個此類型節點。


```css
/\* 選取第一個出現在父節點下的<p>，不考慮其在所有子節點中的位置。 \*/
p:first-of-type {
  color: red;
}
```


**備註：** 在初始定義中，被選取的節點必須擁有父節點。從選取器層級 4（Selectors Level 4）開始已經不再有這個限制了。

語法
--

Error: could not find syntax for this item範例
--

### 例一：選取第一段文章

來考慮以下 HTML:


```html
<h2>Heading</h2>

<p>Paragraph</p>

<p>Paragraph</p>
```


及 CSS:


```css
p:first-of-type {
  color: red;
}
```


會有這樣的效果 － 只有第一段文章變為紅色，因為它是 body 中第一個文章節點：

### 例二：預定通用選擇器（Assumed universal selector）

這個範例展示了當沒有指定一般選擇器（simple selector）時，通用選擇器是如何被預判。

首先來看 HTML：


```html
<div>
  <span>This `span` is first!</span>
  <span>But this `span` isn't.</span>
  <span>This <em>nested `em` is</em>!</span>
  <span>And so is this <span>nested `span`</span>!</span>
  <b>This `b` qualifies!</b>
  <span>This final `span` does not.</span>
</div>
```


接著是 CSS：


```css
div :first-of-type {
  background-color: lime;
}
```


會有這樣的效果:

特定規格
----

| Specification |
| --- |
| Selectors Level 4 # first-of-type-pseudo |

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

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

參見
--

* `:first-child`
* `:last-of-type` (en-US)
* `:nth-of-type` (en-US)
元素選擇器
=====


 \*\*CSS 元素選擇器 （也稱 型態選擇器）\*\*依照 Node 節點名稱選取匹配的 Element 元素。換句話說，此選擇器選取在 Document 文件內所有指定該型態的元素。


```css
/\* 全部的 <a> 元素。\*/
a {
  color: red;
}
```

語法
--
```

element { style properties }
```

範例
--

### CSS


```css
span {
  background-color: skyblue;
}
```

### HTML


```html
<span>Here's a span with some text.</span>
<p>Here's a p with some text.</p>
<span>Here's a span with more text.</span>
```

### Result

規範
--

| Specification |
| --- |
| Selectors Level 4 # type-selectors |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
後裔選擇器
=====

簡介
--

`␣` 組合符號 (代表空白, 或更精準地說，代表一或多個空白字元) 結合了兩種選擇器，選擇了只有當第二個選擇器的目標為第一個選擇器目標的後裔時的元素，後裔選擇器跟子選擇器相似，但是不要求披對的元素要是嚴格是父子關係。

語法
--
```

selector1 selector2 { style properties }
```

範例
--


```css
span {
  background-color: white;
}
div span {
  background-color: DodgerBlue;
}
```



```html
<div>
  <span
 >Span 1.
    <span>Span 2.</span>
  </span>
</div>
<span>Span 3.</span>
```

Specifications
--------------

| Specification |
| --- |
| Selectors Level 4 # descendant-combinators |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
:first-child
============

`:first-child`是CSS當中的一種偽類別（pseudo-class），代表任何身為長子的元素（親元素的第一個子元素）。

語法
--

Error: could not find syntax for this item範例
--

### 範例 1

#### HTML 內文


```html
<div>
  <span>This span is limed!</span>
  <span>This span is not. :(</span>
</div>
```


#### CSS 內文


```css
span:first-child {
  background-color: lime;
}
```


呈現效果如下：

### 範例 2 - 使用 UL

#### HTML 內文


```html
<ul>
  <li>List 1</li>
  <li>List 2</li>
  <li>List 3</li>
</ul>
```


#### CSS 內文


```css
li {
  color: red;
}
li:first-child {
  color: green;
}
```


呈現效果如下：

規格
--

| Specification |
| --- |
| Selectors Level 4 # first-child-pseudo |

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

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

參見
--

* `:last-child` (en-US)
* `:nth-child` (en-US)
* `:last-of-type` (en-US)