工欲善其事必先利其器,用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的出图速度问题.动则需要数小时的渲染时间真的是很难以接受,我们从三个影响速度的参 ...
随机推荐
- Shell 基础 -- 流编辑器 sed 详解
一.流编辑器 sed 与命令 sed Linux 中,常使用流编辑器 sed 进行文本替换工作.与常使用的交互式编辑器(如vim)不同,sed 编辑器以批处理的方式来编辑文件,这比交互式编辑器快得多, ...
- Git多人协作工作流程
前言 之前一直把Git当做个人版本控制的工具使用,现在由于工作需要,需要多人协作维护文档,所以去简单了解了下Git多人协作的工作流程,发现还真的很多讲解的,而且大神也已经讲解得很清楚了,这里就做一个简 ...
- 第十五次ScrumMeeting博客
第十五次ScrumMeeting博客 本次会议于12月4日(一)22时整在3公寓725房间召开,持续30分钟. 与会人员:刘畅.辛德泰.张安澜.赵奕.方科栋. 1. 每个人的工作(有Issue的内容和 ...
- PAT甲题题解-1077. Kuchiguse (20)-找相同后缀
#include <iostream> #include <cstdio> #include <algorithm> #include <string.h&g ...
- linq to sql中的自动缓存(对象跟踪)
linq to sql中,对于同一个DataContext上下文环境,根据表主键选择记录时(当然这里所指的“记录”会自动转成“对象”),如果该记录已经被select过,默认情况下会被自动缓存下来,下次 ...
- python数据分析所需要了解的操作。
import pandas as pd data_forest_fires = pd.read_csv("data/forestfires.csv", encoding='gbk' ...
- 600字让你读懂Git
设想你现在位于 alpha/ 目录下,这里有一个文本文件 number.txt,里面的内容只有一个词:“first”. 现在执行 git init 将这个 alpha 文件夹初始化为 Git 仓库. ...
- 深入解读Quartz的原理
Quartz是一个大名鼎鼎的Java版开源定时调度器,功能强悍,使用方便. 一.核心概念 Quartz的原理不是很复杂,只要搞明白几个概念,然后知道如何去启动和关闭一个调度程序即可. 1 ...
- spring 默认情况下事务是惟一的 同一个方法里面第一个sql开启后 在执行完 将事务传递给下一个sql
spring 默认情况下事务是惟一的 同一个方法里面第一个sql开启后 在执行完 将事务传递给下一个sql
- salt-api安装以及简单实使用
1.安装说明 操作系统版本:CentOS Linux release 7.5.1804 (Core) saltstack版本:2018.3.2 已经关闭selinux.firewalld服务. 2.配 ...