emmet语法

                                     emmet语法

在前端开发的过程中，最费时间的工作就是写 HTML、CSS 代码。一堆的标签、属性、括号等，头疼。这里推荐一个Emmet语法规则，让你写的时候爽到飞起，能大大提高代码书写，只需要敲一行代码就能生成你想要的完整HTML结构。

Emmet是一款插件，只要能安装他的编辑器都能使用，大部分编辑器都可以使用该语法规则,我们平时开发的Sublime Text、Eclipse、Notepad++、VS code、Atom、Dreamweaver等等编辑器都可以使用。

1. 快速生产html骨架：！+ tab键盘

1. 快速创建某个元素，并指定id、class属性值 id（#）,class（.） +tab键盘

div.allen

div#my_id

1. 子节点（>），兄弟节点（+），上级节点（^）

div>ul>li>p + tab键盘

div+ul+p  + tab键盘

没有成功

1. 重复（*）

div*5（*号后面添加数字表示重复的元素个数）

1. 分组（()）

（括号里面的内容为一个代码块，表示与括号内部嵌套和外面的的层级无关）

div>(ul>li>a)+div>p

去掉括号，div>ul>li>a+div>p

1. 属性

1. 文本

1. 隐式标签

 

h41 + tab键àheight:41px； 要写在样式里，

w66 + tab键àwidth:66px

按住滚轮拖动滚轮：批量输入

Div*4 + tab键—>生产4个div标签

Ul>li*5>a + tab键à生产一个ul标签下有5个li子标签，每个li标签又都有一个a标签

.one“+”.two   + tab键à生产2个div并且其class属性值分别是one、two

.allen{家用电器}++ tab键—>