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