“一键”生成HTML——Emmet插件经常使用语法

Emmet是一款文本编辑器/IDE的插件，用来快速生成复杂的HTML代码，只要掌握一些经常使用的语法（相似于CSS选择器），就能够减小重复编码的工做（主要是懒）。
我我的惯用的是sublime，所以下文介绍的语法仅在sublime测试经过，不过其它平台应该也不会有什么出入。

使用Emmet前提：设置当前为HTML语法模式

在sublime中启用Emmet，必须把当前代码的语法模式改成HTML，若是原本就是.html文件那就没问题；若是是新建的文件尚未保存过的，则须要手动先设置为HTML：

1. 在sublime右下角点击Plain Text，弹出菜单，选择HTML。
   

2. 按下Ctrl + Shift + P，打开命令控制台，输入“HTML”，选择Set Syntax:HTML便可。
   

快捷键

Emmet使用Tab和Ctrl + e做为自动生成HTML代码的触发器。

如上图所示，输入完生成HTML的语句后，按下Tab或Ctrl + e，便可生成对应的HTML代码：

Emmet经常使用语法

Emmet的语法有不少，还为了进一步提升效率而为比较长的标签都设置了缩写，我我的认为记住经常使用的语法便可，缩写什么的真的是学习成本过高了。

生成HTML结构：!

输入!按下Tab，便可生成标准的HTML5结构：

实际上也是能够生成HTML4的结构的，但毕竟已通过时了，这里按下不表。

后代：>

div>ul>li

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

兄弟：+

div>label+input

<div><label for=""></label><input type="text"></div>

分组：()

当咱们须要写一些比较复杂的HTML结构时，有两种方式能实现，其一是上级^，可是我以为有点逆推的意味，思路上比较绕，很差用；另一种就是分组()了，这是程序员广泛具备的分治思想的体现。
div>(ul>li)+(ol>li)

<div>
  <ul>
    <li></li>
  </ul>
  <ol>
    <li></li>
  </ol>
</div>

重复多个：*

div>ul>li*5

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

ID：#，类：.

ID和类能够同时使用也能够分别独立使用：

• div#article.container
  <div id="article" class="container"></div>

• div#article
  <div id="article"></div>

• div.container
  <div class="container"></div>

属性：[attr="val"]

label[for="passwd"]
<label for="passwd"></label>

文本内容：{}

div>a{点这里跳转}
<div><a href="">点这里跳转</a></div>

惟一比较经常使用的缩写：input:type

在<input>里，type属性是一定要填的（你忽略type="text"我就鄙视你），并且各个type都还满经常使用的，所以这个缩写能够记一下：input:type等价于input[type="type"]。
由于type属性能够取的值太多了，这里仅列出几个经常使用的做为示例：

• input:text
  <input type="text" name="" id="">

• input:radio
  <input type="radio" name="" id="">

• input:checkbox
  <input type="checkbox" name="" id="">

参考资料

Emmet官方文档