emmet工具使用和技巧

時間 2019-11-26

標籤 emmet 工具使用技巧简体版

原文原文鏈接

介紹

在前端開發的過程當中，一大部分的工做是寫 HTML、CSS 代碼。特別是手動編寫 HTML 代碼的時候，效率會特別低下，由於須要敲打不少尖括號，並且不少標籤都須要閉合標籤等。因而，就有了 Emmet(前身是Zen Coding)，它能夠極大的提升代碼編寫的效率，它提供了一種很是簡練的語法規則，而後馬上生成對應的 HTML 結構或者 CSS 代碼，同時還有多種實用的功能幫助進行前端開發。javascript

基本語法：

一、生成後代元素：> 大於號表示後面要生成的內容是當前標籤的後代css

命令：nav>ul>lihtml

每一個命令輸完後按下Tab鍵便可快速獲得代碼前端

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

二、生成兄弟元素：+ 加號表示後面的元素和前面的元素是兄弟元素java

命令：div+p+bq 獲得代碼以下：web

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

三、生成上級元素：^ 表示^後面的元素與^前面的元素的父元素是平級，即兄弟元素。一個^表示提高一個層級，兩個提高兩級c#

命令：div+div>p>span+em^bq 獲得代碼以下：app

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

命令：div+div>p>span+em^^bq 獲得代碼以下：ide

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

四、生成類名： . Emmet 默認的標籤爲 div ，若是咱們不給出標籤名稱的話，默認就生成 div 標籤。Emmet會根據父標籤進行斷定。好比在<ul>中輸入.item，就會生成<li class="item"></li>。spa

命令：.container 獲得代碼以下：

<div class="container"></div>

若是想生成多個類名可連續寫

命令： .container.wrapper.more 獲得代碼以下：

<div class="container wrapper more"></div>

五、生成ID：#

命令：#container 獲得代碼以下：

<div id="container"></div>

六、生成分組：() 用括號進行分組，這樣能夠更加明確要生成的結構，特別是層次關係

命令：(.foo>h1)+(.bar>h2) 獲得代碼以下：

<div class="foo">    <h1></h1></div><div class="bar">    <h2></h2></div>

七、重複生成多份：* *號後面是想重複生成的份數

命令：ul>li*5 獲得代碼以下：

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

八、對生成內容依次編號：$ $就表示一位數字，只出現一個的話，就從1開始。若是出現多個，就從0開始。若是我想生成三位數的序號，那麼要寫三個$

命令：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>

只能這樣單調的生成序號？對於強大的 Emmet 來講，確定不會了，咱們也能夠在 $ 後面增長 @- 來實現倒序排列：命令：ul>li.item$@-*5 獲得代碼以下：

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

一樣，咱們也可使用 @N 指定開始的序號

命令：ul>li.item$@3*5 獲得代碼以下：

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

至於ul>li.item$@-3*5 生成什麼大家本身琢磨吧！

九、生成自定義屬性：[attr] 中括號裏面的內容是你想添加的屬性

命令：td[rowspan=2 colspan=3 title] 獲得代碼以下：

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

十、生成文本內容：{} 大括號裏面是你想添加的文本內容

命令：a{Click me} 獲得代碼以下：

<a href="">Click me</a>

命令：p>{Click }+a{here}+{ to continue} 獲得代碼以下：

<p>Click <a href="">here</a>to continue</p>

到此爲止基本語法內容也就這麼多，剩下的就是增強理解與練習了。

注意：在寫命令的時候，你可能爲了代碼的可讀性，使用一些空格什麼的排版一下，這將會致使代碼沒法使用。可是{}[]中可存在空格

ul>li.item${item$}*3

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

#content>.article>h1.ok[title=parpername][style=color:#000;]+h3.no[title=subname][style=color:#fff;]+p.words

<div id="content">    	<div class="article">    		<h1 class="ok" title="papername" style="color:#000;"></h1>    		<h3 class="no" title="subname" style="color:#fff;"></h3>    		<p class="words"></p>    	</div>    </div>

練習的過程當中咱們能夠試着反推出命令行

<div class="header">    	<ul class="nav">    		<li><a href="" style="block"><span>name</span></a></li>    		<li><a href="" style="block"><span>name</span></a></li>    		<li><a href="" style="block"><span>name</span></a></li>    		<li><a href="" style="block"><span>name</span></a></li>    		<li><a href="" style="block"><span>name</span></a></li>    		<li><a href="" style="block"><span>name</span></a></li>    	</ul>    </div>

<table>    	<thead>    		<td class="col1"></td>    		<td class="col2"></td>    		<td class="col3"></td>    		<td class="col4"></td>    	</thead>    	<tbody>    		<tr class="row01">    			<td class="col1"></td>    		</tr>    		<tr class="row02">    			<td class="col2"></td>    		</tr>    		<tr class="row03">    			<td class="col3"></td>    		</tr>    	</tbody>    	<tfoot>    		<td></td>    		<td></td>    		<td></td>    		<td></td>    		<td></td>    	</tfoot>    </table>

<html>    <head>    	<title></title>    	<style type="text/css"></style>    	<script src="abc1.js" type="text/javascript"></script>    	<script src="abc2.js" type="text/javascript"></script>    	<script src="abc3.js" type="text/javascript"></script>    </head>    <body>    	<div class="content">    		<div class="nav">    			<ul>    				<li><a href=""><span></span></a></li>    			</ul>    		</div>    	</div>    	<div class="sidebar">    		<div class="top"></div>    		<div class="middle"></div>    		<div class="bottom"></div>    	</div>    	<div class="mian">    		<div class="article">    			<h1>article1</h1>    		</div>    		<div class="article">    			<h1>article2</h1>    		</div>    		<div class="article">    			<h1>article3</h1>    		</div>    	</div>    </body>    <div class="footer">copyright</div>    </html>

這些代碼的命令你反推出來了嗎？

1.命令：.header>ul.nav>li*6>a[style=block]>span{name}

2.命令：table>(thead>td.col$*4)+(tbody>tr.row$$*3>td.col$)+(tfoot>td*5)

3.命令： html>(head>title+style[type=text/css]+script[type=text/javascript][src=abc$.js]*3)+(body>(.content>.nav>ul>li>a>span)+(.sidebar>.top+.middle+.bottom)+(.mian>.article*3>h1{article$}))+(.footer{copyright})

3、emmet在HTML與CSS中的應用

emmet除了能快速編輯出上面的代碼之外，還有一些其餘代碼也可快速編輯，具體的、全面的快速編輯方式，還請瀏覽 emmet官方文檔（有詳細說明哦！）

下面只列出一些經常使用的快速編輯方式

命令：link