emmet语法
emmet语法
在前端开发的过程中,最费时间的工作就是写 HTML、CSS 代码。一堆的标签、属性、括号等,头疼。这里推荐一个Emmet语法规则,让你写的时候爽到飞起,能大大提高代码书写,只需要敲一行代码就能生成你想要的完整HTML结构。
Emmet是一款插件,只要能安装他的编辑器都能使用,大部分编辑器都可以使用该语法规则,我们平时开发的Sublime Text、Eclipse、Notepad++、VS code、Atom、Dreamweaver等等编辑器都可以使用。
- 快速生产html骨架:!+ tab键盘
- 快速创建某个元素,并指定id、class属性值 id(#),class(.) +tab键盘
div.allen
div#my_id
- 子节点(>),兄弟节点(+),上级节点(^)
div>ul>li>p + tab键盘
div+ul+p + tab键盘
没有成功
- 重复(*)
div*5(*号后面添加数字表示重复的元素个数)
- 分组(())
(括号里面的内容为一个代码块,表示与括号内部嵌套和外面的的层级无关)
div>(ul>li>a)+div>p
去掉括号,div>ul>li>a+div>p
- 属性
- 文本
- 隐式标签
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键—>