前端开发初识(附前端学习路径图)

时间:2020-03-26
本文章向大家介绍前端开发初识(附前端学习路径图),主要包括前端开发初识(附前端学习路径图)使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。

一,前端开发的概念

  Web前端开发是从网页制作演变而来(以前称为网页制作),名称上有很明显的时代特征。在互联网的演化进程中,网页制作是Web1.0时代的产物,早期网站主要内容都是静态,以图片和文字为主,用户使用网站的行为也以浏览为主。随着互联网技术的发展和HTML5、CSS3的应用,现代网页更加美观,交互效果显著,功能更加强大。

1.1 web1.0时代的网页制作

  web1.0时代是一个群雄并起,逐鹿网络的时代,虽然各个网站采用的手段和方法不同,但第一代互联网有诸多共同的特征,表现在技术创新主导模式、基于点击流量的盈利共通点、门户合流、明晰的主营兼营产业结构、动态网站。在WEB1.0上做出巨大贡献的公司有Netscape,Yahoo和Google。 Netscape研发出第一个大规模商用的浏览器,Yahoo的杨致远提出了互联网黄页, 而Google后来居上,推出了大受欢迎的搜索服务。

  网页制作是web1.0时代的产物,那个时候的网页主要是静态网页,所谓的静态网页就是没有与用户进行交互而仅仅供读者浏览的网页,我们当时称为“牛皮癣”网页。例如一篇QQ日志、一篇博文等展示性文章。在web1.0时代,用户能做的唯一事情就是浏览这个网站的文字图片内容,这时用户也不能像现在在大多数网站都可以评论交流(缺乏交互性)。相信可能大多数人都听过“网页三剑客 Dreamweaver+Fireworks+Flash”吧,这个组合就是web1.0时代额产物

