Web技术PPT祥解课件.ppt

1、一、Web技术概述二、常用Web技术C/S模式和B/S模式Web相关定义Web起源与发展理解WebWeb工作原理Web开发平台的组成及网页制作工具C/S模式： 前端：客户机，几乎所有的应用逻辑都在客户端进行和表达，客户机完成与用户的交互任务。 后端：服务器，负责后台数据的查询和管理、大规模的计算等服务。B/S模式： B/S模式是一种基于Web的协同计算模式，是一种三层架构的瘦客户机/肥服务器的计算模式。 客户端表示层客户端表示层 应用服务器层应用服务器层 数据中心层数据中心层C/S模式与B/S模式比较： 指标指标C/SC/S（两层结构）（两层结构）B/SB/S（三层结构）（三层结构）客户端客户

2、端的负载的负载所有业务逻辑都必须安装在客户端，客户端负担过重效率低可以将部分业务逻辑安装在原因服务器上，减少客户端负载对数据库服务器对数据库服务器性能的影响性能的影响每个客户端都必须和数据库直接相连，占用数据库资源，数据库负载加重，性能下降只有应用服务器和数据库相连，由应用服务器处理客户端对数据库的相连请求，降低了对数据库资源的占用网络流量网络流量和负载和负载客户端直接使用SQL语句访问后台数据库，网络流量较大数据以交易包的形式传输，网络流量较小，客户端可共享应用服务器中公共数据，节省带宽，提高反应速度系统结构系统结构及工作量及工作量客户端直接连接后台数据库，结构和编程简单，工作量较小结构较复

3、杂，编程工作量和难度较大什么是Web （ World Wide Web/WWW ）？ Web是互联网上的一种服务，它使用超文本技术将遍布全球的各种信息资源链接起来，以便于用户的浏览。 Web是建立在客户机服务器（ClientServer）模型之上，以HTML语言和HTTP协议为基础，能够提供面向各种Internet服务的、一致的用户界面的一种信息服务系统互联网与Web是一个概念吗？ 互联网和Web是两个完全不同的概念。互联网是Web的基础平台，Web是互联网平台上的一种应用层服务。什么是Web服务器？WWW服务器、网站服务器、站点服务器将本地的信息用超文本（Hypertext）组织，为用户在I

4、nternet上搜索和浏览信息提供服务。Web服务器实际上就是一个软件系统。一台计算机可以充当多个Web服务器，为提高用户的访问效率，一般情况下一台计算机只充当一个Web服务器；为提供大量用户的访问，多台计算机可以形成集群，只提供一个Web服务。平常，我们将只充当一个Web服务器的一台计算机就叫做Web服务器。什么是Web页面？ Web在提供信息服务之前，所有信息都必须以文件方式事先存放在Web服务器所管辖磁盘中某个文件夹下，包含了由超文本标记语言HTML(HyperText Markup Language)组成的文本文件，即超链接文件、网页文件，或Web页面文件（Web Page）。 当用户

5、通过浏览器在地址栏输入访问网站的网址时，实际上就是向某个Web服务器发出调用某个页面的请求。Web服务器收到页面调用请求后，从磁盘中调出该网页进行相关处理后，传回给浏览器显示。在这里，Web服务器作为一个软件系统，用于管理Web页面，并使这些页面通过本地网络或Internet供客户浏览器使用。什么是Web页面？ C/S模式和B/S模式Web相关定义Web起源与发展理解WebWeb工作原理Web开发平台的组成及网页制作工具早期Internet对普通用户的局限性：信息组织、展现形式90年，Tim Berners-Lee， WebWeb最初起源于二十世纪八十年代末期。当时，CERN（欧洲粒子物理实验

6、室）的Tim Berners-Lee提出一项计划，其目的是使科学家之间能方便地交流、检索资料。Tim Berners-Lee创建了超文本文档描述语言，以及在客户 和服务器之间传送文档的交互协议，这些就是HTML和HTTP的雏形。Web在CERN内部得到了广泛的应用，此后逐渐推广到 Internet上。93年，Web Browser Mosaic1993年，伊利诺斯大学的国家超级计算机中心 NCSA(National Center for Supercomputing Applications)开发了一个带有GUI的Web客户端浏览器软件Mosaic，受到了人们普遍的欢迎。从此，Web就开始迅猛

7、增长。 Web1.0 Web2.0 Web3.0 用户 通过浏览器获取信息 更注重用户的交互作用，用户既是网站内容的浏览者，也是网站内容的制造者。 Web发展的需求 经过1989年诞生以来的发展，Web的内容已经从“静态网页”发展为 “动态网页”。1. 接受请求接受请求2. 找到静态找到静态 网页网页3. 返回网页返回网页客户端客户端服务器端服务器端发回网页发回网页发出请求发出请求1. 接受请求接受请求2. 找到动态找到动态网页网页3. 执行程序执行程序代码，代码，生成生成静态网页静态网页4. 发送网页发送网页客户端客户端服务器端服务器端发回网页发回网页发出请求发出请求静态网页与动态网页静态网

