以前写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. svn删除目录后提交显示Item 'XXXX' is out of date解决方法

    1.在要删除的目录上执行 svn 的 Delete 2.来到要删除目录的上级目录,执行更新操作.  3.找到要删除的目录,会显示冲突状态,在这个目录上执行Resolved.  4.在这个要删除的目录上 ...

  2. 通过ip获取地理位置信息

    http://ipinfo.io/developers 直接使用get请求  url: http://ipinfo.io/json    即可获得json数据

  3. JW Player 现在支持 Azure 媒体服务

    Vishal Sood Azure媒体服务首席项目经理 此合作伙伴关系是关于什么内容? Azure媒体服务现已支持一些最常见的流媒体格式,其中包括 Microsoft SmoothStreaming ...

  4. 动态规划（树形DP）：LNOI 2016 侦察守卫

    Sample Input 12 2 8 9 12 6 1 1 5 1 4 8 10 6 10 1 2 3 5 6 7 8 9 10 11 1 3 2 3 3 4 4 5 4 6 4 7 7 8 8 9 ...

  5. SQL SERVER 的 INFORMATION_SCHEMA 的使用

    ------------------------------------------------------- 第一个查询看看库里有多少个表,表名等 select * from INFORMATION ...

  6. Python手动构造Cookie模拟登录后获取网站页面内容

    最近有个好友让我帮忙爬取个小说,这个小说是前三十章直接可读,后面章节需要充值VIP可见.所以就需要利用VIP账户登录后,构造Cookie,再用Python的获取每章节的url,得到内容后再使用 PyQ ...

  7. HTML5 Canvas核心技术—图形、动画与游戏开发.pdf4

    CanvasRenderingContext2D对象中用于平移.旋转坐标系的方法 镜像 scale(1,-1)绘制垂直镜像:scale(-1,1)绘制水平镜像 自定义的坐标变换 transform() ...

  8. 字符编码笔记：ASCII，Unicode和UTF-8，附带 Little endian和Big endian的解释

    作者: 阮一峰 日期: 2007年10月28日 今天中午,我突然想搞清楚Unicode和UTF-8之间的关系,于是就开始在网上查资料. 结果,这个问题比我想象的复杂,从午饭后一直看到晚上9点,才算初步 ...

  9. python面向对象(二)——类成员

    Python面向对象    类成员 1.字段         普通字段    属于对象         静态字段    属于类   2.方法 普通方法   触发者是对象    括号里至少一个参数 se ...

  10. Docker&Kubernetes沙龙干货集锦：容器集群管理利器kubernetes详谈-CSDN.NET

    Docker&Kubernetes沙龙干货集锦:容器集群管理利器kubernetes详谈-CSDN.NET undefined Package - crawler undefined 科学网- ...