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

Detaillierte Erklärung mehrerer Möglichkeiten zum Entfernen der Lücke zwischen Inline-Blockelementen in CSS

Bei der Arbeit an mobilen Seiten werden in letzte...

Docker-Bereitstellung von Kafka und Spring Kafka-Implementierung

In diesem Artikel wird hauptsächlich die Bereitst...

Einige Fallstricke beim JavaScript Deep Copy

Vorwort Als ich zuvor zu einem Vorstellungsgesprä...

Implementierungsprinzip der MySQL MyISAM-Standardspeicher-Engine

Standardmäßig generiert die MyISAM-Tabelle drei D...

Analyse und Lösung der Gründe, warum HTML-externe Referenz-CSS-Dateien nicht effektiv sind

Als Frontend-Neuling habe ich einige Tage am Front...

Häufige Browserkompatibilitätsprobleme (Zusammenfassung)

Browserkompatibilität ist nichts anderes als Stil...

Verwenden Sie Navicate, um eine Verbindung zu MySQL auf dem Alibaba Cloud Server herzustellen

1. Geben Sie zuerst das MySQL des Servers ein, um...

React implementiert eine hochadaptive virtuelle Liste

Inhaltsverzeichnis Vor der Transformation: Nach d...

25 Vue-Tipps, die Sie kennen müssen

Inhaltsverzeichnis 1. Beschränken Sie Requisiten ...

So zeigen Sie JSON-Daten in HTML an

Hintergrund: Manchmal müssen wir JSON-Daten direk...

Zusammenfassung der drei Regeln für die React-Statusverwaltung

Inhaltsverzeichnis Vorwort Nr.1 Ein Fokus Nr. 2 E...

So implementieren Sie geplante Aufgaben der zweiten Ebene mit dem Linux Crontab Shell-Skript

1. Schreiben Sie das Shell-Skript crontab.sh #!/b...

Detailliertes Tutorial zum Bereitstellen eines Springboot-Projekts mit Nginx auf dem Server (JAR-Paket)

1. Packen Sie das Java-Projekt in ein JAR-Paket H...

So installieren Sie Theano und Keras auf einem Ubuntu-System

Hinweis: Das System ist Ubuntu 14.04LTS, ein 32-B...

Schritte zum Verpacken und Konfigurieren von SVG-Komponenten in Vue-Projekten

Ich bin erst vor Kurzem in eine neue Firma einges...