写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/VBIiB.htm" title="19 元 80G 免费用四个月，满三个月可销户，能靠谱吗？">19 元 80G 免费用四个月，满三个月可销户，能靠谱吗？</a><p>我这几天在找流量卡，在 pdd 一家店里面找到了个这样的套餐店家说不怕被薅…… emm 我有点心动想买……当然不是要真要薅他，反正用个半年一年的样子吧，之前在他家买过一张…</p></div><div><a href="https://www.hesudu.com/323.htm" title="电脑时钟每天误差 1-2 秒钟，是质量问题还是普遍现象？">电脑时钟每天误差 1-2 秒钟，是质量问题还是普遍现象？</a><p>最近因为一些机缘巧合，发现电脑时钟每天似乎总有误差。于是进行测试，系统为 Linux ，关闭操作系统的时间同步（ Systemd 的时间同步），写了一个几行的脚本追踪系统时间…</p></div><div><a href="https://www.hesudu.com/Kkw18.htm" title="住宿舍的大学生是否需要一台 nas ？">住宿舍的大学生是否需要一台 nas ？</a><p>场景：宿舍只能用校园网不能拉宽带，每人限制三台设备，每台设备访问互联网限速在 60~70M 之间（上传下载均是）主要需求：观看 4k 原盘电影，资源在阿里云盘方案一.纯在线观看…</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/604.htm" title="在 Java 中为什么不全部使用 static 方法？">在 Java 中为什么不全部使用 static 方法？</a></li><li><a href="https://www.hesudu.com/3PD9E.htm" title="clash 之后，是不是后继无人了">clash 之后，是不是后继无人了</a></li><li><a href="https://www.hesudu.com/1209.htm" title="Waterfall 软件工程">Waterfall 软件工程</a></li><li><a href="https://www.hesudu.com/eKdAt.htm" title="前端包管理工具调研">前端包管理工具调研</a></li><li><a href="https://www.hesudu.com/1326.htm" title="Linux 2.6.39-rc3的一个插曲">Linux 2.6.39-rc3的一个插曲</a></li><li><a href="https://www.hesudu.com/PFsQU.htm" title="每次开关机,都要等待更新 30%...">每次开关机,都要等待更新 30%...</a></li><li><a href="https://www.hesudu.com/clkx7.htm" title="如何国内最低成本搭建视频网站">如何国内最低成本搭建视频网站</a></li><li><a href="https://www.hesudu.com/w2bj0.htm" title="也做了一个 markdown 转小红书卡片生成器，拿去玩玩">也做了一个 markdown 转小红书卡片生成器，拿去玩玩</a></li><li><a href="https://www.hesudu.com/1234.htm" title="开发时间估计">开发时间估计</a></li><li><a href="https://www.hesudu.com/378.htm" title="MDN 突然改版">MDN 突然改版</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/PpH32.htm" title="想搞一台 nas 放家里，求助方案">想搞一台 nas 放家里，求助方案</a></li><li><a href="https://www.hesudu.com/5AROg.htm" title="Golang 游戏开发框架选型">Golang 游戏开发框架选型</a></li><li><a href="https://www.hesudu.com/1377.htm" title="深入理解C语言">深入理解C语言</a></li><li><a href="https://www.hesudu.com/71.htm" title="2021 年的 Windows 上有没有类似 mac 的 Alfred 软件推荐？体验好，安装使用傻瓜的。">2021 年的 Windows 上有没有类似 mac 的 Alfred 软件推荐？体验好，安装使用傻瓜的。</a></li><li><a href="https://www.hesudu.com/asWTf.htm" title="分享一个关于购买的双开微信包有异常风险行为的事情">分享一个关于购买的双开微信包有异常风险行为的事情</a></li><li><a href="https://www.hesudu.com/p9STH.htm" title="订了比亚迪的车，贴膜在犹豫用什么？各位有推荐和建议吗">订了比亚迪的车，贴膜在犹豫用什么？各位有推荐和建议吗</a></li><li><a href="https://www.hesudu.com/344.htm" title="一个人（公司摸鱼+业余时间）开发了五年的开源项目：可用于自建 Git 服务，自带看板和 CI/CD，可替代 GitHub/GitLab（功能级的替代，而非小而美）">一个人（公司摸鱼+业余时间）开发了五年的开源项目：可用于自建 Git 服务，自带看板和 CI/CD，可替代 GitHub/GitLab（功能级的替代，而非小而美）</a></li><li><a href="https://www.hesudu.com/ZqFpj.htm" title="我有一个端口转发问题，求大佬们协助">我有一个端口转发问题，求大佬们协助</a></li><li><a href="https://www.hesudu.com/9qa71.htm" title="百度云确实会屏蔽加密文件">百度云确实会屏蔽加密文件</a></li><li><a href="https://www.hesudu.com/FURRw.htm" title="cursor 使用心得">cursor 使用心得</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>