Sublime Text 2 Emmet外掛 常用快捷鍵
阿新 • • 發佈:2019-01-26
簡介
Emmet的前身是大名鼎鼎的Zen coding,如果你從事Web前端開發的話,對該外掛一定不會陌生。它使用仿CSS選擇器的語法來生成程式碼,大大提高了HTML/CSS程式碼編寫的速度
使用
1.初始化
!+tab
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
</body>
</html>
2.生成多個元素 如div*10+tab
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
3.生成子元素 如div>ul>li*5>a+tab
<div>
<ul>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
</ul>
</div>
4.生成同級別元素 如div>div+ul +tab
<div>
<div></div>
<ul></ul>
</div>
5.生成帶id或class元素
如div#box+tab
<div id="box"></div>
div.box+tab
<div class="box"></div>
6.定義HTML元素的內容和屬性
如輸入h1{foo}和a[href=#]
<h1>foo</h1>
<a href="#"></a>