【编程工具】Sublime Text3 之 Emmet 插件的详细使用的方法
这篇关于 Emmet 插件使用的博文之前就想写了，今天刚好闲暇时间，就花了一些时间进行了总结。
我们都这道 Emmet 这款插件在前端设计里被称为神器，确实，神器称号名不虚传。因为这款插件可以帮助我们高效的编写代码，以后写前端代码就不用复制粘贴了。仅仅寥寥几行代码，就可以把一个网页的整体框架给建立起来。好了话不多说，我们马上进入主题吧！
HMTL部分
1.创建标准的页面
创建标准 xhtml-1.0 页面：html:xt
创建标准 xhtml-1.1 页面：html:xxs
创建标准 html4 页面：html:4s
创建标准 html5 页面：!/html:5/html5
注意：单独输入 html 只是单独创建一个 html 标签
2.创建html标签
输入任意标签名，然后按下 tab 键就会自动生成成对的标签。
3.创建带类的标签
方式：标签名 . 类名
如：p.classname
<p class="classname"></p> 4.创建带id的标签
方式：标签名 #id 名称
如：p#idname
<p id="idname"></p>5.创建带属性的标签
方式：标签名 [ 属性 = 属性值 ]
如：a[href=#]
<a href="#"></a>6.创建带内容的标签
方式：标签名 { 文本内容 }
如：h1{text}
<h1>text</h1>7.嵌套标签
嵌套使用的是符号 " > "
如：div>p
<div>
<p></p>
</div>8.同级标签
同级使用的是符号 " + "
如：h1+h2
<h1></h1>
<h2></h2>9.另一种特别的符号 " ^ "
" ^ " 可以使后面的标签提升一个层级
如：div^p
<div></div>
<p></p>10.分组标签
" () " 可以将标签分组，十分常用
如：(div>p)+(div>p)
<div>
<p></p>
</div>
<div>
<p></p>
</div>11.隐式标签
隐式标签就是当你不写的时候，默认生成的标签。
如：(.classname>p)+(.classname>p)
<div class="classname">
<p></p>
</div>
<div class="classname">
<p></p>
</div>这里的 div 标签就是隐式标签。当然不能写成：(>p)+(>p)
<p></p>
<p></p>所有隐式标签：
li:用于ul和ol中
tr:用于table,tboby,thead和tfoot中
td:用于tr中
option:用于select和optgroup中
div 在块级元素中默认，span 在行内元素中默认
12.同时创建多个标签
同时创建多个标签使用的是 " * "
如：div>p*3
<div>
<p></p>
<p></p>
<p></p>
</div>13.同时创建多个带类名的标签
如：ul>li.classname$*3
<ul>
<li class="classname1"></li>
<li class="classname2"></li>
<li class="classname3"></li>
</ul>14.同时创建多个带类名、内容、属性的标签
如：div>p.classname$[style=font-size:2$px]{$}*5
<div>
<p class="classname1" style="font-size:21px">1</p>
<p class="classname2" style="font-size:22px">2</p>
<p class="classname3" style="font-size:23px">3</p>
<p class="classname4" style="font-size:24px">4</p>
<p class="classname5" style="font-size:25px">5</p>
</div>Css部分：
1.设置属性值
如：w100
width: 100px; 当然除了px，还有其他的单位如：p, e, x
如：h20p+m2e+p2x
height: 20%;
margin: 2em;
padding: 2ex;p:%
e:em
x:ex
2.附加属性
如：@f
@font-face {
font-family:;
src:url();
}如果需要其他的属性，如：background-image, border-radius, font 等，可以使用 " + " 来生成。
如：@f+
@font-face {
font-family: 'FontName';
src: url('FileName.eot');
src: url('FileName.eot?#iefix') format('embedded-opentype'),
url('FileName.woff') format('woff'),
url('FileName.ttf') format('truetype'),
url('FileName.svg#FontName') format('svg');
font-style: normal;
font-weight: normal;
}3.模糊匹配
如果有些缩写你拿不准，Emmet 会根据你的输入内容匹配最接近的语法。
如：ov:h, ov-h, ovh, oh 生成的代码是相同的
overflow: hidden;4.供应商前缀
如果输入非 W3C 标准的 CSS 属性，Emmet 会自动加上供应商前缀。
如：trs
-webkit-transition: prop time;
-o-transition: prop time;
transition: prop time;你也可以在任意属性前加上 " - " 符号，也可以为该属性加上前缀。
如：-super-foo
-webkit-super-foo: ;
-moz-super-foo: ;
-ms-super-foo: ;
-o-super-foo: ;
super-foo: ;如果不希望加上所有前缀，可以使用缩写来指定。
如：-wm-trf
-webkit-transform: ;
-moz-transform: ;
transform: ;表示只加上-webkit和-moz前缀。
以下是缩写形式：
w:-webkit-
m:-moz-
s:-ms-
o:-o-
5.渐变
如：lg(left, #fff 50%, #000)
background-image: -webkit-linear-gradient(left, #fff 50%, #000);
background-image: -o-linear-gradient(left, #fff 50%, #000);
background-image: linear-gradient(to right, #fff 50%, #000);特殊的例子：
em>.classname
<em><span class="classname"></span></em>
a
<a href=""></a>
a:link
<a href="http://"></a>
a:mail
<a href="mailto:"></a>
abbr
<abbr title=""></abbr>
acronym
<acronym title=""></acronym>
base
<base href="" />
basefont
<basefont />
br
<br />
frame
<frame />
hr
<hr />
bdo
<bdo dir=""></bdo>
bdo:r
<bdo dir="rtl"></bdo>
bdo:l
<bdo dir="ltr"></bdo>
col
<col />
link
<link rel="stylesheet" href="" />
link:css
<link rel="stylesheet" href="style.css" />
link:print
<link rel="stylesheet" href="print.css" media="print" />
link:favicon
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
link:touch
<link rel="apple-touch-icon" href="favicon.png" />
link:rss
<link rel="alternate" type="application/rss+xml" title="RSS" href="rss.xml" />
link:atom
<link rel="alternate" type="application/atom+xml" title="Atom" href="atom.xml" />
meta
<meta />
meta:utf
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
meta:win
<meta http-equiv="Content-Type" content="text/html;charset=windows-1251" />
meta:vp
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />
meta:compat
<meta http-equiv="X-UA-Compatible" content="IE=7" />
style
<style></style>
script
<script></script>
script:src
<script src=""></script>
img
<img src="" alt="" />
iframe
<iframe src="" frameborder="0"></iframe>
embed
<embed src="" type="" />
object
<object data="" type=""></object>
param
<param name="" value="" />
map
<map name=""></map>
area
<area shape="" coords="" href="" alt="" />
area:d
<area shape="default" href="" alt="" />
area:c
<area shape="circle" coords="" href="" alt="" />
area:r
<area shape="rect" coords="" href="" alt="" />
area:p
<area shape="poly" coords="" href="" alt="" />
form
<form action=""></form>
form:get
<form action="" method="get"></form>
form:post
<form action="" method="post"></form>
label
<label for=""></label>
input
<input type="text" />
inp
<input type="text" name="" id="" />
input:hidden
别名：input[type=hidden name]
<input type="hidden" name="" />
input:h
别名：input:hidden
<input type="hidden" name="" />
input:text, input:t
别名：inp
<input type="text" name="" id="" />
input:search
别名：inp[type=search]
<input type="search" name="" id="" />
input:email
别名：inp[type=email]
<input type="email" name="" id="" />
input:url
别名：inp[type=url]
<input type="url" name="" id="" />
input:password
别名：inp[type=password]
<input type="password" name="" id="" />
input:p
别名：input:password
<input type="password" name="" id="" />
input:datetime
别名：inp[type=datetime]
<input type="datetime" name="" id="" />
input:date
别名：inp[type=date]
<input type="date" name="" id="" />
input:datetime-local
别名：inp[type=datetime-local]
<input type="datetime-local" name="" id="" />
input:month
别名：inp[type=month]
<input type="month" name="" id="" />
input:week
别名：inp[type=week]
<input type="week" name="" id="" />
input:time
别名：inp[type=time]
<input type="time" name="" id="" />
input:number
别名：inp[type=number]
<input type="number" name="" id="" />
input:color
别名：inp[type=color]
<input type="color" name="" id="" />
input:checkbox
别名：inp[type=checkbox]
<input type="checkbox" name="" id="" />
input:c
别名：input:checkbox
<input type="checkbox" name="" id="" />
input:radio
别名：inp[type=radio]
<input type="radio" name="" id="" />
input:r
别名：input:radio
<input type="radio" name="" id="" />
input:range
别名：inp[type=range]
<input type="range" name="" id="" />
input:file
别名：inp[type=file]
<input type="file" name="" id="" />
input:f
别名：input:file
<input type="file" name="" id="" />
input:submit
<input type="submit" value="" />
input:s
别名：input:submit
<input type="submit" value="" />
input:image
<input type="image" src="" alt="" />
input:i
别名：input:image
<input type="image" src="" alt="" />
input:button
<input type="button" value="" />
input:b
别名：input:button
<input type="button" value="" />
isindex
<isindex />
input:reset
别名：input:button[type=reset]
<input type="reset" value="" />
select
<select name="" id=""></select>
option
<option value=""></option>
textarea
<textarea name="" id="" cols="30" rows="10"></textarea>
menu:context
别名：menu[type=context]>
<menu type="context"></menu>
menu:c
别名：menu:context
<menu type="context"></menu>
menu:toolbar
别名：menu[type=toolbar]>
<menu type="toolbar"></menu>
menu:t
别名：menu:toolbar
<menu type="toolbar"></menu>
video
<video src=""></video>
audio
<audio src=""></audio>
html:xml
<html xmlns="http://www.w3.org/1999/xhtml"></html>
keygen
<keygen />
command
<command />
bq
别名：blockquote
<blockquote></blockquote>
acr
别名：acronym
<acronym title=""></acronym>
fig
别名：figure
<figure></figure>
figc
别名：figcaption
<figcaption></figcaption>
ifr
别名：iframe
<iframe src="" frameborder="0"></iframe>
emb
别名：embed
<embed src="" type="" />
obj
别名：object
<object data="" type=""></object>
src
别名：source
<source></source>
cap
别名：caption
<caption></caption>
colg
别名：colgroup
<colgroup></colgroup>
fst, fset
别名：fieldset
<fieldset></fieldset>
btn
别名：button
<button></button>
btn:b
别名：button[type=button]
<button type="button"></button>
btn:r
别名：button[type=reset]
<button type="reset"></button>
btn:s
别名：button[type=submit]
<button type="submit"></button>附：
" $ " 代表自增符号
" $@- " 代表自减
" $@3 " 代表从3开始自增
" $@-3 " 代表从3开始自减
