2. 程式人生 > >前端開發利器Emmet外掛的基本使用總結

前端開發利器Emmet外掛的基本使用總結

阿新 • • 發佈：2019-01-05

1.Emmet的簡介

Emmet (前身為 Zen Coding) 是一個能大幅度提高前端開發效率的工具，能夠實現 HTML、CSS 的快速編寫。
官網地址：http://emmet.io/
官方文件：http://docs.emmet.io/cheat-sheet/

1.1 使用Emmet的好處

通過使用Emmet的精簡語法，可以加速前端的頁面書寫佈局，提高前端的開發效率。

1.2 簡單樣例展示

  • 在pycharm編輯器(其它編輯器可以安裝Emmet外掛進行支援)的HTML檔案中輸入下面程式碼：
	div#box>(div#menu>(a.menu-item[href="#"]{選單$})*4)+div#content>(section.article>ul>(li{相關內容})*3)*2
  • 接著按下 tab 鍵，之前的縮寫程式碼就會自動擴充套件為完整的 html 程式碼片斷。
	<div id="box">
    <div id="menu">
        <a href="#" class="menu-item">選單1</a>
        <a href="#" class="menu-item">選單2</a>
        <a href="#" class="menu-item">選單3</a>
        <a href="#" class
 
="menu-item">選單4</a>
    </div>
    <div id="content">
        <section class="article">
            <ul>
                <li>相關內容</li>
                <li>相關內容</li>
                <li>相關內容</li>
            </ul>
        </section
 
>
        <section class="article">
            <ul>
                <li>相關內容</li>
                <li>相關內容</li>
                <li>相關內容</li>
            </ul>
        </section>
    </div>
</div>

看來上面樣例演示是不是感覺很神奇，下面將介紹下其基本語法

2. 基本語法

2.1 後代關係：>

縮寫：nav>ul>li

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

2.2 兄弟關係：+

縮寫：div+p

<div></div>
<p></p>

2.3 上級關係：^

（1）縮寫：div+div>p>span+em^p

<div></div>
<div>
    <p><span></span><em></em></p>
    <p></p>
</div>

（2）縮寫：div+div>p>span+em^^div

<div></div>
<div>
    <p><span></span><em></em></p>
</div>
<div></div>

2.4 分組()

（1）縮寫：div>(header>ul>li*2>a)+footer>p

<div>
    <header>
        <ul>
            <li><a href=""></a></li>
            <li><a href=""></a></li>
        </ul>
    </header>
    <footer>
        <p></p>
    </footer>
</div>

（2）縮寫：(div>dl>(dt+dd)*3)+footer>p

<div>
    <dl>
        <dt></dt>
        <dd></dd>
        <dt></dt>
        <dd></dd>
        <dt></dt>
        <dd></dd>
    </dl>
</div>
<footer>
    <p></p>
</footer>

2.5 乘法：*

縮寫：ul>li*4

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

2.6 自增符號：$

（1）縮寫：ul>li.item$*5

<ul>
    <li class="item1"></li>
    <li class="item2"></li>
    <li class="item3"></li>
    <li class="item4"></li>
    <li class="item5"></li>
</ul>

