notepad++已成往事，文本编辑器选这些

于npp作者的一系列无脑言论，使得作为一个极易上手、使用简便的文本编辑器的npp现在也是越来越不受待见。那么，我们今天就来扒一扒，除了npp，还有哪些同样简单便捷、启动快、易上手的文本编辑器。

第五名——SciTE

SciTE，一个支持Windows和Linux平台使用的开源的文本编辑器，开始时只是为了演示Scintilla强大功能而开发的。此后它成为一个功能全面的编辑器，windows下安装包不到2M。你可以通过用户自定义的配置文件来扩展默认功能。

一方面，这个软件入门简单。基本文本编辑器的功能它都具备：多格式（HTML、RTF、PDF、XML）文件导出，文本搜索替换、几十种语法高亮显示等。

另一方面，这个软件配置复杂。因为它默认情况下很多功能还没有展现，需要我们手动设置，而这个设置过程也相当复杂，如果没有正确的配置，他就会出现很多问题，比如选择中文时候出现乱码，缩进格式出错等等。

考虑到它的配置复杂且默认是英文菜单界面，所以，把它排名第五。推荐喜欢极简风的朋友使用或极客朋友挖掘、自定义配置使用。

第四名——NotePad 3

Notepad 3是一个快速、基于Scintilla的轻量级文本编辑器，同样支持语法高亮等文本编辑器普遍具备的基础功能，这点不用多说。值得一提的是，Notepad3安装后会直接替代记事本，也就是你每次创建或新打开.txt文本文档都会默认使用Notepad 3, 想想人家当初的主要目标也是替换掉 Windows 自带记事本。Notepad 3在windows下的安装包仅3M，且默认中文菜单界面，所以无论是作为常用文本编辑器，还是作为windows记事本来使用，都是比较推荐的。

第三名——Ultra Edit

UE作为一款老牌、流行的文本编辑器，默认安装后支持中文界面。不仅支持搜索替换、代码高亮等文本编辑功能，还支持ASCII/ANSI files编码的脚本。可以在对应的语法文件下进行函数和类的跳转，是不是有点智能IDE的意思了，还支持宏录制等一下进阶玩法。但是，这个软件并不是开源软件，30天的试用期后需要付费使用，安装包大概90M左右。

第二名——Sublime Text 3

在作者认为Sublime Text 3 和 UE，如果仅从功能上来看，作者认为两者各有千秋，不分伯仲，但是从安装包体积、用户使用界面，以及扩展包源丰富性而言，作者更倾向于ST3，ST3的编辑界面更加好看些。ST3支持快捷键丰富，进行工程编辑时，可以通过命令来快速进行文件跳转、类跳转、行跳转，犹如使用idea进行代码跟进一样。Sublime安装后默认为英文界面，可以通过安装插件包修改为中文界面，目前是作者使用较为频繁的一个编辑器。

第一名——VS code

世界上最好的文本编辑器——VS code！

VS code排第一，相信大家无可争议，绝对的No.1，严格来说，把VS code仅仅定位为一个文本编辑器，实在是杀鸡用牛刀，大材小用了。但是就仅仅讨论文本编辑功能来说，VS code也是十分跟手，代码跳转、代码片段运行、文本搜索替换等都是入门标配，且是大厂出品，UI美观性更不必说，VS code除了本身功能全面、便捷外，还有一个更让人们依赖的是它丰富的插件库，你几乎可以找到工作中处理代码和文本所需要的所有插件，配合插件后，vscode简直如丝般润滑。

其实，文本编辑器本身核心功能差不多都一样，至于选择哪款，还是取决于你是追求小巧便捷，还是功能丰富；是喜欢开箱即用，还是手动定制（比如宏开发）。

希望，上面推荐的几款编辑器，能够满足大家工作需求。

工具，顺手即可~

者：Lucida
原文链接：http://lucida.me/blog/sublime-text-complete-guide

# 摘要（Abstract）

本文系统全面的介绍了 Sublime Text，旨在成为最优秀的 Sublime Text 中文教程。

# 更新记录

1.2014/09/27：完成初稿

2.2014/09/28：

