image.png
emmet 是什么
首先是官网上的介绍。
Emmet is a plugin for many popular text editors which greatly improves HTML & CSS workflow.
Emmet 是一个可用在许多流行文本编辑器上的极大简化 HTML 和 CSS 工作流程的插件。
前身是 Zen coding，他使用仿 css 选择器的语法来生成代码，极大提高了编写 HTML/CSS 的效率，之后改名为 emmet，但是随之而来的改变不仅限于名字，还增加了许多新的特性。
emmet 怎么用
新建一个html文档, 输入html:5, 按下tab键, 神奇的事情发生了
html:5
// tab
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
</body>
</html>
添加类、id、文本和属性
emmet 的一个强大特性，使用类 CSS 选择器的方式，
. 是生成类名，
# 是生成 id，
{} 中生成文本内容，
[] 中可以设置属性, 可以嵌套使用。
p
<p></p>
p.bar
<p class="bar"></p>
p.bar1.bar2
<p class="bar1 bar2"></p>
p#foo
<p id="foo"></p>
input[type=radio]
<input type="radio">
p.bar#foo{123}
<p class="bar" id="foo">123</p>
嵌套和分组
emmet 又一个强大的特性，也是让你写 html 速度起飞的关键因素。嵌套语法：
>：子元素符号，表示嵌套的元素
+：同级标签符号^：可以使该符号前的标签提升一行
其中 ^ 用的不多，容易让人逻辑混乱，这个时候就需要良好的分组来实现。
p>span
<p><span></span></p>
p+span
<p></p>
<span></span>
p>h1^span
<p>
<h1></h1>
</p>
<span></span>
(p>h1)+span
<p>
<h1></h1>
</p>
<span></span>
![Uploading image_390545.png . . .]
重复添加相同元素
ul>li*5
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
加上分组的应用，可以处理更复杂的 html 结构
(div.warp>p.bar+span#foo)*2
<div class="warp">
<p class="bar"></p>
<span id="foo"></span>
</div>
<div class="warp">
<p class="bar"></p>
<span id="foo"></span>
</div>
列表按序计数
ul>li.item$*3
<ul>
<li class="item1"></li>
<li class="item2"></li>
<li class="item3"></li>
</ul>
如果想要两位数的序号，添加两个$即可,依此类推
ul>li{item$$}*3
<ul>
<li>item01</li>
<li>item02</li>
<li>item03</li>
</ul>
参考资料
emmet 官网
Emmet：HTML/CSS 代码快速编写神器
sublime text 2 中 Emmet8 个常用的技巧
网友评论