写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/F9mSs.htm" title="[求助] 请教下如何找到这个攻击者">[求助] 请教下如何找到这个攻击者</a><p>前置信息：1 、被攻击者，我们假设为电脑 A,IP 地址为 192.168.1.1 ，是员工个人电脑2 、攻击者，我们假设为电脑 B ，IP 地址为 192.168.1.23 …</p></div><div><a href="https://www.hesudu.com/w1nB0.htm" title="家里的 nas 有 ipv4 外网，不过不是固定 ip，但是如果你想做一些小应用，比如接入钉钉机器人或者小程序，都是需要固定 ip 的，这个怎么办呢">家里的 nas 有 ipv4 外网，不过不是固定 ip，但是如果你想做一些小应用，比如接入钉钉机器人或者小程序，都是需要固定 ip 的，这个怎么办呢</a><p>家里的 nas 有 ipv4 外网，不过不是固定 ip ，但是如果你想做一些小应用，比如接入钉钉机器人或者小程序，都是需要固定 ip 的，这个怎么办呢弄台云主机，做代理呗…</p></div><div><a href="https://www.hesudu.com/692.htm" title="数据结构求助">数据结构求助</a><p>当前项目有实现以下数据结构的需求： 1 大量的并行读取与修改； 2 支持在多线程情况下以 O1 或者极小的开销随机获取一个数据并删除（数据集为空时返回 null ，不报错。），…</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/1203.htm" title="实用Android开发工具和资源精选">实用Android开发工具和资源精选</a></li><li><a href="https://www.hesudu.com/m2b9f.htm" title="Windows 服务器版本选择哪个比较好？">Windows 服务器版本选择哪个比较好？</a></li><li><a href="https://www.hesudu.com/Uo3eh.htm" title="求一款还能用的电视端直播软件">求一款还能用的电视端直播软件</a></li><li><a href="https://www.hesudu.com/1207.htm" title="你准备使用 HTML 5 吗？">你准备使用 HTML 5 吗？</a></li><li><a href="https://www.hesudu.com/AlnGf.htm" title="为 Windows 10 提供的支持将于 2025 年 10 月终止">为 Windows 10 提供的支持将于 2025 年 10 月终止</a></li><li><a href="https://www.hesudu.com/A8xip.htm" title="chrome 更新后白屏，网页打开了但是看不到内容">chrome 更新后白屏，网页打开了但是看不到内容</a></li><li><a href="https://www.hesudu.com/ShQtb.htm" title="我有一个日期时间的字段它有可能为空，我问 Go 该怎么办……">我有一个日期时间的字段它有可能为空，我问 Go 该怎么办……</a></li><li><a href="https://www.hesudu.com/5cn1L.htm" title="gitlab 不能通过 https 来 clone 只能 ssh，大家有遇到过吗">gitlab 不能通过 https 来 clone 只能 ssh，大家有遇到过吗</a></li><li><a href="https://www.hesudu.com/1427.htm" title="代码执行的效率">代码执行的效率</a></li><li><a href="https://www.hesudu.com/KPCZI.htm" title="国内独立开发者环境恶化，小米应用商店已经禁止个体户注册了">国内独立开发者环境恶化，小米应用商店已经禁止个体户注册了</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/6GvrD.htm" title="大家写代码还能感受到快乐吗? 你写代码的快乐来自哪里?">大家写代码还能感受到快乐吗? 你写代码的快乐来自哪里?</a></li><li><a href="https://www.hesudu.com/5Gjrs.htm" title="2025 年 pixel 安卓玩机方案？">2025 年 pixel 安卓玩机方案？</a></li><li><a href="https://www.hesudu.com/882.htm" title="OMG, Windows 7 来自未来">OMG, Windows 7 来自未来</a></li><li><a href="https://www.hesudu.com/527.htm" title="诸位对“好的代码就是要注释比代码还多”这句话怎么看？">诸位对“好的代码就是要注释比代码还多”这句话怎么看？</a></li><li><a href="https://www.hesudu.com/4H45J.htm" title="有没有什么工具能根据我的兴趣，自动刷知乎、V2EX 等网站并筛选感兴趣的帖子？">有没有什么工具能根据我的兴趣，自动刷知乎、V2EX 等网站并筛选感兴趣的帖子？</a></li><li><a href="https://www.hesudu.com/1482.htm" title="二维码的生成细节和原理">二维码的生成细节和原理</a></li><li><a href="https://www.hesudu.com/fyroC.htm" title="历时 2 年多，静下心写的三维开源框架，给大家汇报下进展">历时 2 年多，静下心写的三维开源框架，给大家汇报下进展</a></li><li><a href="https://www.hesudu.com/X0JYE.htm" title="1500 的 iqoo z9 turbo 体验">1500 的 iqoo z9 turbo 体验</a></li><li><a href="https://www.hesudu.com/nOcEV.htm" title="怀疑鸿蒙的出境易就是一个安卓应用放行白名单">怀疑鸿蒙的出境易就是一个安卓应用放行白名单</a></li><li><a href="https://www.hesudu.com/A5TjR.htm" title="多台负载均衡的服务器上传文件后如何确定文件在哪台静态服务器上">多台负载均衡的服务器上传文件后如何确定文件在哪台静态服务器上</a></li></ul> </section> </div> </div> </div> <footer id="footer"> <div class="container"> <p>2018-2026 © <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>