Emmet快速入门

我心有多路平衡查找树
305 阅读2分钟
  • 标签
    • #前端
    • #代码工具 本文的內容都来自Emmet官方文档，并且只有关于HTML的语法（因为我不是前端，很少需要写CSS），我在其中添加了一些中文注释，方便我以后忘记的时候查阅，其实掌握Emmet很简单，语法不是很复杂，基本上看一遍就能学会。为什么不翻译成中文呢？因为有些名词和句子不知道如何翻译，还不如直接贴原文（dog_head.jpg）可能更有助于理解（主要是复制粘贴省时间）。

想看原文档的请移步：Emmet Documentation

有关Emmet

Emmet官方文档 Emmet is a web-developer’s toolkit that can greatly improve your HTML & CSS workflow Emmet使用缩写词快捷方便的生成HTML和CSS代码，用它写HTML和CSS代码非常高效便捷。

如何使用Emmet

有的IDE集成了Emmet插件，不需要再下载安装，但是有的编辑器没有集成，可以去编辑器的插件市场下载安装，或者去Emmet官网下载。 Emmet使用缩写词来生成代码，这个缩写词长得很像CSS的选择器，输入下面的代码，然后按下tab键（一般都是tab键）

#page>div.logo+ul#navigation>li*5>a{Item $}

会生成以下代码：

<div id="page">
    <div class="logo"></div>
    <ul id="navigation">
		<li><a href="">Item 1</a></li>
		<li><a href="">Item 2</a></li>
		<li><a href="">Item 3</a></li>
		<li><a href="">Item 4</a></li>
		<li><a href="">Item 5</a></li>
    </ul>
</div>

很方便有没有

Emmet语法

Elements

Emmet没有预先设定的标签名，所以可以使用任何元素名来生成标签。

You can use elements’ names like div or p to generate HTML tags. Emmet doesn’t have a predefined set of available tag names, you can write any word and transform it into a tag: div → <div></div>, foo → <foo></foo> and so on.

Nesting operators

Child: >（子节点）

You can use > operator to nest elements inside each other:

div>ul>li 

<!-- will produce -->

<div>
	<ul>
		<li></li>
	</ul>
</div>

Sibling: + （兄弟节点）

Use + operator to place elements near each other, on the same level:

div+p+bq

<!-- will produce -->

<div></div>
<p></p>
<blockquote></blockquote>

Climb-up: ^（上升）

使用场景

例如这个缩写词：div+div>p>span+em 会生成：

<div></div>
<div>
    <p><span></span><em></em></p>
</div>

生成的代码，em标签是 p标签的孩子，但是你的意图不是这样的，想让em 标签和 p 标签是兄弟，那么怎么做呢？

^可以将标签上升一个等级，例如

div+div>p>span+^em

会生成下面的代码：

<div></div>
<div>
    <p><span></span></p>
    <em></em>
</div>

With > operator you’re descending down the generated tree and positions of all sibling elements will be resolved against the most deepest element:

div+div>p>span+em

will be expanded to

<div></div>
<div>
    <p><span></span><em></em></p>
</div>

With ^ operator, you can climb one level up the tree and change context where following elements should appear:

div+div>p>span+em^bq

...outputs to

<div></div>
<div>
    <p><span></span><em></em></p>
    <blockquote></blockquote>
</div>

You can use as many ^ operators as you like, each operator will move one level up:

可以使用多个 ^来上升多个等级

div+div>p>span+em^^^bq

...will output to

<div></div>
<div>
    <p><span></span><em></em></p>
</div>
<blockquote></blockquote>

Multiplication: *（加倍）

使用 * 可以生成多个同样的元素

With * operator you can define how many times element should be outputted:

ul>li*5

...outputs to

<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

Grouping: ()（分组）

括号用来对元素进行分组

Parenthesises are used by Emmets’ power users for grouping subtrees in complex abbreviations:

div>(header>ul>li*2>a)+footer>p

...expands to

<div>
    <header>
        <ul>
            <li><a href=""></a></li>
            <li><a href=""></a></li>
        </ul>
    </header>
    <footer>
        <p></p>
    </footer>
</div>

If you’re working with browser’s DOM, you may think of groups as Document Fragments: each group contains abbreviation subtree and all the following elements are inserted at the same level as the first element of group.

用分组，也就是小括号可以将括号内的缩写词变成一个整体，括号前和括号后的操作符只把括号里的缩写词当作一个整体。

