前一篇文章简单了说明了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最全提示说明的更多相关文章

  1. pycharm输入代码后，没有补全提示

    安装pycharm后,输入代码后,没有补全提示 首先检查是否关闭了代码提示,如下图,将红框中"Power Save Mode"前的勾去掉 第二步,如果在输入某些代码时还是没有补全提 ...

  2. Sublime Text 使用 Emmet 补全错误问题

    Sublime Text安装了Emmet后,使用Tab或者ctrl+e发现补全有问题,如: div.testClass#testId 变成了 div.<testClass id="te ...

  3. [视频教程] 配置vscode的PHP自动补全提示与使用Xdebug进行远程调试debug

    默认下载安装完的vscode并不能准确提示和检测PHP的语法错误,需要手动指定一下本机的PHP程序路径.按下面的操作配置完后就能在文件保存的时候检测语法有无错误.打开文件->首选项->se ...

  4. Android 自动补全提示输入AutoCompleteTextView、 MultiAutoCompleteTextView

    以在搜索框搜索时,自动补全为例: 其中还涉及到一个词,Tokenizer:分词器,分解器. 上效果图: MainActivity.java: package com.joan.testautocoml ...

  5. Vim+Taglist+AutoComplPop之代码目录分栏信息和自动补全提示（Ubuntu环境）

    一步: 首先在Ubuntu环境中安装ctags:  sudo apt-get install ctags 第二部:       安装Taglist-------------Taglist是vim的一个 ...

  6. visual studio code emmet 插件不提示？解决方案

    使用visual studio code编辑.vue文件时,emmet插件无法使用, 可以通过以下方试解决: code →首选项 →设置 ,在右侧窗口“用户配置”.“工作区设置”添加以下代码: // ...

  7. input 标签鼠标放入输入框补全提示

    JSP: <input type="text" placeholder="eventDesc" value="" id="e ...

  8. vim下使用YouCompleteMe实现代码提示、补全以及跳转设置

    配置YouCompleteMe 1. 安装vundle vundle是一个管理vim插件的工具,使用vundle安装YouCompleteMe比较方便. 按照作者在https://github.com ...

  9. Vim使用YouCompleteMe达到类似IDE的代码提示、补全，以及其他实用设置

    接触Linux有两年了,vim还是只会简单的操作.最近实在受不了sublime的代码提示,决定花点时间来配置下vim.本文讲自己认为方便的vim配置,称不上完美,只讲究简单实用. 使用 ctags 主 ...

随机推荐

  1. 【 NOIP2015 DAY1 T2 信息传递】带权并查集

    题目描述 有n个同学(编号为1到n)正在玩一个信息传递的游戏.在游戏里每人都有一个固定的信息传递对象,其中,编号为i的同学的信息传递对象是编号为Ti同学. 游戏开始时,每人都只知道自己的生日.之后每一 ...

  2. [杂题]CSUOJ1413 Area of a Fractal

    题目链接 题意:题中给了图,所以不看字大概也知道  求的是第n个图形的面积. 就是找规律 递推 一类的... 先给结论: 很鬼畜的公式:    $\displaystyle\frac{3\times ...

  3. org.dom4j.DocumentException unknown protocol h

    待解析文件的路径中有空格,把空格去掉就好了

  4. QT4项目升级到QT5遇到的问题和解决方法

    QT4升级到QT5改动: PC部分: [改QTDIR变量] 在工程根目录下找到.user文件, 如InnoTabPlugin.vcxproj.user 修改指向你的QT5根目录: <Proper ...

  5. Android 常用UI控件之TabHost(1)TabHost的两种布局方式

    TabHost是Android中的tab组件. TabHost布局文件的基本结构 TabHost下有个layout,这个layout中有TabWidget与FrameLayout.TabWidget是 ...

  6. mapreduce: 揭秘InputFormat--掌控Map Reduce任务执行的利器

    随着越来越多的公司采用Hadoop,它所处理的问题类型也变得愈发多元化.随着Hadoop适用场景数量的不断膨胀,控制好怎样执行以及何处执行map任务显得至关重要.实现这种控制的方法之一就是自定义Inp ...

  7. Linux Kernel ‘/bcm/Bcmchar.c’本地信息泄露漏洞

    漏洞名称: Linux Kernel ‘/bcm/Bcmchar.c’本地信息泄露漏洞 CNNVD编号: CNNVD-201311-053 发布时间: 2013-11-06 更新时间: 2013-11 ...

  8. iPhone手机录像步骤

    1 Open QuickTime Player on Mac 2 top menu-- New Movie Recording 3 in Movie Recording UI, click the t ...

  9. c# 无损高质量压缩图片代码

    /// <summary> /// 无损压缩图片 /// </summary> /// <param name="sFile">原图片</ ...

  10. 深入理解OAuth2.0

    1. 引言 如果你开车去酒店赴宴,你经常会苦于找不到停车位而耽误很多时间.是否有好办法可以避免这个问题呢?有的,听说有一些豪车的车主就不担心这个问题.豪车一般配备两种钥匙:主钥匙和泊车钥匙.当你到酒店 ...