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

2024年1月16日 169次阅读 来源: Dawn

介绍：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$

{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

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);
    原文作者：Dawn
    原文地址: https://segmentfault.com/a/1190000016252026
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