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

随机推荐

python——super（）
一.问题的发现与提出在Python类的方法(method)中,要调用父类的某个方法,在Python 2.2以前,通常的写法如代码段1: class A: def __init__(self): pr ...
Php 中如何将内容写入log日志中
$Str = '你想要存的内容'; file_put_contents('abc.log', "\r\n\r\n". $Str, FILE_APPEND); FILE_AP ...
jQuery 事件 - delegate() 方法
<html><head><script type="text/javascript" src="/jquery/jquery.js" ...
MySql RESTRICT CASCADE SET NULL
主表,从表[MySql] //http://my.oschina.net/cart/blog/277624 空.RESTRICT.NO ACTION 删除:从表记录不存在时,主表才可以删除.删除从表, ...
Android轻量级日志管理框架
代码地址如下:http://www.demodashi.com/demo/12134.html ViseLog Android 轻量级日志框架,使用森林对象维护不同的日志树进行日志输出,可以是Logc ...
操作REDIES
import redis r=redis.Redis(host='118.XX.XX.XXX',password='XXXXXXX9*',db=1,port=6379) # 增删改查r.set('jd ...
Android SDK Manager 下载SDK失败的解决办法
摘要:本文记录了无法使用Android SDK Manager下载SDK开发包的解决办法. 最近需要进行android应用程序的开发工作,在android官网下载了adt-bundle-linux- ...
闪屏(Splash)
好久没弄ReactNative了, 写个怎样实现闪屏(Splash)的文章吧. 注意: (1) 怎样切换页面. (2) 怎样使用计时器TimerMixin. (3) 怎样使用动画效果. (4) 怎样载 ...
elk systemd管理
1.logstash /etc/systemd/system/logstash.service Type=simple User=logstash Group=logstash # Load env ...
Linux 下安装PHPunit
PHP 档案包 (PHAR) 要获取 PHPUnit,最简单的方法是下载 PHPUnit 的 PHP 档案包 (PHAR),它将 PHPUnit 所需要的所有必要组件(以及某些可选组件)捆绑在单个文 ...

emmet缩写格式

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

随机推荐

热门专题