sublime text 2 新建文件快速生成HTML头部信息和炫酷的代码补全

一. 预备 : 安装emmet插件(previously known as Zen Coding)


(1) 方法一: Package Control 法(插件: emmet)


(2) 方法二: 手动安装法:

git下emmet plugin, 打开sublime -> preferences -> browse packages, 将下载的zip文件解压放到packages文件夹下, 重启sublime。


(3) 删除已安装插件: 按Ctrl + shift + p ,然后remove回车, 再输入要删除的插件名。


二.   开始体验:输入以下简写, 按tab键:

2.1  html:5

 1 doctype html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Documenttitle>
 6 head>
 7 <body>
 8     
 9 body>
10 html>


2.2 html:4t
 1 DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 2 <html lang="en">
 3 <head>
 4     <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
 5     <title>Documenttitle>
 6 head>
 7 <body>
 8     
 9 body>
10 html>


2.3 html:4s
 1 DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
 2 <html lang="en">
 3 <head>
 4     <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
 5     <title>Documenttitle>
 6 head>
 7 <body>
 8     
 9 body>
10 html>


2.4 html:xxs
 1 DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
 3 <head>
 4     <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
 5     <title>Documenttitle>
 6 head>
 7 <body>
 8     
 9 body>
10 html>


2.5 ul#nav>li.item$*4>a{item$}
(详细的可以参考:http://docs.emmet.io/cheat-sheet/)
1     <ul id="nav">
2         <li class="itemS"><a href="">Item 1a>li>
3         <li class="itemS"><a href="">Item 2a>li>
4         <li class="itemS"><a href="">Item 3a>li>
5         <li class="itemS"><a href="">Item 4a>li>
6     ul>

你可能感兴趣的:(sublime)