et Emmet是一款可以提高前端代碼書寫效率的插件蒜埋,可以不需要一行行的寫html標(biāo)簽等,只需要寫一行就可以生成完整的html解構(gòu)括授,大部分編輯器都有,但若沒有可以自行百度安裝梅猿。
其實(shí),大家可以查看此處:https://docs.emmet.io/cheat-sheet/腕窥,語(yǔ)法介紹很詳細(xì)粒没。而且通俗易懂,可以花十幾分鐘看看簇爆。
1.快速生成一個(gè)html結(jié)構(gòu)
語(yǔ)法解構(gòu)特簡(jiǎn)單癞松,只需要輸入!號(hào)后入蛆,按鍵盤上的【tab】或【enter】既可以生成
image.png
生成后代碼:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
</body>
</html>
2.生成5個(gè)類名為item的div
語(yǔ)法:
image.png
生成代碼:
image.png
3.生成一個(gè)類名為item响蓉,每個(gè)item數(shù)值遞增div內(nèi)容也遞增。
語(yǔ)法:
image.png
生成代碼:
<div class="item item01">內(nèi)容 01</div>
<div class="item item02">內(nèi)容 02</div>
<div class="item item03">內(nèi)容 03</div>
<div class="item item04">內(nèi)容 04</div>
<div class="item item05">內(nèi)容 05</div>