1. 聊点闲话

今天大数据课程学习到前端可视化技术（拉勾教育大数据开发训练营），终于开始接触我不熟悉的内容了。
今天的课程主要包括HTML，CSS，JavaScript，JQuery，Ajax，Vue，Highcharts，ECharts...
好吧，说了一堆跟我的主题没有用的东西。

学习html之后，对于我们程序员而言如何能快速愉快的码代码，节约出来的时间就能做更多的事情，学更多的知识，今天给大家科普一个HTML速写语法规则，可以让我们更愉快的写出html代码。

什么是 Emmet 语法?简单来说，就是可以快速构建 HTML 结构的快捷语法。Emmet目前支持多种编辑器，包括一些主流编辑器和IDE，在线编辑器以及第三章插件的的支持。

下面我会通过使用VSCODE来给大家演示具体的一些语法使用。

在新建文档为html后缀的前提下，编辑器会帮你选择合适的插件（这里我已经安装了HTML CSS Support插件）

img

新建emmet.html，键入

输入html:5或者!按Tab或者回车，效果如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

接下来我们先测试一下，体会一下Emmet的优越性

输入h1#a+h2#b+div.fa>div.child$$*3>span#say+span#talk+img.avaer[src=./img/$$.png alt={img $}],按Tab或者回车，效果如下：

    <h1 id="a"></h1>
    <h2 id="b"></h2>
    <div class="fa">
        <div class="child01">
            <span id="say"></span>
            <span id="talk"></span>
            <img src="./img/01.png" alt="img 1" class="avaer">
        </div>
        <div class="child02">
            <span id="say"></span>
            <span id="talk"></span>
            <img src="./img/02.png" alt="img 2" class="avaer">
        </div>
        <div class="child03">
            <span id="say"></span>
            <span id="talk"></span>
            <img src="./img/03.png" alt="img 3" class="avaer">
        </div>
    </div>

是不是感觉很强大，熟练使用以后，可以极大程度上加快我们编写HTML代码的速度。

2.规则

2.1 使用"#"输入id，"."输入class，"[]"输入属性

div#main.content

<div id="main" class="content"></div>

div#main.content.user

<div id="main" class="content user"></div>

div.content[alter=click]

<div class="content" alter="click"></div>

2.2 使用">"输入下级元素，"+"同级元素，"^"上一级元素

div>span
div+div
div>ul>li^h1

    <div><span></span></div>
    <div></div>
    <div></div>
    <div>
        <ul>
            <li></li>
        </ul>
        <h1></h1>
    </div>

2.3 使用"*"重复，"()"分组

div#father>ul>li.child*3

    <div id="father">
        <ul>
            <li class="child"></li>
            <li class="child"></li>
            <li class="child"></li>
        </ul>
    </div>

(div#father1>ul>li.child3)+(div#father2>ul>li.child4)

    <div id="father1">
        <ul>
            <li class="child"></li>
            <li class="child"></li>
            <li class="child"></li>
        </ul>
    </div>
    <div id="father2">
        <ul>
            <li class="child"></li>
            <li class="child"></li>
            <li class="child"></li>
            <li class="child"></li>
        </ul>
    </div>

2.4 使用"$"进行自增，使用@修饰可以完成修改起始数

ul>li.item$*3

    <ul>
        <li class="item1"></li>
        <li class="item2"></li>
        <li class="item3"></li>
    </ul>

注意：每一个$代表一位数字

ul>li.item$$$@10*5

    <ul>
        <li class="item010"></li>
        <li class="item011"></li>
        <li class="item012"></li>
        <li class="item013"></li>
        <li class="item014"></li>
    </ul>

2.5 使用"{}"文本编辑

ul>li.item$$*3{我是第$个li标签}

    <ul>
        <li class="item01">我是第1个li标签</li>
        <li class="item02">我是第2个li标签</li>
        <li class="item03">我是第3个li标签</li>
    </ul>

注意：可以和$配合使用

ul>li.item$$$@10*5

    <ul>
        <li class="item010"></li>
        <li class="item011"></li>
        <li class="item012"></li>
        <li class="item013"></li>
        <li class="item014"></li>
    </ul>

2.6 隐式标签

div标签

#id.classname

    <div id="id" class="classname"></div>

ul和ol的子标签li

ul>#child$*3

    <ul>
        <li id="child1"></li>
        <li id="child2"></li>
        <li id="child3"></li>
    </ul>

ol>.child*3

    <ol>
        <li class="child"></li>
        <li class="child"></li>
        <li class="child"></li>
    </ol>

select#type[name=ceshi]>#id$*3

    <select name="ceshi" id="type">
        <option id="id1"></option>
        <option id="id2"></option>
        <option id="id3"></option>
    </select>

诸如此类的隐式标签还有

tr：用于 table、tbody、thead 和 tfoot
td：用于 tr
option：用于 select 和 optgroup

3. 总而言之...

Emmet的语言规则不复杂，看完了记得去多写几遍，记住并熟练使用你也一样可以出去装个小逼了~~

HTML速写语法规则（Emmet）