Chapter 01
HTML5怎麼來的
HTML 最初是 Tim Berners-Lee 在 1991 年為了分享物理論文發明的東西，設計非常簡單。到了 1999 年，W3C 推出 HTML 4.01，但這時候 Web 已經開始商業化，大家發現 HTML 根本不夠用——沒有原生影片、沒有音效、沒有複雜互動。
W3C 決定用 XML 的嚴格規則重寫 HTML，叫做 XHTML。理論上很美，實際上呢？一個標籤沒關閉，整頁白屏報錯。開發者怨聲載道，瀏覽器廠商根本不買單。W3C 還在繼續搞 XHTML 2.0，完全不向下相容，這條路走死了。
1991
HTML 誕生
Berners-Lee 在 CERN 發明，用來分享論文。極度簡單，只有幾個標籤。
1999
HTML 4.01
W3C 正式定案。但 Web 已商業化，HTML 的能力追不上需求，Flash 趁虛而入。
2000
XHTML 的理想主義實驗
W3C 用 XML 嚴格規則重寫 HTML。開發者與瀏覽器廠商都不買單，走入死路。
2004
WHATWG 叛變
Apple、Mozilla、Opera 受夠了，私自成立 WHATWG，核心哲學：向下相容、容錯設計、以現實需求為準。
2014
HTML5 正式定案
W3C 妥協，採納 WHATWG 草稿，HTML5 成為正式標準，帶來 Canvas、Video、WebSocket 等核心能力。
2019 →
Living Standard
兩個組織達成協議，由 WHATWG 統一維護。沒有 HTML6，只有一個永遠在演進的標準。
Chapter 02
Flash的死亡
2010 年 Steve Jobs 發表那封著名的公開信，打的是「開放 vs 封閉」的旗號。但 Flash 棺材上釘得最密的那排釘子，其實是安全性——而且是結構性的、修不完的那種。
2021 年 1 月 12 日，Adobe 在 Flash Player 內建的自毀機制啟動。
— Adobe 官方聲明，2020
為什麼無法修？ Flash 裝機率極高，攻擊一個漏洞等於攻擊全世界。更根本的問題是：漏洞發生在 SWF 檔案的解析階段，網頁載入瞬間就觸發，使用者不需要點任何東西。
最惡劣的組合是 Malvertising（惡意廣告）——攻擊者買廣告版位，把惡意 SWF 塞進去，透過正規廣告網路散佈到全世界的正常網站。你只是去查個食譜就中鏢，完全沒有任何「危險行為」。
Flash 是封閉原始碼，安全研究員沒辦法主動審計，只能等漏洞被發現——通常是被駭客先發現、先利用，研究員再追著跑。某幾年 Flash 幾乎是年度漏洞數量排行榜的常客。
Chapter 03
Newgrounds與那個創作自由的年代
在 Flash 還活著的時候，有一個地方幾乎沒有邊界——Newgrounds。暴力、政治諷刺、NSFW 全部共存，是早期網路反主流創作的重要據點，也是孵化了大量真實人才的奇異溫床。
最特殊的地方是那種單兵作戰的完整性——Flash 工具整合度高，一個人同時是動畫師、程式設計師、音效設計師。這種創作型態在後來的工具生態裡反而很難複製。
Madness Combat
極度暴力的動作系列，但動作設計有真實水準，在平台上引爆風潮。
音樂區
大量獨立音樂人在此起家，部分後來成為業界知名創作者。
互動遊戲
從兒童向到成人向，Flash 遊戲生態包山包海，技術力從業餘到驚人都有。
動畫創作
向量圖縮放不失真、檔案小，在寬頻未普及的年代是完美解法。
NSFW 作品
技術力爐火純青，把 Flash 動態、物理模擬玩到極致的創作者，放進專業公司都是可用人才。
那種氛圍
工具限制和創作自由同時存在才產生的化學反應，這個配方之後沒有再重現過。
Chapter 04
HTML5神級商業案例
與其問「哪些網站用了 HTML5」，不如看哪些網站把這套技術發揮到極致，同時商業上也大成功。
Stripe
FINTECH
官網本身就是前端技術標竿。動態漸層背景、滾動觸發動畫、互動式 3D 圖形，全部純 WebGL + CSS，載入速度還極快。很多前端工程師去研究 Stripe 官網純粹是為了學技術。
Figma
DESIGN TOOL
最極端的案例。整個設計工具跑在瀏覽器裡，用 WebAssembly + WebGL 實現，效能逼近原生應用。直接打趴 Sketch 的商業模式，Adobe 最後花 200 億美元想買它（被監管擋下）。
Apple
PRODUCT PAGE
iPhone 每次發表的產品頁，滾動視差、3D 模型旋轉、文字淡入——全是 HTML5 + JavaScript 做的，而且要在全球各種裝置上跑順，工程難度極高。
Spotify
STREAMING
Web Player 整個是 HTML5 應用，Canvas 做音波視覺化，WebSocket 做即時同步。年度回顧 Wrapped 的互動體驗每年都變成社群話題。
Google Maps
MAPS
2013 年從 Flash 完全遷移到 HTML5 + WebGL，地圖渲染、街景、3D 建築全部重寫。這個規模的遷移本身就是歷史事件。
Chapter 05
純前端能做完整遊戲嗎？
答案是可以，而且有真實案例佐證。單人劇情遊戲需要的一切——邏輯、渲染、音效、存檔——純 JavaScript 全包，不需要任何後端。
Twine 是最直接的例子——專門做互動式敘事遊戲的工具，輸出就是單一 HTML 檔案。沒有資料庫、沒有伺服器，整個遊戲就是一個 .html，可以直接用瀏覽器開，有作品在 Steam 上架販售。
js13kGames 競賽更極端：遊戲壓縮後不能超過 13KB，純 HTML5 + JS，不能用任何外部函式庫。在這個限制下有人做出賽車遊戲、射擊遊戲、平台跳躍遊戲。
劇情資料可以直接寫成 JS 物件，結構清晰，劇本填進去就能跑：
scene_01: {
bg: "assets/bg/forest.webp",
char: "assets/char/hero_normal.png",
text: "你站在森林入口，前方一片漆黑...",
choices: [
{ text: "走進去", next: "scene_02a" },
{ text: "轉身離開", next: "scene_02b" }
]
}
} // 整個遊戲世界，就是一個 JS 物件
Chapter 06
互動式電影遊戲的可能性
有完整劇本的話，電影感其實是 CSS + JS 的強項。黑色寬銀幕遮罩、場景淡入淡出、打字機文字效果、音樂交叉淡化——這些技術加在一起，視覺效果比你想的更接近真正的互動電影。
美術資源最務實的路線是 AI 生圖：鎖定風格批量產出場景背景和角色立繪，壓縮成 WebP 格式，整個遊戲就是一個資料夾、一個 index.html，GitHub Pages 零成本部署。
↑ 這個互動示範本身就是純 HTML + CSS + JS 做的
Chapter 07
Live2D 風格互動角色
Live2D 的核心技術是把一張 2D 插圖分層切割，對每個部件做即時變形、旋轉、位移，造成「立體感呼吸」的錯覺。瀏覽器上完全可以做——Live2D 官方就有出 Web SDK，輸出跑在 Canvas + WebGL 上。
不一定要用官方工具。開源社群的 pixi-live2d-display 整合了滑鼠追蹤、點擊互動、表情切換，直接 HTML 引入就能用。就算不用現成模型，純 CSS + JS 分層視差也能做出相當有感的效果——滑鼠追蹤眼神，大概十幾行程式碼。
官方 Live2D Web SDK
最正宗路線，需要 Cubism Editor 製作模型，輸出 .moc3 格式，JS SDK 載入渲染。VTuber 網頁展示多用此方案。
pixi-live2d-display
開源套件，把 Live2D 整合進 PixiJS，支援滑鼠追蹤、點擊觸發表情，GitHub 文件完整，直接引入可用。
純 CSS 分層視差
AI 生圖分層（頭、眼、嘴、髮），JS 控制位移，滑鼠移動時各層微偏，不需任何外部套件。
眼球追蹤示範
監聽 mousemove，計算角度與距離，translate 眼部元素。效果直覺，十幾行 JS 就有感。
完整的 Live2D 是一個獨立的技術坑，值得另開專題深挖。
技術演進從不停歇
從 W3C 的理想主義失敗，到一群人私自叛變建立新標準——HTML5 的誕生本身就是一個關於「現實主義贏過完美主義」的故事。而它開啟的創作可能性，到現在都還沒被用盡。