Emmet語法快速生成結構語法 vscode

2021-10-20 15:51:47 字數 1054 閱讀 4963

html部分:

1.生成標籤直接輸入標籤名按tab鍵即可,比如div然後tab鍵,就可以生成

,輸入!可以生成如下:

"en">

2.如果想要生成多個相同標籤,加上*就可以了

eg:

3.如果有父子級關係的標籤,就可以用》

eg:

4.如果有兄弟關係的標籤,用+就可以了

eg:

5.如果生成帶有類名或者id名字的,直接寫.demo或者#demo,然後按下tab鍵

eg:

"demo">

"demo">

"demo">

6.如果生成的div類名是有順序的,可以用自增符號$

eg:

"test1">

"test2">

"test3">

"test4">

"test5">

7.如果想要在生成的標籤內部寫內容可以用{}表示

這是測試內容}

-->

這是測試內容

$}*5 -->

12345

css部分:

css基本採取簡寫形式即可,

1.比如 w100 按tab 可以生成width:100px;

2.比如 lh16 按tab 可以生成line-height:16px;

Emmet工具 Html CSS快速編寫語法

emmet 前身為 zen coding 是乙個能大幅度提高前端開發效率的乙個工具,它使用仿css選擇器的語法來生成 大大提高了html css 編寫的速度。如果你也使用sublime進行前端開發,在sublime中安裝外掛程式即可使用emmet,以下為html css快速編寫語法。html 5 或...

emmet語法總結

生成結構的快捷鍵 tab生成html5的結構 生成id名和類名 標籤名.類名 id名 tab 沒有標籤名.類名 tab 直接就是預設生成div 生成同級元素 標籤名 標籤名 標籤名 tab 生成子類標籤 標籤名 子標籤名 子標籤名 子標籤名 tab 標籤名 子標籤名 子標籤名 子標籤名 子標籤名 如...

Emmet語法規則

id指令 class指令 div test div id test div div.test div class test div 子節點指令 兄弟節點指令 上級節點 重複 分組 div ul li a div p 3 div ul li a href a li ul div p p p p p p...