emmet, 让你的 html 飞起来

时间 2019-11-15

标签 emmet 让你 html 飞起栏目 HTML 繁體版

原文原文链接

sublime做为一款强大的文本编辑器，其诸多特性使得以前用notepad2的我毅然舍弃了旧爱，奔向的新欢。做为一枚程序猿，编码的效率天然也是很是重要的，最初写页面时，所有的标签都是手打，不只效率底下并且容易出现漏错。以后接触到了emmet这一神器，天然要善加利用。javascript

emmet是什么

首先是官网上的介绍。css

Emmet is a plugin for many popular text editors which greatly improves HTML & CSS workflow.
Emmet 是一个可用在许多流行文本编辑器上的极大简化HTML和CSS工做流程的插件。html

前身是Zen coding，他使用仿css选择器的语法来生成代码，极大提升了编写HTML/CSS的效率，以后更名为emmet，可是随之而来的改变不只限于名字，还增长了许多新的特性。java

emmet怎么用

tips：如下用法基于Windows下的Sublime Text3编辑器

文档结构初始化

对于html文档来讲，文档类型DOCTYPE，<head>、<html>、<body>这些标签都是必须的，若是每次都手工录入的话效率很低，使用emmet就能够在空白html文档中输入工具

// type
html:5
// tab
<!DOCTYPE html>
<html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> </body> </html>复制代码

添加类、id、文本和属性

emmet的一个强大特性，使用类CSS选择器的方式，.是生成类名，#是生成id，{}中生成文本内容，[]中能够设置属性,能够嵌套使用。话很少说，上demo。编码

// type
p
// tab
<p></p>

// type
p.bar
// tab
<p class="bar"></p>

// 添加多个类
// type
p.bar1.bar2
// tab
<p class="bar1 bar2"></p>

// type
p#foo
// tab
<p id="foo"></p>

// type
p{123}
// tab
<p>123</p>

// type
input[type=radio]
// tab
<input type="radio">

// type
p.bar#foo{123}
// tab
<p class="bar" id="foo">123</p>复制代码

嵌套和分组

emmet又一个强大的特性，也是让你写html速度起飞的关键因素。
嵌套语法：spa

>：子元素符号，表示嵌套的元素
+：同级标签符号
^：可使该符号前的标签提高一行.net

其中^用的很少，容易让人逻辑混乱，这个时候就须要良好的分组来实现。翠花，上demo！插件

// type
p>span
// tab
<p><span></span></p>

// type
p+span
// tab
<p></p>
<span></span>

// type
p>h1^span
// tab
<p>
    <h1></h1>
</p>
<span></span>

// 以分组的方式来实现,更清晰
// type
(p>h1)+span
// tab
<p>
    <h1></h1>
</p>
<span></span>复制代码

重复添加相同元素

写页面的时候常常会遇到不少重复的结构用来显示数据，好比无序列表ul，若是列表项不少，手打就显得效率十分低下，好在emmet能够帮咱们完美解决这个问题。

// type
ul>li*5
// tab
<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>复制代码

加上分组的应用，能够处理更复杂的html结构

// type
(div.warp>p.bar+span#foo)*2
// tab
<div class="warp">
    <p class="bar"></p>
    <span id="foo"></span>
</div>
<div class="warp">
    <p class="bar"></p>
    <span id="foo"></span>
</div>复制代码

一种幸福感油然而生，果真科技是第一辈子产力。

列表按序计数

对于列表项，常常会碰到有顺序的计数，这个时候，若是手工修改，吃力不讨好，且看咱们的emmet如何大显神通。

// type
ul>li.item$*3
// tab
<ul>
    <li class="item1"></li>
    <li class="item2"></li>
    <li class="item3"></li>
</ul>

// 若是想要两位数的序号，添加两个$便可,依此类推
// type
ul>li{item$}*3
// tab
<ul>
    <li>item01</li>
    <li>item02</li>
    <li>item03</li>
</ul>复制代码

css的用法

Sublime自己提供的模糊输入已经极大程度的方便了css的输入，所以我没有作过多的研究，感兴趣的同窗能够去我提供的参考资料页面自行了解。

小结

对于程序猿来讲，效率是一项很是重要的因素，效率高就意味着能够更快的完成任务，并有更多的时间来发现和解决bug(笑，所以选择合适的工具对于咱们来讲是不可或缺的，这篇博文既是emmet的介绍，也算是对本身的前段时间的感觉作一个总结。
最后，吃我一发emmet安利！

参考资料

emmet官网
 Emmet：HTML/CSS代码快速编写神器
 sublime text 2中Emmet8个经常使用的技巧