因为开始做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个常用的技巧的更多相关文章

  1. sublime text 3中emmet常用技巧

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. Sublime Text 2 安装emmet插件和常用快捷键

    一.先安装package control1.按Ctrl+`调出console,输入以下命令然后回车 import urllib2,os; pf='Package Control.sublime-pac ...

  3. 关于Sublime text 2中Emmet的安装 _html:xt无效

    其实这个网上很多教程,有一些方法是可行的,但是有一些方法是行不通的. 虽然Sublime text 2有不同平台的版本,但是安装起来,还是有点差异的. 先简单介绍一下Emmet,Emmet是Zen-c ...

  4. sublime text 2 安装emmet插件

    一.添加插件之前先 下载Package Control 按 Ctrl+`(就是~这个键) 复制下面的代码 确认 重新启动sublime text2 import urllib2,os;pf='Pack ...

  5. Sublime Text 3 安装 Emmet 插件

    首先安装 Package Control 1.通过快捷键 ctrl+` 或者 View > Show Console 菜单打开控制台 2.粘贴以下代码后回车安装 import  urllib.r ...

  6. Sublime Text 2之Emmet插件安装及使用

    1.安装Emmet How To Install?Reffer to this link:http://www.ituring.com.cn/article/47310 2.使用Emmet--Abbr ...

  7. sublime text 3 中 SFTP插件 的 配置

    SFTP 插件.主要功能就是通过 FTP/SFTP 连接远程服务器并获取文件列表,可以选择下载编辑.重命名.删除等等操作,点下载编辑之后,可以打开这个文件进行修改.修改完成之后,保存一下会自动上传到远 ...

  8. Emmet插件比较实用常用的写法

    看了一些关于Emmet插件写法的文档,港真,怎么可以写这么长啊.其实知道几个大概要点加上实践基本就能上手写了啊 杂话 我前面有一篇[今天发现新大陆:haml和Emmet ],其实一开始的想法是写给自己 ...

  9. Sublime Text 2中前端必备的常用插件

    Sublime Text 2安装的插件和所有预置的插件全部在Packages文件下,可以直接通过”preferences“—>”Browse Pakcages“来访问. Sublime Text ...

随机推荐

  1. 用Hutton32玩转数字电路(一):逻辑门

    最近看到有人用Minecraft里面的红石电路制作出了计算器,还有一篇神文:<基于Minecraft实现的计算机工程>,视频在此,好像还能算浮点数.三角函数.我对红石不是太了解,那能不能用 ...

  2. LG_2286_[HNOI2004]宠物收养场

    题目描述 凡凡开了一间宠物收养场.收养场提供两种服务:收养被主人遗弃的宠物和让新的主人领养这些宠物. 每个领养者都希望领养到自己满意的宠物,凡凡根据领养者的要求通过他自己发明的一个特殊的公式,得出该领 ...

  3. HTML5 file API加canvas实现图片前端JS压缩并上传

    一.图片上传前端压缩的现实意义 对于大尺寸图片的上传,在前端进行压缩除了省流量外,最大的意义是极大的提高了用户体验. 这种体验包括两方面: 由于上传图片尺寸比较小,因此上传速度会比较快,交互会更加流畅 ...

  4. babel-loader的原理

    本文转载自默语的博客. Babel包的构成 核心包 babel-core:是babel转译器本身,提供转译的API,例如babel.transform等,webpack的babel-loader就是调 ...

  5. Java Annotation/Scope

    1.在计算机编程语言Java中,什么是注释(Annotation)? 注释是一种可以添加到Java源代码的语法元数据或描述(注释不影响程序执行) 2.注释(Annotation)有什么作用?    ( ...

  6. 任务框架--Quartz 配置文件

    配置文件 Quartz 有一个叫做quartz.properties的配置文件,它允许你修改框架运行时环境.缺省是使用 Quartz.jar 里面的quartz.properties 文件.你应该创建 ...

  7. Django 学习笔记1-- URLconf

    今天好像巴黎有点乱,希望明天太阳还会照常升起. 简介 Django 是一个由 Python 编写.开源并采用经典的 MVC 设计模式的 Web Full Stack 应用框架. 在 Django 中, ...

  8. Microsoft Translator发布粤语文本翻译

    今天,Microsoft Translator发布了粤语的文本翻译,新的语言增加将继续丰富微软翻译产品的生态系统*,让更多组织和个人能够快速且高效地实现翻译应用.在中国,大有约5500万人使用粤语(语 ...

  9. 使用python抓取汽车之家车型数据

    import requests import pymysql HOSTNAME = '127.0.0.1' USERNAME = 'root' PASSWORD = 'zyndev' DATABASE ...

  10. git还原历史某一版本

    返回上一版本 git reset --hard HEAD^ 常用的命令git refloggit reset --hard "填写版本号" 黄色的就是版本号 其他查看以前版本的命令 ...