方格精選
【自學程式】什麼是Emmet？加速前端開發必備，常用15種HTML Emmet語法教學
初學程式的時候，可能會有幾個問題讓你的開發速度低落，腦袋動得很快，但是手卻跟不上想法。
舉例來說： 瀏覽器的DevTool一直報錯，畫面的邏輯出錯，或是畫面根本出不來，但你卻不知道問題出在哪。
有可能是出現Typo，把HTML標籤的名稱打錯，在CSS檔案中把font-size打成font-style。
甚至也有可能是HTML標籤間的結構過於巢狀、寫得不好，將內容塞錯區塊，導致畫面內容呈現錯誤。
又或者是，你本身的英打能力很差，coding的速度世界慢，
今天要跟大家介紹一個開發上非常實用的小工具，可以解決開發上速度慢、容易有Typo的狀況，它叫做：Emmet。
根據中文維基百科，Emmet是由一群國外的開發者，透過縮寫的方式，讓編碼的過程更加迅速，同時用來解決編譯器常出現的打字錯誤。
現在許多的前端編譯器都有支援Emmet的外掛，像是Visual Studio、Atom，或是大家常用的線上編譯器Codepen也有支援，不需要額外安裝套件。
接下來我們就來看看Emmet語法要怎麼使用，讓我們在開發前端時更加迅速吧！
Emmet基礎語法介紹
VS code中，我們可以透過輸入Emmet語法加上Enter，或者在使用Codepen時輸入Emmet語法加上Tab鍵，就可以輕鬆創造出各式各樣的效果。
基本上我們只要打上一個HTML標籤的名稱（不需要加上<>符號）後按下Enter鍵，完整的一組標籤（包含起始標籤及結尾標籤）就會直接出現了。
舉例來說，我們只要在HTML文檔中，打入div+enter，一組完整的標籤<div></div>就會出現了。
這也是我們平常在開發上就會使用到的技巧，只是你可能不知道這其實是額外的套件功能。
但使用Emmet語法時需要注意兩件事：第一，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>的結構。
「>」：
此語法可以在另外一個標籤內生成其他元素，舉例來說，如果我使用ul>li的Emmet語法，我可以獲得以下結構：
那如果我想要在li元素中，多加一個a標籤呢？這時候我們可以寫成ul>li>a，就可以獲得以下結構：
「+」：
此語法可以連結不同的標籤，並一次性創造出「同階層」的大量元素，舉例來說，如果我使用div+ul>li就可以獲得以下結構：
「^」：
攀升符號可以讓接在後頭的元素，增加至「上」一個階層，舉例來說：div>ul>li^ul這樣的結構，並不會讓最後一個ul元素直接生成在li裡，而是生成在第一個出現的ul中，與前面的li處在同一個階層。
這時候你可能會覺得很疑惑，那為什麼不直接使用+號生成就好？這個問題的點在於，萬一我想要在li中另外生成其他元素怎麼辦？我們來看看這個範例：
在這個範例中，我們透過Emmet語法div>ul>li>a^ul建立了巢狀結構，我們可以在li中額外加入一個a元素，如果我們使用div>ul>li>a+ul，就會讓li元素中額外生成了a元素與ul元素，而不是讓新的ul生成在與li同一階層。
「*」：
此語法的含義與我們常用的乘號意義相同，可以一次性創造多組同樣的元素，舉例來說：ul.list>li.item*5，可以快速創造出擁有list class的ul元素，在這個ul元素中又分別有五個帶有item class的li元素：
「[ ]」：
在先前的幾種語法，我們並沒有提到要如何透過Emmet語法，創造元素的屬性，而透過在中括號填入屬性名稱及值，就可以簡單創造出帶有特定屬性的HTML元素，舉例來說：ul[data-id=000]，可以創造出帶有data-id=“000”屬性的ul元素。
注意：在這裡的屬性值是不需要帶上雙引號，因為Emmet會自動幫你在屬性值上帶上雙引號。
「( )」：
很多時候我們為了要快速產生多層的HTML結構，可能會需要一次打一長串的Emmet語法，舉例來說：我現在要製作一個帶有class名稱及屬性的列表，這個列表當中也帶有10個擁有個別的a連結的li元素，這樣的結構要怎麼透過Emmet來產生呢？
最一開始我的答案是ul.list[data-type=”list”]>li.item>a[href=”#”]*10。
但你會發現沒有先後順序的結構編譯器是看不懂的，於是就有了小括號的出現。
「( )」符號可以發揮類似於「計算時的優先性」，將被括起來的程式先做運算，括號裡的運算完後，在進行「>」生成結構的排列。
我們現在可以把範例的程式碼改成ul.list[data-type=”list”]>(li.item>a[href=”#”])*10，就可以順利運行了：
「{ }」：
在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時，一邊參考範例一邊練習。
如果你在閱讀本篇文章時，不太能理解何謂屬性、元素的話，可以參考以下文章：
今天的文章到這邊，如果你有任何關於網頁開發的問題，歡迎你留言跟我討論！
希望今天的文章有幫助到正在閱讀的你，如果你喜歡我的文章的話，可以留下你的愛心或是收藏我的文章，也或者可以點選「贊助」，你的一杯咖啡絕對是我持續寫下去的動力！或是透過拍拍手，用你小小的行動支持我的創作！
我是Vivian，我們下次見。
關於我：
2019年從英文系畢業，2021下定決心開啟轉職工程師的新生活，相信不斷學習會有成長的一天。
｜Instagram: Vivian Yeh｜vivian_enlife
｜聯絡我：vivian.enlife@gmail.com
此篇文章會顯示動態置底廣告
為什麼會看到廣告
430會員
100內容數
為了追求可以窩在座位上、可以心無旁騖思考問題、座位可以亂七八糟沒關係、不需要到處哈腰點頭跑客戶，不用腳踩十公分、連妝都可以不用化的職場人生，文組少女毅然決然踏上RD的養成日常。
留言0
查看全部
你可能也想看
Google News 追蹤
*合作聲明與警語：
本文係由國泰世華銀行邀稿。
證券服務係由國泰世華銀行辦理共同行銷證券經紀開戶業務，定期定額(股)服務由國泰綜合證券提供。
剛出社會的時候，很常在各種 Podcast 或 YouTube 甚至是在朋友間聊天，都會聽到各種市場動態、理財話題，像是：聯準會降息或是近期哪些科
上華蒙特梭利小學、中學和高中的教學理念以蒙特梭利教育為基礎，是台南地區一所特別的實驗學校。小學部分經營已經有七年，從一開始僅有八位學生到如今成長至七十多名學生，這樣的發展過程中，需要家長們慢慢了解並認同蒙特梭利的教育理念。
在這幾年的疫情風波中，學校經歷了許多挑戰，但已逐漸趨於穩定。上華蒙特梭利小
第二題練習題～應用的內容跟判斷質數差不多，甚至再更少一點（因為沒有要用到迴圈），所以這次寫起來就快很多，除了題目難度比較低之外，經過上次的洗禮之後，對於解題應該有再抓到更多感覺，所以寫這題比較有成就感一點XD
主題：宣告變數和判斷式的的綜合小應用
題目：每個人都有心目中夢想的身高，像小鳴就夢想著
從跟著教學影片把老師的程式抄過一遍，變成看到題目能把題目轉為程式，對於初學者來說蠻困難的。所以我想以初學者的角度來分享自己怎麼適應這段轉換的過程，以及我解題的方法是什麼。（也順便紀錄一下自己的思路）
※主題：流程控制為主的綜合小應用
※題目：讓使用者輸入一個數字，並用程式判斷該數字是否為質數
網路上提到自學程式的文章，都會說自學程式非常地辛苦，而且要很自律，決心夠強；而當自己踏上這條路後，才發現何止是辛苦，根本是佈滿荊棘，常常寸步難行，且被刺地遍體鱗傷(喂～是不是有點太浮誇了），但在每個寫出程式豁然開朗的當下，卻又成就感滿滿，所以想藉著寫部落格紀錄一下自己的學習過程！
程式語言只是工具，更重要的是程式邏輯
【運算思維】
1.拆解: 將一個任務或問題拆解成數個步驟或部分。
2.找出規律: 預測問題的規律，並找出模式做測試。
3.歸納與抽象化: 找出最主要導致此模式的原則或因素。
4.設計演算法: 設計出能夠解決類似問題並且能夠被重複執行的指令流程。
最近很多人私訊我他們自學遇到的瓶頸，有些人會覺得學不會程式，是自己太笨沒天分，或從小數理能力就差，才學不起來。但以我自己這些年自學程式並創業的經驗，我認為可能原因是自己操之過急了，因為想要快速達到像是轉職或是創業等等目標，所以覺得得學得越快越好。但這個領域需要的是長時間的磨練，慢慢一點點累積
設定好你的目標，做好目標分解，接下來就是學習與實作，在過程中，肯定會遇到各種問題需要debug，這應該是剛入門自學程式的人最痛苦的部分，可能看到bug不知道google要下甚麼關鍵字，也可能搜出一堆文章看得頭昏腦脹，所以想跟大家分享我在自學製作封鎖電商黑名單chrome插件過程，是怎麼面對這種狀況的
之前跟大家分享【表現目標】和【學習目標】，有助於設定自學的終點，但是在執行目標的過程中是否遇過有目標也難以下手的問題呢?今天想跟大家說說【拆解目標】，這也是我在自學製作封鎖電商黑名單chrome插件賺取被動收入過程中運用的方法，希望對剛入門自學程式的朋友有幫助
除了增進程式技術和技巧以外，我覺得建立起正確的【自學心態】更重要，保持正確的態度能讓你持續不斷的精進學習，不會半途而廢，也更能享受進步帶來的成就感，我從自己過去零基礎開始自學程式然後做出線上服務的經驗，整理出一些入門自學的朋友應該抱持的心態，相信會很有幫助
*合作聲明與警語：
本文係由國泰世華銀行邀稿。
證券服務係由國泰世華銀行辦理共同行銷證券經紀開戶業務，定期定額(股)服務由國泰綜合證券提供。
剛出社會的時候，很常在各種 Podcast 或 YouTube 甚至是在朋友間聊天，都會聽到各種市場動態、理財話題，像是：聯準會降息或是近期哪些科
上華蒙特梭利小學、中學和高中的教學理念以蒙特梭利教育為基礎，是台南地區一所特別的實驗學校。小學部分經營已經有七年，從一開始僅有八位學生到如今成長至七十多名學生，這樣的發展過程中，需要家長們慢慢了解並認同蒙特梭利的教育理念。
在這幾年的疫情風波中，學校經歷了許多挑戰，但已逐漸趨於穩定。上華蒙特梭利小
第二題練習題～應用的內容跟判斷質數差不多，甚至再更少一點（因為沒有要用到迴圈），所以這次寫起來就快很多，除了題目難度比較低之外，經過上次的洗禮之後，對於解題應該有再抓到更多感覺，所以寫這題比較有成就感一點XD
主題：宣告變數和判斷式的的綜合小應用
題目：每個人都有心目中夢想的身高，像小鳴就夢想著
從跟著教學影片把老師的程式抄過一遍，變成看到題目能把題目轉為程式，對於初學者來說蠻困難的。所以我想以初學者的角度來分享自己怎麼適應這段轉換的過程，以及我解題的方法是什麼。（也順便紀錄一下自己的思路）
※主題：流程控制為主的綜合小應用
※題目：讓使用者輸入一個數字，並用程式判斷該數字是否為質數
網路上提到自學程式的文章，都會說自學程式非常地辛苦，而且要很自律，決心夠強；而當自己踏上這條路後，才發現何止是辛苦，根本是佈滿荊棘，常常寸步難行，且被刺地遍體鱗傷(喂～是不是有點太浮誇了），但在每個寫出程式豁然開朗的當下，卻又成就感滿滿，所以想藉著寫部落格紀錄一下自己的學習過程！
程式語言只是工具，更重要的是程式邏輯
【運算思維】
1.拆解: 將一個任務或問題拆解成數個步驟或部分。
2.找出規律: 預測問題的規律，並找出模式做測試。
3.歸納與抽象化: 找出最主要導致此模式的原則或因素。
4.設計演算法: 設計出能夠解決類似問題並且能夠被重複執行的指令流程。
最近很多人私訊我他們自學遇到的瓶頸，有些人會覺得學不會程式，是自己太笨沒天分，或從小數理能力就差，才學不起來。但以我自己這些年自學程式並創業的經驗，我認為可能原因是自己操之過急了，因為想要快速達到像是轉職或是創業等等目標，所以覺得得學得越快越好。但這個領域需要的是長時間的磨練，慢慢一點點累積
設定好你的目標，做好目標分解，接下來就是學習與實作，在過程中，肯定會遇到各種問題需要debug，這應該是剛入門自學程式的人最痛苦的部分，可能看到bug不知道google要下甚麼關鍵字，也可能搜出一堆文章看得頭昏腦脹，所以想跟大家分享我在自學製作封鎖電商黑名單chrome插件過程，是怎麼面對這種狀況的
之前跟大家分享【表現目標】和【學習目標】，有助於設定自學的終點，但是在執行目標的過程中是否遇過有目標也難以下手的問題呢?今天想跟大家說說【拆解目標】，這也是我在自學製作封鎖電商黑名單chrome插件賺取被動收入過程中運用的方法，希望對剛入門自學程式的朋友有幫助
除了增進程式技術和技巧以外，我覺得建立起正確的【自學心態】更重要，保持正確的態度能讓你持續不斷的精進學習，不會半途而廢，也更能享受進步帶來的成就感，我從自己過去零基礎開始自學程式然後做出線上服務的經驗，整理出一些入門自學的朋友應該抱持的心態，相信會很有幫助