Visual Studio Code中是否有插入基础HTML模板的快捷方式？
2026-5-7
当然支持！VS Code快速生成HTML基础模板的方法
完全可以实现！VS Code自带的Emmet工具就能做到和Sublime Text一样的快捷操作，甚至功能更丰富。具体操作步骤如下：
- 首先新建一个后缀为
.html的文件，确保VS Code识别它为HTML语言（可以看右下角状态栏，显示“HTML”就没问题，不是的话点击切换即可） - 在空白编辑区域输入
html、html:5或者直接输入!（感叹号），然后按下Tab键 - 瞬间就能生成完整的基础HTML模板，包含你需要的
<!DOCTYPE html>、<html>、<head>、<body>等标签，还会自动添加字符编码、视口设置和标题标签，示例模板如下：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> </body> </html>
如果操作后没生效，可以检查这两个设置：
- 打开VS Code设置（快捷键Windows/Linux用
Ctrl+,，Mac用Cmd+,） - 搜索
emmet.triggerExpansionOnTab，确保这个选项是勾选状态 - 再次确认当前文件的语言模式是HTML，避免因为文件后缀不对导致Emmet不触发
另外Emmet还有很多其他实用的HTML/CSS快捷语法，能大幅提升你的开发效率，感兴趣的话可以多尝试下！
内容的提问来源于stack exchange，提问作者Muhammad Abdullah
