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

随机推荐

错误：“The requested resource () is not available.”的处置
做网页过程中,某页需要以新窗方式打开另一个网页,于是url是这样写: pages/test/transw/claimer.html 但是,点链接后网页提示 The requested resource ...
python makestrans translate
""" 1. makestrans()用法语法: str.maketrans(intab, outtab]); Python maketrans() 方法用于创建字符映 ...
Android学习（十二） ContentProvider
一.ContentProvider简介当应用继承ContentProvider类,并重写该类用于提供数据和存储数据的方法,就可以向其他应用共享其数据.虽然使用其他方法也可以对外共享数据, ...
内置函数new() 和struct{} 初始化的区别
一.new() 这是一个用来分配内存的内置函数,它的第一个参数是一个类型,不是一个值,它的返回值是一个指向新分配的 t 类型的零值的指针.在golang的代码定义如下: func new(t Type ...
STL学习笔记（已序区间算法）
针对已序区间执行的算法,执行前提是源区间必须在某个排序准则下已序. 搜寻元素(Searching) 1.检查某个元素是否存在 bool binary_search(ForwardIterator be ...
訪问控制 protected, public, private 对照
OOP 3大特性:数据抽象,继承,动态绑定 3中訪问标号 protected, public, private 对照用类进行数据抽象:用继承类继承基类的成员,实现继承.通过将基类对应函数声明为vir ...
VM里面的桥接
今天我们谈一谈桥接模式,一般的时候,我用的是NAT模式,需要设置另一个虚拟网卡的IP地址,而不是借助本机的物理网卡. 编辑---虚拟网络编辑器有些时候直接设置桥接到某个网卡可能会不成功,我们 ...
windows快捷键之打开网络连接
在Win 7"開始"->"执行"对话框输入"cmd"例如以下图红框所看到的,再点击"确定"button. 步骤 ...
mongoDB 使用总结
http://blog.chinaunix.net/space.php?uid=22270773&do=blog&id=19935171. 如果无特别用途,建议:表名,字段名全部用小 ...
linux标准输入输出错误输出
Linux Shell 环境中支持输入输出重定向,用符号"<"和">"来表示.0.1和2分别表示标准输入.标准输出和标准错误信息输出,可以用来指定需 ...

emmet缩写格式

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

随机推荐

热门专题