前端开发初识

一,前端开发的概念

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

  

原文地址:https://www.cnblogs.com/wj-1314/p/9216848.html

时间: 2024-11-13 09:44:23

前端开发初识的相关文章

7招提升你的前端开发效率

7招提升你的前端开发效率 前言 前端工程师其实是一个工作很杂的职位,除了要负责切图.写html/css/js外,还要解决一系列的浏览器兼容性.网页性能优化等问题,所以提高前端工程师的开发效率是势在必行的,也是前端工程化的体现. 对于开发效率,我个人理解是 开发效率 = 新增代码的效率 + 修改代码的效率 + 维护代码的效率 那么如何提高前端开发效率便可以按照前端工程化的理念来进行划分.下面我就介绍下7个提高前端开发效率的方法. 前端工程化 方法 1.切图 切图是一个前端最基础的技能,一般我们使用

提升前端开发效率

7招提升你的前端开发效率 前言 前端工程师其实是一个工作很杂的职位,除了要负责切图.写html/css/js外,还要解决一系列的浏览器兼容性.网页性能优化等问题,所以提高前端工程师的开发效率是势在必行的,也是前端工程化的体现. 对于开发效率,我个人理解是 开发效率 = 新增代码的效率 + 修改代码的效率 + 维护代码的效率 那么如何提高前端开发效率便可以按照前端工程化的理念来进行划分.下面我就介绍下7个提高前端开发效率的方法. 前端工程化 方法 1.切图 切图是一个前端最基础的技能,一般我们使用

Web前端开发高手进阶

js框架+Ajax技术01.初识javascript及其语言基础(一)02.初识javascript及其语言基础(二)03.初识javascript及其语言基础(三)及js原始数据类型(一)04.javascript原始数据类型(二)05.javascript原始数据类型(三)06.javascript原始数据类型(四)07.javascript原始数据类型(五)及数组(一)08.javascript 数组(二)09.javascript 数组(三)10.函数.Math.Date.RegExp(

麦子学院-Web前端开发工程师系列培训教程

HTML+CSS基础入门1.课程介绍2.html的语法3.html的基本结构4.html的文档设置标记上(格式标记)5.html的文档设置标记下(文本标记)6.html图像标记img7.html超链接的使用8.html表格相关的标记9.html表格实战<简单的网页布局>10.html框架详解与框架布局实战11.HTML表单设计(上)12.HTML表单设计(下)13.使用CSS样式的方式14.定义CSS样式(CSS选择器)15.CSS常用属性(颜色属性)16.css常用属性(字体相关属性)17.

前端开发【第2篇:CSS】

鸡血 样式的属性多达几千个,但别担心,按照80-20原则,常用的也就几十个,你完全可以掌握它. Css初识 HTML的诞生 早期只有HTML的时候为了让HTML更美观一点,当时页面的开发者会把颜色写到标签里面,想想一下一堆标签一堆属性:颜色.字体等,总结一个字就是“乱” 为了解决这个问题,万维网联盟(W3C),这个非营利的标准化联盟,肩负起了 HTML 标准化的使命,并在 HTML 4.0 之外创造出样式(Style). 所有的主流浏览器均支持层叠样式表. CSS语法和CSS优先级 1.CSS

极客学院Web前端开发技术实战视频教程 初级入门+高级实战++专家课程+面试指导

===============课程目录=============== ├<初级中级>│  ├<1. HTML5开发前准备>│  │  ├1.HTML5开发前准备.mp4│  │  └2.开发前的准备-快捷键.mp4│  ├<10. React.js>│  │  ├React.js简介.txt│  │  ├<1.React 概述>│  │  │  ├React 开发环境搭建.mp4│  │  │  ├编写第一个 React 程序.mp4│  │  │  └什么

前端开发笔记(2)css基础(上)

CSS介绍 层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言.CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化.CSS 能够对网页中元素位置的排版进行像素级精确控制,支持几乎所有的字体字号样式,拥有对网页对象和模型样式编辑的能力. <style type="text/css"> span{ color:red;

Web 前端开发学习之路(入门篇)

字数1374 阅读4622 评论0 喜欢49 以前学习过一段时间的web前端开发,整理了一些我看过的/我认为比较好的学习资料(网站.书籍).不要问我为啥没有进阶版,我只是一条产品汪而已,求轻喷.== 以下引用知乎 @李路 的话. 以我的经验,大部分技术,熟读下列四类书籍即可. 入门,用浅显的语言和方式讲述正确的道理和方法,如head first系列全面,巨细无遗地探讨每个细节,遇到疑难问题时往往可以在这里得到理论解答,如Definitive Guide/Programming xx系列实践,结合

互联网前端开发技术栈

互联网前端开发技术栈 前言 互联网建立60多年了,网站开发技术日新月异,但web前端始终离不开浏览器,最终还是HTML+JavaScript+CSS这3个核心,围绕这3个核心而开发出来大量技术框架/解决方案. 我从2000年初开始做网站开发,使用的技术不断迭代,一些消失了,更多的出现了. 最近写过  .NET技术大系概览 (迄今为止最全的.NET技术栈) ,相信很多网友感叹掌握的.NET技术远没有这个技术栈里面所描述的多. 问题 大家是否想过: Web前端开发究竟包含哪些技术呢? 我所掌握的技术