HTML代码写起来很费事，因为它的标签多。

一种解决方法是采用模板，在别人写好的骨架内，填入自己的内容。还有一种很炫的方法----简写法。

常用的简写法，目前主要是Emmet和Haml两种。这两种简写法，功能相近，各有特点。考虑到Haml基于Ruby语言，建议Ruby/Rails项目使用Haml，其他项目使用Emmet。

本文主要介绍Emmet。

本人使用的编辑器是sublime text，下面就以sublime text举例。

一、安装Emmet插件：

1.安装Package Control组件（之前若安装过，此步骤可以省略）

按Ctrl+`调出console

粘贴以下代码到底部命令行并回车：

import urllib2,os;pf='PackageControl.sublime-package';ipp=sublime.installed_packages_path();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())

重启SublimeText 2。

如果在Perferences->packagesettings中看到packagecontrol这一项，则安装成功。

如果这种方法不能安装成功，可以到这里下载文件手动安装：http://wbond.net/sublime_packages/package_control/installation。

2、安装Emmet插件：

按下Ctrl+Shift+P调出命令面板

输入install调出 Install Package 选项并回车，然后在列表中选中Emmet，或直接输入Emmet。

安装成功后，重启Sublime Text 2。

二、Emmet的用法

新建一个文本文件，键入

　　html:5

按一下"Ctr+E"，这一行就立刻变成下面的样子。

　　<!DOCTYPEhtml>

　　<html>

　　<head>

　　　　<metacharset="UTF-8">

　　　　<title></title>

　　</head>

　　<body>

　　</body>

　　</html>

这就是Emmet的基本用法：先写简写形式，然后用"Ctr+E"将其转成HTML代码。

Emmet支持的简写规则，类似于CSS选择器（大写的E代表一个HTML标签）：

　　1. E 代表HTML标签。

　　2.E#id 代表id属性。

　　3.E.class 代表class属性。

　　4.E[attr=foo] 代表某一个特定属性。

　　5.E{foo} 代表标签包含的内容是foo。

　　6.E>N 代表N是E的子元素。

　　7.E+N 代表N是E的同级元素。

　　8.E^N 代表N是E的上级元素。

请看下面的例子。

　　p

　　p#main.item

　　a[href=http://daybook.diandian.com/]{水牛儿}

　　div>p

　　div+p

　　p>span^div

对应的HTML代码为：

　　<p></p>

　　<p id="main" class="item"></p>

　　<a href="http://daybook.diandian.com/">水牛儿</a>

　　<div>

　　　　<p></p>

　　</div>

　　<div></div>

　　<p></p>

　　<p><span></span></p>

　　<div></div>

Emmet还提供了连写（E*N）和自动编号（E$*N）功能。

　　li*3>a

　　div#item$.class$$*3

对应的HTML代码为

　　<li><a href=""></a></li>

　　<li><a href=""></a></li>

　　<li><a href=""></a></li>

　　<div id="item1" class="class01"></div>

　　<div id="item2" class="class02"></div>

　　<div id="item3" class="class03"></div>

参考资料：

http://www.ruanyifeng.com/blog/2013/06/emmet_and_haml.html

http://www.qianduan.net/essential-to-sublime-the-text-2-plugins.html

工欲善其事必先利其器，用Emmet提高HTML编写速度的更多相关文章

  1. CSS 常用样式 提高网页编写速度

    *{margin:0px;padding:0px;}/*内外边距初始化*/html, body, div, h1, h2, h3, h4, h5, h6, p, span, img, input, t ...

  2. 古语云：工欲善其事必先利其器 --> 最新、最全的 IntelliJ IDEA(2018.3.3) 的介绍、安装、破解、配置与使用

    原文:古语云:工欲善其事必先利其器 --> 最新.最全的 IntelliJ IDEA(2018.3.3) 的介绍.安装.破解.配置与使用 一.IntelliJ IDEA 介绍 -> Ecl ...

  3. Web前段优化，提高加载速度 css

    前言:  在同样的网络环境下,两个同样能满足你的需求的网站,一个"Duang"的一下就加载出来了,一个纠结了半天才出来,你会选择哪个?研究表明:用户最满意的打开网页时间是2-5秒, ...

  4. VsCode中使用Emmet神器快速编写HTML代码

    一.Emmet简述 Emmet (前身为 Zen Coding) 是一个能大幅度提高前端开发效率的一个工具. 在前端开发的过程中,一大部分的工作是写 HTML.CSS 代码.特别是手动编写 HTML ...

  5. 巧用linux服务器的/dev/shm/，如果合理使用，可以避开磁盘IO不给力，提高网站访问速度。

    巧用linux服务器的/dev/shm/ 巧用linux服务器的/dev/shm/,如果合理使用,可以避开磁盘IO不给力,提高网站访问速度. 首先让我们认识一下,什么是tmpfs和/dev/shm/? ...

  6. 【转】提高VR渲染速度的关键

    提高VR渲染速度的关键,这个教程比以往的教程都要重要很多,如果你是刚刚步入学习和上升阶段那么这将是你必须要看的东西,他会让你迅速提升技能达到比你死看书本好很多的效果,不多说上教程   VR的基本渲染方 ...

  7. 转：【工欲善其事必先利其器】—Entity Framework实例详解

    开始本篇文章之前,先说一下Entity Framework 6 Alpha1在NuGet中已可用,原文链接http://blogs.msdn.com/b/adonet/archive/2012/10/ ...

  8. 利用curl并发来提高页面访问速度

    在我们平时的程序中难免出现同时访问几个接口的情况,平时我们用curl进行访问的时候,一般都是单个.顺序访问,假如有3个接口,每个接口耗时500毫 秒那么我们三个接口就要花费1500毫秒了,这个问题太头 ...

  9. 【转】怎样提高VR渲染速度

    怎样提高VR渲染速度分析!<经验之谈>!!!VR的基本渲染方法掌握起来并不难,但是最迫切需要解决的问题是VR的出图速度问题.动则需要数小时的渲染时间真的是很难以接受,我们从三个影响速度的参 ...

随机推荐

  1. 使用VSCode调试单个PHP文件

    突然发现是可以使用 VSCode 调试单个 PHP 文件的,今天之前一直没有弄成功,还以为 VSCode 是不能调试单文件呢.这里记录一下今天这个"突然发现"的过程. 开始,是在看 ...

  2. unity中camera摄像头控制详解

    目录 1. 缘起 2. 开发 2.1. 建立项目 2.2. 旋转 2.2.1. 四元数 2.3. 移动 2.3.1. 向量操作 2.4. 镜头拉伸 2.5. 复位 2.6. 优化 1 缘起 我们的产品 ...

  3. Spark RDD深度解析-RDD计算流程

    Spark RDD深度解析-RDD计算流程 摘要  RDD(Resilient Distributed Datasets)是Spark的核心数据结构,所有数据计算操作均基于该结构进行,包括Spark ...

  4. python 游戏(船只寻宝)

    1. 游戏思路和流程图 实现功能:船只在可以在大海上移动打捞宝藏,船只可以扫描1格范围内的宝藏(后续难度,可以调整扫描范围,可以调整前进的格数) 游戏流程图 2. 使用模块和游戏提示 import r ...

  5. 关于几个vcenter的合并心得！

    由于最近公司领导觉得公司几个vcenter管理的不同网段IP,办公的时候操作不方便,故本人把几个vcenter上面的esxi主机合并到一个里面! 通过几次测试,发现最简单的方法就是直接用一台vcent ...

  6. python类属性在继承中的修改的影响

    class A(object): x = 1 class B(A): pass class C(A): pass # 通过父类修改类属性,子类继承的类属性也改变 A.x = 3 print(A.x, ...

  7. 20135202闫佳歆--week3 跟踪分析Linux内核的启动过程--实验及总结

    实验三:跟踪分析Linux内核的启动过程 一.调试步骤如下: 使用gdb跟踪调试内核 qemu -kernel linux-3.18.6/arch/x86/boot/bzImage -initrd r ...

  8. think in UML（一）

    从一开始上课老师就讲面向对象设计面向对象设计,然而对于什么是面向对象是什么没有什么具体的概念,相较于面向对象设计,面向对象又有什么什么优势.<大象>从一开始就交代了我最基础的知识欠缺,在书 ...

  9. VS2013简单的单元测试

    安装过程本人在此就不做多余的说明,如果一个程序员连一个软件都无法安装那我也醉了,其次就是希望我们不要为了完成作业而去用VS,下面我具体说一下单元测试. 第一步,文件→新建一个项目,具体操作如下图 打开 ...

  10. POI操作Excel（xls、xlsx）

    阿帕奇官网:http://poi.apache.org/ POI3.17下载:http://poi.apache.org/download.html#POI-3.17 POI操作Excel教程(易百教 ...