Emmet, früher bekannt als Zen Coding, ist eines der besten Tools, die Sie benötigen sollten, um Ihre Produktivität beim Codieren von HTML oder CSS zu steigern. Es funktioniert genauso wie das Vervollständigen von Code, aber es ist leistungsfähiger und erstaunlicher. Es ist in der Lage, HTML / CSS von einem einfachen Formular zum komplexen zu automatisieren.
Emmet bietet eine gute Unterstützung für Texteditor oder IDE (Integrated Development Environment) wie Dreamweaver, Eclipse, Sublime Text, TextMate, Expresso, Coda, Brackets, Notepad ++, PHPStorm und viele mehr. Es unterstützt auch Online-Bearbeitungstools wie JSFiddle, JSBin, CodePen, IceCoder und Codio .
Die Arbeitsweise von Emmet besteht darin, die Tabulatortastatur einzugeben, wenn Sie die Syntax geschrieben haben. Im Folgenden finden Sie die häufigsten Emmet-Symbole, die Sie verwenden können. Um sie in Aktion zu sehen, lesen Sie bitte weiter.
Emmet - Beste HTML-Tricks
Sie werden erstaunt sein, wenn Sie mit Emmet HTML-Code schreiben wie ich. Wie bereits erwähnt, ist Emmet in der Lage, einen einfachen HTML-Code zu einem sehr komplexen zu verkürzen. Und sie werden nur in einer einzigen Codezeile geschrieben. Wenn Sie den Namen eines unbekannten Tags abkürzen, schreibt Emmet automatisch das von Ihnen geschriebene Tag. Sehen Sie sich die Animation unten an, um es leicht zu verstehen.
1. Verschachtelung
Um einige Elemente zu verschachteln, müssen Sie nach jedem Tag, den Sie verwenden möchten, nur größere Zeichen hinzufügen. Wenn ich zum Beispiel einen header mit nav, div, ul und li haben möchte, muss ich einfach header>nav>div>ul>li und die Treffer-Tabulatortaste eingeben.
2. Geschwister
Wenn Sie Ihre Elemente nicht verschachteln möchten, können Sie einfach ein Pluszeichen gefolgt von den hinzuzufügenden Tags verwenden. Beispielsweise geben die header+section+article+footer eine andere Position für header, section, article und footer .
3. Aufsteigen
Wenn Sie sich in einem untergeordneten Element befinden und ein anderes Element außerhalb dieses untergeordneten Elements haben möchten, können Sie problemlos ein Element mit dem Zeichen ^ oben klettern. Wenn Sie es zweimal eingeben, klettern Sie doppeltes Element und so weiter. Wenn Sie beispielsweise header>div>h1>nav eingeben, befindet sich das Element nav noch in h1. Um es herauszuholen, ersetzen Sie einfach das letzte Zeichen mit ^ .
4. Klasse hinzufügen
Emmet kann auch Ihren bevorzugten Klassennamen in das Tag aufnehmen. Das von Ihnen verwendete Zeichen ist das gleiche wie der Klassenselektor in CSS, der ein Punkt ist . Zeichen. Wenn ich zum Beispiel ein div mit .container Klasse haben .container, h1 mit .title und nav mit .fixed, dann muss ich nur div.container>header>h1.title+nav.fixed .
Wenn Sie mehr als eine Klasse haben möchten, geben Sie Ihre zusätzliche Klasse nach der ersten Klasse zusammen mit dem Punkt ein . Zeichen. Beispiel: div.container.center produziert .
5. ID hinzufügen
Neben dem Unterricht können Sie auch eine ID mit # -Zeichen in Ihr Tag einfügen. Die Verwendung ist dieselbe wie beim Hinzufügen einer Klasse, aber Sie dürfen keine doppelte ID eingeben. Wenn Sie dies versuchen, liest Emmet nur die letzte von Ihnen eingegebene ID.
6. Text hinzufügen
Emmet ist nicht nur so einfach, da nur einige Tags abgekürzt werden, Sie können sogar eine Zeile Text hinzufügen. Um etwas Text hinzuzufügen, müssen Sie den Text nur mit geschweiften Klammern {} umschließen. Sie müssen kein größeres Zeichen hinzufügen, da der Text automatisch in das Tag eingefügt wird.
7. Attribut hinzufügen
Wenn Sie ein anderes Attribut neben Klasse und ID hinzufügen möchten, platzieren Sie das Attribut, das Sie hinzufügen möchten, innerhalb des Klammerzeichens [] . Zum Beispiel möchte ich ein Bild haben, das die Quelle logo.png mit dem Logo alt hat. Ich gebe also einfach img[src="logo.png"] .
8. Gruppierung
Wenn Sie ein Element mit mehreren verschachtelten Elementen haben möchten, können Sie dies durch das Gruppieren mit dem () Zeichen leichter erreichen. Zum Beispiel möchte ich einen Container haben, der einen Header mit h1 und einem nav innerhalb und einen anderen Abschnitt außerhalb des Headers hat. Ich schreibe einfach: .container>(header>h1+nav.fixed)+(section>.content+.sidebar) .
9. Multiplikation
Diese Funktion wird möglicherweise zu einem Ihrer Favoriten von Emmet. Wie bei der Multiplikation können wir jedes Element beliebig multiplizieren. Um es zu verwenden, fügen Sie einfach ein Sternchen * nach dem Element hinzu, das Sie multiplizieren möchten, und fügen Sie die Nummer des Elements hinzu. Zum Beispiel möchte ich fünf li-Elemente in ul schreiben, dann lautet die richtige Syntax: ul>li*5 .
10. Automatische Nummerierung
Durch die automatische Nummerierung können Sie mit zunehmender Nummer leicht einen anderen Namen schreiben. Die richtige Syntax für diese Funktion ist ein Dollarzeichen. Die automatische Nummerierung wird am besten für die Multiplikation verwendet. Beispiel: Ich möchte meinen vorherigen Artikel mit einer Klasse von item1 zu item5 item1 item5 . Also muss ich nur noch einen Klassennamen mit Dollarzeichen hinzufügen: ul>li.item$*5 .
11. Lorem
Wenn Sie früher einen Dummy-Text geschrieben haben, indem Sie den Lipsum-Generator wie lipsum.com öffnen, müssen Sie dies bei Emmet nicht mehr tun. Emmet unterstützt auch einen Dummy-Textgenerator mit lorem oder lipsum Syntax. Sie können auch angeben, wie lang Ihr Text werden soll. Zum Beispiel möchte ich Text mit 10 Wörtern lang haben, dann lorem10 ich lorem10 .
12. Auto Dokument
Wenn Sie ein neues Projekt starten, müssen Sie die HTML-Struktur nicht manuell schreiben oder das Einfügen aus anderen Ressourcen kopieren. Emmet kann dies besser für Sie tun. Sie müssen nur ein Ausrufezeichen eingeben ! unterschreiben, Tab drücken und die Magie passiert. Dadurch wird eine HTML5-Dokumentstruktur für Sie erstellt. Wenn Sie stattdessen HTML4 verwenden möchten, geben Sie einfach html:4t .
13. Link
Wenn Sie ein Favicon, eine RSS-Datei oder eine externe CSS-Datei haben, die Sie Ihrem Dokument hinzufügen möchten, können Sie sie mithilfe von Link-Tricks schneller schreiben. Um ein Favicon einzuschließen, geben Sie link:favicon Anschließend wird ein Favicon-Link mit dem Standardnamen favicon.ico erstellt. Für css generiert link:css einen CSS-Link mit dem standardmäßigen style.css . RSS wird als Standardname rss.xml .
Sie können sie mit Pluszeichen kombinieren, um schnellere Ressourcen zu generieren.
14. Anker
Wenn Sie a Tag eingeben und dann auf die Registerkarte klicken, wird standardmäßig a Tag mit dem Attribut href angezeigt. Sie können jedoch einen // Wert hinzufügen, wenn Sie ihn mit einem Link verknüpfen, beispielsweise mit a:link . Und wenn Sie stattdessen einen E-Mail-Link haben möchten, verwenden Sie eine E- a:mail .
15. Intelligentes Überspringen
Die letzten HTML-Tricks, die ich Ihnen geben werde, sind die Funktion zum intelligenten Überspringen. Grundsätzlich haben Sie den Tag-Namen nicht geschrieben, wenn Sie Klasse oder ID enthalten möchten. Dies gilt nur unter bestimmten Voraussetzungen.
Erstens, wenn Sie ein div mit ID oder Klasse haben möchten, müssen Sie den Tag-Namen nicht schreiben, sondern schreiben Sie nur die ID oder das Klassensymbol zusammen mit dem Namen.
Zweitens, wenn Sie sich in einem ul Tag befinden, überspringen Sie das Schreiben des li Tags, wenn es eine Klasse oder eine ID hat.
Und das letzte wird innerhalb eines table Tags angewendet. Sie können das Schreiben des Tags tr und td überspringen, wenn sie über eine Klasse oder eine ID verfügen. Emmet fügt sie automatisch für Sie hinzu.
Emmet - Beste CSS-Tricks
Nachdem Sie einige HTML-Tricks kennengelernt haben, ist es jetzt an der Zeit für CSS. Einige der im oberen Bild dargestellten allgemeinen Symbole funktionieren nicht mit CSS. Sie sind größer und klettern auf Symbole. Wenn Sie sie verwenden, produzieren sie genau wie das Plus + Symbol. Also los geht's.
1. Breite und Höhe
Das Definieren von width und height mit Emmet ist sehr einfach. Sie müssen nur das erste Wort von ihnen schreiben, gefolgt von der Größe, die Sie hinzufügen möchten. Wenn Sie die Einheiten nicht angeben, generiert Emmet diese standardmäßig mit der Einheit px . Das verfügbare Einheitssymbol ist Prozent und em .
2. Text
Es gibt einige einfach zu verwendende Texteigenschaftssymbole, die mit einem Standardwert generiert werden. ta erzeugt text-align mit left Wert, td wird text-decoration mit none Wert und tt wird zu text-transform mit uppercase .
3. Hintergrund
Um Hintergrund hinzuzufügen, verwenden Sie einfach die Abkürzung bg . Sie können es mit bgi kombinieren, um background-image zu erhalten, bgc für background-color und bgr für background-repeat . Sie können auch bg+ schreiben, um eine vollständige Liste der Hintergrundeigenschaften zu erhalten.
4. Schriftart
Das Pluszeichen gilt nicht nur für den Hintergrund. Für @font-face können Sie einfach @f+ für eine vollständige Liste der @font-face Eigenschaft schreiben. Wenn Sie @f ohne Pluszeichen @f, wird nur ein einfaches @font-face @f .
5. Sonstiges
Andere großartige Tricks sind die Abkürzung für das Schreiben von animation mit animation Text. Wenn Sie ein Minuszeichen hinzufügen, erhalten Sie eine Animationseigenschaft mit vollem Wert. Es gibt auch @kf Text, der eine vollständige Liste von @keyframe .
Fazit
Emmet ist ein enormes zeitsparendes Werkzeug zur Optimierung Ihres Entwicklungsprozesses. Wenn Sie nur Emmet kennen, ist es nicht zu spät, es jetzt zu versuchen. Diese Tricks sind nur einige der Funktionen von Emmet. Es gibt viele andere Symbole und Syntax in Emmet, insbesondere für CSS. Gehen Sie einfach zu Emmet-Dokumenten oder -Beschreibungsblättern, um das Lesen zu erleichtern.
