如何利用VSCode的Emmet插件快速编写HTML/CSS？-VSCode-PHP中文网

如何利用VSCode的Emmet插件快速编写HTML/CSS？

紅蓮之龍

发布： 2025-09-26 19:39:01

原创

1001人浏览过

VSCode内置Emmet支持，通过简短缩写快速生成HTML和CSS代码。输入!+Tab可生成HTML5结构，使用>、+、*实现嵌套、同级与重复元素，#和.添加id与class，ahref{文本}可添加属性与内容；CSS中pos、m10等缩写展开为完整属性，支持单位输入如mt20px，flex布局fxd、jcc、aic等提升样式编写效率；配合Ctrl+E转换当前行、Enter展开及自定义配置，显著加快页面骨架与样式开发速度。

如何利用vscode的emmet插件快速编写html/css？

VSCode 内置了 Emmet 支持，能极大提升 HTML 和 CSS 的编写效率。只要输入简短的缩写，按 Tab 或 Enter 就能生成完整的代码结构，特别适合快速搭建页面骨架或样式规则。

HTML 中的 Emmet 用法

在 .html 文件中，Emmet 可以将简洁的表达式转换为完整的标签结构。

• 输入 ! 然后按 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>
    <li></li>
    <li></li>
    <li></li>
  </ul>
</div>

登录后复制

• 用 # 添加 id，. 添加 class：

div.container#main →
<div class="container" id="main"></div>

登录后复制

• 添加属性和内容也很方便：

a[href="#"][title="Link"]{点击这里} →
<a href="#" title="Link">点击这里</a>

登录后复制

CSS 中的 Emmet 缩写技巧

在 .css 文件中，Emmet 提供了大量属性缩写，减少重复输入。

• 输入属性前缀即可展开：

pos → position: relative;
m10 → margin: 10px;
p5 → padding: 5px;
db → display: block;
fl → float: left

登录后复制

• 支持带单位的数值：

mt20px → margin-top: 20px;
w100p → width: 100%;
h50em → height: 50em

登录后复制

• 快速生成 flex 布局相关样式：

fxd → flex-direction: row;
jcc → justify-content: center;
aic → align-items: center;

登录后复制

提高效率的小技巧

除了基本用法，掌握这些操作能让编码更流畅。

Symanto Text Insights

基于心理语言学分析的数据分析和用户洞察

查看详情

立即学习“前端免费学习笔记（深入）”；

• 在任意 HTML 标签内按 Ctrl+E（macOS 为 Cmd+E），可将当前行转为 Emmet 缩写再展开。
• 输入缩写后，除了 Tab，也可以用 Enter 触发展开（取决于设置）。
• VSCode 支持自定义 Emmet 配置，在 settings.json 中可添加新缩写或启用 JSX 支持。

基本上就这些。熟练使用 Emmet 后，写 HTML 结构和 CSS 样式会快很多，尤其在搭建原型或组件时特别省时间。不复杂但容易忽略。

以上就是如何利用VSCode的Emmet插件快速编写HTML/CSS？的详细内容，更多请关注php中文网其它相关文章！