Web学"前"班~

  • A+
所属分类:Web前端
摘要

明确:前端是做什么的? 不管是前端还是后台工程师都是进行软件开发的;

明确:前端是做什么的?

不管是前端还是后台工程师都是进行软件开发的;

 

1、软件的架构?

 

软件的架构:

  • C/S架构

  • B/S架构(前端)

  

1、C/S ==> 客户端(Client)/ 服务器(Server)

  服务器:用于处理业务逻辑;

  如用户通过网络连接远程服务器再传输给另一端:例如:两个人用QQ聊天,一端发送到服务器中转再传输到另一端;

  特点:

(1)软件使用前必须安装;

(2)软件更新时,服务器与客户端同时更新;

(3)软件不能跨平台(例如 不同系统,不同设备如手机电脑)使用;

(4)一般系统软件都是CS架构的(比如安卓系统等);

  安全性:客户端和服务器采用的是 自有协议(相当于密码本,两方通信),相对比较安全;

 

2、B/S ==> 浏览器(Browsers)/ 服务器(Server)

  B/S架构本质上也属于C/S架构,B/S架构的软件一般通过访问一个页面形式来使用;

  使用浏览器作为软件客户端,通过浏览器访问网页的形式访问软件,而将一些运算操作放到远端服务器上,这样降低了对客户端的要求,只需计算机安装一个浏览器即可;我们所学习的前端属于B/S;

  特点:

(1)软件使用不需要安装,直接浏览器访问网址即可;

(2)软件更新时,客户端不需要更新,远端服务器更新即可;

(3)可以跨平台使用,只要系统中有浏览器软件即可,成本相对低;

(4)既是应用类独立软件,也是网页版能打开的网页(如京东,淘宝);

  安全性:客户端和服务器采用的是 HTTP协议(不太安全),有另一种协议 https 相对安全(如网银);

 

2、软件开发流程

1、流程:用户提需求——美工PS设置网页(图)——前端做成静态网页(代码链接)——后台工程师改为动态网页(JSP服务器代码);

2、工作模式:前端提需求,后台提供服务器代码,而不让他改,自己排版代码,以防自己设计好的格局错乱;

3、任务:前端编写的网页会在整个项目的最前端由用户查看,所以前端工程师需要和各个部分的工程师进行衔接与沟通;

4、体系:前端是入门简单,后面难,学的东西多,需要不断吸取知识,杂而不深;java是入门难,后面简单,深而不杂;若前端和后台都可以写则属于全栈工程师;

 

3、W3C万维网联盟标准

三项技术:结构<html>——表现<css>——行为<javascript>

1、结构-HTML5:超文本标记语言,核心规范,描述页面的结构,以怎样的方式排版,例如标题、段落,相当于人的骨架(简单);

2、表现-CSS :层叠样式表,控制页面中元素的样式,以怎样的方式来表现页面,例如颜色、字体大小等,相当于人的皮肤,页面中所有能看见的东西都是css(学的东西多);

3、行为-JavaScript:动态支持脚本代码,用来响应用户操作,动态,点一个链接出现什么,相当于人的动作(难,面试,考点);

 

4、网页

1、网站是指在因特网上根据一定的规则,使用 HTML 等制作的用于展示特定内容相关的网页集合。

2、网页是网站中的一“页”,通常是 HTML 格式的文件,它要通过浏览器来阅读。

3、网页是构成网站的基本元素,它通常由图片、链接、文字、声音、视频等元素组成。通常我们看到的网页,常见以 .htm 或 .html 后缀结尾的文件,因此将其俗称为 HTML 文件。

 

5、浏览器内核

浏览器是网页显示、运行的平台。常用的浏览器有 IE、火狐(Firefox)、谷歌(Chrome)、Safari和Opera。

主流内核分为以下几个:

浏览器 内核 备注
IE Trident IE、猎豹安全、360极速浏览器、百度浏览器
firefox Gecko 可惜这几年打开速度慢、升级频繁、
Safari webkit 现在很多人错误地把 webkit 叫做 chrome内核(即使 chrome内核已经是 blink 了)。
chrome Chromium/Blink 在 Chromium 项目中研发 Blink 渲染引擎(即浏览器核心),内置于 Chrome 浏览器之中。Blink 其实是 WebKit 的分支。大部分国产浏览器最新版都采用Blink内核。二次开发
Opera Presto Presto(已经废弃) 是挪威产浏览器 opera 的 "前任" 内核,为何说是 "前任",因为最新的 opera 浏览器早已将之抛弃从而投入到了谷歌怀抱了。 现在用blink内核。

 

 

6、文档查阅

经常查阅文档是一个非常好的学习习惯。

W3C : http://www.w3school.com.cn/

MDN: https://developer.mozilla.org/zh-CN/