Emmet简介

Emmet是一个支持大部分流行文本编辑器的插件,能够极大得提高编写HTML和CSS的工作效率。

官网:http://emmet.io/

在Sublime Text 3中安装

前提Sublime Text 3需要先安装Package Control插件。

按下“shift + ctrl + p”快捷键,输入“pci”选择“Package Control:Install Package”回车,然后输入“emmet”即可搜索到这个插件,选择并回车即可自动安装。

Emmet使用

打开 HTML 或 CSS 文件->根据语法编写精简指令->TAB 键自动生成完整代码

使用示例

新建一个html文件,然后输入

ul#nav>li.item$*4>a{Item $}

使用tab键激活,即可自动生成:

	<ul id="nav">
<li class="item1"><a href="">Item 1</a></li>
<li class="item2"><a href="">Item 2</a></li>
<li class="item3"><a href="">Item 3</a></li>
<li class="item4"><a href="">Item 4</a></li>
</ul>

学习资源

  1. http://www.iteye.com/news/27580
  2. http://docs.emmet.io/
  3. http://www.w3cplus.com/tools/using-emmet-speed-front-end-web-development.html

sublime Text 3 安装emmet的更多相关文章

  1. Sublime text 3安装Emmet

    这是Sublime text 3不是2的版本,两者的安装还是有区别的,下面的方法是我感觉比较简单的,其他的要命令什么的感觉太复杂了,经测试是OK的. 先关闭Sublime text 3: 第一步:下载 ...

  2. Sublime Text 2 安装emmet插件和常用快捷键

    一.先安装package control1.按Ctrl+`调出console,输入以下命令然后回车 import urllib2,os; pf='Package Control.sublime-pac ...

  3. sublime text 2 安装emmet插件

    一.添加插件之前先 下载Package Control 按 Ctrl+`(就是~这个键) 复制下面的代码 确认 重新启动sublime text2 import urllib2,os;pf='Pack ...

  4. Sublime Text 3 安装 Emmet 插件

    首先安装 Package Control 1.通过快捷键 ctrl+` 或者 View > Show Console 菜单打开控制台 2.粘贴以下代码后回车安装 import  urllib.r ...

  5. Sublime Text 3安装emmet(ZenCoding)

    1.安装 Package Ctrol: 使用 ctrl + - 打开控制台,输入以下代码 import urllib.request,os; pf = 'Package Control.sublime ...

  6. sublime Text 的安装、破解、汉化、使用

    Sublime Text 3安装与使用   本文是Sublime Text 全程指引 by Lucida (http://www.cnblogs.com/figure9/p/sublime-text- ...

  7. Sublime Text 2安装汉化破解、插件包安装教程

    原文地址: Sublime Text 2安装汉化破解.插件包安装教程_百度经验 http://jingyan.baidu.com/article/ff4116259b057c12e48237b8.ht ...

  8. 【工具篇】Sublime Text 2 安装汉化破解、插件包安装教程详解

    Sublime Text概述: Sublime Text是一个代码编辑器,也是HTML和散文先进的文本编辑器. 漂亮的用户界面和非凡的功能,例如:迷你地图,多选择,Python插件,代码段等等. 完全 ...

  9. Sublime Text 3安装Package Control快速建立html5和xhtml文档

    Sublime Text 3安装Package Control快速建立html5和xhtml文档 先关闭Sublime text 3:第1步:下载sublime_package_control-mas ...

随机推荐

  1. 关于JSP中<body onload="fun()">body标签中onload中函数不执行问题

    问题描述: 在一个页面中,我们经常会初始化一下数据,而且会在指定的DOM元素初始化数据,这时候我们就会使用<body onload="fun()">来加载我们的数据.o ...

  2. js 也来 - 【拉勾专场】抛弃简历!让代码说话!

    前些日子谢亮兄弟丢了一个链接在群里,我当时看了下,觉得这种装逼题目没什么意思,因为每种语言都有不同的实现方法,你怎么能说你的方法一定比其他语言的好,所以要好的思路 + 好的语言特性运用才能让代码升华. ...

  3. phpcms 添加memcache支持

    1,修改caches/configs/cache.php <?php return array ( 'file1' => array ( 'type' => 'file', 'deb ...

  4. XF custom render 各平台实现类

    目前的XF还是非常简陋的,所以存在大量的自定义工作.一般情况下我们只是要需要派生原生的XF控件,然后在各平台下修改其呈现方法. 所以了解每个XF控件在不同平台上呈现使用的控件类是有所必须要的.以下别人 ...

  5. ASP.NET 显示项目之外的图片

    1.<asp:Image>标签的使用Loginer.images是图片的路径 this.images.ImageUrl = "showImg.aspx?imgFile=" ...

  6. eclipse常用快捷键

    1. ctrl+shift+r:打开资源 这可能是所有快捷键组合中最省时间的了.这组快捷键可以让你打开你的工作区中任何一个文件,而你只需要按下文件名或mask名中的前几个字母,比如applic*.xm ...

  7. C# socket send方法

    转  http://msdn.microsoft.com/zh-cn/library/d318fkch(v=vs.80).aspx

  8. Java内部类与外部类的那些事

    昨天去笔试的时候遇到了Java的内部类的创建方式与访问权限的问题,我不懂,没写,故今天起来特意去试验一下,就有了这篇总结性的文章. Java中的内部类又分为非静态内部类(匿名内部类也是非静态的内部类) ...

  9. 渐进式框架、自底向上增量开发的vue

    官网对vue.js的介绍是这样的: 一套构建用户界面的 渐进式框架.与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计. 那么到底什么是渐进式框架.自底向上增量开发又是什么呢? 其实我觉得这 ...

  10. 剑指Offer 数组中只出现一次的数字

    题目描述 一个整型数组里除了两个数字之外,其他的数字都出现了两次.请写程序找出这两个只出现一次的数字.   思路: 因为有2个数字只出现了一次,而其他的数字都是2次,可以通过异或运算,得到最后这2个只 ...