Accelerate web front-end development with Emmet (formerly Zen Coding)

This article on the use of Emmet more detailed, so I collected ~ ~ ~

Reprint: Web front end developer-web Front end Engineer» Accelerate web front-end development with Emmet (formerly Zen Coding)

Formerly known as Zen Coding, the Emmet plugin is a plug-in for a text editor that helps you quickly write HTML and CSS code to accelerate web front-end development. As early as 2009, Sergey Chikuyonok wrote an article proposing new ways to write HTML and CSS. This revolutionary plugin refers to Zen Coding, which has reached a new level after years of effort and help from many developers. That's what we call the Emme plugin today.
In this article, we will learn how to use the Emmet syntax to generate HTML and CSS code.

Installing the Emmet plugin

Emmet is just a plug-in for a text editor, and if you want to make it work, you have to install it into your favorite text editor. So far, many popular text editors have supported the Emmet plugin, which means that many popular text editors can install the plugin.

Click on the link below and follow the instructions to install the Emmet plugin for the corresponding text editor:

• Sublimetext
• Eclipse
• TextMate
• Coda
• Espresso
• Chocolat
• notepad++
• Brackets
• NetBeans
• Adobedreamweaver

How does it work?

In the development of Web front-end, we have to face a cruel reality. It takes a while to write HTML code, because we spend a lot of time writing HTML tags, attributes, quotes, and so on, as well as writing CSS with lots of attributes, attribute values, curly braces, and semicolons. Of course, most of the text editors are more or less with the Code auto-hint function, at the time of development, the help is very busy, but still need to manually enter a lot of code. and Emmet plug-ins, integration of a lot of abbreviations, everyone in the development only need to enter a simple abbreviation, press the TAB key or the Ctrl+e key to expand the required code snippet.

Emmet and HTML

Assuming you've successfully installed the Emmet plugin for your favorite text editor, let's take a quick look at how to use Emmet to help you quickly write your HTML tags.

Emmet uses the defined abbreviations to generate the elements. His syntax is very similar to the CSS selector:

Ul>li>img+p

Once you've written your initials, click the TAB key (I'm using the sublime text editor) to generate the code you requested. The example above will produce the following code:

 <ul> <li>  <p></p> < /li></ul> element-1    
  > Next, let's take a closer look at the Emmet syntax to see how to create HTML tags with some more complex abbreviations.    Create an initial document    any HTML file, Have some default document structure. Using Emmet to create takes less than a second. Just enter! or Html:5, then click the TAB key and you will see a HTML5 DOCTYPE default tag. Html:5 or!:HTML5 document type  html:xt:xhtml Transitional Document type  html:xs:xhtml strict type document type  html:4t:html4 Transitional Document type  html:4s:html4 strict type document type  
   element-dtd 
    child elements;  use the > operator to generate elements that are nested with each other:    

section>div>p<section>    <div>        <p></p>    </div></section>

Element-2
Adjacent elements + Use the + operator to generate elements that are adjacent to each other:

Section+div+p The code above generates the following code:

<section></section>
<div></div>
<p></p>

Element-3
Go back to the previous layer ^
With the ^ operator, you can return your code to the previous layer. This method works well when you want to get back to the previous layer when you use > nested elements.

section>div>p>a^p this abbreviation places two paragraph elements inside the Div, but only the first paragraph contains a link. 
<section>    <div>        <p><a href= "" ></a></p>        <p></p>    </div></section>


In fact, this is equivalent to:

Section>div> (p>a) +p

Element-5

If you want to generate multiple identical elements at once, such as the Li in the list, you can use the multiplication operator *:

Ul>li*5 the above code will generate no Li:

<ul>    <li></li>    <li></li>    <li></li>    <li></li >    <li></li></ul>
element-5 In addition to generating multiple identical tags at once, we can also increment by the $ sign, and by [email protected] sign, and by [email protected]*5, we'll start with a third name: element-21 Combination in order to make more efficient use of nesting, we often make some code snippets. In Emmet you can combine a block by () to see a simple example:

