Emmet不完全总结

最近看了Emmet文档,此处为不完全总结一下,以后会慢慢充实,与官方文档有较多重合,请勿拍砖。

Emmet在HTML和CSS上面的强大就不再赘述了,本文主要讲述的内容如下:

  • 功能

  • 语法

  • 配置文件

    • preferences.json

    • snippets.json

  • 推荐链接

功能

下面罗列的功能并不是 Emmet 全部功能,如需查看全部,请参看推荐链接 Actions 部分

  1. 展开缩写:对HTML和CSS均有奇效,鉴于此处内容较多,具体使用见语法部分

  2. 向内、向外匹配标签:从插入符处开始选中

  3. 在开始和结束标签之间切换

  4. 特定内容包裹选中内容

  5. 上一个/下一个编辑点:编辑点指的是标签之间、空标签以及缩进的新行

  6. 选中上一个/下一个代码: 可选中的包括html标签名、属性及属性值和css的选择器、属性及属性值

  7. 切换注释:和其他切换注释的方法不同的是,当没有选中代码时,Emmet 切换当前上下文的注释。对于 HTML 是整个标签内容,对于 CSS 是一条规则或整个属性

  8. 删除标签:当占位符在标签上时,删除自身,其余情况删除父标签;自动调整缩进

  9. 增减数字:分别以0.1、1和10为单位

语法

  • Emmet的语法与css的语法相类似

  • Emmet 遇到空格后停止解析缩写,所以请不要使用空格

  • 可以在文本的任意位置书写并展开缩写

元素

使用元素的名字,比如 div、 p 来生成 HTML 标签。 Emmet 没有预定义标签集合,所以可以用任意单词来生成对应的标签:

div → 
foo →

嵌套操作符

  • 子元素: >

div>ul>li

展开为

  • 兄弟元素: +

h1>div>p>

展开为

  • 返回上层: ^

div>h2>p^div

展开为

该符号也可以连续使用多个,例如:

div>p>span+em^^^bq

展开为

  • 乘法: *

div>ul>li\*5

展开为


  • 分组: ()

该方法可嵌套使用

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

展开为

属性操作符

  • idcode

div#header+div.page+div#footer.class1.class2.class3

展开为


  • 自定义属性

td[title="Hello world!" colspan=3]

展开为


需要清楚的是:可以使用单引号或者双引号包裹属性值,甚至属性值如果不包含空格可以省略引号

  • 文本: {}

a{Click me}

展开为

Click me

配置文件

待填坑...

preferences.json

snippets.json

推荐链接

  1. EMMET官方文档

  2. EMMET中文文档参考 yanxyz@github

  3. Cheat Sheet

你可能感兴趣的:(emmet)