Emmet语法

Emmet 语法

空格是 Emmet 停止缩写解析的标识符。

HTML 缩写

元素

使用元素名生成 HTML 标签，Emmet 没有预定义的有效元素名的集合，可以将任何单词当做标签来生成和使用。

嵌套运算符

嵌套运算符用于以缩写的方式安排元素在生成文档树中的位置：将其放在内部或成为相邻的元素。

子：>

可以使用>运算徐符指定嵌套元素在另一个元素内部。

<!-- 简写 -->
div>ul>li
<!-- 生成 -->
<div>
  <ul>
    <li></li>
  </ul>
</div>

兄弟：+

使用+运算符将相邻其他元素作为同级

<!-- 简写 -->
div+p+bq
<!-- 生成 -->
<div></div>
<p></p>
<blockquote></blockquote>

上升：^

<!-- 使用 > 运算符将会降低所有后续所有元素在生成树中的级别，每一级的兄弟元素也被解析成相同深度的元素： -->
<!-- >运算符 -->
<!-- 简写 -->
div+div>p>span+em
<!-- 生成 -->
<div></div>
<div>
  <p><span></span><em></em></p>
</div>
<!-- 使用 ^ 运算符，能够提升元素在生成树中的一个级别，并同时影响其后的元素： -->
<!-- ^运算符 -->
<!-- 简写 -->
div+div>p>span+em^bq
<!-- 生成 -->
<div></div>
<div>
  <p><span></span><em></em></p>
  <blockquote></blockquote>
</div>
<!-- 可以连续使用多个 ^ 运算符，每次提高一个级别： -->
<!-- 简写 -->
div+div>p>span+em^^^bq
<!-- 生成 -->
<div></div>
<div>
  <p><span></span><em></em></p>
</div>
<blockquote></blockquote>

重复：*

<!-- 使用 * 运算符可以定义一组元素： -->
<!-- 简写 -->
ul>li*5
<!-- 生成 -->
ul>li*5
<ul>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>

分组：（）

<!-- 括号用于在复杂的 Emmet 缩写中处理一组子树： -->
<!-- 简写 -->
div>(header>ul>li*2>a)+footer>p
<!-- 生成 -->
<div>
  <header>
    <ul>
      <li><a href=""></a></li>
      <li><a href=""></a></li>
    </ul>
  </header>
  <footer><p></p></footer>
</div>
<!-- 如果想与浏览器 DOM 协同工作，可能想要对文档片段分组：每个组包含一个子树，所有的后续元素都插入到与组中第一个元素相同的级别中。
能够在组中嵌套组并且使用 * 运算符绑定它们： -->
<!-- 简写 -->
(div>dl>(dt+dd)*3)+footer>p
<!-- 生成 -->
<div>
  <dl>
    <dt></dt>
    <dd></dd>
    <dt></dt>
    <dd></dd>
    <dt></dt>
    <dd></dd>
  </dl>
</div>
<footer><p></p></footer>
<!-- 使用分组，可以使用单个缩写逐个写出整页的标签，不过尽量不要这么做。 -->

编号：$

使用 * 运算符可以重复生成元素，如果带 $ 就可以为它们编号。把 $ 放在元素名、属性名或者属性值中，将为每个元素生成正确的编号：

<!-- 简写 -->
ul>li.item$*5
<!-- 生成 -->
<ul>
  <li class="item1"></li>
  <li class="item2"></li>
  <li class="item3"></li>
  <li class="item4"></li>
  <li class="item5"></li>
</ul>

<!-- 使用多 $ 可以填充前导的零： -->
ul>li.item$$$*5

<ul>
  <li class="item001"></li>
  <li class="item002"></li>
  <li class="item003"></li>
  <li class="item004"></li>
  <li class="item005"></li>
</ul>

改变编号基数和方向

使用 @ ，可以改变数字的走向（升序或降序）和基数（例如起始值）。-
在 $ 后添加 @- 来改变数字走向：

ul>li.item$@-*5

<ul>
  <li class="item5"></li>
  <li class="item4"></li>
  <li class="item3"></li>
  <li class="item2"></li>
  <li class="item1"></li>
</ul>

在 $ 后面添加 @N 改变编号的基数：

ul>li.item$@3*5

<ul>
  <li class="item3"></li>
  <li class="item4"></li>
  <li class="item5"></li>
  <li class="item6"></li>
  <li class="item7"></li>
</ul>

ul>li.item$@-3*5

<ul>
  <li class="item7"></li>
  <li class="item6"></li>
  <li class="item5"></li>
  <li class="item4"></li>
  <li class="item3"></li>
</ul>

文本：{}

可以用花括号向元素中添加文本：

a{Click me}
<!-- 将生成： -->
<a href="">Click me</a>
<!-- 注意，这个 {text} 是被当成独立元素解析的（类似于 div, p ），但当其跟在其它元素后面时则有所不同。例如， a{click} 和 a>{click} 产生相同的输出，但是 a{click}+b{here} 和 a>{click}+b{here} 的输出就不同了： -->

