10 09/2014

emmet 笔记 1 - html Abbreviation

最后更新: Wed Sep 10 2014 12:39:11 GMT+0800

emmet是用来速写代码的利器，主流文本编辑器都有插件。emmet 会根据文件类型（后缀名）来猜你想要干啥。下面以 sublime 为例。

安装用包管理器，或者进入包目录,git clone

Expand Abbreviation 在 sublime 和 Eclipse 都是用 tab 键

html Abbreviations html 简写

.container 然后按 tab 键，生成（以下类推）

<div class="container"></div>

.gsWrapper>ul.gList>li

<div class="gsWrapper">
    <ul class="gList">
        <li></li>
    </ul>
</div>

注意：光标必须在最后面！emmet 处理的是光标之前的代码。

链式语法

> child 子节点
+ sibling 并列
^ climb-up 向上一层

.wrapper>.test>h1+p

<div class="wrapper">
    <div class="test">
        <h1></h1>
        <p></p>
    </div>
</div>

.wrap>.meta>^p

<div class="wrap">
    <div class="meta"></div>
    <p></p>
</div>

.wrap>.meta>^^p

<div class="wrap">
    <div class="meta"></div>
</div>
<p></p>

(ul.l1>li)+(ul.l2>li)

<ul class="l1">
    <li></li>
</ul>
<ul class="l2">
    <li></li>
</ul>

属性用中括号 [ ] 文字用大括号 { }

h1{这是标题}+#content[style=”width:960px”]>.leftCol[style=”float:left;width:600px”]{left}+.rightCol[style=”float:right;width:350px;margin-left:10px;”]{right}

<h1>这是标题</h1>
<div id="content" style="width:960px">
    <div class="leftCol" style="float:left;width:600px">left</div>
    <div class="rightCol" style="float:right;width:350px;margin-left:10px;">right</div>
</div>

i.icon.icon-home.icon-large

<div class="icon icon-home icon-large"></div>

循环（次数）和编号

ul>li*3>a[href=”#$”]{text $$$}

<ul>
    <li><a href="#1">text 001</a></li>
    <li><a href="#2">text 002</a></li>
    <li><a href="#3">text 003</a></li>
</ul>

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

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

table>#row$*4>[colspan=2]

<table>
    <tr id="row1">
        <td colspan="2"></td>
    </tr>
    <tr id="row2">
        <td colspan="2"></td>
    </tr>
    <tr id="row3">
        <td colspan="2"></td>
    </tr>
    <tr id="row4">
        <td colspan="2"></td>
    </tr>
</table>

Lorem ipsum

生成随机单词（做页面 demo 时排版）lorem10 表示 10个单词

ul.generic-list>lorem10.item*4

<ul class="generic-list">
    <li class="item">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem, reiciendis.</li>
    <li class="item">Corrupti, omnis tenetur dignissimos provident itaque atque magnam non labore?</li>
    <li class="item">Vero, fugit dicta quam recusandae voluptatibus consequatur dignissimos eveniet molestias!</li>
    <li class="item">Quos, quis, doloribus perspiciatis et commodi molestias impedit accusantium recusandae?</li>
</ul>

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>

</body>
</html>

Digest of guoshuang