HTML DOM、HTML5、HTML Template: 從把妹角度理解前後端如何和平相處 | 前端三分鐘

文章目錄

1. 什麼是 HTML
2. HTML Template Language

什麼是 HTML

底下用三句話來說明什麼是 HTML

HTML (HyperText Markup Language) 是一種基礎技術是 “標記” 語言。
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/

HTML vs HTML5

HTML5 是由全球資訊網協會 (W3C) 制定的 HTML 最新修訂版本標準，目標是取代 1999 年的 HTML 4.01 和 XHTML 1.0，在網際網路應用 (PWA) 迅速發展時，網路標準也能符合當代網路需求。

目前 HTML5 會是 Living Standard 也就是說近年不會再出現 HTML 6。

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

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

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

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

HTML 多國語系

HTML 提供了 lang 這個屬性可以指定節點的語系，這個標記對於區域搜尋有加分效果，舉例來說想在台灣地區易被搜尋就可以

<!DOCTYPE html>
<html lang="zh-TW">
  <head>
    <meta charset="UTF-8" />
    <title>台灣</title>
  </head>
  <body>
    <p lang="en">english</p>
  </body>
</html>

某些國家的語言像是波斯文，文字是由右至左進行閱讀的 HTML 也提供了 dir 這個屬性就可以做到，像是 <html dir="rtl"> 或是 <h1 dir="rtl">。

不過在其他樣式上仍然需要微調，不過大致上設定完成後網頁的易讀性就已經高很多了，會知道這件事情是因為以前做過伊朗外包給我們公司的相關網站 Saipa Website、Kia Website、Hyundai Website。

有個建議是可以直接寫在 html 或 body Tag 中，之後底下其他的直接繼承就不用再定，不過過往經驗 php send mail 的 html Body 裡面不能用＂，所以可能要寫成這樣 body dir=RTL。

以談戀愛來說，若是想要挑戰國際市場 CCR 時，除了 Body Language 以外，略懂略懂幾種語言的談情說愛方式也是理所當然的，若要針對區域優化，更改自己租屋的屬性加入男女分租的公寓也是個好方法。

HTML Template Language

靜態網頁一般會一個頁面寫一個 HTML，但隨著頁面的增加就可以用樣板進行優化。

常見 HTML 的樣板語言像是 ejs 或是 pug，可以在原本的 HTML 中加入判斷、迴圈、模組化、套用模板等等優化的功能。

網頁實作上可以在 Server render 時將產生的 html string 使用 node 內建的 util.format() 去取代相關變數:

1	util.format(final, x1, x2, x3, x4, x5);

這類頁面其實就很適合透過樣板來進行處理，express 文件官方建議的是 jade (後來的 Pug)，但需要習慣特殊語法，EJS 用法跟 JavaScript、HTML 語法很像較容易上手。

// 設定相關位置
app.set("views", path.join(__dirname, "views"));
// res.render 時使用解析引擎
app.set("view engine", "ejs");
// 使用物件傳遞參數
res.render("index", { x1, x2, x3, x4, x5 });

然後就可以直接在裡面 <%- 取 unescaped value，文件中有其他的詳細介紹，行銷上以 facebook 社群分享的預覽畫面為例，也需要依照 Open Graph protocol 的規則搭配樣板引擎去抽換相關變數，透過 facebook 的偵錯工具可以確認結果。

<!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>

透過樣板的撰寫，就可以做到在同樣版型的頁面顯示個別內容，以交友的角度來看，就會是歐兔版常見的罐頭發文或信件嗎?!

要寄信給女孩子自我介紹的時候，基本的架構其實大多相同，僅僅是內容和版面略有落差，這也就是為什麼每篇文章最後都會防罐頭了。

更多相關文章

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

HTML DOM、HTML5、HTML Template 從把妹角度理解前後端如何和平相處

什麼是 HTML

DOM 文件物件模型

HTML vs HTML5

HTML 多國語系

HTML Template Language

站內搜尋

其他相關文章

最新的文章