安装 Emmet 也有快速生成文件头的功能啊，而且更强大啊
输入下边加粗的缩写，然后Tab，就OK了啊
http://docs.emmet.io/cheat-sheet/

html:4t

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<htmllang="${lang}">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=${charset}">
<title>Document</title>
</head>
<body>
${child}
</body>
</html>

html:4s

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<htmllang="${lang}">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=${charset}">
<title>Document</title>
</head>
<body>
${child}
</body>
</html>

html:xt

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml"xml:lang="${lang}">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=${charset}"/>
<title></title>
</head>
<body>
${child}
</body>
</html>

html:xs

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml"xml:lang="${lang}">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=${charset}"/>
<title>Document</title>
</head>
<body>
${child}
</body>
</html>

html:xxs

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml"xml:lang="${lang}">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=${charset}"/>
<title>Document</title>
</head>
<body>
${child}
</body>
</html>

html:5

<!doctype html>
<htmllang="${lang}">
<head>
<metacharset="${charset}">
<title>Document</title>
</head>
<body>
${child}
</body>
</html>

例如，输入如下内容：

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

Emmet会帮助你生成如下的代码片段：

<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>

Emmet 作为插件可以支持如下的编辑器：

  • Eclipse/Aptana
  • Sublime Text 2
  • TextMate 1.x
  • Coda 1.6 and 2.x
  • Espresso
  • Komodo Edit/IDE
  • Notepad++
  • PSPad
  • <textarea>
  • CodeMirror2

原文来自：http://blog.sina.com.cn/s/blog_711c3a9e0101jqep.html

非常强大的前端插件：emmet的更多相关文章

  1. ATOM基础教程一使用前端插件emmet(16)

    emmet简介 http://blog.csdn.net/zsl10/article/details/51956791 emmet的前身是Zen coding,从事Web前端开发的工程师对该插件并不陌 ...

  2. 前端插件Emmet

    Sublime text安装 步骤一:首先你需要为sublime text安装Package Control组件: 按Ctrl+`调出sublime text的console 粘贴以下代码到底部命令行 ...

  3. 前端html、CSS快速编写代码插件-Emmet使用方法技巧详解

    前端html.CSS快速编写代码插件-Emmet使用方法技巧详解   Emmet的前身是大名鼎鼎的Zen coding,如果你从事Web前端开发的话,对该插件一定不会陌生.它使用仿CSS选择器的语法来 ...

  4. sublime text3 前端插件介绍

    Emmet插件 Emmet插件可以说是使用Sublime Text进行前端开发必不可少的插件 它让编写HTML代码变得极其简单高效 基本用法:输入标签简写形式,然后按Tab键 关于Emmet的更多介绍 ...

  5. Web 前端利器Emmet 的HTML用法总结

    在tutsplus那里看到一篇文章介绍Emmet 的用法,形象的gif图片一目了然,本来想翻译过来的(虽然翻译用法倒不是很难),但搜索发现已经有国人翻译过了,遂直接拿来转载在这里. Emmet 简介 ...

  6. VScode前端插件推荐

    工欲善其事,必先利其器,安利一波前端插件. Chinese (Simplified) Language Pack for Visual Studio CodeVScode汉化插件 Beautify代码 ...

  7. sublime插件emmet的配置、使用及快捷键Ctrl+E修改成Tab键操作

    一.emmet在sublime中的配置与使用: 1.点击sublime text 3的图标,打开编辑器: 2.按键“ctrl+shift+p”,或者单击菜单->工具->命令面板: 3.打开 ...

  8. 前端插件之Bootstrap Dual Listbox使用

    工欲善其事,必先利其器 对于很多非专业前端开发来说写页面是非常痛苦的,借助框架或插件往往能够达到事半功倍的效果,本系列文章会介绍我在运维系统开发过程中用到的那些顺手的前端插件,如果你是想写XX管理系统 ...

  9. 前端插件之Datatables使用--下篇

    工欲善其事,必先利其器 本系列文章介绍我在运维系统开发过程中用到的那些顺手的前端插件,上一篇文章介绍了Datatables插件的基本使用,这一篇文章作为上一篇的延续,会介绍Databases的一些高级 ...

随机推荐

  1. CSS3 (一)

    属性选择器 1. E[attr^="value"]:指定了属性名,并且有属性值,属性值是以value开头的: .wrap a[href^="http://"]{ ...

  2. boogo08---中间件

    package main //中间件1:只允许特定host请求过来 import ( "fmt" "net/http" ) //SingleHost是一个中间件 ...

  3. html5--3.2 input元素(2)

    html5--3.2 input元素(2) 学习要点 input元素及其属性 input元素 用来设置表单中的内容项,比如输入内容的文本框,按钮等 不仅可以布置在表单中,也可以在表单之外的元素使用 i ...

  4. 第一次通过AVD Manager创建了一个虚拟设备，但是在Android Studio运行程序时却无设备可选

    第一次通过AVD Manager创建了一个虚拟设备,但是在Android Studio运行程序时却无设备可选 原因是adb.exe未运行起来 至于adb.exe未正常运行起来的原因多半是5037端口被 ...

  5. macbook pro上安装虚拟机

    第一步:下载MacHunter的app应用商店 第二步:在MacHunter内下载Parallels Desktop虚拟机 第三步:如果在这个商店下载不下来,在网络资源上直接下载Parallels D ...

  6. Spring中Bean获取IOC容器服务的方法

    Spring 依赖注入可以让所有的Bean对其IOC容器的存在是没有意识的,甚至可以将容器换成其它的.但实际开发中如果某个Bean对象要用到Spring 容器本身的功能资源,需要意识到IOC容器的存在 ...

  7. 单片机知识是Linux驱动开发的基础之一

    这是arm裸机1期加强版第1课第2节课程的wiki文字版. 为什么没前途也要学习单片机? 因为它是个很好的入口. 学习单片机可以让我们抛开复杂的软件结构,先掌握硬件操作,如:看原理图.芯片手册.写程序 ...

  8. vue 基本知识整理

    1 每个Vue.js应用都是通过构造函数Vue创建一个Vue的根实例 2 可以扩展Vue构造器,从而使用预定义选项创建可复用的组件构造器 所有的Vue.js组件其实都是被扩展的Vue实例 每一个VUE ...

  9. 用 SDL2 加载PNG平铺背景并显示前景

    上一篇中加载的是BMP,这次可以引用 SDL2_image.lib,加载更多格式的图像. LoadImage函数做了改动,区别在于不用将surface转换成texture了. 环境:SDL2 + VC ...

  10. 1-1 课程导学 & 1-2 项目需求分析，技术分解.

    1-1 课程导学 1-2 项目需求分析,技术分解. 要有一定的dart基础,了解安卓和ios的一些普通的开发