- 什么是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>