<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>sublime text 3中emmet常用技巧</title>
</head>
<body>
<!-- 生成html5格式文件先把文件保存成.html格式，然后输入html:5按下tab键 -->
<!-- 简写div start -->
<!-- div.box -->
<div class="box"></div>
<!-- .container 默认生成div标签-->
<div class="container"></div>
<!-- end 简写div -->
<!-- 含糊标签名称 -->
<!-- .wrap>ul.list>.site -->
<div class="wrap">
<ul class="list">
<li class="site"></li>
</ul>
</div>
<!--
使用Emmet来扩展简单的class名称生成div的话。这个方式可以帮助你省去大量的时间。你只需要记住如下语法：
> 子节点：在DOM树下一层添加创建一个元素
+ 同级别：在DOM树同一层添加创建一个元素
^ 向上层：向上一层添加创建创建一个元素。
-->
<!-- .outer>.inner>h1+p -->
<div class="outer">
<div class="inner">
<h1></h1>
<p></p>
</div>
</div>
<!-- .warp>p>a^p 向上一层-->
<div class="warp">
<p><a href=""></a></p>
<p></p>
</div>
<!-- .warp>p>span>a^^p 向上多层-->
<div class="warp">
<p><span><a href=""></a></span></p>
<p></p>
</div> <!--
使用分组来简化你的代码结构 的时候你可能会发现使用向上符号比较复杂，这时候可能使用分组更加的合理
-->
<!-- (.one>h1)+(.two>h1) -->
<div class="one">
<h1></h1>
</div>
<div class="two">
<h1></h1>
</div> <!--
插入文本和属性
如果你需要生成HTML，内容和属性也是你常常需要添加的。很多开发人员只是使用Emmet来生成框架，然后再添加内容。其实你可以在生成页面框架的过程中同时添加属性和内容。
-->
<!-- h1{我是一个h1标签}+p{我是一个p标签} -->
<h1>我是一个h1标签</h1>
<p>我是一个p标签</p>
<!-- a[href="http://www.baidu.com"]{百度} -->
<a href="http://www.baidu.com">百度</a> <!-- 添加多个class到一个元素这个非常简单，你只需要使用逗号来添加多个class -->
<!-- .one.two.three -->
<div class="one two three"></div> <!-- 重复添加 -->
<!-- ul>li{我是一个li标签}*4 -->
<ul>
<li>我是一个li标签</li>
<li>我是一个li标签</li>
<li>我是一个li标签</li>
<li>我是一个li标签</li>
</ul>
(section>.wrap)*2
<section>
<div class="wrap"></div>
</section>
<section>
<div class="wrap"></div>
</section> <!--
自动列表计数
如果你需要按顺序生成HTML元素，这个技巧你一定喜欢，使用$符号可以帮助你生成一系列数字，支持class，id，属性，内容等等
-->
<!-- ul>li.item${item $$}*11 -->
<ul>
<li class="item1">item 001</li>
<li class="item2">item 002</li>
<li class="item3">item 003</li>
<li class="item4">item 004</li>
<li class="item5">item 005</li>
<li class="item6">item 006</li>
<li class="item7">item 007</li>
<li class="item8">item 008</li>
<li class="item9">item 009</li>
<li class="item10">item 010</li>
<li class="item11">item 011</li>
</ul>
</body>
</html>