【编程工具】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