emment 语法
笔记：vscode支持emment语法，emment语法使用缩写，可以提升hmtl/css的编写速度和生产力。关于emment语法，朱老师讲的主要针对html5,主要有以下几个要点。
一、快速生成html5源码模板
1、语法：! + TAB健
2、呈现效果如下
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><body></body></html>
二、标签与内容
1 语法：{text}
三、html5属性和语法糖[attr]
id属性语法[id=php01]{php.cn}
- 呈现的效果如下：
<div id="php01">php.cn</div>
class属性语法[class=php02]{php中文网}
- 呈现的效果如下：
<div class="php02">php中文网</div>
但是因为id和class属性是高频、通用属性，emmet语法有两者的简写形式，以上两种情况又可以简写为#php01{php.cn}和.php01{php中文网}
- 呈现的效果如下
<div id="php01">php.cn</div><div id="php01">php中文网</div>
其他属性的用法一样，例如[color=red]{hello world}
- 呈现的效果如下：
<div color="red">hello world</div>
四 重复元素标签的语法
语法：标签名*n
- 三个class属性为continer，内容为box的元素，
.continer{box}*3，呈现的效果如下：<div class="continer">box</div><div class="continer">box</div><div class="continer">box</div>
- 三个class属性为haha,段落内容为php中文网的段落p元素
(p.haha{php中文网})*3,呈现的效果如下：<p class="haha">php中文网</p><p class="haha">php中文网</p><p class="haha">php中文网</p>
五、父子关系的标签用大于号>表示父子关系
六、兄弟关系的标签 用+表示
七、父级用^表示,用来生成父级同级别的元素
八、分组表示，用小括号()，类似数学中的小括号用法
九、序号：
- 默认从1开始的顺序
$，例：div{上课的纪律共5条}>(ul>li{第$条}*5，呈现的结果为：<div>上课的纪律共5条 <ul> <li>第1条</li> <li>第2条</li> <li>第3条</li> <li>第4条</li> <li>第5条</li> </ul> </div>
- 有时候前面已经有列表了，不需要顺序从1开始，例如接着上面从第6调开始
div{上课的纪律共10条}>(ul>li{第$@6条}*5),呈现的效果如下：<div>上课的纪律共10条 <ul> <li>第6条</li> <li>第7条</li> <li>第8条</li> <li>第9条</li> <li>第10条</li> </ul> </div>
- 如果让顺序倒过来的话，既逆序排列用
$@-1,例如：div{上课的纪律共10条}>(ul>li{第$@-1条}*10)，呈现的效果如下：<div>上课的纪律共10条 <ul> <li>第10条</li> <li>第9条</li> <li>第8条</li> <li>第7条</li> <li>第6条</li> <li>第5条</li> <li>第4条</li> <li>第3条</li> <li>第2条</li> <li>第1条</li> </ul> </div>
- 同样的逆序，如果只逆序到第6条，语法为
div{上课的纪律共10条，最后5条倒过来为}>(ul>li{第@-6条}*5),呈现出来的效果为：<div>上课的纪律共10条 <ul> <li>第10条</li> <li>第9条</li> <li>第8条</li> <li>第7条</li> <li>第6条</li> </ul> </div>
