emmet 语法

关于 HTML 中的 emmet 语法心得

---

一 . 生成带有id,class的HTML标签

1 .

#abc  生成一个ID名为 abc 的 div

效果如下:

<div id="abc"></div>

2 .

ol#bbb.ddd  生成一个ID为bbb, class为 ddd 的ol

效果如下

<ol id="bbb" class="ddd"></ol>

二 . 生成后代 “ > ”

div.aaa>ol>li  生成一个有序列表，并且被class 为aaa的div包裹

效果如下：

<div class="aaa">
        <ol>
            <li></li>
        </ol>
 </div>

三 . 生成兄弟标签 “ + ”

div+p+span  生成兄弟

效果如下：

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

四 . 生成上级标签 “ ^ ”

上级 （Climb-up）元素是什么意思呢？前面咱们说过了生成下级元素的符号“>”，当使用 div>ul>li 的指令之后，再继续写下去，那么后续内容都是在 li 下级的。如果我想编写一个跟 ul 平级的 a 标签，那么我需要先用 “^” 提升一下层次。例如：

div>ul>li^a

效果如下：

<div>
   <ul>
        <li></li>
  </ul>
  <a href=""></a>
</div>

如果我想生成一个与div平级的span，那么就再上升一个层级，多用一个^

div>ul>li^^a

效果如下：

    <div>
        <ul>
            <li></li>
        </ul>
    </div>
    <a href=""></a>

五 . 复制生成多份 “ * num ”

ol>li*5

效果如下：

<ol>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ol>

六 . 生成分组“ （） ”

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

效果如下：

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

可与复制多份一起使用

div>(tr>td*5)*3+div>p

效果如下：

    <div>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </div>+div>p

七 . 生成自定义属性 “[ sttr]”

a 标签中往往需要附带 href 属性和 title 属性，如果我们想生成一个 href 为 http://google.com, title 为“图片”的 a 标签，可以这样写：

a[href="www.google.com" title="图片"]*5

效果如下：

    <a href="www.google.com" title="图片"></a>
    <a href="www.google.com" title="图片"></a>
    <a href="www.google.com" title="图片"></a>
    <a href="www.google.com" title="图片"></a>
    <a href="www.google.com" title="图片"></a>

八 . 生成内容编号

ol>li.it$*5

效果如下：

<ol>
    <li class="it1"></li>
    <li class="it2"></li>
    <li class="it3"></li>
    <li class="it4"></li>
    <li class="it5"></li>
</ol>

如果需要生成多为编号

ol>li.it$$$*5

效果如下：

<ol>
    <li class="it001"></li>
    <li class="it002"></li>
    <li class="it003"></li>
    <li class="it004"></li>
    <li class="it005"></li>
</ol>

实现倒排序 （在$后加 “ @-”）

ol>li.it$@-*5

效果如下：

<ol>
    <li class="it5"></li>
    <li class="it4"></li>
    <li class="it3"></li>
    <li class="it2"></li>
    <li class="it1"></li>
</ol>

有可指定排序的开始编号：

ol>li.it$@3*5

效果如下：

<ol>
    <li class="it3"></li>
    <li class="it4"></li>
    <li class="it5"></li>
    <li class="it6"></li>
    <li class="it7"></li>
</ol>

倒排序同理：只需在@后加 -

九 . 生成文本内容

ol>li.it{hello wold}

效果如下：

<ol>
    <li class="it">hello wold</li>
</ol>

总结：

多练习