我們在寫前端的時候，面對重復代碼的時候，很多時候就會復制粘貼，實際上可以通過技巧來提高寫前端的效率。接下來將介紹幾個常用的提高效率的技巧

目錄

• • 注釋
  • 乘法
  • 后代
  • 兄弟
  • 上級
  • 分組
  • 自增
  • ID和類
  • 自定義屬性
  • 文本
  • 隱式標簽

注釋

輸入以下代碼

Ctrl+/

另外，取消注釋也是Ctrl+/

乘法

*
輸入以下代碼

(div>ul>li)*5

后代

>
輸入以下代碼

nav>ul>li

兄弟

+
輸入以下代碼

div+p+bq

上級

^
輸入以下代碼

div+div>p>span+em^bq

輸入以下代碼

div+div>p>span+em^^bq

分組

()
輸入以下代碼

(div>dl>(dt+dd)*3)+footer>p

自增

$
輸入以下代碼

ul>li.item$*5

倒序的

ul>li.item$@-*5

編號為3位數字

ul>li.item$$$*10

自增從5開始，輸出10條

ul>li.item$@5*10

ID和類

#和.

#header

.title

form#search.wide

自定義屬性

[]

p[title="Hello world"]

多個屬性的情況

td[rowspan=2 colspan=3 title]

文本

{}

a{Hello world}

p{段落內容}

再按 Tab鍵(下同)
例如：

隱式標簽

.class

em>.class

ul>.class

table>.row>.col

還有很多，所有未知的縮寫都會轉換成標簽————》詳細戳https://docs.emmet.io/cheat-sheet/

https://blog.csdn.net/hanhanwanghaha寶藏女孩 歡迎您的關注！
歡迎關注微信公眾號：寶藏女孩的成長日記
如有轉載，請注明出處（如不注明，盜者必究）

總結

以上是生活随笔為你收集整理的如何提高写前端的效率？干货，快进！的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。