Emmet 基本操作

Emmet 基本操作

Emmet在sublime有专门插件，安装参考，而且VScode和Atom都有内置工具。

就是一个字，快。两个字，效率。

dom生成

下面就是见证奇迹的时刻。

1 输入你想要的标签：

h2

然后按tab:

2 像css的格式输入对应的id，class类或者内容{}，输入：

p#app.main{Hello World}

按tab:

Hello World

3 像css的格式，输入属性[]：

 a[href="http://www.jianshu.com/p/c1e3b96c1293"]{前端经验收集器}

按tab:

前端经验收集器

4 母控件用>指向子控件，并行控件用+， div可以省略：

.wrapper>h1{hello}+.content

按tab:

     
hello
    

5 多个并列控件同时生成（注意：加入括号保证优先级），输入：

ul>(li>a)*4

按tab:

html 初始化

html:5 或!：用于 HTML5 文档类型
html:xt：用于 XHTML 过渡文档类型
html:4s：用于 HTML4 严格文档类型

参考

• Emmet的高级功能与使用技巧
• Emmet 实例教程