We’ve all used Emmet, a quick grammar generation aid. Type div and then use Tab to generate the corresponding

tag pair, which saves us a lot of time to output the corresponding HTML tag content.

So it’s such a nice tool, I was thinking what if I wrote an implementation myself?

First we have to look at the sketchThe general rule.

1. Basic rules direct label text

For example, using div, SPAN, ul, li, etc., you can generate tag pairs directly

General selector instruction# .

Span. User-info

3. Node instruction, where there are children>Brother,+And the superior^

The superior concept is not present in CSS selectors, but is extended in Emmet. Direct demonstration

1. Div +span generates two adjacent nodes<div><div/>
<span></span>Div >span generates parent-child nested nodes<div>
    <span></span>
<div/>Div >span^ul generates sibling nodes of span<div>
    <span></span>
<div/>
<ul></ul>
Copy the code
4. The attribute[attr]

Property selectors are labeled div by default, just like normal selectors, but are usually accompanied by 1. [key=value] format, where the value is enclosed in quotes if there is an escape or a space. Support ‘and”

1. a[href="JavaScript:void(0)"]  
<a href="JavaScript:void(0)"></a>

2. span[name=see]
<span name="see"></span>
Copy the code
5. Repeat the current element* the number
Ul > Li *5 Generates UL and five LI child nodes<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>
Copy the code
Group 6.(a)

Grouping is also very simple, indicating that the current is a combination of labels, mainly interact with 3

Div >span+div<div>
    <span></span>
    <div></div>
</div>2. After grouping (div>span)+div, consider div>span as a whole and interact with +<div>
    <span></span>
</div>
<div></div>
Copy the code
7. Number placeholders$

The digit occupies the numbered bit for the numbered booth of the repeating element, and 5. To generate interaction, one $represents starting with one (1), two $$represents starting with two (01), and so on. @ indicates where the table begins, and @3 indicates where the table begins

1. ul>li.class$*3

<ul>
    <li class="class1"></li>
    <li class="class2"></li>
    <li class="class3"></li>
</ul>

2. ul>li.class$$*3
<ul>
    <li class="class01"></li>
    <li class="class02"></li>
    <li class="class03"></li>
</ul>Ul >li.class$$@2*3<ul>
    <li class="class02"></li>
    <li class="class03"></li>
    <li class="class04"></li>
</ul>
Copy the code
8. Text placeholdersText {}

Text placeholders can quickly fill text between labels and can be used in conjunction with 7

Ul >li.class$@2*3{this is the first $@6}<ul>
    <li class="class2">This is number six</li>
    <li class="class3">This is number seven</li>
    <li class="class4">This is number eight</li>
</ul>

Copy the code
9. Implicit labels

In general, the default tag for an element is div, but under some nesting, the tag can change depending on the parent element

  • ol,ulThe default sub-label ofli
ol>.name*2

<ol>
    <li class="name"></li>
    <li class="name"></li>
</ol>
Copy the code
  • table,tbody,thead,tfootThe default sub-label oftr
table>.row

<table>
    <tr class="row"></tr>
</table>
Copy the code
  • trThe default sub-label oftd
tr>.col

<tr>
    <td class="col"></td>
</tr>
Copy the code

* The default sublabel of select and optGroup is option

select>optgroup>.car

<select name="" id="">
    <optgroup>
        <option class="car"></option>
    </optgroup>
</select>
Copy the code

For some other cases

There are also some abbreviations that need to be known under the basic rules for tags, such as the input series


input  <input />
input:p <input type="password"/>
input:t <input type="text"/>
input:f <input type="file"/>
input:h <input type="hidden"/>
input:c <input type="checkbox"/>
input:r <input type="radio"/>
input:b <input type="button"/>
input:i <input type="image"/>
input:s <input type="submit"/>
Copy the code

We don’t need to see more, because the daily rules that meet the requirements are all here, the smallest units of the rules, and the rest are just extensions of the rules that we don’t need to worry about.

Do an Emmet[HTML sketch]