[前端]Emmet 基本语法快查

Emmet 是一种快速写html的语法，通过几个简单的缩写，就可以拓展成html标签，工作中写html多多少少会有一些，使用的语法都是基础语法，这里总结下最常用的几个，备查。 这个插件支持非常多的IDE和编辑器，值得学学。

Emmet 文档－快速书写html的语法

• > 代表下一级标签（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>

这个插件还有很多高级的用法，用的很少了啦，有兴趣请去官网查看。