【翻译】Emmet (Zen Coding) 元素类型

元素类型

在 HTML 和 XML 文档中，当展开缩写时，所有缩写部分都实时转换成 HTML/XML 标签。但是某些标签——如 a 或者 img——转换成带有预定义属性的元素： <a href=""></a> 的 <img src="" alt="" />。Emmet 怎么知道什么时候添加所需的属性呢？

所有元素定义都以如下格式存放在 snippets.json 文件中：

{
    "html": {
        "abbreviations": {
            "a": "<a href=\"\">",
            "link": "<link rel=\"stylesheet\" href=\"\" />"
            ...
        },
        "snippets": {
            "cc:ie6": "<!--[if lte IE 6]>\n\t${child}|\n<![endif]-->"
            ...
        }
    },

    "css": {
        ...
    }
}

正像上面的代码展示的那样，第一级定义了语法名称。语法一节内元素定义被分成了两个小节： snippets（片段） 和 abbreviations（缩写）。

Snippets（片段）

Snippets（片段）就是普通的代码块，和所有程序编辑中的普通代码一样。可以在这一部分键入任何内容，它将被原样输出。

Abbreviations（缩写）

Abbreviations（缩写）是带有数据提示的真实构建块。由于 Emmet 常用于书写 HTML/XML 标签，缩写定义使用 XML 格式来描述元素。

Emmet 解析缩写定义并检索以下数据：

• 元素名；
• 默认属性；
• 属性的顺序；
• 属性的默认值；
• 元素的关闭标签。

仔细观察上面的 HTML 缩写定义。link 元素的定义是 <link rel="stylesheet" href="" /> （双绰号被 JSON 忽略；或者用单绰号代替）。这个定义是说此标签是用来生成 link 的缩写，它被命名为 link 并且饮食两个属性：带有默认值 “stylesheet” 的 rel 和带有空值的 href （严格遵造顺序），并且生成的元素包含关闭标签。

当 link 缩写被展开时，将得到如下 HTML 输出：

<link rel="stylesheet" href="">

允许覆盖默认属性或者添加新属性：

link[rel=prefetch title="Hello world"]

生成：

<link rel="prefetch" href="" title="Hello world">

还可以添加子元素，这将强制  Emmet 输出关闭标签：

link>xsl:apply-templates

将输出：

<link rel="stylesheet" href="">
    <xsl:apply-templates></xsl:apply-templates>
</link>

Aliases（别名）

在 snippets.json 的缩写一节，还能够定义别名：常用缩写的短写形式。别名能够用来定义：

• 长标签的短名字；
• 常用缩写的引用。

在 snippets.json 文件中，可以找到如下定义：

...
"html": {
    "abbreviations": {
        "bq": "blockquote",
        "ol+": "ol>li"
    }
}

上面的示例中，当展开 bq 缩写，Emmet 会找到 blockquote 缩写的定义。如果它不存在，将简单的输出 <blockquote></blockquote> 元素。ol+ 缩写的输出结果与 ol>li 相同。

ol+ 定义可能会产生歧义，因为它的末尾包含 + ， + 还是 sibling（兄弟）运算符。Emmet 正确地展开这些缩写，并且加号由于历史原因遗留了下来。需要记住的是，不要使用加号来创建缩写的别名。