Zen Coding Einfaches und schnelles HTML-Schreiben

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:

  • ID und Klasse: Beispielsweise bedeutet div#main.list.item <div id="main" class="list item"></div>
  • Andere Attribute können sein: div[title], a[title="Hallo Welt" rel], td[colspan=2]
  • Wiederholende Elemente: li*3 gibt 3 aus <li></li>
  • Wiederholte numerische Elementsequenz: li.list-$$*2 wird zu <li class="list-01"></li><li class="list-02"></li> erweitert. Bei der Aneinanderreihung mehrerer $ wird das führende $ als 0 zum Auffüllen der Ziffern verwendet.
  • Sie können Klammern zum Gruppieren verwenden: div#page>(div#header>ul#nav>li*4>a)+(div#page>(h1>span)+p*2)+div#footer
  • Filter Unterstützung, die Verwendung unterschiedlicher Parameter führt zu völlig unterschiedlichen Ergebnissen

Weitere Hauptfunktionen

Standard 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.

Punkte bearbeiten

endlich

Gä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

So umgehen Sie unbekannte Feldnamen in MySQL

Vorwort Dieser Artikel stellt die fünfte Frage vo...

So erstellen Sie einen Styleguide für Ihre Website im Webinterface-Design (mit Bildern und Text)

Was ist ein Styleguide? Einfach ausgedrückt handel...

Detaillierte Erläuterung der Kommunikation zwischen Angular-Eltern- und -Kindkomponenten

Inhaltsverzeichnis Überblick 1. Übersicht über Ei...

Axios storniert Anfragen und vermeidet doppelte Anfragen

Inhaltsverzeichnis Herkunft Status Quo Anfrage ab...

1 Minute Vue implementiert Rechtsklickmenü

Inhaltsverzeichnis Rendern Installieren Code-Impl...

Tutorial zur Installation der dekomprimierten Version von MySQL 8.0.22 (nur für Anfänger)

Inhaltsverzeichnis 1. Ressourcen-Download 2. Entp...

Tutorial zum Anpassen der Größe der logischen LVM-Volume-Partition in Linux (für verschiedene Dateisysteme wie xfs und ext4)

Vorwort Bei der Installation des Systems haben wi...

MySQL View-Prinzipanalyse

Inhaltsverzeichnis Aktualisierbare Ansichten Leis...

Problemlösungsvorgänge für Alpine Docker-Bildschriftarten

1. Führen Sie Schriftarten aus, öffnen Sie den Sc...

Implementierung der Header-Informationen für Nginx-Operationsantworten

Voraussetzung: Sie müssen das Modul ngx_http_head...

So richten Sie eine VSCode-Remoteverbindung zum Server-Docker-Container ein

Inhaltsverzeichnis Ziehen Sie das Bild Ausführen ...

Detaillierte Analyse der HTML-Semantik und der zugehörigen Front-End-Frameworks

Über Semantik Die Semantik ist die Lehre von der ...

Bringen Sie Ihnen bei, wie Sie coole Barcode-Effekte erstellen

Stellungnahme : In diesem Artikel erfahren Sie, w...

Detaillierte Erklärung zur Verwendung von JavaScript WeakMap

Ein WeakMap-Objekt ist eine Sammlung von Schlüsse...

JavaScript zum Erzielen eines einfachen Drag-Effekts

In diesem Artikel wird der spezifische JavaScript...