emmet, 讓你的 html 飛起來

時間 2019-11-15

標籤 emmet 讓你 html 飛起欄目 HTML 简体版

原文原文鏈接

sublime做爲一款強大的文本編輯器，其諸多特性使得以前用notepad2的我毅然捨棄了舊愛，奔向的新歡。做爲一枚程序猿，編碼的效率天然也是很是重要的，最初寫頁面時，所有的標籤都是手打，不只效率底下並且容易出現漏錯。以後接觸到了emmet這一神器，天然要善加利用。javascript

emmet是什麼

首先是官網上的介紹。css

Emmet is a plugin for many popular text editors which greatly improves HTML & CSS workflow.
Emmet 是一個可用在許多流行文本編輯器上的極大簡化HTML和CSS工做流程的插件。html

前身是Zen coding，他使用仿css選擇器的語法來生成代碼，極大提升了編寫HTML/CSS的效率，以後更名爲emmet，可是隨之而來的改變不只限於名字，還增長了許多新的特性。java

emmet怎麼用

tips：如下用法基於Windows下的Sublime Text3編輯器

文檔結構初始化

對於html文檔來講，文檔類型DOCTYPE，<head>、<html>、<body>這些標籤都是必須的，若是每次都手工錄入的話效率很低，使用emmet就能夠在空白html文檔中輸入工具

// type
html:5
// tab
<!DOCTYPE html>
<html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> </body> </html>複製代碼

添加類、id、文本和屬性

emmet的一個強大特性，使用類CSS選擇器的方式，.是生成類名，#是生成id，{}中生成文本內容，[]中能夠設置屬性,能夠嵌套使用。話很少說，上demo。編碼

// type
p
// tab
<p></p>

// type
p.bar
// tab
<p class="bar"></p>

// 添加多個類
// type
p.bar1.bar2
// tab
<p class="bar1 bar2"></p>

// type
p#foo
// tab
<p id="foo"></p>

// type
p{123}
// tab
<p>123</p>

// type
input[type=radio]
// tab
<input type="radio">

// type
p.bar#foo{123}
// tab
<p class="bar" id="foo">123</p>複製代碼

嵌套和分組

emmet又一個強大的特性，也是讓你寫html速度起飛的關鍵因素。
嵌套語法：spa

>：子元素符號，表示嵌套的元素
+：同級標籤符號
^：可使該符號前的標籤提高一行.net

其中^用的很少，容易讓人邏輯混亂，這個時候就須要良好的分組來實現。翠花，上demo！插件

// type
p>span
// tab
<p><span></span></p>

// type
p+span
// tab
<p></p>
<span></span>

// type
p>h1^span
// tab
<p>
    <h1></h1>
</p>
<span></span>

// 以分組的方式來實現,更清晰
// type
(p>h1)+span
// tab
<p>
    <h1></h1>
</p>
<span></span>複製代碼

重複添加相同元素

寫頁面的時候常常會遇到不少重複的結構用來顯示數據，好比無序列表ul，若是列表項不少，手打就顯得效率十分低下，好在emmet能夠幫咱們完美解決這個問題。

// type
ul>li*5
// tab
<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>複製代碼

加上分組的應用，能夠處理更復雜的html結構

// type
(div.warp>p.bar+span#foo)*2
// tab
<div class="warp">
    <p class="bar"></p>
    <span id="foo"></span>
</div>
<div class="warp">
    <p class="bar"></p>
    <span id="foo"></span>
</div>複製代碼

一種幸福感油然而生，果真科技是第一輩子產力。

列表按序計數

對於列表項，常常會碰到有順序的計數，這個時候，若是手工修改，吃力不討好，且看咱們的emmet如何大顯神通。

// type
ul>li.item$*3
// tab
<ul>
    <li class="item1"></li>
    <li class="item2"></li>
    <li class="item3"></li>
</ul>

// 若是想要兩位數的序號，添加兩個$便可,依此類推
// type
ul>li{item$}*3
// tab
<ul>
    <li>item01</li>
    <li>item02</li>
    <li>item03</li>
</ul>複製代碼