更正打开控制台的快捷键为 Ctrl + `

更正全局替换的快捷键为 Ctrl + Alt + Enter

3.2016/09/15：作者已全面转向 Visual Studio Code

# 前言（Prologue）

Sublime Text 是一款跨平台代码编辑器（Code Editor），从最初的 Sublime Text 1.0，到现在的 Sublime Text 3.0，Sublime Text 从一个不知名的编辑器演变到现在几乎是各平台首选的 GUI 编辑器。而这样优秀的编辑器却没有一个靠谱的中文教程，所以我试图通过本文弥补这个缺陷。

# 编辑器的选择（Editor Choices）

从初学编程到现在，我用过的编辑器有 EditPlus、UltraEdit、Notepad++、Vim、TextMate 和 Sublime Text，如果让我从中推荐，我会毫不犹豫的推荐 Vim 和 Sublime Text，原因有下面几点：

1.跨平台：Vim 和 Sublime Text 均为跨平台编辑器（在 Linux、OS X 和 Windows 下均可使用）。作为一个程序员，切换系统是常有的事情，为了减少重复学习，使用一个跨平台的编辑器是很有必要的。

2.可扩展：Vim 和 Sublime Text 都是可扩展的（Extensible），并包含大量实用插件，我们可以通过安装自己领域的插件来成倍提高工作效率。

3.互补：Vim 和 Sublime Text 分别是命令行环境（CLI）和图形界面环境（GUI）下的最佳选择，同时使用两者会大大提高工作效率。

# 个人背景（Personal Background）

我是一名非常典型的程序员：平时工作主要在 Linux 环境下使用 Java 和 Python，偶尔会用 HTML+CSS+JavaScript 编写网页；业余时会在 Windows 环境编写一些 C# 程序（包括控制台程序（Console Application）和移动应用（Mobile App），也会玩一些非主流语言（比如 Haskell，ML 和 Ruby 等）以拓展见识。

所以这篇文章会我的个人工作内容为主要使用场景（Scenario），尽管无法覆盖到所有的使用场景，但我认为依然可以覆盖到绝大部分，如果您认为我遗漏了什么内容，请在文章下面回复，我会尽量更新。

# 本文风格（Writing Style）

受益于 K&R C 的写作风格，我倾向于以实际案例来讲解 Sublime Text 的功能，所以本文中的例子均源于我在实际开发时遇到的问题。

此外，把本文会使用大量动画（GIF）演示 Sublime Text 的编辑功能，因为我发现图片难以演示完整的编辑流程（Workflow），而视频又过于重量级。本文的GIF动画均使用 ScreenToGif 进行录制。

# 编辑器（Editor） vs 集成开发环境（Integrated Development Environment，下文简称 IDE）

我经常看到一些程序员拿编辑器和 IDE 进行比较，诸如 Vim 比 Eclipse 强大或是 Visual Studio 太慢不如 Notepad++ 好使之类的讨论比比皆是，个人认为这些讨论没有意义，因为编辑器和 IDE 根本是面向两种不同使用场景的工具：

1.编辑器面向无语义的纯文本，不涉及领域逻辑，因此速度快体积小，适合编写单独的配置文件和动态语言脚本（Shell、Python 和 Ruby 等）。

2.IDE 面向有语义的代码，会涉及到大量领域逻辑，因此速度偏慢体积庞大，适合编写静态语言项目（Java、C++ 和 C# 等）。

我认为应当使用正确的工具去做有价值的事情，并把效率最大化，所以我会用 Eclipse 编写 Java 项目，用 Vim 编写Shell，用 Sublime Text 编写 JavaScript/HTML/Python，用 Visual Studio 编写C#。

前言到此结束，下面进入正题。

# 安装（Installation）

Sublime Text 官方网站提供了 Sublime Text 各系统各版本的下载，目前Sublime Text 的最新版本是 Sublime Text 3。这里以 Windows 版本的 Sublime Text 安装为例。

注意在安装时勾选 Add to explorer context menu，这样在右键单击文件时就可以直接使用 Sublime Text 打开。

# 添加 Sublime Text 到环境变量

使用 Win + R 运行 sysdm.cpl 打开 “系统属性”。

然后在 “高级” 选项卡里选择 “环境变量”，编辑 “Path”，增加 Sublime Text 的安装目录（例如 D:\Program Files\Sublime Text 3）。

接下来你就可以在命令行里面利用 subl 命令直接使用 Sublime Text 了：

subl file :: 使用 Sublime Text 打开 file 文件
subl folder :: 使用 Sublime Text 打开 folder 文件夹
subl . :: 使用 Sublime Text 当前文件夹

# 安装 Package Control

前文提到 Sublime Text 支持大量插件，如何找到并管理这些插件就成了一个问题，Package Control 正是为了解决这个问题而出现的，利用它我们可以很方便的浏览、安装和卸载 Sublime Text 中的插件。

# 安装 Package Control

进入 Package Control 的官网，里面有详细的安装教程。Package Control 支持 Sublime Text 2 和 3，本文只给出 3 的安装流程：

1.使用 Ctrl + ` 打开 Sublime Text 控制台。

2.将下面的代码粘贴到控制台里：

import urllib.request,os,hashlib; h = '7183a2d3e96f11eeadd761d777e62404' + 'e330c659d4bb41d3bdf022e94cab3cd0'; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) ); by = urllib.request.urlopen( 'http://sublime.wbond.net/' + pf.replace(' ', '%20')).read(); dh = hashlib.sha256(by).hexdigest(); print('Error validating download (got %s instead of %s), please try manual install' % (dh, h)) if dh != h else open(os.path.join( ipp, pf), 'wb' ).write(by)

3.等待 Package Control 安装完成。之后使用 Ctrl + Shift + P 打开命令板，输入 PC 应出现 Package Control：

成功安装 Package Control 之后，我们就可以方便的安装使用 Sublime Text 的各种插件：

# 购买（Purchase）

Sublime Text 是一个收费闭源软件，这在一定程度上成为了我支持 Sublime Text 的理由（我心中的软件靠谱程度：免费开源 << 免费闭源 < 收费开源 < 收费闭源）：在这里购买。

不过不购买 Sublime Text 也可以 “正常” 使用它，只是 Sublime Text 会时不时的弹出一个对话框提醒你购买，此外窗口处会有一个很屌丝很 low 逼的 (UNREGISTERED)。（在高频操作下，一般 20 分钟提示一次，个人认为算是很厚道了）

也许不少人会觉着 Sublime Text 70 刀的价格太贵，但相比它的功能和带来的效率提升，70 刀真的不值一提，如果你不方便使用 Paypal 付款可以邮件联系我，你支付宝给我打款然后我帮你付款，价格按当日汇率折算（450 元左右）。

概览（Tour）

# 基本概念（Basic Concepts）

Sublime Text 的界面如下：

1.标签（Tab）：无需介绍。

2.编辑区（Editing Area）：无需介绍。

3.侧栏（Side Bar）：包含当前打开的文件以及文件夹视图。

4.缩略图（Minimap）：如其名。

5.命令板（Command Palette）：Sublime Text 的操作中心，它使得我们基本可以脱离鼠标和菜单栏进行操作。

