Sublime Text 2的Emmet插件安装

最新推荐文章于 2018-01-17 17:01:31 发布

Front

最新推荐文章于 2018-01-17 17:01:31 发布

阅读量175

点赞数

分类专栏： Web前端文章标签： Sublime Text 2 Emmet

Web前端专栏收录该内容

10 篇文章 0 订阅

订阅专栏

我的github http://github.com/wangqianfront

你想敲个“a”就生成一个链接标签吗？Emmet就是干这个的（原名叫Zen Coding），Sublime Text 2配上这个插件，写HTML就可以做到“键码如飞”了。

Ctrl+Shift+P打开“Command Palette...”
输入“install”，打开“Install Package”
选择“Emmet”插件，安装之，看左下角状态栏的安装信息。如果安装不成功，可以去这里下载Emmet插件手动安装，通过“Browse Packages...”菜单项打开包目录，把Emmet插件安装包解压到此即可
重启Sublime，注意Emmet会安装PyV8，需要一定时间，见到PyV8错误提示稍安勿躁，需等待一小会儿。状态栏会有相应提示。如果安装失败，可以手动安装，手动安装参见这里

接下来就可以试试Emmet的威力了：

建一个HTML文件：

输入html:5，按Tab或Ctrl+E键，看看发生了什么；
输入a，同样按Tab或Ctrl+E键，看看发生了什么；
输入div+p+bq......

咋样？很爽吧？^_^
部分快捷方式参考这里
具体的使用请参考：这里、这里！

Emmet 也有快速生成文件头的功能啊，而且更强大啊。输入下边加粗的缩写，然后Tab，就OK了啊

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>

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

评论

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。