HTML5 與 Template 基礎應用: 定義標記語言核心、DOM 樹操作與樣板技術規範 | 前端三分鐘

文章目錄

1. 什麼是 HTML、DOM 與樣板技術？
2. 什麼是 HTML：網頁的骨架與標記語言
3. HTML Template Language：優化靜態網頁開發流程
4. FAQ：HTML 與 DOM 常見問題

什麼是 HTML、DOM 與樣板技術？

HTML (HyperText Markup Language) 是建構網頁的標準標記語言，負責定義網頁的內容結構與語意。當瀏覽器讀取 HTML 時，會將其轉換為 DOM (Document Object Model)，這是一棵由節點組成的樹狀結構，讓 JavaScript 能夠動態地存取並改變網頁的內容與樣式。而 HTML 樣板 (Template) 技術則允許開發者使用如 EJS 或 Pug 等語言，在 HTML 中加入變數、迴圈與邏輯，實現「動態生成內容」並優化開發流程。這三者共同構成了現代網頁從靜態結構到動態互動的技術基礎。

什麼是 HTML：網頁的骨架與標記語言

底下用三句話來說明什麼是 HTML (HyperText Markup Language)：

HTML 是一種基礎技術，是「標記」語言。
HTML 透過標記來描述網站應該由哪些元素所構成。
HTML 常與 CSS、JavaScript 搭配使用於設計網頁、網頁應用、行動應用的使用者介面。

舉個例子來說，之前看到我朋友在某個狗狗交友軟體的幾個標記：

#學習建立持續不斷的踏實 #學著有原則的生活
#喜歡吃火鍋 #喜歡吃漢堡 #喜歡吃焗烤
#喜劇片 #韓劇 #慢跑 #山林踏青
#棉花糖 #吳汶芳 #白安 #五月天 #八三夭
#喜歡讀非專業和文學以外的書

透過標記就會快速的知道這個人的組成會是什麼樣子，但也許看不太出來長貌以及該怎麼進行互動。

同樣的，只有 HTML 的網頁就會像是素顏的女孩子一樣，很可能化過妝後就變成另外一個截然不同的樣貌，而化妝就是 CSS 的功用。

網頁瀏覽器透過讀取 HTML 檔案，並依照 DOM 的規範將其 render 成網頁，JavaScript 則透過操作 DOM tree 中的節點來達到與使用者進行互動的目的。

DOM 文件物件模型：網頁結構的程式化表示

HTML 是透過**文件物件模型（Document Object Model, DOM）**這種結構化表示法來描述網頁，透過 DOM 的收納管理規範來整理和存取。

以看妹來說，我們會很快掃過臉、三圍、腿、化妝、穿著，並依照分類快速的尋找想要注意的亮點。

DOM tree 就是為了幫助我們了解物件節點之間的關係，並提供程式改變和存取網頁中的物件的方法。此外 DOM tree 節點也可以附加事件處理程序，一旦觸發事件就會執行處理程序，網頁就能與程式語言連結在一起。

底下這個網站是 Live Dom Viewer 推薦大家玩看看。

https://software.hixie.ch/utilities/js/live-dom-viewer/

HTML5 的進化：新特性與 Web 標準

HTML5 是由全球資訊網協會 (W3C) 制定的 HTML 最新修訂版本標準，目標是取代 1999 年的 HTML 4.01 和 XHTML 1.0。目前 HTML5 會是 Living Standard，也就是說近年不會再出現 HTML 6。

Project Fugu 這個網站記錄了 Chrome 團隊即將開發的新功能和潛在功能的完整列表，M$ 也將新的 edge 底層抽換成 Chromium 原則上 PWA 接下來的發展是值得繼續期待的。

https://fugu-tracker.web.app/

HTML5 可以想像成目前日韓流行的一些標準，這些標準會受到萬千少女的模仿和追逐，像是日韓系的裝扮、飲食、電器都會逐漸進入我們生活。

底下列出幾個 HTML5 的酷炫功能：

HTML 多國語系：提升全球用戶體驗

HTML 提供了 lang 這個屬性可以指定語系，這對於區域搜尋有加分效果。針對波斯文等右至左閱讀的語言，則可以使用 dir="rtl"。

這就像談戀愛挑戰國際市場 (CCR) 時，略懂幾種語言是理所當然的。小編以前做過伊朗外包網站（如 Saipa, Kia），對此深有體會。

HTML Template Language：優化靜態網頁開發流程

靜態網頁一般會一個頁面寫一個 HTML，但隨著頁面增加，可以用樣板進行優化。常見語言如 EJS 或 Pug。

1
2
3

// EJS 設定範例
app.set("view engine", "ejs");
res.render("index", { title: "我的網站", items: [1, 2, 3] });

在 HTML 中使用 <%- 可以取值。行銷上如 Facebook 社群分享預覽，也需要依照 Open Graph protocol 規則搭配樣板引擎抽換變數。

<!DOCTYPE html>
<html prefix="og: http://ogp.me/ns#">
  <head></head>
  <body>
    <!-- Friends Blog -->
    *<*% if(config.friends) { %>
    <hr />
    <h5>FRIENDS</h5>
    <ul class="list-inline">
      *<*% config.friends.forEach(function(friend){ %>
      <li><a href="*<*%= friend.href %>"> *<*%= friend.title %></a></li>
      *<*% }); %>
    </ul>
    *<*% }%>
    <script>
      childValue = "<%- x1.childValue %>";
    </script>
  </body>
</html>

這就像要寄信給女孩子自我介紹時，基本的架構（樣板）大同小異，僅內容略有落差。這也就是為什麼文章最後都要「防罐頭」了。

FAQ：HTML 與 DOM 常見問題

Q1：HTML 與 DOM 到底有什麼區別？

A：HTML 是您寫在檔案裡的程式碼（文字）；而 DOM 是瀏覽器讀取這些程式碼後在記憶體中建立的物件模型（樹狀結構）。JavaScript 操作的是 DOM，而非原始的 HTML 檔案。

Q2：為什麼現在不再提 HTML6 了？

A：因為 Web 標準已演進為 Living Standard（活標準）。這意味著 HTML 會持續不斷地更新小功能（如新的 API），而不再透過大型的版本號更迭。這讓網路技術能更快速地適應現代硬體的需求。

Q3：學習 EJS 樣板引擎對前端工程師有幫助嗎？

A：非常有幫助。雖然現在流行 React/Vue，但理解樣板引擎的原理能幫助您掌握「資料驅動介面」的核心觀念。此外，在處理簡單的後端渲染頁面或發送 HTML 電子郵件時，EJS 依然是非常高效的工具。

更多相關文章

喜歡這篇文章，請幫忙拍拍手喔 🤣

HTML5 與 Template 基礎應用定義標記語言核心、DOM 樹操作與樣板技術規範