安装 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. Hadoop中序列化与Writable接口

    学习笔记,整理自<Hadoop权威指南 第3版> 一.序列化 序列化:序列化是将 内存 中的结构化数据 转化为 能在网络上传输 或 磁盘中进行永久保存的二进制流的过程:反序列化:序列化的逆 ...

  2. 使用Windows Debugger调试托管代码----引用自官方帮助文档

    以下文字引用在Windbg的帮助文档.觉得对初次调试托管代码,非常有用,故粘贴至此. ========================================================= ...

  3. JRE System Library 与Java EE Libraries的区别

    JRE System Library是只要做java开发都需要的完整的.标准的库.  Java EE5 Libraries只是java三个方向中做java EE所需要的库.如果做Web方面的开发的话就 ...

  4. UIButton常见属性和方法

    一.创建,两种方法: 1. 常规的 initWithFrame UIButton *btn1 = [[UIButton alloc]initWithFrame:CGRectMake(10, 10, 8 ...

  5. Spring配置错误 No adapter for IAdvice of type

    参考:http://www.2cto.com/kf/201305/211728.html 错误十三 在配置拦截器后,运行的时候报错=> Error creating context 'sprin ...

  6. YUIDoc的使用方法小结

    一.YUIDoc概述以及安装YUIDoc是为YUI Library用来生成HTML版API文档的一系列工具集,文档的生成完全基于JavaDoc风格的代码注释规则.该工具是基于Python语言编写,并且 ...

  7. 如何在单独的窗口中打开 Excel 文件

    如何在单独的窗口中打开 Excel 文件 文章编号:087583     2012/11/1 18:45:29 故障现象: 如何在单独的窗口中打开 Excel 文件? 解决方案: 比较安全的方法就是直 ...

  8. VMware Workstation安装centos 6.5详细步骤

    转自“http://blog.51cto.com/12496630/2058386” 22.选择分区了,centos新版中使用lvm来分区,我不用过分去计算分区大小,这个模式可以允许用户以后动态调整分 ...

  9. Exception in thread "main" org.hibernate.MappingException: Unknown entity: com.mao.PersonSet

    转自:https://blog.csdn.net/vipmao/article/details/51334743

  10. C++ 动态多维数组的申请与释放

    今天在实验室的项目中遇到了一个问题,直接上代码: void ViBe::init(Mat img) { imgcol = img.cols; imgrow = img.rows; // 动态分配三维数 ...