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. selenium+python自动化----xlrd,xlswriter

    1.准备: 使用之前需要先按照:打开cmd,输入pip install xlrd(xlswriter),点击enter; 2.基本使用: xlrd: #打开els文件,参数是文件路径: table = ...

  2. 容器flappybird游戏——图文操作指引贴

    第一步:打开华为云容器引擎产品首页,点击免费体验馆   第二步:进入免费体验馆,点击体验按钮,获得3天免费集群     第三步:创建免费集群完成后,进入产品console页,如图所示:   第四步:如 ...

  3. Macaca初体验-PC端（Python）

    前言: Macaca 是一套面向用户端软件的测试解决方案,提供了自动化驱动,周边工具,集成方案.由阿里巴巴公司开源:http://macacajs.github.io/macaca/ 特点: 同时支持 ...

  4. THE LAST ONE！！ 2017《面向对象程序设计》课程作业八

    THE LAST ONE!! 2017<面向对象程序设计>课程作业八 031602230 卢恺翔 GitHub传送门 题目描述 1.时间匆匆,本学期的博客作业就要结束了,是否有点不舍,是否 ...

  5. [Week17] 个人阅读作业

      个人阅读作业Week17 reading buaa software   解决的问题 这是提出问题的博客链接:http://www.cnblogs.com/SivilTaram/p/4830893 ...

  6. Beta阶段敏捷冲刺①

    1.提供当天站立式会议照片一张. 每个人的工作 (有work item 的ID),并将其记录在码云项目管理中: 1.1昨天已完成的工作. 姓名 昨天已完成的工作 徐璐琳 熟悉"慧记" ...

  7. Team抢救最后一下

    Team抢救最后一下 Task1:Team抢救的总结 秦玉:       非常荣幸能以团队的方式获得这次的小黄衫,这件衣服的意义不仅是这门课的奖励,也会是我们整个抢救团队的一个见证和回忆~       ...

  8. 『编程题全队』Alpha 阶段冲刺博客Day6

    1.每日站立式会议 1.会议照片 2.昨天已完成的工作统计 孙志威: 1.添加JSON处理模块 2.添加了团队看板中的添加团队任务功能 3.添加了团队看板中的添加按钮 孙慧君: 1.个人任务框UI的设 ...

  9. opencv图像识别技术在自动化测试中的应用

    在自动化测试中,基于xpath.js选择器.css选择器进行元素定位及判定的技术已经比较成熟.在实际应用中,无论是web端还是移动端,仍有很多时候需要根据页面内容.页面中的图像进行定位及判定,这里介绍 ...

  10. TortoiseSVN 设置中文语言包

    相关 TortoiseSVN 下载与安装 [立即前往]下载 简体中文包 64 位 [一键下载] [百度云下载] [官网下载] 简体中文包 32 位 [一键下载] [官网下载]安装    版本确认    ...