Home > Developer > JavaScript
Emmet: Quick coding of HTML/CSS code, emmetcss
1. Introduction to Emmet
The predecessor of Emmet is Zen Coding, which uses the syntax of the CSS selector to generate code, greatly improving the speed of HTML/CSS code writing. It consists of two core components: an abbreviation extender (a CSS-like selector) is a context-independent HTML Tag pair.
Ii. Quick coding of HTML code
1. Initialization
HTML documents must contain fixed tags, such as
For example, enter "!" Or "html: 5", and then press the Tab key to generate:
<!doctype html>Html: 5 or! : Used for HTML5 document types;
Html: xt: used for filtering document types in XHTML;
Html: 4 s: used for html 4 strict document type.
2. easy addition of classes, IDs, text and attributes
For continuous input of element names and IDs, Emmet will automatically complete. For example, input p # foo to generate:
<p id="foo"></p>Consecutive input classes and IDs, such as p. bar # foo, are automatically generated:
<p class="bar" id="foo"></p>Define the content of the element:
H1 {content }:
<H1> contentDefine the attributes of an element:
A [href = #]:
<a href="#"></a>3. nesting
You can use Emmet to implement tag nesting with only one line of code:
>: Child element symbol, indicating nested elements;
+: Same-level label symbol;
^: You can use the label before the symbol to promote a row.
For example:
P> span:
<p><span></span></p>H1 + h2:
P> span ^ p:
<p><span></span></p><p></p>4. Group
Emmet can be used to quickly generate some code blocks through nesting and parentheses. For example, input (. foo> h1) + (# bar> h2) will be automatically generated:
<div class="foo">5. Implicit tag
Declare a tag with a class. You only need to input div. item to generate the tag automatically:
<div class="item"></div>In previous versions, you can omit div, that is, enter. item to generate <div class = "item"> </div>. If only. item is input, Emmet determines Based on the parent tag. For example, if you enter. item in <ul>, <li class = "item"> </li> is generated.
Li: Used in ul and ol;
Tr: Used in table, tbody, thead, and tfoot;
Td: Used in tr;
Option: Used in select and optgroup.
6. Define Multiple Elements
To define multiple elements, you can use the symbol *, for example, ul> li * 5:
<ul> <li></li> <li></li> <li></li> <li></li> <li></li></ul>7. Define multiple elements with attributes
Enter ul> li. item $ * 3, which will be automatically generated:
<ul> <li class="item1"></li> <li class="item2"></li> <li class="item3"></li></ul>Iii. CSS abbreviations
1. Value
For example, to define the width of an element, you only need to enter w100 to generate:
width: 100px;In addition to px, other units can also be generated. For example, input h10p + m5e will generate:
height: 10%;margin: 5em;Organization Alias List:
P: %;
E: em;
X: ex.
2. Fuzzy match
If some abbreviations are inaccurate During writing, Emmet will match the closest syntax based on the input content. For example, input ov: h, ov-h, ovh, and oh will generate:
overflow: hidden;3. Supplier prefix
If you enter a CSS attribute that is not W3C standard, Emmet automatically adds the supplier prefix. For example, if you enter trs, the following code is generated:
-webkit-transition: prop time; -moz-transition: prop time; -ms-transition: prop time; -o-transition: prop time; transition: prop time;If you do not want to add any prefix, you can also use the abbreviation. For example, if you enter-wm-trf, only the prefix-webkit and-moz is added:
-webkit-transform: ; -moz-transform: ; transform: ;The prefix is described as follows:
W:-webkit -;
M: indicates-moz -;
S:-ms -;
O: represents-o -.
4. gradient (not supported by webStorm)
Enter lg (left, # fff 50%, #000) to automatically generate:
background-image: -webkit-gradient(linear, 0 0, 100% 0, color-stop(0.5, #fff), to(#000)); background-image: -webkit-linear-gradient(left, #fff 50%, #000); background-image: -moz-linear-gradient(left, #fff 50%, #000); background-image: -o-linear-gradient(left, #fff 50%, #000); background-image: linear-gradient(left, #fff 50%, #000);Iv. Plug-ins for different editors
Emmet supports the following Editor:
1. Sublime Text 2;
2. TextMate 1.X;
3. Eclipse/Aptana;
4. Coda 1.6 and 2.x;
5. Espresso;
6. Chocolat (add in the "Install Mixin" dialog box );
7. Komodo Edit/IDE (via Tools → Add-ons menu );
8. Notepad ++;
9. ps3;
10. <textarea>;
11. CodeMirror2/3;
12. Brackets;
13. WebStorm;
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