（2）縮寫：h [ t i t l e = i t e m [title=item ]{Header $}*3

<h1 title="item1">Header 1</h1>
<h2 title="item2">Header 2</h2>
<h3 title="item3">Header 3</h3>

（3）縮寫：ul>li.item$$$*5

<ul>
    <li class="item001"></li>
    <li class="item002"></li>
    <li class="item003"></li>
    <li class="item004"></li>
    <li class="item005"></li>
</ul>

（4）縮寫：ul>[email protected]*5

<ul>
    <li class="item5"></li>
    <li class="item4"></li>
    <li class="item3"></li>
    <li class="item2"></li>~~刪除線格式~~ 
    <li class="item1"></li>
</ul>

（5）縮寫：ul>[email protected]*5

<ul>
    <li class="item3"></li>
    <li class="item4"></li>
    <li class="item5"></li>
    <li class="item6"></li>
    <li class="item7"></li>
</ul>

2.7 ID和類屬性

ID屬性
縮寫：#header

<div id="header"></div>

類（class）屬性
縮寫：.title

<div class="title"></div>

類連寫：p.class1.class2.class3

<p class="class1 class2 class3"></p>

ID和類屬性混合
縮寫: div#content.wide

<div id="content" class="wide"></div>

2.8 自定義屬性

（1）縮寫：img[src="/img/a.png"][alt="xxxx"]

<img src="/img/a.png" alt="xxxx">

（2）縮寫：td[rowspan=2 colspan=3 title]

<td rowspan="2" colspan="3" title=""></td>

2.9 文字：{}

（1）縮寫：a{點我}

<a href="">點我</a>

（2）縮寫：p>{點}+a{這裡}+{ 繼續}

<p>點<a href="">這裡</a> 繼續</p>

HTML標籤語法

（1）縮寫：!

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>

</body>
</html>

（2）縮寫：a

<a href=""></a>

（3）縮寫：a:link

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

（4）縮寫：a:mail

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

（5）縮寫：link

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

（6）縮寫：link:css

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

（7）縮寫：link:favicon

<link rel="shortcut icon" type="image/x-icon" href="favicon.ico">

（8）縮寫：meta:utf

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

（9）縮寫：meta:vp

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

（10）縮寫：script:src

<script src=""></script>

（11）縮寫：img

<img src="" alt="">

（12）縮寫：form:post

<form action="" method="post"></form>

（13）縮寫：form:get

<form action="" method="get"></form>

（14）縮寫：input:h
別名：input:hidden

<input type="hidden" name="">

（15）縮寫：input:text, input:t
別名：inp

<input type="text" name="" id="">

（16）縮寫：input:p
別名：input:password

<input type="password" name="" id="">

（17）縮寫：input:c
別名：input:checkbox

<input type="checkbox" name="" id="">

（18）縮寫：input:r
別名：input:radio

<input type="radio" name="" id="">

（19）縮寫：input:f
別名：input:file

<input type="file" name="" id="">

（20）縮寫：input:s
別名：input:submit

<input type="submit" value="">

（21）縮寫：input:b
別名：input:button

<input type="button" value="">

（22）縮寫：btn:r
別名：button[type=reset]

<button type="reset"></button>

（23）縮寫：btn:s
別名：button[type=submit]

<button type="submit"></button>

參考： https://docs.emmet.io/abbreviations/syntax/

相關推薦

前端開發利器Emmet外掛的基本使用總結

1.Emmet的簡介 Emmet (前身為 Zen Coding) 是一個能大幅度提高前端開發效率的工具，能夠實現 HTML、CSS 的快速編寫。 官網地址：http://emmet.io/ 官方文件：http://docs.emmet.io/cheat-sheet/ 1.1 使用E

前端開發利器之靜態服務器

環境 oca 配置 pos 服務 path pytho onf dex 在進行前端頁面開發時，為了調試方便，需要在本地啟動一個靜態文件服務器，而不需要與後端api服務一起部署。 常用靜態文件服務器 01. anywhere 使用簡單，需要nodejs環境。安裝：npm in

前端開發利器： Bootstrap + AngularJS

構建一個CRUD應用可能用到的全部內容包括：資料繫結、基本模板識別符號、表單驗證、路由、深度連結、元件重用、依賴注入。AngularJS應用的解析 本節描述AngularJS應用程式的三個組成部分，並解釋它們如何對映到模型-檢視-控制器設計模式： 模板（Templates） 模板是您用HTML和CSS編寫的檔

【Unity3D入門教程】遊戲開發利器UGUI的基本使用方法

前言 UGUI是Unity官方推出的新一代互動系統，與傳統的GUI相比，它具有使用靈活、介面美觀、支援個性化定製的特點。本文將會進行UGUI使用的簡單介紹，與大家一起敲開UGUI開發的大門。 說到底，

微信開發系列——微信訂閱號前端開發利器：WeUI

前言：年前的兩個星期，學習了下微信公眾號的開發。後端基本能夠基於盛派的第三方sdk能搞定大部分事宜。剩下的就是前端了，關於手機端的瀏覽器的相容性，一直是博主的一塊心病，因為博主一直專注於bootstrap的相關元件學習，知道bootstrap做響應式沒有任何問題，所以曾經嘗試過直接用bootstrap來佈局，

Sublime Text 3前端開發常用優秀外掛介紹

Package Control使用方法/安裝Emmet外掛 下面將以安裝Emmet外掛為例，同時介紹如何使用Package Control外掛 在Sublime Text 3中按下快捷鍵Ctrl+Shift+P 在出現的文字框中輸入Install Package(或直接輸入“ip”)選中Instal

sublime text3 針對於前端開發必備的外掛

1.emmet--前身Zen coding：HTML/CSS程式碼快速編寫神器 2.jQuery Package for sublime Text 3.JS FormatJS程式碼格式化外掛 4.Sublime CodeIntel程式碼自動提示 5.Bracket High

微信公眾號開發C#系列-12、微信前端開發利器：WeUI

1、前言 通過前面系列文章的學習與講解，相信大家已經對微信的開發有了一個全新的認識。後端基本能夠基於盛派的第三方sdk搞定大部分事宜，剩下的就是前端了。關於手機端的瀏覽器的相容性問題相信一直是開發者們的一塊心病，對於微信開發前端元件這一塊總是找不到合適的移動端元件，什麼都要自己去實現，這個開發成本就大了去了。

前端開發神器：Emmet外掛

今天在逛CSDN時，發現了一個前端神器，IDEA內建了這個外掛。所有操作按下“Tab”鍵完成 生成HTML基本結構 ！或html:5或html:4s，按下Tab鍵 巢狀操作 使用“>”生成子元素 使用“+”生成兄弟元素 使用“^”生成父元素 使用“”生成

前端開發必備！Emmet使用手冊

++ value 表達 ive 運行時 row net 能夠 com 介紹 Emmet (前身為 Zen Coding) 是一個能大幅度提高前端開發效率的一個工具: 基本上，大多數的文本編輯器都會允許你存儲和重用一些代碼塊，我們稱之為“片段”

前端開發 - 知識點總結

cal microsoft 回調函數 ack script 前端開發 soft sof www 簡介：涉及JavaScript、jQuery甚至Django模板語言 $.each()方法 定義：為每個匹配元素規定運行的函數 提示：返回false用於停止循環 語法：$

前端開發規範手冊：（一）基本原則

name ges rop scrip 有效 object sel 代碼 charset 1、結構、樣式、行為分離 盡量確保文檔和模版只包含HTML結構，樣式都放到樣式表中，行為都放到腳本裏。 2、縮進 統一兩個空格縮進（總之縮進統一即可），不要使用Tab鍵或者Tab

前端開發規範總結 總結前端開發模式和規範

這樣的 oat 真假 貢獻 駝峰命名 lpad 使用 後者 載器 1、前端開發規範 WEB客戶端開發自成體系， 主要用於智能終端（iPhone、Android手機、iPad、Android Pad）和傳統PC的開發。JS規範、HTML規範和CSS規範對客戶端開發進行全方位指

Emmet-前端開發神器

{} -i sel grouping css選擇器 cat app scrip 括號 Emmet是一款編輯器插件，支持多種編輯器支持。在前端開發中，Emmet 使用縮寫語法快速編寫 HTML、CSS 以及實現其他的功能，極大的提高前端開發效率。 下載地址http://em

（持續更新）瀏覽器兼容性總結—之前端開發常用屬性及api

ott 內置 事件 move min-width line 顏色漸變效果 瀏覽器兼容性 :hover max-width，min-width ie7以上支持 rgba 只支持ie9及以上瀏覽器，ie8要用濾鏡處理 border-radius 也只支持ie9以上 不需

前端開發知識之前端移動端適配總結

演示 等於 不同 無效 這也 sta 一個 name 物理 meta標簽到底做了什麽事情 做過移動端適配的小夥伴一定有遇到過這行代碼： <meta name="viewport" content="width=device-width, initial-scale=1

前端開發 - CSS - 總結

內容 文字 AC focus orm 隨著 through 浮動 dex CSS:層疊樣式表(Cascading Style Sheets)1.css的特征2.css的引入3.選擇器4.偽類選擇器5.偽元素選擇器6.字體樣式 文本樣式 背景屬性7.盒模型 border ma

前端開發 - JQuery - 總結

操作 value 屬性 案例 文檔 效果 val ajax bsp 一、JavaScript和Jquery的區別 二、jquery的選擇器 三、jquery對象和Dom對象轉換 四、jquery的效果 五、jquery的屬性操作 六、input中的value值操作

前端開發工程師從入門到精通學習過程及資源總結（持續更新中）

開發實戰 set dex 從入門到精通 main 知識 uno 基礎入門 易雲 職位名稱：前端開發工程師 學習概要：1、先了解基礎，html/css/JavaScript是基礎。html/css就是做靜態頁面的，javascript是做動態的。 2、學習框架：jQuery（

前端開發規範總結

內存 count side sele orm html開發 完全 限制 緩存 1、前端開發規範 WEB客戶端開發自成體系， 主要用於智能終端（iPhone、Android手機、iPad、Android Pad）和傳統PC的開發。JS規範、HTML規範和CSS規範