8、页：纯静态：只包括单纯的文本或图像无法交互 如大学简介如大学简介URLURL的后缀是的后缀是. .htmhtm、.html.html、. .shtmlshtml、.xml.xml 浏览器端交互式：加入Javascript 或Vbscript脚本代码 仍然是静态网页，它不需要Web服务器做任何工作动态网页在传统的静态页面中加入各种程序和逻辑控制，实现浏览器客户端和Web服务器的动态信息交互 aspx、.jsp、 .asp、.php、.perl、.cgi 为后缀 如用户注册、用户登录、在线调查、用户管理、订单管理静态网页工作原理浏览器端服务器端编写web页发出请求定位html文件浏览器处理html

9、返回html文件到浏览器每个静态网页都是保存在服务器上的一个独立的文件 动态网页工作原理接受请求找到动态网页发送网页服务器端执行程序代码生成网页浏览器端动态网页的优势动态网页：(1) 以数据库技术为基础可以大大降低网站维护的工作量；(2) 可以实现更多交互功能如用户注册、用户登录、在线调查、用户管理、订单管理等(3)动态网页是由服务器动态生成的 它实际上并不是事先写好的、独立存在Web服务器上的网页文件，只有当用户请求时服务器才动态生成一个网页，并返回一个完整的网页到客户端浏览器。C/S模式和B/S模式Web相关定义Web起源与发展理解WebWeb工作原理Web开发平台的组成及网页制作工具1）

10、Web是Internet提供的一种服务。2）Web是一个巨大的信息宝库。3）Web上的信息彼此关联。4）Web上的信息保存在Web站点中。5）Web简单易用。2022-6-220C/S模式和B/S模式Web相关定义Web起源与发展理解WebWeb工作原理Web开发平台的组成及网页制作工具2022-6-222URL：统一资源定位符Uniform Resource Locator:确定某信息的位置格式：/：端口号 例子 ： http:/ /:70ftp: /ftp.w3.org/pub/www/doc超文本传输协议事务处理由4个步骤组成：（1）客户端与服务器建立连接；（2）客户端向服务器提出请求；

11、（3）如果请求被接受，则服务器送回响应，在响应中包括状态码和所需的文件；（4）客户端和服务器断开连接。HTTP协议HyperText Transfer ProtocolIP地址识别Internet中主机及网络设备的唯一标识表示方法：网络地址+主机地址，长度为4个字节（32bit），由3个用“.”分隔的十进制数组成，每个数不大于255，如210.29.135.122 A类：用于规模很大主机数目很多的网络 B类：用于中型到大型的网络 C类：用于小型本地网络（LAN） 思考：IPv4 IPv6？域名DNS：域名服务器，为主机分配字符名称，即域名，并实现域名与IP地址的转换 如： com 商业组织 e

12、du教育机构 gov政府部门 mil军事部门 net网络中心 org非盈利性组织 int国际组织端口port一台拥有IP地址的主机可以提供许多服务，比如Web服务、FTP服务、SMTP服务如何区分服务：端口网络上的服务：IP(域名) + 端口http:/:8080/FTP：21，web：80，这些端口也可自己指定01023：常用端口，绑定特定服务，固定的102465535之间的端口是动态端口，不固定分配。每个网络程序通信都要通过端口的，如QQ、BT、迅雷等思考： 要唯一标识网络中某主机上的一个运行的程序(进程)需要几个元素?网络中的一个进程的唯一标识为:主机地址+进程地址(端口号)FTP服务i

13、nternet主机在网络中地址（ip地址或者域名）进程在主机中的地址（端口号:0-65535）C/S模式和B/S模式Web相关定义Web起源与发展理解WebWeb工作原理Web开发平台的组成及网页制作工具Web相关定义Web起源与发展理解WebWeb工作原理C/S模式和B/S模式Web开发平台的组成及网页制作工具Web开发平台 .NET开发平台 Java EE开发平台网页制作工具 Sausage HotDog Professional Adobe Dreamweaver、Fireworks、Flash、Golive Microsoft FrontPage Microsoft Visual St

14、udio 2005（VS2005） IBM Eclipse Web客户端技术Web服务器端技术HTML语言 HTML是Hypertext Markup Language（超文本标记语言）的缩写，它是构成Web页面的主要工具。Java Applets Java Applets，即Java小应用程序。使用Java语言创建小应用程序，浏览器可以将Java Applets从服务器下载到浏览器，在浏览器所在的机器上运行。脚本程序 嵌入在HTML文档中的程序。使用脚本程序可以创建动态页面，大大提高交互性。CSS（级联样式表） CSS大大提高了开发者对信息展现格式的控制能力。DHTML（动态HTML） 实现