6.控制台（Console）：使用 Ctrl + ` 调出，它既是一个标准的 Python REPL，也可以直接对 Sublime Text 进行配置。

7.状态栏（Status Bar）：显示当前行号、当前语言和Tab格式等信息。

# 配置（Settings）

与其他 GUI 环境下的编辑器不同，Sublime Text 并没有一个专门的配置界面，与之相反，Sublime Text 使用 JSON 配置文件，例如：

{
 "font_size": 12,
 "highlight_line": true,
}

会将默认字体大小调整为 12，并高亮当前行。

JSON 配置文件的引入简化了 Sublime Text 的界面，但也使得配置变的复杂，一般我会到这里查看可用的 Sublime Text 配置。

# 编辑（Editing）

Sublime Text 的编辑十分人性化——它不像 Vim 那样反人类（尽管我也用 Vim 但我还是要说 Vim 的快捷键设定绝壁连代谢产物都不如），少量的快捷键就可以完成绝大多数编辑任务。

# 基本编辑（Basic Editing）

↑↓←→ 就是 ↑↓←→，不是 KJHL，（没错我就是在吐槽 Vim，尼玛设成 WSAD 也比这个强啊），粘贴剪切复制均和系统一致。

Ctrl + Enter 在当前行下面新增一行然后跳至该行；Ctrl + Shift + Enter 在当前行上面增加一行并跳至该行。

Ctrl + ←/→ 进行逐词移动，相应的，Ctrl + Shift + ←/→ 进行逐词选择。

Ctrl + ↑/↓ 移动当前显示区域，Ctrl + Shift + ↑/↓ 移动当前行。

# 选择（Selecting）

Sublime Text 的一大亮点是支持多重选择——同时选择多个区域，然后同时进行编辑。

Ctrl + D 选择当前光标所在的词并高亮该词所有出现的位置，再次 Ctrl + D 选择该词出现的下一个位置，在多重选词的过程中，使用 Ctrl + K 进行跳过，使用 Ctrl + U 进行回退，使用 Esc 退出多重编辑。

多重选词的一大应用场景就是重命名——从而使得代码更加整洁。尽管 Sublime Text 无法像 IDE（例如 Eclipse）那样进行自动重命名，但我们可以通过多重选词+多重编辑进行直观且便捷的重命名：

有时我们需要对一片区域的所有行进行同时编辑，Ctrl + Shift + L 可以将当前选中区域打散，然后进行同时编辑：

有打散自然就有合并，Ctrl + J 可以把当前选中区域合并为一行：

# 查找&替换（Finding&Replacing）

Sublime Text 提供了强大的查找（和替换）功能，为了提供一个清晰的介绍，我将 Sublime Text 的查找功能分为快速查找、标准查找和多文件查找三种类型。

# 快速查找&替换

多数情况下，我们需要查找文中某个关键字出现的其它位置，这时并不需要重新将该关键字重新输入一遍然后搜索，我们只需要使用 Shift + ←/→ 或 Ctrl + D 选中关键字，然后 F3 跳到其下一个出现位置， Shift + F3 跳到其上一个出现位置，此外还可以用 Alt + F3 选中其出现的所有位置（之后可以进行多重编辑，也就是快速替换）。

# 标准查找&替换

另一种常见的使用场景是搜索某个已知但不在当前显示区域的关键字，这时可以使用 Ctrl + F 调出搜索框进行搜索：

以及使用 Ctrl + H 进行替换：

# 关键字查找&替换

对于普通用户来说，常规的关键字搜索就可以满足其需求：在搜索框输入关键字后 Enter 跳至关键字当前光标的下一个位置， Shift + Enter 跳至上一个位置， Alt + Enter 选中其出现的所有位置（同样的，接下来可以进行快速替换）。

Sublime Text 的查找有不同的模式：Alt + C 切换大小写敏感（Case-sensitive）模式， Alt + W 切换整字匹配（Whole matching）模式，除此之外Sublime Text还支持在选中范围内搜索（Search in selection），这个功能没有对应的快捷键，但可以通过以下配置项自动开启。

"auto_find_in_selection": true

这样之后在选中文本的状态下范围内搜索就会自动开启，配合这个功能，局部重命名（Local Renaming）变的非常方便：

使用 Ctrl + H 进行标准替换，输入替换内容后，使用 Ctrl + Shift + H 替换当前关键字， Ctrl + Alt + Enter 替换所有匹配关键字。

# 正则表达式查找&替换

正则表达式是非常强大的文本查找&替换工具，Sublime Text中使用 Alt + R 切换正则匹配模式的开启/关闭。Sublime Text的使用Boost里的Perl正则表达式风格。

出于篇幅原因，本文不会对正则表达式进行详细介绍，Mastering Regex（中译本：精通正则表达式）对正则表达式的原理和各语言下的使用进行了详细介绍。此外网上有大量正则表达式的优秀教程（“正则表达式30分钟入门教程” 和 MSDN正则表达式教程.aspx)），以及在线测试工具（regexpal 和 regexer）。

# 多文件搜索&替换

使用 Ctrl + Shift + F 开启多文件搜索&替换（注意此快捷键和搜狗输入法的简繁切换快捷键有冲突）：

多文件搜索&替换默认在当前打开的文件和文件夹进行搜索/替换，我们也可以指定文件/文件夹进行搜索/替换。

# 跳转（Jumping）

Sublime Text 提供了强大的跳转功能使得我们可以在不同的文件/方法/函数中无缝切换。就我的使用经验而言，目前还没有哪一款编辑器可以在这个方面超越Sublime Text。

# 跳转到文件

Ctrl + P 会列出当前打开的文件（或者是当前文件夹的文件），输入文件名然后 Enter 跳转至该文件。

需要注意的是，Sublime Text使用模糊字符串匹配（Fuzzy String Matching），这也就意味着你可以通过文件名的前缀、首字母或是某部分进行匹配：例如， EIS 、 Eclip 和 Stupid 都可以匹配 EclipseIsStupid.java 。

# 跳转到符号

尽管是一个文本编辑器，Sublime Text 能够对代码符号进行一定程度的索引。Ctrl + R 会列出当前文件中的符号（例如类名和函数名，但无法深入到变量名），输入符号名称 Enter 即可以跳转到该处。

此外，还可以使用 F12 快速跳转到当前光标所在符号的定义处（Jump to Definition）。

比较有意思的是，对于 Markdown， Ctrl + R 会列出其大纲，非常实用。

# 跳转到某行

Ctrl + G 然后输入行号以跳转到指定行：

# 组合跳转

在 Ctrl + P 匹配到文件后，我们可以进行后续输入以跳转到更精确的位置：

1.@ 符号跳转：输入 @symbol 跳转到 symbol 符号所在的位置

2.# 关键字跳转：输入 #keyword 跳转到 keyword 所在的位置

3.: 行号跳转：输入 :12 跳转到文件的第12行。

所以 Sublime Text 把 Ctrl + P 称之为 “Go To Anything”，这个功能如此好用，以至于我认为没有其它编辑器能够超越它。

# 中文输入法的问题

从 Sublime Text 的初版（1.0）到现在（3.0 3065），中文输入法（包括日文输入法）都有一个问题：输入框不跟随。

目前官方还没有修复这个 bug，解决方法是安装 IMESupport 插件，之后重启 Sublime Text 问题就解决了。

# 文件夹（Folders）

Sublime Text 支持以文件夹做为单位进行编辑，这在编辑一个文件夹下的代码时尤其有用。在 File 下 Open Folder ：

你会发现右边多了一个侧栏，这个侧栏列出了当前打开的文件和文件夹的文件，使用 Ctrl + K, Ctrl + B 显示或隐藏侧栏，使用 Ctrl + P 快速跳转到文件夹里的文件。

# 窗口&标签（Windows & Tabs）

Sublime Text 是一个多窗口多标签编辑器：我们既可以开多个Sublime Text窗口，也可以在一个Sublime Text窗口内开多个标签。

# 窗口（Window）

使用 Ctrl + Shift + N 创建一个新窗口（该快捷键再次和搜狗输入法快捷键冲突，个人建议禁用所有搜狗输入法快捷键）。

当窗口内没有标签时，使用 Ctrl + W 关闭该窗口。

# 标签（Tab）

使用 Ctrl + N 在当前窗口创建一个新标签， Ctrl + W 关闭当前标签， Ctrl + Shift + T 恢复刚刚关闭的标签。

编辑代码时我们经常会开多个窗口，所以分屏很重要。Alt + Shift + 2 进行左右分屏， Alt + Shift + 8 进行上下分屏， Alt + Shift + 5 进行上下左右分屏（即分为四屏）。

分屏之后，使用 Ctrl + 数字键跳转到指定屏，使用 Ctrl + Shift + 数字键将当前屏移动到指定屏。例如， Ctrl + 1 会跳转到1屏，而 Ctrl + Shift + 2 会将当前屏移动到2屏。

# 全屏（Full Screen）

Sublime Text 有两种全屏模式：普通全屏和无干扰全屏。

个人强烈建议在开启全屏前关闭菜单栏（Toggle Menu），否则全屏效果会大打折扣。

F11 切换普通全屏：

Shift + F11 切换无干扰全屏：

# 风格（Styles）

风格对于任何软件都很重要，对编辑器也是如此，尤其是GUI环境下的编辑器。作为一个程序员，我希望我的编辑器足够简洁且足够个性。

Notepad++ 默认界面

Sublime Text 默认界面

所以在用过 Sublime Text 之后，我立刻就卸掉了 Notepad++。

Sublime Text 自带的风格是我喜欢的深色风格（也可以调成浅色），默认主题是Monokai Bright，这两者的搭配已经很不错了，不过我们还可以做得更好：接下来我将会展示如何通过设置偏好项和添加自定义风格/主题使得 Sublime Text 更加 Stylish。

# 一些设置（Miscellaneous Settings）

下面是我个人使用的设置项。

// 设置Sans-serif（无衬线）等宽字体，以便阅读
"font_face": "YaHei Consolas Hybrid",
"font_size": 12,
// 使光标闪动更加柔和
"caret_style": "phase",
// 高亮当前行
"highlight_line": true,
// 高亮有修改的标签
"highlight_modified_tabs": true,

设置之后的效果如下：

# 主题（Themes）

Sublime Text 有大量第三方主题：[https://sublime.wbond.net/browse/labels/theme]，这里我给出几个个人感觉不错的主题：

Soda Light

Soda Dark

Nexus

Flatland

Spacegray Light

Spacegray Dark

# 配色（Color）

colorsublime 包含了大量 Sublime Text 配色方案，并支持在线预览，配色方案的安装教程在这里，恕不赘述。

我个人使用的是 Nexus 主题和 Flatland Dark 配色，配置如下：

"theme": "Nexus.sublime-theme",
"color_scheme": "Packages/Theme - Flatland/Flatland Dark.tmTheme",

效果如下：

# 编码（Coding）

优秀的编辑器使编码变的更加容易，所以 Sublime Text 提供了一系列功能以提高开发效率。

# 良好实践（Good Practices）

良好的代码应该是规范的，所以Google为每一门主流语言都设置了其代码规范（Code Style Guideline）。我自己通过下面的设置使以规范化自己的代码。

// 设置tab的大小为2
"tab_size": 2,
// 使用空格代替tab
"translate_tabs_to_spaces": true,
// 添加行宽标尺
"rulers": [80, 100],
// 显示空白字符
"draw_white_space": "all",
// 保存时自动去除行末空白
"trim_trailing_white_space_on_save": true,
// 保存时自动增加文件末尾换行
"ensure_newline_at_eof_on_save": true,

# 代码段（Code Snippets）

Sublime Text 支持代码段（Code Snippet），输入代码段名称后 Tab 即可生成代码段。

你可以通过Package Control安装第三方代码段，也可以自己创建代码段，参考这里。

# 格式化（Formatting）

Sublime Text 基本的手动格式化操作包括：Ctrl + [ 向左缩进， Ctrl + ] 向右缩进，此外 Ctrl + Shift + V 可以以当前缩进粘贴代码（非常实用）。

除了手动格式化，我们也可以通过安装插件实现自动缩进和智能对齐：

1.HTMLBeautify：格式化HTML。

2.AutoPEP8：格式化Python代码。

3.Alignment：进行智能对齐。

# 自动完成（Auto Completion）

Sublime Text 支持一定的自动完成，按 Tab 自动补全。

# 括号（Brackets）

编写代码时会碰到大量的括号，利用 Ctrl + M 可以快速的在起始括号和结尾括号间切换， Ctrl + Shift + M 则可以快速选择括号间的内容，对于缩进型语言（例如Python）则可以使用 Ctrl + Shift + J 。

此外，我使用 BracketHighlighter 插件以高亮显示配对括号以及当前光标所在区域，效果如下：

# 命令行（Command Line）

尽管提供了 Python 控制台，但 Sublime Text 的控制台仅支持单行输入，十分不方便，所以我使用 SublimeREPL 以进行一些编码实验（Experiments）。

# 其它（Miscellaneous）

尽管我试图在本文包含尽可能多的 Sublime Text 实用技能，但受限于篇幅和我的个人经验，本文仍不免有所遗漏，欢迎在评论里指出本文的错误及遗漏。

下面是一些可能有用但我很少用到的功能：

1.宏（Macro）：Sublime Text 支持录制宏，但我在实际工作中并未发现宏有多大用处。

2.其它平台（Other Platforms）：本文只介绍了 Windows 平台上 Sublime Text 的使用，不过 Linux 和 OS X 上Sublime Text的使用方式和Windows差别不大，只是在快捷键上有所差异，请参考 Windows/Linux快捷键和 OS X 快捷键。

3.项目（Projects）：Sublime Text支持简单的项目管理，但我一般只用到文件夹。

4.Vim模式（Vintage）：Sublime Text自带 Vim模式。

5.构建（Build）：通过配置，Sublime Text可以进行源码构建。

6.调试（Debug）：通过安装插件，Sublime Text 可以对代码进行调试。

# 快捷键列表（Shortcuts Cheatsheet）

我把本文出现的Sublime Text按其类型整理在这里，以便查阅。

通用（General）

1.↑↓←→：上下左右移动光标，注意不是不是 KJHL ！

2.Alt：调出菜单

3.Ctrl + Shift + P：调出命令板（Command Palette）

4.Ctrl + ` ：调出控制台

