工欲善其事必先利其器，用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">

　　</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#main.item

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

　　div>p

　　div+p

　　p>span^div

对应的HTML代码为：

　　<p></p>

　　<div>

　　　　<p></p>

　　</div>

　　<p></p>

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

　　li*3>a

　　div#item$.class$$*3

对应的HTML代码为

参考资料：

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

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

转载于:https://www.cnblogs.com/fengyuqing/p/Emmet_html.html

工欲善其事必先利其器，用Emmet提高HTML编写速度相关推荐

迅速提高代码编写速度的训练方法
开始前,要心无杂念,也就是对自己的大脑使用unset()方法,最好能把所有编程技巧,你记得的所有php知识点都删除掉(某哥说过,高手的最高境界是无招胜有招),然后,深吸一口气,在丹田处开辟一块存储空间 ...
Python编程：PyThink数据库交互模块提高爬虫编写速度
PyThink模块提供了一些快捷方式,用于数据库的基本增.删.改.查可以让你如丝般顺滑地向MySQL插入数据 github: https://github.com/mouday/PyThink ...
CSS中的emmet语法（使用缩写的方式提高书写html编写速度）
使用CSS的emmet语法:使用缩写的方式提高书写html编写速度. (1)快速生成html结构语法: 如果想要生成多个相同的标签,加上"*"就可以了,如div*3,生成三个div ...
github 著名php,工欲善其事必先利其器，盘点Github上那些优秀的PHP项目
工欲善其事必先利其器,作为一个开发者,了解并使用前人造好的轮子能让我们的开发事半功倍,在这里老宅整理了几个Github上有趣的php项目与大家分享. swoole Github仓库名称:swoole/ ...
# 工欲善其事必先利其器，让你的idea“飞”起来
工欲善其事必先利其器,让你的idea"飞"起来文章目录工欲善其事必先利其器,让你的idea"飞"起来前言 img 1.经典的psvm,sout: 2.控制 ...
工欲善其事必先利其器之 VirtualBox
工欲善其事必先利其器之 VirtualBox 文章目录工欲善其事必先利其器之 VirtualBox 前言一.VirtualBox 概述二.VirtualBox 功能特性三.搭建你自己的 V ...
工业工程专业C语言,工欲善其事必先利其器——工业工程课程设置及其核心专业课简介...
新朋友点上方蓝字"IE臭皮匠"快速关注公众号成立期间很多IE学子留言,说应聘时HR不知道工业工程是什么.能做什么,对此小编十分有同感.要想了解IE是什么.能做什么,首先要了解学了 ...
web前端好学吗？如何能提高CSS编写技巧提高Web前端开发效率
前端开发学习每个人都想走捷径,即想高效快速学习又想掌握当今最新的前端技术知识.其实,这样的想法是对的,找对学习方法就能达到这个效果.前端开发学习每个阶段都是非常重要的,一部分为专业知识.另一部分实战经 ...
工欲善其事必先利其器之 DockerDesktop（下）
工欲善其事必先利其器之 DockerDesktop(下) 文章目录工欲善其事必先利其器之 DockerDesktop(下) 前言一.DockerDesktop Settings 二.什么是 W ...

工欲善其事必先利其器，用Emmet提高HTML编写速度

工欲善其事必先利其器，用Emmet提高HTML编写速度相关推荐

最新文章

热门文章