HTML书写利器 - Emment小记

最近上手webstrome开始项目开发，这款强大的IDE令我耳目一新，刚刚掌握了一些基本的快捷键，顺便也把很多IDE都内置的Emment，这个前端开发中代码自动补全神器重新学习了下，并做一总结。

Emmet是一套面向文本编辑器的插件，它允许通过内容辅助高速度的编写和编辑HTML、XML、XSL和其他结构化的代码格式。

1.基本符号

>：表示父子元素层次，例如 div>p，代表div标签下有个子元素p标签

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

+：表示同级元素层次，例如 div+p，代表div标签与P标签是在同一级

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

^：表示到上一级层次，例如 div>p>^a，代表div标签下有p标签和a标签，其中a标签用^符号返回到了与p标签同级的位置

<div>
    <p></p>
    <a href=""></a>
</div>

*：表示重复该元素，例如 div*3，代表有三个div，并且为同级

<div></div>
<div></div>
<div></div>

()：表示组合，为提高可读性，例如 '(div>ul>li*3)+p`

<div>
    <ul>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</div>
<p></p>

2.属性符号

.：小数点，表示标签带class属性，例如 div.item

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

#：表示标签带id属性，例如 div#username

<div id="username"></div>

[]：方括号，标签带自定义属性，例如 div[data-time]

<div data-time=""></div>

3.补充符号

$：自动生成有序数字，例如 li.item$*3

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

{}：在花括号包裹的内容会自动出现在标签内部，但是花括号内包含的emment语法都不会生效，例如 p{这个是内容div}

<p>这个是内容div</p>

lorem：自动补充无意义的英文内容，一般后加数字为补充内荣的单词数目，例如 lorem10

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex, quaerat.

4.注意事项

一般在使用Emment过程中应注意以下要求

• 输入完Emment语句后按TAB键生成内容
• 光标要停留在Emment语句的末尾才能使整句Emment语句生效
• 在Emment语句中间不能加任何空格