Emmet:HTML/CSS代碼快速編寫技巧

時間 2019-11-13

標籤 emmet html css 代碼快速編寫技巧欄目 HTML 简体版

原文原文鏈接

1、Emmet簡介html

Emmet的前身是Zen Coding，它使用仿CSS選擇器的語法來生成代碼，大大提升了HTML/CSS代碼編寫的速度，由兩個核心組件組成：一個縮寫擴展器（縮寫爲像CSS同樣的選擇器）和上下文無關的HTML標籤對匹配器。web

2、快速編寫HTML代碼編輯器

1.初始化spa

　　HTML文檔須要包含一些固定的標籤，好比<html>,<head>,<body>等，利用Emmet能夠1秒鐘就能夠完成這些標籤的輸入。插件

好比：輸入「!」或「html:5」,而後按Tab鍵，就能生成：orm

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

</body>
</html>

html:5或!：用於HTML5文檔類型；htm

html:xt：用於XHTML過濾文檔類型；blog

html:4s：用於HTML4嚴格文檔類型。ip

2.輕鬆添加類，id，文本和屬性文檔

連續輸入元素名稱和ID，Emmet會自動補全，好比：輸入p#foo，就能生成：

<p id="foo"></p>

連續輸入類和id，好比：p.bar#foo，會自動生成：

<p class="bar" id="foo"></p>

定義元素的內容：

h1{內容}：

<h1>內容</h1>

定義元素的屬性：

a[href=#]:

<a href="#"></a>

3.嵌套

利用Emmet只需一行代碼就能夠實現標籤的嵌套：

>：子元素符號，表示嵌套的元素；

+：同級標籤符號；

^：能夠使用該符號前的標籤提高一行。

好比：

p>span：

<p><span></span></p>

h1+h2：

<h1></h1><h2></h2>

p>span^p：

<p><span></span></p><p></p>

4.分組

利用Emmet能夠經過嵌套和括號快速生成一些代碼塊，好比：輸入(.foo>h1)+(#bar>h2)，會自動生成：

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

5.隱式標籤

申明一個帶類的標籤，只需輸入div.item，就會自動生成：

<div class="item"></div>

在過去版本中，能夠省略掉div，即輸入.item便可生成<div class="item"></div>。如今若是隻輸入.item，則Emmet會根據父標籤進行斷定。好比在<ul> 中輸入.item，就會生成<li class="item"></li>。

li：用於ul和ol中；

tr：用於table、tbody、thead和tfoot中；

td：用於tr中；

option：用於select和optgroup中。

6.定義多個元素

要定義多個元素，能夠使用符號*，好比：ul>li*5:

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

7.定義多個帶屬性的元素

輸入ul>li.item$*3，將會自動生成：

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

3、CSS縮寫

1.值

好比要定義元素的寬度，只需輸入w100，便可生成：

width: 100px;

除了px，還能夠生成其餘單位，好比輸入h10p+m5e，會生成：

height: 10%;
margin: 5em;

單位別名列表：

p：表示%；

e：表示em；

x：表示ex。

2.模糊匹配

若是有些縮寫在寫的時候拿捏不許，Emmet會根據輸入的內容匹配最接近的語法，好比輸入ov:h、ov-h、ovh和oh都會生成：

overflow: hidden;

3.供應商前綴

若是輸入非W3C標準的CSS屬性，Emmet會自動加上供應商前綴，好比輸入trs，則會生成：

 -webkit-transition: prop time;
 -moz-transition: prop time;
 -ms-transition: prop time;
 -o-transition: prop time;
 transition: prop time;

若是不但願加上全部前綴，也能夠使用縮寫來指定，好比輸入：-wm-trf，表示只加上-webkit和-moz前綴：

 -webkit-transform: ;
 -moz-transform: ;
 transform: ;

前綴說些以下：

w：表示-webkit-；

m：表示-moz-；

s：表示-ms-；

o：表示-o-。

4.漸變（webStorm不支持）

輸入lg(left,#fff 50%,#000)，會自動生成：

background-image: -webkit-gradient(linear, 0 0, 100% 0, color-stop(0.5, #fff), to(#000));  
background-image: -webkit-linear-gradient(left, #fff 50%, #000);  
background-image: -moz-linear-gradient(left, #fff 50%, #000);  
background-image: -o-linear-gradient(left, #fff 50%, #000);  
background-image: linear-gradient(left, #fff 50%, #000);

4、針對不一樣編輯器的插件

Emmet支持以下編輯器：

1.Sublime Text 2;

2.TextMate 1.X;

3.Eclipse/Aptana;

4.Coda 1.6 and 2.x;

5.Espresso;

6.Chocolat（經過「Install Mixin」對話框添加);

7.Komodo Edit/IDE（經過Tools → Add-ons菜單添加);

8.Notepad++;

9.PSPad;

10.<textarea>;