12 views

HBuilderX的快捷输入(Emmet插件)

https://blog.csdn.net/PrisonersDilemma/article/details/89185629

HBuilder或HBuilderX已经默认安装Emmet插件。
通过输入代码块按下Tab键即可快速撸码。
一、嵌套 >
如:输入div>ul>li,按下Tab键
效果:

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

1
2
3
4
5
二、并列 +
如:输入div+p,按下Tab键
效果:

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

1
2
三、重复 *
如:输入li*3,按下Tab键
效果:

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

1
2
3
四、返回 ^
如:输入ul>li*3^p,按下Tab键
效果:

1
2
3
4
5
6
五、分组 ()
如:输入(ul>li*2)+p,按下Tab键
效果:

1
2
3
4
5
六、属性 []
如:输入div#header+div.box2+div.box3#footer,按下Tab键
效果:

1
2
3
此外,输入input[name=user value=123],按下Tab键
效果:


1
七、编序 $
如:输入ul>li.$*3,按下Tab键
效果:

1
2
3
4
5
八、内容 {}
如:输入ul>li{$}*3,按下Tab键
效果:

  • 1
  • 2
  • 3

1
2
3
4
5
九、其他
在CSS中还有许多快捷输入机巧。如:
输入w100,按下Tab键,快捷输入width: 100px;
输入h100,按下Tab键,快捷输入height: 100px;
输入poa,按下Tab键,快捷输入position: absolute;
————————————————
版权声明:本文为CSDN博主「Shawyu_」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/PrisonersDilemma/article/details/89185629

发表评论