使用Emmet快速生成HTML代码

使用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;

我觉得如果基础不过关的话还是好好一个一个的敲来得好，快捷方式只是做大型项目的时候用来节省时间的。