# 编辑（Editing）

1.Ctrl + Enter：在当前行下面新增一行然后跳至该行

2.Ctrl + Shift + Enter：在当前行上面增加一行并跳至该行

3.Ctrl + ←/→：进行逐词移动

4.Ctrl + Shift + ←/→进行逐词选择

5.Ctrl + ↑/↓移动当前显示区域

6.Ctrl + Shift + ↑/↓移动当前行

#选择（Selecting）

1.Ctrl + D：选择当前光标所在的词并高亮该词所有出现的位置，再次 Ctrl + D 选择该词出现的下一个位置，在多重选词的过程中，使用 Ctrl + K 进行跳过，使用 Ctrl + U 进行回退，使用 Esc 退出多重编辑

2.Ctrl + Shift + L：将当前选中区域打散

3.Ctrl + J：把当前选中区域合并为一行

4.Ctrl + M：在起始括号和结尾括号间切换

5.Ctrl + Shift + M：快速选择括号间的内容

6.Ctrl + Shift + J：快速选择同缩进的内容

7.Ctrl + Shift + Space：快速选择当前作用域（Scope）的内容

# 查找&替换（Finding&Replacing）

1.F3：跳至当前关键字下一个位置

2.Shift + F3：跳到当前关键字上一个位置

3.Alt + F3：选中当前关键字出现的所有位置

