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

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

阿新 • • 發佈：2017-06-24
++ 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使用手冊

相關推薦

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

++ value 表達 ive 運行時 row net 能夠 com 介紹 Emmet (前身為 Zen Coding) 是一個能大幅度提高前端開發效率的一個工具: 基本上，大多數的文本編輯器都會允許你存儲和重用一些代碼塊，我們稱之為“片段”

Web前端開發必備手冊（Cheat sheet）

mysql .html cheat AC devel 表達式 則表達式 develop b前端開發 轉自：http://blog.bingo929.com/cheat-sheets-for-web-develop.html Cheat sheet這個詞組如果直譯成中

最新小程式前端開發工具！快！快！快！

《微信小程式自動切片生成佈局軟體》，微信小程式前端開發必備的軟體之一。 功能如下： 1、切片功能：原來手寫的這部分工作，可以用切片軟體的方法來切。切好後，可以自動生成wxml,wcss,js檔案。 2、文字識別功能：效果圖上的文字可以通過自動文字識別識別出

前端開發神器：Emmet外掛

今天在逛CSDN時，發現了一個前端神器，IDEA內建了這個外掛。所有操作按下“Tab”鍵完成 生成HTML基本結構 ！或html:5或html:4s，按下Tab鍵 巢狀操作 使用“>”生成子元素 使用“+”生成兄弟元素 使用“^”生成父元素 使用“”生成

JDialog 彈出框，前端開發必備神器

JDialog是一個簡單易用但是功能強大的開源JS彈出視窗，具有很強的擴充套件性和相容性，相容IE6.0，目前版本1.2.1. 包括鎖屏物件JDialog.lock， 提示工具 JDialog.tip， 確認框 JDialog.confirm 彈出視窗 JDialog.w

移動開發必備！15款jQuery Mobile外掛

移動網際網路的發展，來自PC端的網頁並不能完全自適應移動端頁面需求，使得響應式設計體驗產生併成為潮流，也正是這樣一種需求，促成了jQuery Mobile的流行。jQuery Mobile這樣一款基於jQuery和jQuery UI的框架，繼承了jQuery的“write

Web前端開發必備--瀏覽器知識科普

       做前端開發的程式設計師一定要熟悉各種瀏覽器的核心，以瞭解各種瀏覽器的相容性，瀏覽器自帶的特性，這樣才能做出更好的相容性設計以及程式碼撰寫。        瀏覽器的種類，如果按照生產商的品牌分，不說數以萬計，起碼也有成百上千種了， 如果按瀏覽器核心分類，它的種類

一文快速掌握前端開發必備技能

11 月 2 日，微信正式宣佈「為便於開發者靈活配置小程式，小程式現開放內嵌網頁能力」。此前，CSDN 也發表《微信小程式內嵌網頁能力開放意味著什麼？》一文，探索微信此舉措的本質，進行一句話總結，即雖然是小功能，但為開發者帶來的開發方式是巨大的改變，小程式的開發

前端開發必備站點彙總

常用前端手冊： http://caniuse.com/ http://www.w3school.com.cn/ http://www.runoob.com/ http://www.css88.com/ 預編譯官網： http://www.1024i.com/demo/less/ http://l

sublime text3 針對於前端開發必備的外掛

1.emmet--前身Zen coding：HTML/CSS程式碼快速編寫神器 2.jQuery Package for sublime Text 3.JS FormatJS程式碼格式化外掛 4.Sublime CodeIntel程式碼自動提示 5.Bracket High

web3j教程，java以太坊開發必備！

web3j是一個輕量級、高度模組化、響應式、型別安全的Java和Android類庫提供豐富API，用於處理以太坊智慧合約及與以太坊網路上的客戶端(節點)進行整合。 匯智網最新發布的web3j教程，詳細

vue前端開發必備

vue框架前端開發所用工具及網站總結 編譯軟體 vsCode 微軟出品 sublimeText webStorm或者Idea 工具列表 網站列表 元件庫 以上所述，為我實際在vue專案開發中所用的工具及學習網址，僅供參

Maven系列第9篇：多環境構建支援，核心開發必備！

maven系列目標：從入門開始開始掌握一個高階開發所需要的maven技能。 這是maven系列第9篇。 整個maven系列的內容前後是有依賴的，如果之前沒有接觸過maven，建議從第一篇看起，本文尾部有maven完整系列的連線。 如果你作為公司核心開發，打算使用maven來搭建專案骨架，這篇文章的內容是你必須

實用VUE 開發外掛！！前端必備

element - 餓了麼出品的Vue2的web UI工具套件 Vux - 基於Vue和WeUI的元件庫 mint-ui - Vue 2的移動UI元素 iview - 基於 Vuejs 的開源 UI 元件庫 Keen-UI&nbs

前端工程師必備的12款HTML5開發工具！

隨著移動網際網路飛速發展，html5語言的出世也受到廣大開發者們的喜愛，HTML5被看做是web開發者建立流行web應用的利器，增加了對視訊和Canvas 2D的支援。HTML5的誕生還讓人們重新審視瀏覽器專用多媒體外掛的未來，如Adobe的Flash和微軟的Silverli

iOS開發各種底層實現--面試必備！

task 源碼 控件 改變 消息發送 釋放內存 retain select 匹配 iOS開發常用技術底層實現（精簡概述） 本章將對ios開發技術底層實現的總結，其實關於ios開發中各種底層的實現，網上相關文章多到數不過來，而不且非常不錯，我也沒有自信我能比他們做的更好，因

前端開發和其他類別工程師配合的那些事！

png 工程 圖標 開發 nmp nodejs 利用 父類 轉換 實際開發項目中，前端工程師需要和美工、後端、產品經理配合來完成一個產品，今天就簡單說說前端工程師和這些類別工程師配合的那些事。 一、前端攻城獅和美工配合的那些事 懂得圖片理論基礎 　　常見的圖片格式包含以

前端開發規範手冊：（一）基本原則

name ges rop scrip 有效 object sel 代碼 charset 1、結構、樣式、行為分離 盡量確保文檔和模版只包含HTML結構，樣式都放到樣式表中，行為都放到腳本裏。 2、縮進 統一兩個空格縮進（總之縮進統一即可），不要使用Tab鍵或者Tab

Web前端工程師必備的六個技能！你都會麽？

服務器 events 網站 必須 處理 ie6 好的 異步 廣告 Web前端開發是從網頁制作演變而來的，名稱上有很明顯的時代特征。 　　2005年以後，互聯網進入Web 2.0時代，各種類似桌面軟件的Web應用大量湧現，網站的前端由此發生了翻天覆地的變化。網頁不再只是

Web前端開發規範手冊

常用 菜單 ima 代碼規範 反饋 o-c css樣式 遇到 人員 一、規範目的 1.1 概述 .....................................................................................