1. 程式人生 > >(webstorm的CSS外掛)Emmet使用手冊

(webstorm的CSS外掛)Emmet使用手冊

介紹

Emmet (前身為 Zen Coding) 是一個能大幅度提高前端開發效率的一個工具:

基本上,大多數的文字編輯器都會允許你儲存和重用一些程式碼塊,我們稱之為“片段”。雖然片段能很好地推動你得生產力,但大多數的實現都有這樣一個缺點:你必須先定義你得程式碼片段,並且不能再執行時進行拓展。

Emmet把片段這個概念提高到了一個新的層次:你可以設定CSS形式的能夠動態被解析的表示式,然後根據你所輸入的縮寫來得到相應的內容。Emmet是很成熟的並且非常適用於編寫HTML/XML 和 CSS 程式碼的前端開發人員,但也可以用於程式語言。

 

使用示例:

在編輯器中輸入縮寫程式碼:ul>li*5 ,然後按下拓展鍵(預設為tab),即可得到程式碼片段:

<ul>
    <li></li> <li></li> <li></li> <li></li> <li></li> </ul> 

下載和安裝

  1. Emmet為大部分流行的編輯器都提供了安裝外掛,下面是它們的下載連結:

  2. 線上編輯器的支援:

  3. 第三方外掛的支援

    下面這些編輯器的外掛都是由第三方開發者所提供的,所以可能並不支援所有Emmet的功能和特性。

因為我也是Sublime Text的使用者,所以下面為大家介紹一下sublime text中Emmet的安裝方法:

步驟一:首先你需要為sublime text安裝Package Control元件:

  1.  按Ctrl+`調出sublime text的console
  2.  貼上以下程式碼到底部命令列並回車: import urllib2,os;pf='Package Control.sublime-package';ipp=sublime.installedpackagespath();os.makedirs(ipp) if not os.path.exists(ipp) else None;open(os.path.join(ipp,pf),'wb').write(urllib2.urlopen('http://sublime.wbond.net/'+pf.replace(' ','%20')).read())
  3.  重啟Sublime Text
  4.  在Perferences->package settings中看到package control,則表示安裝成功

步驟二:使用Package Control安裝Emmet外掛:

  1.  按Ctrl+Shift+P命令板
  2.  輸入install然後選擇install Package,然後輸入emmet找到 Emmet Css Snippets,點選就可以自動完成安裝。

使用方法

emmet的使用方法也非常簡單,以sublime text為例,直接在編輯器中輸入HTML或CSS的程式碼的縮寫,然後按tab鍵就可以拓展為完整的程式碼片段。(如果與已有的快捷鍵有衝突的話,可以自行在編輯器中將拓展鍵設為其他快捷鍵)

語法:

後代:>

縮寫:nav>ul>li                                                                                 

<nav>
    <ul>
        <li></li> </ul> </nav> 

兄弟:+

縮寫:div+p+bq                                                                                  

<div></div>
<p></p> <blockquote></blockquote> 

上級:^

縮寫:div+div>p>span+em^bq                                                             

<div></div>
<div> <p><span></span><em></em></p> <blockquote></blockquote> </div> 

縮寫:div+div>p>span+em^^bq                                                                                   

<div></div>
<div> <p><span></span><em></em></p> </div> <blockquote></blockquote> 

分組:()

縮寫:div>(header>ul>li*2>a)+footer>p                                                 

<div>
    <header>
        <ul> <li><a href=""></a></li> <li><a href=""></a></li> </ul> </header> <footer> <p></p> </footer> </div> 

縮寫:(div>dl>(dt+dd)*3)+footer>p                                               

<div>
    <dl>
        <dt></dt> <dd></dd> <dt></dt> <dd></dd> <dt></dt> <dd></dd> </dl> </div> <footer> <p></p> </footer> 

乘法:*

縮寫:ul>li*5                                                                                      

<ul>
    <li></li> <li></li> <li></li> <li></li> <li></li> </ul> 

自增符號:$

縮寫:ul>li.item$*5                                                                               

<ul>
    <li class="item1"></li> <li class="item2"></li> <li class="item3"></li> <li class="item4"></li> <li class="item5"></li> </ul> 

縮寫:h$[title=item$]{Header $}*3                                                         

<h1 title="item1">Header 1</h1> <h2 title="item2">Header 2</h2> <h3 title="item3">Header 3</h3> 

縮寫:ul>li.item$$$*5                                                                              

<ul>
    <li class="item001"></li> <li class="item002"></li> <li class="item003"></li> <li class="item004"></li> <li class="item005"></li> </ul> 

縮寫:ul>[email protected]*5                                                                             

<ul>
    <li class="item5"></li> <li class="item4"></li> <li class="item3"></li> <li class="item2"></li> <li class="item1"></li> </ul> 

縮寫:ul>[email protected]*5                                                                              

<ul>
    <li class="item3"></li> <li class="item4"></li> <li class="item5"></li> <li class="item6"></li> <li class="item7"></li> </ul> 

ID和類屬性

縮寫:#header                                                                                           

<div id="header"></div> 

縮寫:.title                                                                                               

<div class="title"></div> 

縮寫:form#search.wide                                                                              

<form id="search" class="wide"></form> 

縮寫:p.class1.class2.class3                                                                            

<p class="class1 class2 class3"></p> 

自定義屬性

縮寫:p[title="Hello world"]                                   

<p title="Hello world"></p> 

縮寫:td[rowspan=2 colspan=3 title]

<td rowspan="2" colspan="3" title=""></td> 

縮寫:[a='value1' b="value2"]

<div a="value1" b="value2"></div> 

文字:{}

縮寫:a{Click me}

<a href="">Click me</a> 

縮寫:p>{Click }+a{here}+{ to continue}

<p>Click <a href="">here</a> to continue</p> 

隱式標籤

縮寫:.class

<div class="class"></div> 

縮寫:em>.class

<em><span class="class"></span></em> 

縮寫:ul>.class

<ul>
    <li class="class"></li> </ul> 

縮寫:table>.row>.col

<table>
    <tr class="row"> <td class="col"></td> </tr> </table> 

HTML

所有未知的縮寫都會轉換成標籤,例如,foo → <foo></foo>

縮寫:!

<!doctype html>
<html lang="en">
<head> <meta charset="UTF-8"> <title>Document</title> </head> <body> 

</body>
</html>

縮寫: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> 

關於更多的HTML以及CSS的縮寫請檢視:

下載 API表直擊官網文件

特別宣告:文中演示程式碼來自於官網API:http://docs.emmet.io/cheat-sheet/

如需轉載,請遵守W3cplus版權宣告,煩請註明出處:http://www.w3cplus.com/tools/emmet-cheat-sheet.html