Ul> (Li>a)

The code above generates 3 Li, and each Li is set up with a:

<ul>    <li><a href= "" ></a></li>    <li><a href= "" ></a></li >    <li><a href= "" ></a></li></ul>  

In one of our pages, we often include three parts of the page header, body, and footer, and many times we can quickly generate valid code by making a combination of all of them:

Element-6

Quickly add class names, IDs, text, and attributes
In Emmet, there is also an effect that can quickly help you add class names, IDs, text, and attributes. Use E#id to add ID name using E.class Add class name using E[attr] Add property using E{text} to add text

Element-22
Omitting a label signature
Tag names can be omitted in Emmet, and by default, such as. Item and Div.item play the same role
<div class= "Item" ></div>

In practice, there are several situations:

UL and ol in the input refers to Litable, Tbody, thead and tfoot refers to the trtr middle finger is tdselect and optgroup refers to the option

Element-23

Emmet and CSS

Property

CSS provides values for properties such as Font-size,margin and padding, and so on:

Element-1
Emmet defines all known CSS properties and abbreviations. So the border-bottom abbreviation is bdb,border-top abbreviation is BDT. As the following example font-size is FZ: Suppose you enter FZ in your editor, and then press the TAB key,
Emmet is like a magician. Turn the abbreviation into a valid CSS and place it at your cursor.

Element-13
Property value
Now that we have a look at the properties of the CSS, it just needs to add a value. This is done with a combination of abbreviations and required values. For example, FZ18 will output font-size:18px. You do not need to enter PX because the Emmet will be in PX.
If a project does not have a single unit (such as Font-weight), Emmet will be smart and he will not add pixel units.

Element-14
Unit
If you are in a pixel (PX) unit that is not used frequently in CSS, what would that be? Is EM, REM,%, ex and PX? Then these units can be used in Emmet. Every unit in Emmet has its abbreviation: px→ default P→%e→emr→remx→ex to use a single unit, you only need to use the abbreviated unit value after the value. The following example uses the EM definition font-size:

Element-15
Multiple units
Some of the genus trunk in CSS, such as margin, allow multiple values. To do this in Emmet, you only need to use dashes (-) between each value. Take a look at the following example to define the four values of margin for the body:

Element-16
Color
Use the # prefix in Emmet, followed by the color value, but the different characters will output different hexadecimal codes. Take a look at some examples: #1→#111111
#e0→#e0e0e0#fc0→#ffcc00 defines the color value of body as defined by c#2 and will output #222

Element-17
！ Important
Although!important is not often used in CSS, it also has a certain abbreviation in Emmet. Add! You can automatically generate:

Element-18
Multi-attribute
Now we have a basic understanding of Emmet CSS features, and it's time to put them together. is similar to the functionality of adjacent elements in Emmet and HTML. You can use the Plus + operator to create multiple properties. Let's look at a simple example

Element-19
Remember, you can use all abbreviations or separate them. This is not very important, the key is that you have to use it correctly, it makes it easier for you to write your CSS. Here's an animation that he creates some styles for Div.panel:

Summary Emmet is a powerful tool, also known as a high-speed coding tool that allows you to spend less time doing the same thing without having to create your own code snippets manually. Emmet is inspired by CSS selectors and can be used in all major text editors to adapt to the developer's workflow.

Keep in mind that you can add any new tools to your workflow, and this learning process is also a curve, but you don't spend more time doing the same things. You just need regular access to the Emmet documentation, and you'll be familiar with all the features of HTML and CSS in Emmet. Let you think less, write less, and implement more of the code you want.

http://docs.emmet.io/cheat-sheet/this site for specific usage show some examples are very good up!

Emmet (formerly Zen Coding)  Plug-in Installation

personally think that the direct download zencoding code package, put in this path , more simple

Package Https://github.com/sergeche/emmet-sublime#readme

Share a summary of the better shortcut keys used by the blog http://www.cnblogs.com/xiaowu/archive/2012/08/27/2658534.html

Accelerating web front-end development with Emmet (formerly Zen Coding)