前一篇文章简单了说明了Emmet的使用:Emmet相关使用
今天我就将关于subline中Emmet插件的snippets.json文件进行具体说明,
在snippets.json文档中,我们能够看到Emmet能够支持多种文档格式的语法提示
如:variables,css,html,xml,xsl,haml,scss,sass等,仅仅要装了Emmet插件,我们就能够利用Emmet的简洁高效的写法来编写自己的html文档.
以下就当中的html来进行说明
1.输入 !!! ,会被扩展为
<!doctype html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!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">
<!-- -->
<!--[if lte IE 6]>
<![endif]--><!--[if IE]>
<![endif]-->
<!--[if !IE]><!-->
<!--<![endif]-->
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
</body>
</html>
<a href=""></a>
<a href="http://"></a>
<a href="mailto:"></a>
<abbr title=""></abbr>
<acronym title=""></acronym>
<base href=""/>
<col/>
<link rel="stylesheet" href="style.css"/>
<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官方站点上了解.
251
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
