Document

Emmet插件以前被称作为Zen Coding，而现在的 Emmet 则是 Zen Coding 的升级版，它是一个文本编辑器的插件，它可以帮助您快速编写HTML和CSS代码，从而加速Web前端开发。只需敲下极少的代码摁下 **Ｔab** 键，即可生成完整的代码。 ## doctype补全 ```html html:5 或者　! Document html:xt 生成 HTML4 过渡型 Document html:4s 生成 HTML4 严格型 Document ``` ## element标签名 ```html div

``` ## ID选择符 ```html div#some-id 或者 #some-id

``` ## CLASS类选择符 ```html div.some-class 或者 .some-class

``` ## > 嵌套，直接子节点 ```html div>ul>li

``` ## + 兄弟节点 ```html div+p+bq

``` ## ^ 切换上下文，返回上一级 ```html div+div>p>span+em^bq

div+div>p>span+em^^^bq

``` ## * 重复多个 ```html ul>li*5

``` ## ( ) 分组，用来分组子集，不推荐过多使用 ```html div>(header>ul>li*2>a)+footer>p

(div>dl>(dt+dd)*3)+footer>p

``` ## [ ] 用户自定义属性 ```html div[title="Hello world!"]

{% endhighlight%} ## $ 数字 ```html ul>li.item$*5

{% endhighlight%} ## $ 可以使用多个$，不足会使用0占位 ```html ul>li.item$$$*5

{% endhighlight%} ## @控制数字开始值和顺序 ```html @- 倒序 ul>li.item$@-*5

@n 改变数字开始位置 ul>li.item$@3*5

@-n 降序并改变开始位置 ul>li.item$@-3*5

``` ## {}文本节点 ```html a{Click me} Click me 注意如下的区别（受>影响） a{click}+b{here} clickhere a>{click}+b{here} clickhere ``` ## lorem 生成一段虚拟文字，一般用来快速填充html，查看效果 ```html lorem Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias et nemo repudiandae. Esse ex molestias numquam, possimus quaerat quas sint tempora? Asperiores dicta ducimus facilis impedit neque ratione ut vel! lorem10 //生成10个单词 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore, totam. p*4>lorem

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui dicta minus molestiae vel beatae natus eveniet ratione temporibus aperiam harum alias officiis assumenda officia quibusdam deleniti eos cupiditate dolore doloribus!

Ad dolore dignissimos asperiores dicta facere optio quod commodi nam tempore recusandae. Rerum sed nulla eum vero expedita ex delectus voluptates rem at neque quos facere sequi unde optio aliquam!

Tenetur quod quidem in voluptatem corporis dolorum dicta sit pariatur porro quaerat autem ipsam odit quam beatae tempora quibusdam illum! Modi velit odio nam nulla unde amet odit pariatur at!

Consequatur rerum amet fuga expedita sunt et tempora saepe? Iusto nihil explicabo perferendis quos provident delectus ducimus necessitatibus reiciendis optio tempora unde earum doloremque commodi laudantium ad nulla vel odio?

ul.generic-list>lorem10.item*4 //10是只每行10个单词

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nam vero.
Laboriosam quaerat sapiente minima nam minus similique illum architecto et!
Incidunt vitae quae facere ducimus nostrum aliquid dolorum veritatis dicta!
Tenetur laborum quod cum excepturi recusandae porro sint quas soluta!

``` 转载链接：[emmet语法](http://www.zkboys.com/2016/03/11/emmet%E8%AF%AD%E6%B3%95/)

emmet 语法介绍

文章分类