emmet缩写格式

2016年5月30日

10:10

标准网页<!DOCTYPE html>

<head>

<title>Document</title>

<style>

div {

color: blue;

}

</style>

</head>

<body>

</body>

</html>

2016年5月30日

10:31

emmet

crtl+alt+c 格式化css

#page>div.logo+ul#navigation>li*5>a{Item$}

<divid="page"><divclass="logo"></div><ulid="navigation"><li><ahref="">Item 1</a></li><li><ahref="">Item 2</a></li><li><ahref="">Item 3</a></li><li><ahref="">Item 4</a></li><li><ahref="">Item 5</a></li></ul></div>

div>ul>li

div+p+bq

div+div>p>span+em

div+div>p>span+em^bq

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

ul>li*5

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

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

div#header+div.page+div#footer.class1.class2.class3

<divid="header"></div><divclass="page"></div><divid="footer"class="class1 class2 class3"></div>

td[title="Hello world!" colspan=3]

<tdtitle="Hello world!"colspan="3"></td>

ul>li.item$*5

ul>li.item$$$*5

ul>li.item$@-*5

ul>li.item$@3*5

ul>li.item$@-3*5

a{Click me}

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

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

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

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

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

(header > ul.nav > li*5) + footer

语法:

后代：>

缩写：nav>ul>li

兄弟：+

缩写：div+p+bq

上级：^

缩写：div+div>p>span+em^bq

缩写：div+div>p>span+em^^bq

分组：()

缩写：div>(header>ul>li*2>a)+footer>p

缩写：(div>dl>(dt+dd)*3)+footer>p

乘法：*

缩写：ul>li*5

自增符号：$

缩写：ul>li.item$*5

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

<h1title="item1">Header 1</h1> <h2title="item2">Header 2</h2> <h3title="item3">Header 3</h3>

缩写：ul>li.item$$$*5

缩写：ul>li.item$@-*5

缩写：ul>li.item$@3*5

ID和类属性

缩写：#header

<divid="header"></div>

缩写：.title

<divclass="title"></div>

缩写：form#search.wide

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

缩写：p.class1.class2.class3

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

自定义属性

缩写：p[title="Hello world"]

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

缩写：td[rowspan=2 colspan=3 title]

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

缩写：[a='value1' b="value2"]

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

文本：{}

缩写：a{Click me}

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

缩写：p>{Click }+a{here}+{ to continue}

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

隐式标签

缩写：.class

<divclass="class"></div>

缩写：em>.class

缩写：ul>.class

缩写：table>.row>.col

HTML

所有未知的缩写都会转换成标签，例如，foo → <foo></foo>

缩写：!

<!doctype html> <htmllang="en"> <head> <metacharset="UTF-8"> <title>Document</title> </head> <body> </body> </html>

缩写：a

<ahref=""></a>

缩写：a:link

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

缩写：a:mail

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

缩写：abbr

<abbrtitle=""></abbr>

缩写：acronym

<acronymtitle=""></acronym>

缩写：base

<basehref="" />

缩写：basefont

缩写：br

<br />

缩写：frame

缩写：hr

<hr />

缩写：bdo

<bdodir=""></bdo>

缩写：bdo:r

<bdodir="rtl"></bdo>

缩写：bdo:l

<bdodir="ltr"></bdo>

缩写：col

<col />

缩写：link

<linkrel="stylesheet"href="" />

缩写：link:css

<linkrel="stylesheet"href="style.css" />

缩写：link:print

<linkrel="stylesheet"href="print.css"media="print" />

缩写：link:favicon

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

缩写：link:touch

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

缩写：link:rss

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

缩写：link:atom

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

缩写：meta

缩写：meta:utf

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

缩写：meta:win

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

缩写：meta:vp

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

缩写：meta:compat

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

缩写：style

缩写：script

缩写：script:src

<scriptsrc=""></script>

缩写：img

<imgsrc=""alt="" />

缩写：iframe

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

缩写：embed

<embedsrc=""type="" />

缩写：object

<objectdata=""type=""></object>

缩写：param

<paramname=""value="" />

缩写：map

<mapname=""></map>

缩写：area

<areashape=""coords=""href=""alt="" />

缩写：area:d

<areashape="default"href=""alt="" />

缩写：area:c

<areashape="circle"coords=""href=""alt="" />

缩写：area:r

<areashape="rect"coords=""href=""alt="" />

缩写：area:p

<areashape="poly"coords=""href=""alt="" />

缩写：form

<formaction=""></form>

