下载:官网下载(根据系统下载)

安装:按步骤安装即可

注意:当前稳定版本为2,但3的功能有提升;Mac和Windows下的快捷键不同

优点:启动速度快,界面简洁,可以直接打开图片。

1 菜单栏主要功能介绍 

  Sublime Text 编辑器基础功能:
 
  File菜单:对文件的操作功能
            New File (文件):打开新文件(ctrl + N)
 
  Edit(编辑):对文件进行操作
            行列:复制一行:ctrl + shift + D
             删除一行:ctrl + shift + K
            注释:行注释:ctrl + /
                      段注释:ctrl + shift + / 
 
  Selection(选择):选择代码
              选择行:ctrl + L
              选择词:ctrl + D(可重复命令进行多次选择)
 
  Find(查找)
        查找:ctrl + F
        替换:ctrl + H
    
  View(查看):对编辑器的界面配置
             侧边栏:显示/隐藏  ctrl + K  ctrl + B 
 
  Goto(转到):包涵GotoAnything特性,在文件内,或者文件之间,进行快速导航
            :20  快速跳转到20行
 
  Tools(工具):命令模式
              命令面板:ctrl + shift + P
 
  Project(项目):很少用
 
  Preference(首选项):个性化定制
                  设置-默认:编辑器配置文件
                  设置-用户:个人设置
                  主题方案--color scheme:颜色配置方案选择
 
2 Goto Anything
 
  Goto Anything :ctrl + P
 
  搜索文件名:index.html
  目录结构:view/index
  自动匹配:view/ indexhtml 
 
  符号功能:在文件内部迅速导航
  CSS文件中:@:CSS选择器(例如:@body)
  Javascript文件中:@:函数
  更改语法模式:ctrl + shift + P
 
3 多行游标
 
  1、替换:ctrl + H
  2、ctrl + D
  3、添加新行
       ctrl + D -- ctrl + K  ctrl + D 跳过--多行输入
  4、ctrl + D--ctrl + F3  对选中的词,进行全选
  5、拆行的方式:ctrl + A --ctrl + shift + L
  6、鼠标拖拽:选中后拖动即可产生多行游标
 
4 命令模式
 
  命令模式:ctrl + shift +P
  可以在这里切换语法模式
 
  隐藏或显示minimap(不需要浪费脑细胞去记忆快捷键,用这个也可以。)
 
5 学以致用--综合技巧运用
 
  1、ctrl + N
  2、ctrl +shift + p :sshtml
  3、<html>(alt + .  闭合标签)
        Eemmet插件:! ctrl + E
  4、跳转到body:ctrl +shift + p  #body (#用于匹配页面)
  5、ctrl + Enter 在光标下方添加新行
  6、ul>.item$10  ctrl + E
  7、缩进 ctrl + } (增加缩进)反之减少缩进
  8、选择标记 alt + F3 多行游标
  9、h2{} 输出内容
  10、拷贝代码自动缩进:ctrl + shift +V
 
6 Emmet下 快速生成文件头的功能
 
输入下边加粗的缩写,然后Tab 

html:4t

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

html:4s

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

html:xt

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="${lang}">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html;charset=${charset}" />
  5. <title></title>
  6. </head>
  7. <body>
  8. ${child}
  9. </body>
  10. </html>

html:xs

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="${lang}">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html;charset=${charset}" />
  5. <title>Document</title>
  6. </head>
  7. <body>
  8. ${child}
  9. </body>
  10. </html>

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="${lang}">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html;charset=${charset}" />
  5. <title>Document</title>
  6. </head>
  7. <body>
  8. ${child}
  9. </body>
  10. </html>

html:5

  1. <!doctype html>
  2. <html lang="${lang}">
  3. <head>
  4. <meta charset="${charset}">
  5. <title>Document</title>
  6. </head>
  7. <body>
  8. ${child}
  9. </body>
  10. </html>
 
7 Sublime Text快捷键
 
