ST(Sublime Text)安装emmet插件后，输入!，按tab键就可以快速得到一个简易的html5模板，甚是便捷：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
</body>
</html>但是默认的模板可能不能满足我们的要求，例如对于简体中文网页，每次需要修改lang为zh-cmn-Hans，也比较麻烦。
因此有必要定义一个新的模板，并且输入!!命令（这个触发词可以自己定义）就可以输出我们自定义的模板。
最先想到用ST的snippet，ST有着强大的代码段自定义功能，具体的就是打开User文件夹（Preferences -> Browser Packages... -> User文件夹），然后选择一个.sublime-snippet文件进行复制，修改成自己需要的模板即可。
但是这种snippet好像无法在html中触发（原因见这里和这里）,只好另觅他方，借助Emmet来实现。
可以在Preferences -> Package Settings -> Emmet -> Setting - Default找到标准配置文件，其中有个snippets字段：
// Custom snippets definitions, as per https://github.com/emmetio/emmet/blob/master/snippets.json
"snippets": {
// "html": {
// "abbreviations": {
// "example": "<div class='example' title='Custom element example'>"
// }
// }
}
在这里面可以定义自己的html片段，为了避免污染标准配置文件，应在用户配置文件中修改。我们打开Preferences -> Package Settings -> Emmet -> Setting - User文件，添加如下代码：
{
// Custom snippets definitions, as per https://github.com/emmetio/emmet/blob/master/snippets.json
"snippets": {
"html": {
"abbreviations": {
"example": "<div class='example' title='Custom element example'>",
"mydoc": "html>(head>meta[charset='utf-8']+title{${1:文档标题}})+body",
"!!": "!!!+mydoc[lang='zh-Hans']"
}
}
}
}
上面的代码片段我们定义了两个html模板，一个为mydoc，一个为!!，其中!!引用了mydoc。
这样我们在html文件中，输入!!，按tab键，则会生成如下的文档：
<!DOCTYPE html>
<html lang="zh-Hans">
<head>
<meta charset="utf-8">
<title>文档标题</title>
</head>
<body>
</body>
</html>这些html模板使用了emmet的语法，同时可以通过${}等方式来定义变量，具体的可以参考emmet默认的定义。
另外，我们写HTML文件时，有时会用到jquery，这时候就会去下载一份jquery，或者去找一个cdn版本的jquery，这都得花时间，我们可以定义一个html snippet：
"jq": "<script src='http://libs.baidu.com/jquery/1.9.0/jquery.js'></script>"
这样，以后只需要在html文件中输入jq按tab就OK了！
还有其他很多提高效率的模板，大家结合自己的习惯可以自行总结。
附录：一个完整的snippet片段以及其对应输出（好像<!-- -->和换行\n只能定义在html的snippets中，而不能定义在abbreviations中）
{
// Custom snippets definitions, as per https://github.com/emmetio/emmet/blob/master/snippets.json
"snippets": {
"html": {
"snippets": {
"myfavicon": "<!-- favicon，可更改图片类型 -->\n<link rel=\"shortcut icon\" type=\"image/ico\" href=\"/favicon.ico\" />\n",
"mycompat": "<!-- 优先使用 IE 最新版本和 Chrome -->\n<meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge,chrome=1\" />\n",
"360compat": "\n<!-- 360 使用Google Chrome Frame -->\n<meta name=\"renderer\" content=\"webkit\">\n",
"mykeywords": "<!-- SEO页面关键词 -->\n<meta name=\"keywords\" content=\"your keywords\">\n",
"mydesc": "<!-- SEO页面描述 -->\n<meta name=\"description\" content=\"your description\">\n",
"myviewport": "<!-- 开启响应式 -->\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n",
},
"abbreviations": {
"example": "<div class='example' title='Custom element example'>",
"mydoc": "html>(head>meta[charset='utf-8']+title{${1:文档标题}}+360compat+mycompat+myviewport+mykeywords+mydesc+myfavicon)+body>jq+u",
"!!": "!!!+mydoc[lang='zh-cmn-Hans']",
"$": "<script src=\"http://libs.baidu.com/jquery/1.9.0/jquery.js\"></script>",
"jq": "<script src=\"http://libs.baidu.com/jquery/1.9.0/jquery.js\"></script>",
"u": "<script src=\"http://libs.baidu.com/underscore/1.3.3/underscore.js\"></script>",
"_": "<script src=\"http://libs.baidu.com/underscore/1.3.3/underscore.js\"></script>"
}
}
}
}
按键!!对应的输出如下（附带了注释，不需要的可以酌情删除）
<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="utf-8">
<title>文档标题</title>
<!-- 360 使用Google Chrome Frame -->
<meta name="renderer" content="webkit">
<!-- 优先使用 IE 最新版本和 Chrome -->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<!-- 开启响应式 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- SEO页面关键词 -->
<meta name="keywords" content="your keywords">
<!-- SEO页面描述 -->
<meta name="description" content="your description">
<!-- favicon，可更改图片类型 -->
<link rel="shortcut icon" type="image/ico" href="/favicon.ico" />
</head>
<body>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script src="http://libs.baidu.com/underscore/1.3.3/underscore.js"></script>
</body>
</html>