(转)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位的数字,使用两个$符号即可。

时间: 2024-11-08 23:00:50

(转)sublime text 2中Emmet8个常用的技巧的相关文章

sublime text 2中Emmet8个常用的技巧 .

因为开始做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,Em

sublime text 3中emmet常用技巧

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>sublime text 3中emmet常用技巧</title> </head> <body> <!-- 生成html5格式文件先把文件保存成.html格式,然后输入html:5按下tab键 --> <!-- 简写d

Sublime Text 2中自定义代码模板

Sublime Text 2中自定义代码模板 2012-12-06 10:13 9921人阅读 评论(0) 收藏 举报  分类: 编辑器-Sublime Text 2(5)  版权声明:本文为博主原创文章,未经博主允许不得转载. 选择菜单Preferences->Browse Packages,找到java目录,其中后缀名为sublime-snippet的文件就是代码模板. 尚未完全搞明白这类文件的语法,不过可以比葫芦画瓢. 打开test.sublime-snippet: <snippet&g

如何让vue文件中的代码在Sublime Text 3中高亮和智能提示

大家写在Sublime Text 3中编写vue文件时,会发现没有代码智能提示,清一色的黑底白字,不会像html.js一样变成彩色,给我们带来了很大的不便.所以需要安装一款叫作Vue Syntax Highlight的插件,它不仅可以使代码高亮起来,还能进行代码智能提示.那怎样安装呢?分为以下几步: 安装Package Control 执行Install Package 安装Vue Syntax Highlight

Sublime text 3 中Package Control 的安装与使用方法(转自 http://devework.com/sublime-text-3-package-control.html)

Package Control插件本身是一个为了方便管理插件的插件,在Sublime text 3中,Package Control 的安装方法一开始出来的方法是要先安装Git,再输入代码来安装,原因说是“sublime text 3更新的python的函数,说白了就是API不同了,导致基于python开发的插件很多都不能工作”.不过后来出了个方便的安装方法,下面介绍一下. 插播:代码编辑器Sublime Text 3 免费使用方法与简体中文汉化包下载 Package Control 主文件下载

Sublime text 3 中Package Control 的安装与使用方法和解决Sublime Text 3不能正确显示中文的问题

Sublime text 3 中Package Control 的安装与使用方法,英文好可以在这个网址看看, 下面简单的说明一下 : https://packagecontrol.io/installation 1. 打开sublime text3 按下ctrl+~ 把下面的代码粘贴或者分别点击 View --> Show Consolemenu后粘贴 import urllib.request,os,hashlib; h = 'df21e130d211cfc94d9b0905775a7c0f'

Sublime Text 3中配置编译和运行Java的两个方法

方法一: 打开Sublime Text 3,依次点击Preference, Browse Packages,在打开的窗口中双击User文件夹,新建文件JavaC.sublime-build,用记事本打开,粘贴下面的代码并保存关闭: { "cmd": ["javac","-encoding","UTF-8","-d",".","$file"], "file_r

SUBLIME TEXT 2中,光标移入移出括号的快捷键设置

无赖右方向键→和End键都在键盘的另一边,每次输入完一个函数,光标在各种括号中间,有什么更好的方式将光标移出来呢? 在Sublime Text 2中,我们可以自己设置快捷键: { "keys": ["ctrl+alt+space"], "command": "move", "args": {"by": "characters", "forward"

Sublime text 3 中Package Control 的安装与使用方法

Package Control插件本身是一个为了方便管理插件的插件,在Sublime text 3中,Package Control 的安装方法一开始出来的方法是要先安装Git, 再输入代码来安装,原因说是"sublime text 3更新的python的函数,说白了就是API不同了,导致基于python开发的插件很多都不能工作". 不过后来出了个方便的安装方法,下面介绍一下. Package Control 主文件下载 下载地址:https://github.com/wbond/su