2015年度WEB开发实验室第一次Seminar.

主讲人:Rod Hollins

课件下载:

PPT: web技术简介-全栈之路.pptx (下载455)

PDF: web技术简介-全栈之路.pdf (下载492)

一、从Web谈起

0. 互联网

互联网(Internet),又称网际网路,或音译因特网、英特网,是网络与网络之间所串连成的庞大网络,这些网络以一组标准的网络TCP/IP协议族相连,链接全世界几十亿个设备,形成逻辑上的单一巨大国际网络。这是一个网络的网络。

1. Web的定义

万维网是一个由许多互相链接的超文本组成的系统,通过互联网访问。在这个系统中,每个有用的事物,称为一样“资源”;并且由一个全域“统一资源标识符”(URI)标识;这些资源通过超文本传输协议(Hypertext Transfer Protocol)传送给用户,而后者通过点击链接来获得资源。

2. Web的特点

2.1 图形化

【2015年度Seminar】(一)Web技术简介 全栈之路-Web开发实验室

Web非常流行的一个很重要的原因就在于它可以在一页上同时显示色彩丰富的图形和文本的性能。

2.2 平台无关

【2015年度Seminar】(一)Web技术简介 全栈之路-Web开发实验室

无论你的系统平台是什么,你都可以通过internet访问www

2.3 分布式

大量的图形、音频和视频信息会占用相当大的磁盘空间,我们甚至无法预知信息的多少。对于web没有必要把所有信息都放在一起,信息可以放在不同的站点上,只需要在浏览器中指明这个站点就可以了。

2.4 动态的

Web站点的管理者常常可以对站上的信息进行更新。如:院网站

2.5 交互的

web的交互性首先表现在它的超链接上,用户的浏览顺序和所到站点完全由他自己决定;另外通过填写form可以向服务器提交请求。

 

3. Web的表现形式

3.1 超文本

超文本是一种用户接口范式,用以显示文本及与文本相关的内容。

超文本的格式有很多,最常使用的是HTML(超文本标记语言)和RTF(富文本格式)。

Web就是一种超文本信息系统,使得文本不再像像一本书一样是固定的线性的。而是可以从一个位置跳到另一个位置,这是这种多连接性把它称为web。

3.2 超媒体

【2015年度Seminar】(一)Web技术简介 全栈之路-Web开发实验室

超媒体是一种采用非线性网状结构对块状多媒体信息(包括图像、视频等)进行组织和管理的技术。

3.3 超文本传输协议

超文本传输协议(HTTP)Hyper Transfer Protocol 是超文本在互联网上的传输协议。

4.  Web的发展

  • Web 1.0
  • Web 2.0
  • Web 3.0

二、Web应用

1. 常见Web应用

  • 购物网站
  • 新闻网站
  • 论坛(品知人大)
  • 网络游戏(LOL)
  • QQ等聊天工具

2. Web应用的两种模式

  • C/S:指的是客户端/服务器端程序,需要在客户机上安装客户端才能使用。如:LOL
  • B/S:指的是浏览器端/服务器端程序。这类程序一般借助浏览器运行。

3. B/S基本构成

3.1 浏览器

【2015年度Seminar】(一)Web技术简介 全栈之路-Web开发实验室

浏览器是指可以显示网页服务器或者文件系统的HTML文件(标准通用标记语言的一个应用)内容,并让用户与这些文件交互的一种软件。

3.2 服务器

【2015年度Seminar】(一)Web技术简介 全栈之路-Web开发实验室此处的服务器指的是web服务器,可以响应用户各种请求

3.3  请求响应过程

【2015年度Seminar】(一)Web技术简介 全栈之路-Web开发实验室

【2015年度Seminar】(一)Web技术简介 全栈之路-Web开发实验室

3.4 B/S优点

  • 可以随时随地进行查询、浏览等业务处理。
  • 业务扩展简单方便
  • 维护简单方便,只需要服务器上的代码,即可实现所有用户的同步更新。
  • 开发简单

三、Web技术简介

1.客户端技术

Web客户端的主要任务是展现信息内容。

