Emmet: Tools to significantly improve front-end development efficiency

Article Introduction: Emmet the concept of fragment to a new level: You can set the CSS form of expressions that can be dynamically parsed, and then get the corresponding content based on the initials you enter. Emmet is very mature and very suitable for front-end developers who write Html/xml and CSS code, but it can also be used in programming languages.

Introduced

Emmet (formerly Zen Coding) is a tool that can significantly improve front-end development efficiency:

Basically, most text editors will allow you to store and reuse blocks of code that we call "fragments." While snippets can be a good way to boost your productivity, most implementations have a drawback: you have to define your code snippets first, and you can't expand them when you run them.

Emmet the concept of fragment to a new level: You can set the CSS form of expressions that can be dynamically parsed, and then get the corresponding content based on the initials you enter. Emmet is very mature and very suitable for front-end developers who write Html/xml and CSS code, but it can also be used in programming languages.

Use examples:

Enter the abbreviation code in the editor:Ul>li*5, and then press the expand key (the default is tab) to get the code fragment:

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

Download and install

1. Emmet provides installation plug-ins for most popular editors, and the following are their download links:

   • Sublime Text
   • Eclipse/aptana
   • TextMate
   • Coda
   • Espresso
   • Chocolat
   • Komodo Edit
   • notepad++
   • PSPad
   • TextArea
   • Codemirror
   • Brackets
   • NetBeans
   • Adobe Dreamweaver

2. Support for online editors:

   • Jsfiddle
   • JS Bin
   • Codepen
   • Icecoder
   • Divshot
   • Codio

3. Third-party plug-in support

   The following plugins are provided by third-party developers, so they may not support the functionality and features of all Emmet.

   • Synwrite
   • Webstorm
   • Phpstorm
   • Vim
   • Html-kit
   • Hippoedit
   • CodeLobster PHP Edition
   • TinyMCE

Because I am also the user of sublime text, so let me introduce you to the installation method of Emmet in sublime text:

Step One: first you need to install the package control component for sublime text:

1. Press CTRL + ' pull up sublime text console
2. Paste the following code to the bottom command line and enter: Import urllib2,os;pf= "Package control.sublime-package"; ipp=sublime.installedPackages Path (); 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. Restart Sublime Text
4. When you see package control in Perferences->package settings, the installation is successful

Step Two: install the Emmet plug-in with package control:

1. Press CTRL+SHIFT+P Command Board
2. Enter install then select Install Package, and then enter Emmet to find Emmet Css Snippets, click to complete the installation automatically.

How to use

Emmet is also very simple to use, take sublime text as an example, directly in the editor input HTML or CSS code abbreviations, and then press the TAB key to expand into a complete code fragment. (If you have a conflict with an existing shortcut key, you can set the extension key to another shortcut key in the editor)

Grammar:

Descendant:>

abbreviation : Nav>ul>li

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

Brother: +

abbreviation : DIV+P+BQ

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

Superior: ^

abbreviation : DIV+DIV>P>SPAN+EM^BQ

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

abbreviation : DIV+DIV>P>SPAN+EM^^BQ

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

Grouping: ()

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

