Advanced functions and usage skills of Emmet

From: http://www.douban.com/note/299431625? Qq-pf-to = pcqq. group

Introduction to the front-end development tool Emmet, rapid compilation of HTML code by Emmet and quick compilation of CSS styles by Emmet, respectively, the purpose of Emmet, the compilation of HTML code and CSS styles, today, I will introduce some advanced features and usage skills of Emmet.
When compiling HTML and CSS code, we also need to modify or add some content. Emmet provides many unique tools to greatly improve the editing experience, below we will introduce several common functions.
The shortcut keys of the Emmet plug-in installed in sublime text are different from those provided in the official demonstration document. In this case, we need to modify the Emmet shortcut keys or find the Emmet shortcut keys in sublime text.
Modify the shortcut key, open PreFerences -- Package Settings -- Emmet, and only view the shortcut key, for example, the Match Tag Pair shortcut key. Open the Command Panel ctrl + shift + p in the tool, and enter: match.
The shortcut keys used in this article are the same as those in the official demonstration.
Expand Abbreviation Demo

 

This feature was introduced at the beginning, which is the core function of Emmet.

Generate the test text Lorem Ipsum Demo. When compiling HTML code, you sometimes need to add some content. Emmet provides a random field that cannot be understood in English and can be called as test data. The generation of Lorem Ipsum text is also very simple. Enter lorem and press the Tab key to generate the following text:

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit, non, minima, voluptas ducimus
Voluptatem perspiciatis id delectus maiores saepe porro aliquam sunt pariatur eaque. Enim,
Voluptatem nesciunt voluptate ad veritatis.
The lorem function of Emmet not only generates a piece of text, but uses lorem to generate 30 words of text by default. It can specify the number of words to generate a large segment of text at random.
To generate a title, you only need to reduce the number of words. For example, lorem4 will generate the following title:
Lorem ipsum dolor sit.
The above example only generates a separate test text. It is also very easy to write with HTML tags, just like the code for generating parent-child relationships in Emmet's quick HTML code article:
H2> lorem4
Will generate:
<H2> Lorem ipsum dolor sit. P * 4> lorem4
Will generate:
<P> Lorem ipsum dolor sit. </p>
<P> Dolores, similique veritatis reprehenderit. </p>
<P> Cupiditate repudiandae numquam earum. </p>
<P> Atque, sequi autem praesentium? </P>
Therefore, lorem provides us with powerful test data, improves the speed of HTML code writing, and enables us to focus on coding.