Sublime Text快捷键:
  Ctrl+Shift+P:打开命令面板
  Ctrl+P:搜索项目中的文件
  Ctrl+G:跳转到第几行
  Ctrl+W:关闭当前打开文件
  Ctrl+Shift+W:关闭所有打开文件
  Ctrl+Shift+V:粘贴并格式化
  Ctrl+D:选择单词,重复可增加选择下一个相同的单词
  Ctrl+L:选择行,重复可依次增加选择下一行
  Ctrl+Shift+L:选择多行
  Ctrl+Shift+Enter:在当前行前插入新行
  Ctrl+M:跳转到对应括号
  Ctrl+U:软撤销,撤销光标位置
  Ctrl+J:选择标签内容
  Ctrl+F:查找内容
  Ctrl+Shift+F:查找并替换
  Ctrl+H:替换
  Ctrl+R:前往 method
  Ctrl+N:新建窗口
  Ctrl+K+B:开关侧栏
  Ctrl+Shift+M:选中当前括号内容,重复可选着括号本身
  Ctrl+F2:设置/删除标记
  Ctrl+/:注释当前行
  Ctrl+Shift+/:当前位置插入注释
  Ctrl+Alt+/:块注释,并Focus到首行,写注释说明用的
  F11:全屏
  Shift+F11:全屏免打扰模式,只编辑当前文件
  Alt+F3:选择所有相同的词
  Alt+Shift+数字:分屏显示
  Alt+数字:切换打开第N个文件
  Ctrl+Tab:切换tab
  Ctrl+Shift+上下键,可替换行
 

主要快捷键列表

  Ctrl+L 选择整行(按住-继续选择下行)

  Ctrl+KK 从光标处删除至行尾

  Ctrl+Shift+K 删除整行

  Ctrl+Shift+D 复制光标所在整行,插入在该行之前

  Ctrl+J 合并行(已选择需要合并的多行时)

  Ctrl+KU 改为大写

  Ctrl+KL 改为小写

  Ctrl+D 选词 (按住-继续选择下个相同的字符串)

  Ctrl+M 光标移动至括号内开始或结束的位置

  Ctrl+Shift+M 选择括号内的内容(按住-继续选择父括号)

  Ctrl+/ 注释整行(如已选择内容,同“Ctrl+Shift+/”效果)

  Ctrl+Shift+/ 注释已选择内容

  Ctrl+Z 撤销

  Ctrl+Y 恢复撤销

  Ctrl+M 光标跳至对应的括号

  Alt+. 闭合当前标签

  Ctrl+Shift+A 选择光标位置父标签对儿

  Ctrl+Shift+[ 折叠代码

  Ctrl+Shift+] 展开代码

  Ctrl+KT 折叠属性

  Ctrl+K0 展开所有

  Ctrl+U 软撤销

  Ctrl+T 词互换

  Tab 缩进 自动完成

  Shift+Tab 去除缩进

  Ctrl+Shift+↑ 与上行互换

  Ctrl+Shift+↓ 与下行互换

  Ctrl+K Backspace 从光标处删除至行首

  Ctrl+Enter 光标后插入行

  Ctrl+Shift+Enter 光标前插入行

  Ctrl+F2 设置书签

  F2 下一个书签

  Shift+F2 上一个书签

 
 
 

