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.
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 id="test"></p>
<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></p> <ul></ul> <p></p>
<p> <ul> <li></li> </ul> <p></p> </p>
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>
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>
<p> <ul> <li> <a href=""></a> <p> <p></p> </p> </li> </ul
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>
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>
<ul> <li class="test3"></li> <li class="test4"></li> <li class="test5"></li> </ul>
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>
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
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!