Unknown Emmet Grammar Rules

This article will give you a detailed introduction to the grammatical rules of HTML shorthand Emmet. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to everyone.

#Emmet—Writing HTML/CSS is so fast

In the process of front-end development, the most time-consuming work is writing HTML and CSS code. A bunch of tags, attributes, brackets, etc., which is a headache. Here is an Emmet grammar rule recommended, which will make you feel super happy when writing. It can greatly improve your 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.

Emmet is a plug-in that can be used by any editor that can install it. Most editors can use this grammar rule. We usually develop Sublime Text, Eclipse, Notepad, VS code, Atom, Dreamweaver and other editors can be used.

The installation method is the same as usual installation of plug-ins. Search for this emmet plug-in installation. Each editor has different installation methods. Please try each one.

1: html initial structure

With the structure in the picture below, anyone who is lazy will just follow it! => Tab solution, which can quickly generate the basic structure and prevent forgetting a certain code block and entering wrong code when writing by hand.

2: id（#）,class（.）

id command:#; class command:.

• p#test

<p id="test"></p>

• p.test

<p class="test"></p>

3: Child node (>), sibling node ( ), superior Node (^)

Child node command:> ; Sibling node command: ; Superior node:^

• p>ul>li>p

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

• p ul p

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

• p>ul>li^p (The ^ here is connected after li, so it is one level above li, and ul They have become brothers, of course the two ^^ are superiors)

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

4: Repeat (*)

Repeat command: *

• p*5 (Add a number after the * sign to indicate the number of repeated elements)

   <p></p>
   <p></p>
   <p></p>
   <p></p>
   <p></p>

5: Grouping (())

Grouping instructions: ()

##p>(ul>li>a) p>p
• (The content inside the brackets is a code block, indicating the level of nesting inside and outside the brackets Unrelated)
  

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

Copy after login

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

6: Attribute ([attr]) - id, class, how can I miss the attribute?

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>

6: Number ($)

ul>li.test$*3 ($ represents one digit, and the * number after it represents increasing from 1 to the number filled in)

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

A $ represents one digit, $$ is a two-digit number, and so on to form $(1 ),$$(01),$$$(001)
• 
  If you want to customize the number from which to increment, use: $@ number*number
For example: ul>li*3.test$ @3

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

ul>li.test $*3{Test$} ({Fill in the content inside, it can be combined with $})

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

<p class="test"></p>

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

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

• li: used in ul and ol
• tr: used in table, tbody, thead and tfoot
td: used in tr
• option: used in select and optgroup

Recommended learning: html video tutorial

The above is the detailed content of Unknown Emmet Grammar Rules. For more information, please follow other related articles on the PHP Chinese website!