【转】sublime text 2中Emmet插件8个常用的技巧
因为开始做web项目,所以最近在用sublime编辑器,知道了一个传说中的emmet,原名是zen coding。html神插件可以说是。文章部分内容转自http://www.cnblogs.com/meetrice/archive/2013/01/27/2878548.html
在sublime 中,促发emmet 可以先保存为.html文件。然后输入下面的简写,按tab键就可促发效果了。
1. 生成html5格式
输入 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位的数字,使用两个$符号即可。
【转】sublime text 2中Emmet插件8个常用的技巧的更多相关文章
- sublime text 3中emmet常用技巧
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Sublime Text 2 安装emmet插件和常用快捷键
一.先安装package control1.按Ctrl+`调出console,输入以下命令然后回车 import urllib2,os; pf='Package Control.sublime-pac ...
- 关于Sublime text 2中Emmet的安装 _html:xt无效
其实这个网上很多教程,有一些方法是可行的,但是有一些方法是行不通的. 虽然Sublime text 2有不同平台的版本,但是安装起来,还是有点差异的. 先简单介绍一下Emmet,Emmet是Zen-c ...
- sublime text 2 安装emmet插件
一.添加插件之前先 下载Package Control 按 Ctrl+`(就是~这个键) 复制下面的代码 确认 重新启动sublime text2 import urllib2,os;pf='Pack ...
- Sublime Text 3 安装 Emmet 插件
首先安装 Package Control 1.通过快捷键 ctrl+` 或者 View > Show Console 菜单打开控制台 2.粘贴以下代码后回车安装 import urllib.r ...
- Sublime Text 2之Emmet插件安装及使用
1.安装Emmet How To Install?Reffer to this link:http://www.ituring.com.cn/article/47310 2.使用Emmet--Abbr ...
- sublime text 3 中 SFTP插件 的 配置
SFTP 插件.主要功能就是通过 FTP/SFTP 连接远程服务器并获取文件列表,可以选择下载编辑.重命名.删除等等操作,点下载编辑之后,可以打开这个文件进行修改.修改完成之后,保存一下会自动上传到远 ...
- Emmet插件比较实用常用的写法
看了一些关于Emmet插件写法的文档,港真,怎么可以写这么长啊.其实知道几个大概要点加上实践基本就能上手写了啊 杂话 我前面有一篇[今天发现新大陆:haml和Emmet ],其实一开始的想法是写给自己 ...
- Sublime Text 2中前端必备的常用插件
Sublime Text 2安装的插件和所有预置的插件全部在Packages文件下,可以直接通过”preferences“—>”Browse Pakcages“来访问. Sublime Text ...
随机推荐
- unittest(8)- 学习ddt
import unittest from ddt import ddt, data, unpack """ 1.正常情况下,测试函数(即测试用例)中不可以传参,如果要使用 ...
- 吴裕雄--python学习笔记:os模块的使用
在自动化测试中,经常需要查找操作文件,比如说查找配置文件(从而读取配置文件的信息),查找测试报告(从而发送测试报告邮件),经常要对大量文件和大量路径进行操作,这就依赖于os模块. 1.当前路径及路径下 ...
- YY孵化虎牙,陌陌收购探探:你更看好谁?
近日欢聚时代公布了2017第四季财报和全年财报,表现不错.其CFO 金秉表示,虎牙最近向美国证券交易委员会(SEC)提交了注册上市申请书草案文件,可能会在美国IPO上市,以便获取自己的投资者群体以融资 ...
- 云服务器——之Linux下安装tomcat
在上一篇文章中已经准备好了tomcat安装的基本环境jdk的安装,那么我们现在来记录tomcat的安装. 第一步:下载tomcat安装包 http://tomcat.apache.org/ 第二步:通 ...
- Scrapy初体验(一) 环境部署
系统选择centOs 7,Scrapy是一个为了爬取网站数据,提取结构性数据而编写的应用框架. 可以应用在包括数据挖掘,信息处理或存储历史数据等一系列的程序中. 其最初是为了 页面抓取 (更确切来说, ...
- hexo创建新文章的正确方法
起因 之前我一直是通过复制以前的文章的形式来创建一个新的文档,但是这一次似乎遇到了一些问题.我将文章写完之后,准备进行预览,输入hexo s命令.在预览页面却没有显示出新的文章,还是和之前的页面是一样 ...
- 烧钱时代终结!O2O还能玩啥花样?
最终的最终,饱受亏损.烧钱玩补贴等争议的美团还是追随滴滴/快的.赶集/58的步伐,与大众点评愉快的在一起了!美团和大众点评作为O2O行业的领军企业,都因为不堪忍受持续地投入却不见回报的模式而不得不放低 ...
- C++扬帆远航——18(项目五2,递归式)
/* * Copyright (c) 2016,烟台大学计算机与控制工程学院 * All rights reserved. * 文件名:qiushi.cpp * 作者:常轩 * 微信公众号:World ...
- LLVM 中间代码归纳
Identifiers 标识符 @ 全局 % 局部 后接字符串 命名量 @name %name 无符号数字 未命名量 @42 %42 类型系统 void 空类型 <type> * 指针类型 ...
- 使用web写UI, 使用js对接C++项目, 提高开发效率
ppt资源下载地址https://www.slidestalk.com/s/webui_nodejs_cmdlrx