4.Ctrl + F/H：进行标准查找/替换，之后：

5.Alt + C：切换大小写敏感（Case-sensitive）模式

6.Alt + W：切换整字匹配（Whole matching）模式

7.Alt + R：切换正则匹配（Regex matching）模式

8.Ctrl + Shift + H：替换当前关键字

9.Ctrl + Alt + Enter：替换所有关键字匹配

10.Ctrl + Shift + F：多文件搜索&替换

# 跳转（Jumping）

1.Ctrl + P：跳转到指定文件，输入文件名后可以：

2.@ 符号跳转：输入 @symbol 跳转到 symbol 符号所在的位置

3.# 关键字跳转：输入 #keyword 跳转到 keyword 所在的位置

4.: 行号跳转：输入 :12 跳转到文件的第12行。

5.Ctrl + R：跳转到指定符号

6.Ctrl + G：跳转到指定行号

# 窗口（Window）

1.Ctrl + Shift + N：创建一个新窗口

2.Ctrl + N：在当前窗口创建一个新标签

3.Ctrl + W：关闭当前标签，当窗口内没有标签时会关闭该窗口

4.Ctrl + Shift + T：恢复刚刚关闭的标签

# 屏幕（Screen）

1.F11：切换普通全屏

2.Shift + F11：切换无干扰全屏

3.Alt + Shift + 2：进行左右分屏

4.Alt + Shift + 8：进行上下分屏

5.Alt + Shift + 5：进行上下左右分屏

6.分屏之后，使用 Ctrl + 数字键跳转到指定屏，使用 Ctrl + Shift + 数字键将当前屏移动到指定屏

延伸阅读（Further Reading）

# 书籍（Books）

Mastering Sublime Text：我读过的唯一一本关于 Sublime Text 的书籍，书中介绍的插件很实用，但对编辑技巧介绍不全。

