在 visual studio code（以下簡稱 vscode）新建一個html，輸入!後會提示按tab鍵生成html骨架代碼片段：
這種方法生成的格式不適合我們，需要修改它；
方法一，原有基礎上簡單的修改 lang 和 charset 這兩個
在 vscode 上，依次：文件 - 首選項 - 設置 ，輸入 emmet.variables 然後 添加項，如下圖：
建議：搜索
Trigger Expansion On Tab同樣勾上；
這樣，再生成就是這樣了：
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
方法二，使用emmet語法徹底自定義這個感嘆號的模板（推薦）
注意：此方法需要了解 emmet 語法，當然這語法很簡單；
參考 vscode 的官方文檔：https://code.visualstudio.com/docs/editor/emmet#_using-custom-emmet-snippets
官方翻譯是：要自定義 Emmet 代碼片段需要在名爲 snippets.json 的 json 文件中定義。ExtsionsPath 設置應該包含包含此文件的目錄的路徑。
白話文是：在 vscode 的設置中找到 emmet Extensions Path 設置項,填入你自定義的本地絕對路徑，要求這個路徑裏面必須包含 snippets.json 文件，這文件用來定義emmet代碼片段的，包括覆蓋 感嘆號!
操作：
1、在 C:\Users\你的用戶名\AppData\Roaming\Code\User 上新建一個 emmet 文件夾，裏面新建一個 snippets.json 文件，內容是：
{
"html": {
"snippets": {
"!": "{<!DOCTYPE html>}html[lang=zh-CN]>(head>meta[charset=UTF-8]+meta[name=viewport content=\"width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0, minimal-ui:ios\"]+meta[http-equiv=X-UA-Compatible content=\"ie=edge\"]+title{Document}+link[rel=stylesheet href=\"${1}\"]+script[src=\"${2}\"])+body"
}
},
"css": {
"snippets": {
}
}
}
2、在 vscode 上，依次：文件 - 首選項 - 設置 ，輸入 emmet Extensions Path 然後添加項，填入你的路徑：C:\Users\你的用戶名\AppData\Roaming\Code\User\emmet\
重啓 vscode，再試一下，下面就是生成的：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0, minimal-ui:ios">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="">
<script src=""></script>
</head>
<body>
</body>
</html>
方法三：不使用自帶的emmet，而是用自己的代碼片段（推薦）
這種方法，不需要了解 emmet 語法，與 方法二 沒啥不同；
在 vscode 上，依次：文件 - 首選項 - 配置用戶代碼片段 - 打開 html.json（沒有就新建，如下圖）
用下面的來替換：
{
"diy h5": {
"prefix": "!",
"body": [
"<!DOCTYPE html>",
"<html lang=\"zh-CN\">\n",
"<head>",
"\t<meta charset=\"UTF-8\">",
"\t<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0,minimal-ui:ios\">",
"\t<meta http-equiv=\"X-UA-Compatible\" content=\"ie=edge\">",
"\t<title>Document</title>",
"\t<link rel=\"stylesheet\" href=\"$1\">",
"\t<script src=\"$2\"></script>",
"</head>\n",
"<body>\n$3",
"</body>\n",
"</html>"
],
"description": "The full sample code - html5."
}
}
然後，就能看到我們的代碼片段了：
第一個感嘆號是 emmet 的代碼片段，第二個纔是我們要的，要隱藏第一個感嘆號！，步驟如下：
在方法二中, 將 snippets.json 文件的感嘆號的值，改爲 \t ，重啓 vscode 即可；
{ "html": { "snippets": { "!": "\t" } } }
方法四，不使用感嘆號!+tab，而是使用 html:5 來生成html骨架
在 vscode 上，依次：文件 - 首選項 - 設置 - 搜索 emmet Abbreviation，如下圖勾選:
然後在html文件中直接輸入html，然後會提示html:5，選擇這個回車也就可以自動生成html模板了:
參考
https://code.visualstudio.com/docs/editor/emmet#_using-custom-emmet-snippets
https://blog.csdn.net/m0_56991207/article/details/125697024