【编程工具】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开始自减

来源1     来源2