Instant Sublime Text Starter：另外一本关于 Sublime Text的书，我没有读过。

# 链接（Links）

1.官方文档：http://www.sublimetext.com/docs/3/

2.官方论坛：http://www.sublimetext.com/forum/

3.Stack Overflow 的 Sublime Text 频道：4.http://stackoverflow.com/questions/tagged/sublimetext

5.http://stackoverflow.com/questions/tagged/sublimetext2

6.http://stackoverflow.com/questions/tagged/sublimetext3

7.非官方文档：http://sublime-text-unofficial-documentation.readthedocs.org/ 甚至比官方文档还要全面！

8.Package Control：https://sublime.wbond.net/ 大量的 Sublime Text 插件和主题。

# 视频（Videos）

1.Getting Started with SublimeText：https://www.youtube.com/watch?v=04gKiTiRlq8

2.Sublime Text Pefect Workflow：https://www.youtube.com/watch?v=bpEp0ePIOEM&list=PLuwqxbvf3olpLsnFvo06gbrkcEB5o7K0g

.1 HTML简介

1.1.1 HTML：Hyper Text Markup Language（超文本标记语言）

在学习使用HTML之前，大家经常会问，什么是HTML？HTML是用来描述页面的一种语言，它是一种超文本标记语言，也就是说，HTML不是一种编程语言，仅是一种标记语言。 HTML由一套标记标签组成，在制作网页时，HTML使用标记标签来描述网页。

1.1.2 发展史

1.1.3 HTML5的优势

HTML5自正式推出以来，就以一种惊人的速度被迅速推广着，各主流浏览器对于HTML5表现出来的热烈欢迎、积极支持。

1、世界知名浏览器厂商对HTML5的支持

通过对Internet、Explorer、Google、Firefox、Safari、Opera等主要的web浏览器发展策略调查，发现它们都在支持HTML5上采取了措施

- 微软：2010年3月16日，微软与拉斯维加斯市举行的MIX10技术大会上宣布已推出InternetExplorer(IE)9浏览器开发者预览版。

- Google：2010年2月19日，GoogleGears项目经理伊安~费特通过博客宣布，谷歌将放弃对Gears浏览器插件项目支持、重点开发HTML5项目

- 苹果：2010年6月7日，苹果开发者大会的会后发布了Safari5。这款浏览器支持10个以上HTML5的新技术，包括全屏播放、HTML5地理位置、HTML5的形式验证等功能

- Opera：2010年5月5日，Opera软件公司首席技术官Hakon Wium Lie先生在访华之际，接受了中国软件资讯网等少数几家媒体采访，他认为HTML5和CSS3将是全球互联网发展的未来趋势

- Mozilla：2010年7月，Mozilla基金会发布了Firefox4浏览器的第一个测试版，从官方文档看，它对HTML5是完全级别的支持

2、市场的需求

现在的市场已经迫不及待地要求有一个统一的互联网通用标准。HTML5之前的情况是，由于各浏览器之间不统一，仅修改web浏览器之间的由于兼容性而引起的bug就浪费了大量的时间。而HTML5的目标就是将web带入一个成熟的应用平台，在HTML5平台上，视频，音频，图像，动画及同计算器的交互都被标准化。

3、跨平台

HTML5可以做到跨平台开发，用户只用打开浏览器即可访问应用，PC网站、各种移动设备，插件等核心代码就可以不需要重复编写，极大地减少了开发人员的工作量。

1.1.4 W3C标准

发明HTML的初衷是实现信息资料的网络传播和共享，希望HTML文档具有平台无关性，即同一个HTML文件，在不同的浏览器上看到同样的页面内容和效果。但是遗憾的是，随着浏览器市场的激烈竞争，各大浏览器厂商为了吸引用户，都在早期HTML版本的基础上扩展各类标签，各浏览器之间互不兼容，导致HTML编码规则混乱，违背了HTML发明的初衷，因此需要一个组织来指定和维护统一的国际化web开发标准，确保多个浏览器都兼容，HTML内容结构都是语义化的。

W3C标准不是某一个标准，而是一系列的标准集合，一个网页主要有三部分组成，即结构、表现、行为。

对应的标准也分三方面：结构化标准语言主要包括XHTML和XML，表现标准语言主要包括CSS，行为标准主要包括对象模型（如W3CDOM）、ECMAScript等。这些标准大部分由W3C起草和发布，也有一些是其他标准组织制订的标准，比如ECMA（European Computer Manufacturers Association）的ECMAScript标准。

1.1.5 网页编辑工具

1、开发工具：

记事本、Dreamweaver、UltraEdit、Sublime、WebStorm等
你可以从以上软件的官网中下载对应的软件，按步骤安装即可。
接下来我们将为大家演示如何使用 WebStorm来创建 HTML 文件。

2、使用WebStorm编辑HTML文档如下：

打开WebStorm编辑器后，选择File->New->HTML File命令，打开“HTML File”对话框;
在“Name”文本框中输入HTML的文件名为“my_firstPage”在“Kind”下拉列表框中选择HTML5 file选项后OK按钮即可创建一个HTML5页面的模板;
在body元素和title元素中添加网页内容;
网页内容添加完成后，鼠标移动到编辑器的右上方，会出现几个常见的浏览器图标，单击Chrome浏览器附表即可打开页面;
在Chrome浏览器中可以显示出结果。

2.1 HTML基础

2.1.1 HTML5的基本结构

<html>
    <head>
             <title>我的第一个网页</title>
    </head>
    <body>
             我的第一个网页
    </body>
</html>

标签都是成对出现的。有一个开头标记就应该有一个对应的结束标记记，“<>”开始，以“</>”结束，要求成对出现，标签之间有缩进，提现层次感，方便阅读。

