HTML基本标签 | VSCode的Emmet个性化HTML模版

从Web前端基础开始学习，HTML基本标签虽然很简单，但算是网页的骨架，还是记录一下。
以下为HTML的基本标签和注释，主要就是head和body。
head里存放网页给浏览器、搜索引擎看的信息，例如元信息单标签，包括网站标题，简介，关键字等。
body里存放用户在网页上能够看到的所有内容。

1. [/code]
2. [*][code]
复制代码
复制代码
复制代码
1. 介绍HTML基本标签
复制代码
复制代码
复制代码
复制代码
复制代码
复制代码
复制代码
1. [/code]
2. [/list]使用VSCode若启用Emmet，则在新的html文件句首键入英文状态下的!，再按tab键会默认自动生成以下代码：
3. [list=1][*][code]
复制代码
1. [/code]
2. [*][code]
复制代码
复制代码
复制代码
复制代码
1. Document
复制代码
1. [/code]
2. [*][code]
复制代码
1. [/code]
2. [*][code]
复制代码

如想自定义这份模板，比如改成这样：

1. [/code]
2. [*][code]
复制代码
1. [/code]
2. [*][code]
复制代码
复制代码
复制代码
复制代码
复制代码
复制代码
1. 页面标题-by知足
复制代码
1. [/code]
2. [*][code]
复制代码
1. [/code]
2. [*][code]
复制代码

则需要修改expand-full.js文件，该文件位于：
{VSC安装路径}\resources\app\extensions\emmet\node_modules\vscode-emmet-helper\out\expand\expand-full.js
在对emmet配置文件修改前，请务必备份，以防万一；
修改emmet配件文件需要关闭VSCode并重新打开方可生效。
先修改lang默认为zh-CN：

1. defaultVariables = `{ lang: 'en', locale: 'en-US', charset: 'UTF-8' }
复制代码

搜索defaultVariables，在第1个搜索结果中，即可看到关于lang: 'en'的描述，将其中的en替换成zh-CN并保存即可。
如果使用VSCode打开，大概在5663行处。
接下来修改H5模板生成时光标的初始位置，并适当自定义keywords和description。
修改自定义配置，则将下部分代码覆盖原来的配置即可。（先搜索后覆盖，大概在4975行左右）

1. "meta:utf": "meta[http-equiv=Content-Type content='text/html;charset=UTF-8']",
复制代码
1. "meta:vp": "meta[name=viewport content='width=device-width, initial-scale=1.0']",
复制代码
1. "meta:compat": "meta[http-equiv=X-UA-Compatible content='${1:IE=7}']",
复制代码
1. "meta:edge": "meta:compat[content='ie=edge,chorme=1']",
复制代码
1. "meta:kw": "meta[name=keywords content='关键词描述']",
复制代码
1. "meta:dc": "meta[name=description content='网站描述']",
复制代码
1. "meta:at": "meta[name=author content='作者名']",
复制代码

再替换以下代码（大概在5050行附近）保存后重启VSCode。

1. "doc": "html[lang=${lang}]>(head>meta[charset=${charset}]+meta:vp+meta:edge+meta:kw+meta:dc+meta:at+title{${1:页面标题}})+body",
复制代码

在新的html文件句首键入英文状态下的!，再按tab键会默认自动生成以下代码：

1. [/code]
2. [*][code]
复制代码
1. [/code]
2. [*][code]
复制代码
复制代码
复制代码
复制代码
复制代码
复制代码
1. 页面标题
复制代码
1. [/code]
2. [*][code]
复制代码
1. [/code]
2. [*][code]
复制代码

更多的自定义可以自己进行配置哈。