缩写：form:get

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

缩写：form:post

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

缩写：label

<labelfor=""></label>

缩写：input

<inputtype="text" />

缩写：inp

<inputtype="text"name=""id="" />

缩写：input:hidden

别名：input[type=hidden name]

<inputtype="hidden"name="" />

缩写：input:h

别名：input:hidden

<inputtype="hidden"name="" />

缩写：input:text, input:t

别名：inp

<inputtype="text"name=""id="" />

缩写：input:search

别名：inp[type=search]

<inputtype="search"name=""id="" />

缩写：input:email

别名：inp[type=email]

<inputtype="email"name=""id="" />

缩写：input:url

别名：inp[type=url]

<inputtype="url"name=""id="" />

缩写：input:password

别名：inp[type=password]

<inputtype="password"name=""id="" />

缩写：input:p

别名：input:password

<inputtype="password"name=""id="" />

缩写：input:datetime

别名：inp[type=datetime]

<inputtype="datetime"name=""id="" />

缩写：input:date

别名：inp[type=date]

<inputtype="date"name=""id="" />

缩写：input:datetime-local

别名：inp[type=datetime-local]

<inputtype="datetime-local"name=""id="" />

缩写：input:month

别名：inp[type=month]

<inputtype="month"name=""id="" />

缩写：input:week

别名：inp[type=week]

<inputtype="week"name=""id="" />

缩写：input:time

别名：inp[type=time]

<inputtype="time"name=""id="" />

缩写：input:number

别名：inp[type=number]

<inputtype="number"name=""id="" />

缩写：input:color

别名：inp[type=color]

<inputtype="color"name=""id="" />

缩写：input:checkbox

别名：inp[type=checkbox]

<inputtype="checkbox"name=""id="" />

缩写：input:c

别名：input:checkbox

<inputtype="checkbox"name=""id="" />

缩写：input:radio

别名：inp[type=radio]

<inputtype="radio"name=""id="" />

缩写：input:r

别名：input:radio

<inputtype="radio"name=""id="" />

缩写：input:range

别名：inp[type=range]

<inputtype="range"name=""id="" />

缩写：input:file

别名：inp[type=file]

<inputtype="file"name=""id="" />

缩写：input:f

别名：input:file

<inputtype="file"name=""id="" />

缩写：input:submit

<inputtype="submit"value="" />

缩写：input:s

别名：input:submit

<inputtype="submit"value="" />

缩写：input:image

<inputtype="image"src=""alt="" />

缩写：input:i

别名：input:image

<inputtype="image"src=""alt="" />

缩写：input:button

<inputtype="button"value="" />

缩写：input:b

别名：input:button

<inputtype="button"value="" />

缩写：isindex

缩写：input:reset

别名：input:button[type=reset]

<inputtype="reset"value="" />

缩写：select

<selectname=""id=""></select>

缩写：option

<optionvalue=""></option>

缩写：textarea

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

缩写：menu:context

别名：menu[type=context]>

<menutype="context"></menu>

缩写：menu:c

别名：menu:context

<menutype="context"></menu>

缩写：menu:toolbar

别名：menu[type=toolbar]>

<menutype="toolbar"></menu>

缩写：menu:t

别名：menu:toolbar

<menutype="toolbar"></menu>

缩写：video

<videosrc=""></video>

缩写：audio

<audiosrc=""></audio>

缩写：html:xml

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

缩写：keygen

缩写：command

缩写：bq

别名：blockquote

缩写：acr

别名：acronym

<acronymtitle=""></acronym>

缩写：fig

别名：figure

缩写：figc

别名：figcaption

缩写：ifr

别名：iframe

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

缩写：emb

别名：embed

<embedsrc=""type="" />

缩写：obj

别名：object

<objectdata=""type=""></object>

缩写：src

别名：source

缩写：cap

别名：caption

缩写：colg

别名：colgroup

缩写：fst, fset

别名：fieldset

缩写：btn

别名：button

缩写：btn:b

别名：button[type=button]

<buttontype="button"></button>

缩写：btn:r

别名：button[type=reset]

<buttontype="reset"></button>

缩写：btn:s

别名：button[type=submit]

<buttontype="submit"></button>

后代：>

缩写：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和类属性

缩写：#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>

自定义属性

缩写：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>

隐式标签

缩写：.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

所有未知的缩写都会转换成标签，例如，foo → <foo></foo>

缩写：!

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

缩写：a:mail

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

缩写：abbr

<abbr title=""></abbr>

缩写：acronym