HTML5的基本结构分为两部分。整个HTML包括头部｛head｝和主体｛body｝两部分，头部包括网页标题｛title｝等基本信息，主体包括页面的内容信息，如图片、文字等。

2.1.2 网页的基本信息

1、DOCTYPE 声明在这个HTML5文件最上面有一行关于DOCTYPE文档类型的声明，约束HTML文档结构。检查是否符合相关WEB标准，同时告诉浏览器使用那中规范来解释这个文档中的代码。DOCTYPE声明必须位于HTML文档的第一行。

HTML5:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>

</body>
</html>

HTML4：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://wwww.w3.org/TR/xhtml1-transitional.dtd">

2、<title>标签 使用<title>标签描述页面的标签，类似一个文档的标题，为一个简介的主题，并能使读者有兴趣。

<title>搜狐-中国最大的门户网站</title>

3、<meta>标签 使用<meta>标签描述网页的摘要信息，包括文档内容类型、字符编码信息，搜索关键字、网站提供的功能和服务的详细描述等。<meta>标签的内容并不显示，其目的是方便浏览器解析或利于搜索引擎搜索，它采用“名称/值”对的方式描述摘要信息。

meta标签可分为两大部分：http-equiv和name变量。

http-equiv相当于http的文件头作用，它可以向浏览器传回一些有用的信息，以帮助浏览器正确地显示网页内容。

name属性主要用于描述网页，与之对应的属性值为content，content中的内容主要是便于搜索引擎机器人查找信息和分类信息用的。

1.文档内容类型，字符编码信息书写如下：

HTML5:

<meta charset="UTF-8">

HTML4:

<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">

属性：charset表示字符集编码，常用的编码有以下几种。

1.gb2312：简体中文，一般用于包含中文和英文的页面；

2.ISO-885901：纯英文，一般用于只包含英文的页面；

3.big5：繁体，用于带有繁体字的页面；

4.UTF-8：国际性通用的编码，同样适用于中文和英文的页面。和gb2312编码相比，国际通用性更好。

2.搜索关键字和内容描述信息书写如下：

<meta name="keywords" content="云图智联">
<meta name="description"content="云图智联是国内的IT教育集团，致力于为中国培养优秀的IT技术人才">

网站示例：

<!--京东-->
 <meta name="description"
          content="京东JD.COM-专业的综合网上购物商城,销售家电、数码通讯、电脑、家居百货、服装服饰、母婴、图书、食品等数万个品牌优质商品.便捷、诚信的服务，为您提供愉悦的网上购物体验!"/>
    <meta name="Keywords" content="网上购物,网上商城,手机,笔记本,电脑,MP3,CD,VCD,DV,相机,数码,配件,手表,存储卡,京东"/>

<!--淘宝-->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
  <meta name="renderer" content="webkit" />
  <title>淘宝网 - 淘！我喜欢</title>
  <meta name="spm-id" content="a21bo" />
  <meta name="description" content="淘宝网 - 亚洲较大的网上交易平台，提供各类服饰、美容、家居、数码、话费/点卡充值… 数亿优质商品，同时提供担保交易(先收货后付款)等安全交易保障服务，并由商家提供退货承诺、破损补寄等消费者保障服务，让你安心享受网上购物乐趣！" />
  <meta name="aplus-xplug" content="NONE">
  <meta name="keyword" content="淘宝,掏宝,网上购物,C2C,在线交易,交易市场,网上交易,交易市场,网上买,网上卖,购物网站,团购,网上贸易,安全购物,电子商务,放心买,供应,买卖信息,网店,一口价,拍卖,网上开店,网络购物,打折,免费开店,网购,频道,店铺" />

2.1.3 HTML5的基本标签

1、标题标签

<h1>…</h1>
<h2>…</h2>
<h3>…</h3>
<h4>…</h4>
<h5>…</h5>
<h6>…</h6>

标题标签表示一段文字和标题或主题，并且支持多层的内容结构。例如，一级标题采用h1，二级标题采用h2，其他级别标题以此类推。HTML共提供了六级标题h1~h6，并赋予了标题一定的外观，所有标题字体加粗，h1字号最大，h6字号最小。

2、段落标签、换行标签和水平线标签

<p>段落标签</p>
<br/><!--换行标签-->
<hr><!--水平线标签-->

3、字体样式标签

<!--加粗-->
<strong></strong>
<b></b>
<!--倾斜-->
<em></em>
<i></i>
<!--字体缩小-->
<small></small>
<!--删除线-->
<s></s>
<!--下划线-->
<u></u>

4、图像标签

（1）常见的图像格式

1.JPG格式

JPG格式图像是在Internet上被广泛支持的图像格式，它是联合图像专家组格式的英文缩写。JPG格式采用的是有损压缩，会造成图像画面的失真，不过压缩之后的体积很小，而且比较清晰，所以比较适合在网页中应用此格式最适合用于排和或连续取色调图像的高级格式，这事因为JPG文件可以包含数百万种颜色。随着JPG格式文件品格式质的提高，文件的大小和下载时间也会随着增加。通常可以通过压缩JPG格式文件在图像品质和文件大小之间达到良好的平衡。

2.GIF格式

GIF格式图像是网页中使用最广泛，最普通的一种图像格式，它是图像交换格式的英文缩写。GIF格式文件支持透明色，使得GIF格式在网页的背景和一些多层特效的显示上用得非常多；还支持动画，这是它最突出的一个特点，因此GIF格式图像在网页中应用非常广泛。

3.BMP格式

BMP格式图像在Windows操作系统中使用得比较多，它是位图的英文缩写。BMP格式图像格式与其他Microsoft Windows程序兼容。它不支持文件压缩，也不是用于Web页。

4.PNG格式

PNG格式是20世纪90年代中期开始开发的图像文件储存格式，它兼有GIF和JPG格式的优势，同时具备GIF格式不具备的特性。

