写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/9aQJ6.htm" title="gitee 账号被封">gitee 账号被封</a><p>账号登录提示被系统屏蔽，屏蔽原因: 帐号违规-滥用外链-RAW-Plist imgur.com/MhBjQV1 有一个仓库使用了 pages 静态网页做 APP 分发，确实有…</p></div><div><a href="https://www.hesudu.com/535.htm" title="Spring JPA 动态列查询有什么好的思路">Spring JPA 动态列查询有什么好的思路</a><p>例如数据库表可能存放有 30 列，本身是列式存储。实际的查询场景可能每次查询 5 列，且组合可能不一样。如果用 jpa projections 可能面临需要定义一堆 ent…</p></div><div><a href="https://www.hesudu.com/pMAGJ.htm" title="有没有离线的代码补全软件？">有没有离线的代码补全软件？</a><p>背景内网离线开发开发的一般是大数据组件相关的内容有部分源码由于是华为全套大数据组件，外网没有环境，无法在外网开发期望把源码或者其他相关代码扔到 ai 里， …</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/717.htm" title="腾讯云轻量云对仅属于轻量云的 IP 地址进行了主动 QOS 来人为创造丢包和高延迟。请各位暂时避雷。">腾讯云轻量云对仅属于轻量云的 IP 地址进行了主动 QOS 来人为创造丢包和高延迟。请各位暂时避雷。</a></li><li><a href="https://www.hesudu.com/B1z19.htm" title="B 站很多 UP 一百一百个抽黑神话悟空！">B 站很多 UP 一百一百个抽黑神话悟空！</a></li><li><a href="https://www.hesudu.com/glCK8.htm" title="Python 中 message.guild.id if message.guild else None 这种表达式，还能写得更简洁吗？">Python 中 message.guild.id if message.guild else None 这种表达式，还能写得更简洁吗？</a></li><li><a href="https://www.hesudu.com/XnYBK.htm" title="收到未知邮件别乱打开，小心中病毒，曝光这家公司">收到未知邮件别乱打开，小心中病毒，曝光这家公司</a></li><li><a href="https://www.hesudu.com/ZKpKJ.htm" title="应不应该把主键 id 暴露在 url 上？">应不应该把主键 id 暴露在 url 上？</a></li><li><a href="https://www.hesudu.com/1573.htm" title="源代码特洛伊木马攻击">源代码特洛伊木马攻击</a></li><li><a href="https://www.hesudu.com/248.htm" title="关于垃圾佬 diy 家用 NAS 的一点思考">关于垃圾佬 diy 家用 NAS 的一点思考</a></li><li><a href="https://www.hesudu.com/wS84C.htm" title="双十一 nas 从入门到劝退">双十一 nas 从入门到劝退</a></li><li><a href="https://www.hesudu.com/O45Uz.htm" title="搭建私人像册，最合适/经济的机型是什么？">搭建私人像册，最合适/经济的机型是什么？</a></li><li><a href="https://www.hesudu.com/618.htm" title="现在发布的充电头，怎么还带 A 口这么落后的东西，全变成 type-c 的不好么？">现在发布的充电头，怎么还带 A 口这么落后的东西，全变成 type-c 的不好么？</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/759.htm" title="想入手一个 steam deck, 请教一下使用场景是否适合?">想入手一个 steam deck, 请教一下使用场景是否适合?</a></li><li><a href="https://www.hesudu.com/1369.htm" title="一些文章和各种资源">一些文章和各种资源</a></li><li><a href="https://www.hesudu.com/1197.htm" title="JS1K 演示">JS1K 演示</a></li><li><a href="https://www.hesudu.com/kuKy1.htm" title="突发奇想，如果用 Mac mini+ Linux +外挂硬盘，这样的组合是否能用来当 nas？">突发奇想，如果用 Mac mini+ Linux +外挂硬盘，这样的组合是否能用来当 nas？</a></li><li><a href="https://www.hesudu.com/1616.htm" title="在公司摸鱼写自己小项目，如何尽量安全地 push 出去？">在公司摸鱼写自己小项目，如何尽量安全地 push 出去？</a></li><li><a href="https://www.hesudu.com/860.htm" title="Java书籍Top 10">Java书籍Top 10</a></li><li><a href="https://www.hesudu.com/Pk6zj.htm" title="有没有剪贴板历史记录的软件">有没有剪贴板历史记录的软件</a></li><li><a href="https://www.hesudu.com/126.htm" title="Win10 用几天后会卡顿">Win10 用几天后会卡顿</a></li><li><a href="https://www.hesudu.com/Yu27e.htm" title="我的独立开发故事：尝试了各种方法，但还是失败">我的独立开发故事：尝试了各种方法，但还是失败</a></li><li><a href="https://www.hesudu.com/IXEsF.htm" title="新人 NAS 方案推荐">新人 NAS 方案推荐</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>