写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/1353.htm" title="10个必需的iOS开发工具和资源">10个必需的iOS开发工具和资源</a><p>界面总不是一件很容易事，尤其是iPhone/iPad的界面，做过iOS开发的程序员，一定会感到开发iPhone/iPad的界面是一件多么不容易的事。下面的文章来自10 Esse…</p></div><div><a href="https://www.hesudu.com/1156.htm" title="老手是这样教新手编程的">老手是这样教新手编程的</a><p>comp.lang.c全球最大的C语言新闻组，其Google的链接是：http://groups.google.com/group/comp.lang.c/ 可惜被GFW了。在…</p></div><div><a href="https://www.hesudu.com/x2EZd.htm" title="带公网 ip（3m 小水管）的云主机能用来干点啥？">带公网 ip（3m 小水管）的云主机能用来干点啥？</a><p>某云的 2c2g 3m 小水管机器能用来玩点啥吗？现在只装了个 FRP 局域网打洞用，CF tunnel 有时候水土不服。。。。不玩 PT 对我来说云主机最大用途，…</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/297.htm" title="360 真 TM 无耻！">360 真 TM 无耻！</a></li><li><a href="https://www.hesudu.com/PuDSD.htm" title="Ubuntu 下解压 gz 文件，如何限制速度？">Ubuntu 下解压 gz 文件，如何限制速度？</a></li><li><a href="https://www.hesudu.com/1347.htm" title="软件公司的两种管理方式">软件公司的两种管理方式</a></li><li><a href="https://www.hesudu.com/shqqa.htm" title="公司的测试工作 5 年了问的问题还是有点弱智怎么办？">公司的测试工作 5 年了问的问题还是有点弱智怎么办？</a></li><li><a href="https://www.hesudu.com/c6DNS.htm" title="如何 mybatisplus 项目中覆盖 jar 中的 mapper.xml 文件">如何 mybatisplus 项目中覆盖 jar 中的 mapper.xml 文件</a></li><li><a href="https://www.hesudu.com/VeWQ0.htm" title="大家都看的外网技术博客都有什么？">大家都看的外网技术博客都有什么？</a></li><li><a href="https://www.hesudu.com/KIEsP.htm" title="统计慢的报表一般怎么处理。">统计慢的报表一般怎么处理。</a></li><li><a href="https://www.hesudu.com/DAE6i.htm" title="硬肝 1 个晚上，一条代码也不懂的小白，弄了一个机器人信息转发器，由此引发 2 个思考">硬肝 1 个晚上，一条代码也不懂的小白，弄了一个机器人信息转发器，由此引发 2 个思考</a></li><li><a href="https://www.hesudu.com/1207.htm" title="你准备使用 HTML 5 吗？">你准备使用 HTML 5 吗？</a></li><li><a href="https://www.hesudu.com/165.htm" title="估计是老问题了， vue 在组件中 created 里用 ajax 或者 axios 请求数据，但是数据在 mounted 前没返回">估计是老问题了， vue 在组件中 created 里用 ajax 或者 axios 请求数据，但是数据在 mounted 前没返回</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/Np6bP.htm" title="你喜欢使用 Java 下的哪个 web 框架？">你喜欢使用 Java 下的哪个 web 框架？</a></li><li><a href="https://www.hesudu.com/C6VEU.htm" title="有了 docker 后大家还会安装本地版本吗？">有了 docker 后大家还会安装本地版本吗？</a></li><li><a href="https://www.hesudu.com/ccbGT.htm" title="corsor(vscode)写 Java 项目遇到的问题记录帖">corsor(vscode)写 Java 项目遇到的问题记录帖</a></li><li><a href="https://www.hesudu.com/UzPmc.htm" title="抖音到底是如何识别 Android 设备的">抖音到底是如何识别 Android 设备的</a></li><li><a href="https://www.hesudu.com/gUq4y.htm" title="你们是怎么成功申请 Oracle 云的？">你们是怎么成功申请 Oracle 云的？</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/689.htm" title="旧手机当 Linux 服务器的吐槽和讨论">旧手机当 Linux 服务器的吐槽和讨论</a></li><li><a href="https://www.hesudu.com/vtf3c.htm" title="坐标教育公司，已经给老板立了军令状，准备搞一个 Agent 来做 B 端老师的学习服务，年底寒假前搞不定就主动跑路。">坐标教育公司，已经给老板立了军令状，准备搞一个 Agent 来做 B 端老师的学习服务，年底寒假前搞不定就主动跑路。</a></li><li><a href="https://www.hesudu.com/trPAu.htm" title="作为创业小团队或者独立开发， Node.js 好还是.NET 好">作为创业小团队或者独立开发， Node.js 好还是.NET 好</a></li><li><a href="https://www.hesudu.com/TjRVS.htm" title="NotionNext 这个项目有点恐怖啊，在文档页面按 f12 会卡死电脑，这是合理的防御手段吗">NotionNext 这个项目有点恐怖啊，在文档页面按 f12 会卡死电脑，这是合理的防御手段吗</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>