对Emmet的认识与实战
emmet是一组专门用来提高编写HTML和CSS代码速度的便利工具。将它整合进文本编辑器，可以加快开发速度。下面以一个html文件作为示例：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title></head><body><!-- !id的div速成 --><!-- *输入:#box(注：光标要紧跟在后面),按tab键即生成下面语句,而div是默认标签，也可以这样写：div#box --><div id="box"></div><!-- !class的div速成 --><!-- *输入:.container(注：光标要紧跟在后面),按tab键即生成下面语句,而div是默认标签，也可以这样写：div.container --><div class="container"></div><!-- !div输入内容的速成 --><!-- *输入.container{123}再按下tab键得以下 --><div class="container">123</div><!-- !层级关系（父子）的速成> --><!-- *输入ul>li{item}然后按tab键得以下 --><ul><li>item</li></ul><!-- !层级关系中a标签的链接速成 --><!-- *输入ul>li>a{php.cn}然后按tab键得以下 --><ul><li><a href="">php.cn</a></li></ul><!-- !同级关系的速成+ --><!-- *输入：title{站点名称：}+.url{php中文网}（要连续不要做其他，光标要紧跟在后面），然后再按tab键，得以下兄弟标签 --><title>站点名称：</title><div class="url">php中文网</div><!-- !重复生成的速成 --><!-- *输入；ul.menu>li*5>a{item}（要连续不要做其他，光标要紧跟在后面），然后再按tab键，得以下重复生成 --><ul class="menu"><li><a href="">item</a></li><li><a href="">item</a></li><li><a href="">item</a></li><li><a href="">item</a></li><li><a href="">item</a></li></ul><!-- !序号的速成$ --><!-- *输入；ul.menu>li*5>a{item$}（要连续不要做其他，光标要紧跟在后面），然后再按tab键，得以下序号 --><ul class="menu"><li><a href="">item1</a></li><li><a href="">item2</a></li><li><a href="">item3</a></li><li><a href="">item4</a></li><li><a href="">item5</a></li></ul><!-- !自定义序号的速成$@ --><!-- *输入；ul.menu>li*5>a{item$@5}（要连续不要做其他，光标要紧跟在后面），然后再按tab键，得以下序号 --><ul class="menu"><li><a href="">item5</a></li><li><a href="">item6</a></li><li><a href="">item7</a></li><li><a href="">item8</a></li><li><a href="">item9</a></li></ul><!-- !自定义反序号的速成$@ --><!-- *输入；ul.menu>li*5>a{item$@-5}（要连续不要做其他，光标要紧跟在后面），然后再按tab键，得以下序号 --><ul class="menu"><li><a href="">item9</a></li><li><a href="">item8</a></li><li><a href="">item7</a></li><li><a href="">item6</a></li><li><a href="">item5</a></li></ul><!-- !未分组时的情形--><!-- *购物车 --><!-- *输入.cart --><div class="cart"><!-- *输入h3.title{购物车} --><h3 class="title">购物车</h3><!-- *输入；ul.menu>li*4>a{商品$} --><ul class="menu"><li><a href="">商品1</a></li><li><a href="">商品2</a></li><li><a href="">商品3</a></li><li><a href="">商品4</a></li></ul></div><!-- !未分组时的情形，但用了一行代码--><!-- *这里用一行代码就可搞定：.cart>h3.title{购物车}+ul.menu>li*4>a{商品$} --><div class="cart"><h3 class="title">购物车</h3><ul class="menu"><li><a href="">商品1</a></li><li><a href="">商品2</a></li><li><a href="">商品3</a></li><li><a href="">商品4</a></li></ul></div><!-- !加了括号让分组让语法结构更清晰 ，也是一行代码--><!-- *这里用一行代码就可搞定：.cart>h3.title{购物车}+(ul.menu>li*4>a{商品$}) --><div class="cart"><h3 class="title">购物车</h3><ul class="menu"><li><a href="">商品1</a></li><li><a href="">商品2</a></li><li><a href="">商品3</a></li><li><a href="">商品4</a></li></ul></div><!-- !快速生成5行8列的表格 --><!-- *这里用一行代码就可搞定：table>caption{表格标题}+(thead>tr>td{title}*8)+(tbody>tr*5>td{item$}*5) --><table border="1"><caption>表格标题</caption><thead><tr><td>title</td><td>title</td><td>title</td><td>title</td><td>title</td><td>title</td><td>title</td><td>title</td></tr></thead><tbody><tr><td>item1</td><td>item2</td><td>item3</td><td>item4</td><td>item5</td><td>item6</td><td>item7</td><td>item8</td></tr><tr><td>item1</td><td>item2</td><td>item3</td><td>item4</td><td>item5</td><td>item6</td><td>item7</td><td>item8</td></tr><tr><td>item1</td><td>item2</td><td>item3</td><td>item4</td><td>item5</td><td>item6</td><td>item7</td><td>item8</td></tr><tr><td>item1</td><td>item2</td><td>item3</td><td>item4</td><td>item5</td><td>item6</td><td>item7</td><td>item8</td></tr><tr><td>item1</td><td>item2</td><td>item3</td><td>item4</td><td>item5</td><td>item6</td><td>item7</td><td>item8</td></tr></tbody></table><!-- *人的通用属性有：姓名，性别，生日，民族等，这是每个人都有的，故叫通用属性。而标签也有通用属性。 --><!-- !标签主要有三个通用属性：id，class,style --><div id="box">box</div><div class="top">top</div><div style="color:red;font-size: large;">Hello World</div><!-- *此外标签还有一个通用属性：title --><div title="这是一个提示">world</div><!-- !预置属性 --><img src="" alt=""/><a href=""></a><!-- *自定义属性：是预置属性的扩展，data-前缀 --><div class="box" data-email="498668472@qq.com">用户信息</div><button onclick=" ">获取邮箱</button><!-- *事件属性：on --><button onclick="alert('提交成功')">确定</button></body></html>