码迷,mamicode.com
首页 > 其他好文 > 详细

初识前端,拒绝迷路

时间:2018-11-11 17:56:52      阅读:251      评论:0      收藏:0      [点我收藏+]

标签:核心部分   asp   图片   学习者   拒绝   hello   事件   权威指南   提示   

前端是什么?

前端通常也称为web 前端,是指利用HTML,CSS,JavaScript等技术生成开发人员想要生成的网页。网页就是大家在浏览器所看到的,我们电脑里的.html和.jsp等等为后缀的文件也属于网页。


浏览器
无论是前端的新手学习者,还是开发人员,浏览器是我们开发和调试中必不可少的工具。常见的浏览器有Chrome(谷歌),IE,Firefox(火狐),Safari等等。
技术分享图片
由统计图中可以看出,如今使用的较火的是Chrome浏览器和IE浏览器。近几年,Firefox因为不佳的用户体验等原因逐渐减少使用量,而Safari则是属于特定的系统:Mac。在这里,我也建议大家使用Chrome浏览器,不仅体验极佳,而且对于测试方面也有很好的支持,接下来的教程也都以Chrome浏览器为例。


工欲善其事,必先利其器
想要编写前端代码,就要备有好的开发工具,以下就介绍好的开发工具

  1. 记事本
    记事本也行?听起来好像有点夸张。其实前端开发自由度很高,大家只要打开记事本,复制如下代码,保存后将后缀.txt改为.html,再使用Chrome浏览器打开即可。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HelloWorld</title>
</head>
<body>
    <b>HelloWorld</b>
</body>
</html>

但是,只有顶尖高手和傻子才会用记事本写代码,因为记忆如此多的代码很耗精力,另一个就是效率低下。所以,绝大部分的开发者都会使用更为高效的开发工具。
2.Sublime Text3
Sublime Text3作为一个尽为人知的代码编辑器,其优点不用赘述。同时支持Windows、Linux、Mac OS X等操作系统。界面整洁美观、文本功能强大,支持众多插件扩展,非常适合编写前端代码,同时也适合编写Python,JavaScript等脚本。
3.Webstorm
Webstorm的强大之处在于它对于HTML5和JavaScript的支持,代码提示,检错等功能会让开发变得得心应手。但是缺点也很明显,没有像Sublime Text3那么轻便,打开速度很慢。
4.Vim
Vim是从 vi 发展出来的一个文本编辑器。代码补全、编译及错误跳转等方便编程的功能特别丰富,是linux系统最常用的文本编辑器。
5.像其它的编辑器还有Editplus,Dreamweaver,HBuilder等等。
在这里,我建议大家使用Sublime Text3和Webstorm进行开发,二者相互配合,取两者优点,会让开发变得简单容易。
6.后面我会再推出Sublime Text3和Webstorm的教程,大家敬请期待!


看到这里,相信大家也对前端有个初步的了解了。下面就为大家介绍前端三剑客。什么是前端三剑客?就是HTML,CSS,JavaScript。
web有三个标准
1.结构标准:结构用于对网页元素进行整理的分类,主要包括HTML;
2.样式标准:表现用于设置网页元素的颜色,大小,格式等等,主要包括CSS;
3.行为标准:对网页模型进行交互,让网页不再“死气沉沉”,主要包括JavaScript;
大家还不懂的话,请看下图:
技术分享图片
以建房子为例,HTML是规划哪个地方建厨房,哪里建厕所,哪里建客厅,CSS则是指定厨房建多大,用什么样的瓷砖,用什么颜色的染料,JavaScript则是让这些房间“动起来”,门可以关上和打开,打开煤气炉就可以烧菜等等。


学习路线和书籍推荐
第一阶段:HTML和CSS 最好学会PS
HTML和CSS是入坑前端的两把钥匙,想学习前端必须先学习HTML和CSS。对于HTML和CSS的学习,不需要死记硬背,只需学会看懂就行,不懂就查,查哪里?w3c标准。学习HTML和CSS要善于查文档,熟能生巧,你就能脱离文档编写代码了!
推荐书籍:《Head First HTML与CSS》,《CSS权威指南》,《CSS揭秘》
第二阶段:JavaScript
在这个阶段,你要理解ECMAScript、Dom和Bom,懂得利用dom写一些特效,如:导航、整页滚动、轮播图、JS制作幻灯片、弹出层、手风琴菜单、瀑布流布局、滚动事件、滚差视图等等。千万不要以为这样就学会JavaScript了,路还远着呢!
推荐书籍:《Javascript DOM 编程艺术》(入门),《JavaScript高级程序设计》(强烈推荐),《高性能JavaScript》
第三阶段:HTML5和CSS3
HTML5和CSS3是对HTML和CSS的拓展和加强,拥有更多的属性,可以使用更为强大的特效。
推荐书籍:无
第四阶段:数据结构,jQuery,bootstrap
数据结构是每一门语言的核心部分,对于代码的理解和设计有很大的帮助,本阶段,学习者应该学会使用JavaScript学习数据结构和算法;jQuery是基于JavaScript的库,jq封装了很多的方法,方便开发者使用,处理了浏览器兼容,提高了兼容性,但是因为内部要作各种复杂的判断,开发效率会略微降低;bootstrap是CSS的库,很强大,提高了开发效率。
推荐书籍:《学习JavaScript数据结构与算法》,《锋利的jquery》,《Bootstrap用户手册:设计响应式网站》(非必需,可以通过bootstrap学习文档学习)
**学习到这里,相信大家对前端有自己的了解和理解了,大家可以根据自己的兴趣再从事自己的学习方向,如移动端开发,小程序开发,j2ee的开发,结合node.js,python全栈开发等等。


新手上路,如有错误麻烦大家告诉我,谢谢!

本次的学习就到此结束啦!感兴趣的读者或者想和我聊聊的请私信我,或者关注公众号:程序员吃橘子

初识前端,拒绝迷路

标签:核心部分   asp   图片   学习者   拒绝   hello   事件   权威指南   提示   

原文地址:http://blog.51cto.com/14065757/2315505

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!