本文介绍了一种提高前端开发效率的技巧——使用Emmet。通过简单的语法，Emmet可以帮助开发者快速生成复杂的HTML结构，例如带有类名和ID的div元素、重复的列表项等。本文通过多个实例展示了Emmet的基本用法，包括如何创建带有特定属性和内容的HTML元素。
1.在body内输入div.abc按下tab键
效果：<divclass="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>
<ahref="#">小花</a>
<ahref="#">小花</a>
<ahref="#">小花</a>
</div>
5.在body内输入select>option{$}*5按下tab键
效果：<select name="" id="">
<optionvalue="">1</option>
<optionvalue="">2</option>
<optionvalue="">3</option>
<optionvalue="">4</option>
<optionvalue="">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>
总结一下：属性值用[ ]填充，文本内容用{ }填充，看完上面大概就明白了，谢谢。
扫一扫
4752
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
