<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Emmet语法</title>
</head>
<body>
<!--1、生成 html 基本结构-->
<!--
英文状态下的感叹号 ! + Tab 键
-->
<!--2、id 用 # 表示，class 用 . 表示-->
<!-- div#div1-->
<div id="div1"></div>
<!-- div.div1-->
<div class="div1"></div>
<!--3、emmet 中没有内置的标签，所有的标签写好都可以按 Tab 键生成标签-->
<!-- test>test$*3 -->
<test>
<test1></test1>
<test2></test2>
<test3></test3>
</test>
<!--
4、emmet中如何表示层级关系
emmet 语法与 css 选择器得到语法很像
> 表示子元素
+ 表示同级元素
^ 表示上级元素
-->
<!-- ul>li*3 -->
<ul>
<li></li>
<li></li>
<li></li>
</ul>
<!-- div+p -->
<div></div>
<p></p>
<!-- ul>li*3^p -->
<ul>
<li></li>
<li></li>
<li></li>
</ul>
<p></p>
<!-- ^ 符号可以多次使用，每使用一次相当于往上爬一级-->
<!-- div>div>div+ul>li*3^^p -->
<div>
<div>
<div></div>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<p></p>
</div>
<!--5、emmet 中的重复使用 * ，变量使用 $ -->
<!-- ul>li*3 -->
<ul>
<li></li>
<li></li>
<li></li>
</ul>
<!-- ul.list>li#list$*3 -->
<ul class="list">
<li id="list1"></li>
<li id="list2"></li>
<li id="list3"></li>
</ul>
<!-- $ 通常配合 * 使用，$可以多次使用-->
<!-- ul>li#list$$$*3 -->
<ul>
<li id="list001"></li>
<li id="list002"></li>
<li id="list003"></li>
</ul>
<!--6、() 用来分组 -->
<!-- table>(tr+td)*3 -->
<table>
<tr></tr>
<td></td>
<tr></tr>
<td></td>
<tr></tr>
<td></td>
</table>
<!--7、属性使用 [name=value]，标签里的文本内容使用 {} -->
<!-- a[href="www.baidu.com" title="fry"]-->
<a href="www.baidu.com" title="fry"></a>
<!-- a[href="www.baidu.com" title="baidu"]{百度一下} -->
<a href="www.baidu.com" title="baidu">百度一下</a>
<!-- {} 可以配合 $ 和 * 使用-->
<!--ul>li{我是list$$}*3-->
<ul>
<li>我是list01</li>
<li>我是list02</li>
<li>我是list03</li>
</ul>
<!--8、emmet 隐式标签
最外层没写标签名，默认是 div
ul 里层没写标签名，默认是 li
table，thead，tbody，tfoot 下面默认是 tr
select 下面默认是 option
tr 下面默认是 td
-->
</body>
</html>