怎样在VSCode中快速生成HTML模板？-VSCode-PHP中文网

怎样在VSCode中快速生成HTML模板？

紅蓮之龍

发布： 2025-10-02 10:38:02

原创

163人浏览过

输入!或html:5后按Tab键可快速生成HTML5模板，通过自定义代码片段（如myhtml）能创建含特定结构的模板，结合插件进一步提升开发效率。

怎样在vscode中快速生成html模板？

在VSCode中快速生成HTML模板非常简单，主要依靠内置的Emmet语法和文件模板功能。只要你安装了HTML相关的语言支持（默认已支持），就能用几种高效方式快速创建标准HTML结构。

使用Emmet缩写生成HTML模板

这是最常用的方法。在新建的.html文件中输入以下缩写，然后按Tab或Enter键即可自动生成完整HTML5模板：

! 或 html:5 — 输入后按Tab，会生成标准的HTML5文档结构

例如：

! → 按Tab →
<!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>

创建用户代码片段（Snippet）来自定义模板

如果你有特定的HTML模板结构（比如包含CSS链接、JS引用等），可以创建自己的代码片段：

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

Picsart AI Image Generator

Picsart推出的AI图片生成器

查看详情

打开命令面板：Ctrl+Shift+P（Windows）或 Cmd+Shift+P（Mac）
输入“Configure User Snippets”
选择“html.json”
添加自定义片段，例如：

"Custom HTML5 Template": {
  "prefix": "myhtml",
  "body": [
    "<!DOCTYPE html>",
    "<html lang=\"zh-CN\">",
    "<head>",
      "<meta charset=\"UTF-8\">",
      "<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">",
      "<title>$1</title>",
      "<link rel=\"stylesheet\" href=\"style.css\">",
    "</head>",
    "<body>",
      "$2",
    "</body>",
  "</html>"
  ],
  "description": "My custom HTML5 template"
}

保存后，在HTML文件中输入myhtml，再按Tab就能调用你的专属模板。