元素类型
在 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]>nt${child}|n<![endif]-->" ... } }, "css": { ... } }
正像上面的代码展示的那样,第一级定义了语法名称。语法一节内元素定义被分成了两个小节: snippets(片段) 和 abbreviations(缩写)。
Snippets(片段)
Snippets(片段)就是普通的代码块,和所有程序编辑中的普通代码一样。可以在这一部分键入任何内容,它将被原样输出。
Abbreviations(缩写)
Abbreviations(缩写)是带有数据提示的真实构建块。由于 Emmet 常用于书写 HTML/XML 标签,缩写定义使用 XML 格式来描述元素。
- 元素名;
- 默认属性;
- 属性的顺序;
- 属性的默认值;
- 元素的关闭标签。
仔细观察上面的 HTML 缩写定义。link
元素的定义是 <link 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.csswang.com/resource/4402
转载请注明本文来源出处。