使用 Emmet 生成 HTML 的语法详解（自动生成标签）

为什么80%的码农都做不了架构师？>>>   

IntelliJ家的编辑器都支持Emmet，输入部分约定的字符后再按tab键就会自动生成html标签，很爽的，这里总结一下使用方法：

1. 生成 HTML 文档初始结构

• html:5 或者 ! 生成 HTML5 结构
• html:xt 生成 HTML4 过渡型
• html:4s 生成 HTML4 严格型

2. 生成带有 id 、class 的 HTML 标签

• 生成id为aaa的div：#aaa
• 生成id为aaa的span：span#aaa

3. 生成后代 >

div.aaa>ul>li可以生成：

<div class="aaa">
    <ul>
        <li></li>
    </ul>
</div>

4. 生成兄弟 +

div+p+bq 可以生成：

<div></div>
<p></p>
<blockquote></blockquote>

5.生成上级元素：^

div>ul>li^span 可以生成：

<div>
    <ul>
        <li></li>
    </ul>
    <span></span>
</div>

如果我想相对与 div 生成一个平级元素，那么就再上升一个层次，多用一个“^”符号： div>ul>li^^span

6. 重复生成多份：*

``ul>li*3``` 可以生成：

<ul>
  <li></li>
  <li></li>
  <li></li>
</ul>

7. 生成分组：()

div>(header>ul>li*2>a)+footer>p 可以生成：

<div>
    <header>
        <ul>
            <li><a href=""></a></li>
            <li><a href=""></a></li>
        </ul>
    </header>
    <footer>
        <p></p>
    </footer>
</div>

此外，分组还可以很方便的结合上面说的 “*” 符号生成重复结构：(div>dl>(dt+dd)*3)+footer>p

8. 生成自定义属性：[attr]

a[href="http://xxxx.com" title="这里是title"]

9. 对生成内容编号：$

ul>li.item$*5 可以生成

<ul>
 <li class="item1"></li>
 <li class="item2"></li>
 <li class="item3"></li>
 <li class="item4"></li>
 <li class="item5"></li>
</ul>

$ 就表示一位数字，只出现一个的话，就从1开始。如果出现多个，就从0开始。如果我想生成三位数的序号，那么要写三个 $：
ul>li.item$$$*5 输出：

<ul>
    <li class="item001"></li>
    <li class="item002"></li>
    <li class="item003"></li>
    <li class="item004"></li>
    <li class="item005"></li>
</ul>

只能这样单调的生成序号？对于强大的 Emmet 来说，肯定不会会了，我们也可以在 $ 后面增加 @- 来实现倒序排列：
ul>li.item$@-*5
生成如下结构：

<ul>
    <li class="item5"></li>
    <li class="item4"></li>
    <li class="item3"></li>
    <li class="item2"></li>
    <li class="item1"></li>
</ul>

同样，我们也可以使用[@N] 指定开始的序号：
ul>li.item$@3*5
这样就会从 3 开始排序，生成如下代码：

<ul>
    <li class="item3"></li>
    <li class="item4"></li>
    <li class="item5"></li>
    <li class="item6"></li>
    <li class="item7"></li>
</ul>

配合上面倒序输出，可以这样写：
ul>li.item$@-3*5
生成的就是以 3 为底倒序：

<ul>
    <li class="item7"></li>
    <li class="item6"></li>
    <li class="item5"></li>
    <li class="item4"></li>
    <li class="item3"></li>
</ul>

10.生成文本内容：{}

<!-- a{click}+b{here} -->
<a href="">click</a><b>here</b>

11. 隐式标签

隐式标签表示 Emmet 可以省略某些标签名，例如，声明一个带类的div，只需输入.item，就会生成<div class="item"></div>。
另外，Emmet 还会根据父标签进行判定，例如，在中输入ul>.item$*5，就可以生成：

<ul>
	<li class="item1"></li>
	<li class="item2"></li>
	<li class="item3"></li>
	<li class="item4"></li>
	<li class="item5"></li>
</ul>

下面是所有的隐式标签名称：

• li：用于 ul 和 ol 中
• tr：用于 table、tbody、thead 和 tfoot 中
• td：用于 tr 中
• option：用于 select 和 optgroup 中

12. 参考：

• 官方网站
• 官方api的Cheat Sheet
• html标签生成
• css生成
• Emmet 常用的高级功能

转载于:https://my.oschina.net/kmwzjs/blog/846541