<acronym title=""></acronym>

缩写：base

<base href="" />

缩写：basefont

<basefont />

缩写：br

<br />

缩写：frame

<frame />

缩写：hr

<hr />

缩写：bdo

<bdo dir=""></bdo>

缩写：bdo:r

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

缩写：bdo:l

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

缩写：col

<col />

缩写：link

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

缩写：link:css

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

缩写：link:print

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

缩写：link:favicon

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

缩写：link:touch

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

缩写：link:rss

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

缩写：link:atom

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

缩写：meta

<meta />

缩写：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, minimum-scale=1.0" />

缩写：meta:compat

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

缩写：style

<style></style>

缩写：script

<script></script>

缩写：script:src

<script src=""></script>

缩写：img

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

缩写：iframe

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

缩写：embed

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

缩写：object

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

缩写：param

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

缩写：map

<map name=""></map>

缩写：area

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

缩写：area:d

<area shape="default" 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="" />

缩写：form

<form action=""></form>

缩写：form:get

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

缩写：form:post

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

缩写：label

<label for=""></label>

缩写：input

<input type="text" />

缩写：inp

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

缩写：input:hidden

别名：input[type=hidden name]

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

缩写：input:h

别名：input:hidden

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

缩写：input:text, input:t

别名：inp

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

缩写：input:search

别名：inp[type=search]

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

缩写：input:email

别名：inp[type=email]

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

缩写：input:url

别名：inp[type=url]

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

缩写：input:password

别名：inp[type=password]

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

缩写：input:p

别名：input:password

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

缩写：input:datetime

别名：inp[type=datetime]

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

缩写：input:date

别名：inp[type=date]

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

缩写：input:datetime-local

别名：inp[type=datetime-local]

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

缩写：input:month

别名：inp[type=month]

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

缩写：input:week

别名：inp[type=week]

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

缩写：input:time

别名：inp[type=time]

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

缩写：input:number

别名：inp[type=number]

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

缩写：input:color

别名：inp[type=color]

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

缩写：input:checkbox

别名：inp[type=checkbox]

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

缩写：input:c

别名：input:checkbox

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

缩写：input:radio

别名：inp[type=radio]

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

缩写：input:r

别名：input:radio

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

缩写：input:range

别名：inp[type=range]

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

缩写：input:file

别名：inp[type=file]

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

缩写：input:f

别名：input:file

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

缩写：input:submit

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

缩写：input:s

别名：input:submit

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

缩写：input:image

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

缩写：input:i

别名：input:image

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

缩写：input:button

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

缩写：input:b

别名：input:button

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

缩写：isindex

<isindex />

缩写：input:reset

别名：input:button[type=reset]

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

缩写：select

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

缩写：option

<option value=""></option>

缩写：textarea

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

缩写：menu:context

别名：menu[type=context]>

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

缩写：menu:c

别名：menu:context

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

缩写：menu:toolbar

别名：menu[type=toolbar]>

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

缩写：menu:t

别名：menu:toolbar

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

缩写：video

<video src=""></video>

缩写：audio

<audio src=""></audio>

缩写：html:xml

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

缩写：keygen

<keygen />

缩写：command

<command />

缩写：bq

别名：blockquote

<blockquote></blockquote>

缩写：acr

别名：acronym

<acronym title=""></acronym>

缩写：fig

别名：figure

<figure></figure>

缩写：figc

别名：figcaption

<figcaption></figcaption>

缩写：ifr

别名：iframe

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

缩写：emb

别名：embed

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

缩写：obj

别名：object

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

缩写：src

别名：source

<source></source>

缩写：cap

别名：caption

<caption></caption>

缩写：colg

别名：colgroup

<colgroup></colgroup>

缩写：fst, fset

别名：fieldset

<fieldset></fieldset>

缩写：btn

别名：button

<button></button>

缩写：btn:b

别名：button[type=button]

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

缩写：btn:r

别名：button[type=reset]

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

缩写：btn:s

别名：button[type=submit]

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

2016年5月30日

10:42

在线qq咨询

2016年5月30日

10:43

LigerUI

此列不显示

frozen: true

加入这个属性，此列不会在页面显示

2016年5月30日

10:43

background:url(/images/index.jpg) no-repeat center center;

emmet缩写格式的更多相关文章

