Emmet是一个Web开发人员的工具包，可以大大提高你的HTML和CSS的工作流,这是在emmet官方文档中看到的第一句话,当然这句话也简单的概括了它拥有的魅力。

下面是在WebStorm中作一些应用。

构建一张html网页

一张基本的网页结构一般是具有<html> <head> <body> ,使用emmet只需要按一个tab键的时间就可以实现，输入!,然后按Tab键就能实现如下效果,

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maxeimum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>

</body>
</html>

上面的效果使用html:5 然后按Tab键同样也能实现,如果是html4可以用html:4s ,xhtml用html:xt 然后按Tab键。

添加元素及属性

为元素添加class或者id 如输入span.clsspan#myspan 按Tab 会生成如下代码


<span class="clsspan" id="myspan"></span>

为元素添加属性值 如输入span{this is my span !!!}+a[href=http://blog.seoui.com]


<span>this is my span !!!</span><a href="http://blog.seoui.com"></a>

标签结构嵌套

> 子元素标记

+ 同级元素追加标记

^ 向当前父级元素追加标记

添加子元素实例 如 span>p.item

<span>
    <p class="item"></p>
</span>

添加同级元素实例 如 span+p.item

<span></span><p class="item"></p>

添加父级元素实例 如 span>div^p

<span>
    <div></div>
</span>
<p></p>

分组

以上虽然能轻松实现一些html的元素构建,但是如果遇到批量或者很多的类似的元素怎么办呢?

分组其实就是用()把标记分开,让他们成为一个独立的块。

如 (div.item>p)+(div.deatil>span) 然后按tab会生成以下代码

<div class="item">
    <p></p>
</div>
<div class="deatil"><span></span></div>

如果我想重复生成2次上面的结构,使用((div.item>p)+(div.deatil>span))*2就能实现

<div class="item">
    <p></p>
</div>
<div class="deatil"><span></span></div>
<div class="item">
    <p></p>
</div>
<div class="deatil"><span></span></div>

生成多个带属性的元素 如 ul>li.item$*2

<ul>
    <li class="item1"></li>
    <li class="item2"></li>
</ul>

隐式标签

所谓隐式标签就是可以不用声明标签名称可以直接操作 如.item会生成

<div class="item"></div>

当然不会很死板的一直生成div 隐式标签会根据父元素来生成适当的标签 如在ul内部使用隐式标签则会生成li。

li 、tr 、 td 、 option 都是隐式标签