首先，我们需要下载一个vscode，然后直接上截图了。
（1）文件-首选项-用户代码片段
（2）查找html.json
（3）添加代码
// html.json
{
// Place your snippets for html here. Each snippet is defined under a snippet name and has a prefix, body and
// description. The prefix is what is used to trigger the snippet and the body will be expanded and inserted. Possible variables are:
// $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. Placeholders with the
// same ids are connected.
// Example:
// "Print to console": {
// "prefix": "log",
// "body": [
// "console.log('$1');",
// "$2"
// ],
// "description": "Log output to console"
// }
"html5 demo": {
"prefix": "!5", // 这个是你输入的快捷代码
"body": [// 这里是插入的内容
"<!DOCTYPE html>",
"<html lang='en'>",
"<head>",
"\t<meta charset='UTF-8'>",
"\t<meta name='referrer' content='always'>",
"\t<meta name='author' content='qiphon'>",
"\t<meta name='robots' content='none'>",
"\t<meta name='keywords' content=''>",
"\t<meta name='description' content=''>",
"\t<meta name='renderer' content='webkit'>",
"\t<meta name='revisit-after' content='7 days' >",
"\t<meta http-equiv=widow-target Content=_top>",
"\t<meta name='viewport' content='width=device-width, initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no, shrink-to-fit=no' viewport-fit=cover />",
"\t<meta http-equiv='X-UA-Compatible' content='ie=edge,chrome=1'>",
"\t<title>$1</title>", // 光标首次会在$1 的地方，按tab 会跳到 $2
"\t<style>",
"\t\t *{",
"\t\t\tmargin:0;",
"\t\t\tpadding:0;",
"\t\t\tbox-sizing:border-box;",
"\t\t\t-webkit-tap-highlight-color:transparent;",
"\t\t}",
"\t</style>",
"</head>",
"<body>",
"\t$2",
"</body></html>"
],
"description": "html5 专用 create by qiphon" // 这里是你的快捷输入的时候 VS code 提示的文字
}
}（4）记得保存。
（5）调用模板
1）在html页中输入 ！
2）然后再加上Tab
这就完成了。
