emmet 插件常用语法汇总

emmet语法:

1.!+tab:整个html文档

2.标签名*个数:生成对应个数的标签eg:p*5

3.同级是+, 生成同级标签,同时生成一个a和一个img

4.>:下一级

5.^:上一级

6.{}:紧跟标签的后面,表示该标签的内容

7.#:id (id跟身份证号差不多,在页面中不能出现相同id的标签)

示例:

div.div1 ----> 生成一个class名为div1的div标签

div#div1 ----> 生成一个id名为div1的div标签

p*5 ----> 生成5个p标签

p.*5 ----> 生成5个带有空的class属性的p标签

p#*5 ----> 生成5个带有空的id属性的p标签

a+img ----> 生成同级的一个a和一个img

a.+img. ----> 生成同级的一个a和一个img(此时a和img都有空的class属性)

a#+img# ----> 生成同级的一个a和一个img(此时a和img都有空的id属性)

ul>li*5----> 在ul标签下有5个li标签

ul>li.*5---->在ul标签下有5个带有空的class属性值的li标签

ul>li#*5---->在ul标签下有5个带有空的id属性值的li标签

p{我是一个p} ----> 生成一个内容是"我是一个p"的p标签

(ul>li{1111}*5)*3 或者 ul*3>li{1111}*5 ----> 生成3个带有5个列表项, 列表项内容为"1111"的无序列表

......

如果一一列举的话, 还有很多很多, 大致的思路已经提供给大家: 如果想要给标签带 class 就在标签名后面加个点 . ; 如果想要给标签带 id 就在表现后加个 #; 如果给标签设置内容就用大括号 {}; 有层级就用 > 和 ^, 平级就用 +, 个数多就用 *

简单的这么一个思路, 大家按照这个思路自行扩充即可.