1 Emmet简介
Emmet是一个文本编辑器/IDE的插件，使用Emmet通过简短的表达式来快速生成复杂的HTML/CSS代码片段，只要掌握一些常用的语法，可以减少重复编码的工作，帮助我们快速开发。
目前主流的编辑器如 VSCode、WebStorm、Sublime、Atom 都已经集成了Emmet插件，无需要安装或简单配置就能使用。
官网：https://www.emmet.io/
速查：https://docs.emmet.io/cheat-sheet/
PDf：https://docs.emmet.io/cheatsheet-a5.pdf
我用的是 VSCode ，其他编辑器应该也差不多，新建一个HTMl文件，输入div ，可以看到 Emmet Abbreviation 说明这是一个 Emmet 规则：
这时，只要按 TAB键 就可以立即生成代码片段，这里展示的是 div 标签：
所有的语法结尾都可以使用 TAB键 来展开，本文从HTML语法和CSS语法两个方面简单介绍一下。
2 HTML基本语法
除了按 TAB键，还可以直接按 回车，效果一样。
2.1 初始化HTML结构
! // 叹号 或 html:5
展开后：
<!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>
2.2 生成带有id的标签
div#main // 标签#id名 + tab键
展开后：
<div id="main"></div>
当标签为 div ，还可以省略 div 标签，直接输入 #main 效果一样：
