以前写web前端样式都是用eclipse、myeclispe这些IDE开发工具，现在想纯粹的写点HTML的东西，一心想找一个轻量的编辑器，这样能够随手打开编写，方便平时业余学习。网上搜罗了一堆编辑器，最后看上了Sublime Text,小小编辑器，70刀的售价，想必也是个牛X闪闪的东西。这款软件出来很久，如今刚开始入门，学习的同时，写下心得，既可以作为学习笔记，也能方便分享于别人，让别人少走弯路，本文重点关于用Sublime编写HTML文件。

如有纰漏，还望指正！

一、Sublime Text2安装和汉化

Sublime Text2百度网盘下载（希望有能力的多多支持正版，虽然可以无限试用）

链接：http://pan.baidu.com/s/1dDJcRxn 密码：bywe

汉化包百度网盘下载

链接：http://pan.baidu.com/s/1mgkYFGk 密码：6o9z

汉化方法：运行软件，依次点击菜单Preferneces -> Browse Packages ，在打开的目录的父目录中有一个Packages文件夹，把下载下来的汉化压缩包中的Default文件夹内的文件替换掉Packages->Default内同名文件即可。

二、Sublime Text2主要的几个界面设置及快捷键

左侧目录栏（关闭/打开）：查看->侧边栏->隐藏侧边栏（点击一次打开，再点击一次关闭，选项卡文字并没有改变，应该是汉化的问题）

右侧迷你视图（关闭/打开）：查看->隐藏迷你地图

三、Sublime Text2插件安装