分组可以嵌套

You can nest groups inside each other and combine them with multiplication * operator:

(div>dl>(dt+dd)*3)+footer>p

...produces

<div>
    <dl>
        <dt></dt>
        <dd></dd>
        <dt></dt>
        <dd></dd>
        <dt></dt>
        <dd></dd>
    </dl>
</div>
<footer>
    <p></p>
</footer>

With groups, you can literally write full page mark-up with a single abbreviation, but please don’t do that.

Attribute operators（属性操作符）

Attribute operators are used to modify attributes of outputted elements. For example, in HTML and XML you can quickly add class attribute to generated element.

ID and CLASS

In CSS, you use elem#id and elem.class notation to reach the elements with specified id or class attributes. In Emmet, you can use the very same syntax to add these attributes to specified element:

div#header+div.page+div#footer.class1.class2.class3

...will output

<div id="header"></div>
<div class="page"></div>
<div id="footer" class="class1 class2 class3"></div>
Custom attributes （客制化属性）

使用中括号[]客制化属性

其中属性值的双引号可以不写，但是属性值和 = 之间不能有空格。

只写属性名的话，会生成空属性，如 td[colspan title] 会生成 <td colspan="" title="">

You can use [attr] notation (as in CSS) to add custom attributes to your element:

td[title="Hello world!" colspan=3]

...outputs

<td title="Hello world!" colspan="3"></td>
  • You can place as many attributes as you like inside square brackets.
  • You don’t have to specify attribute values: td[colspan title] will produce <td colspan="" title=""> with tabstops inside each empty attribute (if your editor supports them).
  • You can use single or double quotes for quoting attribute values.
  • You don’t need to quote values if they don’t contain spaces: td[title=hello colspan=3] will work.
Item numbering:$（自动编号）

With multiplication * operator you can repeat elements, but with $ you can number them. Place $ operator inside element’s name, attribute’s name or attribute’s value to output current number of repeated element:

ul>li.item$*5

...outputs to

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

You can use multiple $ in a row to pad number with zeroes:

ul>li.item$$$*5

...outputs to

<ul>
    <li class="item001"></li>
    <li class="item002"></li>
    <li class="item003"></li>
    <li class="item004"></li>
    <li class="item005"></li>
</ul>
Changing numbering base and direction（改变基数和增长方向）

With @ modifier, you can change numbering direction (ascending or descending) and base (e.g. start value).

For example, to change direction, add @- after $:

用 @ 符号可以改变数字的增长方向（增大或减小）和基数。

需要注意的是 * 后面的数字有时表示个数，即生成标签的个数，有时也可以理解为基数

  • 当@ 符号后面没有跟数字的时候，可以理解为基数（其实这个时候也是作为次数的）
  • 当@ 符号后面跟有数字的时候，这时候就可以理解为个数（其实这个时候也仅仅表示次数）

表示增长方向的符号是跟在 @ 后面数字之前的，增大不用写，减小需要写上减号。

ul>li.item$@-*5
<!-- 表示增长方向为减小 -->

…outputs to

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

To change counter base value, add @N modifier to $:

ul>li.item$@3*5

…transforms to

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

You can use these modifiers together:

ul>li.item$@-3*5

…is transformed to

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

Text: {}（文本）

使用花括号来添加文本，也就是标签中的文字。

You can use curly braces to add text to element:

a{Click me}

...will produce

<a href="">Click me</a>

需要注意的是，{text}也是一个元素

Note that {text} is used and parsed as a separate element (like, div, p etc.) but has a special meaning when written right after element. For example, a{click} and a>{click} will produce the same output, but a{click}+b{here} and a>{click}+b{here} won’t:

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

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

In second example the <b> element is placed inside <a> element. And that’s the difference: when {text} is written right after element, it doesn’t change parent context. Here’s more complex example showing why it is important:

p>{Click }+a{here}+{ to continue}

...produces

<p>Click <a href="">here</a> to continue</p>

In this example, to write Click here to continue inside <p> element we have explicitly move down the tree with > operator after p, but in case of a element we don’t have to, since we need <a> element with here word only, without changing parent context.

For comparison, here’s the same abbreviation written without child > operator:

p{Click }+a{here}+{ to continue}

...produces

<p>Click </p>
<a href="">here</a> to continue
avatar
文章
阅读
粉丝