HTML 是什麼？HTML 大全：用它做網頁、簡報、圖卡與動畫

HTML 是用來安排網頁內容與結構的標記語言。標題、段落、圖片、連結和按鈕都可以放進 HTML 文件；加上 CSS、SVG、Canvas 或 JavaScript 後，同一套網頁技術也能做成簡報、視覺圖卡和動畫。這篇「HTML 大全」從一個可開啟的檔案開始，帶你看懂它能做什麼，並實際做出第一頁網頁與第一份 HTML 簡報。

HTML 是什麼？它和 CSS、JavaScript 差在哪裡？

HTML 的全名是 HyperText Markup Language，中文常譯為「超文字標記語言」。它用標籤告訴瀏覽器哪段是標題、內文、圖片或連結。把內容寫進副檔名為 .html 的文字檔，就能用瀏覽器開啟。

一句話記住：HTML 放內容，CSS 管畫面，JavaScript 管互動。

所以「用 HTML 做動畫」通常是指以 HTML 放內容，再用 CSS 或 JavaScript 讓內容動起來。HTML 是承載畫面的文件，不等於獨自包辦設計、繪圖和互動。

HTML 可以做什麼？網頁、簡報、圖卡和動畫都能從它開始

同一份 HTML 文件可以放進不同形式的內容，差別在於你怎麼設計版面與互動。

例如，你可以先做一份可在瀏覽器播放的提案簡報，再把其中一頁設計成社群圖卡。圖卡若要變成 PNG 或 JPG，還需要截圖或加入圖片匯出功能；把 HTML 檔改副檔名不會自動變成圖片。

如何用 HTML 做第一頁網頁？

最短的做法是建立一個 index.html 檔案，寫入內容後用瀏覽器開啟。下面這份範例只有標題、說明和連結，適合先確認整個流程跑得通。

1. 打開純文字編輯器，新建一份檔案。
2. 貼上下面的內容，存成 index.html，編碼選 UTF-8。
3. 用 Chrome、Safari 或其他瀏覽器開啟檔案。修改文字後儲存，再重新整理頁面。

<!doctype html>
<html lang="zh-Hant">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>我的第一頁網頁</title>
</head>
<body>
  <h1>你好，這是我的第一頁網頁</h1>
  <p>我可以在這裡介紹一個作品或活動。</p>
  <a href="https://example.com">查看範例連結</a>
</body>
</html>

在自己的電腦開啟，只代表檔案可以預覽。若要讓其他人透過網址看到，還要把檔案放到可公開存取的網站空間，並確認連結真的能在未登入的裝置開啟。

想讓 AI 依你的主題排版，可以再把下面這段當成第二步：

請把「[品牌或活動]」做成一頁式 HTML 網頁，給「[目標讀者]」看。
頁面依序包含：[主標題]、[三個重點]、[作品或活動說明]、[聯絡方式]。
請輸出完整的 index.html，使用繁體中文，手機與電腦都能閱讀。
請用 CSS 排版，保留清楚的標題層級；圖片要有替代文字。
請不要捏造品牌成果、客戶評價或聯絡資料，缺少的內容用方括號標示。
交付前列出需要另外保存的圖片、字型與公開上線步驟。

如何用 HTML 做簡報？先把每一頁當成一個區塊

HTML 簡報的核心是把內容拆成數個投影片區塊，再設定每頁只顯示一個重點。最簡單的結構可以是「封面、問題、做法、結果」，接著用 CSS 控制畫面比例與字級，需要換頁按鈕時再加入 JavaScript。

1. 先寫下簡報給誰看，以及看完希望對方記住什麼。
2. 替每頁安排一個標題、一個重點和必要的圖表或圖片。
3. 用 HTML 建立每頁內容，檢查投影時是否看得清楚。
4. 加入換頁功能，測試鍵盤、滑鼠和手機操作。
5. 保留原始檔，最後再檢查離線能否開啟、圖片是否載入、文字能否修改。

如果你想請 AI 幫忙做第一版，可以直接複製這段需求，再把中括號換成自己的內容：

