【自學程式】什麼是Emmet？加速前端開發必備，常用15種HTML Emmet語法教學

根據中文維基百科，Emmet是由一群國外的開發者，透過縮寫的方式，讓編碼的過程更加迅速，同時用來解決編譯器常出現的打字錯誤。

Emmet基礎語法介紹

「!」：

驚嘆號加上Enter，可以直接創造出完整的HTML文件範本，不需要自己額外設定mata或是其他初始的標籤。

「lorem」：

在開發時，我們很常會出現需要使用假字來看畫面呈現的效果，「lorem+enter」可以快速產出一段英文假內容，如果不想要出現一整段，可以在後面加上你想要的字數+enter，就可以產出該字數的假字，舉例來說，lorem5+enter，就只會出現5個假字，而不是一整段。

「link:css」 ：

產生出CSS的連結如：link rel="stylesheet" href="style.css"，就不用額外自己設定 href="style.css"，但我個人還是習慣使用link+enter，因為通常css檔案的路徑不一定長得跟預設值一樣。

「a:link」：

如果我們只使用a+enter，會產生出沒有href屬性的a標籤，但是透過「a:link」，我們可以快速產生出a href="https://"/a的結構。

「btn」：

button元素的縮寫，可以快速產生出一組button/button元素。

但其他問題出現了，如果我們要快速加入class名稱或是id名稱呢？或是要如何快速加入標籤屬性？或是快速創造出巢狀的結構？

我們接著來看看更進階的Emmet語法整理。

Emmet進階語法介紹

「.」：

在元素標籤中使用「.」加上類別名稱，可以快速生成一個擁有該class名稱的元素，舉例來說，ul.list的Emmet語法就會產生ul class=”list”/ul的結構。

「#」：

在元素標籤中使用「#」加上類別名稱，可以快速生成一個擁有該id名稱的元素，舉例來說，ul#list的Emmet語法就會產生ul id=”list”/ul的結構。

「」：

此語法可以在另外一個標籤內生成其他元素，舉例來說，如果我使用ulli的Emmet語法，我可以獲得以下結構：

20210703-ul>li-emmet

Add External Stylesheets/Pens Any URL's added here will be added as s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing. JavaScript Preprocessor Babel includes JSX processing.

那如果我想要在li元素中，多加一個a標籤呢？這時候我們可以寫成ullia，就可以獲得以下結構：

20210703-ul>li>a-emmet

Add External Stylesheets/Pens Any URL's added here will be added as s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing. JavaScript Preprocessor Babel includes JSX processing.

「+」：

此語法可以連結不同的標籤，並一次性創造出「同階層」的大量元素，舉例來說，如果我使用div+ulli就可以獲得以下結構：

20210703-div+ul>li>-emmet

Add External Stylesheets/Pens Any URL's added here will be added as s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing. JavaScript Preprocessor Babel includes JSX processing.

「^」：

攀升符號可以讓接在後頭的元素，增加至「上」一個階層，舉例來說：divulli^ul這樣的結構，並不會讓最後一個ul元素直接生成在li裡，而是生成在第一個出現的ul中，與前面的li處在同一個階層。

這時候你可能會覺得很疑惑，那為什麼不直接使用+號生成就好？這個問題的點在於，萬一我想要在li中另外生成其他元素怎麼辦？我們來看看這個範例：

20210703-div>ul>li>a^ul-emmet

Add External Stylesheets/Pens Any URL's added here will be added as s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing. JavaScript Preprocessor Babel includes JSX processing.

在這個範例中，我們透過Emmet語法divullia^ul建立了巢狀結構，我們可以在li中額外加入一個a元素，如果我們使用divullia+ul，就會讓li元素中額外生成了a元素與ul元素，而不是讓新的ul生成在與li同一階層。

「*」：

此語法的含義與我們常用的乘號意義相同，可以一次性創造多組同樣的元素，舉例來說：ul.listli.item*5，可以快速創造出擁有list class的ul元素，在這個ul元素中又分別有五個帶有item class的li元素：

20210703-ul.list>li.item*5l-emmet

Add External Stylesheets/Pens Any URL's added here will be added as s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing. JavaScript Preprocessor Babel includes JSX processing.

