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

最新推荐文章于 2022-02-23 13:48:56 发布

weixin_34199335

最新推荐文章于 2022-02-23 13:48:56 发布

阅读量205

点赞数

文章标签：前端 ViewUI

原文链接：https://segmentfault.com/a/1190000006832086

版权

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

示例

Emmet

下载

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

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

支持的编辑器如下

Emmet

文后有快捷键图下载地址

使用

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

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

1、新建一个标签

在编辑器输入 div 按下tab键

<div></div>

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

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

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

3、嵌套的标签

ul>li

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

4、创建多个标签

ul>li*5

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

5、创建多个标签并添加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>

6、创建同级标签

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