【翻译】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 正确地展开这些缩写,并且加号由于历史原因遗留了下来。需要记住的是,不要使用加号来创建缩写的别名。

原文地址:https://www.cnblogs.com/matchless/p/3012046.html