前端开发初识

Posted 2020-12-02 wj-1314

一，前端开发的概念

　　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是页面的行为