Web客户端设计技术主要包括:

  • HTML
    • HTML是Hypertext Markup Language(超文本标记语言)的缩写,它是构成Web页面的主要骨架。
  • CSS
    • CSS是Cascading Style Sheet(层叠样式表)的缩写,它决定了web页面的样式。
  • JavaScript
    • JavaScript和Java没有半毛钱关系
    • 一种直译式脚本语言,是一种动态类型、弱类型、基于原型的语言,内置支持类型
    • 丰富的JS库:jQuery等
  • ......

2. 服务端技术

与Web客户端技术的演进过程类似,Web服务端的开发技术也是由静态向动态逐渐发展、完善起来的。

Web服务器技术主要包括JSP(Servlet)、 PHP、CGI、 ASP、ASP.NET。

2.1 JSP

  • Java EE
  • 全名为Java Server Pages
  • 它实现了Html语法中的java扩展(以 <%, %>形式)
  • Servlet和JSP是Java EE的核心技术。
  • Spring, Struts, Hibernate

2.2 PHP

  • Personal Home Page Tools
  • PHP语言将HTML代码和PHP指令合成为完整的服务端动态页面,Web应用的开发者可以用一种更加简便、快捷的方式实现动态Web功能。

2.3 CGI(Common Gateway Interface)

  • 最早的Web服务器简单地响应浏览器发来的HTTP请求,并将存储在服务器上的HTML文件返回给浏览器。CGI是第一种使服务器能根据运行时的具体情况,动态生成HTML页面的技术。随着CGI技术的普及,聊天室、论坛、电子商务、信息查询、全文检索等各式各样的Web应用蓬勃兴起,人们可以享受到信息检索、信息交换、信息处理等各更为便捷的信息服务了。

2.4 ASP, ASP.NET

  • Active Server Page
  • ASP是微软公司开发的代替CGI脚本程序的一种应用
  • ASP.NET是.NET FrameWork的一部分,是一项微软公司的技术,它把界面设计和程序设计以不同的文件分离开,复用性和维护性得到了提高。

四、全栈之路

  • 运行环境
  • 语言
  • 数据
  • 协议
  • 算法
  • 第三方服务
  • 版本控制(Git, SVN)
  • 编辑器
  • 格子衬衣
  • 修电脑…

【2015年度Seminar】(一)Web技术简介 全栈之路-Web开发实验室

五、HTML简介

5.1 简介

  • Hyper Text Markup Language 超文本标记语言
  • 不是一种编程语言,而是一种标记语言
  • HTML 使用标记标签来描述网页。

5.2 工具

  • 文本编辑器:sublime text
  • 浏览器:chrome

5.3 HTML标签

  • HTML 标签是由尖括号包围的关键词,比如 <html>;
  • HTML标签通常是成对出现的,比如 <div> 和 </div>;
  • 有的是自闭合标签,比如:<br />

【2015年度Seminar】(一)Web技术简介 全栈之路-Web开发实验室

常用标签

  • <h1>-<h6>
  • <p>
  • <a>
  • <div>
  • <img>
  • <table>

5.4 发展

现在我们常常习惯于用数字来描述HTML的版本(如:HTML5),但是最初的时候我们并没有HTML1,而是 1993年IETF团队的一个草案,并不是成型的标准。第一阶段

  • 现在我们常常习惯于用数字来描述HTML的版本(如:HTML5),但是最初的时候我们并没有HTML1,而是 1993年IETF团队的一个草案,并不是成型的标准。

第二阶段:

  • 两年之后,在1995年HTML有了第二版,即HTML2.0,当时是作为RFC1866发布的。

第三阶段:

  • 有了以上的两个历史版本,HTML的发展可谓突飞猛进。1996年HTML3.2成为W3C推荐标准。之后在1997年和1999年,作为升级版本的4.0和4.01也相继成为W3C的推荐标准。

第四阶段:

  • 在2000年基于HTML4.01的ISO HTML成为了国际标准化组织和国际电工委员会的标准。于是被沿用至今,这期间虽然有点小的改动但大方向上终归没有什么变化。

第五阶段:

  • 2014年10月29日,万维网联盟宣布,经过接近8年的艰苦努力,HTML5标准规范终于制定完成。

学习网站

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

http://www.baidu.com/

2015/10/11