写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/1067.htm" title="Vim的分屏功能">Vim的分屏功能</a><p>本篇文章主要教你如何使用 Vim 分屏功能。目录分屏启动Vim关闭分屏分屏移动光标移动分屏屏幕尺寸分屏启动Vim 使用大写的O参数来垂直分屏。 vim -On…</p></div><div><a href="https://www.hesudu.com/jsGST.htm" title="2024 年了，跨平台开发框架有啥推荐的吗">2024 年了，跨平台开发框架有啥推荐的吗</a><p>要求支持 WIN ，MAC ，安卓，坑少点就行。想着开发一次，处处能运行的，或少量修改就行运行的。那些独立开发者多平台开发用的啥框架呀。 win mac 安卓，坑少，处处…</p></div><div><a href="https://www.hesudu.com/297.htm" title="360 真 TM 无耻！">360 真 TM 无耻！</a><p>前文： hesudu.com/t/819269 我最终采用的是另外找了一台 windows 电脑来安装 360 浏览器，然后远程桌面操作。我今天在这台 windows 的 …</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/pioEo.htm" title="为啥有人用 xxl job">为啥有人用 xxl job</a></li><li><a href="https://www.hesudu.com/SiCrk.htm" title="xz-utils 后门事件">xz-utils 后门事件</a></li><li><a href="https://www.hesudu.com/1511.htm" title="Leetcode 编程训练">Leetcode 编程训练</a></li><li><a href="https://www.hesudu.com/NfDFk.htm" title="某五百强信创数据库运维幽默记录">某五百强信创数据库运维幽默记录</a></li><li><a href="https://www.hesudu.com/399.htm" title="新人需要注意的去日本做外包工作的一些坑">新人需要注意的去日本做外包工作的一些坑</a></li><li><a href="https://www.hesudu.com/OFC1Y.htm" title="请教 32G 内存，集显的笔记本，平时用到 16G 内存就内存不足">请教 32G 内存，集显的笔记本，平时用到 16G 内存就内存不足</a></li><li><a href="https://www.hesudu.com/1617.htm" title="天下乌鸦一般黑，寻求一款能替代 Chrome/Edge 的浏览器">天下乌鸦一般黑，寻求一款能替代 Chrome/Edge 的浏览器</a></li><li><a href="https://www.hesudu.com/DYkGu.htm" title="分享我的 follow 订阅源曹贼主题">分享我的 follow 订阅源曹贼主题</a></li><li><a href="https://www.hesudu.com/452.htm" title="继续推进我的独立游戏，完全重构了，改用体素风格，招募大神一起创作">继续推进我的独立游戏，完全重构了，改用体素风格，招募大神一起创作</a></li><li><a href="https://www.hesudu.com/K0stU.htm" title="怎么样快速解析好几个 G 的 pcap 文件">怎么样快速解析好几个 G 的 pcap 文件</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/0IC5z.htm" title="开发主力机 Linux 桌面版求推荐">开发主力机 Linux 桌面版求推荐</a></li><li><a href="https://www.hesudu.com/948.htm" title="不要拯救那些职场上的“无可救药”">不要拯救那些职场上的“无可救药”</a></li><li><a href="https://www.hesudu.com/e0KdK.htm" title="QPS 到 3000 了，大家合理使用">QPS 到 3000 了，大家合理使用</a></li><li><a href="https://www.hesudu.com/uv7AF.htm" title="用港版的三星 ip 送中怎么办">用港版的三星 ip 送中怎么办</a></li><li><a href="https://www.hesudu.com/hcGZs.htm" title="最便宜的 NAS 方案是什么？给老家监控存储用">最便宜的 NAS 方案是什么？给老家监控存储用</a></li><li><a href="https://www.hesudu.com/mubP1.htm" title="有什么数据库扛断电能力最强吗?">有什么数据库扛断电能力最强吗?</a></li><li><a href="https://www.hesudu.com/4X23H.htm" title="有时候感觉作为一个前端工作起来相当无奈">有时候感觉作为一个前端工作起来相当无奈</a></li><li><a href="https://www.hesudu.com/ZDP6A.htm" title="各位大佬，求教开发转岗运维有哪些要学习的">各位大佬，求教开发转岗运维有哪些要学习的</a></li><li><a href="https://www.hesudu.com/BYYpQ.htm" title="manjaro 下远程桌面控制软件">manjaro 下远程桌面控制软件</a></li><li><a href="https://www.hesudu.com/249.htm" title="React 在 docker, buildkite 部署，如何读取不同的 staging, qa 环境文件">React 在 docker, buildkite 部署，如何读取不同的 staging, qa 环境文件</a></li></ul> </section> </div> </div> </div> <footer id="footer"> <div class="container"> <p>2018-2024 © <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>