Emmet: Tools to significantly improve front-end development efficiency

Source: Internet
Author: User
Tags date object command line continue end header touch sublime text

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







Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.