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

青旅半醒 2021-09-16 05:10 324阅读 0赞

## Emmet代码补全语法 ##

### html文件 ###

![70][]

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

> ***> *** 表示父子关系
> 
> ***+***  表示兄弟关系
> 
> ***\****  表示重复
> 
> ***^ *** 表示向上提升一个级别
> 
> ***() *** 表示逻辑关系，是等级更清晰
> 
> ***\# *** 表示id属性
> 
> ***. *** 表示class属性
> 
> ***\[\]***  表示自定义属性
> 
> ***$***  表示数字1-n，n 为 \* 号后面的数字
> 
> ***\{\} *** 表示文本内容
> 
> ***lorem*** \+ n  表示生成n个无意义的单词

![70 1][]

实:1：div.container>ul.content>li.content-item\*3 + Tab =>

实例2：div.left>img^div.right + Tab =>

实例3：div.container\#container\[data-value\] + Tab =>

实例4：ul.items>li.item$\*5 + Tab =>

实例5：a\[href=www.baidu.com\]\{百度一下\} + Tab =>

实例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中还可对某些样式进行前缀设置。如图：

![70 2][]

技巧：快捷键查询

![70 3][]

### 代码错误检查  ###

![70 4][]

![70 5][]

###  文件代码检查规则 ###

![70 6][]

[70]: /images/20210802/b13b590ffe9c439faf5fb4214e1f1a5e.png
[70 1]: /images/20210802/7ea7db46e7a34cb8bb335311d2d16da1.png
[70 2]: /images/20210802/663bdc02bc924bb187d2bb0b72f32477.png
[70 3]: /images/20210802/fa997fbba7354f3c83f95cac6215a4c9.png
[70 4]: /images/20210802/8e7d0934389d4b2184eee35dd3c8e23f.png
[70 5]: /images/20210802/99ef75e2f2aa432b8576f5e22131849b.png
[70 6]: /images/20210802/510f172d91274feb80490daaaa65487e.png