前端Emmet的使用

2021-10-09 12:35:31 字數 1859 閱讀 5082

emmet快速語法

emmet可以快速的生成我們需要的一些**,使得我們編寫**更加輕便。

emmet語法不是說可以直接在前端軟體中運用,emmet是一種外掛程式,大部分編輯器都支援。

注釋:在輸入**後按 tab 鍵執行。且**間不可以加入空格。

emmet語法名稱操作符

child(子標籤)

>

sibling (兄弟標籤)

+climb-up(上級元素)

^grouping(分組)

( )multiplication(重複多份)

*item numbering(編號)$id

#class(類)

.custom attributes(自定義屬性)

[ ]text(文字)   

html頁面模板 

!隱式標籤

子標籤:div>p>span

兄弟標籤:div+p+span

上級標籤:div+div>p>span+em^bq

分組標籤:div>(p+span)

重複多份:ul>li*5

編號:ul>li.temp$*5

id:div#one>ul#two>li*3

類class :div.one>ul.two>li*3

自定義屬性:div[title="標題"]

內容

文字:div>ul>li*3

文字一

html的頁面模板 :

隱藏便簽:

.class

em>.class

div>.one>.two>.three

p>.one>.two

span>.one>.two

ul>.one

table>.row>.col

使用Emmet提高前端開發效率

在寫html 時,你有沒有感到痛苦,我們甚至要花好多時間寫這些符號 寫css的時候,有時候要寫一大堆的瀏覽器字首。emmet就是一款能解放我們的工具。emmet是一款編輯器外掛程式,支援多種編輯器支援。emmet的前身是zen coding,使用仿css選擇器的語法來生成 在前端開發中,emmet ...

Emmet前端開發神器使用

快速生成html網頁格式 html 5 tab鍵 生成中文的頭部 meta utf tba鍵 引入css link css tba鍵 生氣指令碼 script src tba鍵 生成帶類樣式的標籤 標籤名.類名 tba鍵 例如div.name tab鍵 生成 生成帶id樣式的標籤 標籤名 id tb...

Emmet外掛程式的使用

或者html 5快速生成h5。p.p1 p1生成class與id a href www.baidu.com 生成結果 是新增內容是設定屬性 我是a標籤 div div div div span,生成結果 分組,用 將命令分組 我試了很多次,我的編譯器不識別分組語法,所以我就把語法放上去,自己嘗試吧 ...