Sublime插件很多，不过要想便捷地安装这些插件前提是要安装Package Control控件,安装最简单的方法是通过Sublime的文本控制台。控制台通过Ctrl +`快捷方式或查看（视图）->显示控制台菜单访问。一旦打开，粘贴你Sublime(本文为Sublime Text2)版本对应的Python代码到控制台。

Sublime Text2安装Package Control对应的Python代码为：

import urllib2,os,hashlib; h = 'eb2297e1a458f27d836c04bb0cbaf282' + 'd0e7a3098092775ccb37ca9d6b2e4b7d'; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); os.makedirs( ipp ) if not os.path.exists(ipp) else None; urllib2.install_opener( urllib2.build_opener( urllib2.ProxyHandler()) ); by = urllib2.urlopen( 'http://packagecontrol.io/' + pf.replace(' ', '%20')).read(); dh = hashlib.sha256(by).hexdigest(); open( os.path.join( ipp, pf), 'wb' ).write(by) if dh == h else None; print('Error validating download (got %s instead of %s), please try manual install' % (dh, h) if dh != h else 'Please restart Sublime Text to finish installation')

Python Code

参考资料：https://packagecontrol.io/installation#st2

四、快捷键让Sublime Text2在编文件快速在浏览器打开

安装好Package Control后，接下来我们就可以方便的安装各种插件了，如题四如何安装一个“在编文件快速在浏览器打开的插件”，这样我们在编辑HTML文件时可以边写代码边在浏览器查看显示效果，这个插件叫view in browser：

1、通过"ctrl+shift+p"打开命令面板

2、输入“ip”即可，全称（install package）打开安装插件面板，选择第一个Package Control:Install Package,等一会跳出安装插件的输入面板

3、输入"view in browser"后通过鼠标左键单击或者回车键进行安装

4、察看SublimeText2左下角状态栏了解是否安装成功

装好之后，聊瞧瞧看如何使用：

1、打开Sublime Text2,按Ctrl+Shift+p打开命令面板，输入pcl->选择List Packges(可以看到已安装的插件列表)；

2、在已安装的插件列表里选择View In Browser,进入到对应的文件目录中；

3、找到文件夹内对应你操作系统的快捷键配置文件，我是Windows操作系统，所以我把Default(Windows).sublime-keymap直接拖到sublime里打开进行配置。

4、在" [  ] "内输入以下代码：红字1处为你自己设置的快捷键，红字2处为该快捷键对应的将运行在编文件的浏览器编码，其他火狐-firefox,苹果-safari

注意：开头和结尾的“[ ]”不能删除，否则会在打开Sublime时报错，就算什么代码也没有，也要留个空的"[ ]"符号，不然也会报错。

假设有异常，继续往下看，没有异常请忽略：

5、如果出现设置了快捷键，但是按快捷不起作用是，原因可能是:

　　 a:上面配置信息出错；b:电脑是没安装对应浏览器（可以先用IE测试）；

　　 c:文件存放路径上不能有中文，否则快捷键也会失效；

　　 d:View In Browser浏览器路径配置文件有问题，解决方法如下：

　　sublime菜单栏->Preferences->Package Settings->View in Browser->Settings-Default

　　找到你操作系统对应的一栏，我是Windows64操作系统，所以在win32处修改对应浏览器的路径（自行查询自己电脑上的浏览器安装路径）按照下图的格式填好保存就大功告成了。

　　

五、Sublime Text2插件Emmet使用（快速生成HTML文件开头代码）

用一些IDE开发工具创建HTML文件时都会自动生成标准的头文件代码，但是Sublime要想实现这个效果就必须插件的配合，这里我们将要安装的插件叫Emmet,安装方法同上。

安装好Emmet插件后，创建文件，打开Sublime>文件>新建文件,这时创建的文件为Plain Text(纯文本)文件，可以从Sublime窗体的右下角看出，同时点击右下角的Plain Text,在弹出的文件类型列表里选择HTML类型，这样一个HTML类型空文件就创建好了。

开始体验：输入以下简写，按tab键（只有文件类型为HTML，以下简写才会在按Tab键后自动转换成对应代码）

以下列出部分示例，详细信息请参考：http://docs.emmet.io/cheat-sheet/

html:4t

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

 <html lang="en">

 <head>

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

     <title>Document</title>

 </head>

 <body>

 </body>

 </html>

html:4s

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

 <html lang="en">

 <head>

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

     <title>Document</title>

 </head>

 <body>

 </body>

 </html>

html:xt

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

 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

 <head>

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

     <title>Document</title>

 </head>

 <body>

 </body>

 </html>

html:5

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Document</title>

 </head>

 <body>

 </body>

 </html>

六、引用其他文件

只要放在桌面同一个文件夹下，下面语句就可以引用到，比如CSS文件。

./  当前目录

../ 上一级目录

同一目录下，引用js文件则可以直接引用

Sublime Text使用心得（一）的更多相关文章

  1. Sublime Text的心得经验。 全面

    Sublime Text的心得经验.jikeytang/sublime-text · GitHub

  2. Sublime Text 3 使用心得

    1.Ctrl + Shift + P : package control install package == > ConvertToUTF82.列模式: 苹果:OS X -鼠标左键+Optio ...

  3. Sublime Text插件之Emmet

    转载:http://www.w3cplus.com/tools/using-emmet-speed-front-end-web-development.html Emmet插件以前被称作为Zen Co ...

  4. 转: sublime text常用插件和快捷键

    Sublime Text 2是一个轻量.简洁.高效.跨平台的编辑器.博主之前一直用notepdd++写前端代码,用得也挺顺手了,早就听说sublime的大名,一直也懒得去试试看,认为都是工具用着顺手就 ...

  5. Sublime Text 2激活、插件包安装、以及快捷键

    http://jingyan.baidu.com/article/ff4116259b057c12e48237b8.html Sublime Text作为一款轻量.简洁.高效.跨平台的编辑器.支持N多 ...

  6. Sublime text 入门学习资源篇及其基本使用方法

    Sublime text 学习资源篇 史上最性感的编辑器-sublimetext,插件, 学习资源 官网 http://www.sublimetext.com/ 插件 https://packagec ...

  7. Sublime Text 2 入门与总结

    Sublime Text 2 入门与总结   首语 :    考完试,但又没什么兴趣做课程设计,蛋疼的弄点软件入门的介绍,希望给各位还在吃香蕉的程序猿带来一点启示...   代码编辑器,就像武侠中的武 ...

  8. Sublime Text：学习资源篇

    官网 http://www.sublimetext.com/ 插件 https://packagecontrol.io 教程 Sublime Text 全程指南 Sublime Text 2 入门及技 ...

  9. Sublime text 3搭建Python开发环境及常用插件安装 转载

    Sublime text 3搭建Python开发环境及常用插件安装 一.环境准备 1.官方网站地址 2.Windows 10 3.Sublime Text 3 + 官网购买license(Just a ...

随机推荐

  1. paip.php eclipse output echo 乱码

    paip.php eclipse output echo 乱码 作者Attilax ,  EMAIL:1466519819@qq.com  来源:attilax的专栏 地址:http://blog.c ...

  2. insert into select * from 锁表

    mysql[192.168.11.187] processid[249] root@localhost in db[zjzc] hold transaction time 197 112069858, ...

  3. hadoop2.2编程: 重写comparactor

    要点: 类型比较在hadoop的mapreduce中非常重要,主要用来比较keys; hadoop中的RawComparator<T>接口继承自java的comparator, 主要用来比 ...

  4. GCC参数详解

    GCC参数详解 [介绍] gcc and g++分别是gnu的c & c++编译器 gcc/g++在执行编译工作的时候,总共需要4步 1.预处理,生成.i的文件 2.将预处理后的文件不转换成汇 ...

  5. HDU-1598 find the most comfortable road

    find the most comfortable road Time Limit: 1000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K ...

  6. web调试工具

    Fiddler是最强大最好用的Web调试工具之一,它能记录所有客户端和服务器的http和https请求,允许你监视,设置断点,甚至修改输入输出数据. 使用Fiddler无论对开发还是测试来说,都有很大 ...

  7. Bzoj 4196: [Noi2015]软件包管理器 树链剖分

    4196: [Noi2015]软件包管理器 Time Limit: 10 Sec  Memory Limit: 512 MBSubmit: 721  Solved: 419[Submit][Statu ...

  8. The File's Owner

    The File Owner is an instantiated, runtime object that owns the contents of your nib and its outlets ...

  9. Java StringTokenizer Example

    In Java, you can use StringTokennizer class to split a String into different tokenas by defined deli ...

  10. poj 3468 A Simple Problem with Integers【线段树区间修改】

    A Simple Problem with Integers Time Limit: 5000MS   Memory Limit: 131072K Total Submissions: 79137   ...