Zen Coding Einfaches und schnelles HTML-Schreiben_HTML/Xhtml_Webseitenerstellung

Zen Coding ist ein Texteditor-Plug-in. Im Texteditor mit Zen Coding können Sie Kurzcodes verwenden, um regulären HTML-Code zu schreiben. Dieses Tool vereinfacht das Schreiben von HTML erheblich.

Zum Beispiel der folgende HTML-Code:

Kopieren Sie den Code

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" >
/title>
< ;meta http-equiv="Content-Type" content="text/html;charset=UTF-8" 🎜>

="item-1"> ;

• ;< ;/li>
  
li class="item-4 ">

• 
  

Bei Zen Coding reicht eine Zeile:





Kopieren Sie den Code

Der Code lautet wie folgt:

html:xt> div#header>div#logo ul#nav>li.item-$*5>a

Hier ist die Online-DEMO (Tastenkombinationen funktionieren nicht, bitte überprüfen Sie mögliche Tastenkombinationskonflikte. Zum Beispiel Eingabe in Sogou Die Puja besetzt „Strg,“)

Die Abkürzungsregeln von Zen Coding ähneln in gewisser Weise den CSS-Selektoren:

• ID und Klasse: Beispielsweise steht div#main.list.item für
Andere Attribute können wie folgt aussehen: div[title], a[title="Hello world" rel], td[colspan=2]
Doppelte Elemente: li*3 gibt 3
aus
• Doppelte Elementnummer: li.list-$$*2 wird erweitert zu
• < ; /li> Wenn mehrere $ zusammengefügt werden, wird das vorangehende $ 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
• FilterUnterstützung, die Verwendung unterschiedlicher Parameter führt zu völlig unterschiedlichen Ergebnissen
Weitere Hauptfunktionen

Standard außer

HTML/XML/XSL/CSS/HAML-Abkürzung, Zen Coding bietet auch einige andere Funktionen, die das Schreiben von Code erleichtern.

Abkürzungsumbruch(Umbruch mit Abkürzung). Geben Sie je nach Cursorposition oder Textauswahl die Code-Abkürzung ein, um den gewünschten endgültigen Code zu erhalten.

Code kopierenDer Code lautet wie folgt:

Sie betreten den Raum

Mit deinem Bleistift in der Hand
Du siehst jemanden nackt
Und du sagst: „Wer ist dieser Mann?“
Du gibst dir so viel Mühe
Aber du verstehst nicht
Genau das, was du willst? Ich sage
Wenn Sie nach Hause kommen
Weil hier etwas passiert
Aber Sie wissen nicht, was es ist
Wissen Sie, Herr Jones?


Verwenden Sie „ul> ;li*>span“ erhält nach dem Umschließen den folgenden Code:

Kopieren Sie den CodeDer Code lautet wie folgt :

• Sie betreten den Raum


• Mit dem Bleistift in der Hand


• Du siehst jemanden nackt


• Und du sagst: Wer ist dieser Mann?


• Du gibst dir so viel Mühe


• Aber du verstehst es nicht


• Genau das, was Sie sagen werden


• Wenn du nach Hause kommst


• Weil hier etwas passiert


• Aber Sie wissen nicht, was es ist


• Ja, Herr Jones?

标签匹配(Balance-Tag)

ZC (Zen Coding)提供了一个快速选择元素内所有内容的方法

编辑点(Punkt bearbeiten)

由ZC扩展出来的代码是没有内容的，此功能则可以快速的定位到内容编辑点处

最后

常见的IDE如Ecliplse/Aptana, Notepad, TextMage, Dreamweaver, UltraEdit, Visual Studio等，都已经有官方或者第三方的插件支持。实际上由于Zen Verwenden Sie Javascript und Python在引入了相应的JS文件后,浏览器中的文本编辑区域都可以使用Zen Coding了.