Emmet 用法举例

Emmet 的前身是大名鼎鼎的 Zen coding。如果你从事 Web 前端开发的话, 对该插件一定不会陌生。它使用仿 CSS 选择器的语法来代码, 大大提高了 HTML/CSS 代码编写的速度

基本语法

子元素: >

例子

nav>ul>li

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

兄弟元素: +

例子

div+p+bq

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

在某个元素之上: ^

例子一

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>

分为一组: ()

例子一

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>

倍增元素: *

例子

ul>li*5

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

项目数字递增: $

例子一

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>

ID 和 CLASS 属性

例子一

`

header

`

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

例子二

.title

<div class=“title”></div>

例子一

footer#search.wide

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

例子四

p.class1.class2.class3

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

自定义属性

例子一

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>

文本内容: {}

例子一

a{Click me}

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

例子二

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

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

缺省标签名

例子一

.class1

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

例子二

em>.class1

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

例子三

ul>.class1

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

例子四

table>.row>.col

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

HTML

HTML 基本模板

doc

扩展写法

html>(header>meta[charset=UTF-8]+title{${1:Document}})+body

<html>

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

<body>

</body>

</html>

! 或者 html:5

扩展写法

!!!+doc[lang=${lang}]

<!DOCTYPE html>
<html lang="en">

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

<body>

</body>

</html>

doc4

扩展写法

html>(head>meta[http-equiv="Content-Type" content="text/html;charset=${charset}"]+title{${1:Document}})+body

<html>

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

<body>

</body>

</html>

html:4t

扩展写法

!!!4t+doc4[lang=${lang}]

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "https://www.w3.org/TR/html4/loose.dtd">
<html lang="en">

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

<body>

</body>

</html>

html:4s

扩展写法

!!!4s+doc4[lang=${lang}]

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "https://www.w3.org/TR/html4/strict.dtd">
<html lang="en">

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

<body>

</body>

</html>

HTML 基本元素

A

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

a:mail

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

area

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

area:d

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

area:c

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

area:r

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

area:p

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

B

btn:r

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

btn:s

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

F

form:get

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

form:post

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

L

<link rel="stylesheet" href="">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="print.css" media="print">
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
<link rel="apple-touch-icon" href="favicon.png">

I

img

<img src="" alt="">

input

<input type="text">

inp

这种写法也适用: input:text input:t

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

input:hideen

这种写法也适用: input:h

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

input:email

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

input:url

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

input:password

这种写法也适用: input:p

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

input:datetime

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

input:date

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

input:datetime-local

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

input:month

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

input:week

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

input:time

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

input:number

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

input:color

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

input:checkbox

这种写法也适用: input:c

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

input:radio

这种写法也适用: input:r

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

input:range

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

input:file

这种写法也适用: input:f

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

input:submit

这种写法也适用: input:s

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

input:image

这种写法也适用: input:i

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

input:button

这种写法也适用: input:b

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

input:reset

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

M

meta:utf

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

meta:win

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

meta:vp

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

meta:compat

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

这种写法也适用: menu:c

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

这种写法也适用: menu:t

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

CSS

视觉格式

position

  • pos => position: relative;
  • pos:s => position: static;
  • pos:a => position: relative;
  • pos:r => position: relative;
  • pos:f => position: fixed;
  • t => top: ;
  • t:a => top: auto;
  • l => left: ;
  • l:a => left: auto;
  • b => bottom: ;
  • b:a => bottom: auto;
  • r => right: ;
  • r:a => right: auto;
  • z => z-indet: ;
  • z:a => z-indet: auto;

float

  • fl => float: left;
  • fl:n => float: none;
  • fl:l => float: left;
  • fl:r => float: right;
  • cl => clear: both;
  • cl:n => clear: none;
  • cl:l => clear: left;
  • cl:r => clear: right;
  • cl:b => clear: both;

