首先准备工作:

如果你的Sublime Text3没有Package Control组件先看一下这里,如果以安装请忽略;

1、按Ctrl+`调出sublime text的console

2、粘贴以下代码到底部命令行并回车: import urllib2,os;pf='Package Control.sublime-package';ipp=sublime.installedpackagespath();os.makedirs(ipp) if not os.path.exists(ipp) else None;open(os.path.join(ipp,pf),'wb').write(urllib2.urlopen('http://sublime.wbond.net/'+pf.replace(' ','%20')).read())

3、重启Sublime Text

4、在Perferences->package settings中看到package control,则表示安装成功

使用Package Control组件来安装Emmet插件:

按Ctrl+Shift+P调出命令面板

输入install Package,然后在弹出命令面板中再输入emmet找到 Emmet ,点击就可以自动完成安装。

接下来开始测试一下,Ctrl+n新建一个html文档,输入!然后点击Tab键,出现html5的初始代码,表示Emmet可用

下面开始分享一写Emmet的使用技巧:

(emmet可以直接在编辑器中输入HTML或CSS的代码的缩写,然后按tab键就可以拓展为完整的代码片段。)

乘法符号:*

缩写:ul>li*6 点击Tab ---

<ul>

<li></li>

<li></li>

<li></li>

<li></li>

<li></li>

<li></li>

</ul>

加法符号:+

缩写:div+p+bq 点击Tab ---

<div></div>

<p></p>

<blockquote></blockquote>

自增符:$

缩写:ul>li.item$*5

<ul>

<li class="item1"></li>

<li class="item2"></li>

<li class="item3"></li>

<li class="item4"></li>

<li class="item5"></li>

</ul>

缩写:h$[title=item$]{Header $}*3

<h1 title="item1">Header 1</h1>

<h2 title="item2">Header 2</h2>

<h3 title="item3">Header 3</h3>

缩写:ul>li.item$$$*5

<ul>

<li class="item001"></li>

<li class="item002"></li>

<li class="item003"></li>

<li class="item004"></li>

<li class="item005"></li>

</ul>

缩写:ul>li.item$@-*5

<ul>

<li class="item5"></li>

<li class="item4"></li>

<li class="item3"></li>

<li class="item2"></li>

<li class="item1"></li>

</ul>

缩写:ul>li.item$@3*5

<ul>

<li class="item3"></li>

<li class="item4"></li>

<li class="item5"></li>

<li class="item6"></li>

<li class="item7"></li>

</ul>

缩写:div+div>p>span+em^bq

<div></div>

<div>

<p><span></span><em></em></p>

<blockquote></blockquote>

</div>

缩写:div+div>p>span+em^^bq

<div></div>

<div>

<p><span></span><em></em></p>

</div>

<blockquote></blockquote>

分组:使用()

缩写:div>(header>ul>li*2>a)+footer>p

<div>

<header>

<ul>

<li><a href=""></a></li>

<li><a href=""></a></li>

</ul>

</header>

<footer>

<p></p>

</footer>

</div>

缩写:(div>dl>(dt+dd)*3)+footer>p

<div>

<dl>

<dt></dt>

<dd></dd>

<dt></dt>

<dd></dd>

<dt></dt>

<dd></dd>

</dl>

</div>

<footer>

<p></p>

</footer>

ID和类属性

缩写:#header

<div id="header"></div>

缩写:.title

<div class="title"></div>

缩写:form#search.wide

<form id="search" class="wide"></form>

缩写:p.class1.class2.class3

<p class="class1 class2 class3"></p>

自定义属性:[ ]

缩写:p[title="Hello world"]

<p title="Hello world"></p>

缩写:td[rowspan=2 colspan=3 title]

<td rowspan="2" colspan="3" title=""></td>

缩写:[a='value1' b="value2"]

<div a="value1" b="value2"></div>

文本:{}

缩写:a{Click me}

<a href="">Click me</a>

缩写:p>{Click }+a{here}+{ to continue}

<p>Click <a href="">here</a> to continue</p>

隐式标签

缩写:.class

<div class="class"></div>

缩写:em>.class

<em><span class="class"></span></em>

缩写:ul>.class

<ul>

<li class="class"></li>

</ul>

缩写:table>.row>.col

<table>

<tr class="row">

<td class="col"></td>

</tr>

</table>

Sublime Text3之安裝Emmet及使用技巧的更多相关文章

  1. Sublime Text3开发工具安装emmet插件

    第一步:Sublime Text导入Package Control 自动安装: 1.打开Sublime Text -->View --> Show Console 菜单打开控制台 2.粘贴 ...

  2. Sublime Text3 Package Control和Emmet插件安装方法

    因为初学前端,所以今天安装了Sumblime Text 3,然后就停不下来去找Package Control的安装方法. 网络上我找到并尝试过的方法有两种,我使用的是用Python代码去安装并成安装成 ...

  3. Sublime Text3中JSX支持Emmet快捷键

    在复习React的过程中,发现Sublime有些快捷键不能用了,如Emmet的Tab快速生成HTML代码只能用Ctrl+E快捷键,而不能用Tab键了,在网上找了很多文章,发现都有问题,最终自己通过下面 ...

  4. sublime text3 --前端工程师必备神器

    sublime text3 --前端工程师必备神器 导读目录: 下载与Emmet插件安装 sublime text3 中cssrem安装与使用 sublime Text 3的中文文件名显示为方框的问题 ...

  5. sublime text3 --前端工程师必备

    sublime text3 --前端工程师必备神器 导读目录: 下载与Emmet插件安装 sublime text3 中cssrem安装与使用 sublime Text 3的中文文件名显示为方框的问题 ...

  6. Sublime Text3—常用插件Emmet

    摘要 安装请看上一篇Sublime Text-安装,和sublime自带快捷键一起用,写html简直快的飞起. 下面整理的是常用的,完整的可看emmet官方文档. 一.生成标签 1.快速生成文档结构 ...

  7. 关于Sublime Text3的emmet插件和tab快捷键冲突问题

    当使用Sublime text3时会遇到快捷键冲突的问题,其中就有安装Emmet之后,tab无法缩进了, 网上有些说看看Browse Packages目录下是否有PyV8插件安装,该插件一般情况下随E ...

  8. sublime Text3及其插件的使用

    参考:Sublime Text 3 新手上路:必要的安裝.設定與基本使用教學 Sublime Text 相信是許多開發人員人心目中的最愛,然而對一個 Sublime Text 3 的新手來說,有什麼是 ...

  9. 前端神器Sublime Text3 常用插件&常用快捷键

    Sublime Text3常用插件 使用Package Control组件安装 也可以安装package control组件,然后直接在线安装: 按Ctrl+`调出console(注:安装有QQ输入法 ...

随机推荐

  1. iOS关于代码风格问题

    cocoapods管理第三方库,详见cocoapods安装及使用 OC代码风格需要规范,所有第三方依赖需要用cocoapods管理.代码风格需要: 1. pod 'CodeFormatter', :g ...

  2. leetcode-55-跳跃游戏

    题目描述: 给定一个非负整数数组,你最初位于数组的第一个位置. 数组中的每个元素代表你在该位置可以跳跃的最大长度. 判断你是否能够到达最后一个位置. 示例 1: 输入: [2,3,1,1,4] 输出: ...

  3. SVN服务器端环境搭建步骤

    5.1 安装服务器端程序 yum install -y subversion 5.2 创建并配置版本库 创建版本库目录 mkdir -p /var/svn/repository 在版本库目录下创建具体 ...

  4. KCF+Opencv3.0+Cmake+Win10

    配置 需要的文件下载 安装CMake,安装opencv3.0.0 在KCFcpp-master 目录下新建一个文件夹,命名为build 打开CMake-GUI配置如下: 点击Configure,编译器 ...

  5. Mac 10.12安装图片标注工具PxCook

    说明:现在基本是PxCook最好用,其余都是收费的,并且支持Android标注dp,主要是用于App开发时坐标定位,求到比例等等. 下载: (链接: https://pan.baidu.com/s/1 ...

  6. mono for android之文件系统与应用程序首选项(转)

    Aside from persistent files, your application might need to store cache data in a file. To do that, ...

  7. 开源:我的Android新闻客户端,速度快、体积小、支持离线阅读、操作简便、内容展现形式丰富多样、信息量大、功能全面 等(要代码的留下邮箱)

    分享:我的Android新闻客户端,速度快.体积小.支持离线阅读.操作简便.内容展现形式丰富多样.信息量大.功能全面 等(要代码的留下邮箱) 历时30天我为了开发这个新闻客户端APP,以下简称觅闻 h ...

  8. 【Markdown】Markdown相关问题

    1.显示多行代码 将代码用一个tab缩进或者四个空格缩进

  9. jQuery多库共存问题解决方法

    一.问题概述: 1.随着jQuery的流行,采用jQuery和$符为命名空间的js库越来越多,当然jQuery的$符也是参照的Prototype库的,所以当多个库同时以$符或者jQuery为命名空间时 ...

  10. 配置MySQL接受远程登录连接

    一 开放mysql mysql的配置文件在/etc/mysql/my.cnf文件内,里面有一行bind-address = 127.0.0.1表示只允许本地访问,将这行注释即可 # bind-addr ...