Règles de grammaire Emmet inconnues

Cet article vous donnera une introduction détaillée aux règles grammaticales du raccourci HTML Emmet. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il sera utile à tout le monde.

Emmet—L'écriture HTML/CSS est si rapide

Dans le processus de développement front-end, le travail le plus long est l'écriture HTML et CSS code. Un tas de balises, d'attributs, de parenthèses, etc., ce qui est un casse-tête. Voici une règle de grammaire Emmet recommandée, qui vous rendra très heureux lors de l'écriture. Elle peut grandement améliorer l'écriture de votre code. Vous n'avez besoin que de taper une seule ligne de code pour générer la structure HTML complète souhaitée. utilisez-le.

Emmet est un plug-in qui peut être utilisé par n'importe quel éditeur pouvant l'installer. La plupart des éditeurs peuvent utiliser cette règle de grammaire. Nous développons généralement Sublime Text, Eclipse, Notepad++, VS code, Atom, Dreamweaver et autres. des éditeurs peuvent être utilisés.

La méthode d'installation est la même que l'installation habituelle du plug-in. Recherchez ce plug-in emmet à installer. Chaque éditeur a des méthodes d'installation différentes

. 1 : structure initiale html

Avec la structure de l'image ci-dessous, tous les paresseux n'auront qu'à la suivre ! => Solution de tabulation, qui peut générer rapidement la structure de base et éviter d'oublier un certain bloc de code et de saisir un mauvais code lors de l'écriture manuelle.

2 : id (#), classe (.)

commande id : # commande de classe : .

• p#test

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

• p.test

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

3 : Nœud enfant (>), nœud frère (+), Nœud supérieur (^)

Commande du nœud enfant :>; Commande du nœud frère :+;

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

• p+ul+p

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

• p>ul>li^p (le ^ ici est après li donc c'est le précédent de li Niveau, devenu frères avec ul, bien sur les deux ^^ sont supérieurs)

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

• 4 : Répéter (*)

Répéter la commande : *

p*5 (ajouter un chiffre après le signe * pour indiquer le nombre d'éléments répétés)

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

• 5 : Regroupement (())

Instructions de groupe : ()

p>(ul>li>a)+p>p

(Le contenu entre crochets est un bloc de code, indiquant l'imbrication dans le parenthèses Cela n'a rien à voir avec le niveau externe)

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

• Explication : S'il n'y a pas de parenthèses ici, devinez, a+p, donc p est un frère de a, et sera inclus dans li . Compris, hahahaha
  

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

6 : Attribut ([attr]) - identifiant, classe, comment des attributs peuvent-ils manquer

Commande d'attribut : []

a[href='###' name='xiaoA'] (Remplissez le formulaire de paires clé-valeur d'attribut entre crochets et séparez-les par des espaces)

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

###6 : Nombre ($)
• Commande de numérotation : $

ul>li.test$*3 ($ représente un chiffre, et le * nombre après celui-ci représente une augmentation de 1 au numéro renseigné)

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

Remarque :

Un $ représente un chiffre, $$ est un nombre à deux chiffres, et ainsi de suite pour former $(1 ),$$(01),$$$(001)

Si vous souhaitez personnaliser le nombre à partir duquel incrémenter, utilisez : $@+number*number

Par exemple : ul>li* 3.test $@3

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

• 
  7 : Texte({})

Commande Texte : {}

ul> ;li. test$*3{Test$} ({Remplissez le contenu, il peut être combiné avec $})

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

• 8 : Balise implicite

Cette balise n'a pas d'instructions, mais certaines balises peuvent reconnaître la balise parent en saisissant directement l'instruction sans utiliser la balise d'entrée. Par exemple : .test

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

Par exemple : ul>.test$*3

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

Par exemple : 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>

etc. Attendez...

Les balises de confidentialité sont les suivantes :

li : utilisé dans ul et ol

tr : utilisé dans table, tbody, thead et tfoot

• td : utilisé dans tr
• option : utilisée dans select et optgroup
• Apprentissage recommandé :
• tutoriel vidéo html

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!