最近要去面试一家游戏开发公司,前端,所以准备一下html css javascript,先说一下最近前端页面编辑器,通过知乎上大致了解到,比较流行的编辑器如下:
在IDE百花齐放的今天，被谈论的最多的IDE有：Sublime Text、Webstorm、VScode、Atom、Brackets等等.
于是我下载了Sublime Text3
1)百度软件中心下载地址 http://rj.baidu.com/soft/detail/15554.html?ald
2)sublimetext官网 http://www.sublimetext.com/
我直接在百度软件中心下载的,sublimetext3,查阅优快云论坛,推荐下载package control管理安装包,于是在package
control官网
https://packagecontrol.io/installation
下载插件控制,官网上的安装说明很简单,如下:
- step1.Click the Preferences > Browse Packages… menu
- step2.Browse up a folder and then into the Installed Packages/ folder
- step3.Download Package Control.sublime-package and copy it into theInstalled Packages/ directory
- step4.Restart Sublime Text
重启sublimetext3,查看"首选项"下面是否有"插件控制",即package control---package settings
此外,除了官网推荐的安装方法,也可以使用如下方式
安装package control
1.按ctrl+`调出console
2. 粘贴这个到最底部的命令行并回车
import urllib.request,os; pf = 'Package Control.sublime-package'; 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())
3. 重启sublime text 3
4. 如果在perferences--package settings中看到package control 则安装成功
2. 粘贴这个到最底部的命令行并回车
import urllib.request,os; pf = 'Package Control.sublime-package'; 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())
3. 重启sublime text 3
4. 如果在perferences--package settings中看到package control 则安装成功
我的安装目录是C:\Program Files (x86)\Sublime Text3\Packages
Sublime Text功能简介:是一个代码编辑器,也是HTML和散文先进的文本编辑器,拥有漂亮的用户界面和非凡的功能,例如迷你
地图,多选择,Python的插件,代码段等等.完全可以自定义键绑定,菜单和工具栏.Sublime Text主要功能包括:拼写检查,书签,完整的
Python API,Goto功能,即时项目切换,多选择,多窗口等.
插件安装及常用常见:
在Sublime Text中，按Ctrl+Shift+P打开命令行模式;
插件推荐
(2)常用插件一
(2)常用插件一
- ConvertToUTF8:解决GBK中文乱码问题的比较间的解决方案。
- Emmet: 可以称为编写前端的神器,主要体现在它快捷的编写上,下面简单介绍以下emmet的使用:(更多介绍可以参考
http://blog.youkuaiyun.com/mengwuyoulin/article/details/43056733)
- SublimeEnhancements: 这个插件可以给SublimeText的边栏菜单带来扩充的功能.
Emmet常用技巧：（输入简写，ctrl+e可触发效果）
1.生成html5的初始结构： 输入! 然后ctrl+E即可
2.连续输入元素名称和ID，Emmet会自动为你补全.
2.1) 比如输入p#foo会生成<p id="foo"></p>
2.2) 比如输入p.bar#foo会生成<p class="bar" id="foo"></p>
1.生成html5的初始结构： 输入! 然后ctrl+E即可
2.连续输入元素名称和ID，Emmet会自动为你补全.
2.1) 比如输入p#foo会生成<p id="foo"></p>
2.2) 比如输入p.bar#foo会生成<p class="bar" id="foo"></p>
3.定义属性和内容。
3.1) 输入：h1{foo}对应<h1>foo</h1>
3.2) 输入：a[href=#]对应<a href="#"></a>
4.嵌套
3.1) 输入：h1{foo}对应<h1>foo</h1>
3.2) 输入：a[href=#]对应<a href="#"></a>
4.嵌套
通过emmet，可以轻松实现标签的嵌套，基本用法如下；
4.1) >：子元素符号，表示嵌套的元素
4.2) +：同级标签符号
4.3) ^：可以使该符号前的标签提升一行
例如:输入li+li 转成 <li></li> <li></li>
输入h>a 变成<h><a href=""></a></h>
5.多个标签
要定义多个标签，可以直接在元素后 *数字即可
5.1例如:输入：ul>li{item$}*3
变成
<ul>
<li>item1</li>
<li>item2</li>
<li>item3</li>
</ul>
其中的$代码编号，可以用"$@-反向编号。
6. 属性值的简写
例如要定义元素宽度，可以直接w100 直接是width: 100px;
很多这样的简写，这里就不一一列举了。单位上来说e表示em，x表示ex。
例如输入：h100e+w200x得到height: 100em; width: 200ex;
7. 元素填充
有时候需要添加一些填充文字，可以直接输入lorem
emment会给我们生成一些文字，可用于测试页面填充文字的效果。
7.1)即输入：lorem会得到：
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel laudantium,
quasi iusto repellendus deserunt eaque cumque a, architecto, animi
laboriosam beatae magnam. Nesciunt sunt itaque impedit ea dolorem atque tempora?
7.2)更多的用法可以参考官网。
4.2) +：同级标签符号
4.3) ^：可以使该符号前的标签提升一行
例如:输入li+li 转成 <li></li> <li></li>
输入h>a 变成<h><a href=""></a></h>
5.多个标签
要定义多个标签，可以直接在元素后 *数字即可
5.1例如:输入：ul>li{item$}*3
变成
<ul>
<li>item1</li>
<li>item2</li>
<li>item3</li>
</ul>
其中的$代码编号，可以用"$@-反向编号。
6. 属性值的简写
例如要定义元素宽度，可以直接w100 直接是width: 100px;
很多这样的简写，这里就不一一列举了。单位上来说e表示em，x表示ex。
例如输入：h100e+w200x得到height: 100em; width: 200ex;
7. 元素填充
有时候需要添加一些填充文字，可以直接输入lorem
emment会给我们生成一些文字，可用于测试页面填充文字的效果。
7.1)即输入：lorem会得到：
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel laudantium,
quasi iusto repellendus deserunt eaque cumque a, architecto, animi
laboriosam beatae magnam. Nesciunt sunt itaque impedit ea dolorem atque tempora?
7.2)更多的用法可以参考官网。
顶
0
踩
0
上一篇OKHttp从入门到放弃(自己编写测试服务端)
下一篇Retrofit使用入门
相关文章推荐
• 开始使用Sublime Text 2
• 【直播】大中型UGC信息网站SEO分享--乔向阳
• 从零开始使用CubeMX创建以太网工程
• 【直播】打通Linux脉络 进程、线程和调度--宋宝华
• sublime text3 简体中文版【2014.09.07更新】
• 【直播】Java最佳学习路线指导--肖海鹏
• Sublime Text3工具的安装、破解、VIM功能vintage插件教程（已经实践、绝对可用）
• 【套餐】C++音视频实战技术套餐--夏曹俊
• Beginning WordPress 3（开始使用WordPress3）
• 【套餐】0基础拿下HTML5和CSS3--李仁密
• Sublime Text 3 常用快捷键
• 【套餐】机器学习之数学基础系列--AI100
• 开始使用Microwindows和Nano-X
• sublime Text3中使用sublimeGit插件
• 开始使用MT4平台智能交易系统（PPT图文教程）
• Sublime Text 3 的插件开发——Email
查看评论
暂无评论
发表评论
用 户 名：
Apple2011866741
评论内容：
插入代码
提交
* 以上用户言论只代表其个人观点，不代表优快云网站的观点或立场
个人资料
访问我的空间
Reoger
1
访问：21378次
积分：684
等级：
排名：千里之外
原创：47篇转载：1篇译文：0篇评论：13条
我的github
文章搜索
搜索
文章分类
java基础(20)
类型转换(2)
android 基础(25)
属性动画(1)
c/c++(2)
基础算法(4)
算法基础(5)
贪心(1)
c++(3)
android基础(0)
css基础-html(2)
TextView(1)
Html(2)
网络安全基础应用与标准-第5-版(1)
音乐播放器(1)
文章存档
2017年08月(6)
2017年07月(1)
2017年05月(2)
2017年04月(6)
2017年03月(6)
展开
阅读排行
解决ListView的item监听事件个子控件监听事件冲突问题(3031)
将String中的字符串分解成单个的单词(1994)
Activity数据保存探索(1141)
手机服务器微架构与实现(1102)
android 中传递对象两种方法探索（Serializable，Parcelable）(1003)
java实现随机字符串添加到List中并排序(907)
换零钱实现之贪心算法(873)
java 中的观察者模式实现之接口回调(817)
OKHttp从入门到放弃(自己编写测试服务端)(751)
android实现tab切换效果(728)
评论排行
OKHttp从入门到放弃(自己编写测试服务端)(5)
解决ListView的item监听事件个子控件监听事件冲突问题(2)
利用Viewpager实现引导界面(2)
java 中的观察者模式实现之接口回调(1)
自定义带Button的通知，并实现对Button的监听(1)
利用属性动画实现动态菜单的效果(1)
手机服务器微架构与实现(1)
跳石板(0)
利用回溯（试探）法生成彩票组合(0)
Java中的类型转换和进制转换(0)
推荐文章
* 优快云日报20170828——《4个方法快速打造你的阅读清单》
* 优快云博客模板调查问卷
* 动手打造史上最简单的 Recycleview 侧滑菜单
* TCP网络通讯如何解决分包粘包问题
* 程序员的八重境界
* 四大线程池详解
查看我的简书文章
最新评论
OKHttp从入门到放弃(自己编写测试服务端)
Reoger: @uglyant:可以参考一下我上传的代码，有服务端的代码。我估计是你服务端属性名字和Android...
利用Viewpager实现引导界面
Reoger: 多写两遍就记住了，是在记不住就记录下来。我也没学多久，一起加油。
利用Viewpager实现引导界面
宋小智: 我是刚学的新手，觉着你们好厉害啊。能记住那么多的函数和用法。
手机服务器微架构与实现
zeng201314: 谢谢，这种精神值得学习，我看了一天没弄懂，就没学了
解决ListView的item监听事件个子控件监听事件冲突问题
YY793924556: 想问下楼主你说的ps的时间怎么解决，设置item布局优先获得焦点是否可以？？在子控件点击时间完成以后...
利用属性动画实现动态菜单的效果
Kevin-Cai: 565665
自定义带Button的通知，并实现对Button的监听
Kevin-Cai: 66666
java 中的观察者模式实现之接口回调
Kevin-Cai: 666666
解决ListView的item监听事件个子控件监听事件冲突问题
Reoger: android
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
