Emmet使用方法简介

Emmet

Reference: https://blog.csdn.net/qq_41115965/article/details/82054857

*>* 表示父子关系

*+* 表示兄弟关系

*** 表示重复

*^* 表示向上提升一个级别

*()* 表示逻辑关系，是等级更清晰

*#* 表示id属性

*.* 表示class属性

*[]* 表示自定义属性

*$* 表示数字1-n，n 为 * 号后面的数字

*{}* 表示文本内容

*lorem* + n 表示生成n个无意义的单词

实例1：

div.container>ul.content>li.content-item*3 + Tab =>

<div class="container">
    <ul class="content">
        <li class="content-item">123</li>
        <li class="content-item">456</li>
        <li class="content-item">789</li>
    </ul>
</div>

实例2：

div.left>img^div.right + Tab =>

<div class="left">
    <img src="" alt="">
</div>
<div class="right"></div>

实例3：

div.container#container[data-value] + Tab =>

<div class="container" id="container" data-value=""></div>

实例4：

ul.items>li.item$*5 + Tab =>

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

实例5：

a[href=www.baidu.com]{百度一下} + Tab =>

<a href="www.baidu.com">百度一下</a>

实例6：

lorem10 + Tab =>

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt, voluptatum.

css文件

实例1：

w10 + Tab，H10 + Tab，m10-20 + Tab，df + Tab，bdrs10 + Tab =>

.container{
    width: 10px;
    height: 10px;
    margin: 10px 20px;
    display: flex;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
}