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中还可对某些样式进行前缀设置。如图:
技巧:快捷键查询
代码错误检查
文件代码检查规则