Sublime Text3之安裝Emmet及使用技巧
首先准备工作:
如果你的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及使用技巧的更多相关文章
- Sublime Text3开发工具安装emmet插件
第一步:Sublime Text导入Package Control 自动安装: 1.打开Sublime Text -->View --> Show Console 菜单打开控制台 2.粘贴 ...
- Sublime Text3 Package Control和Emmet插件安装方法
因为初学前端,所以今天安装了Sumblime Text 3,然后就停不下来去找Package Control的安装方法. 网络上我找到并尝试过的方法有两种,我使用的是用Python代码去安装并成安装成 ...
- Sublime Text3中JSX支持Emmet快捷键
在复习React的过程中,发现Sublime有些快捷键不能用了,如Emmet的Tab快速生成HTML代码只能用Ctrl+E快捷键,而不能用Tab键了,在网上找了很多文章,发现都有问题,最终自己通过下面 ...
- sublime text3 --前端工程师必备神器
sublime text3 --前端工程师必备神器 导读目录: 下载与Emmet插件安装 sublime text3 中cssrem安装与使用 sublime Text 3的中文文件名显示为方框的问题 ...
- sublime text3 --前端工程师必备
sublime text3 --前端工程师必备神器 导读目录: 下载与Emmet插件安装 sublime text3 中cssrem安装与使用 sublime Text 3的中文文件名显示为方框的问题 ...
- Sublime Text3—常用插件Emmet
摘要 安装请看上一篇Sublime Text-安装,和sublime自带快捷键一起用,写html简直快的飞起. 下面整理的是常用的,完整的可看emmet官方文档. 一.生成标签 1.快速生成文档结构 ...
- 关于Sublime Text3的emmet插件和tab快捷键冲突问题
当使用Sublime text3时会遇到快捷键冲突的问题,其中就有安装Emmet之后,tab无法缩进了, 网上有些说看看Browse Packages目录下是否有PyV8插件安装,该插件一般情况下随E ...
- sublime Text3及其插件的使用
参考:Sublime Text 3 新手上路:必要的安裝.設定與基本使用教學 Sublime Text 相信是許多開發人員人心目中的最愛,然而對一個 Sublime Text 3 的新手來說,有什麼是 ...
- 前端神器Sublime Text3 常用插件&常用快捷键
Sublime Text3常用插件 使用Package Control组件安装 也可以安装package control组件,然后直接在线安装: 按Ctrl+`调出console(注:安装有QQ输入法 ...
随机推荐
- iOS关于代码风格问题
cocoapods管理第三方库,详见cocoapods安装及使用 OC代码风格需要规范,所有第三方依赖需要用cocoapods管理.代码风格需要: 1. pod 'CodeFormatter', :g ...
- leetcode-55-跳跃游戏
题目描述: 给定一个非负整数数组,你最初位于数组的第一个位置. 数组中的每个元素代表你在该位置可以跳跃的最大长度. 判断你是否能够到达最后一个位置. 示例 1: 输入: [2,3,1,1,4] 输出: ...
- SVN服务器端环境搭建步骤
5.1 安装服务器端程序 yum install -y subversion 5.2 创建并配置版本库 创建版本库目录 mkdir -p /var/svn/repository 在版本库目录下创建具体 ...
- KCF+Opencv3.0+Cmake+Win10
配置 需要的文件下载 安装CMake,安装opencv3.0.0 在KCFcpp-master 目录下新建一个文件夹,命名为build 打开CMake-GUI配置如下: 点击Configure,编译器 ...
- Mac 10.12安装图片标注工具PxCook
说明:现在基本是PxCook最好用,其余都是收费的,并且支持Android标注dp,主要是用于App开发时坐标定位,求到比例等等. 下载: (链接: https://pan.baidu.com/s/1 ...
- mono for android之文件系统与应用程序首选项(转)
Aside from persistent files, your application might need to store cache data in a file. To do that, ...
- 开源:我的Android新闻客户端,速度快、体积小、支持离线阅读、操作简便、内容展现形式丰富多样、信息量大、功能全面 等(要代码的留下邮箱)
分享:我的Android新闻客户端,速度快.体积小.支持离线阅读.操作简便.内容展现形式丰富多样.信息量大.功能全面 等(要代码的留下邮箱) 历时30天我为了开发这个新闻客户端APP,以下简称觅闻 h ...
- 【Markdown】Markdown相关问题
1.显示多行代码 将代码用一个tab缩进或者四个空格缩进
- jQuery多库共存问题解决方法
一.问题概述: 1.随着jQuery的流行,采用jQuery和$符为命名空间的js库越来越多,当然jQuery的$符也是参照的Prototype库的,所以当多个库同时以$符或者jQuery为命名空间时 ...
- 配置MySQL接受远程登录连接
一 开放mysql mysql的配置文件在/etc/mysql/my.cnf文件内,里面有一行bind-address = 127.0.0.1表示只允许本地访问,将这行注释即可 # bind-addr ...