Emmet是一个Web开发工具，用于加快HTML和CSS代码的编写速度。使用Emmet能够通过简短的表达式生成HTML或CSS代码片段。另外，截至2022年，主流的编辑器工具如Visual Studio Code、WebStorm都已经集成了Emmet工具，无需手动安装即可使用。
如在Visual Studio Code中新建index.html，输入div，可以看到Emmet Abbreviation说明这是一个Emmet语法规则，如下图所示：
此时点击Emmet Abbreviation或按Tab键即可生成代码片段，在这个例子中生成的是div标签：
<!--!tab--><!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title></head><body></body></html>
2.2 生成带有id的标签
使用操作符#即可生成一个带有id的标签，如输入div#main可生成如下代码片段：
<!--div#main--><div id="main"></div>
当标签为div时，还可以省略div标签，直接输入#main即可生成与上面相同的代码片段：
<!--#main--><div id="main"></div>
2.3 生成带有class的标签
使用操作符.即可生成一个带有class的标签，如输入div.main可生成如下代码片段：
<!--div.main--><div class"main"></div>
类似的，当标签为div时，还可以省略div标签，直接输入.main即可生成与上面相同的代码片段：
<!--.main--><div class"main"></div>
2.4 生成带有属性的标签
使用操作符[]即可生成一个带有属性的标签，如输入div[name=syz age=18]可生成如下代码片段：
<!--div[name=syz age=18]--><div name="syz" age="18"></div>
2.5 标签属性值数字编号
使用操作符$即可生成带有数字编号的标签属性值，如输入ul>li.className$*3可生成如下代码片段：
<!--ul>li.className$*3--><ul><li class="className1"></li><li class="className2"></li><li class="className3"></li></ul>
2.6 生成标签内文本
使用操作符{}即可生成带文本内容的标签，如输入div{文本内容}可生成如下代码片段：
<!--div{文本内容}--><div>文本内容</div>
2.7 子节点生成
使用操作符>即可生成一对父子节点，如输入div>span可生成如下代码片段：
<!--div>span--><div><span></span></div>
2.8 兄弟节点生成
使用操作符+即可生成一对兄弟节点，如输入div+div可生成如下代码片段：
<div></div><div></div>
2.9 父级兄弟节点生成
使用操作符^即可生成一个父级兄弟节点，父级兄弟节点生成通常与子节点生成同时使用，如输入div>span^p可生成如下代码片段：
<div><span></span></div><p></p>
顾名思义，当使用子节点生成使当前上下文处于子节点时，可以通过^操作符使上下文回到父节点处：
2.10 重复节点生成
使用操作符即可生成重复的节点，如输入div3可生成如下代码片段：
<div></div><div></div><div></div>
2.11 节点分组
使用操作符()即可将部分节点分组形成一个整体，将()内的节点与外面节点隔离，避免产生嵌套关系，如输入div>(ul>li)+p可生成如下代码片段：
<div><ul><li></li></ul><p></p></div>
本文对Emmet中的CSS语法部分仅做简单介绍并列举一些常用的方法，若读者想详细了解请参阅官方文档CSS Abbreviations。
3.1 width和height
输入w100即可生成width: 100px，输入w100%即可生成width: 100%；height同理。
div{width: 100px;height: 200px;}
3.2 margin和padding
输入m10即可生成margin: 10px，当要分别设置四个方向的属性值时，输入m10px20px30px40px即可生成代码片段margin: 10px 20px 30px 40px；padding同理。
div{margin: 20px;padding: 20px 30px 50px 60px;}
3.3 属性值生成
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
收藏
