<span>Emmet最全提示说明</span>

前一篇文章简单了说明了Emmet的使用:Emmet相关使用

今天我就将关于subline中Emmet插件的snippets.json文件进行具体说明,

在snippets.json文档中,我们能够看到Emmet能够支持多种文档格式的语法提示

如:variables,css,html,xml,xsl,haml,scss,sass等,仅仅要装了Emmet插件,我们就能够利用Emmet的简洁高效的写法来编写自己的html文档.

以下就当中的html来进行说明

1.输入 !!! ,会被扩展为

 <!doctype html>

2.输入!!!4t,
会被扩展为

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

3.输入!!!4s
,
会被扩展为

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

4.输入!!!xt
,
会被扩展为

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

5.输入!!!xs
,
会被扩展为

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

6..输入!!!xxs,会被扩展为

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

7.输入c
,
会被扩展为

<!--  -->

8.
输入
cc:ie6
,
会被扩展为

<!--[if lte IE 6]>
        
<![endif]-->

9.
输入
cc:ie
,
会被扩展为

<!--[if IE]>
        
<![endif]-->

10.
输入
cc:noie
,
会被扩展为

<!--[if !IE]><!-->
        
<!--<![endif]-->

11.
输入
!或者html:5
,
会被扩展为

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>

</body>
</html>

12.
输入
a
,
会被扩展为

<a href=""></a>

13.
输入
a:link
,
会被扩展为

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

14.
输入
a:mail
,
会被扩展为

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

15.
输入
abbr
,
会被扩展为

<abbr title=""></abbr>

16.
输入
acronym(h5废弃)
,
会被扩展为

<acronym title=""></acronym>

17.
输入
base
,
会被扩展为

<base href=""/>

18.
输入
col
,
会被扩展为

<col/>

19.
输入
link:css
,
会被扩展为

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

20.
输入
link:print
,
会被扩展为

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

21.输入link:favicon,会被扩展为

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

22.输入link:touch,会被扩展为<

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

23.输入style,会被扩展为

<style></style>

24.输入script:src,会被扩展为

<script src=""></script>

25.输入img,会被扩展为

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

26.输入embed,会被扩展为

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

27.输入object,会被扩展为

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

28.输入param,会被扩展为

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

29.输入area,会被扩展为

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

30.输入area:d,会被扩展为

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

31.输入area:c,会被扩展为

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

32.输入area:r,会被扩展为

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

33.输入form:get,会被扩展为

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

34.输入form:post,会被扩展为

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

35.输入input:hidden,会被扩展为

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

36.输入select:disabled,会被扩展为

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

37.输入menu:context,会被扩展为

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

38.输入html:xml,会被扩展为

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

然后,还有非常多简写的html元素缩写,我就不一一列举了,以下:

“bq”: “blockquote”,
“acr”: “acronym”,
“fig”: “figure”,
“figc”: “figcaption”,
“ifr”: “iframe”,
“emb”: “embed”,
“obj”: “object”,
“src”: “source”,
“cap”: “caption”,
“colg”: “colgroup”,
“fst”: “fieldset”,
“fst:d”: “fieldset[disabled]”,
“btn”: “button”,
“btn:b”: “button[type=button]”,
“btn:r”: “button[type=reset]”,
“btn:s”: “button[type=submit]”,
“btn:d”: “button[disabled]”,
“optg”: “optgroup”,
“opt”: “option”,
“tarea”: “textarea”,
“leg”: “legend”,
“sect”: “section”,
“art”: “article”,
“hdr”: “header”,
“ftr”: “footer”,
“adr”: “address”,
“dlg”: “dialog”,
“str”: “strong”,
“prog”: “progress”,
“fset”: “fieldset”,
“fset:d”: “fieldset[disabled]”,
“datag”: “datagrid”,
“datal”: “datalist”,
“kg”: “keygen”,
“out”: “output”,
“det”: “details”,
“cmd”: “command”,
“doc”: “html>(head>meta[charset=UTF-8]+title{${1:Document}})+body”,
“doc4”: “html>(head>meta[http-equiv=\”Content-Type\” content=\”text/html;charset=${charset}\”]+title{${1:Document}})+body”,

“html:4t”: “!!!4t+doc4[lang=${lang}]”,
“html:4s”: “!!!4s+doc4[lang=${lang}]”,
“html:xt”: “!!!xt+doc4[xmlns=http://www.w3.org/1999/xhtml xml:lang=${lang}]”,
“html:xs”: “!!!xs+doc4[xmlns=http://www.w3.org/1999/xhtml xml:lang=${lang}]”,
“html:xxs”: “!!!xxs+doc4[xmlns=http://www.w3.org/1999/xhtml xml:lang=${lang}]”,
“html:5”: “!!!+doc[lang=${lang}]”,

“ol+”: “ol>li”,
“ul+”: “ul>li”,
“dl+”: “dl>dt+dd”,
“map+”: “map>area”,
“table+”: “table>tr>td”,
“colgroup+”: “colgroup>col”,
“colg+”: “colgroup>col”,
“tr+”: “tr>td”,
“select+”: “select>option”,
“optgroup+”: “optgroup>option”,
“optg+”: “optgroup>option”