當前位置：首頁 > 前端技术 > HTML >内容正文

HTML

前端开发必备！Emmet使用手册

發布時間：2025/1/21 HTML 90 豆豆

生活随笔收集整理的這篇文章主要介紹了前端开发必备！Emmet使用手册小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

為什么80%的碼農都做不了架構師？>>> ??

轉自：白牙 |2013-10-10 10:10 | 次瀏覽 | ? ? ? HTML5(124)框架(14)Emmet(2) ? ? ? ? ? ? ? ?

? ?

介紹

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

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

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

使用示例：

在編輯器中輸入縮寫代碼：ul>li*5 ，然后按下拓展鍵（默認為tab），即可得到代碼片段：

下載和安裝

Emmet為大部分流行的編輯器都提供了安裝插件，下面是它們的下載鏈接：

Sublime Text
Eclipse/Aptana
TextMate
Coda
Espresso
Chocolat
Komodo Edit
Notepad++
PSPad
textarea
CodeMirror
Brackets
NetBeans
Adobe Dreamweaver

在線編輯器的支持：

JSFiddle
JS Bin
CodePen
ICEcoder
Divshot
Codio

第三方插件的支持

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

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

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

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

按Ctrl+`調出sublime text的console

粘貼以下代碼到底部命令行并回車： 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())

重啟Sublime Text

在Perferences->package settings中看到package control，則表示安裝成功

步驟二：使用Package Control安裝Emmet插件：

按Ctrl+Shift+P命令板

輸入install然后選擇install Package，然后輸入emmet找到 Emmet Css Snippets，點擊就可以自動完成安裝。

使用方法

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

語法:

后代：>

縮寫：nav>ul>li

兄弟：+

縮寫：div+p+bq

上級：^

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

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

分組：()

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

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

乘法：*

縮寫：ul>li*5

自增符號：$

縮寫：ul>li.item$*5

縮寫：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.item$@-*5

縮寫：ul>li.item$@3*5

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

縮寫：ul>.class

縮寫：table>.row>.col

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:css

縮寫：link:print

縮寫：link:favicon

縮寫：link:touch

縮寫：link:rss

縮寫：link:atom

縮寫：meta

<meta?/>

縮寫：meta:utf

縮寫：meta:win

縮寫：meta:vp

縮寫：meta:compat

縮寫：style

縮寫：script

縮寫：script:src

縮寫：img

<img?src=""?alt=""?/>

縮寫：iframe

縮寫：embed

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

縮寫：acr

別名：acronym

<acronym?title=""></acronym>

縮寫：fig

別名：figure

縮寫：figc

別名：figcaption

縮寫：ifr

別名：iframe

縮寫：emb

別名：embed

縮寫：obj

別名：object

縮寫：src

別名：source

縮寫：cap

別名：caption

縮寫：colg

別名：colgroup

縮寫：fst, fset

別名：fieldset

縮寫：btn

別名：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>

轉載于:https://my.oschina.net/flylxl/blog/515765

總結

以上是生活随笔為你收集整理的前端开发必备！Emmet使用手册的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇：基于webpack搭建前端工程解决方案探
下一篇： [LeetCode]题解（python）