精華筆記 Notion 3.6 推出 HTML Block：一句話就能把計算機、測驗、小遊戲塞進頁面裡
原片講者:Notion
還記得以前想在 Notion 頁面裡放一個互動計算機、一張會動的流程圖，甚至一個小測驗，結果只能貼一串醜醜的第三方 embed 連結，載入慢、樣式又跟頁面完全不搭嗎？2026 年 7 月 1 日，Notion 隨著 3.6 版本正式推出了 HTML Block（HTML 區塊），這件麻煩事終於有了原生解法。
這篇文章幫你把官方資訊整理清楚：HTML Block 到底是什麼、怎麼用、實際能做出哪些東西，以及最重要的——它做不到什麼。台灣的上班族、內容創作者、還有愛玩 AI 工具的朋友，看完就能直接上手。
這是什麼？
簡單一句話：HTML Block 讓你把一段完整的 HTML、CSS、JavaScript 程式碼，直接變成 Notion 頁面上的一個互動區塊。
官方的說法是：「Notion Agents 現在可以建立互動式 HTML 區塊了，而我們玩到停不下來。」（原文：Notion Agents can now create interactive HTML blocks, and we can't stop tinkering with them.）
過去 Notion 頁面上的內容基本上是「靜態」的——文字、圖片、資料庫、內嵌連結。而 HTML Block 打破了這條界線：只要是網頁能做的東西，現在都能活在 Notion 頁面裡。計算機、圖表、白板、流程圖，甚至一個可以真的玩的俄羅斯方塊（Tetris）小遊戲，都能塞進去。
而且最棒的一點是：這些區塊就住在 Notion 裡，團隊裡任何人都能直接使用它、或是再拿去改。不用另開一個網站、不用維護一台伺服器、不用付第三方工具的月費。
怎麼用？三種建立方式
根據官方與社群實測，建立一個 HTML Block 有三種方法：
| 方式 | 適合誰 | 說明 |
|---|---|---|
1. 輸入 /HTML 指令 |
會寫一點程式、或手上已有現成程式碼的人 | 在頁面任一處輸入 /HTML，插入區塊後直接貼上你的 HTML／CSS／JS 程式碼 |
| 2. 上傳 HTML 檔案 | 用 AI 工具（例如 Claude）產生好整份網頁的人 | 把外部產好的 .html 檔上傳，Notion 會直接渲染 |
| 3. 請 Notion AI 幫你生成 | 完全不會寫程式的一般使用者 | 用一句白話描述你要什麼，交給 Notion Agent 自動產生 |
第三種方式是這次更新真正的重點：你不需要會寫程式。只要打一句「幫我做一個計算投資報酬率的互動計算機」，Notion Agent 就會幫你把 HTML 區塊生出來，還能來回微調。
區塊建立完成後，它的操作方式跟一般 embed 很像——可以移動、可以縮放大小、可以收進 toggle 折疊選單裡，也可以用彈出（pop-up）模式全螢幕檢視。
實際能做什麼？官方推薦的三個場景
Notion 官方在發布頁面上，特別點名了三個他們自己「玩到停不下來」的應用：
一、做一個 ROI 投資報酬率計算機
官方的原話很生動：「看著你的客戶眼睛發亮，因為他們看到用了你的方案能省下多少錢。」你可以讓計算機根據客戶的產業別、目前使用的工具組合等變數，即時算出結果。對做 B2B 業務、SaaS 銷售的人來說，這是把冷冰冰的報價變成互動體驗的利器。
二、把文件變成互動測驗
把一份介紹新功能的文件，變成一個團隊記得住的互動測驗。Notion Agent 會自動判斷文件裡「哪些是重點」、生成相關題目，最後還會幫作答者計分。做內部訓練、新人教育訓練、知識驗收都很好用。
三、畫出你的組織圖
把你的「人員資料庫」視覺化成一張組織圖，讓新人更快熟悉團隊、跨部門協作更順。而且是直接在 Notion 裡完成，不用再開另一個工具。
除了官方這三個，社群實測也證實 HTML Block 能做出：自訂的圖表與圖解（超越 Notion 原生的圖表能力）、流程圖與程序地圖、可拖拉的白板與畫布，以及各種小遊戲。用官方的話說——「任何你能為網頁打造的東西，現在都能直接住在 Notion 裡。」
限制與注意事項（這段最重要，請務必看完）
HTML Block 很強，但它跑在一個**安全沙箱（secure sandbox）**裡，有幾條很硬的界線。這些不是 bug，是刻意的安全設計，理解了才不會踩雷：
| 限制 | 實際影響 |
|---|---|
| 讀不到 Notion 頁面資料 | 區塊本質是「快照」，抓不到你頁面上的即時資料，Notion 內容改了它也不會自動更新 |
| 寫不回 Notion | 使用者在區塊裡輸入的資料，無法回寫進你的工作區或資料庫 |
| 不能呼叫外部 API | 想做即時天氣、股價這類需要連外網的動態小工具，做不到 |
| 記憶只存在本機 | 狀態只會存在該瀏覽器／該裝置，不會跨帳號、跨團隊同步 |
| 程式碼鎖定 | 沒辦法在原地手動改程式碼，要改就得重新上傳或重新生成 |
翻成白話，你要記住這句話：HTML Block 是「互動的靜態圖」，不是「連上你資料庫的動態應用」。
它很適合做：自我完備、輸入即算的計算機、教學測驗、視覺化圖表、示意小工具。它不適合拿來做：需要即時讀寫 Notion 資料、需要多人協作同步、需要串接外部服務的正式應用系統。如果你需要那種等級的東西，還是得走正規的 API 整合或外部應用。
費用與方案
有一點台灣使用者要特別注意：
- 免費方案：可以檢視、也可以嵌入 HTML 區塊。
- 用 Notion AI 自動生成：需要 Business 方案或以上。
也就是說，如果你想「打一句話就自動生一個計算機」，得是付費的 Business 方案；但如果你手上已經有現成的 HTML 程式碼（例如自己用 Claude 產好再上傳），免費方案一樣能用。
結語
Notion HTML Block 這次更新，最大的意義在於把「會寫網頁」這件事的門檻，降到一句話。過去要在文件裡放互動元件，你得會前端、得部署、得維護；現在只要描述你要什麼，AI 就幫你長出來，而且直接活在團隊共用的頁面上。
對台灣的上班族來說，它是做內部訓練測驗、業務報價計算機、組織圖的快速工具；對創作者來說，它是把靜態筆記變成互動體驗的新玩具。只要你心裡清楚它「讀不到即時資料、連不了外網」這條底線，把它用在對的地方，HTML Block 會是 2026 下半年最值得馬上試玩的 Notion 新功能。
打開你的 Notion，輸入 /HTML，或直接跟 Notion AI 說一句話，現在就開始玩吧。
資料來源：Notion 官方 3.6 發布頁（2026-07-01）、Matthias Frank〈How Notion HTML Blocks Work〉實測整理。