HBuilder或HBuilderX已经默认安装Emmet插件。
通过输入代码块按下Tab键即可快速撸码。
一、嵌套 >
如:输入div>ul>li,按下Tab键
效果:
<div>
<ul>
<li></li>
</ul>
</div>
二、并列 +
如:输入div+p,按下Tab键
效果:
<div></div>
<p></p>
三、重复 *
如:输入li*3,按下Tab键
效果:
<li></li>
<li></li>
<li></li>
四、返回 ^
如:输入ul>li*3^p,按下Tab键
效果:
<ul>
<li></li>
<li></li>
<li></li>
</ul>
<p></p>
五、分组 ()
如:输入(ul>li*2)+p,按下Tab键
效果:
<ul>
<li></li>
<li></li>
</ul>
<p></p>
六、属性 []
如:输入div#header+div.box2+div.box3#footer,按下Tab键
效果:
<div id="header"></div>
<div class="box2"></div>
<div class="box3" id="footer"></div>
此外,输入input[name=user value=123],按下Tab键
效果:
<input type="text" name="user" value="123">
七、编序 $
如:输入ul>li.$*3,按下Tab键
效果:
<ul>
<li class="1"></li>
<li class="2"></li>
<li class="3"></li>
</ul>
八、内容 {}
如:输入ul>li{$}*3,按下Tab键
效果:
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
九、其他
在CSS中还有许多快捷输入机巧。如:
输入w100,按下Tab键,快捷输入width: 100px;
输入h100,按下Tab键,快捷输入height: 100px;
输入poa,按下Tab键,快捷输入position: absolute;
输入por,按下Tab键,快捷输入position: relative;
输入tdn,按下Tab键,快捷输入text-decoration: none;
输入db,按下Tab键,快捷输入display: block;
输入df,按下Tab键,快捷输入display: flex;
输入fdc,按下Tab键,快捷输入flex-direction: column;
输入bd1px#cccsolid,按下Tab键,快捷输入border: 1px #ccc solid;
等等。。。