1. 程式人生 > >前端開發必備!Emmet使用手冊

前端開發必備!Emmet使用手冊

++ value 表達 ive 運行時 row net 能夠 com

介紹

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為大部分流行的編輯器都提供了安裝插件,下面是它們的下載鏈接:

    • Sublime Text
    • Eclipse/Aptana
    • TextMate
    • Coda
    • Espresso
    • Chocolat
    • Komodo Edit
    • Notepad++
    • PSPad
    • textarea
    • CodeMirror
    • Brackets
    • NetBeans
    • Adobe Dreamweaver
  2. 在線編輯器的支持:

    • JSFiddle
    • JS Bin
    • CodePen
    • ICEcoder
    • Divshot
    • Codio
  3. 第三方插件的支持

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

    • SynWrite
    • WebStorm
    • PhpStorm
    • Vim
    • HTML-Kit
    • HippoEDIT
    • CodeLobster PHP Edition
    • TinyMCE

因為我也是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>li.item$@-*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>

著作權歸作者所有。
商業轉載請聯系作者獲得授權,非商業轉載請註明出處。
原文: http://www.w3cplus.com/tools/emmet-cheat-sheet.html © w3cplus.com

前端開發必備!Emmet使用手冊