前端工程師網頁開發神器Emmet入門教學,它有何作用呢?
目錄
身為一個前端工程師，一定要裝一個「省時神器」 Emmet 外掛，可以大大節省前端工程師在編寫 HTML 及 CSS 的時間。省下的時間可以讓你去體驗人生各種美好的事物，如玩玩喵星人、上上健身房運動等等。
Emmet 支援的網頁編輯器如下圖：
安裝下載的方式因個網頁編輯器而異，且在網路上皆可以查到教學，故此省略。以下小編先介紹基本的使用方式：
快速產生標籤名稱 （Tag Name）
前端工程師在寫網頁的第一步，就是在網頁編輯器中開出新的頁面，並產生標準的 HTML5 樣板。透過 Emmet，我們可以先在編輯器中輸入「!」或是「html:5」後，再按下 Ctrl+E 鍵即可。
假設我們要產生一個 p 元素，那麼我們只要直接輸入 p 後，再按下 Ctrl+E 鍵，就能自動產生起始元素及結束元素。如下所示：
只要是 HTML 所定義的元素，如 h1-h6、center、title 等等，都能使用上述方示，快速產生出相對應的語法如下
有些元素還會帶入跟該元素有關的屬性，例如：iframe、a 或是 img 等
快速產生 className 與 id
我們也可以在產生元素時，直接加上指定的 Class Name。寫法是元素名稱與 Class Name 名稱中間用英文句點隔開。例如今天我們要產生 Class Name 為「title」的 h1 標籤，則輸入「h1.title」後按 Ctrl+E
若是要針對單一元素要加上多個 class name 的話，只要把它們用半形的句號隔開，接在一起就可以了。例如今天我們要產生 Class Name 為「news_p c1」的 div 標籤，則輸入「div.news_p.c1」後按 Ctrl+E
前端工程師省時神器 Emmet 一般預設的元素是 div，所以如果直接輸入英文句號後，寫 class name 的話，就會自動產生一個 div 元素加上指定的 class name。承上例，輸入「.news_p.c1」後按 Ctrl+E
除了 class name，我們也可以幫元素加上指定的 id。只要先打 # 號再輸入 id name 即可。例如今天我們要產生 id 為「news_p」的 div 標籤，則輸入「#news_p」後按 Ctrl+E
class name 和 id 可以同時使用，例如今天我們要產生 class name 為「news_p c1」、id 為「paragraph-1」的 div 標籤，則輸入「.news_p.c1#paragraph-1」後按 Ctrl+E
以上介紹過個常用的 Emmet 標籤快捷縮寫方式，更多的元素縮寫方式都可在 Emmet 官方文件中找到：Emmet cheat sheet
父子兄弟階層、群組、上一層
這一篇有簡略說到父子階層（父元素與子元素）之間的關係。想成為前端工程師的同學們未來在處理網頁時，一定會遇到父子元素、兄弟元素等。本文就簡單列出各種階層關係的 Emmet 縮寫方式：
父子元素一次輸入
前端工程師在使用 Emment 在設定子元素時非常方便，只要在父子元素間加入 > 符號即可。如下方的動態圖所示：假設我們要在 class name 名為「news_p」以及 id 名為「paragraph1」的 div 父元素中放置 子元素 p，並在 p 中在加上孫元素 ol 與 li 等動作，只要輸入「.news_p#paragraph1>p>ol>li」後按下 ctrl+E 就可一次寫完!
兄弟階層一次輸入
承上面「父子元素一次輸入」的範例，若想在 p 的上方放置 h2 標題，但是 h2 標題不屬於 p 的父元素，位階是跟 p 同等的，則 h2 與 p 互為兄弟元素。
上方提到：元素間互為父子關係則用 > 隔開；若為兄弟元素，就用「+」隔開。因此此例為輸入「.news_p#paragraph1>h2+p>ol>li」
將元素設為同一階層的群組
承上面「兄弟階層一次輸入」的範例，若前端工程師想在互為兄弟階層的 h2+p 的階層下，再多放一組一模一樣且位階相同的 h2+p 的階層的話該如何做？那就把 h2+p 視為一個群組，用 () 括號的方式包起來，把用括號起來元素視為同一階層來看即可，所以我們的語法就可以這樣寫「.news_p#paragraph1>(h2+p>ol>li)+(h2+p>ol>li)」之後再按 ctrl+E 即可。
上一層
承上面「群組 Grouping」的範例，若前端工程師想在兩個互為兄弟階層的 h2+p 群組後方，新增一個 div 父元素（class name 名為「news_p」以及 id 名為「paragraph2」），就可以在元素間加入 ＾ 符號即可。所以語法就可以這樣寫「.news_p#paragraph1>(h2+p>ol>li)+(h2+p>ol>li)^.news_p#paragraph2」之後再按 ctrl+E 即可。
想成為前端工程師，這些快速鍵要記得多練習幾次，熟練後才能在編寫 HTML 時更有效率。
複製元素
當前端工程師要產生 ol 或是 ul 清單標籤時，都會包含一拖拉庫的 li 元素。如果要一個一個手動輸入的話，就算是使用 Emmet 的「+」快捷輸入法，還是會花去不少時間。幸好 Emmet 有複製的快捷輸入法：「*」。用法是：若想要一次產生 5 個相同的元素的話，就在原宿後方輸入「*5」。由此類推，產生 7 個就是「*7」。假使我們今天要建立一個 ul 清單標籤，包含 5 個 li 元素，語法就可以這樣寫「ul>li*5」之後再按 ctrl+E 即可。
再假設我們要在一個 .news 中放置 5 個 .block，然後每個 .block 中都有 1 個 h2 標題及 3 個 p 段落，每個 p 段落中又放置兩張圖片，則輸入「.news>(.block>h2+(p>img*2)*2)*5」
編號
有時前端工程師在輸入 li 標籤時，會給這些 li 一個共用的 .className 以及流水編號。若搭配 Emmet 的「$」時，就可以快速的產生。例如，今天我們要輸入五個 li 標籤，標籤的 class name 分別為 list-1、list-2、list-3、list-4、list-5，則輸入「li.list-$*5」
若要在這些流水編號前面加個「零」，例如 01、001，則補上只要補上相對數量的 $ 即可。像是 01 就是 $$、001 就是 $$$。承上例，我們輸入「li.list-$$*5」以及「li.list-$$$*5」
設定起始編號
$的用法，預設數字是從 1 開始累加。有時前端工程師會需要指定起始數字，這時則在 $ 後面多補上一個 @ 並加上指定的起始數字，承上例，我們要設定起始數字為 5 就輸入「li.list-$$@5*5」
Emmet 預設的編號是由小到大，若是希望編號由大到小，那麼就是在 @ 後面補上一個 – 負號 (就算是沒要設定起始值也是要多補 @)。例如我們要輸入 5 個 li 標籤，編號由大到小，就輸入「li.list-$@-*5」 我們要設定起始數字為 5 ，就輸入「li.list-$@-5*5」。
顯示文字
使用 Emmet 能讓前端工程師快速展開各種 HTML 元素，但如果能在撰寫的時候就能產生內文，不需等到元素展開後才補上內文就更棒了！這個功能 Emmet 也有！不塊是前端工程師的省時神器！
如果想要產生元素中的文字時，可以透過加上 {} 大括號並在其中寫上文字，如我們想要輸入名為「標題」的 h1 標籤、名為「副標題」的 h2 標籤，以及內容為 「內文」 的 p 標籤，就輸入「h1{標題}+h2{副標題}+p{內文}」後按下 Ctrl+E。
自訂屬性值
Emmet 除了可以讓前端工程師快速展開標籤與文字之外，對於像是 a href、img 等需要設定屬性的標籤，也可以在寫的時候就產生。
如果想要產生元素中的屬性時，可以透過加上 [] 中括號並在其中寫上屬性與值的內容，值需要用雙引號或是單引號包起來。例如我們今天要產生一個連結到網站「https://www.tedu.tw」的 a 元素，就輸入「a[href=”https://www.tedu.tw”]」後按下 Ctrl+E。
若想要增加顯示文字，則在 [] 中括號後方加上{} 大括號並在其中寫上文字即可。承上例，我們可加上「達內教育」文字，就輸入「[a[href=”https://www.tedu.tw”]{達內教育}」後按下 Ctrl+E。
若想要多增加一些屬性值，只要在同一個 [] 中括號中，將每個屬性值用空格隔開就可以了。如在上個例子中，想要設定網站在新分頁開啟，我們就輸入輸入「[a[href=”https://www.tedu.tw” target=”blank”]{達內教育}」後按下 Ctrl+E。
｜推薦閱讀：6個酷炫HTML5電子書翻頁效果
文章來源：https://www.tedu.tw/blog/basic-emmet-tutorial-for-web-frontend-developer-newbies.html
延伸閱讀：
為何Meta元宇宙裡的人物都少了下半身?一起來看看答案!