15、HTML页面的动态效果，无须启动Java虚拟机或其他脚本环境，可在浏览器的支持下，获得更好的展现效果和更高的执行效率。插件技术 常见的插件QuickTime、Realplayer、Media Player和Flash等VRML技术 创建三维对象最重要的工具，它是一种基于文本的语言，并可运行于任何平台。服务器技术 有关Web服务器构建的基本技术CGI(Common Gateway Interface)技术 公共网关接口技术。最早的Web服务器简单地响应浏览器发来的HTTP请求，并将存储在服务器上的HTML文件返回给浏览器。PHP(Personal Home Page Tools)技术 PHP语言

16、将HTML代码和PHP指令合成为完整的服务端动态页面，Web应用的开发者可以用一种更加简便、快捷的方式实现动态Web功能。ASP(Active Server Pages)技术 活动服务器页面技术。ASP使用的脚本语言是VBScript和Javascript。ASP.NET技术 面向下一代企业级网络计算的Web平台，是对传统ASP技术的重大升级和更新。Servlet、JSP技术 JSP的组合让Java开发者同时拥有了类似CGI程序的集中处理功能和类似PHP的HTML嵌入功能3.0 附：Web编程基础HTTP协议简介HTML静态网页与动态网页3.0.2HTML简介HTML:超文本标记语言(Hype

17、r Text Markup Language)WWW上的专用语言：描述页面内容和结构HTML文档:它能独立于各种操作系统平台 扩展名为.html 或 .htmHTML文档的编写方法： (1)手工编写： 如记事本 (2)用可视化所见即所得的HTML编辑工具设计 Frontpage，dreamwaver (3)格式转换工具： 现有的其它格式文档(如WORD文档）转换成HTML文档。 (4)由Web服务器实时动态地生成HTML文档 Jsp、aspx、servletHTML语法Html文档是带有标记的文本文件 1.成对出现的标记 这是我的第一个的HTML文档 2.只有开始标志,没有结束标志现在我开始H

18、TML学习，这是第一次学习 3.标志嵌套这是我的第一次学习 4.带有属性的标志 这是我的第一个HTML文档2) HTML文档的结构窗口标题向浏览器说明向浏览器说明HTML版本，放在文档开头版本，放在文档开头HTML的头的头包含文档的标题，显示在浏览器的窗口标包含文档的标题，显示在浏览器的窗口标题栏题栏 、样式、样式、索引索引用于搜索工具搜索的信息用于搜索工具搜索的信息文档的正文，浏览器中要显示的所有标志文档的正文，浏览器中要显示的所有标志和属性和属性 MyHtml.html !- This is my HTML page. 索引，用于搜索工具搜索索引，用于搜索工具搜索说明所使用的说明所使用的c

19、ss样式表样式表浏览器窗口标题头浏览器窗口标题头正文正文浏览器窗口标题头浏览器窗口标题头索引，用于搜索工具搜索索引，用于搜索工具搜索浏览器窗口标题头浏览器窗口标题头说明所使用的说明所使用的css样式表样式表索引，用于搜索工具搜索索引，用于搜索工具搜索浏览器窗口标题头浏览器窗口标题头正文正文说明所使用的说明所使用的css样式表样式表索引，用于搜索工具搜索索引，用于搜索工具搜索浏览器窗口标题头浏览器窗口标题头例：登录界面 P30 提交表单数据提交表单数据 欢迎登录系统欢迎登录系统 用户名用户名 密码密码 标题标题1，黑体，居中，黑体，居中 表单，提交到表单，提交到getpostData.class

20、 ，方法是，方法是post 表格居中，占整个窗口的表格居中，占整个窗口的30%，边宽，边宽2，用属性设置，用属性设置tr是表格一行，是表格一行，td是一个单元格是一个单元格 ，占一行的57%，用div排版，输入框，类型是文本输入，控件名为username，按钮，类型是submit按钮，控件名为Submit，按钮上显示的文本是”提交“创建一个HTML文档设置文档标题和其它在网页中不显示的信息设置文档的标题最大的标题黑体字斜体字加重文本（通常是斜体加黑体）设置字体大小从1到7，颜色使用名字或RGB十六进制值创建一个段落将段落按左、中、右对齐换行插入一个回车换行符用来排版大块HTML段落，也用于格式化表创建超文本链接创建自动发送电子邮件的链接创建一个表格表格中的每一行表格中一行中的每一个格子设置表格头:通常是黑体居中文字设置表格格子的水平对齐方(left, center，right，justify）设置表格格子的水平对齐方式(left, center，right，justify）创建表单action=.接收数据的服务器的URLmethod=“.”HTTP的方法（get，post）。其中get是被反对使用的单行文本输入区域，size设置以字符串宽度创建提交（submit）按钮创建重置（reset）按钮