HBuilder或HBuilderX的快捷输入(Emmet插件)

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;
等等。。。

猜你喜欢

转载自blog.csdn.net/PrisonersDilemma/article/details/89185629