博客列表 >Emmet常用语法

Emmet常用语法

深巷的博客
深巷的博客原创
2022年10月16日 21:36:59738浏览

Emmet常用语法

Emmet是一个Web开发工具,用于加快HTML和CSS代码的编写速度。使用Emmet能够通过简短的表达式生成HTML或CSS代码片段。另外,截至2022年,主流的编辑器工具如Visual Studio Code、WebStorm都已经集成了Emmet工具,无需手动安装即可使用。

1.初始化HTML结构

输入!再按Tab键执行(下同)即可生成HTML初始化结构:

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7. <title>Document</title>
  8. </head>
  9. <body>
  10. </body>
  11. </html>

2.标签与内容

使用大括号{}即可生成带文本内容的标签
例1:div{文本内容}

  1. <div>文本内容</div>

例2:p{文本内容}

  1. <p>文本内容</p>

3.属性和语法糖

使用方括号[]也称中括号即可生成带有属性的标签

例1:div[name=kangkang][name=kangkang](不写标签默认为div)

  1. <div name="kangkang"></div>

例2:p[name=kangkang]{名称}

  1. <p name="kangkang">名称</p>

id,class是高频,通用属性,emmet为它定制了”语法糖”
id => #, class => .

例1:div#id#id

  1. <div id="id"></div>

例2:div.class.class

  1. <div class="class"></div>

例3:#id.class{文本内容}

  1. <div id="id" class="class">文本内容</div>

4.重复

使用*符号(乘号)即可生成重复的代码

例:#id.class{文本内容}*3

  1. <div id="id" class="class">文本内容</div>
  2. <div id="id" class="class">文本内容</div>
  3. <div id="id" class="class">文本内容</div>

5.父子节点

使用>符号即可生成父子节点

例:ul>li{item}*3

  1. <ul>
  2. <li>item</li>
  3. <li>item</li>
  4. <li>item</li>
  5. </ul>

6.兄弟节点

使用+符号即可生成兄弟节点

例:h3{标题}+p{内容}

  1. <h3>标题</h3>
  2. <p>内容</p>

7.父级兄弟节点

使用^符号即可生成父级兄弟节点

例:ul>li{item}*3^p{内容}

  1. <ul>
  2. <li>item</li>
  3. <li>item</li>
  4. <li>item</li>
  5. </ul>
  6. <p>内容</p>

8.分组

使用括号()即可将节点分组执行

例:div>(ul>li*3>a{link})+p

  1. <div>
  2. <ul>
  3. <li><a href="">link</a></li>
  4. <li><a href="">link</a></li>
  5. <li><a href="">link</a></li>
  6. </ul>
  7. <p></p>
  8. </div>

如果不加括号()分组则 div>ul>li*3>a{link}+p

  1. <div>
  2. <ul>
  3. <li>
  4. <a href="">link</a>
  5. <p></p>
  6. </li>
  7. <li>
  8. <a href="">link</a>
  9. <p></p>
  10. </li>
  11. <li>
  12. <a href="">link</a>
  13. <p></p>
  14. </li>
  15. </ul>
  16. </div>

9.序号

使用$,$@ 进行编号

例1. ul>li{item-$}*3 (默认从1开始使用$$@1)

  1. <ul>
  2. <li>item-1</li>
  3. <li>item-2</li>
  4. <li>item-3</li>
  5. </ul>

例2. ul>li{item-$@3}*3 (自定义起始序号使用$@+值)

  1. <ul>
  2. <li>item-3</li>
  3. <li>item-4</li>
  4. <li>item-5</li>
  5. </ul>

例3.ul>li{item-$@-1}*3 (逆序使用$@-+值)

  1. <ul>
  2. <li>item-3</li>
  3. <li>item-2</li>
  4. <li>item-1</li>
  5. </ul>
声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议