Emmet快速语法—助力HTML/CSS快到起飞
1.概述
在前端开发的过程中， HTML、CSS 代码中大量重复的标签、属性、括号等，让人头疼。
这里推荐一个Emmet语法规则，能大大提高代码书写，只需要敲一行代码就能生成你想要的完整HTML结构，或者你想要的代码块。简单来说用这个快速语法能快速写HTML/CSS快到起飞，减少重复操作。
Emmet是一款插件，能装就能用现在基本写前端的都在用,我们平时开发的Sublime Text、Eclipse、Notepad++、VS code、Hbuilder、Atom、Dreamweaver等等编辑器都可以使用。
例子：
比如以前写这段，怎么也要一分钟吧！
<div> <ul> <li>你好，我是Lisa</li> <li>你好，我是Lisa</li> <li>你好，我是Lisa</li> <li>你好，我是Lisa</li> </ul> <ul> <li>你好，我是Lisa</li> <li>你好，我是Lisa</li> <li>你好，我是Lisa</li> <li>你好，我是Lisa</li> </ul> </div>现在只需要10秒以内就可以搞定。
div>ul*3>li{你好，我是Lisa}*3+Tab键还有复杂一点的,比如这个
<div class="box"> <p id="title"> <ul> <li class="child1">我是第1个</li> <li class="child2">我是第2个</li> <li class="child3">我是第3个</li> <li class="child4">我是第4个</li> </ul> <div class="box2"></div> </p> </div>只需要输入
div.box>p#title>ul>li.child${我是第$个}*4^div.box2+Tab键。
2.语法讲解
1.HTML的初始结构
直接 "!"+Tab ,防止徒手写出错。
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title></title>
</head>
<body>
</body>
</html>
2.id(#),class(.)
id指令：# ； class指令：.；
div#title
<div id="title"></div>
div.title
<div class="title"></div>
困死了，明天再写