1. 程式人生 > >Sublime Text 2 Emmet外掛 常用快捷鍵

Sublime Text 2 Emmet外掛 常用快捷鍵

簡介

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>