一、HTML和CSS基础--开发工具--Sublime前端开发工具技巧介绍的更多相关文章

  1. sublime 前端开发工具

    http://code.kpman.cc/2014/10/14/sublime-text-3-mac-%E6%8C%87%E5%8D%97/ gif 屏幕录制:http://recordit.co/ ...

  2. 前端开发利器 Sublime Text 3 使用技巧和总结笔记

    这篇文章是本人在使用该工具进行前端开发的自我总结,思路也许不是很清楚,不过还是希望对读者的你有所帮助,千万别把这边文章收藏起来发霉哦,无论背多少次快捷键,还不及自己多实际操作几次. 目前官方版正式版 ...

  3. iOS客户端开发与Web前端开发

    转载自:http://blog.cnbang.net/tech/1813/不知不觉做iOS客户端开发已经半年多了,了解到iOS客户端开发与Web前端开发的一些异同,写一下. 版本升级.用户角度上看,客 ...

  4. 前端进阶试题css(来自js高级前端开发---豪情)既然被发现了HOHO,那我就置顶了嘿嘿!觉得自己技术OK的可以把这套题目做完哦,然后加入高级前端的社区咯

    http://www.cnblogs.com/jikey/p/4426105.html js高级前端开发加群方法(此群很难进,里面纯技术,严禁广告,水群) 完整题目做完发邮箱(jikeytang@16 ...

  5. 工具-VS2015前端开发工具简介

    每个涉及的工具库都给出了入门介绍.基本概念,以及在VS和ASP.NET中的用法.这个白皮书完全就是一个非常难得的前端开发入门手册. 具体涉及到的工具库有: 流行的JS任务执行器:Grunt和Gulp. ...

  6. 移动前端开发和 Web 前端开发的区别

    http://www.itcast.cn/news/20180125/16033584753.shtml 1,普通PC端开发与移动端开发区别. 先说背景,我大言不惭的说一下,我pc端的前端开发干了有快 ...

  7. 移动前端开发和 Web 前端开发的区别是什么

    可以分成两部分理解1.服务器端开发,也叫后台开发,这是唯一的,对应不同的平台,他负责数据的分发与存储,和一些逻辑的处理.逻辑处理的多少由业务的复杂程度决定.服务端相对独立,与平台没啥关系. 2..1中 ...

  8. 【web开发】web前端开发常用技术总结归纳

    技术选型规范规范 • Vue版本:2.x • 前端路由:vue-route • 异步请求:Axios • 全局状态管理:VueX • css预处理器:sass/less • h5项目移动端适配规则:使 ...

  9. sublime前端开发工具常用技巧

    ctrl+N//新建文件夹ctrl+shift+p//打开命令行!,ctrl+E//快速生成html模板ctrl+E//自动补齐ctrl+P(#@)//goto 任何地方,其中#查找元素,@查找样式c ...

随机推荐

  1. excel公式处理成绩表

    一共有2个需求: 1.平均分:所有每个人的成绩/29;及格率:60分的/29;优秀率:80分/29 2.对总分进行排序,并在另一列中生成排名 平均分:=(c3+c4+.......c31)/29 及格 ...

  2. Java Observer 观察者

    http://www.cnblogs.com/jaward/p/3277619.html 1.API 被观察者 java.util.Observable; public class Observabl ...

  3. Java初学(二)

    一.数据类型 在定义Long或者Float类型变量的时候,要加L或f(大小写无关,只是便于识别,建议不要小写L) 整数默认是int,浮点数默认是double 二.java字符 java语言采用的是Un ...

  4. 初学structs2,表单验证

    一.简单表单验证示例 structs.xml配置 <struts> <package name="validate" namespace="/valid ...

  5. Linux下使用popen()执行shell命令

    转载 http://www.cnblogs.com/caosiyang/archive/2012/06/25/2560976.html 简单说一下popen()函数 函数定义 #include < ...

  6. golang社工库数据扫描程序

    https://github.com/xiaojiong/scanfile 演示站点: http://www.weigongkai.com/   7G数据 2s完成扫描 package scanfil ...

  7. CSS+JS实现兼容性很好的无限级下拉菜单

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DT ...

  8. Strust的基础情况

    Struts的优点: 1.实现MVC模式,结构清晰 2.丰富的标签(tag) 3.通过配置文件页面导航,便于后期维护 4.与Servlet API松耦合,便于测试 Structs2=Structs1的 ...

  9. Component creation must be done on Event Dispatch Thread错误解决方法

    在用java swing 做例子,给页面设置皮肤样式的时候出现了这个错误: org.jvnet.substance.api.UiThreadingViolationException: Compone ...

  10. AndroidStudio-引用jar包及so文件

    一.引用jar文件    1.将jar文件复制.粘贴到app的libs目录中:    2.右键点击jar文件,并点击弹出菜单中的"Add As Library",将jar文件作为类 ...