Emmet缩写语法
缩写语法 Emmet 使用类似于 CSS 选择器的语法描述元素在生成的文档树中的位置及其属性. 元素可以使用元素名(如 div 或者 p)来生成 HTML 标签.Emmet 没有预定义的有效元素名的 ...
如何在“代码”视图中工作并充分利用 Dreamweaver 的编码功能。如 Emmet 缩写
可通过多种方式在 Dreamweaver 中处理代码. 您可以使用“新建文档”对话框打开新的代码文件,然后开始键入您的代码. 在 Dreamweaver 中创建新的代码文件键入时,会显示代码提示以帮 ...
emmet 缩写API
http://docs.emmet.io/cheat-sheet/
C# 中将月份格式化为英语缩写格式
在测试Android 系统的时候,日期输入框需要输入英语短格式,如下. 考虑到系统日期格式和地域的关系紧密,地域不同,日期格式不同,所以经过查找,找到下面的解决方法. date.ToString(&q ...
emmet缩写大全
Syntax Child: > nav>ul>li <nav> <ul> <li></li> </ul> </n ...
Emmet 语法大全（缩写语法/sublime 插件）
Emmet 使用类似于 CSS 选择器的语法描述元素在生成的文档树中的位置及其属性. 元素可以使用元素名(如 div 或者 p)来生成 HTML 标签.Emmet 没有预定义的有效元素名的集合,可以 ...
[转载]Emmet (ZenCoding) 缩写语法
Emmet 使用类似于 CSS 选择器的语法描述元素在生成的文档树中的位置及其属性. 元素可以使用元素名(如 div 或者 p)来生成 HTML 标签.Emmet 没有预定义的有效元素名的集合,可以 ...
Emmet 生成 HTML 的语法
Emmet 使用类似于 CSS 选择器的语法描述元素在生成的文档树中的位置及其属性. 元素可以使用元素名(如 div 或者 p)来生成 HTML 标签.Emmet 没有预定义的有效元素名的集合,可以 ...
【02】emmet系列之HTML语法
[01]emmet系列之基础介绍 [02]emmet系列之HTML语法 [03]emmet系列之CSS语法 [04]emmet系列之编辑器 [05]emmet系列之各种缩写初始化 :快速编写HTML ...

随机推荐

利用eolinker实现api接口mock测试（mock server）
转载:http://blog.csdn.net/naicha_qin/article/details/78276172 前后端分离或者是进行单元测试的时候,必须要用mock api替换掉第三方调用或者 ...
原来，多年以来，我一直是个curl/CRUD程序员
curl,就是create,update,remove,list的首字母简写.说是CRUD似乎更流行些,不过无所谓,知道是一个意思就好. curl程序员,就是增改删查程序员,中文说增删改查更加顺口. ...
【VBA】显示Excle内置对话框
点击上图中的"显示Excle内置对话框",显示效果如下: 源代码: Public Sub 显示Excel内置对话框() UserForm.Show End Sub 附件下载
Java自动内存管理机制
1.运行时数据区域划分 2.程序计数器作用:可以看做是当前线程所执行的字节码的行号指示器. 解释:字节码指示器就是通过改变程序计数器的值来指定下一条需要执行的指令.分支,循环等基础功能就是依赖程序 ...
Dephi泛型generic的应用
Dephi泛型generic的应用泛型在C++, C#中已有广泛应用,Delphi自2009版本也引入泛型,典型的应用如TList,TDictionary.如果你熟悉C#,其用法十分类似. 比如 ...
【leetcode】118. Pascal's Triangle
@requires_authorization @author johnsondu @create_time 2015.7.23 19:54 @url [Pascal's Triangle](http ...
Allegro PCB查看VIA孔的pad信息
1.勾选下图选项 2.选中via孔,右键-->>>Edit 3.弹出Padatack Designer
file_put_contents执行返回false，file_put_contents false（linux服务器httpd）
file_put_contents执行返回false,file_put_contents false(linux服务器httpd) 默认下selinux是开启的查看SELinux状态:1./usr/s ...
LINQ使用与并行
LINQ介绍參考:https://msdn.microsoft.com/en-us/library/bb397906.aspx LINQ查询主要运行操作包含:1)获取数据源:2)创建查询:3)运行查 ...
Spring Cloud Zuul 网关的分布式系统中整合Swagger（转）和 zuul跨域访问问题
首先恭喜自己终于找对了努力的方向,很荣幸能在公司接触到微服务架构,也很高兴公司一个大佬哥们愿意带我,他技术确实很牛逼,我也很佩服他,前后端通吃,干了六年能有这样的水平.最近跟着在搞微服务架构,给我分配 ...

emmet缩写格式

emmet缩写格式的更多相关文章

随机推荐

热门专题