Sublime Text 常用快捷键
HTML5学堂：在前一篇文章当中我们提到了Sublime的汉化与插件Emmet的安装及配置方法。在本文当中，我们将介绍Sublime Text中快速书写代码的方法以及常用快捷键。
如何在Sublime Text中快速书写html代码
使用此方法进行代码书写时，需要有一个前提——安装Emmet插件（如果还没有安装，可以点击此处——>《Sublime Text2 插件Emmet 安装与配置方法》查看基本的安装和配置方法）
在安装完成插件之后，想完成快速书写代码，还有三个必要条件
1、熟练掌握CSS选择器
如#con表示的是选取id名为con的元素；.wrap表示的是选取类名为wrap的元素，>号表示的是子代选择器，+表示的是毗邻选择器，[]则表示属性选择器。
之所以需要熟练掌握选择器的书写方式，主要是由于在快速书写html代码是使用的方式和CSS选择器如出一辙。
2、其他基础语法
在书写时还会使用到如下几种符号：
{}在该符号当中，用于输入标签的内容
$表示自动编号
()*8表示将小括号中的内容重复8次
3、书写前的构思
这一点应该说是最重要的。在书写代码前，一定是需要缜密构思的，考虑扩展性，考虑语义性（SEO），考虑标签嵌套的规则，考虑用户交互（是否需要有点击，增加a标签），在充分考虑之后再动手。
标准语法
上面三个必备条件之后，可能大家对这种书写方法的理解还不足够直观，我们再来看一下基本语法：
E 元素名称(div, p);
E#id 使用id的元素(div#content, p#intro, span#error);
E.class 使用类的元素(div.header, p.error.critial). 你也可以联合使用class和idID: div#content.column.width;
E>N 子代元素(div>p, div#footer>p>span);
E+N 兄弟元素(h1+p, div#header+div#content+div#footer);
E*N 元素倍增(ul#nav>li*5);
E$*N 条目编号 (ul#nav>li.item-$*5);
快捷书写的实例
说完语法之后，我们一起来看一下实例
-
<!doctype html>
-
<html>
-
<head>
-
<meta charset="UTF-8">
-
<title>HTML5学堂 - H5course</title>
-
<link rel="stylesheet" href="../css/reset.css">
-
</head>
-
<body>
-
.wrap>(dl>(dt>a[title=HTML5学堂]>img[src=../images/h5course_$.jpg][alt=HTML5学堂-$])+dd>(h2>a{HTML5学堂 - 文字标题$$})+p{文章$$的相关描述信息})*4
-
</body>
-
</html>
在书写完一大长串语法之后，按下tab键，生成的内容如下：
-
<!doctype html>
-
<html>
-
<head>
-
<meta charset="UTF-8">
-
<title>HTML5学堂 - H5course</title>
-
<link rel="stylesheet" href="../css/reset.css">
-
</head>
-
<body>
-
<div class="wrap">
-
<dl>
-
<dt><a href="" title="HTML5学堂"><img src="../images/h5course_1.jpg" alt="HTML5学堂-1" title=""></a></dt>
-
<dd>
-
<h2><a href="" title="">HTML5学堂 - 文字标题01</a></h2>
-
<p>文章01的相关描述信息</p>
-
</dd>
-
</dl>
-
<dl>
-
<dt><a href="" title="HTML5学堂"><img src="../images/h5course_2.jpg" alt="HTML5学堂-2" title=""></a></dt>
-
<dd>
-
<h2><a href="" title="">HTML5学堂 - 文字标题02</a></h2>
-
<p>文章02的相关描述信息</p>
-
</dd>
-
</dl>
-
<dl>
-
<dt><a href="" title="HTML5学堂"><img src="../images/h5course_3.jpg" alt="HTML5学堂-3" title=""></a></dt>
-
<dd>
-
<h2><a href="" title="">HTML5学堂 - 文字标题03</a></h2>
-
<p>文章03的相关描述信息</p>
-
</dd>
-
</dl>
-
<dl>
-
<dt><a href="" title="HTML5学堂"><img src="../images/h5course_4.jpg" alt="HTML5学堂-4" title=""></a></dt>
-
<dd>
-
<h2><a href="" title="">HTML5学堂 - 文字标题04</a></h2>
-
<p>文章04的相关描述信息</p>
-
</dd>
-
</dl>
-
</div>
-
</body>
-
</html>
多动手尝试一下吧，写着写着基本上就懂了~~~
关于快捷键
刘国利：实话说，我自己比较偏爱的快捷键并不是太多，因此还不能够完全脱离鼠标进行代码编写。但是不得不说，快捷键的熟练掌握的确可以提升不少的代码速度。在此罗列一下自己常用的快捷键吧~
主要快捷键：
Ctrl+L：选择当前行，连续按下，继续选择
Ctrl+H：替换
Ctrl+F：查找
Ctrl+Shift+<：上一个编辑点
Ctrl+Shift+>：下一个编辑点
Ctrl+Shift+[：折叠代码
Ctrl+Shift+]：打开折叠
Ctrl+Shift+上/下：移动代码行位置
Ctrl+G：定位行号
Tab：缩进一次
Shift+Tab：反向缩进一次
Ctrl+/：注释/解开注释
Ctrl+z：撤销操作
Alt+数字：对应第几个选项卡文件（即Alt+1，就是切换到第一个）
欢迎沟通交流~HTML5学堂
极客编程技术分享
