sublime text 2中Emmet8个常用的技巧
原文链接:http://blog.csdn.net/lmmilove/article/details/9181323
因为开始做web项目,所以最近在用sublime编辑器,知道了一个传说中的emmet,原名是zen coding。html神插件可以说是。文章部分内容转自http://www.cnblogs.com/meetrice/archive/2013/01/27/2878548.html
在sublime 中,促发emmet 可以先保存为.html文件。然后输入下面的简写,按tab键就可促发效果了。
1. 生成html格式
输入 html:5
2. 简写Div
大家可以看到,不管你是否添加了div,Emmet都会自动生成需要div元素。
含糊标签名称
这个技巧属于implicit tag names特性,你不需要指定div或者li,Emmet会自动帮助你生成,如下:
3. 带有DOM导航的链式缩写
如果你使用Emmet来扩展简单的class名称生成div的话。这个方式可以帮助你省去大量的时间。你只需要记住如下语法:
- > 子节点:在DOM树下一层添加创建一个元素
- + 同级别:在DOM树同一层添加创建一个元素
- ^ 向上层:向上一层添加创建创建一个元素。
向上一层
如果需要的话你可以向上多层,如下:
4. 使用分组来简化你的代码结构
有的时候你可能会发现使用向上符号比较复杂,这时候可能使用分组更加的合理。如下:
一个更复杂一些的例子,如下:
5. 插入文本和属性
如果你需要生成HTML,内容和属性也是你常常需要添加的。很多开发人员只是使用Emmet来生成框架,然后再添加内容。其实你可以在生成页面框架的过程中同时添加属性和内容。
从下面代码可以看到,你输入的文字和属性都可以分别通过大括号和中括号来生成。
6. 添加多个class到一个元素
这个非常简单,你只需要使用逗号来添加多个class,如下:
7. 重复添加
这可能是最让人舒服的操作了,帮助你重复添加元素:
如果你整合分组功能,那么你将能够处理更复杂的HTML生成:
8. 自动列表记数
如果你需要按顺序生成HTML元素,这个技巧你一定喜欢,使用$符号可以帮助你生成一系列数字,支持class,id,属性,内容等等。如下:
注意如果你需要生成2位的数字,使用两个$符号即可。
转载于:https://www.cnblogs.com/zhongshiqiang/p/5990081.html
sublime text 2中Emmet8个常用的技巧相关推荐
- sublime text 3 中改变.vue文件的颜色
1.按 Ctrl+Shift+P 2.输入install,选择install Package 3.输入vue,选择 vue syntax hightlight 如果上述方法不起作用,可以选择在下面连接 ...
- Sublime Text 2 中怎样查找scope的名称
在Sublime Text 2中新增一个snippet时需要在配置文件中输入scope节点的值来限制snippet使用的语法范围(作用域),这个scope的值可以通过以下方法获得: 进入包所在目录,如 ...
- C++代码在Sublime Text 3中编译和运行
Sublime Text 3中编译和运行 前言 以下可以避免因编码问题导致的乱码现象 前言 在数据结构代码的编写中,我选用了优秀的编辑器Sublime Text 3,但是在实现C++代码的编译和运行上 ...
- sublime text 3 中的php代码语法检测
sublime text 3 中存在一个php 代码语法检测的插件,如果在sublime中编写php代码出现了语法错误,可以在左侧出现红色的提示标志: 如图所示: 那么这样的效果在sublime编辑器 ...
- sublime c 语言 编译,默认情况下,将程序编译为Sublime Text 3中的c 14
我知道我们可以使用g编译器将程序编译为C.但是g编译器默认为98版本.要将其作为C 14运行,我们需要在终端中添加-std = c 14. Sublime Text因其重量轻和功能而被认为是有竞争力的 ...
- Sublime Text 3中配置编译和运行Java的两个方法
方法一: 打开Sublime Text 3,依次点击Preference, Browse Packages,在打开的窗口中双击User文件夹,新建文件JavaC.sublime-build,用记事本打 ...
- Sublime Text 2中的正则表达式搜索替换
本文翻译自:Regular expression search replace in Sublime Text 2 I'm looking to do search replace with regu ...
- php在浏览器输入路径,关于在sublime text 3 中配置一键浏览器打开php文件,并且是在localhost 本地服务器路径下...
如题,如何在sublime text 3 中配置出像dreamweaver 中那样的通过f12快捷键来在浏览器打开浏览php文件,而且是在localhost路径下. 在segmentfault得到一个 ...
- Sublime Text 3中SublimeLinter的使用
关于Sublime Text 2中的SublimeLinter的使用网上多如牛毛,基本上不会遇到什么问题,简单的讲一下关于Sublime Text 3中遇到的问题: 1.通过package cont ...
最新文章
- 编程(创客)教育哪家强?图形化编程软件体验报告(慧编程)
- RabbitMQ之惰性队列(Lazy Queue)
- 程序架构--BS,CS
- 性价比不高却出到8?华为存在感最低的一个系列再发新机
- php js绝对路径,javascript将相对路径转绝对路径示例_基础知识
- paper reading:Part-based Graph Convolutional Network for Action Recognition
- 数据算法_数据结构和常用算法
- 令牌环(Token Ring)
- 笔记-神经网络滑模控制设计方法
- 如何使用U盘制作苹果系统启动盘
- Synergy:亚马逊云服务(AWS)在亚太地区排名第一
- 使用kafka-reassign-partitions.sh重新对topic分区,ReplicationFactor由1变成3
- 深度学习(3):基于人脸的性别和年龄判断
- 1503 Problem A 最简分式
- 量子计算机原理以及量子算法
- u盘容量变小了是什么原因?怎么恢复数据?
- caj打印PDF提示打印超范围应该怎么办?
- PYTHON编码转换小记
- Markdown使用小笔记
- css中关于文本换行的处理总结