1.2 web2.0时代的网页制作

  “前端开发”是从“网页制作”演变而来的。

  从2005年开始,互联网进入web 2.0时代,由单一的文字和图片组成的静态网页已经不能满足用户的需求,用户需要更好的体验。在web 2.0时代,网页有静态网页和动态网页。所谓动态网页,就是用户不仅仅可以浏览网页,还可以与服务器进行交互。举个例子,你登陆新浪微博,要输入账号密码,这个时候就需要服务器对你的账号和密码进行验证通过才行。web2.0时代的网页不仅包含炫丽的动画、音频和视频,还可以让用户在网页中进行评论交流、上传和下载文件等(交互性)。这个时代的网页,如果是用“网页三剑客Dreamweaver+Fireworks+Flash”制作的,那是远远不能满足需求。现在网站开发无论是开发难度,还是开发方式上,都更接近传统的网站后台开发,所以现在不再叫“网页制作”,而是叫“web前端开发”。

  所以,处于web2.0时代的你,如果要学习网站开发技术,就不要再相信所谓的“网页三剑客Dreamweaver+Fireworks+Flash”,因为这个组合已经是上个互联网时代的产物。而且这个组合开发出来的网站问题也非常多,例如代码冗余、网站维护困难(学习到后期,你会知道为什么不用这个组合了

web2.0的历史发展

  2001年秋天互联网公司(dot-com)泡沫的破灭是互联网的一个转折点。许多人断定互联网被过分炒作,事实上网络泡沫和相继而来的股市大衰退看起来像是所有技术革命的共同特征。股市大衰退通常标志着蒸蒸日上的技术已经开始占领中央舞台。
假冒者被驱逐,而真正成功的故事展示了它们的力量,同时人们开始理解了是什么将一个故事同另外一个区分开来。   “Web
2.0”的概念2004年始于出版社经营者O'Reilly和MediaLive International之间的一场头脑风暴论坛。身为互联网先驱和O'Reilly副总裁,Dale Dougherty指出,伴随着令人激动的新程序和新网站间惊人的规律性,互联网不仅远没有“崩溃”,甚至比以往更重要。
更进一步说,那些得以活过泡沫破裂的公司之间似乎拥有某种相同点。难道是互联网泡沫破裂标志着互联网的一个转折点,因而导致了诸如“Web
2.0”这种运动?我们同意这种说法,“Web 2.0”的概念由此诞生了。Web2.0 则更注重用户的交互作用,用户既是网站内容的浏览者,也是网站内容的制造者。
所谓网站内容的制造者是说互联网上的每一个用户不再仅仅是互联网的读者,同时也成为互联网的作者;不再仅仅是在互联网上冲浪,同时也成为波浪制造者;在模式上由单纯的“读”向“写”以及“共同建设”发展;由被动地接收互联网信息向主动创造互联网信息发展,从而更加人性化。   在那个会议之后的一年半的时间里,“Web
2.0”一词已经深入人心,从Google上可以搜索到4.7亿以上的链接。但是,至今关于Web 2.0的含义仍存在极大的分歧,一些人将Web 2.0贬低为毫无意义的一个行销炒作口号,而其他一些人则将之理解为一种新的传统理念

二,前端开发的发展历程

  2005年以后,互联网进入Web2.0时代,各种类似桌面软件的Web应用大量涌现,网站的前端由此发生了翻天覆地的变化。网页不再只是承载单一的文字和图片,各种富媒体让网页的内容更加生动,网页上软件化的交互形式为用户提供了更好的使用体验,这些都是基于前端技术实现的。以前会Photoshop和Dreamweaver就可以制作网页,现在只掌握这些已经远远不够了。无论是开发难度上,还是开发方式上,现在的网页制作都更接近传统的网站后台开发,所以现在不再叫网页制作,而是叫Web前端开发。Web前端开发在产品开发环节中的作用变得越来越重要,而且需要专业的前端工程师才能做好,这方面的专业人才近几年来备受青睐。Web前端开发是一项很特殊的工作,涵盖的知识面非常广,既有具体的技术,又有抽象的理念。简单地说,它的主要职能就是把网站的界面更好地呈现给用户。

三,web前端能做什么?

  公司官网(在PC通过浏览器来访问公司网站)移动端网页(在手机上来浏览公司信息、小游戏等)移动端APP(例如:淘宝、去哪儿旅游、携程等)微信小程序(微信最新推出的功能,随用随装,不占用手机空间)皮皮虾我们走可乐在厨房 红牛在冰箱66666。前端开发所学技术由简单到难,所以在很多网站上你会看到“七天入门前端”的视频博客等等,也就是说一星期就学会了HTML+CSS。那么最基本的页面你就可以书写了。

3.1 web前端开发的职责是什么?

  • 1、使用Div+css并结合Javascript负责产品的前端开发和页面制作; 
  • 2、熟悉W3C标准和各主流浏览器在前端开发中的差异,能熟练运用DIV+CSS,提供针对不同浏览器的前端页面解决方案;
  • 3、负责相关产品的需求以及前端程序的实现,提供合理的前端架构;
  • 4、与产品、后台开发人员保持良好沟通,能快速理解、消化各方需求,并落实为具体的开发工作;
  • 5、了解服务器端的相关工作,在交互体验、产品设计等方面有自己的见解。

四,前端开发都有哪些内容

  我们知道,用所谓的网页三剑客已经不能满足需求了,那前端开发究竟要学习什么技术呢?网页最主要由3部分组成:结构、表现和行为。网页现在新的标准是W3C,目前模式是HTML、CSS和JavaScript。

  掌握HTML是网页的核心,是一种制作万维网页面的标准语言,是万维网浏览器使用的一种语言,它消除了不同计算机之间信息交流的障碍。因此,它是目前网络上应用最为广泛的语言,也是构成网页文档的主要语言,学好HTML是成为Web开发人员的基本条件。
  学好CSS是网页外观的重要一点,CSS可以帮助把网页外观做得更加美观。
  学习JavaScript的基本语法,以及如何使用JavaScript编程将会提高开发人员的个人技能。
  了解Unix和Linux的基本知识虽然这两点很基础,但是开发人员了解Unix和Linux的基本知识是有益无害的。
  了解Web服务器当你对Apache的基本配置,htaccess配置技巧有一些掌握的话,将来必定受益,而且这方面的知识学起来也相对容易。

4.1 需要熟练掌握的技能

  熟悉版本控制系统的用法熟悉使用一种优秀的版本控制系统,你在实际工作中就会发现精通一种版本控制系统是很幸福的事情。
学好Web框架当你掌握了HTML,服务器端脚本语言,CSS和JavaScript后,就应该找一个Web框架加快你的Web开发速度,使用框架可以节约你很多时间,如果你使用PHP,可选的框架有CakePHP,CodeIgniter,Zend等,Python程序员喜欢使用Django和 webpy,Ruby程序员喜欢使用RoR。
对于初学开发人员来说,以上知识是不是看起来很复杂,其实,当你一步步学习并为企业开发成功案例时,你会发现一切都是有意义的付出。

4.2 较强的视觉设计

  前端技术包括4个部分:前端美工、浏览器兼容、CSS、HTML“传统”技术与Adobe AIR、Google Gears,以及概念性较强的交互式设计,艺术性较强的视觉设计等等。
  根据该词可以做这样的理解,用互联网来做比喻,凡是通过浏览器到用户端计算机的统称为前端技术.相反存贮于服务器端的统称为后端技术。

4.3 HTML是什么?

  HTML,全称“Hyper Text Markup Language(超文本标记语言)”简单来说,网页就是用HTML语言制作的。HTML是一门描述性语言,是一门非常容易入门的语言。

4.4  CSS

CSS,全称“(层叠样式表)”。以后我们在别的地方看到“层叠样式表”、“CSS样式”,指的就是CSS。

4.5 JavaScript

JavaScript是一门脚本语言。

4.6 HTML、CSS和JavaScript的区别 我们都知道前端技术最核心的是HTML、CSS和JavaScript这三种。但是这三者究竟是干嘛的呢?

“HTML是网页的结构,CSS是网页的外观,而JavaScript是页面的行为

五,前端学习路径图

5.1 概述图

地址:https://www.processon.com/view/link/5d3a5947e4b0511f13134ced#map

原文地址:https://www.cnblogs.com/tu240302975/p/12572871.html