底下用三句話來說明什麼是 HTML
舉個例子來說，之前看到我朋友在某個狗狗交友軟體的幾個標記:
#學習建立持續不斷的踏實 #學著有原則的生活#喜歡吃火鍋 #喜歡吃漢堡 #喜歡吃焗烤#喜劇片 #韓劇 #慢跑 #山林踏青#棉花糖 #吳汶芳 #白安 #五月天 #八三夭#喜歡讀非專業和文學以外的書
透過標記就會快速的知道這個人的組成會是什麼樣子，但也許看不太出來長相以及該怎麼進行互動。
同樣的，只有 HTML 的網頁就會像是素顏的女孩子一樣，很可能化過妝後就變成另外一個截然不同的樣貌，而化妝就是 CSS 的功用。
網頁瀏覽器透過讀取 HTML 檔案，並依照 DOM 的規範將其 render 成網頁，JavaScript 則透過操作 DOM tree 中的節點來達到與使用者進行互動的目的。
HTML 是透過**文件物件模型（Document Object Model, DOM）**這種結構化表示法來描述網頁，透過 DOM 的收納管理規範來整理和存取。
以看妹來說，我們會很快掃過臉、三圍、腿、化妝、穿著，並依照分類快速的尋找想要注意的亮點。
DOM tree 就是為了幫助我們了解物件節點之間的關係，並提供程式改變和存取網頁中的物件的方法。
此外 DOM tree 節點也可以附加事件處理程序，一旦觸發事件就會執行處理程序，網頁就能與程式語言連結在一起。
底下這個網站是 Live Dom Viewer 推薦大家玩看看。
HTML5 是由全球資訊網協會 (W3C) 制定的 HTML 最新修訂版本標準，目標是取代 1999 年的 HTML 4.01 和 XHTML 1.0，在網際網路應用 (PWA) 迅速發展時，網路標準也能符合當代網路需求。
目前 HTML5 會是 Living Standard 也就是說近年不會再出現 HTML 6。
Project Fugu 這個網站記錄了 Chrome 團隊即將開發的新功能和潛在功能的完整列表，M$ 也將新的 edge 底層抽換成 Chromium 原則上 PWA 接下來的發展是值得繼續期待的。
HTML5 可以想像成目前日韓流行的一些標準，這些標準會受到萬千少女的模仿和追逐，像是日韓系的裝扮、日韓系的飲食、日韓系的電器都會逐漸進入到我們生活的一環。
底下列出幾個 HTML5 的酷炫功能:
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，但隨著頁面的增加就可以用樣板進行優化。
常見 HTML 的樣板語言像是 ejs 或是 pug，可以在原本的 HTML 中加入判斷、迴圈、模組化、套用模板等等優化的功能。
網頁實作上可以在 Server render 時將產生的 html string 使用 node 內建的 util.format() 去取代相關變數:
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>
透過樣板的撰寫，就可以做到在同樣版型的頁面顯示個別內容，以交友的角度來看，就會是歐兔版常見的罐頭發文或信件嗎?!
要寄信給女孩子自我介紹的時候，基本的架構其實大多相同，僅僅是內容和版面略有落差，這也就是為什麼每篇文章最後都會防罐頭了。
iThome鐵人賽
看影片追技術