工欲善其事必先利其器，用Emmet提高HTML编写速度
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编写速度的更多相关文章
- CSS 常用样式 提高网页编写速度
*{margin:0px;padding:0px;}/*内外边距初始化*/html, body, div, h1, h2, h3, h4, h5, h6, p, span, img, input, t ...
- 古语云：工欲善其事必先利其器 --> 最新、最全的 IntelliJ IDEA(2018.3.3) 的介绍、安装、破解、配置与使用
原文:古语云:工欲善其事必先利其器 --> 最新.最全的 IntelliJ IDEA(2018.3.3) 的介绍.安装.破解.配置与使用 一.IntelliJ IDEA 介绍 -> Ecl ...
- Web前段优化，提高加载速度 css
前言: 在同样的网络环境下,两个同样能满足你的需求的网站,一个"Duang"的一下就加载出来了,一个纠结了半天才出来,你会选择哪个?研究表明:用户最满意的打开网页时间是2-5秒, ...
- VsCode中使用Emmet神器快速编写HTML代码
一.Emmet简述 Emmet (前身为 Zen Coding) 是一个能大幅度提高前端开发效率的一个工具. 在前端开发的过程中,一大部分的工作是写 HTML.CSS 代码.特别是手动编写 HTML ...
- 巧用linux服务器的/dev/shm/，如果合理使用，可以避开磁盘IO不给力，提高网站访问速度。
巧用linux服务器的/dev/shm/ 巧用linux服务器的/dev/shm/,如果合理使用,可以避开磁盘IO不给力,提高网站访问速度. 首先让我们认识一下,什么是tmpfs和/dev/shm/? ...
- 【转】提高VR渲染速度的关键
提高VR渲染速度的关键,这个教程比以往的教程都要重要很多,如果你是刚刚步入学习和上升阶段那么这将是你必须要看的东西,他会让你迅速提升技能达到比你死看书本好很多的效果,不多说上教程 VR的基本渲染方 ...
- 转：【工欲善其事必先利其器】—Entity Framework实例详解
开始本篇文章之前,先说一下Entity Framework 6 Alpha1在NuGet中已可用,原文链接http://blogs.msdn.com/b/adonet/archive/2012/10/ ...
- 利用curl并发来提高页面访问速度
在我们平时的程序中难免出现同时访问几个接口的情况,平时我们用curl进行访问的时候,一般都是单个.顺序访问,假如有3个接口,每个接口耗时500毫 秒那么我们三个接口就要花费1500毫秒了,这个问题太头 ...
- 【转】怎样提高VR渲染速度
怎样提高VR渲染速度分析!<经验之谈>!!!VR的基本渲染方法掌握起来并不难,但是最迫切需要解决的问题是VR的出图速度问题.动则需要数小时的渲染时间真的是很难以接受,我们从三个影响速度的参 ...
随机推荐
- beef局域网内模拟攻击
0x0环境 主机A win10:10.51.20.60(wifi) 主机A中的虚拟机kali(攻击者):192.168.110.129(NAT) 主机A中的虚拟机win2003(受害者):192.16 ...
- PAT甲题题解-1106. Lowest Price in Supply Chain (25)-(dfs计算树的最小层数)
统计树的最小层数以及位于该层数上的叶子节点个数即可. 代码里建树我用了邻接链表的存储方式——链式前向星,不了解的可以参考,非常好用: http://www.cnblogs.com/chenxiwenr ...
- 《linux内核分析》第一周（2.22~2.28）
潘恒 原创作品转载请注明出处 <Linux内核分析>MOOC课程http://mooc.study.163.com/course/USTC-1000029000 计算机是如何工作的? ...
- Team Work Ⅱ
Regal-Lighting团队设计 分工思考 本次大作业我的分工定位是:Unit及子类,主要设计实现建筑类的功能. 首先王者光耀这款游戏所需要的建筑分为三类: 1.防御塔:有一定的血量,血量为0时破 ...
- 学习电脑编码utf-8,ansi编码的基础知识等
大学时期就很好奇,我们所看到的文字在电脑里面是怎么记忆的,感觉不可能是文字本身,今天刚好学习java的io流知识,顺便补充了一下电脑编码知识,先看一下下面小王和小张的例子,然后思考电脑怎么存放文字? ...
- ElasticSearch 2 (22) - 语言处理系列之标记规范化
ElasticSearch 2 (22) - 语言处理系列之标记规范化 摘要 将文本拆解成标记只是工作的一半.为了使这些标记更容易被搜索到,它们需要经过一个规范化的处理过程,以移除相同单词间不重要的差 ...
- Git从零开始（二）
前面提交了一个test1.txt文件,接下来看看这个文件接下来的命运. 一.继续修改并提交 在test1.txt中修改后, git status 查看git的状态, 会提示我们文件test1.txt被 ...
- Redis的相关问题总结
一.Redis的优缺点及适用场景 Redis 是一个基于内存的高性能key-value数据库.很像memcached,整个数据库统统加载在内存当中进行操作,定期通过异步操作把数据库数据flush到硬盘 ...
- 索引器 C#
概述 索引器允许类或结构的实例就像数组一样进行索引. 索引器类似于属性,不同之处在于它们的访问器采用参数. 在下面的示例中,定义了一个泛型类,并为其提供了简单的 get 和 set 访问器方法(作为分 ...
- C# 多线程之Thread类
使用System.Threading.Thread类可以创建和控制线程. 常用的构造函数有: // 摘要: // 初始化 System.Threading.Thread 类的新实例,指定允许对象在 ...