Emmet grammar rules for HTML sketch

Emmet grammar rules for HTML sketch

Emmet - Write HTML/CSS so fast

In the process of front-end development, the most time-consuming work is to write HTML and CSS codes. A bunch of tags, attributes, brackets, etc., a headache. Here I recommend an Emmet grammar rule, which will make you feel refreshed when writing, and can greatly improve code writing. You only need to type one line of code to generate the complete HTML structure you want. The following will introduce how to use it.

Let's start with an example:

How long does it take you to type this ordinary HTML structure?
It only takes me a few seconds to write the following statement and press the keyboard Tabkey to see the structure in the above picture

div#box>p.title+ul.list>li.child${我是第$个}*3^div#box2

Isn’t it cool, soon~~ah~ ah~, just one line of code generates a complex HTML structure, and the id, class, and content are all corresponding

Let's start with grammar

1: HTML initial skeleton structure

For the structure in the picture below, those who are lazy will directly use one! => Tab is solved, so that the basic structure can be quickly generated, and at the same time, it is prevented from forgetting a certain code block and entering the wrong code when writing by hand.

2：id（#）,class（.）

id指令: # ; class指令: .

div#test

<div id="test"></div>

div.test

<div class="test"></div>

3: child node (>), sibling node (+), parent node (^)

子节点指令:> ; 兄弟节点指令:+ ; 上级节点:^

div>ul>li>p

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

div+ul+p

<div></div>
<ul></ul>
<p></p>

div>ul>li^div (the one here ^{is connected behind li, so it is at the upper level of li, and has become a brother relationship with ul, of course, the two} ^ are the upper level)

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

4: Repeat (*)

重复指令：*

div*5 (add numbers after the * number to indicate the number of repeated elements)

   <div></div>
   <div></div>
   <div></div>
   <div></div>
   <div></div>

5: Grouping (())

分组指令：()

div>(ul>li>a)+div>p
(the content inside the brackets is a code block, indicating that it has nothing to do with the inner nesting and outer levels of the brackets)

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

Explanation: If you don’t add parentheses here, guess, a+div, so div is a brother relationship with a, and it will be included in li. got it haha

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

6: Attribute ([attr])——id, class have both, how can attribute be missing?

属性指令：[]

a[href='###' name='xiaoA'] (fill in the form of attribute key-value pairs in square brackets, and separate them with spaces)

<a href="###" name="xiaoA"></a>

7: number ($)

编号指令：$

ul>li.test$\ast 3($ represents a single digit, and the number * on the back represents the number incremented from 1 to fill in)

 <ul>
   <li class="test1"></li>
   <li class="test2"></li>
   <li class="test3"></li>
 </ul>

Notice:

What should I do if I want to implement the format of 00x?

Multiple $ can be written consecutively to generate a leading number

ul>li.item$$$*5

Expressed as:

<ul>
    <li class="item001"></li>
    <li class="item002"></li>
    <li class="item003"></li>
    <li class="item004"></li>
    <li class="item005"></li>
</ul>

What if I want to achieve descending order?

Using the @ modifier, you can change the direction and starting point of the numbering

ul>li.item$@-*5

In theory, it should behave as:

<ul>
    <li class="item5"></li>
    <li class="item4"></li>
    <li class="item3"></li>
    <li class="item2"></li>
    <li class="item1"></li>
</ul>

If you want to change the starting point instead of starting from 1, you can use @N after $

ul>li.item$@3*5

Expressed as:

<ul>
    <li class="item3"></li>
    <li class="item4"></li>
    <li class="item5"></li>
    <li class="item6"></li>
    <li class="item7"></li>
</ul>

Of course, you can also mix multiple modifiers

ul>li.item$@-3*5

Theoretical performance:

<ul>
    <li class="item7"></li>
    <li class="item6"></li>
    <li class="item5"></li>
    <li class="item4"></li>
    <li class="item3"></li>
</ul>

If you want to customize the number from which to increment, use: $@+number\ast Numeric\; example:ul>li.test$@3*3

 <ul>
   <li class="test3"></li>
   <li class="test4"></li>
   <li class="test5"></li>
 </ul>

8: text ({})

文本指令：{}

ul>li.test KaTeX parse error: Expected '}', got 'EOF' at end of input: *3{Test } ({fill in the content, you can use it together with $})

<ul>
  <li class="test1">测试1</li>
  <li class="test2">测试2</li>
  <li class="test3">测试3</li>
</ul>

9: Implicit label

This tag has no instructions, but some tags can recognize the parent tag by directly inputting instructions without using the input tag.

Default div example:.test

li: Can be used in ul and ol For example: ul>.test$*3

 <ul>
   <li class="test1"></li>
   <li class="test2"></li>
   <li class="test3"></li>
 </ul>

option: can be used in select For example: select>.test$*5

<select name="" id="">
  <option class="test1"></option>
  <option class="test2"></option>
  <option class="test3"></option>
  <option class="test4"></option>
  <option class="test5"></option>
</select>

wait~~~

tr: can be used in table, tbody, thead and tfoot
td: can be used in tr
The last thing is: it is useless, operate it a few times, you can master these instructions in a few minutes, and then quickly code