Emmet常用语法汇总
1.为什么写这篇文章
其实我也不想重新造轮子的，但看网上提供的文章都是成扎的，但是自己要对自己过去学过的东西进行一次系统性的整理，还有些其它的原因. . .
所以花了点时间把这些东西整理起来了
2.简单介绍下Emmet语法是个啥
Basically, most text editors out there allow you to store and re-use commonly used code chunks, called “snippets”. While snippets are a good way to boost your productivity, all implementations have common pitfalls: you have to define the snippet first and you can’t extend them in runtime.
从官方的文章中引用出来的话，我们写html的时候效率最高的是将常用的模块封装好，然后在需要的时候直接把这个模块复制进入自己的项目中，这样会存在很多问题(功能大多数都是自定义的需求)。
举个栗子：我们定义好了模块，然后在实际项目中直接复制粘贴，但是模块的代码少了两个功能，这样就要在原有的基础上添加功能；
又或者是多出来了一些功能，我们要删除它们。
这样一来，就很容易将项目写乱，比如成对的标签删除了一个结束的标签，导致网页无法成为自己预期的样子。
——于是，Emmet语法出现了
Emmet takes the snippets idea to a whole new level: you can type CSS-like expressions that can be dynamically parsed, and produce output depending on what you type in the abbreviation. Emmet is developed and optimised for web-developers whose workflow depends on HTML/XML and CSS, but can be used with programming languages too.
Emmet语法可以用缩写 来动态生成我们所需要生成出我们所需要的样式，在短时间做出来一个模板，然后使用，这是一个能够大幅度提高效率的工具，下面介绍下基本语法。
3.Emmet语法
在讲语法之前，我要先说明一点，Emmet并非是可以直接使用的，有些编辑器(其实大部分编辑器都是支持的)，少数没有支持的编辑器要自己下载(VSC和sublime可以直接在拓展里找插件名)
注意：接下来的内容直接补充Emmet的代码以及展现的结果(注意，Emmet语法不能为了代码美观而加空格
Emmet的使用方式很简单，写完缩写之后敲下tab按键，就可以自动渲染代码
(其实我是想搞个list跳转的. . .但是看着没有现在这样方便……咳，不扯这么多了)
1 带有层级结构的：ul>li 2 3 <ul> 4 <li></li> 5 </ul>
1 代码在同级的：ul+li 2 <div style="background: rgb(1, 1, 1)"></div> 3 <ul></ul> 4 <li></li>
1 带有优先级的：(ul>li)+bq 2 3 <ul> 4 <li></li> 5 </ul> 6 <blockquote></blockquote> 7 8 对比没有优先级的：ul>li+bq 9 10 <ul> 11 <li></li> 12 <blockquote></blockquote> 13 </ul>
1 在上级的：ul>li^bq(这个可以多个^一起写) 2 3 <ul> 4 <li></li> 5 </ul> 6 <blockquote></blockquote> 7 8 <!-- 上面代码可以看出来效果是等同于(ul>li)+bq的 -->
1 乘号批量复制：ul>li*3 2 3 <ul> 4 <li></li> 5 <li></li> 6 <li></li> 7 </ul>
车速加快了
1 创建带有指定class样式的标签：div.box 2 3 <div class="box"></div>
1 创建带有指定id样式的标签：div#box 2 3 <div id="box"></div>
1 一个标签创建多个class：div.box1.box2.box3 2 3 <div class="box1 box2 box3"></div>
1 一个标签同时创建class和id：div.box#box2 2 3 <div class="box" id="box2"></div>
后面开车了 不常用属性(其实是我自己没有用过但是很好用的属性们)
这就像是，虽然身边可爱的妹子有很多，但是我只喜欢イヴ一样……咳
1 自定义属性内容：ul>li>a[href='#'] 2 3 <ul> 4 <li> 5 <a href="#"></a> 6 </li> 7 </ul> 8 9 也可以自定义属性：ul>li>test[data-content='this_is_data_value'] 10 11 <ul> 12 <li> 13 <test data-content="this_is_data_value"></test> 14 </li> 15 </ul>
1 文本内容填充：a{首页} 2 3 <a href="">首页</a>
Emmet还有一些默认的选项，这些选项比较贴切使用场景——它们称为隐式标签
1 隐式标签： 2 3 > .class 4 <div class="class"></div> 5 6 > #id 7 <div id="id"></div> 8 9 > ul>.class 10 <ul> 11 <li class="class"></li> 12 </ul> 13 14 > label[for='content']>#content 15 <label for="content"> 16 <span id="content"></span> 17 </label>
还有很多时候，我们需要的标签名不能一样，但又要有规律可循，这时候可以使用这种语法：
1 $符号自增 2 3 ul>li.$*3 4 <ul> 5 <li class="1"></li> 6 <li class="2"></li> 7 <li class="3"></li> 8 </ul> 9 10 ul>li{第$$条项目}*3 11 <ul> 12 <li>第01条项目</li> 13 <li>第02条项目</li> 14 <li>第03条项目</li> 15 </ul> 16 17 最后来个复合式的案例： 18 19 ul>li[id='item$']{第$$$条数据}*10 20 <ul> 21 <li id="item1">第001条数据</li> 22 <li id="item2">第002条数据</li> 23 <li id="item3">第003条数据</li> 24 <li id="item4">第004条数据</li> 25 <li id="item5">第005条数据</li> 26 <li id="item6">第006条数据</li> 27 <li id="item7">第007条数据</li> 28 <li id="item8">第008条数据</li> 29 <li id="item9">第009条数据</li> 30 <li id="item10">第010条数据</li> 31 </ul>
后面还有很多上细节的东西，但是个人觉得真的没必要记，记住的话只是浪费时间而已，投入成本与回报偏差极大。
比如说 btn:s submit提交的简写什么的...
以上，内容就这么多了(好像漏了好多……希望能有人能够指出)
然后顺便把Emmet官网贴上~~~
