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 就在表现后加个 #; 如果给标签设置内容就用大括号 {}; 有层级就用 > 和 ^, 平级就用 +, 个数多就用 *
简单的这么一个思路, 大家按照这个思路自行扩充即可.
网友评论