方格精選

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

更新於 發佈於 閱讀時間約 9 分鐘
初學程式的時候,可能會有幾個問題讓你的開發速度低落,腦袋動得很快,但是手卻跟不上想法。
舉例來說: 瀏覽器的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
為了追求可以窩在座位上、可以心無旁騖思考問題、座位可以亂七八糟沒關係、不需要到處哈腰點頭跑客戶,不用腳踩十公分、連妝都可以不用化的職場人生,文組少女毅然決然踏上RD的養成日常。
留言0
查看全部
avatar-img
發表第一個留言支持創作者!
一開始接觸網頁開發的時候,可能會常常在切版時遇到一些奇奇怪怪的問題:版面總是無法貼齊,左右參差不齊;圖片或是版型變形,但都找不到問題,又或者是技術跟不上設計稿,怎麼切怎麼亂。 會有這樣的狀況主要是⋯⋯
在HTML程式語言中,有一種能讓HTML元素與其他程式語言(CSS、JavaScript)運作的更加順利的語法,它叫做「HTML屬性(HTML Attribute)」。 那HTML屬性是怎麼運作的呢?
HTML一種建立網頁架構的程式語言,對於初學程式的人來說,HTML是非常好上手的。 它沒有不像是CSS及JavaScript,沒有複雜的邏輯,只要更改程式碼,馬上就可以透過瀏覽器或是模擬器將結果顯示出來。
許多初學網頁開發的朋友們,一開始都不太理解HTML、CSS、 JavaScript之間的差異性,導致初期規劃學習計畫時毫無頭緒。 會有這樣的困擾,主要在於不了解HTML、CSS、 JavaScript之間的關係,以及這三者在網頁運作時所扮演什麼角色,導致越學越阿雜的狀況。
一開始接觸網頁開發的時候,可能會常常在切版時遇到一些奇奇怪怪的問題:版面總是無法貼齊,左右參差不齊;圖片或是版型變形,但都找不到問題,又或者是技術跟不上設計稿,怎麼切怎麼亂。 會有這樣的狀況主要是⋯⋯
在HTML程式語言中,有一種能讓HTML元素與其他程式語言(CSS、JavaScript)運作的更加順利的語法,它叫做「HTML屬性(HTML Attribute)」。 那HTML屬性是怎麼運作的呢?
HTML一種建立網頁架構的程式語言,對於初學程式的人來說,HTML是非常好上手的。 它沒有不像是CSS及JavaScript,沒有複雜的邏輯,只要更改程式碼,馬上就可以透過瀏覽器或是模擬器將結果顯示出來。
許多初學網頁開發的朋友們,一開始都不太理解HTML、CSS、 JavaScript之間的差異性,導致初期規劃學習計畫時毫無頭緒。 會有這樣的困擾,主要在於不了解HTML、CSS、 JavaScript之間的關係,以及這三者在網頁運作時所扮演什麼角色,導致越學越阿雜的狀況。
你可能也想看
Google News 追蹤
Thumbnail
嘿,大家新年快樂~ 新年大家都在做什麼呢? 跨年夜的我趕工製作某個外包設計案,在工作告一段落時趕上倒數。 然後和兩個小孩過了一個忙亂的元旦。在深夜時刻,看到朋友傳來的解籤網站,興致勃勃熬夜體驗了一下,覺得非常好玩,或許有人玩過了,但還是想寫上來分享紀錄一下~
Thumbnail
在這個章節中,我們介紹了HTML的基本概念,包括其作為結構化標記語言的特性、應用領域,以及主要使用者。這些知識為後續的深入學習和實踐奠定了基礎,幫助讀者了解HTML在現代網頁開發中的重要性。
要如何利用 HTML 標籤來增加網頁的結構性呢?HTML 標籤提供了 Google 爬蟲更多有用的資訊,讓爬蟲在爬行網站時可以更輕鬆且正確地分析網頁內容。本文將為你介紹 HTML 對於 SEO 的重要性以及 10 個常見的 HTML 語法。|SEO HTML 是什麼? 超文本標記語言(Hyper
Thumbnail
你好,在下最近在學習開發web,學了html css js,也得出一些心得,由於網路上已有許多教學,所以我會著重在如何開發出to do List,以及解釋我寫的程式碼。相關的教學我會直接貼網址。如果我有什麼地方出錯,或者是可以寫得更好,歡迎在下方留言,討論。 首先先介紹我的開發環境: 我用了vs
Thumbnail
因為最近想嘗試編碼風格,於是就選了一套比較"不嚴格"的輔助工具來摸索。 編輯器 VS CODE 框架 VUE3 打包工具 VITE 編碼風格 Standard 環境 version { "nodejs":"v18.18.0", "npm":"9.8.1" }
※ Javascript和HTML的關係 當我們輸入新的網址或按下重新整理時,從解析檔案到畫面顯示出來,瀏覽器會進行以下流程: 解析 HTML / CSS 檔案,建立物件模型: HTML → DOM (Document Object Model)。 CSS → CSSOM (CSS Obje
※ JavaScript 來源: 國際標準化組織﹘ECMA推出的通行標準稱為 ECMAScript,目的是讓各家瀏覽器能根據 ECMAScript 標準來實作能在該瀏覽器運行的 JavaScript。簡單說ECMAscript 是語法標準的規格書,它描述了各種語言應該呈現的樣子、規則,以及細節。
Thumbnail
在著手開發一套程式時,會讓人覺得煩躁的考量點,其中一個讓人頭痛的,應該就是 UI 的設計跟串接了吧,究竟有沒有一個套件,能讓開發者能夠以一套語言,就能打遍天下呢?
Thumbnail
HTML 標籤是網頁內容的基礎,透過學習不同的標籤,你可以設計出各式各樣的內容。本文介紹了各種基本的標籤,如標題、段落、修飾樣式、超連結以及區塊等,讓你對 HTML 標籤有更深入的瞭解。
Thumbnail
HTML 語意化標籤,不僅可以使網頁結構更加清晰、易於理解,也對搜索引擎優化(SEO)和提升網頁無障礙訪問性(Accessibility)有明顯的幫助。本文將介紹 HTML 語意化標籤的定義、重要性以及常見的語意化標籤。
Thumbnail
嘿,大家新年快樂~ 新年大家都在做什麼呢? 跨年夜的我趕工製作某個外包設計案,在工作告一段落時趕上倒數。 然後和兩個小孩過了一個忙亂的元旦。在深夜時刻,看到朋友傳來的解籤網站,興致勃勃熬夜體驗了一下,覺得非常好玩,或許有人玩過了,但還是想寫上來分享紀錄一下~
Thumbnail
在這個章節中,我們介紹了HTML的基本概念,包括其作為結構化標記語言的特性、應用領域,以及主要使用者。這些知識為後續的深入學習和實踐奠定了基礎,幫助讀者了解HTML在現代網頁開發中的重要性。
要如何利用 HTML 標籤來增加網頁的結構性呢?HTML 標籤提供了 Google 爬蟲更多有用的資訊,讓爬蟲在爬行網站時可以更輕鬆且正確地分析網頁內容。本文將為你介紹 HTML 對於 SEO 的重要性以及 10 個常見的 HTML 語法。|SEO HTML 是什麼? 超文本標記語言(Hyper
Thumbnail
你好,在下最近在學習開發web,學了html css js,也得出一些心得,由於網路上已有許多教學,所以我會著重在如何開發出to do List,以及解釋我寫的程式碼。相關的教學我會直接貼網址。如果我有什麼地方出錯,或者是可以寫得更好,歡迎在下方留言,討論。 首先先介紹我的開發環境: 我用了vs
Thumbnail
因為最近想嘗試編碼風格,於是就選了一套比較"不嚴格"的輔助工具來摸索。 編輯器 VS CODE 框架 VUE3 打包工具 VITE 編碼風格 Standard 環境 version { "nodejs":"v18.18.0", "npm":"9.8.1" }
※ Javascript和HTML的關係 當我們輸入新的網址或按下重新整理時,從解析檔案到畫面顯示出來,瀏覽器會進行以下流程: 解析 HTML / CSS 檔案,建立物件模型: HTML → DOM (Document Object Model)。 CSS → CSSOM (CSS Obje
※ JavaScript 來源: 國際標準化組織﹘ECMA推出的通行標準稱為 ECMAScript,目的是讓各家瀏覽器能根據 ECMAScript 標準來實作能在該瀏覽器運行的 JavaScript。簡單說ECMAscript 是語法標準的規格書,它描述了各種語言應該呈現的樣子、規則,以及細節。
Thumbnail
在著手開發一套程式時,會讓人覺得煩躁的考量點,其中一個讓人頭痛的,應該就是 UI 的設計跟串接了吧,究竟有沒有一個套件,能讓開發者能夠以一套語言,就能打遍天下呢?
Thumbnail
HTML 標籤是網頁內容的基礎,透過學習不同的標籤,你可以設計出各式各樣的內容。本文介紹了各種基本的標籤,如標題、段落、修飾樣式、超連結以及區塊等,讓你對 HTML 標籤有更深入的瞭解。
Thumbnail
HTML 語意化標籤,不僅可以使網頁結構更加清晰、易於理解,也對搜索引擎優化(SEO)和提升網頁無障礙訪問性(Accessibility)有明顯的幫助。本文將介紹 HTML 語意化標籤的定義、重要性以及常見的語意化標籤。