Emmet常用语法总结

Emmet is a web-developer's toolkit that can greatly improve your HTML & CSS workflow.

目录

1. HTML缩写

• 嵌套运算符
• 属性运算符
• "Lorem Ipsum"生成器

2. CSS缩写

3. 参考文档及网站链接

一、HTML缩写

嵌套运算符>、+、^、*、()

• > 逐级向下生成嵌套的元素

使用示例：

div>ul>li

输出为：

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

• + 生成同级相邻的元素

使用示例：

div+p+bq

输出为：

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

• ^ 向上一个层级（与>作用效果刚好相反，可以连用）

使用示例：

div>p>span+em^p>a

输出为：

<div>
    <p><span></span><em></em></p>
    <p><a href=""></a></p>
</div>

• *生成多个重复元素

使用示例：

ul>li*5

输出为：

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

• () 改变元素的分组结合顺序

使用示例：

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

输出为：

<div>
    <header>
        <ul>
            <li></li>
            <li></li>
        </ul>
    </header>
    <footer>
        <p></p>
    </footer>
</div>

属性运算符

• 给元素设置id和class

使用示例：

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>

• 设置其他属性（属性值中没有空格的时候可以不用输引号）

使用示例：

input[type=text placeholder=请输入用户名]

输出为：

<input type="text" pleceholer="请输入用户名">

• $ 自动编号

使用示例：

// 示例1:
ul>li.item$*5

// 示例2：指定最小序号
ul>li.item$@3*5

// 示例3：降序
ul>li.item$@-*5

// 示例4：指定降序最小序号
ul>li.item$@-3*5

输出为：

<!-- 示例1 -->
<ul>
    <li class="item1"></li>
    <li class="item2"></li>
    <li class="item3"></li>
    <li class="item4"></li>
    <li class="item5"></li>
</ul>

<!-- 其他输出结果省略 -->

• {} 元素内插入文本

使用示例：

a{Click me}

输出为：

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

"Lorem Ipsum"生成器

使用示例：

// 示例1：默认会生成一段30个单词的文本
lorem

// 示例2：指定文本中单词数
lorem100

// 示例3：重复生成
ul>li>lorem10

二、CSS缩写

• 属性缩写

m10 --> margin: 10px;
m10-20 --> margin: 10px 20px;
m-10--20 --> margin: -10px -20px;
mr10 --> margin-right: 10px;

• 常用别名

p --> %
e --> em
x --> ex

// 示例
w100p -->  100%;

• 色值

#1 --> #111111
#e0 --> #e0e0e0
#fc0 --> #ffcc00

• !important

! --> !important

三、参考文档及网站链接

Emmet Documentation