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

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。