Emmet是一款编辑器插件，支持多种编辑器支持。在前端开发中，Emmet 使用缩写语法，可以快速编写 HTML、CSS 以及实现其他的功能，极大的提高前端开发效率。
一般的使用方法：输入代码后按TAB键。
使用环境：
推荐以下两个：subline text2、atom (都需要安装相关的emmet插件)
关系：> + ^
①从属关系： >
div>ul>li
div>ul>li
②平行关系： +
div+div+div
div+div+div
③向上一级： ^
div+div>ul>li^p+div
有几个^就向上几级
div+div>ul>li^p+div
四则运算: * ()
④乘法： *
div>ul>li*5
div>ul>li*5
⑤分组： ()
(div>ul>li)+div>table>(tr+td)*3+(div)
(div>ul>li)+div>table>(tr+td)*3+(div)
举个反例：
div>ul>li+div>table>(tr+td)*5+div
div>ul>li+div>table>(tr+td)*5+div
属性操作 # . [] $ @ -
⑥ID和class
div#header.box1+div.warp+div#footer
div#header.box1+div.warp+div#footer
id用#，class用. 这个是html+css的基础内容啦~
⑦自定义属性
div[title='header' colspan=3]
div[title='header' colspan=3]
⑧元素编号
div>ul>li.item$*5
div>ul>li.item$*5
$符号可以自动从1开始编号。多个$也有特殊效果例如：
div>ul>li.item$$$*5
div>ul>li.item$$$*5
当然，还有特殊玩法：
- 比如，我不想从1开始编，可以用@符号来修改当前的编号
div>ul>li.item$$$@4*5
div>ul>li.item$$$@4*5
emmet会自动从4开始往后编号
- 又比如，我想让他倒着编号，从最大号到最小的一号：
div>ul>li.item$$$@-*5
div>ul>li.item$$$@-*5
当然，两者加在一起用也是可以的。
文本操作： {}
⑨给元素添加内容：
a{Click here to fly}
a{Click here to fly}
注意：
a{click}+b{here} 和 a>{click}+b{here} 结果是不一样的
a{click}+b{here}
a{click}+b{here}
a和b首先是平行关系，其次再转译；
a>{click}+b{here}
a>{click}+b{here}
而在这里，b是从属于a的，所以生成的是b被包含于a中的语句，
即爸爸永远是你爸爸，即使对a进行了添加内容的操作，不会改变上下级的关系。
举一个更复杂的例子：
p>{Click}+a{here}+{to continue}
p>{Click}+a{here}+{to continue}
首先在p中生成一个Click，再生成一个a，内容是here，在</a>之外再生成一个to continue
其他功能
- 键入一个html:5可以得到
html:5
这样一个html的框架，效率就很高~
- ！
跟上面的效果一致
- 所有未知的缩写都会被转化成标签，例如输入一个foo
foo
- a:link
a:link
- img
img
其他功能和复杂玩法请自行摸索~
!>(div#header>nav)+(div#content)+(div#footer)
!>(div#header>nav)+(div#content)+(div#footer)
这个就能生成一个大体上的包含header、主体、footer在内的一个html5的开发框架啦~
ps：并没有采用很专业的术语，想让内容看起来尽可能的通俗易懂适合大多数人，特别是我接下来要带的学弟和学妹们~
2017年12月7日 21点26分
参考：
https://www.w3cplus.com/tools/emmet-cheat-sheet.html
https://segmentfault.com/a/1190000007812543
网友评论