dispaly

  • d => display: block;
  • d:n => display: none;
  • d:b => display: block;
  • d:i => display: inline;
  • d:ib => display: inline-block;
  • d:f => display: flex;
  • d:if => display: inline-flex;
  • d:li => display: list-item;
  • d:ri => display: run-in;
  • d:cp => display: compat;
  • d:tb => display: table;
  • d:itb => display: inline-table;
  • d:tbcp => display: table-caption;
  • d:tbcl => display: table-column;
  • d:tbclg => display: table-column-group;
  • d:tbhg => display: table-header-group;
  • d:tbfg => display: table-footer-group;
  • d:tbr => display: table-row;
  • d:tbrg => display: table-row-group;
  • d:tbc => display: table-cell;

visibility

  • v => visibility: hidden;
  • v:v => visibility: visible;
  • v:h => visibility: hidden;
  • v:c => visibility: collapse;

overflow

  • ov => overflow: hidden;
  • ov:v => overflow: visible;
  • ov:h => overflow: hidden;
  • ov:s => overflow: scroll;
  • ov:a => overflow: auto;
  • ovx => overflow-x: hidden;
  • ovx:v => overflow-x: visible;
  • ovx:h => overflow-x: hidden;
  • ovx:s => overflow-x: scroll;
  • ovx:a => overflow-x: auto;
  • ovy => overflow-x: hidden;
  • ovy:v => overflow-y: visible;
  • ovy:h => overflow-y: hidden;
  • ovy:s => overflow-y: scroll;
  • ovy:a => overflow-y: auto;
  • ovs => overflow-style: scrollbar;
  • ovs:a => overflow-style: auto;
  • ovs:s => overflow-style: scrollbar;
  • ovs:p => overflow-style: panner;
  • ovs:m => overflow-style: move;
  • ovs:mq => overflow-style: marquee;

clip

  • cp => clip: ;
  • cp:a => clip: auto;
  • cp:r => clip: rect(top right bottom left);

resize

  • rsz => resize: ;
  • rsz:n => resize: none;
  • rsz:b => resize: both;
  • rsz:h => resize: horizontal;
  • rsz:v => resize: vertical;

cursor

  • cur => cursor: pointer;
  • cur:a => cursor: auto;
  • cur:d => cursor: default;
  • cur:c => cursor: crosshair;
  • cur:ha => cursor: hand;
  • cur:he => cursor: help;
  • cur:m => cursor: move;
  • cur:p => cursor: pointer;
  • cur:t => cursor: text;

外边距和内边距

margin && padding

  • m => margin: ;
  • m:a => margin: auto;
  • mt => margin-top: ;
  • mt:a => margin-top: auto;
  • mr => margin-right: ;
  • mr:a => margin-right: auto;
  • mb => margin-bottom: ;
  • mb:a => margin-bottom: auto;
  • ml => margin-left: ;
  • ml-a => margin-left: auto;
  • p => padding: ;
  • pt => padding-top: ;
  • pr => padding-right: ;
  • pb => paddng-bottom: ;
  • pl => padding-left: ;

盒子模型

box

  • bxz => box-sizing: border-box;
  • bxz:cb => box-sizing: content-box;
  • bxz:bb => box-sizing: border-box;
  • bxsh => box-shadow: inset hoff voff blur color;
  • bxsh:r => box-shadow: inset hoff voff blur spread rgb(0, 0, 0);
  • bxsh:ra => box-shadow: inset h v blur spread rgba(0, 0, 0, .5);
  • bxsh:n => box-shadow: none;

width && hight

  • w => width: ;
  • w:a => width: auto;
  • h => hight: ;
  • h:a => hight: auto;
  • maw => max-width: ;
  • maw:n => max-width: none;
  • mah => max-hight: ;
  • mah:n => max-hight: none;
  • miw => min-width: ;
  • mih => min-hight: ;

字体和文本