Wrap with Abbreviation Demo
A very powerful function, adding abbreviations based on the current HTML code, will expand the code outward, such as this code, cursor on the p tag or external:
<Div id = "page">
<P> Hello world </p>
</Div>
Press shift + ctrl + g. Enter Wrap Abbreviation (Enter the extension Abbreviation) and Enter:
. Wrapper> h1 {Title} +. content
You will get:
<Div id = "page">
<Div class = "wrapper">
<H1> Title <Div class = "content">
<P> Hello world </p>
</Div>
</Div>
</Div>
Convert text into HTML tags when the customer provides us with a text document and copies the title, for example:
Homepage
Company Profile
Company news
About us
Contact us
Convert to navigation, select text, and press shift + ctrl + g. The following pop-up is displayed: Enter Wrap Abbreviation (Enter the extension Abbreviation). Enter:
Nav> ul. nav> li. nav-item $ *>
You will get:
<Nav>
<Ul class = "nav">
<Li class = "nav-item1"> <a href = ""> Home </a> </li>
<Li class = "nav-item2"> <a href = ""> Company Profile </a> </li>
<Li class = "nav-item3"> <a href = ""> company dynamics </a> </li>
<Li class = "nav-item4"> <a href = ""> about us </a> </li>
<Li class = "nav-item5"> <a href = ""> Contact Us </a> </li>
</Ul>
</Nav>
Note that there are five menus in the navigation. Here, you do not need to use * 5 after the li tag. You only need to use a separate operator.
Delete the list tag in text. Most of the text in a Word document is a list block, for example:
1. Home Page
2. Company Profile
3. company news
4. About us
5. Contact Us
You do not need to write HTML code. Emmet allows you to delete the tags in the text and add them after the basic code abbreviated to the previous function | t to delete the tags in the text:
Nav> ul. nav> li. nav-item $ *> a | t
The final HTML code is the same as the above. You can try it!
Control the output position of the text. By default, when you use Emmet to convert the text into HTML code, you can use the $ # Operator Emmet to output the text to multiple elements, $ # equals Part Of The Emmet abbreviation syntax, so you need to put $ # In the attribute value [] or the text {} operator.
The preceding navigation text is used as an example. In Enter Wrap Abbreviation, Enter:
Ul> li [title =$ #] *> {$ #} + img [alt =$ #]
You will get:
<Ul>
<Li title = "Homepage"> homepage </li>
<Li title = "Company Profile"> Company Profile </li>
<Li title = ""> company news </li>
<Li title = "About Us"> about us </li>
<Li title = "Contact Us"> Contact Us </li>
</Ul>
Split and add tags (Split/Join tags) Demo
When the cursor is on the label, press ctrl + j to move the label:
<Div> </div>
Convert
<Div/>
Label, and vice versa. When there is content in the div, using this function will be converted to the previous tag, and the content will also be deleted, so we also need to pay attention when using it.
Demo ing CSS property values (Reflect CSS Value) Demo for browser compatibility, CSS styles have many prefix styles with property values. If you modify the Value, you need to modify several places, such:
Div {
Padding: 10px;
-Webkit-transform: rotate (50deg );
-Moz-transform: rotate (50deg );
-Ms-transform: rotate (50deg );
-O-transform: rotate (50deg );
Transform: rotate (50deg );
Opacity: 0.7;
Filter: alpha (opacity = 70 );
}
In Emmet, we only need to modify one of the rotation attribute values, and then press ctrl + B. Other related attribute values also change accordingly.
Match Tag Pair Demo
When writing HTML code, we need to select the code from the start tag to the closed tag. Generally, we use the mouse box to select the Code, although it is not too troublesome, however, Emmet provides us with more convenient and convenient functions to expand and reduce the number of choices.
Press ctrl + d at the mouse cursor to select all content within the label range where the cursor is located. Multiple operations will expand the selection. The shortcut key crtl + shift + d is used to narrow down the selection range after multiple operations.
Go to Matching Pair Demo
Jump to the start tag and close tag. Shortcut: ctrl + t. When writing large HTML files, we can't find matching closed tags. This feature provided by Emmet allows us to easily jump between start and close tags.
Go to Edit Point Demo (Go to Edit Point) this function is suitable for jump between tags, empty attributes, and empty Article tags, for example, title, a, li, href, src, and so on. The shortcut keys for the last edit point are ctrl + alt + left and ctrl + alt + right.
Toggle Comment Demo
Previously, annotations were produced by a single symbol. It was really hard and annoying. Emmet provides the comment function. You only need to use the ctrl +/shortcut key to add and delete comments. However, the scope of comments is in the unit of action, it can be used in HTML and CSS code.
Remove Tag Demo
In some large HTML code, sometimes there are too many tags nested. By removing tags through Emmet, you can quickly remove unnecessary matching start tags and closed tags. Shortcut Keys: ctrl + k.
Update Image Size Demo most of the time when you compile the img title in HTML code and the background-image in CSS style, you need to know the width and height of the Image, it is a waste of time and uncomfortable to find images and view their sizes on your computer. Emmet provides us with this function. We only need to move the cursor to the img or background-image label, press ctrl + shift + u, and Emmet will automatically read the image size and add it.
The premise is that the referenced image address is correct and exists, and the path cannot contain Chinese characters. It must be an English character. Otherwise, it will not respond if the keyboard is broken.
Number Increment/decrease (Increment/Decrement Number) Demo Number Increment/decrease, can be increased/decreased with 0.1, 1 and 10 values, shortcut keys are: ctrl + up/down, alt + up/down, and ctrl + alt + up/down.
The Evaluate Math Expression Demo has Emmet which can be used to perform simple numeric operations in HTML and CSS files. The magic is that press ctrl + shift + y after entering 4x8, emmet can give the final result.
Compile the Image into data: URL (Encode/Decode Image to data: URL) Demodata: URL mode. The Image data is translated into standard ASCII characters using base64 encoding, directly draw images locally, instead of loading images from the server. This reduces HTTP requests and increases the webpage loading speed.
Convert an image to the data: URL mode. Emmet provides us with the simplest and quickest way to place the cursor on an image of the img or background-image Tag, press ctrl + shift + l to perform a perfect conversion.
Some of the frequently-used quick functions and features of Emmet are introduced here. When you use these features to write code, you may feel slow, compiling HTML code and CSS styles will become very fast and will greatly improve the front-end development efficiency.
Link: http://salonglong.com/emmet-advanced.html