Emmet Logo Emmet快速语法

Emmet使用特殊的表达式Abbreviations,也就是缩写:这种特殊的表达式会被Emmet解析并转义成结构化的代码块,其使用类似CSS选择器的语法来描述元素在DOM树节点的位置和属性。


Emmet是一款编辑器插件,支持多种编辑器支持。在前端开发中,Emmet 使用缩写语法快速编写 HTML、CSS 以及实现其他的功能,极大的提高前端开发效率。

在Dreamvweaver中使用 Tab 或在EditPlus等软件中Ctrl+E 快速展开HTML/CSS提效率.

完整命令集 三个高级技巧 图文逐步讲解

一、Emmet的安装与介绍

Emmet (前身为 Zen Coding) 是一个能大幅度提高前端开发效率的工具,能够实现 HTML、CSS 的快速编写。

EmmetEmmet

1-1. 使用Emmet的好处

  • 通常大多数的文本编辑器都会允许我们存储和重用一些代码块,我们称之为“片段”。虽然片段能很好地推动我们的生产力,但大多数的实现都有这样一个缺点:我们必须先定义代码片段,并且不能再运行时进行拓展。
  • Emmet 把片段这个概念提高到了一个新的层次:我们可以设置 CSS 形式的能够动态被解析的表达式,然后根据输入的缩写来得到相应的内容。Emmet 很成熟的并且非常适用于编写 HTML/XML CSS 代码的前端开发人员,但也可以用于编程语言。

1-2. 安装Emmet

Emmet 为大部分流行的编辑器都提供了安装插件,尤其是Adobe Dreamweaver早在2015版中就全面兼容Emmet语法,只要用tab键就能展开,非常好用。
如果你要在 Atom 中使用 Emmet 插件,可按下面方法部署:

(1)点击 Atom 的“Preferences”菜单选项(Windows 下是“Settings”菜单选项)

(2)进入到 Install 页面。

(3)搜索“Emmet”包,点击 Install 按钮即可安装。

原文:Atom - Emmet插件的使用详解(HTML/CSS代码自动补全)

1-3. 简单的使用样例

(1)我们在编辑器中输入如下代码:

ul>li*6

接着按下 tab 键,之前的缩写代码就会自动扩展为完整的 html 代码片断。

以及下面的动画

emmet

二、基本语法

2-1. 后代:>

缩写↓

nav>ul>li

展开输出↓

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

2-2. 兄弟:+

缩写↓

div+p+bq

展开输出↓

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

2-3. 上级:^

(1)缩写↓

div+div>p>span+em^bq

展开输出↓

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

(2)缩写↓

div+div>p>span+em^^bq

展开输出↓

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

2-4. 分组:()

(1)缩写↓

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>

(2)缩写↓

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

2-5. 乘法:*

缩写↓

ul>li*5

展开输出↓

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

2-6.自增符号:$

(1)缩写↓

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>

(2)缩写↓

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

展开输出↓

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

(3)缩写↓

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>

(4)缩写↓

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>

(5)缩写↓

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>

2-7.ID和类属性

(1)缩写↓

#header

展开输出↓

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

(2)缩写↓

.title

展开输出↓

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

(3)缩写↓

form#search.wide

展开输出↓

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

(4)缩写↓

p.class1.class2.class3

展开输出↓

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

2-8.自定义属性

(1)缩写↓

p[title="Hello world"]

展开输出↓

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

(2)缩写↓

td[rowspan=2 colspan=3 title]

展开输出↓

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

(3)缩写↓

[a='value1' b="value2"]

展开输出↓

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

2-9.文本:{}

(1)缩写↓

a{Click me}

展开输出↓

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

(2)缩写↓

p>{Click }+a{here}+{ to continue}

展开输出↓

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

2-10.隐式标签

(1)缩写↓

.class

展开输出↓

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

(2)缩写↓

em>.class

展开输出↓

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

(3)缩写↓

ul>.class

展开输出↓

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

(4)缩写↓

table>.row>.col

展开输出↓

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

三、HTML标签语法

3-1. 所有未知的缩写都会转换成标签

缩写↓

hangge

展开输出↓

<hangge></hangge>

3-2.基本html标签

(1)缩写↓

!

展开输出↓

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
   
</body>
</html>

(2)缩写↓

a

展开输出↓

<a href=""></a>

(3)缩写↓

a:link

展开输出↓

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

(4)缩写↓

a:mail

展开输出↓

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

(5)缩写↓

abbr

展开输出↓

<abbr title=""></abbr>

(6)缩写↓

acronym

展开输出↓

<acronym title=""></acronym>

(7)缩写↓

base

展开输出↓

<base href="" />

(8)缩写↓

