前端介绍(前端的发展史)

一.前端的演变

1.web1.0时代的网页制作

网页制作是web1.0时代的产物，那个时候的网页主要是静态网页，所谓的静态网页就是没有与用户进行交互而仅仅供读者浏览的网页，我们当时称为“牛皮癣”网页

例如一篇QQ日志、一篇博文等展示性文章; 在web1.0时代，用户能做的唯一事情就是浏览这个网站的文字图片内容，这时用户也不能像现在在大多数网站都可以评论交流(缺乏交互性)

相信可能大多数人都听过“网页三剑客 Dreamweaver+Fireworks+Flash”吧，这个组合就是web1.0时代额产物

2.web2.0时代的前端开发

"前端开发"是从"网页制作"演变而来的

从2005年开始，互联网进入web 2.0时代，由单一的文字和图片组成的静态网页已经不能满足用户的需求，用户需要更好的体验

在web 2.0时代，网页有静态网页和动态网页。

所谓动态网页，就是用户不仅仅可以浏览网页，还可以与服务器进行交互。举个例子，你登陆新浪微博，要输入账号密码，这个时候就需要服务器对你的账号和密码进行验证通过才行。

web2.0时代的网页不仅包含炫丽的动画、音频和视频，还可以让用户在网页中进行评论交流、上传和下载文件等（交互性）。这个时代的网页，如果是用“网页三剑客Dreamweaver+Fireworks+Flash”制作的，那是远远不能满足需求。

现在网站开发无论是开发难度，还是开发方式上，都更接近传统的网站后台开发，所以现在不再叫“网页制作”，而是叫“web前端开发”。

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

二.web前端是什么

通俗的讲, Web前端就是展示位用户一张经过设计的网页, 用户可以在网页上进行交互等操作完成自己的需求

三.web前端的运用

公司官网（在PC通过浏览器来访问公司网站）
移动端网页（在手机上来浏览公司信息、小游戏等）
移动端APP（例如：淘宝、去哪儿旅游、携程等）
微信小程序（微信最新推出的功能，随用随装，不占用手机空间）

四.web前端包含哪些技术

一般来讲, 网页主要有三部分组成 : 结构、样式、动态行为, 对应的语言分别是HTML、CSS、JavaScript

1.HTML

HTML，全称"Hyper Text Markup Language(超文本标记语言)"

简单来说，网页就是用HTML语言制作的; HTML是一门描述性语言，是一门非常容易入门的语言

from标签用户名:
密码:

2.CSS

CSS，全称"(层叠样式表)"

主要是用来美化HTML元素的，最新的CSS3.0在浏览器的支持下还可以实现一些简单动画效果

边框阴影

蟹老板打皮球

3.JavaScript

JavaScript是一门脚本语言, (与Java没有关系)

JavaScript可以为网页提供前端数据校验、前后端数据传输等功能

4.三种语言的配合

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

如果我们把前端开发的过程比喻成"建房子"，做一个网页就像盖一栋房子

先把房子结构建好(HTML)
建好房子之后给房子装修(CSS), 例如往窗户安上窗帘、往地板铺上漂亮的瓷砖
最后呢, 装修完了之后, 当夜幕降临的时候, 我们要开灯(JavaScript), 这样才能看得见里面

五.开发环境

1.开发编辑器

市面上有很多的HTML编辑器可以选择，常见的Hbuild、Sublime Text、Dreamweare都可以用来开发HTML, 当然PyCharm也支持HTML开发

2.浏览器

浏览器在本地也能打开html文件，浏览器就跟解释器一样，从上倒下，从左到右

全球共有五大浏览器厂商，我们主要以chrome为主

ie 浏览器
chrome (Google浏览器)
firfox (火狐浏览器)
safri (Mac计算机浏览器)
persto (欧朋浏览器Opera, presto是内核)

浏览器内核不同，浏览器渲染引擎不同

世界最早浏览器, 网景浏览(Netscape), 因为想做操作系统

后来微软利用windows操作系统的市场占有率，提供了免费浏览器ie

中国最早浏览器ie6，国企内就用ie6

ps : 学前端一半工作在考虑兼容性，目前html5在兼容性方面解决的比较好

3.文件后缀名规范

DOS系统（win95或win98）下只能支持长度为3的后缀名，所以老版本的系统一直在用.htm后缀
但在windows后缀长度可以大于3位，所以windows下无所谓htm与html，html是为长文件的格式命名的
如果文件后缀是.htm，毫无疑问，浏览器也可以兼容，但推荐使用.html

前端介绍(前端的发展史)相关推荐

guns系统前端介绍
guns系统前端介绍前端项目结构 guns-base-support/guns-sys/src/main/webapp 扩展插件以及全局js文件全局html模板 guns-vip-main/src ...
web标准浏览器介绍开发工具介绍 HTML介绍 HTML颜色介绍规范 HTML结构详解 {前端之前端初识}...
前端之前端初识前端初识本节目录一 web标准二浏览器介绍三开发工具介绍四 HTML介绍五 HTML颜色介绍六规范七 HTML结构详解一 web标准 web准备介绍: 1.w3 ...
web前端介绍_html-超文本标记语言
web 前端简介 1. web1.0 时代的网页制作 Web应用程序是一种可以通过Web访问的应用程序,程序的最大好处是用户很容易访问应用程序,用户只需要有浏览器即可,不需要再安装其他软件应用程序有两 ...
猿来小课web前端介绍html语言基础学习
HTML是一种超文本标记语言,属于互联网开发技术里面的前端开发技术.同时也是计算机和你所访问的Web站点的沟通语言.当你访问Web服务器所寄存的站点并与其交互时,Web服务器会接收到来自你的浏览器的请 ...
Front-end_1_前端介绍
Front-end_1_前端介绍全栈工程师:前端+后端 1.前端和后端什么是前端? 任何与用户直接打交道的操作节目都可以称之为前端 eg: 电脑界面手机界面平板界面什么是后端? 后端类似幕后 ...
微前端解决方案初探 01 微前端介绍、价值、如何实现、systemjs 模块化方案
什么是微前端微前端是一种软件架构,可以将前端应用拆解成一些更小的能够独立开发部署的微型应用,然后再将这些微应用进行组合使其成为整体应用的架构模式. 微前端架构类似于组件架构,但不同的是,组件不能独立 ...
GMTC 大前端时代前端监控的最佳实践
摘要: 今天我分享的内容分成三个部分: 第一部分是"大前端时代前端监控新的变化", 讲述这些年来,前端监控一些新的视角以及最前沿的一些思考. 第二部分"前端监控的最佳实践 ...
前端入门前端自学路线 web开发前端如何学习
本文介绍前端入门之路,以及之后对前端应该怎么学,大概学哪些东西.作者在前端.后端入门的时候,花了大量时间到CSDN.知乎.百度上去找资料,但是有的说的不是太复杂, 就是一句话带过,那个时候很苦恼.现在 ...
零基础不建议学前端_web前端开发零基础怎样入门-哈尔滨前端学习
web前端开发零基础怎样入门-哈尔滨前端学习,俗话说,知己知彼,百战百胜.要想学好web前端,首先要了解什么是web前端,下面由小编来给大家介绍一下: 1什么是web? Web就是在Http协议基础之 ...