HTML5学堂-码匠 HTML5学堂

您当前位于:工具类文件推荐 ——> Sublime Text常用快捷键详解

Sublime Text常用快捷键详解

2015/08/07 13:28:19 | 作者:HTML5学堂(码匠) | 分类:工具类文件推荐 | 关键词:sublime,编辑器,插件,快捷键

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);

快捷书写的实例

说完语法之后,我们一起来看一下实例

  1. <!doctype html>
  2. <html>
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>HTML5学堂 - H5course</title>
  6.     <link rel="stylesheet" href="../css/reset.css">
  7. </head>
  8. <body>
  9.     .wrap>(dl>(dt>a[title=HTML5学堂]>img[src=../images/h5course_$.jpg][alt=HTML5学堂-$])+dd>(h2>a{HTML5学堂 - 文字标题$$})+p{文章$$的相关描述信息})*4
  10. </body>
  11. </html>

在书写完一大长串语法之后,按下tab键,生成的内容如下:

  1. <!doctype html>
  2. <html>
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>HTML5学堂 - H5course</title>
  6.     <link rel="stylesheet" href="../css/reset.css">
  7. </head>
  8. <body>
  9.     <div class="wrap">
  10.         <dl>
  11.             <dt><a href="" title="HTML5学堂"><img src="../images/h5course_1.jpg" alt="HTML5学堂-1" title=""></a></dt>
  12.             <dd>
  13.                 <h2><a href="" title="">HTML5学堂 - 文字标题01</a></h2>
  14.                 <p>文章01的相关描述信息</p>
  15.             </dd>
  16.         </dl>
  17.         <dl>
  18.             <dt><a href="" title="HTML5学堂"><img src="../images/h5course_2.jpg" alt="HTML5学堂-2" title=""></a></dt>
  19.             <dd>
  20.                 <h2><a href="" title="">HTML5学堂 - 文字标题02</a></h2>
  21.                 <p>文章02的相关描述信息</p>
  22.             </dd>
  23.         </dl>
  24.         <dl>
  25.             <dt><a href="" title="HTML5学堂"><img src="../images/h5course_3.jpg" alt="HTML5学堂-3" title=""></a></dt>
  26.             <dd>
  27.                 <h2><a href="" title="">HTML5学堂 - 文字标题03</a></h2>
  28.                 <p>文章03的相关描述信息</p>
  29.             </dd>
  30.         </dl>
  31.         <dl>
  32.             <dt><a href="" title="HTML5学堂"><img src="../images/h5course_4.jpg" alt="HTML5学堂-4" title=""></a></dt>
  33.             <dd>
  34.                 <h2><a href="" title="">HTML5学堂 - 文字标题04</a></h2>
  35.                 <p>文章04的相关描述信息</p>
  36.             </dd>
  37.         </dl>
  38.     </div>
  39. </body>
  40. </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学堂

微信公众号,HTML5学堂,码匠,原创文章,WEB前端,技术分享

HTML5学堂

原创前端技术分享

HTML5学堂,HTML5,WEB,前端,视频课程,技术视频,学习视频,面试,JS

原创视频课程

用心打造精品课程

微信小程序,决胜前端,面试题,面试题集合,前端,HTML5,真题

小程序-决胜前端

前端面试题宝库

原创书籍,学习书籍,书籍推荐,HTML5布局之路,HTML5,WEB前端

HTML5布局之路

非传统模式讲解前端