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或者回车，效果如下：




    
    
    Document

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

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

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

2.规则

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

div#main.content

div#main.content.user

div.content[alter=click]

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

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

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

div#father>ul>li.child*3

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

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

ul>li.item$*3

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

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

2.5 使用"{}"文本编辑

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

    
        我是第1个li标签
        我是第2个li标签
        我是第3个li标签

注意：可以和$配合使用

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

2.6 隐式标签

div标签

#id.classname

ul和ol的子标签li

ul>#child$*3

ol>.child*3

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

诸如此类的隐式标签还有

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

3. 总而言之...

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

HTML速写语法规则（Emmet）