<!-- a{click}+b{here} -->
<a href="">click</a><b>here</b>

<!-- a>{click}+b{here} -->
<a href="">click<b>here</b></a>
<!-- 在第二示例中， <b> 元素放在了 <a> 元素的里面。差别如下：当 {text} 写在元素的后面，它不影响父元素的上下文。下面是展示这种差别的重要性的较复杂的例子： -->

p>{Click }+a{here}+{ to continue}
<!-- 生成： -->
<p>Click <a href="">here</a> to continue</p>

<!-- 在这个例子里， 我们用 > 运算符明确的将 Click here to continue 下移一级，放在 <p> 元素内，但对于 a 元素的内容就不需要了，因为 <a> 仅有 here 这一部分内容，它不改变父元素的上下文。
作为比较，下面是不带有 > 运算符的相同缩写： -->

p{Click }+a{here}+{ to continue}
<!-- 生成： -->
<p>Click</p>
<a href="">here</a> to continue

其他

<!-- 隐式标签 -->
<!-- 缩写：.class -->
<div class="class"></div>
<!-- 缩写：em>.class -->
<em><span class="class"></span></em>
<!-- 缩写：ul>.class -->
<ul>
  <li class="class"></li>
</ul>
<!-- 缩写：table>.row>.col -->
<table>
  <tr class="row">
    <td class="col"></td>
  </tr>
</table>

<!-- HTML所有未知的缩写都会转换成标签，例如，foo → <foo></foo> -->

<!-- 缩写：! -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
  </head>
  <body></body>
</html>
<!-- 缩写：a -->
<a href=""></a>
<!-- 缩写：a:link -->
<a href="http://"></a>
<!-- 缩写：a:mail -->
<a href="mailto:"></a>
<!-- 缩写：abbr -->
<abbr title=""></abbr>
<!-- 缩写：acronym -->
<acronym title=""></acronym>
<!-- 缩写：base -->
&l

属性运算符

属性运算符用于编辑所生成的元素的属性，在 HTML 和 XML 中可以快速地为生成元素添加 class 属性。

ID 和 CLASS

在 CSS 中，可以使用 elem#id 和 elem.class 注解来达到为元素指定 id 或 class 属性的目的。在 Emmet 中，可以使用几乎相同的语法来为指定的元素添加这些属性：element:

<!-- 简写 -->
div#header+div.page+div#footer.class1.class2.class3
<!-- 生成 -->
<div id="header"></div>
<div class="page"></div>
<div id="footer" class="class1 class2 class3"></div>

自定义属性

可以使用 [attr] 注解（就像在 CSS 中一样）来为元素添加自定义属性：

<!-- 简写 -->
td[title="Hello world!" colspan=3]
<!-- 生成 -->
<td title="Hello world!" colspan="3"></td>

能够在方括号中放置许多属性，
可以不为属性指定值： td[colspan title] 将生成，如果你的编辑器支持，可以使用 tab 来跳到每个空属性中填写。
属性可以用单引号或双引号作为定界符。
如果属性不包含空格，不需要用定界符括住它：td[title=hello colspan=3] 是正确的。

css 缩写

1 值：
w100 =>width:100px;
h10p+m5e =>height:10%;margin:5em
单位别名列表：p => %;e =>em;x =>ex
2 附加属性：

/* @f，可以生成： Css 代码  */
@font-face {
  font-family: ;
  src: url();
}
/* 一些其他的属性，比如background-image、border-radius、font、@font-face,text-outline、text-shadow等额外的选项，可以通过“+ ”符号来生成，比如输入@f+，将生成：Css代码 */
@font-face {
  font-family: "FontName";
  src: url("FileName.eot");
  src: url("FileName.eot?#iefix") format("embedded-opentype"), url("FileName.woff")
      format("woff"), url("FileName.ttf") format("truetype"), url("FileName.svg#FontName")
      format("svg");
  font-style: normal;
  font-weight: normal;
}

3 模糊匹配
如果有些缩写你拿不准，Emmet 会根据你的输入内容匹配最接近的语法，比如输入 ov:h、ov-h、ovh 和 oh，生成的代码是相同的：Css 代码 overflow: hidden;
4 针对不同编辑器的插件

Emmet 支持的编辑器如下（链接为针对该编辑器的 Emmet 插件）： Sublime Text 2 TextMate 1.x Eclipse/Aptana Coda 1.6 and 2.x Espresso Chocolat （通过“Install Mixin”对话框添加) Komodo Edit/IDE （通过 Tools → Add-ons 菜单添加) Notepad++ PSPad CodeMirror2/3 Brackets</p>

posted @ 2019-01-14 17:08 南风过境（瑾）阅读(324) 评论(0) 编辑收藏举报

刷新页面返回顶部