Emmet 是一种快速写html的语法,通过几个简单的缩写,就可以拓展成html标签,工作中写html多多少少会有一些,使用的语法都是基础语法,这里总结下最常用的几个,备查。 这个插件支持非常多的IDE和编辑器,值得学学。
>
代表下一级标签(child)
h2>h3>p>span
展开
<h2>
<h3>
<p><span></span></p>
</h3>
</h2>
*
代表复制多少份
ul>ul*3
展开
<ul>
<ul></ul>
<ul></ul>
<ul></ul>
</ul>
+
平级标签,兄弟标签
p+span+button
展开
<p></p>
<span></span>
<button></button>
^
往上一级标签,一般用在带有下级标签的比较复杂的标签块
div>h2>p+button^h3
展开,h3和h2平级
<div>
<h2>
<p></p>
<button></button>
</h2>
<h3></h3>
</div>
也可往上多级
div>h2>p+button^^h3
<div>
<h2>
<p></p>
<button></button>
</h2>
</div>
<h3></h3>
( )
不同语句块可以用 括号来分隔, 也叫分组
div.checkbox>(lable>input[type="checkbox"])*2
对应的html
<div class="checkbox">
<lable><input type="checkbox"></lable>
<lable><input type="checkbox"></lable>
</div>
- 标签属性 id,class和其他属性,有点类似jquery
span#age+span#name+span#size
展开 id属性
<span id="age"></span>
<span id="name"></span>
<span id="size"></span>
span.age+span.name+span.size
展开 class属性
<span class="age"></span>
<span class="name"></span>
<span class="size"></span>
input#name.user-name[type="text" name="username" data="xx"]
展开 其他属性,自定义属性等
<input type="text" id="name" class="user-name" name="username" data="xx">
多个class怎么处理呢
div.form-group.lable.lable-primary
展开
<div class="form-group lable lable-primary"></div>
- html内容 用大括号(用的比较少)
h2{16年欧洲杯法国打进决赛}>p{ 北京时间上午3点中进行的欧洲半决赛中..}
展开之后
<h2>16年欧洲杯法国打进决赛
<p> 北京时间上午3点中进行的欧洲半决赛中..</p>
</h2>
这个插件还有很多高级的用法,用的很少了啦,有兴趣请去官网查看。