html5代码片段
<!DOCTYPE html> <html lang="zh-CN"><head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 自定义网站标签 -->
<meta name="SiteName" content="网站的规范名称" />
<meta name="SiteDomain" content="网站的英文域名" />
<meta name="SiteIDCode" content="网站合法身份的标识" />
<!-- 自定义栏目标签 -->
<meta name="ColumnName" content="网站具体栏目的名称" />
<meta name="ColumnDescription" content="反映栏目设置目的、主要内容的说明" />
<meta name="ColumnKeywords" content="反映栏目内容特点的词语" />
<meta name="ColumnType" content="必选 栏目类别名称，参考文章栏目和新闻栏目等" />
<!-- 自定义页面标签 -->
<meta name="ArticleTitle" content="具体内容信息的标题" />
<meta name="PubDate" content="YYYY—MM—DD HH∶MM" />
<meta name="ContentSource" content="文章的发布单位或转载来源" />
<meta name="Keywords" content="反映文章信息内容特点的词语" />
<meta name="Author" content="文章的作者或责任编辑" />
<meta name="Description" content="内容信息的内容概要" />
<meta name="Image" content="正文中首张图片URL" />
<meta name="Url" content="文章的URL地址" />
<title>名称</title>
</head><body>
</body>
</html>
配置流程
在 VSCode 中设置 HTML5 代码片段的步骤如下：
1. 打开代码片段配置文件
- 打开 VSCode
- 按
Ctrl+Shift+P（Windows/Linux）或Cmd+Shift+P（Mac） - 输入
snippets并选择 "Preferences: Configure User Snippets" - 选择 "html.json"（或新建全局片段文件）
2. 添加自定义代码片段
将以下配置粘贴到文件中（替换原有内容或添加在花括号内）：
{
"HTML5 Template with Meta Tags": {
"prefix": ["html5", "i"],
"body": [
"<!DOCTYPE html>",
"<html lang=\"zh-CN\">",
"",
"<head>",
"\t<meta charset=\"UTF-8\">",
"\t<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">",
"\t<!-- 自定义网站标签 -->",
"\t<meta name=\"SiteName\" content=\"${1:网站的规范名称}\" />",
"\t<meta name=\"SiteDomain\" content=\"${2:网站的英文域名}\" />",
"\t<meta name=\"SiteIDCode\" content=\"${3:网站合法身份的标识}\" />",
"\t<!-- 自定义栏目标签 -->",
"\t<meta name=\"ColumnName\" content=\"${4:网站具体栏目的名称}\" />",
"\t<meta name=\"ColumnDescription\" content=\"${5:反映栏目设置目的、主要内容的说明}\" />",
"\t<meta name=\"ColumnKeywords\" content=\"${6:反映栏目内容特点的词语}\" />",
"\t<meta name=\"ColumnType\" content=\"${7:必选 栏目类别名称}\" />",
"\t<!-- 自定义页面标签 -->",
"\t<meta name=\"ArticleTitle\" content=\"${8:具体内容信息的标题}\" />",
"\t<meta name=\"PubDate\" content=\"${9:YYYY—MM—DD HH∶MM}\" />",
"\t<meta name=\"ContentSource\" content=\"${10:文章的发布单位或转载来源}\" />",
"\t<meta name=\"Keywords\" content=\"${11:反映文章信息内容特点的词语}\" />",
"\t<meta name=\"Author\" content=\"${12:文章的作者或责任编辑}\" />",
"\t<meta name=\"Description\" content=\"${13:内容信息的内容概要}\" />",
"\t<meta name=\"Image\" content=\"${14:正文中首张图片URL}\" />",
"\t<meta name=\"Url\" content=\"${15:文章的URL地址}\" />",
"\t<title>${16:页面标题}</title>",
"</head>",
"",
"<body>",
"\t$0",
"</body>",
"",
"</html>"
],
"description": "包含标准元标签的HTML5模板"
}
}
3. 使用说明
-
触发方式：
- 在
.html文件中输入html5或i - 按
Tab键自动生成模板
- 在
-
编辑流程：
- 生成后会自动选中第一个占位符（"网站的规范名称"）
- 按
Tab键逐个跳转到下一个占位符（共16个可编辑字段） - 最后光标停留在
<body>中（$0位置）
-
占位符说明：
${1:默认文本}：可编辑的带默认值的占位符$0：最终光标位置- 所有字段均可按需修改或删除
4. 自定义建议
- 精简版本：若不需要所有 meta 标签，可删除对应行
- 修改默认值：直接修改配置中的默认文本（如将"页面标题"改为具体名称）
- 添加新标签：在
<head>内按相同格式追加新行
提示：此模板符合中国《政府网站网页元标签规范》要求，特别适合政府类网站项目使用。对于普通项目，可移除不必要的自定义 meta 标签。
浙公网安备 33010602011771号