在sublime上装了Emmet插件后,我们就可以利用以下技巧快速编写代码
1、自动生成html头文件
html:5 或!:用于HTML5文档类型
html:xt:用于XHTML过渡文档类型
html:4s:用于HTML4严格文档类型
例如,输入 html:5 然后按下Tab键,就会自动将html头文件补全
2、快速填加 类、id
连续输入元素名称和ID,Emmet会自动为你补全,比如输入p#example按下Tab键就会得到
<p id="example"></p>
输入div.cls#con按下Tab键得到
<div class="cls" id="con"></div>
3、定义多个元素
例如输入 ul>li*3 会得到
<ui>
<li></li>
<li></li>
<li></li>
</ui>
4、嵌套
现在你只需要1行代码就可以实现标签的嵌套。
- >:子元素符号,表示嵌套的元素
- +:同级标签符号
- ^:可以使该符号前的标签提升一行
例如输入 div#con>div得到
<div id="con">
<div></div>
</div>
5、嵌套定义多个带class 或 id的元素
例如: ul.d1>li#d2$*3 会得到
<ul class="d1">
<li id="d21"></li>
<li id="d22"></li>
<li id="d23"></li>
</ul>