前端工具【0】—— Emmet插件

時間 2019-12-06

標籤前端工具 emmet 插件简体版

原文原文鏈接

介紹：Emmet是許多流行文本編輯器的插件，它極大地改進了HTML和CSS工做流程、爲大部分流行的編輯器都提供了安裝插件，核心是縮寫語法+tab鍵(不一樣編輯器可自行設置)，如下是我整理的經常使用知識點。html

1、特性

一、支持定製：web

添加新縮寫或更新現有縮寫，可修改snippets.json文件
更改Emmet過濾器和操做的行爲，可修改preferences.json文件
定義如何生成HTML或XML代碼，可修改syntaxProfiles.json文件

二、支持大部分的編輯器：(此處無提供如下插件連接，附上官網連接：https://www.emmet.io/)json

Sublime Text 3/2
TextMate 1.x
Eclipse/Aptana
Coda 1.6 and 2.x
Espresso
Chocolat 
Komodo Edit/IDE 
Notepad++
PSPad
<textarea>
CodeMirror2/3
Brackets

2、基本語法

一、後代：> 示例：div>ul>li>a編輯器

<div>
    <ul>
        <li><a href=""></a></li>
    </ul>
</div>

二、兄弟：+ 示例：h1+purl

<h1></h1>
<p></p>

三、上級：^ ^^ 示例：div>ul>li>span+a^p div>ul>li>span+a^^pspa

<div>
    <ul>
        <li><span></span><a href=""></a></li>
        <p></p>
    </ul>
</div>

<div>
    <ul>
        <li><span></span><a href=""></a></li>
    </ul>
    <p></p>
</div>

四、分組：() 示例：div>(header>ul>li*2>a)+footer>div插件

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

五、乘法： 示例：ul>li2code

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

六、自增減：$ 示例：ul>li.lis$3 ul>li.lis$@-*3 div>h$[title=th$]{Header$}3htm

<ul>
    <li class="lis1"></li>
    <li class="lis2"></li>
    <li class="lis3"></li>
</ul>

<ul>
    <li class="lis3"></li>
    <li class="lis2"></li>
    <li class="lis1"></li>
</ul>

<div>
    <h1 title="th1">Header1</h1>
    <h2 title="th2">Header2</h2>
    <h3 title="th3">Header3</h3>
</div>

七、命名、屬性：#head .head p.p1.p2.p3ip

<div id="head"></div>
<div class="head"></div>
<p class="p1 p2 p3"></p>

八、自定義屬性：[] 示例div[title="HelloWorld"] div[rowspan=2 colspan=3 title]

<div title="HelloWorld"></div>
<div rowspan="2" colspan="3" title=""></div>

九、文本：{} 示例：div>{請點擊 }+a{這裏}+{ 跳轉}

<div>請點擊 <a href="">這裏</a> 跳轉</div>

3、HTML標籤語法

一、全部未知的縮寫都會轉換成標籤

<gg></gg>

二、基本html標籤：!

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

三、縮寫：link

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

四、簡寫：style、script

4、CSS語法

一、值：p(%)、e(em)、x(ex) 、不寫默認px、如w100

width：100px;

二、附加屬性：@f：
@font-face {

font-family:;
src:url();

}

三、模糊匹配：ov:h、ov-h、ovh、oh

overflow:hidden;

四、供應商前綴：trs

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

五、漸變：lg(left,yellow 50%,@pink)

background-image: -webkit-linear-gradient(left, yellow 50%, @pink);
background-image: -o-linear-gradient(left, yellow 50%, @pink);
background-image: linear-gradient(to right, yellow 50%, @pink);

相關標籤/搜索

每日一句

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