HBuilder生成代码行快捷键

本文介绍了一种提高前端开发效率的技巧——使用Emmet。通过简单的语法,Emmet可以帮助开发者快速生成复杂的HTML代码。例如,只需输入特定的缩写并按下Tab键,即可自动生成所需的HTML结构。本文通过多个实例展示了Emmet的强大功能。

1.在body内输入div.abc按下tab键

效果:<div class="abc"></div>

 

2.在body内输入div#abc按下tab键

效果:<div id="abc"></div>

 

3.在body内输入ul>li{小花}*3按下tab键

效果:<ul>
                 <li>小花</li>
                 <li>小花</li>
                 <li>小花</li>
         </ul>

 

4.在body内输入div>a[href='#']{小花}*3按下tab键

效果:<div>
                 <a href="#">小花</a>
                 <a href="#">小花</a>
                 <a href="#">小花</a>
        </div>

 

5.在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>   
 

6.在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>      
属性值用[ ]填充,文本内容用{ }填充,*数字:代表生成的元素个数

转载于:https://www.cnblogs.com/zyl-930826/p/8308697.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值