VSCode的Emmet功能怎么用？-VSCode-PHP中文网

VSCode的Emmet功能怎么用？

betcha

发布： 2025-09-27 19:53:01

原创

1005人浏览过

输入!或html:5按Tab生成HTML5结构，用>、+、^实现嵌套与同级关系，.、#、[]快速添加类、ID和属性，CSS中m10等简写提升样式编写效率。

vscode的emmet功能怎么用？

VSCode中的Emmet功能能极大提升HTML和CSS的编写效率，通过简写形式快速生成完整代码。只要在HTML或支持的语言文件中输入特定缩写，按Tab或Enter就能展开成结构化标签。

基本HTML结构生成

输入!或html:5，然后按Tab，就会自动生成标准的HTML5文档结构：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
</body>
</html>

嵌套与父子关系

使用>表示嵌套（子元素），+表示同级（兄弟元素），^向上跳出一层。

例子：

div>ul>li*3 → 生成一个div包含一个ul，里面有3个li
header+main+footer → 生成三个并列的块级标签
div>p^span → p在div内，span在div外与div同级

类、ID与属性快速添加

用.定义class，#定义id，[属性=值]添加自定义属性。

乐活途购物分享社区

beta v1.1版本为第一个版本，简单的整合了基础功能，各位站长拿到程序后，不要纠结后台的功能简单，后续将不断更新扩展。在beta v1.1版本使用过程中遇到什么问题，请登录 www.loftto.com 进行反馈！安装说明######重要提醒：程序不支持二级目录安装，请使用一级目录或二级目录绑定！#第一步，确定你的服务器支持PHP+mysql。#第二步，确定你的服务器开启了gd库。#第三步，