HTML是什麼？

前兩天有一個 Claude Code 的工程師在推特上又發了個文章，說是要把 Markdown 過時了，推薦用 HTML，然後就看到一圈人跟風，說什麼不要用 Markdown 了，彷彿之前吹和 AI 交互要首選 markdown 的文章沒寫過一樣哈哈。你會發現，很多時候，國外的一些大佬，放個屁轉到國內都是香的....當然也不否認，有些國外大佬的想法確實挺好的。

但產品好不好，還是要從場景出發，不能訴諸權威，別人說什麼，你也人云亦云的說“好好好”。

我理解他的意思大概是說 HTML 可以承載的信息比 Markdown 更豐富，比如說，可以畫出來表格，做設計的 Demo，包括我自己也會用 HTML 做小程序的 demo，這是 markdown 替代不了的。

HTML 能承載的信息比 Markdown 豐富得多。除了基本的文檔結構（標題、格式化），它還能表達各種其他類型的信息：

• 表格數據（用 table）
• 設計數據（用 CSS）
• 插圖（用 SVG）
• 代碼片段（用 script 標籤）
• 交互元素（用 HTML + JavaScript + CSS）
• 工作流程圖（用 SVG 和 HTML）
• 空間數據（用絕對定位和 canvas）
• 圖片（用 img 標籤）

我發現如果不讓模型用 HTML，它就會在 Markdown 裏做一些很勉強的事，比如畫 ASCII 圖。我最喜歡的一個例子是，它試圖用 Unicode 字符來「估算」顏色，就像下面這張 Claude Code 的截圖

但是，我們從與 AI 高效協作的場景出發，涉及到寫產品文檔類的場景，其實還是用 markdown 去處理比較好，這類場景不需要很多複雜的交互等，所以 HTML 並不是所有的場景都適用。

扯了半天，可能都還不知道什麼叫 HTML，這篇選題其實之前就規劃好了，沒想到碰到這麼個事，就多說了一點。

我們平時上網看到的大部分頁面都是用 HTML 代碼生成的。

1990 年以前，HTML 還沒有誕生，我們想看一份文件，需要知道它存在哪裏，用什麼格式打開，朋友想給我發個文件，只能通過郵件，甚至是光盤發過來，十分不方便。

有個大佬叫 Tim Berners-Lee，就發明了 HTML 這個語言，可以把所有的文檔互相連結，直接瀏覽器打開就行了，而且全世界通用，任何設備都能訪問，十分便利。

最初，HTML 只有 18 個標籤。只能顯示文字和連接。

現在 30 多年過去了，HTML 已經進化到了第五代，能夠播視頻，能夠畫畫，能夠做遊戲甚至。我們看到的大部分的網頁、APP 的內嵌頁面，基本上都是 HTML 去做的，它成了我們互聯網上網的一個基礎設施。

我們都知道，在蓋房子之前，都要先畫一份圖紙。讓建築師畫一份設計圖，然後工程師們照着施工圖紙去蓋，HTML 就是這樣的一份圖紙，它告訴網頁哪裏是放畫畫的，哪裏是放大標題的，哪裏是放視頻的，按什麼順序去排列。

一般來說，一個網頁就是一份 HTML 文件，它由三部分組成：

一是 HTML，它負責網頁的骨架，承重牆的位置、門窗放哪，都由它決定；

二是 CSS 代碼，它負責網頁的裝修，頁面是什麼顏色，是什麼佈局，都由它決定；

三是 JavaScript，它負責通水電，決定網頁的交互和動態效果，就像裝修的時候要買哪些電器，開關網線怎麼搞，都由它決定。

最後，HTML 代碼經過瀏覽器解析，比如常見的 Chrome、Safari、Edge 這些瀏覽器，就呈現出了我們看到的效果。

在 HTML 有各種各樣的標籤，這個我們其實不用學，因為有 AI，它懂就夠了，我這裏就簡單選 2 個講：

1. 標題、段落
   
          HTML 會把標題這些標註，用尖括號包裹起來，比如 <h1>這是大標題</h1>，這樣做網頁渲染出來，就會看到大字號的“這是大標題”。同理，段落也是用標籤包裹起來的，它的符號是 <p>這裏是段落</p>，渲染出來後，就會看到一段普通的文字。
2. 圖片
   
          圖片一般會用下面的代碼來表示 <img src="圖片地址" alt="圖片描述">，渲染出來是圖裏這樣的效果：

其它還有很多比如連結、視頻等，就不展開了，我覺得這個作為了解就夠了，不用學。

如果在打開的網頁，按 F 12 查看源代碼，就能看到頁面對應的 HTML 代碼。