Sublime Text使用心得(一)_html/css_WEB-ITnose

WBOY
Release: 2016-06-24 11:38:06
Original
1104 people have browsed it

  以前写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')
Copy after login

参考资料: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,菜单栏:Preference->Package Settings->View In Browser->Settings-User

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

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

五、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

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

html:4s

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

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="en"> 3 <head> 4     <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> 5     <title>Document</title> 6 </head> 7 <body> 8      9 </body>10 </html>
Copy after login

html:5

 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4     <meta charset="UTF-8"> 5     <title>Document</title> 6 </head> 7 <body> 8      9 </body>10 </html>
Copy after login

 

六、引用其他文件

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

source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template