Emmet 常用语法
2017-09-11 本文已影响283人
Nian糕
Unsplash
Emmet 是一个能大幅度提高前端开发效率的一个工具，通过在编辑器中输入 HTML 或 CSS 的代码缩写，按
Tab 键即可拓展为完整的代码片段，本文主要介绍一些 Emmet 常用的语法
快速生成 HTML5 文档类型
缩写： ! 或 html:5
HTML 文档类型
>运算符可以用来生成彼此嵌套的元素，即后代元素
缩写： section>div>p
后代元素
+运算符可以用来生成彼此相邻的元素，即兄弟元素
缩写： div+p+bg
兄弟元素
^运算符，可以让你的代码返回上一层
缩写： div>p>span+em^bq
上层 1
缩写： div>p>span+em^^bq
上层 2
()分组嵌套
缩写：div>(header>ul>li*2>a)+footer>p
分组嵌套 1
缩写：(div>dl>(dt+dd)*3)+footer>p
分组嵌套 2
*运算符，能一次性生成多个相同的标签
缩写：ul>li*5
乘法
$递增
缩写：ul>li.item$*5
递增 1
缩写：h$[title=item$]{Header $}*3
递增 2
ID、class、属性、文本
缩写：#header
ID
缩写：.item1.item2
class
缩写：input[name="item"]
属性
缩写：p{peace and love}
文本
隐式标签
缩写： em>.item
隐式标签 1
缩写： ul>.item
隐式标签 2
标签
缩写： bq
blockquote
缩写： fig
figure
缩写： figc
figcaption
缩写： ifr
iframe
缩写： emb
embed
缩写： obj
object
缩写： cap
caption
缩写： clog
clogroup
缩写：fst
fieldset
缩写：btn
button
End of File
行文过程中出现错误或不妥之处在所难免，希望大家能够给予指正，以免误导更多人，最后，如果你觉得我的文章写的还不错，希望能够点一下喜欢和关注，为了我能早日成为简书优秀作者献上一发助攻吧，谢谢！^ ^
