是否有可用的 HTML 速记版本？

Posted 2023-02-21

【中文标题】是否有可用的 HTML 速记版本？

【英文标题】：Is there a shorthand version of HTML available?

【发布时间】：2011-03-01 17:06:09

【问题描述】：

我记得几个月前读过一篇关于 html 的速记版本或扩展的文章。它的目的是通过删除结束标记使 HTML 代码更加简洁，并且它可能还允许某种循环。我现在想使用它，但我似乎不记得它叫什么了。

在网上搜索，我找到了Haml，但是Haml语法看起来不像我记得的文章中的例子。文章中的语法使用了直角括号，这是缩进的一种替代。

这是什么语言？

【参考方案1】：

更新

Zen Coding 已重命名为 Emmet 并拥有 codebase at GitHub。

---

我认为您正在寻找 Zen Coding，可以在 http://code.google.com/p/zen-coding/ 找到。

Zen Coding 是一个编辑器插件 高速 HTML、XML、XSL（或任何 其他结构化代码格式）编码 和编辑。这个插件的核心 是一个强大的缩写引擎 这使您可以扩展 表达式——类似于 CSS 选择器——到 HTML 代码中。

示例

div#page>div.logo+ul#navigation>li*5>a

扩展到

<div id="page">
  <div class="logo"></div>
  <ul id="navigation">
    <li><a href=""></a></li>
    <li><a href=""></a></li>
    <li><a href=""></a></li>
    <li><a href=""></a></li>
    <li><a href=""></a></li>
  </ul>
</div>

【参考方案2】：

http://docs.emmet.io/abbreviations/ 是我最喜欢的速记

报价>>

Here’s an example: this abbreviation

#page>div.logo+ul#navigation>li*5>aItem $
...can be transformed into

<div id="page">
    <div class="logo"></div>
    <ul id="navigation">
        <li><a href="">Item 1</a></li>
        <li><a href="">Item 2</a></li>
        <li><a href="">Item 3</a></li>
        <li><a href="">Item 4</a></li>
        <li><a href="">Item 5</a></li>
    </ul>
</div>

...with just a single key stroke. In many editors (such as Eclipse, Sublime Text 2, Espresso etc.) plugins will also generate proper tabstop marks so you can quickly traverse between important places of generated code with the Tab key.

【参考方案3】：

回答一般问题（从标题中）是的，有很多。

以下是我为自己的工作看过的一些：

Jade Haml SHH Slim

如果您在 cmets 中添加更多内容，我可以将它们添加到答案中（它们也将存在于 cmets 中）。