我們之前討論到 HTML 如何透過各種不同的層級標籤來建構網站，但大家應該都有發現，我們經常要打許多大於、小於、也不能忘記結束標籤，結構看起來複雜又冗雜。今天，就來介紹易於編譯的模組及語言吧！
html 縮寫模組｜Emmet
按 tab 可以展開 emmet 表示式：
- 接 . 變為元素裡的 class
- 接 {} 裡面內容則可被包為內容，標題、內文直接被填進去
- 利用 div 建構層級關係，包住每張卡片裡的標題、水平線、內文
- div 是最常見的，所以承上也可以不必打 div，直接打 . 接 class 再包住後面的元素。想要兩張卡片，在 .card 後面直接 *2 就變成兩張的物件了（驚）
- 導覽列 ul 裡的 list item 想要有六個，*6 這樣的用法就非常實惠好用
- 若希望清單有編號，可用特殊字元 $ dollar sign，展開後會變成數字
- image 需要給 src、寬高度的屬性，用中括號包住特定網址和屬性
- 綜合應用：bootstrap 為寫好很多的 class 讓我們直接套用，自訂 class 名稱，包住一列 row，再包住一行 column 小螢幕 sm，裡面有小群組 h2、hr、內文 p，再加上一行小螢幕 dash 4，裡面一樣有小群組 h3、hr、內文，用 emmet 按 tab 展開就得到了一個網頁，從剛開始裝的容器、列行與標題及內文，可以快速只打一行就能產生 html 的結構，不用打開始與結束的符號
但也有個缺點，代表寫網站前所有的架構、分割都要確認好，這其實不太可行，所以通常只會拿來寫一小部分，展開後就用完。
Emmet 縮寫大全：https://docs.emmet.io/cheat-sheet/
html 樣板語言｜jade (pug)
用 html 打程式碼有什麼缺點呢？我們要打很多小於大於多層複雜的結構、建立嚴謹的從屬關係但又很難一眼就看懂之間的層級關係、尾端還要再加一個結束的標籤，使得整個網頁原始碼又長又亂。理想的狀況下，我們其實只想知道三件事：
- 標籤是什麼 (div, p, h1..?)
- 標籤有什麼參數跟屬性 (class = “namecard”, style/img 的 src 連結是官網…等)
- 標籤包了什麼內容 (開始跟結束裡面包的, 譬如 h2 裡放了作者的名字、h5 裡有職稱)
於是 jade 樣板語言出現了。我們在 Settings 裡將 HTML Preprocessor 設定為 Pug，如果我們想要連結 link，也就是 a 標籤，在 HTML 視窗右上方再設定 View Compiled HTML，就能看到 jade 自動幫我們展開。屬性透過小括號設定，就能直接變成 html。記得內文跟在標籤後，不能有空格。
想要在網址裡放 div namecard，往右縮打 div.namecard 就完成，跟 emmet 一樣也可以寫成 .namecard 即可。往下再包兩個 circle 打 .circle.circle1 及 .circle.circle2
寫內文則是 h2 後空一格貼內文，就會變成 h2 裡面的內容；想在 h2 裡加 span，換行後縮排空一格貼上要在 span 裡放的內容。當 h2 和 .namecard 的縮排是同一層，namecard 就不會包含 h2，要再縮排才會在 namecard 裡編譯 h2
當東西很多行要空下來換行，但如果單純縮排顏色不太對，要加一條直線 | 才會視為接在原本內容的後方。
使用 jade，我們依然可以透過縮排確認嚴謹的層級關係、藉由小括號將屬性明顯地置放在後面、空一格放內文就不需再放結束標籤。jade 同樣可以用 emmet，而 emmet 是用中括號 [] 代表屬性，^ 是跳出某層級回到上一層級，打完按 tab 展開成 jade。
