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官网贴上~~~

　点我进入Emmet官网~~~