写HTML和CSS的新方法

Zen Coding 一个用来简化编写 HTML，XML， XSL （或是其它一些诸如此类格式的编辑器）。其主要是用一种缩写方式的语法来书写大量重复和无味的HTML，很像CSS语法。下面是一个例子：
div#page>div.logo+ul#navigation>li*5>a
展开后会成为下面这个样子：

可以看出来，#代表ID，>代表下一层。

如果你写下：
select>option#item-$*3
那么将会得到：

看上去很不错吧。目前，其支持如下的编辑器：

AptanaHowToEn
TextMate (Mac). Available in two flavors: basic snippets (Zen HTML and Zen CSS) and full-featured plugin (ZenCoding for TextMate). Bundles > Zen Coding menu item
Coda (Mac) — external download, via TEA for Coda. Plug-ins > TEA for Coda > Zen Coding menu item
Espresso (Mac) — external download, via TEA for Espresso. Zen Coding is bundled with Espresso by default, but you should upgrade ZC to latest version. Actions > HTML menu item
Komodo Edit/IDE (crossplatform) — external download. Tools > Zen Coding menu item
Notepad++ (Windows). Zen Coding menu item
PSPad (Windows). Scripts > Zen Coding menu item
(browser-based). See online demo.<br>editArea (browser-based). See online demo.</p><p>还有下面这些第三方的插件：</p><p>Dreamweaver (Windows, Mac)<br>Sublime Text (Windows)<br>UltraEdit (Windows)<br>TopStyle (Windows)<br>GEdit (crossplatform) — Franck Marcia’s plugin, Mike Crittenden’s plugin<br>BBEdit/TextWrangler (Mac) — external download<br>Visual Studio (Windows) — external download</p><p></p><p>转载于酷壳CoolShell 无删改仅以此纪念陈皓(左耳朵耗子)</p></div> <div><div><a href="https://www.hesudu.com/728.htm" title="看了一下隔壁程序员怕滴滴和外卖有感,突然想到自己如果 30 岁了该怎么办?">看了一下隔壁程序员怕滴滴和外卖有感,突然想到自己如果 30 岁了该怎么办?</a><p>我是 20 岁的时候参加的工作,没读大学,培训出身,现在在深圳小厂(×)一个月拿着 10K+的工资,以前还觉得挺高的,但是现在年龄 25 了,以前也没有想过这种话题,刚刚读完了…</p></div><div><a href="https://www.hesudu.com/958.htm" title="关于C++构造函数的FAQ">关于C++构造函数的FAQ</a><p>下面是一些关于C++构造函数的FAQ。你能回答得出来吗？你可以点链接查看答案，不过是英文版的。他们来自于C++ FAQ Lite。当然，也有中文版的，只可惜中文版的太老了，只更…</p></div><div><a href="https://www.hesudu.com/8EJMH.htm" title="马上发布的 iqooz9turbo+怎么样，看着挺猛">马上发布的 iqooz9turbo+怎么样，看着挺猛</a><p>9300+6400mah196g双频 gps屏幕好像升级成了小米 14 同款华星 c8线下价格 16+256 2499 16+512 2899不知道发布会会写多少不急的话等…</p></div></div> <p class="tags"><a href="https://www.hesudu.com/tag/%E9%85%B7%E5%A3%B3/">酷壳</a> <a href="https://www.hesudu.com/tag/CoolShell/">CoolShell</a> <a href="https://www.hesudu.com/tag/%E9%99%88%E7%9A%93/">陈皓</a> <a href="https://www.hesudu.com/tag/%E5%B7%A6%E8%80%B3%E6%9C%B5%E8%80%97%E5%AD%90/">左耳朵耗子</a> <a href="https://www.hesudu.com/tag/%E9%85%B7%E5%A3%B3%E9%99%88%E7%9A%93/">酷壳陈皓</a> <a href="https://www.hesudu.com/tag/web%E5%BC%80%E5%8F%91/">web开发</a> <a href="https://www.hesudu.com/tag/%E6%9D%82%E9%A1%B9%E8%B5%84%E6%BA%90/">杂项资源</a> <a href="https://www.hesudu.com/tag/html/">html</a> <a href="https://www.hesudu.com/tag/css/">css</a> <a href="https://www.hesudu.com/tag/zen/">zen</a></p> </article> <div class="post-near"> <span><a href="https://www.hesudu.com/1153.htm" title="新手该学哪门编程语言">新手该学哪门编程语言</a></span> <span class="you"><a href="https://www.hesudu.com/1155.htm" title="HTML 安全列表">HTML 安全列表</a></span> </div> </div> <div id="secondary" sidebar-fixed> <section class="widget"> <h3 class="ct">近期文章</h3> <ul class="widget-list alan"> <li><a href="https://www.hesudu.com/IE2AS.htm" title="大家用什么网络测速/测延迟比较好的工具呢？">大家用什么网络测速/测延迟比较好的工具呢？</a></li><li><a href="https://www.hesudu.com/84.htm" title="基于 mybatis-plus 的联表查询工具,可以实现大部分的写 SQL 需求">基于 mybatis-plus 的联表查询工具,可以实现大部分的写 SQL 需求</a></li><li><a href="https://www.hesudu.com/gXskZ.htm" title="云计算革了运维的命, 现在大模型革了程序员的命">云计算革了运维的命, 现在大模型革了程序员的命</a></li><li><a href="https://www.hesudu.com/522.htm" title="fastjson 真就突出一个阴魂不散">fastjson 真就突出一个阴魂不散</a></li><li><a href="https://www.hesudu.com/1182.htm" title="五个方法成为更好的程序员">五个方法成为更好的程序员</a></li><li><a href="https://www.hesudu.com/G19m5.htm" title="不算不知道，一算吓一跳，每个月的订阅制支出竟高达 1000+">不算不知道，一算吓一跳，每个月的订阅制支出竟高达 1000+</a></li><li><a href="https://www.hesudu.com/1018.htm" title="你用Linux命令行吗？">你用Linux命令行吗？</a></li><li><a href="https://www.hesudu.com/M6G3U.htm" title="火绒剑临时下线，有什么情况吗">火绒剑临时下线，有什么情况吗</a></li><li><a href="https://www.hesudu.com/79rJV.htm" title="一人来一道拿手面试题">一人来一道拿手面试题</a></li><li><a href="https://www.hesudu.com/476.htm" title="阿里云 CDN 被攻击，一早起来欠费 600 多停机了">阿里云 CDN 被攻击，一早起来欠费 600 多停机了</a></li></ul>  <img src='https://www.hesudu.com/img/c1.jpg'> </section> <section class="widget"> <h3 class="ct">热门推荐</h3> <ul class="widget-list alan"> <li><a href="https://www.hesudu.com/1576.htm" title="谈谈公司对员工的监控">谈谈公司对员工的监控</a></li><li><a href="https://www.hesudu.com/337.htm" title="nginx 反代 tomcat 后， url 带斜杠出现源码下载漏洞">nginx 反代 tomcat 后， url 带斜杠出现源码下载漏洞</a></li><li><a href="https://www.hesudu.com/B4M94.htm" title="各位程序员，你们日常「中文与英文间添加空格」吗">各位程序员，你们日常「中文与英文间添加空格」吗</a></li><li><a href="https://www.hesudu.com/LL8d4.htm" title="开源了一个跨平台 EPUB 阅读软件 Readest，使用 Tauri v2 和 Next.js 15 开发">开源了一个跨平台 EPUB 阅读软件 Readest，使用 Tauri v2 和 Next.js 15 开发</a></li><li><a href="https://www.hesudu.com/cu7T6.htm" title="朋友有创业计划，我应征当了那个“只缺一个程序员”了">朋友有创业计划，我应征当了那个“只缺一个程序员”了</a></li><li><a href="https://www.hesudu.com/VVrGx.htm" title="文件存在却报错： no such file or directory ，记录下调试过程">文件存在却报错： no such file or directory ，记录下调试过程</a></li><li><a href="https://www.hesudu.com/DtdAf.htm" title="小米手机刷了原生谷歌系统的安全性">小米手机刷了原生谷歌系统的安全性</a></li><li><a href="https://www.hesudu.com/1126.htm" title="如何修改微软人体工学键盘的Zoom键">如何修改微软人体工学键盘的Zoom键</a></li><li><a href="https://www.hesudu.com/nFlaN.htm" title="求推荐个机场">求推荐个机场</a></li><li><a href="https://www.hesudu.com/1271.htm" title="食客还是大厨">食客还是大厨</a></li></ul> </section> </div> </div> </div> <footer id="footer"> <div class="container"> <p>2018-2025 © <a href="https://www.hesudu.com/">合速度</a> 合力而为速度分享</p> </div> </footer> <div id="cornertool"> <ul> <li id="top" class="hidden"></li> </ul> </div> <script src="/img/main.js"></script> </body> </html>