emmet插件基本语法

发表于 | 分类于

Emmet (前身为 Zen Coding) 是一个能大幅度提高前端开发效率的一个工具。基本上，大多数的文本编辑器都会允许你存储和重用一些代码块，我们称之为“片段”。虽然片段能很好地推动你的生产力，但大多数的实现都有这样一个缺点：你必须先定义你的代码片段，并且不能在运行时进行拓展。Emmet把片段这个概念提高到了一个新的层次：你可以设置CSS形式的能够动态被解析的表达式，然后根据你所输入的缩写来得到相应的内容。Emmet是很成熟的并且非常适用于编写HTML/XML 和 CSS 代码的前端开发工具，但也可以用于编程语言。

emmets使用方法

输入值，按Tab键执行！
如果不能执行，把输入法切换为英文后重试！

生成HTML格式

输入：

1
！

执行结果：

1
2
3
4
5
6
7
8
9
10
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	
</body>
</html>

添加meta标签

设置编码为utf-8

输入：

1
meta:utf

执行结果：

1
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">

初始化移动浏览显示

输入：

1
meta:vp

执行结果：

1
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

在IE运行最新的渲染模式

输入：

1
meta:compat

执行结果：

1
<meta http-equiv="X-UA-Compatible" content="IE=7">

添加link标签

输入：

1
link

执行结果：

1
<link rel="stylesheet" href="">

输入：

1
link:css

执行结果：

1
<link rel="stylesheet" href="style.css">

添加script标签

输入：

1
script:src

执行结果：

1
<script src=""></script>

添加元素

标签.类名/ .类名（若不输入标签，默认添加div）

输入：

1
p.name

执行结果：

1
<p class="name"></p>

标签#ID名/ #ID名（若不输入标签，默认添加div）

输入：

1
p#name

执行结果：

1
<p id="name"></p>

添加a标签

输入：

1
a

执行结果：

1
<a href=""></a>

输入：

1
a:link

执行结果：

1
<a href="http://"></a>

输入：

1
a:mail

执行结果：

1
<a href="mailto:"></a>