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教程