技术干货丨网页基础篇之安利一款开发工具
Posted 星空us
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了技术干货丨网页基础篇之安利一款开发工具相关的知识，希望对你有一定的参考价值。
每个人都有一个属于自己的星空
话说，工欲善其事，必先利其器，那么学习做网站的第一步当然是先了解最常用的代码编辑sublime text啦。
https://www.sublimetext.com/
下载成功后打开就是下面那样子。
首先来了解一下网站代码的基本布局。
代码快捷生成方法之一：生成带有 id 、class 的 html 标签
E代表HTML标签
E#id 代表id属性
E.class 代表class属性
一个最基本的网站代码就实现了。
刚打开sublime text试一下上面的快捷方法，却发现没有任何反应，这是为啥呢？
因为你没有安装插件呀。
安装插件
插件可以通过package control安装，一般新安装的sublime text默认没package control 组件，那么这个组件的安装步骤如下：
1) 打开控制台（Ctrl + `） ，然后输入一下代码并按回车
Importurllib.request,os;pf='PackageControl.sublimepackage';ipp=sublime.installed_packages_path();urllib.request.install_opener(urllib.request.build_opener(urllib.request.ProxyHandler()));open(os.path.join(ipp,pf),'wb').write(urllib.request.urlopen('http://sublime.wbond.net/'+pf.replace(' ','%20')).read())
2) 然后重启sublime text，在 Perferences->Package Settings 中看到 Package Control，则表示安装成功
如果使用package control安装出现问题，可以直接将安装包解压到packages 目录（菜单->Preferences->Packages）。
那么刚才那个插件的是？
-Emmet（原名为Zen Coding），它可以实现HTML/CSS的快速编辑。
其他一些较常用的插件：
- jsFormat，用于格式化js文件。默认快捷键Ctrl+Alt+F。
- CSScomb，用于CSS属性排序。CSS样式中属性排序规则：先外部 > 再自身 > 后内部。
csscomb的预览效果如下：
- CSS Compact Expand，用于CSS属性的展开和收缩，收缩CSS代码为一行，或展开CSS代码为多行显示。
- ColorPicker，在 Sublime Text 中，你可以使用内置的颜色选择器。快捷键为Ctrl / Cmd + Shift + C。
- Bracket Highlighter，可以在左侧高亮显示匹配的括号、引号和标签，[], (), {}, “”, ‘’, 等甚至是自定义的标签，。安装好之后，不需要设置插件会自动生效
插件的介绍就到这里，还有很多插件在网上都可以找到的，百度->sublime text插件。
快捷键
除了安装插件之外，sublime text的速写方法当然还要加上快捷键。
Ctrl+D： 选词 （反复按快捷键，即可继续向下同时选中下一个相同的文本进行同时编辑）
Ctrl+J： 合并行（已选择需要合并的多行时）
Ctrl+L：选择整行（按住-继续选择下行）
Ctrl+M： 光标移动至括号内开始或结束的位置
Ctrl+K+U：改为大写
Ctrl+K+L：改为小写
Ctrl+Enter： 插入行后（快速换行）
Ctrl+/：注释当前行
Ctrl+Shift+/：当前位置插入注释
Ctrl+Alt+/：块注释，并光标聚焦到首行，写注释说明用的
Ctrl+Shift+A：选择当前标签前后，修改标签用的
Ctrl+U：还原，撤销光标位置
Ctrl+J：选择标签内容
Ctrl+F：查找内容
Ctrl+Shift+F：查找并替换
小番外
sublime text 可以用来做什么？仅仅只是写网站代码的载体而已吗？
它还可以用来写其他代码，不只是网页哦。
就主要是用来写代码的工具对吧，它可以生成网页吗？
是，不过一般都是写网页。你在那个编辑器右键在浏览器打开，然后就是一个网页了。
原来如此…
惊不惊喜！
你看懂了吗？是不是跃跃欲试，想去做一个属于自己的网页呢？
ps：如果还有什么不懂的地方，可在后台或推文下方留言，或者你想撩技术的小哥哥或小姐姐，也可以留言哟！
小预告
请期待下一次的技术干货哦，我们将推出网页基础篇之如何制作简单的静态网页。感兴趣的朋友千万不要错过哦！
内容 / 前端胖知
音乐 / A Little Story-Valentin
图片 / 前端胖知＆花瓣网
编辑 / Lion
以上是关于技术干货丨网页基础篇之安利一款开发工具的主要内容，如果未能解决你的问题，请参考以下文章