写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/1495.htm" title="一个浮点数跨平台产生的问题">一个浮点数跨平台产生的问题</a><p>感谢网友唐磊（微博@唐磊_name）投稿，本文原文在唐磊的博客上（原文地址），原文分析还不够好，而且可能对人有误导，所以，我对原文做了很多修改，并加了Linux下的内容。浮点数…</p></div><div><a href="https://www.hesudu.com/XLbPI.htm" title="疑似某团信息泄露，昨天出现不少外卡被盗刷">疑似某团信息泄露，昨天出现不少外卡被盗刷</a><p>目前出现过的外卡： • 外卡银行：HSBC HK 、中银香港、中信国际、Chase 、Wise 等 • 商户名：Airtech 、GenZ 、KIFCO 、STEIN 、WES…</p></div><div><a href="https://www.hesudu.com/NZBBC.htm" title="普通开发人员（非算法工程师）如何抓住这波 AI 浪潮？">普通开发人员（非算法工程师）如何抓住这波 AI 浪潮？</a><p>背景工作多年的前端 er ，发现 cursor 已经比自己代码写的好了，时不时的就要焦虑一下，普通开发人员如何抓住这波 AI 浪潮呢？毕竟 chat 工程师很容易被替代. 真…</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/1413.htm" title="NoSQL 数据建模技术">NoSQL 数据建模技术</a></li><li><a href="https://www.hesudu.com/pohl3.htm" title="上海联通 7 月优惠套餐合辑">上海联通 7 月优惠套餐合辑</a></li><li><a href="https://www.hesudu.com/z8RI3.htm" title="搞了个网站，没备案，所以套了个 CF，但是访问很慢">搞了个网站，没备案，所以套了个 CF，但是访问很慢</a></li><li><a href="https://www.hesudu.com/801.htm" title="入坑 NAS 是选择 diy 还是选择成品？">入坑 NAS 是选择 diy 还是选择成品？</a></li><li><a href="https://www.hesudu.com/420.htm" title="同时用过 element-ui 和 ant-design-vue 的能否聊聊感受？">同时用过 element-ui 和 ant-design-vue 的能否聊聊感受？</a></li><li><a href="https://www.hesudu.com/XnYBK.htm" title="收到未知邮件别乱打开，小心中病毒，曝光这家公司">收到未知邮件别乱打开，小心中病毒，曝光这家公司</a></li><li><a href="https://www.hesudu.com/odvfo.htm" title="宿主机开了透明代理, 宿主机本身访问谷歌这些没问题">宿主机开了透明代理, 宿主机本身访问谷歌这些没问题</a></li><li><a href="https://www.hesudu.com/1111.htm" title="推荐几个镜像站点">推荐几个镜像站点</a></li><li><a href="https://www.hesudu.com/1548.htm" title="Linux PID 1 和 Systemd">Linux PID 1 和 Systemd</a></li><li><a href="https://www.hesudu.com/gOAxA.htm" title="大家分享一下，自己用的趁手的 idea 插件，尤其是 AI 插件：">大家分享一下，自己用的趁手的 idea 插件，尤其是 AI 插件：</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/lkM4B.htm" title="看看我这配置 NAS">看看我这配置 NAS</a></li><li><a href="https://www.hesudu.com/6mEr3.htm" title="求助: Java 多线程如何终止其它线程">求助: Java 多线程如何终止其它线程</a></li><li><a href="https://www.hesudu.com/264.htm" title="我的教程获得了很多好评，但是...">我的教程获得了很多好评，但是...</a></li><li><a href="https://www.hesudu.com/684.htm" title="公司有一批宝德 Linux 服务器（AMD 的 EPYC-7313 的 cpu）的 cpu 频率很奇怪">公司有一批宝德 Linux 服务器（AMD 的 EPYC-7313 的 cpu）的 cpu 频率很奇怪</a></li><li><a href="https://www.hesudu.com/1394.htm" title="Javascript 面向对象编程">Javascript 面向对象编程</a></li><li><a href="https://www.hesudu.com/geoLT.htm" title="Windows 10 哪个更新有针对大小核的 backport？新买了一台小主机，物理断网专门用于编辑隐私资料，安装 Windows 10 LTSC 2021 后非常卡，频繁蓝屏报错 MICROCODE_REVISION_MISMATCH">Windows 10 哪个更新有针对大小核的 backport？新买了一台小主机，物理断网专门用于编辑隐私资料，安装 Windows 10 LTSC 2021 后非常卡，频繁蓝屏报错 MICROCODE_REVISION_MISMATCH</a></li><li><a href="https://www.hesudu.com/590.htm" title="［讨论帖］为什么会出现“一边公司招人难，一边求职者找工作难”的问题">［讨论帖］为什么会出现“一边公司招人难，一边求职者找工作难”的问题</a></li><li><a href="https://www.hesudu.com/209.htm" title="一个++x 的疑问">一个++x 的疑问</a></li><li><a href="https://www.hesudu.com/wXOro.htm" title="多多的群晖 423 靠谱么？">多多的群晖 423 靠谱么？</a></li><li><a href="https://www.hesudu.com/946QA.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>