Emmet语法规则之HTML速写

Emmet语法规则之HTML速写

官方地址 https://docs.emmet.io/abbreviations/syntax/

1：html初始结构 ！=> Tab

2：id指令（#）,class指令（.）

3：子节点指令（>），兄弟节点指令（+），上级节点指令（^）

4：重复指令（*）

5：分组指令（()）

6：属性指令（[attr]）

7：编号指令（$），需要配合重复指令（*）

此外，

1. 可以多个占位（$$$)；
2. 指定数字递增指令（$@3）；$@数字数字；例如：ul>li.test$@33
3. 指定数字递减指令（$@-3）；$@-数字数字；例如：ul>li.test$@-33

8：文本指令（{}）

9：隐式标签

这个标签没有指令，而是部分标签可以不使用输入标签，直接输入指令，即可识别父类标签。

li： 可在ul 和 ol 中使用 例如：ul>.test$\ast 3option：可在select中使用例如：select>.test$*5
tr：可在 table、tbody、thead 和 tfoot 中使用
td：可在 tr 中使用

实例：
div#box>(p.title>a.aaa[href=sss data-my=sss]$$${我是第$$$个}*3)+(ul.list>.my$@3{我是第$@3个}*3^div#box2)^^.pchild$@-2{pchild第$@-2}*5