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

介绍：Emmet是许多流行文本编辑器的插件，它极大地改进了HTML和CSS工作流程、为大部分流行的编辑器都提供了安装插件，核心是缩写语法+tab键(不同编辑器可自行设置)，以下是我整理的常用知识点。

一、特性

1、支持定制：

添加新缩写或更新现有缩写，可修改snippets.json文件

更改Emmet过滤器和操作的行为，可修改preferences.json文件

定义如何生成HTML或XML代码，可修改syntaxProfiles.json文件

2、支持大部分的编辑器：(此处无提供以下插件链接，附上官网链接：https://www.emmet.io/)

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

二、基本语法

1、后代：> 示例：div>ul>li>a

<div>

    <ul>

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

    </ul>

</div>

2、兄弟：+ 示例：h1+p

<h1></h1>

<p></p>

3、上级：^ ^^ 示例：div>ul>li>span+a^p div>ul>li>span+a^^p

<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>

4、分组：() 示例：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>

5、乘法： 示例：ul>li2

<ul>

    <li></li>

    <li></li>

</ul>

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

<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>

7、命名、属性：#head .head p.p1.p2.p3

<div id="head"></div>

<div class="head"></div>

<p class="p1 p2 p3"></p>

8、自定义属性：[] 示例div[title="HelloWorld"] div[rowspan=2 colspan=3 title]

<div title="HelloWorld"></div>

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

9、文本：{} 示例：div>{请点击 }+a{这里}+{ 跳转}

<div>请点击 <a href="">这里</a> 跳转</div>

三、HTML标签语法

1、所有未知的缩写都会转换成标签

<gg></gg>

2、基本html标签：!

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

</head>

<body>

</body>

</html>

3、缩写：link

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

4、简写：style、script

四、CSS语法

1、值：p(%)、e(em)、x(ex) 、不写默认px、如w100

width：100px;

2、附加属性：@f：
@font-face {

font-family:;

src:url();

}

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

overflow:hidden;

4、供应商前缀：trs

-webkit-transition: prop time;

-moz-transition: prop time;

-ms-transition: prop time;

-o-transition: prop time;

transition: prop time;

5、渐变：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);

巴特西

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

一、特性

二、基本语法

三、HTML标签语法

四、CSS语法

最新文章

热门文章