VS Code常见书写Html的快捷方式和技巧

banq

Emmet为您提供了一系列快捷方式，包括.html和.css扩展为有用的代码段。Emmet支持内置于VS Code中，因此不需要下载扩展。
 
新的Html
新建一个文件后缀名为.html的空白文件，键入感叹号!，会自动生成Html模板：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

中文页面需要将en改为zh-CN。
可以使用双感叹号!!为VS Code编辑器创建了一个自定义快捷方式，需要导航（File菜单或按F1 > Preferences (Code > Preferences on macOS)）“User Snippets”并键入“ html.json”。然后，将自定义片段添加到此文件中：
{
  "HTML boilerplate": {
    "prefix": "!!",
    "body": [
      "<!DOCTYPE html>\r\n<html lang=\"zh-CN\">\r\n<head>\r\n  <meta charset=\"UTF-8\">\r\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n  <meta name=\"description\" content=\"\">\r\n  <link rel=\"stylesheet\" type=\"text\/css\" href=\"styles.css\">\r\n  <title>Document<\/title>\r\n<\/head>\r\n<body>\r\n  <header>\r\n  <\/header>\r\n  <main>\r\n  <\/main>\r\n  <footer>\r\n  <\/footer>\r\n  <script src=\"scripts.js\"><\/script>\r\n<\/body>\r\n<\/html>"
    ],
    "description": "HTML boilerplate with custom tags"
  }
}

使用这个工具来将你的HTML文件转换成上面html.json中JSON字符串转义符。
 
其他常见快写法：
键入：nav>ul>li
输出：
<nav>
  <ul>
    <li></li>
  </ul>
</nav>

li*5：
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>

a{连接名称}：
<a href="">连接名称</a>

div.myclass：
<div class="myclass"></div>

div#main：
<div id="main"></div>