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
HTML-Subtag und Sup-Tag
Heute stelle ich zwei HTML-Tags vor, die ich nich...
MySQL-Lernnotizen zum Umgang mit doppelten Daten
MySQL verarbeitet doppelte Daten Einige MySQL-Tab...
Eine kurze Analyse der Verwendung von watchEffect in Vue3
Vorwort Jeder sollte mit der Watch-API in vue2 ve...
Vier Kategorien von CSS-Selektoren: Basis, Kombination, Attribut, Pseudoklasse
Was ist ein Selektor? Die Rolle des Selektors bes...
Liste häufig verwendeter Escape-Codes für HTML: Größer als, Kleiner als, Leerzeichen, Anführungszeichen usw.
Die Tabelle sieht wie folgt aus: HTML-Quellcode E...
Eine kurze Diskussion über adaptive Layoutprobleme auf Mobilgeräten (responsive, rem/em, Js-Dynamik)
Mit der Verbreitung von 3G nutzen immer mehr Mens...
Was ist Makefile in Linux? Wie funktioniert es?
Führen Sie Ihre Programme mit diesem praktischen ...
Detaillierter Implementierungsplan für den Vue-Frontend-Export von Excel-Dateien
Inhaltsverzeichnis 1. Technologieauswahl 2. Techn...
Reines CSS, um einen automatischen Rotationseffekt des Karussellbanners zu erzielen
Kommen wir ohne weitere Umschweife direkt zum Cod...
So begrenzen Sie den Wertebereich von Objektschlüsseln in TypeScript
Wenn wir TypeScript verwenden, möchten wir das vo...
Detailliertes Beispiel zum Abrufen des Maximalwerts jeder Gruppe nach der Gruppierung in MySQL
Detailliertes Beispiel zum Abrufen des Maximalwer...
Grafisches Tutorial zur Installation und Konfiguration von MySQL Community Server 8.0.12
MySQL 8 bringt völlig neue Erfahrungen mit sich, ...
Lösung für das Problem mit verstümmelten chinesischen MySQL-Zeichen
1. Die chinesischen verstümmelten Zeichen erschei...
Detailliertes Tutorial zur Installation und Konfiguration von MySQL 5.7.20 unter Centos7
1. Laden Sie das MySQL 5.7-Installationspaket von...
Detailliertes Installationstutorial von Docker unter CentOS
Docker ist in CE und EE unterteilt. Die CE-Versio...