數位世界的「樂高積木」
從檔案夾到網頁的秘密
歡迎來到數位世界！在我們開始跟 AI（LLM）溝通之前，我們得先認識這個世界的「基本元素」。想像一下，如果我們要蓋一座「數位城堡」，你需要知道怎麼分類材料，以及每種材料的特性。
你請 AI「改顏色」時，它改的是 CSS。 請它「加計時器」時，它加的是 JS。 請它「多放幾個假名」時，它改的是 HTML。 你已經在跟這三種語言打交道了——今天來認識它們。
📂 資料夾：你的數位收納箱
想像資料夾就是一個個透明的收納箱，它本身不含內容，但能幫你把東西分門別類。點擊下方的資料夾圖示，體驗「層級概念」。
-
✓
它的作用：幫你把東西分門別類。
-
✓
層級概念：收納箱裡可以再放小收納箱（子資料夾）。
-
✓
對 Web 的意義：一個網站通常是由「一整箱」檔案組成的。
📄 內容三兄弟：txt, doc, md
這三種檔案都是用來「裝文字」的，但它們的「個性」截然不同。透過雷達圖比較它們在「輕巧度」、「排版豐富度」以及「AI友善度」上的差異。
📝 .txt — 素顏的筆記本
極簡、不修邊幅。AI 最喜歡它，因為沒有廢話。
👔 .doc — 精心打扮的公文
穿著華麗，記住所有排版。缺點是很重，不適合寫程式。
⚡ .md — 現代的極簡主義者
聰明的速記員。AI 溝通的世界語言，既輕巧又有結構。
🌐 網頁三劍客：HTML, CSS, JS
試著依序點擊下方的開關，看看一個網頁是如何從「只有骨架」，變成「有漂亮裝潢」，最後加上「互動機關」的！
定義「有什麼東西」——
標題、文字、按鈕、圖片
定義「長什麼樣子」——
顏色、大小、排版、動畫
定義「怎麼動」——
點擊反應、計分、計時
👀 程式碼長什麼樣？
不需要記住——只要能「認出」哪段是骨架、哪段是衣服、哪段是肌肉就好。
<!-- 🦴 HTML：定義內容 --> <h1>あ</h1> <p>讀音：a</p> <button id="playBtn">聽發音</button> <!-- 👔 CSS：定義外觀 --> <style> h1 { color: #c87a90; font-size: 48px; } button { background: #ffb7c5; border-radius: 10px; } </style> <!-- 💪 JS：定義行為 --> <script> document.getElementById("playBtn") .addEventListener("click", () => { // 點按鈕時唸出假名 speechSynthesis.speak( new SpeechSynthesisUtterance("あ") ); }); </script>
< >color:click✍️ 動手改一行看看
下面是一段真正的 HTML 程式碼——試著改改看，即時預覽你的修改結果。
🏆 小挑戰
#c87a90，換成 #4a90d9 試試）
📦 一個 .html 檔 = 一個網頁
上週在 Claude 裡看到的「Artifact」，其實就是一個檔案。存下來，雙擊打開，它就是一個獨立的網頁 App。
全部在一個檔案裡
不需要伺服器
對方也能打開使用
🎯 今天的目標
🆕 今天學到的新 prompt 技巧：告訴 AI 「請用純 HTML 寫成單一檔案，不要用 React」——這會讓 AI 產出一個你可以直接存下來、雙擊就能打開的檔案。
🎯 挑戰解答：個人網頁專案規劃
在真正的網頁開發中，這六種檔案會形成一個完整的工作流。點擊下方的任務卡，看看專家會怎麼選擇工具：
最輕巧，不用考慮排版。隨便開個記事本就能寫，餵給 AI 處理也非常乾淨。
用 Markdown 標註出大標題、條列清單。AI 能瞬間看懂你的需求。
正式文件要確保排版精確，Word 能讓對方看到跟你一樣的版面。
瀏覽器唯一看得懂的語言。你在 Markdown 寫的內容，最後都要轉成 HTML 標籤。
獨立的 CSS 檔案讓你的「室內設計」更專業，一次修改整站的顏色。
只要涉及「動作」（儲存資料、跳出視窗、計算），JavaScript 就是負責安裝所有智慧機關的工程師。
🚀 恭喜你！
你已經完成了 Web Literacy 的完整導覽。現在，當你看到 .md 時，你知道那是給 AI 讀的結構；當你看到 .html 時，你知道那是網頁的靈魂。
下一步：打開 Claude，用 Vibe Coding 做出你的第一個有聲日語單字卡 App，然後存成 .html 帶回家！