安装 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. hdoj 1875 畅通project再续【最小生成树 kruskal &amp;&amp; prim】

    畅通project再续 Problem Description 相信大家都听说一个"百岛湖"的地方吧,百岛湖的居民生活在不同的小岛中,当他们想去其它的小岛时都要通过划小船来实现. ...

  2. oracle中去掉文本中的换行符、回车符、制表符

    一.特殊符号ascii定义 制表符 chr(9)  换行符 chr(10) 回车符 chr(13) UPDATE tc_car_order set USE_REASON =  REPLACE('USE ...

  3. oracle：程序后台提示Io异常: The Network Adapter could not establish the connection)

    今天要用tomcat部署一个系统,windows环境下,oracle和程序在一台机器上. 在配置jndi时,直接写成 jdbc:oracle:thin:@127.0.0.1:1521:orcl.启动程 ...

  4. How to run Media SDK samples on Skylake【转载】

    In the last few days, we have seen lot of concern for using Intel® Media 2016 on 6th generation Inte ...

  5. hdu-2066 一个人的旅行(最短路spfa)

    题目链接: 一个人的旅行 Time Limit: 1000/1000 MS (Java/Others)     Memory Limit: 32768/32768 K (Java/Others) Pr ...

  6. 理解Objective-C Runtime（四）Method Swizzling

    Objective-C对象收到消息之后,究竟会调用何种方法需要在运行期间才能解析出来.那你也许会问:与给定的选择子名称相应的方法是不是也可以在runtime改变呢?没错,就是这样.若能善用此特性,则可 ...

  7. 自定义custom Tab Bar

    iOS提供的Tab Bar比较简单,我们常常有些别样的需求,此时往往需要自行自定义Tab Bar,如下图所示:                           如图所示,需要在某个页面中添加一个类 ...

  8. 尚观Linux最佳入门高清视频教程033/133/253

    [高清]Linux 最佳入门ULE112- RHCE033部分高清视频教程[尚观原创] 视频简介:高清RHCE033部分是RHCE考试中的基础部分,同时也是我们Linux入门的必 备学习资料.想学好L ...

  9. JAVA 集合JGL

    集合 Java提供了四种类型的“集合类”:Vector(矢量).BitSet(位集).Stack(堆栈)以及Hashtable(散列表).与拥有集合功能的其他语言相比,尽管这儿的数量显得相当少,但仍然 ...

  10. 【旧文章搬运】Windbg+Vmware驱动调试入门(一)---Windbg的设置

    原文发表于百度空间,2009-01-08========================================================================== Windb ...