使用Emmet快速生成HTML代码
在前端开发里面,经常会遇到很多重复的操作,比如:标签、属性、尖括号、标签闭合等,令人不胜其烦,在这里我们将介绍一些快捷方式来生成HTML代码。
1、前期准备:
使用编写HTML的编辑器(除文本以外),比如:HBuilder X 、Visual Studio Code…
2、编写流程
打开 HTML 或 CSS 文件->按语法编写指令->按下 TAB 键->生成
3、具体语法
(1)带有id与class的HTML标签
“.”表示id
“#”表示class
div.page
生成的HTML代码如下:
<div class="page"></div>
div#page
生成的HTML代码如下:
<div id="page"></div>
(2)“+” 为兄弟标签,即平级元素,使用指令 + ,例如下面指令:
div+ul+li+span
生成的HTML代码如下:
<div></div>
<ul></ul>
<li></li>
<span></span>
(3)“>”为后代元素
表示后面要生成的内容是当前标签的后代。例如我要生成一个无序列表,而且被 class 为 nav 的 div 包裹,那么可以使用下面指令:
div>ul>li>span
生成的HTML代码如下:
<div>
<ul>
<li><a href=""></a></li>
</ul>
</div>
(4)“^”为上级元素
前面咱们说过了生成下级元素的符号“>”,当使用 div>ul>li 的指令之后,再继续写下去,那么后续内容都是在 li 下级的。如果我想编写一个跟 ul 平级的 span 标签,那么我需要先用 “^” 提升一下层次。**
div.nav>ul>li^span
生成的HTML代码如下:
<div class="nav">
<ul>
<li></li>
</ul>
<span></span>
</div>
(5)“*”为重复多份
ul>li*5
生成的HTML代码如下:
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
(6)“()”为分组元素
用括号进行分组,表示一个代码块,分组内部的嵌套和层级关系和分组外部无关,例如:
div>(header>ul>li*2>a)+footer>p
生成的HTML代码如下:
<div>
<header>
<ul>
<li><a href=""></a></li>
<li><a href=""></a></li>
</ul>
</header>
<footer>
<p></p>
</footer>
</div>
(7)“[ attr ]”
a 标签中往往需要附带 href 属性和 title 属性,如果我们想生成一个 href 为 “http://baidu.com”,title 为“百度一下”的 a 标签,可以这样写:
a[href=“http://baidu.com” title=“百度一下”]
生成的HTML代码如下:
<a href="http://baidu.com" title="“百度一下”"></a>
(8)“$”编号
例如无序列表,我想为五个 li 增加一个 class 属性值 item1 ,然后依次递增从 1-5,那么就需要使用 $ 符号:
ul>li.item$*5
生成的HTML代码如下:
<ul>
<li class="item1"></li>
<li class="item2"></li>
<li class="item3"></li>
<li class="item4"></li>
<li class="item5"></li>
</ul>
$ 表示一位数字,只出现一个的话,就从 1 开始,如果出现多个,就从 0 开始。
如果我想生成三位数的序号,那么要写三个 $:
ul>li.item$$$*5
<ul>
<li class="item001"></li>
<li class="item002"></li>
<li class="item003"></li>
<li class="item004"></li>
<li class="item005"></li>
</ul>
(9)此外还有许多快捷的输入方式
在css里面输入w200
就如下所示:
width:200px;
输入m20-30
就如下所示:
margin:20px 30px;