sublime text3中emmet插件的使用

首先，想要快速编码需 要在编辑器中安装常用插件，下面是emmet插件的使用：

html5文档结构的生成方式：

　　1）、!+tab键

　　2）、html:5 +tab键

头部head中meta字符集的生成：

　　1）、 meta:utf + tab键  生成：<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">

　　2）、meta:vp +tab键  生成 ： <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">  浏览器视口

　　3）、meta:compat + tab键 生成 ： <meta http-equiv="X-UA-Compatible" content="IE=8"> 兼容到浏览器IE8

　　4）、link:css +tab 键   生成 ： <link rel="stylesheet" href="style.css">

　　5）、script:src + tab 键 生成：<script src=""></script>

内容body中emmet插件的使用：

　　1）、生成带类样式的标签    p.text +tab键

　　　　生成 <p class="text"></p>

　　2）、生成带ID样式的标签    p#text +tab键

　　　　生成 <p id="text"></p>

　　3）、 a标签生成url前缀    a:link+tab键

　　　　生成： <a href="http://"></a>

　　　　a标签是邮箱地址   a:mail+tab键

　　　　<a href="mailto:"></a>

　　4）、根据标签间位置关系生成标签

　　　　a)、生成同级，兄弟标签，p标签后第一个兄弟元素       p.box+span.box  +tab 键

　　　　　　生成：

　　　　　　　　<p class="box"></p>
　　　　　　　　<span class="box"></span>

　　　　b)、后代标签  ul  > li +tab键

　　　　　　如果生成多个相同的后代标签  eg   ul > li*4 +tab键   ；表示生成4个li

　　　　c)、生成当前标签的父级，也叫上级标签       h2 > span.haha^div.info +tab键   即h2与 div是同级元素

　　　　　　生成 ：

　　　　　　　　<h2><span class="haha"></span></h2>
　　　　　　　　<div class="info"></div>

　5)、生成标签时同时生成内部文本      a{文本内容}+tab键

　　生成：  <a href="">php中文网</a>
　6）、生成标签时，同时生成一些属性    p[title = '这是一段说明'] +tab键

　　　　生成 ：<p title="这是一段说明" ></p>

　　生成标签时，属性与文本内容也直接生成   例如   a[href='www.baidu.com']{百度搜索} +tab 键

　　生成 ： <a href="www.baidu.com">百度搜索</a>

　　7）、快速生成一个有8个列表项的导航     例如  ul.list>li.items*8>a{导航栏信息} +tab键

　　　　生成 ：　　

<ul class="list">
	<li class="items"><a href="">导航栏信息</a></li>
	<li class="items"><a href="">导航栏信息</a></li>
	<li class="items"><a href="">导航栏信息</a></li>
	<li class="items"><a href="">导航栏信息</a></li>
	<li class="items"><a href="">导航栏信息</a></li>
	<li class="items"><a href="">导航栏信息</a></li>
	<li class="items"><a href="">导航栏信息</a></li>
	<li class="items"><a href="">导航栏信息</a></li>
</ul>

　　8）、给标签自动添加编号或者排序: $,@

　　　　a)、ul.list>li.items*5>a{导航栏$}+tab键

<ul class="list">
	<li class="items"><a href="">导航栏1</a></li>
	<li class="items"><a href="">导航栏2</a></li>
	<li class="items"><a href="">导航栏3</a></li>
	<li class="items"><a href="">导航栏4</a></li>
	<li class="items"><a href="">导航栏5</a></li>
</ul>

　　　　　　ul.list>li.items*5>a{导航栏$$} +tab键

<ul class="list">
	<li class="items"><a href="">导航栏01</a></li>
	<li class="items"><a href="">导航栏02</a></li>
	<li class="items"><a href="">导航栏03</a></li>
	<li class="items"><a href="">导航栏04</a></li>
	<li class="items"><a href="">导航栏05</a></li>
</ul>

　　　　ul.list>li.items*5>a{导航栏$$$}  +tab 键

//给标签自动添加编号或者排序: $,@
<ul class="list">
	<li class="items"><a href="">导航栏001</a></li>
	<li class="items"><a href="">导航栏002</a></li>
	<li class="items"><a href="">导航栏003</a></li>
	<li class="items"><a href="">导航栏004</a></li>
	<li class="items"><a href="">导航栏005</a></li>
</ul>

　　b) ul.list>li.items*5>a{导航栏$$@-} + tab键 ----表示降序显示列表项

//ul.list>li.items*5>a{导航$$@-}+tab键
<ul class="list">
	<li class="items"><a href="">导航栏05</a></li>
	<li class="items"><a href="">导航栏04</a></li>
	<li class="items"><a href="">导航栏03</a></li>
	<li class="items"><a href="">导航栏02</a></li>
	<li class="items"><a href="">导航栏01</a></li>
</ul>

　　c)、从指定的编号开始，@后跟数字   ul.list>li.items*5>a{导航栏$$@100}  ---表示从100开始

<ul class="list">
	<li class="items"><a href="">导航栏100</a></li>
	<li class="items"><a href="">导航栏101</a></li>
	<li class="items"><a href="">导航栏102</a></li>
	<li class="items"><a href="">导航栏103</a></li>
	<li class="items"><a href="">导航栏104</a></li>
</ul>

　　更多emmet的 用法可以去官网了解