Zen Coding Einfaches und schnelles HTML-Schreiben
|
Zen-Codierung Es ist ein Texteditor-Plugin. In einem Texteditor mit Zen Coding können Sie mit Kurzcodes normale HTML-Codes schreiben. Dieses Tool vereinfacht das Schreiben von HTML erheblich. Beispielsweise der folgende HTML-Code: Code kopieren Der Code lautet wie folgt:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de"> <Kopf> <Titel></Titel> <meta http-equiv="Inhaltstyp" content="text/html;charset=UTF-8" /> </Kopf> <Text> <div id="Kopfzeile"> <div id="logo"></div> <ul id="nav"> <li class="item-1"><a href=""></a></li> <li class="item-2"><a href=""></a></li> <li class="item-3"><a href=""></a></li> <li class="item-4"><a href=""></a></li> <li class="item-5"><a href=""></a></li> </ul> </div> </body> </html> Mit Zen Coding ist es nur eine Zeile: Code kopieren Der Code lautet wie folgt:html:xt>div#header>div#logo+ul#nav>li.item-$*5>a Hier ist die Online-DEMO (Wenn die Tastenkombinationen nicht funktionieren, prüfen Sie bitte, ob es mögliche Tastenkombinationskonflikte gibt. Beispielsweise belegt die Sogou-Eingabemethode „Strg+,“) Die Abkürzungsregeln von Zen Coding ähneln etwas den CSS-Selektoren:
Weitere HauptfunktionenStandard außer HTML /XML/XSL/ CSS Neben der Abkürzung HAML bietet Zen Coding noch einige weitere Funktionen , die das Schreiben von Code erleichtern. . Kurzpaket (Mit Abkürzung umschließen). Geben Sie je nach Cursorposition bzw. Textauswahl das Codekürzel ein, um den gewünschten Endcode zu erhalten. Code kopieren Der Code lautet wie folgt:Du betrittst den Raum Mit dem Bleistift in der Hand Du siehst jemanden nackt Und Sie sagen: „Wer ist dieser Mann?“ Du gibst dir so viel Mühe Aber du verstehst nicht Genau das, was du sagen wirst Wenn du nach Hause kommst Denn hier tut sich was Aber du weißt nicht, was es ist Tun Sie das, Herr Jones? Der obige Text wird mit „ul>li*>span“ umschlossen, um den folgenden Code zu erhalten: Code kopieren Der Code lautet wie folgt:<ul> <li><span>Sie betreten den Raum</span></li> <li><span>Mit dem Bleistift in der Hand</span></li> <li><span>Sie sehen jemanden nackt</span></li> <li><span>Und Sie sagen: Wer ist dieser Mann?</span></li> <li><span>Du gibst dir so viel Mühe</span></li> <li><span>Aber du verstehst nicht</span></li> <li><span>Genau das, was Sie sagen werden</span></li> <li><span>Wenn du nach Hause kommst</span></li> <li><span>Weil hier etwas passiert</span></li> <li><span>Aber Sie wissen nicht, was es ist</span></li> <li><span>Tatsächlich, Herr Jones?</span></li> </ul> Tag-Matching (Balance-Tag)ZC (Zen Coding) bietet eine schnelle Möglichkeit, alle Inhalte innerhalb eines Elements auszuwählen Punkte bearbeiten (Punkt bearbeiten)Der von ZC erweiterte Code hat keinen Inhalt. Mit dieser Funktion kann der Punkt zur Inhaltsbearbeitung schnell gefunden werden.
endlichGängige IDEs wie Eclipse/Aptana, Notepad++, TextMage, Dreamweaver, UltraEdit, Visual Studio usw. verfügen bereits über offizielle oder Drittanbieter-Plug-In-Unterstützung. Da der Kerncode von Zen Coding über zwei Sprachversionen verfügt, Javascript und Python, kann Zen Coding nach der Einführung der entsprechenden JS-Datei im Textbearbeitungsbereich des Browsers verwendet werden. |
<<: SVG+CSS3 zum Erzielen eines dynamischen Welleneffekts
>>: JavaScript zum Erzielen des JD.com-Blitzverkaufseffekts
Artikel empfehlen
Analysieren Sie das Problem der automatischen Erkennung und Lese-/Schreibüberwachung von Zabbix 5.0-Festplatten
Datenträger automatisch erkennen Konfigurationssc...
Implementierungscode für die nahtlose Verbindung des Div-Bildlaufbands
Code kopieren Der Code lautet wie folgt: <html...
Beispiele für die Erstellung und Verwendung von MySQL-Triggern
Inhaltsverzeichnis Was ist ein Auslöser Erstellen...
Lösung für die Upload-Einschränkung von Element-ui-Uploaddateien
Frage Die Angabe des Typs der hochgeladenen Datei...
Einführung und Tipps zur Verwendung der interaktiven Visualisierungs-JS-Bibliothek gojs
Inhaltsverzeichnis 1. Einführung in Gojs 2. Gojs ...
Detaillierte Erklärung dieses Zeigeproblems in JavaScript
Vorwort Glauben Sie mir, solange Sie sich an die ...
Upgrade des Windows Server 2008R2-Dateiservers auf Windows Server 2016
Die Benutzerorganisation verfügt über zwei Window...
Die IE-Umgebung schreibt vor, dass die Div-Höhe größer sein muss als die Schrifthöhe
Code kopieren Der Code lautet wie folgt: <div ...
Tutorial zur Konfiguration der kostenlosen MySQL-Installationsversion
In diesem Artikel wird das kostenlose MySQL-Insta...
Tiefgreifendes Verständnis der Vue-cli4-Routing-Konfiguration
Inhaltsverzeichnis Vorwort - Vue Routing 1. Die g...
Zusammenfassung der sieben grundlegenden XHTML-Codierungsregeln
1. Alle Tags müssen ein entsprechendes End-Tag hab...
Beispielcode für die Django+MySQL-Konfiguration und einfache Bedienung der Datenbank
Schritt 1: Laden Sie den MySQL-Treiber herunter c...
So verwenden Sie nginx, um auf lokale statische Ressourcen auf einem Linux-Server zuzugreifen
1. Prüfen Sie, ob Port 80 belegt ist. Normalerwei...
Grundlegende Implementierung der AOP-Programmierung in JavaScript
Einführung in AOP Die Hauptfunktion von AOP (Aspe...
Detaillierte Erklärung zur Anzeige der aktuellen Anzahl an MySQL-Verbindungen
1. Zeigen Sie die detaillierten Informationen all...