Emmet语法快速学习

前端 专栏收录该内容
2 篇文章 0 订阅

在进行前端开发的时候,经常要手动写一些Html和CSS代码,有时候手写比较的繁琐。所以Emmet语法就出现了,主要作用就是类似于快捷键的作用,只需要敲出几个字母就可以快速自动生成一段代码,大大提高开发效率。

Emmet是一款插件,只要能安装他的编辑器都能使用,大部分编辑器都可以使用该语法规则,我们平时开发的:Sublime Text、Eclipse、Notepad++、VS code、Atom、Dreamweaver等等编辑器都可以使用。

那么接下来,就通过官方的文档给大家讲解,简单直接。

一、基础语法示例:

子节点(Child):>

输入:nav>ul>li

自动生成:

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

重复(Multiplication):*

输入:ul>li*5

自动生成:

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

编号(Item numbering):$

输入:ul>li.item$*5

自动生成:

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

输入:h$[title=item$]{Header $}*3

自动生成:

<h1 title="item1">Header 1</h1>
<h2 title="item2">Header 2</h2>
<h3 title="item3">Header 3</h3>

输入:ul>li.item$$$*5

自动生成:

<ul>
    <li class="item001"></li>
    <li class="item002"></li>
    <li class="item003"></li>
    <li class="item004"></li>
    <li class="item005"></li>
</ul>

输入:ul>li.item$@-*5

自动生成:

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

输入:ul>li.item$@3*5

自动生成:

<ul>
    <li class="item3"></li>
    <li class="item4"></li>
    <li class="item5"></li>
    <li class="item6"></li>
    <li class="item7"></li>
</ul>

重复(Sibling):+

输入:div+p+bq

自动生成:

<div></div>
<p></p>
<blockquote></blockquote>

上级结点(Climb-up):^

输入:div+div>p>span+em^bq

自动生成:

<div></div>
<div>
    <p><span></span><em></em></p>
    <blockquote></blockquote>
</div>

输入:div+div>p>span+em^^bq

自动生成:

<div></div>
<div>
    <p><span></span><em></em></p>
</div>
<blockquote></blockquote>

分组(Grouping):()

输入:div>(header>ul>li*2>a)+footer>p

自动生成:

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

输入:(div>dl>(dt+dd)*3)+footer>p

自动生成:

<div>
    <dl>
        <dt></dt>
        <dd></dd>
        <dt></dt>
        <dd></dd>
        <dt></dt>
        <dd></dd>
    </dl>
</div>
<footer>
    <p></p>
</footer>

ID和类属性(ID and CLASS attributes

输入:#header

自动生成:

<div id="header"></div>

输入:.title

自动生成:

<div class="title"></div>

输入:form#search.wide

自动生成:

<form id="search" class="wide"></form>

输入:p.class1.class2.class3

自动生成:

<p class="class1 class2 class3"></p>

自定义属性(Custom attributes

输入:p[title="Hello world"]

自动生成:

<p title="Hello world"></p>

输入:td[rowspan=2 colspan=3 title]

自动生成:

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

输入:[a='value1' b="value2"]

自动生成:

<div a="value1" b="value2"></div>

文本(Text{}

输入:a{Click me}

自动生成:

<a href="">Click me</a>

输入:p>{Click }+a{here}+{ to continue}

自动生成:

<p>Click <a href="">here</a> to continue</p>

饮食标签(Implicit tag names

输入:.class

自动生成:

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

输入:em>.class

自动生成:

<em><span class="class"></span></em>

输入:ul>.class

自动生成:

<ul>
    <li class="class"></li>
</ul>

输入:table>.row>.col

自动生成:

<table>
    <tr class="row">
        <td class="col"></td>
    </tr>
</table>

二、HTML结构:

输入:!或 html:5

自动生成:

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

输入:a

自动生成:

<a href=""></a>

输入:a:link

自动生成:

<a href="http://"></a>

输入:br

自动生成:

<br />

输入:link

自动生成:

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

输入:link:css

自动生成:

<link rel="stylesheet" href="style.css" />

输入:style

自动生成:

<style></style>

输入:script

自动生成:

<script></script>

输入:script:src

自动生成:

<script src=""></script>

输入:input:text 或 input:t

自动生成:

<input type="text" name="" id="" />

输入:html:xml

自动生成:

<html xmlns="http://www.w3.org/1999/xhtml"></html>

输入:bq

自动生成:

<blockquote></blockquote>

输入:doc

自动生成:

<html>
<head>
    <meta charset="UTF-8" />
    <title>Document</title>
</head>
<body>
    
</body>
</html>

输入:doc4

自动生成:

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
    <title>Document</title>
</head>
<body>
    
</body>
</html>

输入:ol+

自动生成:

<ol>
    <li></li>
</ol>

输入:ul+

自动生成:

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

输入:!!!

自动生成:

<!DOCTYPE html>

三、CSS结构:

输入:pos

自动生成:

position:relative;

输入:pos:s

自动生成:

position:static;

输入:pos:a

自动生成:

position:absolute;

输入:m

自动生成:

margin:;

输入:m:a

自动生成:

margin:auto;

输入:bxz

自动生成:

box-sizing:border-box;

输入:bg

自动生成:

background:#000;

输入:!

自动生成:

!important

输入:@f

自动生成:

@font-face {
    font-family:;
    src:url(|);
}

输入:@i或@import

自动生成:

@import url();

输入:@kf

自动生成:

@-webkit-keyframes identifier {
    from {  }
    to {  }
}
@-o-keyframes identifier {
    from {  }
    to {  }
}
@-moz-keyframes identifier {
    from {  }
    to {  }
}
@keyframes identifier {
    from {  }
    to {  }
}

大致列举这么多,更多详细的其他用法类似。

大家也可以查看官方示例文档:https://docs.emmet.io/cheat-sheet/

 

 

  • 0
    点赞
  • 0
    评论
  • 0
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

相关推荐
©️2020 CSDN 皮肤主题: 编程工作室 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值