[前端]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>

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