（2）图像标签

<img src="path" alt="text" title="text"  width="x"  height="y" />

src属性表示图片路径，alt属性指定图像的代替文本，表示图像无法显示时（如图片路径错误或网速太慢等）替代先是文本，这样，即使当图像无法显示时，用户还可以看到网页丢失的信息内容。

title属性可以提供额外的提示或帮助信息，当鼠标移至图片上时显示提示信息，方便用户使用。

width和height两个属性分别表示图片的宽度和高度，如果不设置，那么图片默认显示原始大小。

5、超链接标签

（1）超链接包含两部分内容，一是链接地址，即链接的目标，可以是某个网站或文件路径，对应a标签的href属性；二是链接文本或图像，点击该文本或图像，将跳转到href属性指定的链接地址。

<a href="path" target="目标窗口位置">链接文本或图像</a>

href：链接地址的路径;

target：指定链接在哪个窗口打开，常用的取值有_self（自身窗口）、_blank（新建窗口）。超链接即可以是文本超链接，也可以使图片超链接

（2）常用的超链接

1>页面间链接

从一个页面链接到另一个页面

2>锚链接

锚链接也称锚点链接，命名锚点链接（也叫书签链接）常常用于那些内容庞大繁琐的网页，通过点击命名锚点，自动跳转到我们设置锚点的位置，类似于我们阅读书籍时的目录页码或章回提示。

锚点链接可以跳转到页面的任何位置。一般用于在页面下面的时候，点击回到最上面。锚点链接的名称可以随意取，只起到标记作用。

1.从A页面的甲位置跳转到本页中的乙位置

示例：

    <a href="#a1">a1</a>
    <a href="#a2">a2</a>
    <a href="#a3">a3</a>
    <a href="#a4">a4</a>

    <div id="a1">a1</div>
    <div id="a2">a2</div>
    <div id="a3">a3</div>
    <div id="a4">a4</div>

2.从A页面的甲位置跳转到B页面中的乙位置

示例：

<!--A页面-->
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
<title>锚链接</title>
</head>
<body>
<p>
    [<a href="help.html#register">A位置</a>] 
    [<a href="help.html#login">B位置</a>]
</p>
</body>
</html>

<!--B页面-->
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>锚链接</title>
    <style>
        div{
            width: 100%;
            height: 500px;
            border: 1px solid red;
        }
    </style>
</head>
<body>
<h4><a name="register">A位置</a></h4>
<div>
    <h2>A位置</h2>
</div>
<h4><a name="login">B位置</a></h4>
<div>
    <h2>B位置</h2>
</div>
</body>
</html>

3>功能性链接

<!--下载图片-->
<a href="img/qq.jpg">点击下载图片</a>

<!--发送邮件-->
<a href="mailto:Webmaster@ytzl.cn">联系我们</a>

<!--引用脚本语言-->
<a href="javascript：alert('哈哈哈哈')"></a>

6、注释和特殊符号

<!--注释符号-->

当页面的HTML结构复杂或内容较多时，需要添加必要的注释方便代码阅读和维护。同时，有时为了调试，需要暂时注释掉一些不必要的HTML代码。特殊符号一般以"&"符号开头，";"结尾。

3.1 练习

3.1.1 制作《悟空》歌词

需求：

1、标题使用标题标签，文字使用p标签标题与正文之间的分隔线使用水平线标签；歌词词结束后使用换行标签换行

2、人名加粗显示，时间斜体显示

3、制作页面版权部分

<html>
    <head>
             <title>我的第一个网页</title>
    </head>
    <body>
             我的第一个网页
    </body>
</html>

3.1.2 制作图书简介页面

使用学过的图像标签、标题标签、水平线标签、斜体标签、加粗标签、段落标签等制作京东读书新闻资讯页面，主标题使用一级标题标签，副标题使用二级标题标签，二级标题与图片之间使用水平线分隔。

<h1>HTML5+CSS3从入门到精通（标准版）</h1>
<h2>作者：未来科技</h2>
<hr/>
<p><img src="images/book.jpg" alt="图书" width="200"/></p>
<p><em>HTML 5 CSS 3 JavaScript从入门到精通（标准版）</em></p>
<p><em>  以基础知识、示例、实战案例相结合的方式详尽讲述了HTML  CSS  JavaScript及目前*的前端技术html5移动开发 html5实战 html5 canvas html5 app html5入门 html5 动画  html5揭秘 html 游戏 html5权威指南 的基本知识都有涉及。</em></p>
<p><strong>全书分两大部分，共12章</strong></p>
<p>介绍了HTML5入门和CSS3实战入门内容：使用HTML标签标识网页内容，使用CSS设计网页基本样式，如使用并美化文本、图像、超链接、列表、表单和表格等</p>
<p>第二部分为CSS3布局部分，主要讲解使用CSS3设计完整网页的方法和技巧，以及CSS3中的各种新技术应用；</p>
<p>© 2015-2025 云图智联</p>

3.1.3 锚链接的应用

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        a{
            display: block;
            width: 30px;
            height: 30px;
            line-height: 30px;
            font-size: 18px;
        }
        div{
            width: 400px;
            height: 400px;
            margin-top: 20px;
            border: 1px solid red;
        }
    </style>
</head>
<body>
<a href="#a1">a1</a><a href="#a2">a2</a><a href="#a3">a3</a><a href="#a4">a4</a>
<div id="a1">a1</div>
<div id="a2">a2</div>
<div id="a3">a3</div>
<div id="a4">a4</div>
</body>
</html>

免费学习视频欢迎关注云图智联：https://e.yuntuzhilian.com/

在线咨询

上一篇：关于博客里视频插入的方法，以土豆为例
下一篇：前端面试：如何写出高性能的 HTML？

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商