admin管理员组文章数量:1794759
VS Code新手常用的HTML模板
前言
大家在使用VS HTML style="color:#2aa0ea" target=_blank class=infotextkey>Code编写HTML文档时，通常会因为需要重复敲出固定的格式需求感到苦恼，下面有几个构建好的模板，只需要快捷键就可以一键写出格式。
大多数使用vscode编辑器的朋友都知道，新建html文件之后直接！+Tab键即可新建一个HTML模板，但是这只是一个基础版，当然也可以自定义HTML模板。
1.点击文件，打开首选项 ，选择用户片段 2.在搜索框搜索“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" // }翻译之后就是将 html 代码片段放在这里。每个代码段都在代码段名称下定义，并具有前缀、主体和描述。前缀是用来触发代码段的，主体将被展开并插入。可能的变量是: $1，$2用于制表位，$0用于最终的光标位置，${1: label } ，${2: 另一个}用于占位符。具有相同 ID 的占位符连接在一起。
Example之后是一个示例。
3.在绿色括号之后，黄色括号之前输入以下代码 "h5 template":{ "prefix": "h", "body": [ "<!DOCTYPE html>", "<html lang=\\"zh-cn\\">", "<head>", "\\t<meta charset=\\"UTF-8\\">", "\\t<meta http-equiv=\\"X-UA-Compatible\\" content=\\"IE=edge\\">", "\\t<meta name=\\"viewport\\" content=\\"width=device-width, initial-scale=1.0\\">", "\\t<title>Document</title>", "</head>", "<body>", "\\t $0", "</body>", "</html>", ], "description": "h5模板" }, "h5 template内部样式表":{ "prefix": "hh", "body": [ "<!DOCTYPE html>", "<html lang=\\"zh-cn\\">", "<head>", "\\t<meta charset=\\"UTF-8\\">", "\\t<meta http-equiv=\\"X-UA-Compatible\\" content=\\"IE=edge\\">", "\\t<meta name=\\"viewport\\" content=\\"width=device-width, initial-scale=1.0\\">", "\\t<title>Document</title>", "\\t<style type=\\"text/css\\">", "\\t\\t", "\\t</style>", "</head>", "<body>", "\\t $0", "</body>", "</html>", ], "description": "内部样式表" }, "h5c3js template外部样式表":{ "prefix": "hhh", "body": [ "<!DOCTYPE html>", "<html lang=\\"zh-cn\\">", "<head>", "\\t<meta charset=\\"UTF-8\\">", "\\t<meta http-equiv=\\"X-UA-Compatible\\" content=\\"IE=edge\\">", "\\t<meta name=\\"viewport\\" content=\\"width=device-width, initial-scale=1.0\\">", "\\t<title>Document</title>", "\\t<link rel=\\"stylesheet\\" type=\\"text/css\\" href=\\" \\">", "\\t<script src=\\" \\"></script>", "</head>", "<body>", "\\t $0", "</body>", "</html>", ], "description": "外部样式表" }其中prefix之后为设置的快捷键，这里我设置了三个模板（因为新手，学的不多，以后慢慢收录），在第一行输入h，会出现以下提示
点击回车出现以下情况：
三个模板分别是系统自带的空白模板（点击h+回车使用），第二个是引用内部样式表的模板（点击hh+回车使用），第三个是引用外部样式表的模板（点击hhh+回车使用）。
既然可以自定义html模板，那也可以自定义其他的代码片段，举一反三。body中引号需要使用反斜杠\\转义，行之间用逗号隔开，空格可使用\\t表示，最后$0决定光标最后留在哪里。
赶快学起来在你的小伙伴面前装杯吧！版权声明：本文标题：VS Code新手常用的HTML模板 内容由林淑君副主任自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.xiehuijuan.com/baike/1686996084a126738.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论