Zen Coding in HTML

Nested operators

Nested operators are used to arrange the position of an element in the resulting document tree in an abbreviated manner: place it inside or as an adjacent element.

Child >

You can use the > operator to specify nested elements inside another element:

Div>ul>li

The resulting result is:

<div>    <ul>        <li></li>    </ul></div>

Brother: +

Use the + operator to process adjacent other elements as siblings:

Div+p+bq

The resulting result is:

<div></div><p></p><blockquote></blockquote>

Rise: ^

Using the > operator will reduce the level of all subsequent elements in the spanning tree, and sibling elements at each level are also parsed into elements of the same depth:

Div+div>p>span+em

will be generated:

<div></div><div>    <p><span></span><em></em></p></ Div>

Using ^ operators, you can raise the level of an element in the spanning tree and affect the elements that follow it:

Div+div>p>span+em^bq

will be generated:

<div></div><div>    <p><span></span><em></em></p>    <blockquote></blockquote></div>

You can use multiple ^ operators consecutively, one level at a time:

div+div>p>span+em^ ^^ BQ

will be generated:

<div></div><div>    <p><span></span><em></em></p></ Div><blockquote></blockquote>

Repeat: *

*You can use operators to define a set of elements:

Ul>li*5

will be generated:

<ul>    <li></li>    <li></li>    <li></li>    <li></li >    <li></li></ul>

Group: ()

Parentheses are used to process a group of subtrees in a complex Emmet abbreviation:

Div> (header>ul>li*2>a) +footer>p

will be generated:

<div>    
If you want to work with the browser DOM, you might want to group document fragments: Each group contains a subtree, and all subsequent elements are inserted at the same level as the first element in the group.
The ability to nest groups within a group and * bind them using operators:
(Div>dl> (DT+DD)) +footer>p
will be generated:
<div>    <dl>        <dt></dt>        <dd></dd>        <dt></dt>        <dd></dd>        <dt></dt>        <dd></dd>    </dl></div>< Footer>    <p></p></footer>
With grouping, you can use a single abbreviation to write down a whole page of labels, but try not to do so.
Property operators
The property operator is used to edit the properties of the generated element, and in HTML and XML you can quickly add attributes to the generated element class .
ID and CLASS
In CSS, you can use elem#id and elem.class annotate to specify for an element id or class 属性的目的。 in Emmet, you can use almost the same syntax to add These attributes for the specified element: element:
Div#header+div.page+div#footer.class1.class2.class3
Generated:
<div id= "header" ></div><div class= "page" ></div><div id= "footer" class= "Class1 Class2 Class3 "></div>
Custom properties
You can use [attr] annotations (just like in CSS) to add custom attributes to an element:
td[title= "Hello world!" colspan=3]
will be generated:
<TD title= "Hello world!" colspan= "3" ></td>
 
 

  
  
 
   
The ability to place many properties in square brackets,
 
   
You can not specify a value for the property: It td[colspan title] will be generated <td colspan="" title=""> , and if your editor supports it, you can use tab to skip to each empty attribute to fill in.
 
   
Attributes can be either single or double quotation marks as delimiters.
 
   
If the property does not contain a space, you do not need to enclose it in a delimiter: it td[title=hello colspan=3] is correct.
 
  
 
 
Number:$
You * can use operators to repeatedly generate elements that $ can be numbered if they are taken. Put $ in the element name, attribute name, or attribute value, the correct number is generated for each element:
Ul>li.item$*5
will be generated:
<ul>    <li class= "item1" ></li>    <li class= "item2" ></li>    <li class= " Item3 "></li>    <li class=" item4 "></li>    <li class=" ITEM5 "></li></ul >
Use multiple $ to populate the leading 0:
Ul>li.item$$$*5
will be generated:
<ul>    <li class= "item001" ></li>    <li class= "item002" ></li>    <li class= " item003 "></li>    <li class=" item004 "></li>    <li class=" item005 "></li></ Ul>
Change the cardinality and direction of a number
Use @ , you can change the direction of the number (ascending or descending) and cardinality (for example, the starting value).
In$ 后添加 @- 来改变数字走向：
Ul>[email protected]*5
will be generated:
<ul>    <li class= "ITEM5" ></li>    <li class= "item4" ></li>    <li class= " Item3 "></li>    <li class=" item2 "></li>    <li class=" Item1 "></li></ul >
In$ 后面添加 @N 改变编号的基数：
Ul>[email protected]*5
will be generated:
<ul>    <li class= "Item3" ></li>    <li class= "item4" ></li>    <li class= " ITEM5 "></li>    <li class=" Item6 "></li>    <li class=" Item7 "></li></ul>
These additional operators can be used at the same time:
Ul>[email protected]*5
will be generated:
<ul>    <li class= "Item7" ></li>    <li class= "Item6" ></li>    <li class= " ITEM5 "></li>    <li class=" item4 "></li>    <li class=" Item3 "></li></ul >
Text:{}
You can add text to an element with curly braces:
A{click Me}
will be generated:
<a href= "" >click me</a>
Note that this {text} is parsed as an independent element (similar to div , p ), but differs when it follows other elements. For example, a{click} and a>{click} produce the same output, a{click}+b{here} but a>{click}+b{here} the output is different:
<!--a{click}+b{here}--><a href= "" >click</a><b>here</b><!--A>{click}+b{here} --><a href= "" >click<b>here</b></a>
In the second example, the <b> element is placed <a> inside the element. The difference is as follows: When {text} written behind an element, it does not affect the context of the parent element. The following are more complex examples of the importance of this difference:
P>{click}+a{here}+{to continue}
Generated:
<p>click <a href= "" >here</a> to Continue</p>
In this example, we use the > operator to explicitly Click here to continue move down one level to the <p> element, but a not for the content of the element, because <a> only this part of the here content, it does not change the context of the parent element.
As a comparison, the following is the same abbreviation without the > operator:
P{click}+a{here}+{to continue}
Generated:
<p>click </p><a href= "" >here</a> to continue
Label Properties
Link[rel=prefetch title= "Hello World"]
Generated:
<link rel= "prefetch" href= "title=" Hello World ">
Abbreviations for formatting considerations
When you are familiar with Emmet's abbreviation syntax, you may want to use some formatting to generate more readable abbreviations. For example, use a space interval between an element and an operator:
(Header > Ul.nav > Li*5) + footer
However, this notation is incorrect because the space is an identifier that Emmet stop abbreviation parsing.
Ask multiple users to mistakenly assume that each abbreviation should be written on a new line, but they are wrong: You can type and expand abbreviations anywhere in the text.
(here in the original text using a script to do a sample, limited to the style of the blog, I have no way to put the original text of the sample script in this article, so the screenshot tool to record a screen, put here, interested friends, can go to the original address to see the original example)
This is why Emmet needs some flags when it wants to stop parsing and scaling. If you still think that a complex abbreviation requires some formatting to make it more readable:

 
 

  
  
 
   
Abbreviations are not template languages, they do not need to be "easy to read", they must be "fast to scale and move."
 
   
There is no need to write complex abbreviations. Do not assume that "typing" is the slowest operation in web programming. To quickly find out how to build a single complex abbreviation is slower than constructing and typing some shorter, simpler abbreviations.
 
  
 
 
Zen Coding in HTML