「[ ]」：

在先前的幾種語法，我們並沒有提到要如何透過Emmet語法，創造元素的屬性，而透過在中括號填入屬性名稱及值，就可以簡單創造出帶有特定屬性的HTML元素，舉例來說：ul[data-id=000]，可以創造出帶有data-id=“000”屬性的ul元素。

注意：在這裡的屬性值是不需要帶上雙引號，因為Emmet會自動幫你在屬性值上帶上雙引號。

「( )」：

很多時候我們為了要快速產生多層的HTML結構，可能會需要一次打一長串的Emmet語法，舉例來說：我現在要製作一個帶有class名稱及屬性的列表，這個列表當中也帶有10個擁有個別的a連結的li元素，這樣的結構要怎麼透過Emmet來產生呢？

最一開始我的答案是ul.list[data-type=”list”]li.itema[href=”#”]*10。

但你會發現沒有先後順序的結構編譯器是看不懂的，於是就有了小括號的出現。

「( )」符號可以發揮類似於「計算時的優先性」，將被括起來的程式先做運算，括號裡的運算完後，在進行「」生成結構的排列。

我們現在可以把範例的程式碼改成ul.list[data-type=”list”](li.itema[href=”#”])*10，就可以順利運行了：

20210703-ul.list[data-type="list"]>(li.item>a[href="#"])*10

Add External Stylesheets/Pens Any URL's added here will be added as s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing. JavaScript Preprocessor Babel includes JSX processing.

「{ }」：

在Emmet語法中我們可以透過在大括號中加入文字，接在可以帶有文字的標籤後，就能產生出文字效果，舉例來說：a[href=#]{我是連結}的Emmet語法，就可以帶出a href="#"我是連結/a的效果來。

「$」：

在HTML中，有時候我們可能會需要產出「數列」，這時候使用錢字號，就可以幫我們產出從1開始的規律數列，舉例來說：a[href=#]{$}*10的Emmet語法，可以自動產出帶從1開始排序到10的連結出來， 錢字號的規律取決於有幾個元素帶有$的元素存在。

今天介紹了15種HTML Emmet的語法應用，當然實際在開發的時候，應用的情境及語法會有非常多種變化，如果沒有刻意練習、去熟悉Emmet的話，很容易就會產生階層生成不當，或是Emmet不能順利產出預期結構的狀況。

這裡想跟大家額外分享一個初學Emmet時，可以參考相關指令，並練習Emmet指令的一個小專案，此專案是由一位來自墨西哥的開發者@k3no，在Codepen打造的Emmet練習區，非常適合初學者在學習Emmet時，一邊參考範例一邊練習。

如果你在閱讀本篇文章時，不太能理解何謂屬性、元素的話，可以參考以下文章：

【自學程式】什麼是HTML標籤？初學網頁開法必備的四個HTML標籤 | Vivian Yeh - vocus

HTML一種建立網頁架構的程式語言，對於初學程式的人來說，HTML是非常好上手的。它沒有不像是CSS及JavaScript，沒有複雜的邏輯，只要更改程式碼，馬上就可以透過瀏覽器或是模擬器將結果顯示出來。 HTML

【自學程式】HTML屬性是什麼？解析常見HTML屬性用法 | Vivian Yeh - vocus

在HTML程式語言中，有一種能讓HTML元素與其他程式語言（CSS、JavaScript）運作的更加順利的語法，它叫做「HTML屬性（HTML Attribute）」。那HTML屬性是怎麼運作的呢？ HTML

今天的文章到這邊，如果你有任何關於網頁開發的問題，歡迎你留言跟我討論！

希望今天的文章有幫助到正在閱讀的你，如果你喜歡我的文章的話，可以留下你的愛心或是收藏我的文章，也或者可以點選「贊助」，你的一杯咖啡絕對是我持續寫下去的動力！或是透過拍拍手，用你小小的行動支持我的創作！

我是Vivian，我們下次見。

關於我：

2019年從英文系畢業，2021下定決心開啟轉職工程師的新生活，相信不斷學習會有成長的一天。

｜Instagram: Vivian Yeh｜vivian_enlife

｜聯絡我：vivian.enlife@gmail.com