Heim  >  Artikel  >  Web-Frontend  >  Unbekannte Emmet-Grammatikregeln

Unbekannte Emmet-Grammatikregeln

醉折花枝作酒筹
醉折花枝作酒筹nach vorne
2021-04-14 11:21:191968Durchsuche

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.

Unbekannte Emmet-Grammatikregeln

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 (.)


Unbekannte Emmet-Grammatikregelnid-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!

Stellungnahme:
Dieser Artikel ist reproduziert unter:csdn.net. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen