emmet-zen-coding-tutorial是个很不错的教程,下面是一些简单的语法规则
元素
通过元素名生成HTML标签,如div生成<div></div>
,当需要生成自定义标签时,使用ctrl + e
即可,如foo生成<foo></foo>
子元素嵌套>
类似CSS子选择器div>ul>li
生成
<div>
<ul>
<li></li>
</ul>
</div>
兄弟元素+
类似CSS兄弟选择器,+生成兄弟关系的元素div+p+div
生成
<div></div>
<p></p>
<div></div>
向上操作符^
Emmet操作符的作用对象是基于当前上下文的,>
操作符会让上下文向下转移到深层元素,^
操作符可以向上移动上下文,如div+div>p>span+em
生成
<div></div>
<div>
<p><span></span><em></em></p>
</div>
通过^
操作符修改上下文控制元素div+div>p>span+em^bq
生成
<div></div>
<div>
<p><span></span><em></em></p>
<blockquote></blockquote>
</div>
多元素操作符*
使用*
后跟数字,生成对于数量的元素ul>li*5
生成
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
分组操作符()
使用括号分组完成复杂的逻辑div>(div>ul>li*2>a)*2+footer>p
生成
<div>
<div>
<ul>
<li><a href=""></a></li>
<li><a href=""></a></li>
</ul>
</div>
<div>
<ul>
<li><a href=""></a></li>
<li><a href=""></a></li>
</ul>
</div>
<footer>
<p></p>
</footer>
</div>
id和class生成
使用类似css中id和class的语法,可以为元素添加所需属性如div#header+div.cls1.cls2
生成
<div id="header"></div>
<div class="cls1 cls2"></div>
自定义属性
使用类似css中[attr]
的语法添加自定义属性td[title="Hello" colspan=3]
生成
<td title="hello" colspan="3"></td>
元素编号$
使用*
生成多个元素的时候,可以使用$</code>进行编号<code>ul>li.item$*5
生成
<ul>
<li class="item1"></li>
<li class="item2"></li>
<li class="item3"></li>
<li class="item4"></li>
<li class="item5"></li>
</ul>
{}添加文本
ul>(li{item $})*3
生成
<ul>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
</ul>
未经允许不得转载:小罗同学 » Emmet基本语法(sublime text3快速生成html标签)