emmet语法小记：
创建HTML5结构
html:5 + tab -或者- ! + tab <!-- 生成以下代码 -->
<!DOCTYPE html>
<html lang="en">
<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>Document</title>
</head>
<body>
</body>
</html>
设置当前文档默认字符集
meta:utf + tab <!-- 生成以下代码 -->
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
创建当前页面缩放
meta:vp + tab <!-- 生成以下代码 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
兼容IE8浏览器
meta:compat + tab <!-- 生成以下代码 -->
<meta http-equiv="X-UA-Compatible" content="IE=7">
<!-- "IE=7"可以自行修改为ie=edge -->
引用CSS文件
link:css + tab <!-- 生成以下代码 -->
<link rel="stylesheet" href="style.css">
引用脚本
script:src + tab <!-- 生成以下代码 -->
<script src=""></script>
生成带类样式的标签
div.info + tab
<!-- div作为emmet默认标签，可以省略，默认会加上，所以div可以这么写 -->
.info + tab <!-- 以上两句emmet语法均可生成以下代码 -->
<div class="info"></div>
生成带id的标签
div#red + tab
<!-- div作为emmet默认标签，可以省略，默认会加上，所以div可以这么写 -->
#red + tab <!-- 以上两句emmet语法均可生成以下代码 -->
<div id="red"></div>
a标签
a:link + tab<!-- 会自动生成带http或https的链接 -->
<a href="http://"></a>
a:mail + tab<!-- 会自动生成带mailto:的链接 -->
<a href="mailto:"></a>
根据标签之间的位置生成同级标签，也叫兄弟标签
h2.header+p.info + tab <!--生成以下代码 -->
<h2 class="header"></h2>
<p class="info"></p>
根据标签之间的位置生成后代标签
ul>li + tab <!--生成以下代码 -->
<ul>
<li></li>
</ul>
ul>li*5 + tab <!--生成以下代码 -->
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
生成当前标签的父级标签，也叫上级标签：
h2>span^p.info + tab <!--生成以下代码 -->
<h2><span></span></h2>
<p class="info"></p>
生成标签时，同时创建自定义属性
p[title='这是一段说明文字'] + tab <!--生成以下代码 -->
<p title="这是一段说明文字"></p>
生成标签时，同时创建内部文本
a[href='http://www.baidu.com']{百度} + tab <!--生成以下代码 -->
<a href="http://www.baidu.com">百度</a>
综合练习：快速生成一个有8个列表的导航
ul.list>li.item*8>a{导航} + tab <!--生成以下代码 -->
<ul class="list">
<li class="item"><a href="">导航</a></li>
<li class="item"><a href="">导航</a></li>
<li class="item"><a href="">导航</a></li>
<li class="item"><a href="">导航</a></li>
<li class="item"><a href="">导航</a></li>
<li class="item"><a href="">导航</a></li>
<li class="item"><a href="">导航</a></li>
<li class="item"><a href="">导航</a></li>
</ul>
给标签自动添加序号或者排序，还是以上一例子来举例
ul.list>li.item*8>a{导航$} + tab <!--生成以下代码 -->
<ul class="list">
<li class="item"><a href="">导航1</a></li>
<li class="item"><a href="">导航2</a></li>
<li class="item"><a href="">导航3</a></li>
<li class="item"><a href="">导航4</a></li>
<li class="item"><a href="">导航5</a></li>
<li class="item"><a href="">导航6</a></li>
<li class="item"><a href="">导航7</a></li>
<li class="item"><a href="">导航8</a></li>
</ul>
<!-- 自动生成了从1到8的导航序号 -->
上一个例子中如果换成2个$呢？
ul.list>li.item*8>a{导航$$} + tab <!--生成以下代码 -->
<ul class="list">
<li class="item"><a href="">导航01</a></li>
<li class="item"><a href="">导航02</a></li>
<li class="item"><a href="">导航03</a></li>
<li class="item"><a href="">导航04</a></li>
<li class="item"><a href="">导航05</a></li>
<li class="item"><a href="">导航06</a></li>
<li class="item"><a href="">导航07</a></li>
<li class="item"><a href="">导航08</a></li>
</ul>
<!-- 以此类推，不需要多做解释了吧 -->
上一个例子中如果换成倒序呢？
ul.list>li.item*8>a{导航$$@-} + tab <!--生成以下代码 -->
<ul class="list">
<li class="item"><a href="">导航08</a></li>
<li class="item"><a href="">导航07</a></li>
<li class="item"><a href="">导航06</a></li>
<li class="item"><a href="">导航05</a></li>
<li class="item"><a href="">导航04</a></li>
<li class="item"><a href="">导航03</a></li>
<li class="item"><a href="">导航02</a></li>
<li class="item"><a href="">导航01</a></li>
</ul>
上一个例子中如果换成指定序号开始呢，例如100？
ul.list>li.item*8>a{导航$$@100} + tab <!--生成以下代码 -->
<ul class="list">
<li class="item"><a href="">导航100</a></li>
<li class="item"><a href="">导航101</a></li>
<li class="item"><a href="">导航102</a></li>
<li class="item"><a href="">导航103</a></li>
<li class="item"><a href="">导航104</a></li>
<li class="item"><a href="">导航105</a></li>
<li class="item"><a href="">导航106</a></li>
<li class="item"><a href="">导航107</a></li>
</ul>
emmet语法先粗略的介绍到这里，更多语法，可以查看emmet官网。
