emmet使用手册

发表于 更新于 分类于

截取自emmet官网：https://docs.emmet.io/abbreviations/syntax/详情可去[官网](https://docs.emmet.io/abbreviations/syntax/)查看

Child: >

You can use 

1
div>ul>li

…will produce

1
2
3
4
5
<div>
    <ul>
        <li>li>
    ul>
div>

Sibling: +

Use 

1
div+p+bq

…will output

1
2
3
<div>div>
<p>p>
<blockquote>blockquote>

Climb-up: ^

With 

1
div+div>p>span+em

…will be expanded to

1
2
3
4
<div>div>
<div>
    <p><span>span><em>em>p>
div>

With 

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

…outputs to

1
2
3
4
5
<div>div>
<div>
    <p><span>span><em>em>p>
    <blockquote>blockquote>
div>

You can use as many 

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

…will output to

1
2
3
4
5
<div>div>
<div>
    <p><span>span><em>em>p>
div>
<blockquote>blockquote>

Multiplication: *

With 

1
ul>li*5

…outputs to

1
2
3
4
5
6
7
<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:

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

…expands to

1
2
3
4
5
6
7
8
9
10
11
<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:

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

…produces

1
2
3
4
5
6
7
8
9
10
11
12
13
<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

ID and CLASS

In CSS, you use 

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

…will output

1
2
3
<div id="header">div>
<div class="page">div>
<div id="footer" class="class1 class2 class3">div>

Custom attributes

You can use 

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

…outputs

1
<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 ``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 

1
ul>li.item$*5

…outputs to

1
2
3
4
5
6
7
<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 

1
ul>li.item$$$*5

…outputs to

1
2
3
4
5
6
7
<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

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

1
ul>li.item$@-*5

…outputs to

1
2
3
4
5
6
7
<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 $:

1
ul>li.item$@3*5

…transforms to

1
2
3
4
5
6
7
<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:

1
ul>li.item$@-3*5

…is transformed to

1
2
3
4
5
6
7
<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:

1
a{Click me}

…will produce

1
<a href="">Click mea>

Note that ,petc.) but has a special meaning when written right after element. For example,a{click}anda>{click}will produce the same output, buta{click}+b{here}anda>{click}+b{here}won’t:
element is placed inside 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

Click herea> to continuep> In this example, to write Click here to continue inside element we have explicitly move down the tree with > operator after p, but in case of aelement we don’t have to, since we need 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

Click p> herea> to continue Notes on abbreviation formattingWhen you get familiar with Emmet’s abbreviations syntax, you may want to use some formatting to make your abbreviations more readable. For example, use spaces between elements and operators, like this:(header > ul.nav > li*5) + footer But it won’t work, because space is a stop symbol where Emmet stops abbreviation parsing.