Heim > Artikel > Web-Frontend > 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.
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>
p>ul>li>p
<p> <ul> <li> <p></p> </li> </ul> </p>p+ul+p
<p></p> <ul></ul> <p></p>
<p> <ul> <li></li> </ul> <p></p> </p>
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 (() )
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
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 class="test1"></li> <li class="test2"></li> <li class="test3"></li> </ul>
Zum Beispiel: ul>li*3.test $ @3
<ul> <li class="test3"></li> <li class="test4"></li> <li class="test5"></li> </ul>
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
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
Das obige ist der detaillierte Inhalt vonUnbekannte Emmet-Grammatikregeln. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!