Pengekodan Zen Pelaksanaan penulisan cepat kod HTML/CSS_Pertukaran pengalaman-tutorial css-php.cn

In diesem Artikel zeigen wir eine neue Möglichkeit zur schnellen Entwicklung von HTML und CSS mithilfe einer Syntax, die CSS-Selektoren nachahmt. Es wurde von Sergey Chikuyonok entwickelt.

Wie viel Zeit verbringen Sie mit dem Schreiben von HTML-Code (einschließlich aller Tags, Attribute, Anführungszeichen, Klammern usw.)? Wenn Ihr Editor über Codehinweise verfügt, fällt Ihnen das Schreiben leichter, aber selbst dann müssen Sie immer noch viel Code manuell eingeben.

Wenn wir in Bezug auf JavaScript ein bestimmtes Element auf einer Seite abrufen möchten, stoßen wir auf dasselbe Problem: Wir müssen viel Code schreiben, was schwierig zu warten und wiederzuverwenden ist. Es entstanden JavaScript-Frameworks und es wurden auch CSS-Selektor-Engines eingeführt. Jetzt können Sie einfache CSS-Ausdrücke verwenden, um DOM-Elemente abzurufen, was ziemlich cool ist.

Aber was wäre, wenn Sie nicht nur Elemente mithilfe von CSS-Selektoren anordnen und positionieren, sondern auch Code generieren könnten? Wenn Sie beispielsweise so schreiben:

Kopieren Sie den Code Der Code lautet wie folgt:

div#content>h1 +p

...Dann können Sie eine Ausgabe wie diese sehen:

Code kopieren Der Code lautet wie folgt:

/p>
上面的效果可以用dreamweaver，扩展下载地址 Zen Coding for Dreamweaver v.0.7 测试通过
有些迷惑吧？今天，我将向你介绍Zen Coding，一组用于快速HTML和CSS编码的工具。最初由Vadim Makeev在2009年4月提出(文章为俄语)，由鄙人(也就是我)开发了数月并最终达到比较成熟的状态。Zen Coding由两个核心组件组成：一个缩写扩展器(缩写为像CSS一样的选择器)和上下文无关的HTML标签对匹配器。看一下这个演示视频来看一下它们能为你做些什么。

注意：该视频原版位于Vimeo，但是要看的话需要翻[和谐]墙先，地址在这里：http://vimeo.com/7405114，上面的视频是我费尽周折从Vimeo上下载下来上传到优酷的，上传后质量竟被大打折扣了，囧。youtube上也有一份视频，是基于Aptana的演示，一样很精彩：http://www.youtube.com/watch?v=ug84Ypwqfzk。PS:貌似youtube要比Vimeo翻[和谐]墙容易些，不过如何翻[和谐]墙不在本站讨论范围。

如果你想跳转到详细介绍和使用指南，请看一下演示页面并立刻下载你适用的插件：

Demo

Demo (使用 Ctrl + , 展开缩写，需要JavaScript支持)
中文版演示

下载(完全支持)

Aptana (跨平台);
Coda, via TEA for Coda (Mac);
Espresso, via TEA for Espresso (Mac);

下载(部分支持，只支持“展开缩写”)

TextMate (只能用于Mac机,Windows可以使用E-text编辑器替代);
TopStyle;
Sublime Text;
GEdit;
Dreamweaver CS4
editArea在线编辑器;
Zen Coding在线编辑器中文版

现在让我们看一下这些工具是如何工作的吧。

展开缩写

展开缩写功能将类似CSS的选择器转换为XHTML代码。术语“缩写”可能会有点儿难以理解。为什么不直接称之为“CSS选择器”呢？嗯，首要原因是语义化：“选择器”意为选择一些东西，但是在这里我们事实上是生成一些东西，是写一个长代码的较短的替代。其次，它只是使用真实的CSS选择器语法的一个小的子集，并添加了一些新的操作符。

这里是一个支持的属性和操作符的列表：