basefont

展开输出↓

<basefont />

(9)缩写↓

br

展开输出↓

<br />

(10)缩写↓

frame

展开输出↓

<frame />

(11)缩写↓

hr

展开输出↓

<hr />

(12)缩写↓

bdo

展开输出↓

<bdo dir=""></bdo>

(13)缩写↓

bdo:r

展开输出↓

<bdo dir="rtl"></bdo>

(14)缩写↓

bdo:l

展开输出↓

<bdo dir="ltr"></bdo>

(15)缩写↓

col

展开输出↓

<col />

(16)缩写↓

link

展开输出↓

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

(17)缩写↓

link:css

展开输出↓

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

(18)缩写↓

link:print

展开输出↓

<link rel="stylesheet" href="print.css" media="print" />

(19)缩写↓

link:favicon

展开输出↓

<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />

(20)缩写↓

link:touch

展开输出↓

<link rel="apple-touch-icon" href="favicon.png" />

(21)缩写↓

link:rss

展开输出↓

<link rel="alternate" type="application/rss+xml" title="RSS" href="rss.xml" />

(22)缩写↓

link:atom

展开输出↓

<link rel="alternate" type="application/atom+xml" title="Atom" href="atom.xml" />

(23)缩写↓

meta

展开输出↓

<meta />

(24)缩写↓

meta:utf

展开输出↓

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

(25)缩写↓

meta:win

展开输出↓

<meta http-equiv="Content-Type" content="text/html;charset=windows-1251" />

(26)缩写↓

meta:vp

展开输出↓

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />

(27)缩写↓

meta:compat

展开输出↓

<meta http-equiv="X-UA-Compatible" content="IE=7" />

(28)缩写↓

style

展开输出↓

<style></style>

(29)缩写↓

script

展开输出↓

<script></script>

(30)缩写↓

script:src

展开输出↓

<script src=""></script>

(31)缩写↓

img

展开输出↓

<img src="" alt="" />

(32)缩写↓

iframe

展开输出↓

<iframe src="" frameborder="0"></iframe>

(33)缩写↓

embed

展开输出↓

<embed src="" type="" />

(34)缩写↓

object

展开输出↓

<object data="" type=""></object>

(35)缩写↓

param

展开输出↓

<param name="" value="" />

(36)缩写↓

map

展开输出↓

<map name=""></map>

(37)缩写↓

area

展开输出↓

<area shape="" coords="" href="" alt="" />

(38)缩写↓

area:d

展开输出↓

<area shape="default" href="" alt="" />

(39)缩写↓

area:c

展开输出↓

<area shape="circle" coords="" href="" alt="" />

(40)缩写↓

area:r

展开输出↓

<area shape="rect" coords="" href="" alt="" />

(41)缩写↓

area:p

展开输出↓

<area shape="poly" coords="" href="" alt="" />

(42)缩写↓

form

展开输出↓

<form action=""></form>

(43)缩写↓

form:get

展开输出↓

<form action="" method="get"></form>

(44)缩写↓

form:post

展开输出↓

<form action="" method="post"></form>

(45)缩写↓

label

展开输出↓

<label for=""></label>

(46)缩写↓

input

展开输出↓

<input type="text" />

(47)缩写↓

inp

展开输出↓

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

(48)缩写↓

input:hidden
别名:input[type=hidden name]

展开输出↓

<input type="hidden" name="" />

(49)缩写↓

input:h 
别名:input:hidden

展开输出↓

<input type="hidden" name="" />

(50)缩写↓

input:text, input:t 
别名:inp

展开输出↓

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

(51)缩写↓

input:search
别名:inp[type=search]

展开输出↓

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

(52)缩写↓

input:email 
别名:inp[type=email]

展开输出↓

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

(53)缩写↓

input:url
别名:inp[type=url]

展开输出↓

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

(54)缩写↓

input:password
别名:inp[type=password]

展开输出↓

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

(55)缩写↓

input:p
别名:input:password

展开输出↓

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

(56)缩写↓

input:datetime
别名:inp[type=datetime]

展开输出↓

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

(57)缩写↓

input:date
别名:inp[type=date]

展开输出↓

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

(58)缩写↓

input:datetime-local
别名:inp[type=datetime-local]

展开输出↓

<input type="datetime-local" name="" id="" />

(59)缩写↓

input:month
别名:inp[type=month]

展开输出↓

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

(60)缩写↓

input:week
别名:inp[type=week]

展开输出↓

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

(61)缩写↓

input:time 
别名:inp[type=time]

展开输出↓

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

(62)缩写↓

input:number
别名:inp[type=number]

展开输出↓

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

(63)缩写↓

input:color
别名:inp[type=color]

