写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/LmJZY.htm" title="我们将使用母语编程">我们将使用母语编程</a><p>自从 2022 年底ChatGPT横空出世以来，ta 就注定会改变我们的编程方式。我对大语言模型保持了相当的好奇，也一直在积极拥抱这一新鲜事物。标题我们将使用母语编程是我在使…</p></div><div><a href="https://www.hesudu.com/701.htm" title="双十一准备换手机，想体验鸿蒙设备，预算 3k，有推荐的吗">双十一准备换手机，想体验鸿蒙设备，预算 3k，有推荐的吗</a><p>我的 Redmi K30p 好像狗不住了。国庆前换了电池，今天下午突然充不进去电了。准备双十一换手机了，这次想体验鸿蒙设备，但是觉得 mate 系列和 P 系列的太贵了，有点…</p></div><div><a href="https://www.hesudu.com/yjBb5.htm" title="jellyfin 刮削问题，有没有大佬让我少走点弯路">jellyfin 刮削问题，有没有大佬让我少走点弯路</a><p>RT 按网上说的添加存储库，用那个什么 shark 或者 douban 插件更新了媒体库，还是乱的有没有实践过的大佬给指导一下啊不敢动太多，影响老婆观影的话事就大啦 …</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/qe38k.htm" title="咨询贴： Java8 - Java17， Springboot2.x - Springboot3.x">咨询贴： Java8 - Java17， Springboot2.x - Springboot3.x</a></li><li><a href="https://www.hesudu.com/1521.htm" title="Docker基础技术：DeviceMapper">Docker基础技术：DeviceMapper</a></li><li><a href="https://www.hesudu.com/1427.htm" title="代码执行的效率">代码执行的效率</a></li><li><a href="https://www.hesudu.com/1260.htm" title="Sony PS3 Root Key 被破解">Sony PS3 Root Key 被破解</a></li><li><a href="https://www.hesudu.com/fywSq.htm" title="请教一个关于 useEffect 依赖的问题">请教一个关于 useEffect 依赖的问题</a></li><li><a href="https://www.hesudu.com/qnAfL.htm" title="感觉 double 精度不够用啊">感觉 double 精度不够用啊</a></li><li><a href="https://www.hesudu.com/CKIho.htm" title="兼顾打游戏和训模型的 ALL IN ONE 方案">兼顾打游戏和训模型的 ALL IN ONE 方案</a></li><li><a href="https://www.hesudu.com/aWilr.htm" title="少碰公司的套路云帐号，已被坑">少碰公司的套路云帐号，已被坑</a></li><li><a href="https://www.hesudu.com/455.htm" title="各公司 API 接口设计观察">各公司 API 接口设计观察</a></li><li><a href="https://www.hesudu.com/439.htm" title="git 问题咨询">git 问题咨询</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/M4zJu.htm" title="给老丈人推荐安卓手机， 2000-3000 价位，最优解是？">给老丈人推荐安卓手机， 2000-3000 价位，最优解是？</a></li><li><a href="https://www.hesudu.com/308.htm" title="不懂就问：如何把 ios 设备的照片自动备份到局域网 nas！">不懂就问：如何把 ios 设备的照片自动备份到局域网 nas！</a></li><li><a href="https://www.hesudu.com/728.htm" title="看了一下隔壁程序员怕滴滴和外卖有感,突然想到自己如果 30 岁了该怎么办?">看了一下隔壁程序员怕滴滴和外卖有感,突然想到自己如果 30 岁了该怎么办?</a></li><li><a href="https://www.hesudu.com/XQlMS.htm" title="人到中年，折腾 NAS">人到中年，折腾 NAS</a></li><li><a href="https://www.hesudu.com/HiJvC.htm" title="前后端的大佬们帮忙看看，最近遇到个奇葩问题">前后端的大佬们帮忙看看，最近遇到个奇葩问题</a></li><li><a href="https://www.hesudu.com/XYoWs.htm" title="有星际蜗牛升级群晖 7.2 的吗?有没有啥 bug?">有星际蜗牛升级群晖 7.2 的吗?有没有啥 bug?</a></li><li><a href="https://www.hesudu.com/650.htm" title="2022 年， desktop app 开发（macos， windows， Linux ）的跨平台框架是什么？">2022 年， desktop app 开发（macos， windows， Linux ）的跨平台框架是什么？</a></li><li><a href="https://www.hesudu.com/Ttjam.htm" title="算法的“递归”有比较好的学习资源推荐吗？">算法的“递归”有比较好的学习资源推荐吗？</a></li><li><a href="https://www.hesudu.com/UK3XY.htm" title="闯了大祸,根目录权限变成我自己了。">闯了大祸,根目录权限变成我自己了。</a></li><li><a href="https://www.hesudu.com/KPCZI.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><script defer src="https://static.cloudflareinsights.com/beacon.min.js/vcd15cbe7772f49c399c6a5babf22c1241717689176015" integrity="sha512-ZpsOmlRQV6y907TI0dKBHq9Md29nnaEIPlkf84rnaERnq6zvWvPUqr2ft8M1aS28oN72PdrCzSjY4U6VaAw1EQ==" data-cf-beacon='{"version":"2024.11.0","token":"25cef271bf704239a58e038c0b73e883","r":1,"server_timing":{"name":{"cfCacheStatus":true,"cfEdge":true,"cfExtPri":true,"cfL4":true,"cfOrigin":true,"cfSpeedBrain":true},"location_startswith":null}}' crossorigin="anonymous"></script>