Emmet快捷键-前端必备快速编码工具

时间 2019-12-13

原文原文链接

Emmet (前身为 Zen Coding) 是一个能大幅度提升前端开发效率的一个工具。Emmet把片断这个概念提升到了一个新的层次：你能够设置CSS形式的可以动态被解析的表达式，而后根据你所输入的缩写来获得相应的内容。Emmet是很成熟的而且很是适用于编写HTML/XML 和 CSS 代码的前端开发人员，但也能够用于编程语言。html

示例

下载

官网地址：http://emmet.io/前端

插件下载地址：http://emmet.io/download/web

支持的编辑器以下编程

文后有快捷键图下载地址

使用

在编辑器输入 html:5 按下tab键编程语言

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

一、新建一个标签

在编辑器输入 div 按下tab键编辑器

<div></div>

二、新建一个带class（名字为c1）和id（名字为id1）的标签

在编辑器输入 div#id1.c1 按下tab键工具

<div id="id1" class="c1"></div>

三、嵌套的标签

ul>li编码

<ul>
    <li></li>
</ul>

四、建立多个标签

ul>li*5spa

<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

五、建立多个标签并添加class

ul>li.l$*5插件

<ul>
    <li class="l1"></li>
    <li class="l2"></li>
    <li class="l3"></li>
    <li class="l4"></li>
    <li class="l5"></li>
</ul>

六、建立同级标签

div.div1+ul>li*2

<div class="div1"></div>
<ul>
    <li></li>
    <li></li>
</ul>

更多使用方法，能够参见

Emmet快捷键图

图片下载地址

连接：http://pan.baidu.com/s/1jIjSQ7W 密码：27mx

by Weber.pub

本文地址：http://weber.pub/emmet快捷键-前端必备快速编码工具/179.html