Share This Post


是一個支援眾多程式編輯器的外掛,它可以讓你不需要再死記HTML或CSS關鍵字,減少不必要的coding錯誤,加速整個網頁開發的工作流程,大多數的編輯器都有相對應的 Emmet(Zen Coding) 套件可以安裝,Emmet 基本的用法就跟我們在寫 CSS 的概念是一樣的。

設定 Emmet

  • 輸入設定值以啟用 Emmet

Emmet使用方法及常用語法

https://docs.emmet.io/cheat-sheet/
  • E 代表HTML標籤。
  • E#id 代表id屬性。
  • E.class 代表class屬性。
  • E[attr=foo] 代表某一個特定屬性。
  • E{foo} 代表標籤包含的內容是foo。
  • E>N 代表N是E的子元素。
  • E+N 代表N是E的同級元素。
  • E^N 代表N是E的上級元素。

Html子元素

使用”>”為代表符號

同一層多一個Html tag 元素

使用”+”為代表符號

多次重複使用表單

使用”*”為代表符號

加入CSS的ID

使用”#”為代表符號

加入CSS的CLASS

使用”.”為代表符號

加入編號

使用”$”為代表符號

加入內容

使用”{}”為代表符號

參考資料

https://dev.to/raaynaldo/speed-up-code-your-html-using-emmet-in-vscode-nesting-operators-201o

https://blog.greenroots.info/10-vs-code-emmet-tips-to-make-you-more-productive

https://pjchender.blogspot.com/2016/07/emmet.html

https://vocus.cc/article/60e07015fd89780001c103dd

訂閱研究文章

Get updates and learn from the best

More To Explore

Commitizen

前言: 現今軟體功能複雜與龐大,在開發過程中,不管單人開發還是多人協作,對所編寫的代碼與代碼版本管控都是必須的

NFC x Mifare

實作紀錄 readMifare readNdef 知識補充 手機NFC隱含攻擊弱點 掌握原理避免無線盜刷 MI

Scroll to Top