安装HBuilder X
配置Emmet插件
打开软件选择自己喜欢的主题然后进入主界面按下
Alt + T或者点击工具
之后按下
p或者点击安装插件
选择第一个插件emmet 点击安装即可
注意:
按装完之后要重启HBuilder X ,要不然自己使用Emmet功能快捷键按下Tab无法触发
Emmet功能快捷键
创建一个id为app标签内有三个名为temp的类标签:
div#app>div.temp*3 + Tab
创建一个item的类标签内含两个item-数字的类标签:div.item>div.item-$*2 + Tab
快捷代码代码
div#app>div.temp*3 /*鼠标光标放在代码行后按下Tab 可快速生成*/
div.item>div.item-$*2 /*鼠标光标放在代码行后按下Tab 可快速生成*/
div#app>div.temp*3
+ Tab
div.item>div.item-$*2
+ Tab
Emmet功能快捷键符号解释表
符号 | Value |
---|---|
# | 创建id名 |
div | 表示div标签 |
. | 表示创建类名 |
$ | 表示数字 |
> | 表示进入到下一个如a>b 则a包含b |