以前写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文件则可以直接引用