1) syntax for HTML generation using Emmet
Generate HTML Document Initial structure
The initial structure of an HTML document is to include DOCTYPE, HTML, head, body, and meta content. You only need to enter a "!" to generate a HTML5 standard document initial structure, you do not see the wrong, enter an exclamation mark (of course, the English symbol), and then press the TAB key, you will find that the following structure is generated:
<!doctype html>
This is the standard structure of a HTML5 and the default HTML structure. If you want to create a HTML4 transition structure, enter the command HTML:XT to generate the following structure:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Emmet will automatically give you the DOCTYPE to complete, how, such a function will not let you tempted? Briefly summarize the common HTML structure directives:
Html:5 or! Generating HTML5 structures
HTML:XT Generating HTML4 transition type
Html:4s generation HTML4 Strict type
Generate an HTML tag with ID, class
Emmet's syntax is a bit like CSS syntax, generating a DIV tag with id aaa, we just need to write the following instruction:
#aaa
Emmet The default tag is Div, if we don't give the tag name, the div tag is generated by default. If you write a span tag with a class of BBB, we need to write the following instruction:
span.bbb
The corresponding structure is then generated. Similarly, if you want to write a UL tag with a class ID of CCC as DDD, we can write:
ul#ccc.ddd
Very simple, huh? It's more convenient than your handwriting ID and class.
Generating Descendants:>
The greater-than sign indicates that the content to be generated later is the descendant of the current label. For example, if I want to generate an unordered list and be wrapped by Class AAA Div, you can use the following command:
div.aaa>ul>li
The following structure can be generated:
<div class="aaa"> <ul> <li></li> </ul></div>
Build Brother: +
Above is the generation of subordinate elements, if you want to create a peer element, you need to use the + sign. For example, the following directives:
div+p+bq
You can generate the following HTML structure:
<div></div><p></p><blockquote></blockquote>
Generate ancestor elements: ^
What does a superior (climb-up) element mean? In front of us, we said ">" to generate the subordinate elements, and after using Div>ul>li's instructions, continue writing, then the next content is in the Li subordinate. If I want to write a span tag with UL level, then I need to start with "^" to raise the hierarchy. For example:
div>ul>li^span
The following structure is generated:
<div> <ul> <li></li> </ul> <span></span></div>
If I want to create a level element relative to the div, then go up one more layer and use a "^" symbol:
div>ul>li^^span
generate multiple copies:*
In particular, an unordered list, UL under the Li certainly not just a copy, usually to generate a lot of Li tags. Then we can go directly to the LI behind * some numbers:
ul>li*5
This will generate an unordered list of five items directly. If you want to generate more than one other structure, the method is similar.
Build groups: ()
Use parentheses to group, so that you can more clearly define the structure to be generated, especially the hierarchical relationships, for example:
div>(header>ul>li*2>a)+footer>p
This makes it clear that hierarchical and side-by-side relationships can be seen, resulting in the following structure:
<div>
In addition, grouping can be easily combined with the "*" symbol above to generate a repeating structure:
(div>dl>(dt+dd)*3)+footer>p
Build structure:
<div> <dl> <dt></dt> <dd></dd> <dt></dt> <dd></dd> <dt></dt> <dd></dd> </dl></div><footer> <p></p></footer>
Build Custom properties: [attr]
A tag often needs to include the href attribute and the title attribute, if we want to generate an href http://www.yunxiu.org/blog , title "I Love Boiled fish" a tag, you can write:
a[href="http://www.yunxiu.org/blog" title="云袖网"]
Other tags and properties are similar.
To generate content number: $
For example unordered list, I want to add a class attribute value item1 for five Li, then increment from 1-5, then you need to use the $ symbol:
ul>li.item$*5
This creates the following structure:
<ul> <li class="item1"></li> <li class="item2"></li> <li class="item3"></li> <li class="item4"></li> <li class="item5"></li></ul>
$ means one digit, and only one appears, starting with 1. If more than one appears, start at 0. If I want to generate a three-digit ordinal number, then write three $:
ul>li.item$$$*5
Output:
<ul> <li class="item001"></li> <li class="item002"></li> <li class="item003"></li> <li class="item004"></li> <li class="item005"></li></ul>
Can only be generated in such a monotonous sequence number? For the powerful Emmet, it's certainly not going to happen, and we can add @-back to the reverse order:
ul>[email protected]*5
The following structure is generated:
<ul> <li class="item5"></li> <li class="item4"></li> <li class="item3"></li> <li class="item2"></li> <li class="item1"></li></ul>
Again, we can use @N to specify the starting sequence number:
ul>[email protected]*5
This will be sorted starting from 3, generating the following code:
<ul> <li class="item3"></li> <li class="item4"></li> <li class="item5"></li> <li class="item6"></li> <li class="item7"></li></ul>
With the reverse output above, you can write this:
ul>[email protected]*5
The result is a 3-based reverse:
<ul> <li class="item7"></li> <li class="item6"></li> <li class="item5"></li> <li class="item4"></li> <li class="item3"></li></ul>
Generate text content: {}
The above explains how to generate HTML tags, what about the content? Of course, you can also generate:
a[href="http://www.yunxiu.org/blog"]{点击这里到 云袖网}
This creates a hyperlink to my favorite boiled fish. In the generation of content, pay particular attention to the symbolic relationship, although a>{click me} and A{click me} generated the same structure, but with other content is not necessarily, for example:
<!-- a{click}+b{here} --><a href="">click</a><b>here</b><!-- a>{click}+b{here} --><a href="">click<b>here</b></a>
This creates a completely different structure, paying attention to these small details.
Do not have spaces
When writing instructions, you may want to use some space for the readability of the code. This will cause the code to become unusable. For example, the following sentence:
(header > ul.nav > li*5) + footer
After you remove the space, the build structure can be executed normally.
2) Emmet to quickly write CSS skills
First, Sublime Text 2 has provided a more powerful way to write CSS styles to improve the efficiency of CSS authoring. such as writing Position:absolute; This property, we only need to enter the Posa four letters can be. It will pop up a hint of the abbreviated style:
Shorthand Properties and property values
If you want to generate width:100px; you only need to input w100 it, because the default setting of Emmet W is the width of the abbreviation, followed by the number is the property value. The default property value unit is PX, and you can immediately follow the value of the character generation unit, which can be any character. For example, w100foo width:100foo; Such a statement is generated. You can also abbreviate attribute units, if you follow the property value followed by the character is P, then the statement will be generated width:100%; , where p represents the percentage unit. Similar to this, there are: e → em; x → ex .
For example, a property such as margin may not be a property value, and generating multiple attribute values requires a horizontal bar (-) to concatenate two property values, because spaces are not allowed in Emmet directives . For example, use m10-20 this command to generate margin: 10px 20px; such a statement. If you want to generate negative values, add a horizontal bar. It is important to note that if you specify units for each attribute, you do not need to use a cross-bar split. For example m10ff20ff , this command can be used to generate margin: 10ff 20ff; this statement, if you put a bar in front of the 20FF, 20FF will become negative.
If you want to generate more than one statement at a time, you can use ' + ' to connect two statements, for example, h10p+m5e you can generate height: 10%;margin: 5em; these two statements.
Color values can also be generated quickly, for example, in a c#3 → color: #333; more complex, use bd5#0s can generate border: 5px #000 solid; such a sentence. Here are the rules:
#1 → #111111#e0 → #e0e0e0#fc0 → #ffcc00
Generate!important This statement is of course very simple, just need a '! ' to do it.
Additional options are added
Use to @f generate font-face the code structure in CSS3:
@font-face {font-family:;src:url();}
But this structure is too simple to contain some other attributes, font-face such as Background-image, Border-radius, Font, @font-face, Text-outline, Text-shadow, etc. We can generate an enhanced structure by entering ' + ' at build time, for example, we can enter the @f+ command to output the font-face structure of the option-enhanced version:
@font-face { font-family: ‘FontName‘; src: url(‘FileName.eot‘); src: url(‘FileName.eot?#iefix‘) format(‘embedded-opentype‘), url(‘FileName.woff‘) format(‘woff‘), url(‘FileName.ttf‘) format(‘truetype‘), url(‘FileName.svg#FontName‘) format(‘svg‘); font-style: normal; font-weight: normal;}
Add experimental prefix (Vendor prefixes)
CSS3 and so there is no formal specification, but many browsers have implemented the corresponding function, only as a test only, so in front of the property with its own unique experimental prefix, different browsers will only recognize the style with their own prefix. However, in order to achieve compatibility, we have to write a lot of redundant code, and to add the corresponding prefix. Use Emmet to quickly generate a CSS3 property with a prefix.
ST2 has built in some of the most common CSS3 properties that require experimental prefixes, such as input TRF pop-up prompts and hit enter to generate. and Emmet enhanced this feature. The prefix code for the property, such as input, is generated by adding a bar (-) to any character before it -foo-css :
-webkit-foo-css: ;-moz-foo-css: ;-ms-foo-css: ;-o-foo-css: ;foo-css: ;
Although foo-css it is not a property, it can be generated anyway. In addition, you can control exactly which browser prefixes or sequences are generated in detail, and use them to -wm-trf generate the following:
-webkit-transform: ;-moz-transform: ;transform: ;
It is conceivable that W is the abbreviation of WebKit prefix, m is moz prefix abbreviation, s is the MS prefix abbreviation, O is the abbreviation of opera browser prefix. If you use-OSMW-ABC, you can generate:
-o-abc: ;-ms-abc: ;-moz-abc: ;-webkit-abc: ;abc: ;
Create a gradient background
A new attribute is added to the CSS3 linear-gradient use this property to directly create a gradient effect. However, the parameters of this property are complex, and you need to add an experimental prefix, there is no doubt that a large number of code generated. Using the LG () Directive in Emmet can be generated quickly, for example: using LG (left, #fff 50%, #000) to generate directly:
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);
Directly help you to create a browser prefix.
3) Advanced features commonly used by Emmet
Generate Lorem Ipsum
Lorem Ipsum represents a text that is not understood at random. Lorem Ipsum text to people can not understand, so as to ignore the meaning of content and focus on the content of the layout, as a test data filling. Using Emmet to generate Lorem Ipsum text is simple, just use the Lorem command, and when you hit the Tab key, the following text is generated:
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui, dolor, aperiam ab repellendus blanditiis eum exercitationem. Quae, reprehenderit repellat impedit asperiores consequatur? Illum quos magnam odit omnis recusandae natus similique.
Emmet's Lorem command is more than just a simple function of outputting such a piece of text, since, as a test data, you can add parameters to specify the number of characters to output. For example, if we want to output a H1 header for 10 words, we can use the following command h1>lorem10 . However, this feature is not very useful for web testing in Chinese, after all, the layout of Chinese and English words is different.
Jump Edit Area
Write code generally use two hand, sometimes need to jump to other code snippets, you can use the keyboard arrow keys can also use the mouse. But this is all flawed, using the keyboard arrow keys to move too slowly, and need to hold down the shift and arrow keys to check the code; using a mouse, the hand must leave the keyboard, and back and forth will waste some time. And Emmet provides a very useful function, that is, the whole block of jumps.
To facilitate understanding, first look at the official Demo animation. This function, using shift+ctrl+. And shift+ctrl+, move down or up, select an entire block, start with the label, then the entire property, and then the attribute value. This way, it is much more efficient than the keyboard's directional key movement.
Increase the size of the picture
Sometimes, we need to add the corresponding width, height property to the label to represent the size of the picture or to give the background picture referenced by the Background-image property a size. The usual practice is to look at a piece of size, and then add, and now you just need to move the cursor to the code snippet, press Ctrl+u to let Emmet automatically read the size of the image to add. The precondition is that the picture is present and the correct reference comes in.
If it is for the label, it will be followed by the width, height property, if it is introduced by background, will be added below the width, height of the CSS properties. Take a look at the official Demo. But here's the problem, in the official Demo, the shortcut key to implement this function is shift+ctrl+u but in practice, this shortcut doesn't work. About Emmet's Mac, Win under the shortcut keys, on this page is the subject: Https://github.com/sergeche/emmet-sublime#available-actions.
Update property values for CSS
When we write CSS, we sometimes write many attributes with a prefix for hack. For example:
-webkit-transform: rotate(30deg);-moz-transform: rotate(30deg);-ms-transform: rotate(30deg);-o-transform: rotate(30deg);transform: rotate(30deg);
If we suddenly want to change the angle value of the rotation, then we need to modify it in turn or press CTRL + Select to modify it. With Emmet, it is much more convenient, we just need to modify one of them, and then press the SHIFT+CTRL+R key to update other related property values.
Convert picture resources to data URL form
The data URL picture has many advantages and is useful in some cases, but converting a picture to a data URL format is cumbersome and uses some tools. In Emmet, move the cursor to the location of the picture in Background:url () and press CTRL + ' to encode the image into data URL format. Of course, the prerequisite is that the picture resource reference is correct.
In addition, Emmet has some other common functions such as quick jump, calculation and so on, here just introduced a few more commonly used features, interested friends can open the official document of Emmet Action to see the Demo, here no longer repeat.
Emmet Plugin Use tutorial
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
