Zen Coding Rédaction HTML simple et rapide_HTML/Xhtml_Production de pages Web

Zen Coding est un plug-in d'édition de texte. Dans l'éditeur de texte utilisant Zen Coding, vous pouvez utiliser des codes courts pour écrire du code HTML normal. Cet outil simplifie grandement l'écriture HTML.

Par exemple, le code HTML suivant :

Copiez le code

Le code est le suivant :

< ;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
/titre>
< ;meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
🎜>

="item-1"> ;

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

• 
  

Par Zen Coding, une ligne suffit :

Copiez le code

Le code est le suivant :

html:xt> div#header>div#logo ul#nav>li.item-$*5>a
Voici la DÉMO en ligne (Les touches de raccourci ne fonctionnent pas, veuillez vérifier les éventuels conflits de touches de raccourci. Par exemple, saisissez à Sogou La puja occupe "Ctrl,")

Les règles d'abréviation de Zen Coding sont quelque peu similaires aux sélecteurs CSS :

• id et classe : par exemple, div#main.list.item représente
D'autres attributs peuvent ressembler à ceci : div[title], a[title="Hello world" rel], td[colspan=2]
Éléments en double : li*3 affichera 3
• Numéro d'élément en double : li.list-$$*2 sera étendu à
• < ; /li> Lorsque plusieurs $ sont rassemblés, le $ précédent sera utilisé comme 0 pour remplir les chiffres.
• Vous pouvez utiliser des crochets pour regrouper : div#page>(div#header>ul#nav>li*4>a) (div#page>(h1>span) p*2) div#footer
• Filtres prise en charge, l'utilisation de différents paramètres obtiendra des résultats complètement différents
Autres fonctionnalités principales

Par défaut sauf

HTML/XML/XSL/CSS/Abréviation HAML, Zen Coding fournit également d'autres fonctions qui facilitent l'écriture de code.

Enveloppement d'abréviation(Enveloppement avec abréviation). Selon la position du curseur ou la sélection de texte, saisissez l'abréviation du code pour obtenir le code final souhaité.

Copier le codeLe code est le suivant :

Vous entrez dans la pièce

Avec ton crayon à la main
Tu vois quelqu'un nu
Et tu dis : Qui est cet homme
Tu fais tellement d'efforts
Mais tu ne comprends pas
Juste ce que tu ' Je dirai
Quand vous rentrerez à la maison
Parce que quelque chose se passe ici
Mais vous ne savez pas ce que c'est
Est-ce que vous, Monsieur Jones


Utilisez "ul> ? ; li*>span" obtiendra le code suivant après l'emballage :

Copiez le codeLe code est le suivant :

• Vous entrez dans la pièce


• Avec votre crayon à la main


• Vous voyez quelqu'un nu


• Et vous dites : Qui est cet homme ?


• Vous essayez si fort


• Mais tu ne comprends pas


• Juste ce que vous direz


• Quand tu rentres à la maison


• Parce qu'il se passe quelque chose ici


• Mais vous ne savez pas ce que c'est


• Et vous, Monsieur Jones ?

标签匹配(Étiquette de solde)

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

编辑点(Point d'édition)

最后

L'IDE et Eclipse/Aptana,Notepad,TextMage,Dreamweaver,UltraEdit,Visual Studio sont disponibles. Codage en Javascript et Python ，在引入了相应的JS文件后，浏览器中的文本编辑区域都可以使用Zen Coding了。