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>
转载于:https://www.cnblogs.com/alonesky/p/10133181.html
Sublime Text3之安裝Emmet及使用技巧相关推荐
- c语言打程序时会遇到什么问题,Sublime text3 实现C语言编译运行以及过程中可能遇到的问题...
以前学C语言的时候主要用的编译器是cb,后来知道sublime text3配置之后可以编译运行C语言,在写简单程序的时候用起来就方便多了. 首先需要准备MinGW.sublime text3的安装包, ...
- sublime text3安装emmet插件
sublime text3安装emmet插件 很多人输入html:5然后按住Tab键并没有生成完整结构,这是因为没有安装emmet插件 sublime text3安装包(来自官网) 链接:https: ...
- php cs fixer.bat,在 Windows 上安裝 Sublime Text 2 搭配 PHP-CS-Fixer 套件
Note: 2014.12.22 PHP-CS-Fixer 不支援 "--level": "all" 設定了 由於近幾年來 PHP-Fig 發佈 PSR-0 ~ ...
- sublime text3安装emmet插件及PyV8:小白重试了n次后终于成功
标重点:是Sublime Text 3 不是2,两者的安装可能不同,小白只会3的. 第一步:检查自己是否已经安装了Package Control. 这一步是很关键的,安装Sublime Text时按照 ...
- Sublime text3 emmet插件安装
Emmet插件作为Sublime text3 的热门插件,首先解决如何添加安装才是使用的基础 在添加Emmet插件的时候,我也遇到了若干问题,只能卸载Sublime text3再安装,终于安装成功,现 ...
- sublime text3的破解和使用
个人博客:ZJBLOG 之所以想用这个是因为最近在学Python不知道用啥ide好,看同事说这个不错就了解了下,已经有的notepad++感觉不太好编程吧,做记事本就行了,atom又感觉太卡了,打开慢 ...
- Sublime Text3轻量型跨平台C/C++开发环境(上) 安装使用篇
Sublime Text 2和3的对比 相比于2,Sublime Text 3就秒启动一项,就压倒性地胜利了.因此在之后的叙述中都以Sublime Text 3为主角.并且3一直在不断的完善更新,具体 ...
- 如何优雅地使用Sublime Text3
Sublime Text:一款具有代码高亮.语法提示.自动完成且反应快速的编辑器软件,不仅具有华丽的界面,还支持插件扩展机制,用她来写代码,绝对是一种享受.相比于难于上手的Vim,浮肿沉重的Eclip ...
- 如何优雅地使用Sublime Text3中大量的插件
[原作者链接](http://www.jianshu.com/p/3cb5c6f2421c/) Sublime Text:一款具有代码高亮.语法提示.自动完成且反应快速的编辑器软件,不仅具有华丽的界面 ...
- Sublime Text3插件安装(经典)
一.下载安装sublime Text3 到官网http://www.sublimetext.com/3下载安装包(根据你的电脑系统下载对应的portable version),下载好st3后,然后不断 ...
最新文章
- mysql表和表的关系_mysql表与表之间建关系
- html5页面输出语句,使用html5输出文件
- SAP制造业成本核算流程
- Laravel 队列:如何查看队列报错信息
- jupyter安装出现问题:安装后无法打开
- AI:IPPR的数学表示-CNN结构/参数分析
- top命令---Linux学习笔记
- 蓝桥杯真题-连号区间数-枚举
- c语言作业重庆科技学院,C语言程序设计学生上机报告-NO3.doc
- DeepEye:一个基于深度学习的程序化交易识别与分类方法
- atoi 原来将字符串02002xzm100转换为int以后是2002
- 拓扑学(代数拓扑学)的有趣应用
- linux设置为lunux文件夹,Linux设置环境变量时如何修改文件
- android 性能测试 简介,android性能测试工具traceview简介[转载]
- 【FXCG】如何成功启动SWOT分析法
- java excel 字体_java中Excel字体的设置,背景和纹理的操作
- Chrome免安装版制作
- 计算机关闭显示器电源,打开计算机电源后,将显示进入睡眠模式时如何修复计算机...
- hudi概念与设计介绍
- linux关闭proftpd服务,Linux ProFTPd安装与卸载详细介绍
热门文章
- 深度相机(六)--Kinect v2.0 手势样本库制作
- 国外免费服务器 win系统,FreeSSHd一个免费的SSH服务器的Windows | MOS86
- jquery 滚动到某个div_如何使用jQuery获取父元素
- TCP/IP参考模型入门
- clickhouse算术函数
- The “QtRunWork“ task returned false but did not log an error
- Windows核心编程_提权
- 云栖科技评论世界杯特刊:俄罗斯世界杯,新技术再一次升级内容产业
- 常用实例:js格式化手机号为3 4 4形式
- 架构之路 参考MySpace