Syntax for generating HTML 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:5Or! Generating HTML5 structures
• html:xtGenerate HTML4 Transition Type
• html:4sGenerate 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:

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:

$cursor $

<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://blog.wpjam.com", the title "I Love Boiled fish" a tag, you can write:

a[href="http://blog.wpjam.com" 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:

$ 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:

Generate text content: {}

The above explains how to generate HTML tags, what about the content? Of course, you can also generate:

a[href="http://blog.wpjam.com"]{点击这里到 我爱水煮鱼}

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  

When you remove a space, you can execute the build structure normally.

Turn to self love Boiled fish Blog

Syntax for generating HTML using Emmet