这是我参与「第五届青训营 」伴学笔记创作活动的第 1 天
前端与 HTML
Emmet语法规则
0：Emmet
演示效果：
ul>li.item${这是item$}*3
在输入表达式时会出现提示和预览效果，如下图所示：
在出现提示后，按下
tab键或enter键，即可出现完整结构：
1：html初始结构
！=> Tab
# 或者！ + 回车
快速生成基础的结构
2：id（#）,class（.）
#id指令:
#
#class指令:
.
div#test
div.test
3：子节点（>），兄弟节点（+），上级节点（^）
| 子节点指令 | > |
|---|---|
| 兄弟节点指令 | + |
| 上级节点 |
div>ul>li>p
div+ul+p
div>ul>li^div
(这里的是接在li后面所以在li的上一级，与ul成了兄弟关系,当然两个^就是上上级）
4：重复（ * ）
重复指令：*
div*5
（*号后面添加数字表示重复的元素个数）
5：分组（()）
分组指令：()
div>(ul>li>a)+div>p
（括号里面的内容为一个代码块，表示与括号内部嵌套和外面的的层级无关）
解释：这里如果不加括号的话，猜想下，a+div这样div就是和a是兄弟关系了，会包含在li里面。
属性（[attr]）
属性指令：[]
a[href=### name=zhuba]
（中括号内填写属性键值对的形式，并且空格隔开）
6：编号（$)
编号指令：$
ul>li.test$ * 3
（ 代表一位数，
就是两位数了,以此类推就可以形成(1),
(01),$$@+数字*数字
例如：
ul>li.test$@3*3
降序排列属性值@-
ul>li.item$@-*5
将会生成:
<ul>
<li class="item5"></li>
<li class="item4"></li>
<li class="item3"></li>
<li class="item2"></li>
<li class="item1"></li>
</ul>
7：文本（{}）
文本指令：{}
ul>li.test$*3{测试$}
（{里面填写内容，可以和$一起组合使用哦}）
8：隐式标签
这个标签没有指令，而是部分标签可以不使用输入标签，直接输入指令，即可识别父类标签 默认div 例如：
.test
li： 可在ul 和 ol 中使用 例如：
ul>.test$*3
option：可在select中使用例如：
select>.test$*5
等等…
tr：可在 table、tbody、thead 和 tfoot 中使用
td：可在 tr 中使用
