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 就在表现后加个 #; 如果给标签设置内容就用大括号 {}; 有层级就用 > 和 ^, 平级就用 +, 个数多就用 *

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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 一)jQuery九类选择器【参见jQueryAPI.chm手册】 目的:通过九类选择器,能定位web页面(HTML...
    奋斗的老王阅读 1,044评论 0 51
  • HTML需要掌握标签 标签(空格分隔): H5+CSS [TOC] 常用标签 img 注意点 和H系列标签/p标签...
    袁俊亮技术博客阅读 2,059评论 1 8
  • •前端面试题汇总 一、HTML和CSS 21 你做的页面在哪些流览器测试过?这些浏览器的内核分别是什么? ...
    Simon_s阅读 2,228评论 0 8
  • 养珠人 你在绵延的山丘上徘徊, 身旁是遍地芳草的清香。 你在清澈的小溪边眺望,...
    林夕木目心阅读 186评论 0 1
  • 出门玩遇到高高瘦瘦肤白貌美超模小姐姐 取快递遇到头发乱乱眼睛很好看的小哥哥还有米老鼠头欢乐儿童餐吃掉了今天的所有不...
    小猪小猪快快跑阅读 169评论 0 0