Emmet语法

时间  2019-11-16
标签 emmet 语法 繁體版
原文   原文链接

Emmet 语法

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

HTML 缩写

元素

使用元素名生成 HTML 标签，Emmet 没有预约义的有效元素名的集合，能够将任何单词当作标签来生成和使用。html

嵌套运算符

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

子：>

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

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

兄弟：+

使用+运算符将相邻其余元素做为同级svg

<!-- 简写 -->
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>
<!-- 使用分组，可使用单个缩写逐个写出整页的标签，不过尽可能不要这么作。 -->

编号：$

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

<!-- 简写 -->
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>

改变编号基数和方向url

  • 使用 @ ，能够改变数字的走向（升序或降序）和基数（例如起始值）。-
  • 在 $ 后添加 @- 来改变数字走向：
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>

文本：{}

能够用花括号向元素中添加文本：spa

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:code

<!-- 简写 -->
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

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程