Emmet使用

对于开发web前端来说，尤其是编写html文件，emmet无疑是一个神器 

1、生成html基本框架

！+tab   == >> 生成HTML5 的标准文档初始结构   

类似的 

html:5 或者 ! 生成 HTML5 结构

html:xt 生成 HTML4 过渡型

html:4s 生成 HTML4 严格型

2、生成带有id或者class的标签代码

①生成带有id的代码

    div#aaa    +tab  ==>> 生成  

②生成带有class的代码

    div.bbb   +tab  ==>> 生成

③生成同时带有id和class的代码

div#aaa.bbb   +tab ==>>生成

3、生成下级标签

div>ul>li   +tab ==>>生成

4、同时生成多个相同标签

ul>li*5  +tab  ==>>生成

5、生成同级标签

div+p+ul>li  +tab  ==>> 生成 

6、生成上级标签   一个^表示上一级

div>ul>li^^div.ccc  +tab ==>>  生成

7、生成分组（）     有利于看清层次结构

div>(header>ul>li*2>a)+footer>p   +tab ==>> 生成

8、自定义属性[attr]

a[href="https://blog.csdn.net/ice_cap1995" title="ice_cap1995"]   +tab ==>>生成

9、对生成内容编号

ul>li.item$*5   +tab ==>>生成

同时使用多个$指定编号范围

ul>li.item$$$*5  =tab ==>>生成

使用@N指定起始编号N       

ul>li.item$@41*5 +tab ==>> 生成

使用@-表示倒序排列 

ul>li.item$@-11*5 +tab ==>> 生成

10、使用{}生成文本

a[href="https://blog.csdn.net/ice_cap1995"]{点击这里到ice_cap1995的博客}  +tab ==>>生成

点击这里到ice_cap1995的博客

注意事项：

1、使用的所有符号均为英文标点

2、使用时中间不允许有空格存在

其他包括css的简写功能略 可以自己了解使用