展开输出↓

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

(64)缩写↓

input:checkbox
别名:inp[type=checkbox]

展开输出↓

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

(65)缩写↓

input:c
别名:input:checkbox

展开输出↓

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

(66)缩写↓

input:radio 
别名:inp[type=radio]

展开输出↓

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

(67)缩写↓

input:r
别名:input:radio

展开输出↓

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

(68)缩写↓

input:range
别名:inp[type=range]

展开输出↓

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

(69)缩写↓

input:file
别名:inp[type=file]

展开输出↓

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

(70)缩写↓

input:f
别名:input:file

展开输出↓

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

(71)缩写↓

input:submit

展开输出↓

<input type="submit" value="" />

(72)缩写↓

input:s 
别名:input:submit

展开输出↓

<input type="submit" value="" />

(73)缩写↓

input:image

展开输出↓

<input type="image" src="" alt="" />

(74)缩写↓

input:i 
别名:input:image

展开输出↓

<input type="image" src="" alt="" />

(75)缩写↓

input:button

展开输出↓

<input type="button" value="" />

(76)缩写↓

input:b 
别名:input:button

展开输出↓

<input type="button" value="" />

(77)缩写↓

isindex

展开输出↓

<isindex />

(78)缩写↓

input:reset 
别名:input:button[type=reset]

展开输出↓

<input type="reset" value="" />

(79)缩写↓

select

展开输出↓

<select name="" id=""></select>

(80)缩写↓

option

展开输出↓

<option value=""></option>

(81)缩写↓

textarea

展开输出↓

<textarea name="" id="" cols="30" rows="10"></textarea>

(82)缩写↓

menu:context
别名:menu[type=context]>

展开输出↓

<menu type="context"></menu>

(83)缩写↓

menu:c
别名:menu:context

展开输出↓

<menu type="context"></menu>

(84)缩写↓

menu:toolbar
别名:menu[type=toolbar]>

展开输出↓

<menu type="toolbar"></menu>

(85)缩写↓

menu:t
别名:menu:toolbar

展开输出↓

<menu type="toolbar"></menu>

(86)缩写↓

video

展开输出↓

<video src=""></video>

(87)缩写↓

audio

展开输出↓

<audio src=""></audio>

(88)缩写↓

html:xml

展开输出↓

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

(89)缩写↓

keygen

展开输出↓

<keygen />

(90)缩写↓

command

展开输出↓

<command />

(91)缩写↓

bq 
别名:blockquote

展开输出↓

<blockquote></blockquote>

(92)缩写↓

acr 
别名:acronym

展开输出↓

<acronym title=""></acronym>

(93)缩写↓

fig 
别名:figcaption

展开输出↓

<figure></figure>

(94)缩写↓

figc  
别名:figcaption

展开输出↓

<figcaption></figcaption>

(95)缩写↓

ifr 
别名:iframe

展开输出↓

<iframe src="" frameborder="0"></iframe>

(96)缩写↓

emb
别名:embed

展开输出↓

<embed src="" type="" />

(97)缩写↓

obj
别名:object

展开输出↓

<object data="" type=""></object>

(98)缩写↓

src
别名:source

展开输出↓

<source></source>

(99)缩写↓

cap
别名:caption

展开输出↓

<caption></caption>

(100)缩写↓

colg
别名:colgroup

展开输出↓

<colgroup></colgroup>

(101)缩写↓

input:text, input:t 
别名:inp

展开输出↓

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

(102)缩写↓

input:text, input:t
别名:inp

展开输出↓

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

(103)缩写↓

btn:r
别名:button[type=reset]

展开输出↓

<button type="reset"></button>

(104)缩写↓

btn:s
别名:button[type=submit]

展开输出↓

<button type="submit"></button>

四、CSS

4-1. CSS模块使用模糊搜索来查找未知的缩写

如: == ov-h == ovh == oh

如果没有找到缩写,则转换为属性名称:foo-barfoo-bar: |;

您可以使用连字符作为前缀缩写以生成供应商的前缀属性: -foo

4-2. 常用样式简写

(1)缩写↓

pos

展开输出↓

position:relative;

(2)缩写↓

t

展开输出↓

top:;

五、XSL

(1)缩写↓

xsl

展开输出↓

Alias of !!!+xsl:stylesheet[version=1.0 xmlns:xsl=http://www.w3.org/1999/XSL/Transform]>{ |}

<?xml version="1.0" encoding="UTF-8"?> <xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"></xsl:stylesheet>

(2)缩写↓

var

展开输出↓

<xsl:variable name=""></xsl:variable>

查看全部命令集>>

以及这里的一篇使用心得

Emmet Logo https://emmet.io/