HbuilderX、vscode快捷键创建div和起class名字
HbuilderX、vscode快捷键创建div和起class名字
HbuilderX、vscode里面都可以使用emmet。
Emmet 提升编写 HTML/CSS 代码效率的文本编辑器插件
Emmet官网地址：https://docs.emmet.io/
一、嵌套 >
二、并列 +
三、重复 *
四、返回 ^
五、分组 ()
六、属性 []
七、编序 $
八、内容 {}
九、其他
属性值用[ ]填充，文本内容用{ }填充，编序用$
一、嵌套 > 输入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(注意：ul和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.container+div.foot#footer，按下Tab键 效果：
<div id="header"></div> <div class="container"></div> <div class="foot" id="footer"></div>
此外，输入input[name=user value=小李]，按下Tab键
<input type="text" name="username" value="小李">
在body内输入div.menu按下tab键
<div class="menu"></div>
在body内输入div#menu按下tab键
<div id="menu"></div>
在body内输入ul>li{小李}*3按下tab键
<ul> <li>小李</li> <li>小李</li> <li>小李</li> </ul>
在body内输入select>option{$}*5按下tab键
<select name="" id=""> <option value="">1</option> <option value="">2</option> <option value="">3</option> <option value="">4</option> <option value="">5</option> </select>
在body内输入select>option[value='北京']{$}*5>a[href='#']{北京}按下tab键
<select name="" id=""> <option value="北京">1<a href="#">北京</a></option> <option value="北京">2<a href="#">北京</a></option> <option value="北京">3<a href="#">北京</a></option> <option value="北京">4<a href="#">北京</a></option> <option value="北京">5<a href="#">北京</a></option> </select>
七、编序 $ 输入ul>li.$3，按下Tab键
<ul> <li class="light-1"></li> <li class="light-2"></li> <li class="light-3"></li> </ul>
八、内容 {} 如：输入ul>li{$}3，按下Tab键
<ul> <li>1</li> <li>2</li> <li>3</li> </ul>
九、多个^连写将向上一层层返回：
div+div>p>span+em^^^bq
其他 在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;
等等......