<div>
		
 
abbreviation : (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>
	
 
Multiplication: *
 
abbreviation : ul>li*5
 
<ul>
		<li></li>
		<li></li>
		<li></li>
		<li> </li>
		<li></li>
		</ul>
	
 
Self-added symbol: $
 
abbreviation : 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>
	
 
abbreviation : H$[title=item$]{header $}*3
 
<H1
			title= "item1" >header 1
 
abbreviation : 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>
	
 
abbreviation : 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>
	
 
abbreviation : ul>li.item$@3*5
 
<ul>
		<li
			class= "Item3" ></li>
		<li
			class= "Item4" ></li>
		<li
			class= "ITEM5" ></li>
		<li
			class= "Item6" ></li>
		<li
			class= "Item7" ></li>
		</ul>
	
 
ID and Class properties
 
abbreviation : #header
 
<div
			id= "header" ></div>
	
 
abbreviation :. Title
 
<div
			class= "title" ></div>
	
 
abbreviation : form#search.wide
 
<form
			id= "search"
			class= "wide" ></form>
	
 
abbreviation : P.CLASS1.CLASS2.CLASS3
 
<p
			class= "Class1 class2 class3" ></p>
	
 
Custom properties
 
abbreviation : p[title= "Hello World"]
 
<p
			title= "Hello World" ></p>
	
 
abbreviation : td[rowspan=2 colspan=3 title]
 
<TD
			rowspan= "2"
			colspan= "3"
			title= "" ></td>
	
 
abbreviation : [a= "value1" b= "value2"]
 
<div
			a= "value1"
			b= "value2" ></div>
	
 
Text: {}
 
abbreviation : A{click Me}
 
<a
			href= "" >click me</a>
	
 
abbreviation : P>{click}+a{here}+{to continue}
 
<p>click <a
			href= "" >here</a> to Continue</p>
	
 
Implicit label
 
abbreviation :. Class
 
<div
			class= "class" ></div>
	
 
abbreviation : Em>.class
 
<em><span
			class= "class" ></span></em>
	
 
abbreviation : Ul>.class
 
<ul>
		<li
			class= "class" ></li>
		</ul>
	
 
abbreviation : Table>.row>.col
 
<table>
		<tr
			class= "Row" >
		<td
			class= "col" ></td>
		</tr>
		</table>
	
 
Html
 
All unknown abbreviations are converted to labels, such as,foo→<foo></foo>
 
abbreviation :!
 
<!doctype html>
		
 
abbreviation : A
 
<a
			href= "" ></a>
	
 
abbreviation : a:link
 
<a
			href= "http://" ></a>
	
 
abbreviation : a:mail
 
<a
			href= "mailto:" ></a>
	
 
abbreviation : abbr
 
<abbr
			title= "" ></abbr>
	
 
abbreviation : Acronym
 
<acronym
			title= "" ></acronym>
	
 
abbreviation : base
 
<base
			href= ""/>
	
 
abbreviation : Basefont
 
<basefont/>
	
 
abbreviation : BR
 
<br/>
	
 
abbreviation : Frame
 
<frame/>
	
 
abbreviation : HR
 
 
abbreviation : BDO
 
<bdo
			dir= "" ></bdo>
	
 
abbreviation : bdo:r
 
<bdo
			dir= "RTL" ></bdo>
	
 
abbreviation : bdo:l
 
<bdo
			dir= "ltr" ></bdo>
	
 
abbreviation : col
 
<col/>
	
 
abbreviation : Link
 
<link
			rel= "stylesheet"
			href= ""/>
	
 
abbreviation : link:css
 
<link
			rel= "stylesheet"
			href= "Style.css"/>
	
 
abbreviation : link:print
 
<link
			rel= "stylesheet"
			href= "print.css" media=
			"print"/>
	
 
abbreviation : Link:favicon
 
<link
			rel= "shortcut icon"
			type= "Image/x-icon" href= "Favicon.ico"/>
			
	
 
abbreviation : Link:touch
 
<link
			rel= "Apple-touch-icon"
			href= "Favicon.png"/>
	
 
abbreviation : Link:rss
 
<link
			rel= "alternate"
			type= "Application/rss+xml" title= "
			rss
			" href= "Rss.xml"/>
	
 
abbreviation : Link:atom
 
<link
			rel= "alternate"
			type= "Application/atom+xml" title= "
			Atom"
			href= "Atom.xml"/>
	
 
abbreviation : meta
 
<meta/>
	
 
abbreviation : Meta:utf
 
<meta
			http-equiv= "Content-type"
			content= "Text/html;charset=utf-8"/>
	
 
abbreviation : Meta:win
 
<meta
			http-equiv= "Content-type"
			content= "text/html;charset=windows-1251"/>
	
 
abbreviation : META:VP
 
<meta
			name= "viewport"
			content= "Width=device-width, User-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0 "/>
	
 
abbreviation : Meta:compat
 
<meta
			http-equiv= "x-ua-compatible"
			content= "ie=7"/>
	
 
abbreviation : Style
 
<style></style>
	
 
abbreviation : script
 
<script></script>
	
 
abbreviation : script:src
 
<script
			src= "" ></script>
	
 
abbreviation : img
 
	
 
abbreviation : iframe
 
<iframe
			src= ""
			frameborder= "0" ></iframe>
	
 
abbreviation : Embed
 
<embed
			src= ""
			type= ""/>
	
 
abbreviation : Object
 
<object
			data= "
			type=" "></object>
	
 
abbreviation : param
 
<param
			name= ""
			value= ""/>
	
 
abbreviation : Map
 
<map
			name= "" ></map>
	
 
abbreviation : Area
 
<area
			shape= "
			coords=" "
			href=" "
			alt=" "/>"
	
 
abbreviation : area:d
 
<area
			shape= "default"
			href= "
			alt=" "/>
	
 
abbreviation : area:c
 
<area
			shape= "Circle"
			coords= "
			href=" "alt=" "/>"
			
	
 
abbreviation : area:r
 
<area
			shape= "rect"
			coords= "
			href=" "alt=" "/>"
			
	
 
abbreviation : area:p
 
<area
			shape= "Poly"
			coords= "
			href=" "alt=" "/>"
			
	
 
abbreviation : Form
 
<form
			action= "" ></form>
	
 
abbreviation : form:get
 
<form
			action= ""
			method= "get" ></form>
	
 
abbreviation : form:post
 
<form
			action= ""
			method= "POST" ></form>
	
 
abbreviation : Label
 
<label
			for= "" ></label>
	
 
abbreviation : input
 
<input
			type= "text"/>
	
 
abbreviation : INP
 
<input
			type= "text"
			name= "
			id=" "/>
	
 
abbreviation : Input:hidden
 
Alias: Input[type=hidden name]
 
<input
			type= "hidden"
			name= ""/>
	
 
abbreviation : input:h
 
Alias: Input:hidden
 
<input
			type= "hidden"
			name= ""/>
	
 
abbreviation : Input:text, Input:t
 
Alias: INP
 
<input
			type= "text"
			name= "
			id=" "/>
	
 
abbreviation : Input:search
 
Alias: Inp[type=search]
 
<input
			type= "search"
			name= "
			id=" "/>
	
 
abbreviation : input:email
 
Alias: Inp[type=email]
 
<input
			type= "email"
			name= "
			id=" "/>
	
 
abbreviation : Input:url
 
Alias: Inp[type=url]
 
<input
			type= "url"
			name= "
			id=" "/>
	
 
abbreviation : Input:password
 
Alias: Inp[type=password]
 
<input
			type= "password"
			name= "
			id=" "/>"
	
 
abbreviation : input:p
 
Alias: Input:password
 
<input
			type= "password"
			name= "
			id=" "/>"
	
 
abbreviation : input:datetime
 
Alias: Inp[type=datetime]
 
<input
			type= "datetime"
			name= "
			id=" "/>
	
 
abbreviation : input:date
 
Alias: Inp[type=date]
 
<input
			type= "date"
			name= "
			id=" "/>
	
 
abbreviation : input:datetime-local
 
Alias: inp[type=datetime-local]
 
<input
			type= "datetime-local"
			name= "
			id=" "/>"
	
 
abbreviation : input:month
 
Alias: Inp[type=month]
 
<input
			type= "month"
			name= "
			id=" "/>"
	
 
abbreviation : Input:week
 
Alias: Inp[type=week]
 
<input
			type= "Week"
			name= "
			id=" "/>"
	
 
abbreviation : input:time
 
Alias: Inp[type=time]
 
<input
			type= "Time"
			name= "
			id=" "/>
	
 
abbreviation : input:number
 
Alias: Inp[type=number]
 
<input
			type= "number"
			name= "
			id=" "/>
	
 
abbreviation : Input:color
 
Alias: Inp[type=color]
 
<input
			type= "Color"
			name= "
			id=" "/>
	
 
abbreviation : Input:checkbox
 
Alias: Inp[type=checkbox]
 
<input
			type= "checkbox"
			name= "
			id=" "/>
	
 
abbreviation : input:c
 
Alias: Input:checkbox
 
<input
			type= "checkbox"
			name= "
			id=" "/>
	
 
abbreviation : Input:radio
 
Alias: Inp[type=radio]
 
<input
			type= "Radio"
			name= "
			id=" "/>"
	
 
abbreviation : input:r
 
Alias: Input:radio
 
<input
			type= "Radio"
			name= "
			id=" "/>"
	
 
abbreviation : Input:range
 
Alias: Inp[type=range]
 
<input
			type= "range"
			name= "
			id=" "/>
	
 
abbreviation : input:file
 
Alias: Inp[type=file]
 
<input
			type= "file"
			name= "
			id=" "/>
	
 
abbreviation : input:f
 
Alias: Input:file
 
<input
			type= "file"
			name= "
			id=" "/>
	
 
abbreviation : input:submit
 
<input
			type= "Submit"
			value= ""/>
	
 
abbreviation : input:s
 
Alias: Input:submit
 
<input
			type= "Submit"
			value= ""/>
	
 
abbreviation : input:image
 
<input
			type= "image"
			src= "
			alt=" "/>
	
 
abbreviation : input:i
 
Alias: Input:image
 
<input
			type= "image"
			src= "
			alt=" "/>
	
 
abbreviation : Input:button
 
<input
			type= "button"
			value= ""/>
	
 
abbreviation : input:b
 
Alias: Input:button
 
<input
			type= "button"
			value= ""/>
	
 
abbreviation : isindex
 
<isindex/>
	
 
abbreviation : Input:reset
 
Alias: Input:button[type=reset]
 
<input
			type= "reset"
			value= ""/>
	
 
abbreviation : Select
 
<select
			name= "
			id=" "></select>
	
 
abbreviation : Option
 
<option
			value= "" ></option>
	
 
abbreviation : TextArea
 
<textarea
			name= "
			id=" "
			cols=" rows= "ten"
			></textarea>
	
 
abbreviation : Menu:context
 
Alias:menu[type=context]>
 
<menu
			type= "context" ></menu>
	
 
abbreviation : menu:c
 
Alias: Menu:context
 
<menu
			type= "context" ></menu>
	
 
abbreviation : Menu:toolbar
 
Alias:menu[type=toolbar]>
 
<menu
			type= "toolbar" ></menu>
	
 
abbreviation : menu:t
 
Alias: Menu:toolbar
 
<menu
			type= "toolbar" ></menu>
	
 
abbreviation : Video
 
<video
			src= "" ></video>
	
 
abbreviation : Audio
 
<audio
			src= "" ></audio>
	
 
abbreviation : html:xml
 
 
abbreviation : keygen
 
<keygen/>
	
 
abbreviation : command
 
<command/>
	
 
abbreviation : BQ
 
Alias: blockquote
 
<blockquote></blockquote>
	
 
abbreviation : ACR
 
Alias: Acronym
 
<acronym
			title= "" ></acronym>
	
 
abbreviation : Fig
 
Alias: Figure
 
<figure></figure>
	
 
abbreviation : FIGC
 
Alias: Figcaption
 
<figcaption></figcaption>
	
 
abbreviation : IFR
 
Alias: iframe
 
<iframe
			src= ""
			frameborder= "0" ></iframe>
	
 
abbreviation : EMB
 
Alias: Embed
 
<embed
			src= ""
			type= ""/>
	
 
abbreviation : obj
 
Alias: Object
 
<object
			data= "
			type=" "></object>
	
 
abbreviation : src
 
Alias: source
 
<source></source>
	
 
abbreviation : Cap
 
Alias: Caption
 
<caption></caption>
	
 
abbreviation : Colg
 
Alias: Colgroup
 
<colgroup></colgroup>
	
 
abbreviation : FST, Fset
 
Alias: fieldset
 
<fieldset></fieldset>
	
 
abbreviation : btn
 
Alias: button
 
<button></button>
	
 
abbreviation : btn:b
 
Alias: Button[type=button]
 
<button
			type= "button" ></button>
	
 
abbreviation : btn:r
 
Alias: Button[type=reset]
 
<button
			type= "Reset" ></button>
	
 
abbreviation : btn:s
 
Alias: Button[type=submit]
 
<button
			type= "Submit" ></button>
	
 
For more HTML and CSS abbreviations, see:
 
Download API table Direct hits the official website document
 
Special Statement: The text of the demo code from the official website api:http://docs.emmet.io/cheat-sheet/
 
If you need to reprint, please observe the W3cplus Copyright statement, kindly indicate the source: http://www.w3cplus.com/tools/emmet-cheat-sheet.html