Emmet: Quick compilation of HTML/CSS code artifacts

Emmet: Quick compilation of HTML/CSS code artifacts

The predecessor of Emmet is the famous Zen coding. If you are engaged in Web Front-end development, you will not be unfamiliar with this plug-in. It uses the syntax similar to the CSS selector to generate code, greatly improving the speed of HTML/CSS code writing, as shown in the following Demonstration:

Demo of encoding in Zen coding

The plug-in was renamed Emmet at the end of last year. However, Emmet not only changed its name, but also brought some new features. This article will give you an intuitive demonstration.

I. Quick coding of HTML code

1. Initialization

HTML documents must contain some fixed tags, such as

• Html: 5 or! : Used for HTML5 document types
• Html: xt: used for XHTML transition document type
• Html: 4 s: For HTML4 strict Document Type

2. easy addition of classes, IDs, text, and attributes

Enter the element name and ID consecutively. Emmet will automatically complete the request for you. For example, enter p # foo:

Consecutive input classes and IDs, such as p. bar # foo, are automatically generated:

<P class = "bar" id = "foo"> </p>

The following describes how to define the content and attributes of HTML elements. You can enter h1 {foo} and a [href = #] to automatically generate the following code:

<H1> foo <A href = "#"> </a>

3. nesting

Now you only need one line of code to implement tag nesting.

• >: Child element symbol, indicating nested Elements
• +: Same-level label symbol
• ^: The label before the symbol can be upgraded to a row

Shows the effect:

4. Group

You can use nesting and parentheses to quickly generate some code blocks, such as input (. foo> h1) + (. bar> h2). The following code is automatically generated:

<Div class = "foo">
<H1> </Div>
<Div class = "bar">
<H2> </Div>

5. Implicit tag

Declare a label with a class. You only need to input div. item to generate <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.

The following are all implicit tag names:

• 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 * 3 can generate the following code:

<Ul>
<Li> </li>
<Li> </li>
<Li> </li>
</Ul>

7. Define multiple elements with attributes

If ul> li. item $ * 3 is entered, the following code is generated:

<Ul>
<Li class = "item1"> </li>
<Li class = "item2"> </li>
<Li class = "item3"> </li>
</Ul>

For more details, please continue to read the highlights on the next page:

1 2 3 Next Page