Implementation of Emmet syntax rules for HTML shorthand

Time:2021-10-10

In the process of front-end development, the most time-consuming work is to write HTML and CSS code. A pile of labels, attributes, parentheses, etc. are a headache. Here we recommend an Emmet syntax rule, which makes you fly when writing, and can greatly improve code writing. You can generate the complete HTML structure you want by typing one line of code. The following will introduce how to use it.

Emmet is a plug-in. It can be used as long as its editor can be installed. Most editors can use this syntax rule, which we usually developSublime TextEclipseNotepad++VS codeAtomDreamweaverAnd other editors can be used.

The installation method is the same as the usual plug-in installation. Search for the Emmet plug-in installation. The installation method of each editor is different. Please try it separately

Let’s start with an example:

这里写图片描述

How long do you need to type this ordinary HTML structure?
I just needA few seconds, write the following sentence and press the keyboardTabClick to see the structure in the figure above

Div #box > p.title + UL. List > Li. Child ${I'm the $} * 3 ^ div #box2

Isn’t it cool? Soon ~ ~ ah ~ ah ~, a complex HTML structure is generated in just one line of code, and the ID, class and content correspond to each other

Let’s start with grammar

1: HTML initial structure

For the structure in the figure below, lazy people will directly one! = > Tab solution, which can quickly generate the basic structure and prevent forgetting a code block and entering wrong code when handwriting.

这里写图片描述

2:id(#),class(.)

ID instruction: #; Class Directive:

div#test


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

div.test


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

3: Child node (>), brother node (+), parent node (^)

Child node instruction: >; Sibling node instruction: +; 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(here)^It’s connected toliSo in the backliThe upper level of, andulBecome a brotherhood, of course, two ^ ^ are superior)


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

4: Repeat (*)

Repeat command:*

div*5(*The number added after the number indicates the number of duplicate elements


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

5: Group ()

Group instruction: ()

div>(ul>li>a)+div>p
The content in the brackets is a code block, which indicates that it has nothing to do with the nesting inside and outside 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+divIn this way, div and a are brothers and will be included in Li. See? Ha ha


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

6: Attribute ([attr]) – ID and class. How can we lack attributes

Attribute Directive: []

a[href=’###’ name=‘xiaoA’] (The form of attribute key value pairs shall be filled in brackets and separated by spaces


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

###6: Number ($)
Instruction number:$

ul>li.test$*3 ($represents a single digit, followed by * represents an increment from 1 to the filled number


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

be careful

A $represents a single digit, and $$is a double digit, and so on to form $(1), $$(01), $$$(001)

If you want to customize the increment from a few, use: [email protected] + number * number
For example: UL > Li * 3.test [email protected] 3


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

7: Text ({})

Text instruction: {}

UL > Li. Test $* 3 {test $}({fill in the content, which can be combined with $}

<ul>
  < Li class = "test1" > Test 1</li>
  < Li class = "test2" > Test 2</li>
  < Li class = "test3" > Test 3</li>
</ul>

8: Implicit label

This tag has no instructions, but some tags can directly enter instructions without using the input tag to identify the parent tag.

For example:.test


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

For example:ul>.test$*3


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

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
Privacy labels are as follows:

  • Li: used in UL and ol
  • Tr: used in table, tbody, thead, and tFoot
  • TD: used in tr
  • Option: used in select and optgroup

Finally:It’s useless to see. Operate it several times, and you can master these instructions in a few minutes, and then roll the code quickly

This is the end of this article on the implementation of Emmet syntax rules for HTML shorthand. For more relevant HTML Emmet syntax content, please search the previous articles of developeppaer or continue to browse the relevant articles below. I hope you will support developeppaer in the future!