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[]{百度} + tab <!--生成以下代碼 -->
<a >百度</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官網。
