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. RabbitMQ基础教程之基本使用篇

    RabbitMQ基础教程之基本使用篇 最近因为工作原因使用到RabbitMQ,之前也接触过其他的mq消息中间件,从实际使用感觉来看,却不太一样,正好趁着周末,可以好好看一下RabbitMQ的相关知识点 ...

  2. SPIR-V*:面向 OpenCL™ 工作负载的英特尔® 显卡编译器默认接口

    英特尔® 显卡编译器最近从 SPIR* 转换到 SPIR-V*,作为面向 OpenCL™ 工作负载的中间表示.这看起来像编译器的内部变化,对用户来说不可见,但是这展示了我们支持 Khronos* 开放 ...

  3. 机器学习初入门03 - Matplotlib

    这一部分很简单,所以以代码的形式给出,在实际学习开发中,Matplotlib最好只把它当成一个画图的工具来用,没有必要深究其实现原理是什么. 一.折线图的绘制 import pandas as pd ...

  4. 比较 VGG, resnet和inception的图像分类效果

    简介 VGG, resnet和inception是3种典型的卷积神经网络结构. VGG采用了3*3的卷积核,逐步扩大通道数量 resnet中,每两层卷积增加一个旁路 inception实现了卷积核的并 ...

  5. PAT甲级题解-1047. Student List for Course (25)-排序

    一开始是建立了course[2501][40001]数组,存储每节课的学生编号然后for循环两层输出,但这样复杂度为O(2500*40000),也很明显导致最后时间超时后来发现最多40000学生,每个 ...

  6. Backbone.js源码浅介

    终于看到一个只有一千多行的js框架了,于是抱着一定可以看懂他的逻辑的心态,查看了他的整个源码,进去之后才发现看明白怎么用容易,看懂怎么写的就难了,于是乎有了这篇博客的标题:浅介,只能粗浅的介绍下Bac ...

  7. M1事后分析报告--We have power to change the origin state

    M1事后分析报告 设计与实现 我们发的软件解决的问题?是否满足后面小组的要求?是否能够完全拟合前期目标? 答: 前期我们的软件完成量并不是特别让人满意,我们组在完成这些任务量之后,发现有很多地方是在做 ...

  8. C语言函数参数传递

    1.值传递 void swap(int x,int y) { int temp = x; x = y; y = temp; } void main() { , b = ; swap(a, b); } ...

  9. C#程序解读

    阅读下面程序,请回答如下问题: 问题1:这个程序要找的是符合什么条件的数? 问题2:这样的数存在么?符合这一条件的最小的数是什么? 问题3:在电脑上运行这一程序,你估计多长时间才能输出第一个结果?时间 ...

  10. 圆桌的项目Alpha冲刺——测试

    测试工作安排 作为一个测试计划来讲,核心的三个要素是时间,资源,范围.时间就是什么时候做以及要花多久做,资源就是你要调用的人力.机器等资源,范围是你要测试的东西以及测试重点. 时间:每天完成相应的模块 ...