Unbekannte Emmet-Grammatikregeln

Dieser Artikel gibt Ihnen eine detaillierte Einführung in die grammatikalischen Regeln der HTML-Kurzschrift Emmet. Es hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen. Ich hoffe, es wird für alle hilfreich sein.

Emmet – Das Schreiben von HTML/CSS geht so schnell

Im Prozess der Frontend-Entwicklung ist das Schreiben von HTML- und CSS-Code die zeitaufwändigste Arbeit. Eine Menge Tags, Attribute, Klammern usw., die Kopfschmerzen bereiten. Hier wird eine Emmet-Grammatikregel empfohlen, mit der Sie sich beim Schreiben sehr wohl fühlen können. Sie müssen nur eine Codezeile eingeben, um die gewünschte vollständige HTML-Struktur zu generieren Benutze es.

Emmet ist ein Plug-in, das von jedem Editor verwendet werden kann, der es installieren kann. Die meisten Editoren können diese Grammatikregel verwenden. Wir entwickeln normalerweise Editoren wie Sublime Text, Eclipse, Notepad++, VS Code, Atom, Dreamweaver usw. Alle Geräte können genutzt werden.

Die Installationsmethode ist die gleiche wie bei der Installation von Plug-Ins. Die Installationsmethode für jeden Editor ist unterschiedlich. Bitte probieren Sie sie separat aus. 1: HTML-Anfangsstruktur Die Struktur im Bild unten, faule Leute werden sie einfach benutzen! => Tab-Lösung, die schnell die Grundstruktur generieren kann und verhindert, dass beim Schreiben von Hand ein bestimmter Codeblock vergessen und falscher Code eingegeben wird.

2: id (#), class (.)

id-Befehl: #; Klassenbefehl: .

p#test

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

p.test

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

3: sub Knoten (>), Geschwisterknoten (+), übergeordneter Knoten (^)

Befehl für untergeordneten Knoten:>; übergeordneter Knoten:^

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 (das ^ hier ist nach li verbunden, liegt also eine Ebene über li und ist mit ul, natürlich den beiden, ein Bruder geworden^^ sind die obere Ebene) Superior)

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

4: Wiederholen (*)

Wiederholungsbefehl: *

p*5 (fügen Sie nach dem * eine Zahl hinzu, um die Anzahl der wiederholten Elemente anzugeben)

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

5: Gruppe (() )

Gruppenanweisungen: ()

p>(ul>li>a)+p>p (Der Inhalt in den Klammern ist ein Codeblock, was bedeutet, dass er nichts zu tun hat tun mit der Verschachtelungsebene innerhalb und außerhalb der Klammern)

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

Erläuterung: Wenn es hier keine Klammern gibt, raten Sie, a+p, also ist p ein Bruder von a und wird in li eingefügt. Verstanden haha

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

• 
  6: Attribut ([attr]) – ID, Klasse, wie können wir Attribute weglassen?

Attributbefehl: []

a[href='###' name ='xiaoA '] (Füllen Sie die Form der Attribut-Schlüssel-Wert-Paare in eckige Klammern ein und trennen Sie sie durch Leerzeichen.)

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

###6: Zahl ($)

Nummerierungsbefehl: $

ul>li.test$ * 3 ($ steht für eine Ziffer und die *-Zahl danach steht für den Schritt von 1 bis zur eingegebenen Zahl)

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

Hinweis:

• A $ steht für eine Ziffer, $$ steht für zwei Ziffern und so weiter kann $(1),$$(01),$$$(001)

bilden. Wenn Sie die Startnummer anpassen möchten, verwenden Sie: $@+Nummer*Nummer

Zum Beispiel: ul>li*3.test $ @3

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

7: Text ({})
• 
  
Textbefehl: {}

ul>li.test$*3{Test$} ({Füllen Sie den Inhalt aus und können Sie ihn mit $ kombinieren Oh})

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

8: Implizites Tag

Dieses Tag hat keine Anweisungen, aber einige Tags können das übergeordnete Tag identifizieren, indem sie die Anweisung direkt eingeben, ohne das Eingabe-Tag zu verwenden.

Zum Beispiel: .test

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

Zum Beispiel: ul>.test$*3

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

Zum Beispiel: 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>

Warten...

Die Datenschutz-Tags lauten wie folgt:

li: Verwendung in ul und ol

tr: verwendet in table, tbody, thead und tfoot

td: verwendet in tr

• option: verwendet in select und optgroup
• Empfohlenes Lernen:
• html-Video-Tutorial

Das obige ist der detaillierte Inhalt vonUnbekannte Emmet-Grammatikregeln. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!