E
Nama elemen (div, p);
E#id
Elemen menggunakan id (div#content, p#intro, span#error);
E.class
Gunakan elemen kelas (div.header, p.error.critial Anda juga boleh menggunakan class dan idID dalam kombinasi: div#content.column.width;
E>N
Elemen kanak-kanak(div>p, div#footer>p>span);
E+N
Elemen adik beradik (h1+p, div#header+div#content+div#footer);
E*N
Pendaraban unsur (ul#nav>li*5>a);
E$*N
Nombor item (ul#nav>li.item-$*5);

Salin kod Kod adalah seperti berikut:

…kemudian memanggil gelagat "kembangkan singkatan".

anda boleh menulis li*5. Ia juga akan mengatasi semua unsur keturunan. Jika anda ingin menulis 4 elemen
, setiap satu dengan teg anda boleh menulis li*4>a, yang akan menghasilkan kod HTML berikut:

Salin kod Kod adalah seperti berikut:
;/li>

dengan kelas item1, item2 dan item3. Anda boleh menulis singkatan seperti ini, div.item$*3:

Salin kod Kodnya adalah seperti berikut:

< /div>

 
Hanya tambahkan tanda dolar pada mana-mana kelas atau atribut id yang anda mahu indeks muncul, seberapa banyak yang anda mahu. Jadi, begini... 

Salin kod

Kodnya adalah seperti berikut: div# i$-test.class $$$*5

akan ditukar menjadi:

Salin kod

Kodnya adalah seperti berikut:

< ;/div>

Bagaimana Pengekodan Zen tahu bila ia harus menjana teg Tambah atribut lalai atau langkau teg penutup? Terdapat fail khusus bernama

zen_settings.js

yang menerangkan elemen output. Ini ialah fail JSON ringkas yang menerangkan singkatan untuk setiap bahasa (ya, anda boleh mentakrifkan singkatan untuk sintaks yang berbeza, seperti HTML, XSL, CSS, dll.). Takrifan singkatan bahasa biasa kelihatan seperti ini: html': { 'snippet': { 'cc:ie6': '', ... }, 'singkatan': { 'a': '', 'img': '', ...
}

}

Jenis Elemen

Pengekodan Zen mempunyai dua jenis elemen utama: "snippet" dan "singkatan". Serpihan ialah kepingan kod rawak dan singkatan ialah takrifan teg. Dengan coretan, anda boleh menulis sebarang kod yang anda mahu, dan ia akan dikeluarkan dalam format yang anda tulis tetapi anda mesti memformatnya secara manual (menggunakan n dan untuk pemisah baris dan lekukan) dan letakkan pembolehubah ${child} dalam Pergi ke tempat; anda mahu elemen anak menjadi output, seperti ini: cc:ie6>style. Jika anda tidak menggunakan pembolehubah ${child}, elemen anak akan dikeluarkan selepas dalam coretan kod.

Dengan singkatan, anda perlu menulis definisi markup dan sintaks adalah sangat penting. Biasanya, anda perlu menulis teg ringkas dengan semua atribut lalai, seperti: . Apabila Pengekodan Zen dimuatkan, ia menghuraikan definisi teg ke dalam objek tertentu yang menerangkan nama teg, atribut (termasuk tertibnya) dan sama ada teg itu kosong. Jadi, jika anda menulis , anda memberitahu Zen Coding bahawa teg mesti kosong, dan kemudian tingkah laku "kembangkan singkatan" akan menggunakan peraturan khusus untuknya sebelum mengeluarkannya.

Untuk coretan dan singkatan, anda boleh menambah simbol paip, yang memberitahu Zen Coding di mana untuk meletakkan kursor apabila singkatan dikembangkan. Secara lalai, Pengekodan Zen meletakkan kursor di antara petikan pada atribut kosong dan antara teg pembukaan dan penutup.

Contoh

Jadi, berikut ialah penjelasan tentang perkara yang berlaku apabila anda menulis singkatan dan memanggil tindakan "Kembangkan Singkatan". Pertama, ia memisahkan singkatan lengkap kepada elemen bebas: jadi div>a akan dibahagikan kepada div dan elemen, sambil mengekalkan perhubungan mereka sudah tentu. Kemudian, untuk setiap elemen, penghurai mencari definisi dahulu dalam coretan dan kemudian dalam singkatan. Jika ia tidak ditemui, nama elemen akan digunakan sebagai teg baharu dan id serta kelas yang ditakrifkan dalam singkatan akan dilampirkan padanya. Contohnya, jika anda menulis mytag#example dan penghurai tidak dapat mencari definisi mytag dalam serpihan atau singkatan, ia akan mengeluarkan .

Kami membuat banyak CSS lalai dan singkatan dan coretan HTML. Anda akan mendapati bahawa pembelajaran menggunakan Pengekodan Zen boleh meningkatkan produktiviti anda.

Penjodoh pasangan tag HTML

Satu lagi tugas biasa untuk pengekod HTML ialah mencari pasangan tag untuk elemen. Contohnya, anda ingin memilih keseluruhan teg

Atau mungkin anda sedang mencari teg penutup dan ingin mengetahui teg pembuka yang mana dimiliki.

Malangnya, banyak alat pembangunan moden gagal dalam fungsi ini. Kemudian saya memutuskan untuk menulis padanan pasangan tag saya sendiri sebagai sebahagian daripada Pengekodan Zen. Ia masih dalam versi beta dan mempunyai beberapa isu, tetapi ia berfungsi dengan baik dan pantas. Daripada menyemak imbas keseluruhan dokumen (seperti padanan pasangan tag HTML biasa), ia mencari teg yang berkaitan bermula dari kedudukan semasa kursor. Ini menjadikannya sangat pantas dan tanpa konteks: malah berfungsi dengan coretan kod JavaScript:

Salin kod Kodnya adalah seperti berikut:

var table = ''; untuk (var i = 0; i < 3; i++) {
jadual + = ''; untuk (var j = 0; j < 5; j++) {
jadual += ''; >}
jadual += '';
}
jadual += '

' + '

Gunakan pembungkusan singkatan

Ini ialah ciri hebat yang menggabungkan kefungsian penjodoh pasangan singkatan dan tag menjadi satu. Berapa kerapkah anda mendapati bahawa anda perlu menambah elemen pembungkus untuk membetulkan pepijat penyemak imbas? Atau adakah anda perlu menambah hiasan, seperti imej latar belakang atau jidar pada kandungan peringkat blok? Anda perlu menulis teg pembukaan, mengganggu kod anda buat sementara waktu, cari titik yang berkaitan dan kemudian tutup teg tersebut. Di sinilah "membungkus dengan singkatan" boleh membantu anda.

Ciri ini agak mudah: ia meminta anda memasukkan singkatan, kemudian melakukan tindakan "kembangkan singkatan" yang sesuai dan meletakkan teks yang anda inginkan di dalam elemen terakhir singkatan anda. Jika anda tidak memilih sebarang teks, ia memulakan pemadanan pasangan teg dan menggunakan hasilnya. Ia juga mengetahui di mana kursor anda berada: di dalam kandungan teg atau di antara teg pembukaan dan penutup. Bergantung pada kedudukannya, ia membungkus kandungan teg atau teg itu sendiri.

Pembungkusan singkatan memperkenalkan sintaks singkatan khusus untuk membalut baris individu. Cuma lompat ke nombor mengikut operator pendaraban, contohnya: ul#nav>li*>a. Apabila Pengekodan Zen menemui elemen yang menggunakan pengganda yang tidak ditentukan, ia menganggapnya sebagai elemen berulang: ia akan mengeluarkannya seberapa kerap terdapat baris dalam bab anda dan menambah kandungan setiap baris Letakkannya dalam elemen anak terakhir elemen berulang.

Jika anda membalut singkatan ini div#header>ul#navigation>li.item$*>a>span di luar teks ini:

Salin kod Kodnya adalah seperti berikut:

Tentang Kami 
Produk 
Berita 
Blog 
Hubungi 

 

Anda Anda akan mendapat keputusan berikut:

Salin kod Kodnya adalah seperti berikut:

< div id=" header">

你可以看到，Zen Coding是一个强大的文本处理工具。

快捷键

Ctrl+,
展开缩写
Ctrl+M
匹配对
Ctrl+H
使用缩写包括
Shift+Ctrl+M
合并行
Ctrl+Shift+?
上一个编辑点
Ctrl+Shift+?
下一个编辑点
Ctrl+Shift+?
定位匹配对

这些快捷键是可以自定义的。

在线演示

你已经学到很多关于Zen Coding如何工作以及它是如何使你的编码更容易了。现在为什么不自己尝试一下呢？因为Zen Coding是用纯JavaScript开发并迁移到Python，它甚至可以用于浏览器内部，这令它成为引入到CMS的首选。

Demo (使用 Ctrl + , 展开缩写，需要JavaScript支持)
中文版演示

支持的编辑器

Zen Coding并不依赖某个特定的编辑器。它是一个只处理文本的出色的组件：它获取文本、做一些处理并放回新的文本(或索引，用于标签匹配)。Zen Coding由JavaScript和Python编写，所以它实际上可以运行于任何平台。在Windows，你可以运行JavaScript版本，而Mac和Linux 分支可以使用Python版。

如果让你的编辑器支持Zen Coding，你需要写一个特定的可以在你的编辑器和Zen Coding之间转换数据的插件。问题是一个编辑器可能不会完整的支持Zen Coding因为它本身的插件系统。比如，TextMate通过使用脚本输出替换当前行很容的就支持了“展开缩写”功能，但是它不能处理标签对匹配因为没有标准的方法请求TextMate来选择内容。

完全支持

Aptana (跨平台);
Coda, via TEA for Coda (Mac);
Espresso, via TEA for Espresso (Mac);

部分支持(只支持“展开缩写”)

TextMate (只能用于Mac机,Windows可以使用E-text编辑器替代);
TopStyle;
Sublime Text;
GEdit;
Dreamweaver CS4
editArea在线编辑器;
Zen Coding在线编辑器中文版

Aptana是我主要的开发环境，它使用一个JavaScript版本的Zen Coding。它也包含很多其它的我用于日常工作的工具，所以任何一个新的Zen Coding版本都将会首先对Aptana可用，然后部署到Python并兼容其它的编辑器。

Coda和Espresso 插件被杰出的Text Editor Actions (TEA) 平台支持，由Ian Beck开发。原始的源代码在GitHub上，但我还是制作了我自己的分支以整合Zen Coding的特性。

总结

很多尝试过Zen Coding的人都说它改变了他们写页面的方式。当然还有很多事情要做，还有很多的编辑器需要被支持以及一些文档要写。请浏览现在的文档以及源代码以寻找你的问题的答案。希望你喜欢Zen Coding!

附：Zen coding的具体用法

遗憾的是，本文原作者并没有说明zen coding的具体用法，神飞认为有必要做以下简要的说明。这里就以Aptana/Eclipse和Dreamweaver为例，其它编辑器平台暂不描述，如有疑问可以在评论中与前端观察的网友交流。

Aptana/Eclipse

由于Aptana本身就是基于Eclipse的，所以，Zen Coding也是支持Eclipse的，只是需要一个EclipseMonkey插件的支持，Aptana已经封装了这个插件，所以如果你使用Aptana，下面的第一步可以跳过。

Installez EclipseMonkey via le site Web de mise à jour : http://download.eclipse.org/technology/dash/update(Vous pouvez ignorer cette étape si vous utilisez Aptana)
Créez un projet de niveau supérieur dans votre travail actuel et nommez-le, par exemple, zencoding
Créez le dossier scripts dans le projet nouvellement créé
Extraire le package du plug-in ZIP téléchargé dans ce dossier. La structure du projet ressemble à ceci :
Après l'installation, les sous-menus liés au codage Zen apparaîtront dans le menu "Script" de la barre de menu d'Aptana

Remarque :

Le plug-in officiel pour Aptana est basé sur MAC Si vous utilisez Windows, vous devez modifier les touches de raccourci manuellement (modifiez-les dans l'extrait de commentaire en tête de chaque fichier).
L'encodage du fichier officiel est un peu compliqué. Lors de la modification du js officiel, veuillez faire attention au problème d'encodage.

La bonne nouvelle est qu'il existe désormais un codage Zen pour le plug-in DreamWeaver. La mauvaise nouvelle est que le plug-in prend en charge très peu de fonctions et ne prend en charge que l'extension des abréviations. Et les touches de raccourci par défaut ne sont pas valides. Les actions ne peuvent être cliquées que dans le menu Commande. De plus, je n'ai pas testé si le plug-in prend uniquement en charge la version CS4. Mais ce qui est mieux, c'est que l'auteur a également publié le code source de ce plug-in, et vous pouvez personnaliser un plug-in Dreamweaver.

En fait, le plug-in officiel DW a un petit bug sous Windows, c'est-à-dire que des lignes vides apparaîtront. Je l'ai simplement corrigé et recompilé le package. Il n'y a aucun problème lors des tests sur cette machine. . Si vous êtes intéressé, les chaussures pour enfants peuvent être téléchargées et essayées :

http://www.boxcn.net/shared/c71z7x7sfe PS : Le plug-in officiel DW a été mis à jour

Recommande

de le télécharger depuis le site officiel . Les nouveaux plugins ajoutent plus de fonctionnalités. MISE À JOUR @ 23-12-2009

Recommandation spéciale

: L'étudiant Haoqing a mis les abréviations en pratique et a résumé de nombreux cas d'utilisation intéressants. Je recommande à tout le monde d'aller apprendre. Présentation originale de l'auteur :

Sergey Chikuyonok est un ingénieur et auteur russe en développement front-end qui a une grande passion pour l'optimisation : des images et des effets JavaScript au flux de travail et au codage permettant de gagner du temps. Visitez

sa page d'accueil

et son Twitter. Texte original de : http://www.qianduan.net/zen-coding-a-new-way-to-write-html-code.html

Label berkaitan：

zen

sumber：php.cn

Artikel sebelumnya：Tetapkan semula tetapan semula css gaya lalai Artikel seterusnya：Kaedah kod untuk mencantikkan butang fail input dengan pertukaran css_Experience

Kenyataan Laman Web ini

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel terbaru oleh pengarang