收藏
PHPz批改状态：合格
老师批语：很好
Emmet是一个Web开发工具，用于加快HTML和CSS代码的编写速度。使用Emmet能够通过简短的表达式生成HTML或CSS代码片段。另外，截至2022年，主流的编辑器工具如Visual Studio Code、WebStorm都已经集成了Emmet工具，无需手动安装即可使用。
输入!再按Tab键执行（下同）即可生成HTML初始化结构：
<!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>
使用大括号{}即可生成带文本内容的标签
例1：div{文本内容}
<div>文本内容</div>
例2：p{文本内容}
<p>文本内容</p>
使用方括号[]也称中括号即可生成带有属性的标签
例1：div[name=kangkang] 或 [name=kangkang]（不写标签默认为div）
<div name="kangkang"></div>
例2：p[name=kangkang]{名称}
<p name="kangkang">名称</p>
id,class是高频,通用属性,emmet为它定制了”语法糖”id => #, class => .
例1：div#id 或 #id
<div id="id"></div>
例2：div.class 或 .class
<div class="class"></div>
例3：#id.class{文本内容}
<div id="id" class="class">文本内容</div>
使用*符号（乘号）即可生成重复的代码
例：#id.class{文本内容}*3
<div id="id" class="class">文本内容</div><div id="id" class="class">文本内容</div><div id="id" class="class">文本内容</div>
使用>符号即可生成父子节点
例：ul>li{item}*3
<ul><li>item</li><li>item</li><li>item</li></ul>
使用+符号即可生成兄弟节点
例：h3{标题}+p{内容}
<h3>标题</h3><p>内容</p>
使用^符号即可生成父级兄弟节点
例：ul>li{item}*3^p{内容}
<ul><li>item</li><li>item</li><li>item</li></ul><p>内容</p>
使用括号()即可将节点分组执行
例：div>(ul>li*3>a{link})+p
<div><ul><li><a href="">link</a></li><li><a href="">link</a></li><li><a href="">link</a></li></ul><p></p></div>
如果不加括号()分组则 div>ul>li*3>a{link}+p
<div><ul><li><a href="">link</a><p></p></li><li><a href="">link</a><p></p></li><li><a href="">link</a><p></p></li></ul></div>
使用$,$@ 进行编号
例1. ul>li{item-$}*3 （默认从1开始使用$ 或 $@1）
<ul><li>item-1</li><li>item-2</li><li>item-3</li></ul>
例2. ul>li{item-$@3}*3 （自定义起始序号使用$@+值）
<ul><li>item-3</li><li>item-4</li><li>item-5</li></ul>
例3.ul>li{item-$@-1}*3 （逆序使用$@-+值）
<ul><li>item-3</li><li>item-2</li><li>item-1</li></ul>
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