font

  • f => font: ;
  • f+ => font: 1em Arial,sans-serif;
  • fw => font-weight: ;
  • fw:n => font-weight: none;
  • fw:b => font-weight: bold;
  • fw:br => font-weight: bolder;
  • fw:lr => font-weight: lighter;
  • fs => font-style: italic;
  • fs:n => font-style: normal;
  • fs:i => font-style: italic;
  • fs:o => font-style: oblique;
  • fv => font-variant: ;
  • fv:n => font-variant: normal;
  • fv:sc => font-variant: small-caps;
  • fz => font-size: ;
  • fza => font-size-adjust: ;
  • fza:n => font-size-adjust: none;
  • ff => font-family: ;
  • ff:s => font-family: serif;
  • ff:ss => font-family: sans-serif;
  • ff:c => font-family: cursive;
  • ff:f => font-family: fantasy;
  • ff:m => font-family: monospace;
  • ff:a => font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
  • fef => font-effect: ;
  • fef:n => font-effect: none;
  • fef:eg => font-effect: engrave;
  • fef:eb => font-effect: emboss;
  • fef:o => font-effect: outline;
  • @i => @import url();
  • @f =>
  @font-face {
      font-family: ;
      src: url();
  }
  • @f+ =>
  @font-face {
      font-family: "FontName";
      src: url("FileName.eot");
      src: url("FileName.eot?#iefix") format("embedded-opentype"), url("FileName.woff") format("woff"), url("FileName.ttf") format("truetype"), url("FileName.svg#FontName") format("svg");
      font-style: normal;
      font-weight: normal;
  }

vertical

  • va => vertical-align: top;
  • va:sup => vertical-align: super;
  • va:t => vertical-align: top;
  • va:tt => vertical-align: text-top;
  • va:m => vertical-align: middle;
  • va:bl => vertical-align: baseline;
  • va:b => vertical-align: bottom;
  • va:tb => vertical-align: text-bottom;
  • va:sub => vertical-align: sub;

text

  • ta => text-align: left;
  • ta:l => text-align: left;
  • ta:c => text-align: center;
  • ta:r => text-align: right;
  • ta:j => text-align: justify;
  • ta-lst => text-align-last: ;
  • tal:a => text-align-last: auto;
  • tal:l => text-align-last: left;
  • tal:c => text-align-last: center;
  • tal:r => text-align-last: right;
  • tov => text-overflow: ellipsis;
  • tov:c => text-overflow: clip;
  • tov:e => text-overflow: ellipsis;
  • td => text-decoration: none;
  • td:n => text-decoration: none;
  • td:u => text-decoration: underline;
  • td:o => text-decoration: overline;
  • td:l => text-decoration: line;

CSS 3 动画

keyframes

  • @kf =>
  @-webkit-keyframes identifier {
      from {}

      to {}
  }

  @-o-keyframes identifier {
      from {}

      to {}
  }

  @-moz-keyframes identifier {
      from {}

      to {}
  }

  @keyframes identifier {
      from {}

      to {}
  }

animation

  • anim- => animation: name duration timing-function delay iteration-count direction fill-mode;
  • animdel => animation-delay: time;
  • animdir => animation-direction: normal;
  • animdir:a => animation-direction: alternate;
  • animdir:ar => animation-direction: alternate;
  • animdir:n => animation-direction: normal;
  • animdir:r => animation-direction: reverse;

transform

  • trf => transform: ;
  • trf:r => transform: rotate(angle);
  • trf:sc => transform: scale(x, y);
  • trf:scx => transform: scale(x);
  • trf:scy => transform: scale(y);
  • trf:skx => transform: skewX(angle);
  • trf:sky => transform: skewY(angle);
  • trf:t => transform: translate(x, y);
  • trf:tx => transform: translateX(x);
  • trf:ty => transform: translateY(y);
  • trfo => transform-origin: ;
  • trfs => transform-style: preserve-3d;

transition

  • trs => transition: prop time;
  • trsde => transition-delay: time;
  • trsdu => transition-duration: time;
  • trsp => transition-property: prop;
  • trstf => transition-timing-function: tfunc;

更多用法实例

在线查看查看 emmet-usage-examples.jpg

请下载查看 emmet-usage-examples.jpg