码迷,mamicode.com
首页 > 其他好文 > 详细

Emmet最全提示说明

时间:2014-05-25 00:45:48      阅读:396      评论:0      收藏:0      [点我收藏+]

标签:style   class   blog   c   code   tar   

前一篇文章简单了说明了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"


如果对snippets.json详细内容感兴趣,或者想自己自定义扩展Ememt用法,可以下载该文件并去Ememt官方网站上了解.











Emmet最全提示说明,布布扣,bubuko.com

Emmet最全提示说明

标签:style   class   blog   c   code   tar   

原文地址:http://blog.csdn.net/u012332735/article/details/26767259

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!