这样写Html很快
作为非前端开发,表示html的书写真心很慢。无意了解到Emmet插件,发现可以像下面这种方式书写html,简直不要太爽。
div.container>h1+form>(div.form-group>label+input)*2+select>option#id$*3^button[type=submit]{submit}
这样一句简单的代码,就可以生成以下dom结构:
是不是很爽?!
以上主要涉及到几个操作符,简要做下解释:
-
>
: 子节点,如div>ul>li
-
+
: 并行节点,同胞节点,如div+ul>li
-
^
: 父节点,可以叠加使用,比如ul>li>a^^div
上级多层
-
*
:重复,即节点重复几次 -
()
:分组,将多个节点组合,如div>(p>span)*2
6.
属性操作
:- id和类:
div#header+div.main+div#footer
- 属性值,如
a[title=test target=_self]
- 数列值:
$
,如p.item$*3
或p.item$$*3
//p.item$*3
//p.item$$*3
【这样写Html很快】
-
{}
:字符操作:a{click}
//a{click}
click
推荐阅读
- JAVA(抽象类与接口的区别&重载与重写&内存泄漏)
- 一个小故事,我的思考。
- 今天写一些什么
- 小影写在2018九月开学季
- 标签、语法规范、内联框架、超链接、CSS的编写位置、CSS语法、开发工具、块和内联、常用选择器、后代元素选择器、伪类、伪元素。
- django-前后端交互
- 你再这样提问,就没人愿意回答你了
- 写给陈羡
- angular2内置管道
- 尖子生的启示(3)