在VSCode中使用Emmet来极速编写HTML和CSS_石家庄创泽智能科技有限公司

新闻中心 NEWS CENTER

您当前位置：首页 > 新闻中心 > 网络学院

在VSCode中使用Emmet来极速编写HTML和CSS

2025-12-05

浏览次数：次

返回列表

Emmet 是 VSCode 内置的高效编码工具，支持 HTML/CSS 缩写快速生成代码，如 ul>li*5 生成无序列表、m10 展开为 margin: 10px;，并可通过设置自定义触发行为与语言支持。

在vscode中使用emmet来极速编写html和css

Emmet 是 VSCode 内置的高效编码工具，无需额外安装插件，开箱即用。它通过简短的缩写（Abbreviation）快速生成结构化 HTML 和 CSS 代码，大幅减少重复敲击。

HTML 缩写：一行写出完整结构

在 HTML 文件中输入缩写后按 Tab（或 Enter，取决于设置），即可展开为标准 HTML 片段。

ul>li*5 → 生成含 5 个 li 的无序列表
div.container>h1+p{Hello}+a[href=#]{Click} → 生成带类名、标题、段落和链接的嵌套结构
img[src=logo.png alt=Logo][width=200] → 快速写出带多个属性的 img 标签

CSS 缩写：属性自动补全与值推导

在 CSS 或 style 属性中输入缩写，按 Tab 即可展开为完整声明，并智能补全常用值。

YIXUNCMS中秋专版2.0.4

系统介绍：YIXUNCMS中专专版是易迅软件工作室在中秋节来临之即推出的专题模板建站系统，使用增强版后台管控系统，板板设计符合节日特点。易迅软件工作室恭祝全国人民中秋快乐。特别提示：由于网站页面的不同设计，部分后台功能未在前端进行体现。系统特点：1、采用目前流行的PHP语言编写，底层采用超轻量级框架作为系统支撑；2、页面布局使用DIV+CSS技术，遵循WEB标准，及大提高页面的浏览速度；3、使用应

0 查看详情 YIXUNCMS中秋专版2.0.4

m10 → margin: 10px;
bd1s#333 → border: 1px solid #333;
w100p → width: 100%;（p 表示 percent）
trf:rx45 → transform: rotate(45deg);

自定义 Emmet 行为（可选但实用）

VSCode 默认已启用 Emmet，但你可以微调以更贴合习惯：

在设置中搜索 emmet，勾选 Emmet: Trigger Expansion on Tab 确保 Tab 键生效
如需在 JSX/TSX 中使用，添加配置："emmet.includeLanguages": {"j*ascript": "html", "typescriptreact": "html"}
禁用特定文件类型（如 Markdown）的 Emmet：在设置中添加 "emmet.excludeLanguages": ["markdown"]