前端工具【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);