Collection
Collection
第一部分、前端开发工具介绍
----------------------
1.编辑器的选择
Sublime Text3
1.下载(官网),
2.安装分为三部分:
2.1软件安装,会自动选择对应的操作系统,安装之后没有快捷方式,可以手工创建一个
2.2控制台的安装:便于管理第三方插件与主题;
2.3常用插件安装:用来扩展编辑器的功能,可以配置成一个强大的IDE环境来使用
推荐插件:
2.3.1 Emmet: 前端神器,用来快速编辑HTML代码
2.3.2 SublimeCodeIntel: 支持css,js,php..代码补全
2.3.3 SublimeLinter: 代码检查,需要安装Node.js环境
2.3.4 SideBarEnhancements: 右键菜单增强
推荐主题:
2.3.5 Material Theme: 定制功能超强
2.3.6 Seti_UI:从Atom移植,图标非常性感
2.3.7 Boxy Theme: 我的最爱,特别是Yesterday风格
2.3.8 Agila: 侧边目录树的样式控制是他的亮点
2.3.9 Materialize: 现代感强烈,非常商务大气,护眼舒服
3.目前我们只使用系统默认的主题就可以了,字体选择等宽,便于编程
2.浏览器的选择
Chrome谷歌浏览器
请下载64位,安装过程非常简单,要知道如何调出开发者工具
在国内不能使用谷歌搜索与谷歌应用商店,但这并不影响我们对他的喜爱
强大的控制台,让人爱不释手
FireFox火狐浏览器
功能与谷歌相差不大,也是开源的产品,有大量的第三方工具可以使用,特别是FireBug,之前是
一个外置工具,在新版中已经成了浏览器默认功能。
最大的亮点就是开发者工具,全是中文,可见火狐对中国开发者的重视,这是谷歌不能相比的。
说了这么多,我还是用谷歌,习惯了,无它。
3. 开发环境
前端开发的学习,其实是不需要服务器环境,也就是大家常说的线上环境的,只要有一个浏览器,一个编辑器就足够了,但是了模拟出一个真实的工作环境,这里还是带着大家快速创建出一个线上环境.
这个过程非常简单,新人小白不要害怕,这比你们玩的吃鸡游戏不知要简单多少倍?
3.1 下载PHP工具箱
从PHP中文网下载,可以下载完整版,内置了完整的文件,也可以下载安装包,启动时会自动远程获取文件.
今天我们只使用其中一个功能:站点域名管理
大家跟着作:
第一步:打开网站目录,创建一个项目目录:front,并创建一个示例文件: index.html,随便写点什么
第二步:打开php工具箱的:站点域名管理功能,先在本地创建一个虚拟主机,主机名叫:front.io
第三步:修改一下本机的hosts文件,相当于本机的DNS服务器,负责域名解析,将本机ip:127.0.0.1也解析到front.io
第四步: 重启服务器
第止步: 打开浏览器,输入:front.io/index.html 测试,如果能正常访问,恭喜你,一炮成功~~
如果访问失败,请检查或重复以上操作
****************************************************************************
二、前端课程介绍
--------------
我们先从一个简单的例子开始我们的前端之旅~~
(初次接触的学员可能看不懂,这是正常的不必在意,关键是体会前端的无限魅力)
1.首先看一个没有任何样式和标记的文本文件是个什么样子? 1.html
2.加上一些基本标签之后,现在看上去是不是语义明显好多了。 2.html
3.下面我们再进一步美化一下,变成一个实用的页面元素 3.html
4. 大家可能发现了,现在这个页面尽管看上去可以很好的工作了,但还是有三个问题?
第一:这个页面没有标题,这是不利于优化和阅读的;
第二:编码设置<meta charset="utf-8">不是页面内容的一部分,不应该和主体内容写在一起;
第三:样式控制<style>标签内的内容也不是页面主体的一部分,也应该有一个专门存放的地方。
如何解决?使用HTML5的文档结构就可以解决:
<meta><style><title>应该放在<head>头部
其它内容应该放在<body>中,<script>代码,如果涉及页面元素的操作,应该放在<body>底部
当面页面主要是HTML代码,CSS代码,JavaScript代码组成,我们书写的顺序是
a:先用HTML代码写出页面结构与内容
b:用CSS样式规则来美化和修饰我们的页面,因为原始的HTML样式太丑陋啦
c:最后再通过添加JS代码,来给我们的页面元素添加一些交互功能
好,现在这个页面看上去
前端课程主要有三部分内容组成:
1. 使用HTML标记语言写的主体结构与内容
2. 使用CSS规则写的页面元素显示样式
3. 使用JavaScript脚本语言写的交互脚本代码
什么脚本呢? 脚本的本意就是拍戏用的剧本,剧本上会把演员说的每一句话,以及什么时候说,全部写清楚,
也就是剧情的详细步骤,换成开发用的脚本,可以把演员想像成页面元素,其实就是一组组的标签及里面的内容,他们什么时候上场,应该出现在什么地方,全部写清楚。
目前,前端的脚本语言已经统一,也是唯一的前端脚本编程语言: JavaScript
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
