Emmet-让你的编码速度飞起来

版权声明： https://blog.csdn.net/qq_41115965/article/details/82054857

Emmet代码补全语法

html文件

常用的字符有：>  +  ^  *  ()

>  表示父子关系

+  表示兄弟关系

*  表示重复

^  表示向上提升一个级别

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

#  表示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.

注意事项：在嵌套结构中利用Tab键生成代码的时候，如 div.container>ul.content>li.content-item*3 ，不能有空格，并且需要光标定位到最后。

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;
}

备注：在Webstorm中还可对某些样式进行前缀设置。如图：

技巧：快捷键查询

代码错误检查 

 文件代码检查规则