請把「[主題]」做成一份給「[觀眾]」看的 HTML 簡報，共 [頁數] 頁。
每頁只有一個重點，內容依序包含：[列出每頁重點]。
請輸出可在瀏覽器開啟的完整 HTML 檔，使用繁體中文，版面適合 16:9 投影。
請加入上一頁、下一頁與鍵盤切換功能，並檢查手機畫面不會裁切文字。
請列出需要另外保存的圖片或字型。若使用外部資源，請說明離線時會失效的部分。

生成後先拿自己的內容逐頁檢查。AI 可以幫你排第一版，但資料正確性、重點取捨和圖片使用權仍要由你確認。

如何用 HTML 做圖和動畫？先選對輸出形式

要做圖卡，HTML 適合安排文字與圖表的版面；CSS 可以設定字級、留白、配色，SVG 適合線條、圖示與可縮放的向量圖，Canvas 則可用程式繪製像素畫面。要讓文字淡入或卡片移動，可以使用 CSS 動畫；更複雜的互動再交給 JavaScript。

製作前先決定成品要留在瀏覽器裡互動，還是要交付一張靜態圖片。前者可以保留按鈕、篩選和動畫；後者需要額外輸出為 PNG、JPG 或其他圖片格式。HTML 簡報也不會因為有動畫，就自動變成影片檔。

AI 做好的 HTML 要怎麼改？「可編輯」和「能另存」要分開要求

HTML 檔本來就能用文字編輯器改原始碼；如果你希望在畫面上直接點文字修改，成品還必須實作編輯功能。瀏覽器的 contenteditable 可以讓指定區塊接受文字編輯，但「畫面能改字」不代表修改會自動存回原檔。

我們在《神奇 AI 簡報課》的示範裡，直接改頁面標題，再用「另存 HTML」存成新版本。想請 AI 做出同樣的操作，需求可以寫得更明確：

請在這份 HTML 投影片加入編輯模式，讓我能直接在頁面上修改標題與內文。
編輯時保留原本的版面、字體、顏色與互動效果。
請實作「另存 HTML」按鈕，將修改後的內容下載成一份新檔，不覆蓋原檔。
另存後請檢查新檔可以重新開啟，且修改過的文字仍在；若有外部圖片或字型依賴，請列出。

實際驗收時，至少試一次「改字、另存、關閉、重新開啟」。重新開啟後內容還在，才算真的拿到可交付的新版本。

HTML 新手常見的三個卡點

• 存錯檔名：檔案要以 .html 結尾，且不要被編輯器存成 .html.txt。
• 本機看得到，別人看不到：電腦裡的檔案路徑不是公開網址；要分享給別人，需上傳到可公開存取的位置。
• 外部素材失效：圖片、字型或程式如果只靠網路載入，離線打開時可能缺一塊。交付前用未連網環境測一次。

常見問題

完全不會寫程式，可以用 HTML 做簡報嗎？

可以先用 AI 產生第一版，再用本文的檢查清單逐頁修改。你仍需要決定內容重點，並測試換頁、字級、圖片和離線開啟是否正常。

HTML 可以直接變成圖片或影片嗎？

HTML 是瀏覽器讀取的文件格式。要交付圖片，需要截圖或圖片匯出流程；要交付影片，還需要錄製或影片輸出流程。

網頁和 HTML 簡報可以用同一個檔案嗎？

可以共用 HTML 技術，但畫面設計不同。網頁通常要讓手機與電腦順暢捲動；簡報則重視固定比例、遠距離閱讀和換頁操作。建議各自輸出並測試。

在畫面上修改文字後，關掉瀏覽器會保留嗎？

不一定。單純讓文字可編輯，不代表已儲存到檔案。需要另存、下載或其他儲存機制，並在重新開啟後驗證。

想繼續做一份可編輯的 HTML 簡報？

如果你已經有一份報告、表格或提案，想把它做成能展示、能互動的 HTML 投影片，可以看《神奇 AI 簡報課》線上教學買斷版。想在做作品時有人回答問題並檢視成品，也可以看真人陪跑版。課程由奎嵐與姵瑾（AI Bunny）一起帶，從資訊骨架、圖表選擇到 HTML 互動簡報實作。

參考資料

• MDN：學習 HTML
• MDN：Canvas 繪圖教學
• MDN：使用 CSS 動畫
• MDN：contenteditable 屬性

讀完想直接用？我把整套 Threads 自動經營流程做成一個 Claude Skill，點下面看商品介紹。