- 什么是emmet语法
使用类似于 CSS 选择器的语法来描述生成的树和元素属性中的元素位置（快速构建html结构的快捷语法）
- 嵌套运算法
1. 子代操作符：>
例：div>div>p 表示div下有个子代div，子代div下有个p标签
2. 兄弟操作符：+
例：div>div+p 表示div下有子代div和p标签，子代div和p标签属于同级
3. 返回上级操作符：^
例：div>div+p^div 表示一个div下有子代div和p标签和一个div标签，最后一个div与第一个div是同级的
4. 乘法操作符：*
例：ul>li*2 表示ul标签下有两个li子标签
5. 分组操作符：()
例：div>(header>ul>li*2>a)+footer>p 表示div下有header和footer两个同级标签，即包含两组
- 属性操作符
1. id和class分别使用“#”和“.”表示，若是class属性不唯一时，可并列书写
例：div#header>p.news*2 表示div有id为header，p标签有class为new
div#header>p.news.new-tip 表示表示div有id为header，p标签有class为new和new-tip
2. 定制属性：[]
例：a[target='' title='hello world']*2
3. 数值计算运算符：$（按一定的数字进行排列）
例：div>ul>li.item-$*3 表示li的class有三个，分别为：item-1，item-2，item-3
div>ul>li.item-$@3*3 表示li的class属性的数字从指定数字开始
4. 本文操作符：{}
例：div#news>p{Hello,World!} 表示p标签的内容是Hello,World
- 样例
<body>
<!-- div>div>p的结果 -->
<div>
<div>
<p></p>
</div>
</div>
<!-- div>div+p的结果 -->
<div>
<div></div>
<p></p>
</div>
<!-- div>div+p^div的结果 -->
<div>
<div></div>
<p></p>
</div>
<div></div>
<!-- ul>li*2的结果 -->
<ul>
<li></li>
<li></li>
</ul>
<!-- div>(header>ul>li*2>a)+footer>p的结果 -->
<div>
<header>
<ul>
<li><a href=""></a></li>
<li><a href=""></a></li>
</ul>
</header>
<footer>
<p></p>
</footer>
</div>
<!-- div#header>p.news*2的结果 -->
<div id="header">
<p class="news"></p>
<p class="news"></p>
</div>
<!-- div#header>p.news.new-tip的结果 -->
<div id="header">
<p class="news new-tip"></p>
</div>
<!-- a[target='' title='hello world']*2的结果 -->
<a href="" target="" title="hello world"></a>
<a href="" target="" title="hello world"></a>
<!-- .a[target='' title='hello world']*2的结果 -->
<div class="a" target="" title="hello world"></div>
<div class="a" target="" title="hello world"></div>
<!-- div>ul>li.item-$*3的结果 -->
<div>
<ul>
<li class="item-1"></li>
<li class="item-2"></li>
<li class="item-3"></li>
</ul>
</div>
<!-- div>ul>li.item-$@3*3的结果 -->
<div>
<ul>
<li class="item-3"></li>
<li class="item-4"></li>
<li class="item-5"></li>
</ul>
</div>
<!-- div#news>p{Hello,World!}的结果 -->
<div id="news">
<p>Hello,World!</p>
</div>
<!-- #page>div.logo+ul#nav>li*5>a{Item $}的结果 -->
<div id="page">
<div class="logo"></div>
<ul id="nav">
<li><a href="">Item 1</a></li>
<li><a href="">Item 2</a></li>
<li><a href="">Item 3</a></li>
<li><a href="">Item 4</a></li>
<li><a href="">Item 5</a></li>
</ul>
</div>
<!-- div+div>p>span+em^^bq的结果 -->
<div></div>
<div>
<p><span></span><em></em></p>
</div>
<blockquote></blockquote>
<!-- h$[title=item$]{header $}*3的结果 -->
<h1 title="item1">header 1</h1>
<h2 title="item2">header 2</h2>
<h3 title="item3">header 3</h3>
<!-- ul>li.item$$$*3的结果 -->
<ul>
<li class="item001"></li>
<li class="item002"></li>
<li class="item003"></li>
</ul>
<!-- form#search.wide的结果 -->
<form action="" id="search" class="wide"></form>
<!-- p.class1.class2的结果 -->
<p class="class1 class2"></p>
<!-- p>{click}+a{here}+{to continue}的结果 -->
<p>
click
<a href="">here</a>
to continue
</p>
<!-- table>.row>.col的结果 -->
<table>
<tr class="row">
<td class="col"></td>
</tr>
</table>
<!-- a:link的结果 -->
<a href="http://"></a>
<!-- a:mail的结果 -->
<a href="mailto:"></a>
<!-- link:print的结果 -->
<link rel="stylesheet" href="print.css" media="print">
<!-- inp[type=datetime]的结果 -->
<input type="datetime" name="" id="">
</body>
