Emmet最全提示说明
前一篇文章简单了说明了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最全提示说明的更多相关文章
- pycharm输入代码后，没有补全提示
安装pycharm后,输入代码后,没有补全提示 首先检查是否关闭了代码提示,如下图,将红框中"Power Save Mode"前的勾去掉 第二步,如果在输入某些代码时还是没有补全提 ...
- Sublime Text 使用 Emmet 补全错误问题
Sublime Text安装了Emmet后,使用Tab或者ctrl+e发现补全有问题,如: div.testClass#testId 变成了 div.<testClass id="te ...
- [视频教程] 配置vscode的PHP自动补全提示与使用Xdebug进行远程调试debug
默认下载安装完的vscode并不能准确提示和检测PHP的语法错误,需要手动指定一下本机的PHP程序路径.按下面的操作配置完后就能在文件保存的时候检测语法有无错误.打开文件->首选项->se ...
- Android 自动补全提示输入AutoCompleteTextView、 MultiAutoCompleteTextView
以在搜索框搜索时,自动补全为例: 其中还涉及到一个词,Tokenizer:分词器,分解器. 上效果图: MainActivity.java: package com.joan.testautocoml ...
- Vim+Taglist+AutoComplPop之代码目录分栏信息和自动补全提示（Ubuntu环境）
一步: 首先在Ubuntu环境中安装ctags: sudo apt-get install ctags 第二部: 安装Taglist-------------Taglist是vim的一个 ...
- visual studio code emmet 插件不提示？解决方案
使用visual studio code编辑.vue文件时,emmet插件无法使用, 可以通过以下方试解决: code →首选项 →设置 ,在右侧窗口“用户配置”.“工作区设置”添加以下代码: // ...
- input 标签鼠标放入输入框补全提示
JSP: <input type="text" placeholder="eventDesc" value="" id="e ...
- vim下使用YouCompleteMe实现代码提示、补全以及跳转设置
配置YouCompleteMe 1. 安装vundle vundle是一个管理vim插件的工具,使用vundle安装YouCompleteMe比较方便. 按照作者在https://github.com ...
- Vim使用YouCompleteMe达到类似IDE的代码提示、补全，以及其他实用设置
接触Linux有两年了,vim还是只会简单的操作.最近实在受不了sublime的代码提示,决定花点时间来配置下vim.本文讲自己认为方便的vim配置,称不上完美,只讲究简单实用. 使用 ctags 主 ...
随机推荐
- 查看java的.class文件的方法
在不通过eclipse等IDE安装反编译插件的情况下查看java的.class文件的方法:可以通过下载jd-gui class文件查看工具进行查看.如附件的“jd-gui.exe”程序. 1. 从网上 ...
- mjpg-streamer on raspberrypi
http://sourceforge.net/projects/mjpg-streamer/ svn address svn checkout svn://svn.code.sf.net/p/mjpg ...
- asp中将文本框内的日期转换成datetime类型的数据
将字符类型的日期转化为DateTime类型主要有以下方法: 方法一:Convert.ToDateTime(string) string格式有要求,必须是yyyy-MM-dd hh:mm:ss 方法二: ...
- 135. Candy
题目: There are N children standing in a line. Each child is assigned a rating value. You are giving c ...
- 手势识别官方教程(7)识别缩放手势用ScaleGestureDetector.GestureDetector和ScaleGestureDetector.SimpleOnScaleGestureListener
Use Touch to Perform Scaling As discussed in Detecting Common Gestures, GestureDetector helps you de ...
- 查找Form的文件名
我们经常会要在ORACLE EBS中寻找我们正在浏览的form页面的执行文件,我们都会直接在Help中的菜单里点击"About Oracle Application",然后查看当前 ...
- POJ 2253 Frogger（最小生成树）
青蛙跳跃,题意大概是:青蛙从起点到终点进行一次或多次的跳跃,多次跳跃中肯定有最大的跳跃距离.求在所有的跳跃中,最小的最大跳跃距离SF-_-(不理解?看题目吧). 可以用最小生成树完成.以起点为根,生成 ...
- 【转】VIRTUALBOX导入已有.VDI文件步骤
原文网址:http://blog.csdn.net/wanghai__/article/details/6703923 1.安装SUN VIRTUALBOX 2.新建,进入到“新建虚拟电话”对话框,下 ...
- JD-GUI反编译后代码逻辑分析
一,用jd-gui.exe等工具查看源代码.如何你不会,可以参看此文章: http://blog.csdn.net/hp_2008/article/details/8207879 可以到以下连接下载可 ...
- 【原】1.1RDD源码解读(二)
(6)transformation 操作,通过外在的不同RDD表现形式来达到内部数据的处理过程.这类操作并不会触发作业的执行,也常被称为lazy操作. 大部分操作会生成并返回一个新的RDD,例sort ...