Web技术祥解课件

Web技术一、Web技术概述二、常用Web技术Web技术一、Web技术概述一、Web技术概述C/S模式和B/S模式Web相关定义Web起源与发展理解WebWeb工作原理Web开发平台的组成及网页制作工具一、Web技术概述C/S模式和B/S模式C/S模式与B/S模式C/S模式：

前端：客户机，几乎所有的应用逻辑都在客户端进行和表达，客户机完成与用户的交互任务。

后端：服务器，负责后台数据的查询和管理、大规模的计算等服务。C/S模式与B/S模式C/S模式：3C/S模式与B/S模式B/S模式：

B/S模式是一种基于Web的协同计算模式，是一种三层架构的瘦客户机/肥服务器的计算模式。

客户端表示层

应用服务器层

数据中心层C/S模式与B/S模式B/S模式：客户端表示层4C/S模式与B/S模式C/S模式与B/S模式比较：

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

WorldWideWeb/WWW）？

Web是互联网上的一种服务，它使用超文本技术将遍布全球的各种信息资源链接起来，以便于用户的浏览。

Web是建立在客户机／服务器（Client／Server）模型之上，以HTML语言和HTTP协议为基础，能够提供面向各种Internet服务的、一致的用户界面的一种信息服务系统Web相关定义什么是Web（WorldWideWebWeb相关定义互联网与Web是一个概念吗？

互联网和Web是两个完全不同的概念。互联网是Web的基础平台，Web是互联网平台上的一种应用层服务。Web相关定义互联网与Web是一个概念吗？Web相关定义什么是Web服务器？WWW服务器、网站服务器、站点服务器将本地的信息用超文本（Hypertext）组织，为用户在Internet上搜索和浏览信息提供服务。Web服务器实际上就是一个软件系统。一台计算机可以充当多个Web服务器，为提高用户的访问效率，一般情况下一台计算机只充当一个Web服务器；为提供大量用户的访问，多台计算机可以形成集群，只提供一个Web服务。平常，我们将只充当一个Web服务器的一台计算机就叫做Web服务器。Web相关定义什么是Web服务器？Web相关定义什么是Web页面？Web在提供信息服务之前，所有信息都必须以文件方式事先存放在Web服务器所管辖磁盘中某个文件夹下，包含了由超文本标记语言HTML(HyperTextMarkupLanguage)组成的文本文件，即超链接文件、网页文件，或Web页面文件（WebPage）。当用户通过浏览器在地址栏输入访问网站的网址时，实际上就是向某个Web服务器发出调用某个页面的请求。Web服务器收到页面调用请求后，从磁盘中调出该网页进行相关处理后，传回给浏览器显示。在这里，Web服务器作为一个软件系统，用于管理Web页面，并使这些页面通过本地网络或Internet供客户浏览器使用。Web相关定义什么是Web页面？Web相关定义什么是Web页面？

Web相关定义什么是Web页面？一、Web技术概述C/S模式和B/S模式Web相关定义Web起源与发展理解WebWeb工作原理Web开发平台的组成及网页制作工具一、Web技术概述C/S模式和B/S模式11Web的起源与发展早期Internet对普通用户的局限性：信息组织、展现形式…90年，TimBerners-Lee，WebWeb最初起源于二十世纪八十年代末期。当时，CERN（欧洲粒子物理实验室）的TimBerners-Lee提出一项计划，其目的是使科学家之间能方便地交流、检索资料。TimBerners-Lee创建了超文本文档描述语言，以及在客户和服务器之间传送文档的交互协议，这些就是HTML和HTTP的雏形。Web在CERN内部得到了广泛的应用，此后逐渐推广到Internet上。93年，WebBrowserMosaic1993年，伊利诺斯大学的国家超级计算机中心NCSA(NationalCenterforSupercomputingApplications)开发了一个带有GUI的Web客户端浏览器软件Mosaic，受到了人们普遍的欢迎。从此，Web就开始迅猛增长。Web的起源与发展早期Internet对普通用户的局限性：信Web技术的发展阶段Web1.0Web2.0

Web3.0

用户通过浏览器获取信息更注重用户的交互作用，用户既是网站内容的浏览者，也是网站内容的制造者。

Web技术的发展阶段13Web的起源与发展Web发展的需求经过1989年诞生以来的发展，Web的内容已经从“静态网页”发展为“动态网页”。.接受请求.找到静态网页.返回网页客户端服务器端发回网页发出请求1.接受请求2.找到动态网页3.执行程序代码，生成静态网页4.发送网页客户端服务器端发回网页发出请求Web的起源与发展Web发展的需求.接受请求客户端服务器端静态网页与动态网页静态网页：纯静态：只包括单纯的文本或图像——无法交互如大学简介URL的后缀是.htm、.html、.shtml、.xml

浏览器端交互式：加入Javascript或Vbscript脚本代码——仍然是静态网页，它不需要Web服务器做任何工作动态网页在传统的静态页面中加入各种程序和逻辑控制，实现浏览器客户端和Web服务器的动态信息交互aspx、.jsp、.asp、.php、.perl、.cgi为后缀

如用户注册、用户登录、在线调查、用户管理、订单管理静态网页与动态网页静态网页：15静态网页工作原理浏览器端服务器端①编写web页②发出请求③定位html文件⑤浏览器处理html④返回html文件到浏览器每个静态网页都是保存在服务器上的一个独立的文件静态网页工作原理浏览器端服务器端①编写web页②发出请求③定16动态网页工作原理接受请求找到动态网页发送网页服务器端执行程序代码生成网页浏览器端动态网页工作原理接受请求找到动态网页发送网页服务器端执行程序17动态网页的优势动态网页：(1)以数据库技术为基础可以大大降低网站维护的工作量；(2)可以实现更多交互功能如用户注册、用户登录、在线调查、用户管理、订单管理等(3)动态网页是由服务器动态生成的它实际上并不是事先写好的、独立存在Web服务器上的网页文件，只有当用户请求时服务器才动态生成一个网页，并返回一个完整的网页到客户端浏览器。动态网页的优势动态网页：18一、Web技术概述C/S模式和B/S模式Web相关定义Web起源与发展理解WebWeb工作原理Web开发平台的组成及网页制作工具一、Web技术概述C/S模式和B/S模式19理解Web1）Web是Internet提供的一种服务。2）Web是一个巨大的信息宝库。3）Web上的信息彼此关联。4）Web上的信息保存在Web站点中。5）Web简单易用。2023/1/520理解Web1）Web是Internet提供的一种服务。202一、Web技术概述C/S模式和B/S模式Web相关定义Web起源与发展理解WebWeb工作原理Web开发平台的组成及网页制作工具一、Web技术概述C/S模式和B/S模式21Web工作原理2023/1/522Web工作原理2022/12/2722URL：统一资源定位符UniformResourceLocator:确定某信息的位置格式：<信息服务类型>：//<信息资源地址>/<文件路径>：端口号

例子：/5/zsjy.aspx5/telnet://:70ftp:///pub/www/docURL：统一资源定位符UniformResourceLo23超文本传输协议事务处理由4个步骤组成：（1）客户端与服务器建立连接；（2）客户端向服务器提出请求；（3）如果请求被接受，则服务器送回响应，在响应中包括状态码和所需的文件；（4）客户端和服务器断开连接。HTTP协议

HyperTextTransferProtocol超文本传输协议HTTP协议

HyperTextTransf24IP地址识别Internet中主机及网络设备的唯一标识表示方法：网络地址+主机地址，长度为4个字节（32bit），由3个用“.”分隔的十进制数组成，每个数不大于255，如22

A类：用于规模很大主机数目很多的网络B类：用于中型到大型的网络C类：用于小型本地网络（LAN）

思考：IPv4IPv6？IP地址识别Internet中主机及网络设备的唯一标识25域名DNS：域名服务器，为主机分配字符名称，即域名，并实现域名与IP地址的转换如：com 商业组织edu 教育机构gov 政府部门mil 军事部门net 网络中心org 非盈利性组织int 国际组织域名DNS：域名服务器，为主机分配字符名称，即域名，并实现域26端口port一台拥有IP地址的主机可以提供许多服务，比如Web服务、FTP服务、SMTP服务如何区分服务：端口网络上的服务：IP(域名)+端口:8080/FTP：21，web：80，这些端口也可自己指定0～1023：常用端口，绑定特定服务，固定的1024～65535之间的端口是动态端口，不固定分配。每个网络程序通信都要通过端口的，如QQ、BT、迅雷等端口port一台拥有IP地址的主机可以提供许多服务，比如We27思考：要唯一标识网络中某主机上的一个运行的程序(进程)需要几个元素?网络中的一个进程的唯一标识为:主机地址+进程地址(端口号)FTP服务internet主机在网络中地址（ip地址或者域名）进程在主机中的地址（端口号:0-65535）思考：要唯一标识网络中某主机上的一个运行的程序(进程)需要28一、Web技术概述C/S模式和B/S模式Web相关定义Web起源与发展理解WebWeb工作原理Web开发平台的组成及网页制作工具一、Web技术概述C/S模式和B/S模式29一、Web技术概述Web相关定义Web起源与发展理解WebWeb工作原理C/S模式和B/S模式Web开发平台的组成及网页制作工具一、Web技术概述Web相关定义Web开发平台的组成及网页制作工具

Web开发平台◆

.NET开发平台◆

JavaEE开发平台网页制作工具◆

SausageHotDogProfessional◆

AdobeDreamweaver、Fireworks、Flash、Golive◆

MicrosoftFrontPage◆MicrosoftVisualStudio2005（VS2005）◆IBMEclipse

Web开发平台的组成及网页制作工具

Web开发平台二、常用Web技术Web客户端技术Web服务器端技术二、常用Web技术Web客户端技术Web客户端技术HTML语言

HTML是HypertextMarkupLanguage（超文本标记语言）的缩写，它是构成Web页面的主要工具。JavaApplets

JavaApplets，即Java小应用程序。使用Java语言创建小应用程序，浏览器可以将JavaApplets从服务器下载到浏览器，在浏览器所在的机器上运行。脚本程序

嵌入在HTML文档中的程序。使用脚本程序可以创建动态页面，大大提高交互性。Web客户端技术HTML语言Web客户端技术CSS（级联样式表）CSS大大提高了开发者对信息展现格式的控制能力。DHTML（动态HTML）实现HTML页面的动态效果，无须启动Java虚拟机或其他脚本环境，可在浏览器的支持下，获得更好的展现效果和更高的执行效率。插件技术常见的插件QuickTime、Realplayer、MediaPlayer和Flash等VRML技术创建三维对象最重要的工具，它是一种基于文本的语言，并可运行于任何平台。Web客户端技术CSS（级联样式表）

Web服务端技术

服务器技术

有关Web服务器构建的基本技术CGI(CommonGatewayInterface)技术公共网关接口技术。最早的Web服务器简单地响应浏览器发来的HTTP请求，并将存储在服务器上的HTML文件返回给浏览器。PHP(PersonalHomePageTools)技术

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

Web服务端技术

服务器技术Web服务端技术ASP(ActiveServerPages)技术活动服务器页面技术。ASP使用的脚本语言是VBScript和Javascript。ASP.NET技术

面向下一代企业级网络计算的Web平台，是对传统ASP技术的重大升级和更新。Servlet、JSP技术JSP的组合让Java开发者同时拥有了类似CGI程序的集中处理功能和类似PHP的HTML嵌入功能Web服务端技术ASP(ActiveServerPage3.0附：Web编程基础HTTP协议简介HTML静态网页与动态网页3.0附：Web编程基础HTTP协议简介373.0.2HTML简介HTML:超文本标记语言(HyperTextMarkupLanguage)WWW上的专用语言：描述页面内容和结构HTML文档:它能独立于各种操作系统平台扩展名为.html或.htmHTML文档的编写方法：(1)手工编写： 如记事本

(2)用可视化所见即所得的HTML编辑工具设计

Frontpage，dreamwaver(3)格式转换工具： 现有的其它格式文档(如WORD文档）转换成HTML文档。

(4)由Web服务器实时动态地生成HTML文档 Jsp、aspx、servlet3.0.2HTML简介HTML:超文本标记语言(Hyper38HTML语法Html文档是带有标记的文本文件<tag></tag>1.成对出现的标记

<P>这是我的第一个的HTML文档</P>

2.只有开始标志,没有结束标志<P>现在我开始HTML学习，<Br>这是第一次学习</P>

3.标志嵌套<H1><I>这是我的第一次学习</I></H1>

4.带有属性的标志

<H1align=“center”>这是我的第一个HTML文档</H1>HTML语法Html文档是带有标记的文本文件392)HTML文档的结构<!DOCTYPEHTMLPUBLIC"-//W3D//DTDHTML4.0FINAL/EN"><HTML><HEAD><TITLE>窗口标题</TITLE></HEAD><BODY></BODY></HTML>向浏览器说明HTML版本，放在文档开头HTML的头包含文档的标题，显示在浏览器的窗口标题栏<TITLE>、样式、索引——用于搜索工具搜索的信息文档的正文，浏览器中要显示的所有标志和属性2)HTML文档的结构<!DOCTYPEHTMLPUB40<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01Transitional//EN"><html><head>

<title>MyHtml.html</title>

<metahttp-equiv="keywords"content="keyword1,keyword2,keyword3">

<metahttp-equiv="description"content="thisismypage">

<metahttp-equiv="content-type"content="text/html;charset=UTF-8">

<!--<linkrel="stylesheet"type="text/css"href="./styles.css">-->

</head>

<body>ThisismyHTMLpage.<br>

</body></html>索引，用于搜索工具搜索说明所使用的css样式表浏览器窗口标题头正文浏览器窗口标题头索引，用于搜索工具搜索浏览器窗口标题头说明所使用的css样式表索引，用于搜索工具搜索浏览器窗口标题头正文说明所使用的css样式表索引，用于搜索工具搜索浏览器窗口标题头<!DOCTYPEHTMLPUBLIC"-//W3C/41例：登录界面P30例：登录界面P3042<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01Transitional//EN"><html>

<head>

<title>提交表单数据</title>

</head>

<bodybgcolor="#FFFFFF">

<h1align="center"><b>欢迎登录系统</b></h1>

<formaction="getpostdata"method="post">

<p></p>

<tablewidth="30%"align="center"boder="2">

<trbgcolor="#FFFFCC"> <tdalign="center"width="43%"><divalign="center">用户名</div></td><tdalign="center"width=57%><divalign="left"><inputtype="text"name="username"></div></td></tr><trbgcolor="#CCFF99"><tdalign="center"width="43%"><divalign="center">密码</div></td><tdalign="center"width="57%"><divalign="left"><inputtype="text"name="password"></div></td></tr></table>

<palign="center"><inputtype="reset"name="Reset"value="重置"><inputtype="submit"name="Submit2"value="提交"></p>

</form>></body></html>标题1，黑体，居中

表单，提交到getpostData.class，方法是post表格居中，占整个窗口的30%，边宽2，用属性设置tr是表格一行，td是一个单元格，占一行的57%，用div排版，输入框，类型是文本输入，控件名为username，按钮，类型是submit按钮，控件名为Submit，按钮上显示的文本是”提交“<!DOCTYPEHTMLPUBLIC"-//W3C/43<html></html>

创建一个HTML文档

<head></head>

设置文档标题和其它在网页中不显示的信息

<title></title>

设置文档的标题

<h1></h1>

最大的标题<b></b>

黑体字

<i></i>

斜体字<strong></strong>

加重文本（通常是斜体加黑体）<font

size=“”

color=“”></font>

设置字体大小从1到7，颜色使用名字或RGB十六进制值<p></p>

创建一个段落<p

align="">

将段落按左、中、右对齐<br>换行

插入一个回车换行符<div

align=“”></div>

用来排版大块HTML段落，也用于格式化表<a

href="URL"></a>

创建超文本链接

<a

href=“mailtoEMAIL”></a>

创建自动发送电子邮件的链接<table></table>

创建一个表格

<tr></tr>

表格中的每一行

<td></td>

表格中一行中的每一个格子

<th></th>

设置表格头:通常是黑体居中文字

<table

align=“”>

设置表格格子的水平对齐方(left,center，right，justify）<tr

align=“”>

设置表格格子的水平对齐方式(left,center，right，justify）

<form></form>

创建表单

action="..."接收数据的服务器的URLmethod=“...”HTTP的方法（get，

post）。其中get是被反对使用的<input

type=text

name=“username”

size=20>

单行文本输入区域，size设置以字符串宽度<input

type=“submit”name=“Submit”

value=“提交”>

创建提交（submit）按钮<input

type=“reset“name=“Reset”value=“重置”>

创建重置（reset）按钮<html></html>

创建一个HTML文档

44Web技术一、Web技术概述二、常用Web技术Web技术一、Web技术概述一、Web技术概述C/S模式和B/S模式Web相关定义Web起源与发展理解WebWeb工作原理Web开发平台的组成及网页制作工具一、Web技术概述C/S模式和B/S模式C/S模式与B/S模式C/S模式：

前端：客户机，几乎所有的应用逻辑都在客户端进行和表达，客户机完成与用户的交互任务。

后端：服务器，负责后台数据的查询和管理、大规模的计算等服务。C/S模式与B/S模式C/S模式：47C/S模式与B/S模式B/S模式：

B/S模式是一种基于Web的协同计算模式，是一种三层架构的瘦客户机/肥服务器的计算模式。

客户端表示层

应用服务器层

数据中心层C/S模式与B/S模式B/S模式：客户端表示层48C/S模式与B/S模式C/S模式与B/S模式比较：

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

WorldWideWeb/WWW）？

Web是互联网上的一种服务，它使用超文本技术将遍布全球的各种信息资源链接起来，以便于用户的浏览。

Web是建立在客户机／服务器（Client／Server）模型之上，以HTML语言和HTTP协议为基础，能够提供面向各种Internet服务的、一致的用户界面的一种信息服务系统Web相关定义什么是Web（WorldWideWebWeb相关定义互联网与Web是一个概念吗？

互联网和Web是两个完全不同的概念。互联网是Web的基础平台，Web是互联网平台上的一种应用层服务。Web相关定义互联网与Web是一个概念吗？Web相关定义什么是Web服务器？WWW服务器、网站服务器、站点服务器将本地的信息用超文本（Hypertext）组织，为用户在Internet上搜索和浏览信息提供服务。Web服务器实际上就是一个软件系统。一台计算机可以充当多个Web服务器，为提高用户的访问效率，一般情况下一台计算机只充当一个Web服务器；为提供大量用户的访问，多台计算机可以形成集群，只提供一个Web服务。平常，我们将只充当一个Web服务器的一台计算机就叫做Web服务器。Web相关定义什么是Web服务器？Web相关定义什么是Web页面？Web在提供信息服务之前，所有信息都必须以文件方式事先存放在Web服务器所管辖磁盘中某个文件夹下，包含了由超文本标记语言HTML(HyperTextMarkupLanguage)组成的文本文件，即超链接文件、网页文件，或Web页面文件（WebPage）。当用户通过浏览器在地址栏输入访问网站的网址时，实际上就是向某个Web服务器发出调用某个页面的请求。Web服务器收到页面调用请求后，从磁盘中调出该网页进行相关处理后，传回给浏览器显示。在这里，Web服务器作为一个软件系统，用于管理Web页面，并使这些页面通过本地网络或Internet供客户浏览器使用。Web相关定义什么是Web页面？Web相关定义什么是Web页面？

Web相关定义什么是Web页面？一、Web技术概述C/S模式和B/S模式Web相关定义Web起源与发展理解WebWeb工作原理Web开发平台的组成及网页制作工具一、Web技术概述C/S模式和B/S模式55Web的起源与发展早期Internet对普通用户的局限性：信息组织、展现形式…90年，TimBerners-Lee，WebWeb最初起源于二十世纪八十年代末期。当时，CERN（欧洲粒子物理实验室）的TimBerners-Lee提出一项计划，其目的是使科学家之间能方便地交流、检索资料。TimBerners-Lee创建了超文本文档描述语言，以及在客户和服务器之间传送文档的交互协议，这些就是HTML和HTTP的雏形。Web在CERN内部得到了广泛的应用，此后逐渐推广到Internet上。93年，WebBrowserMosaic1993年，伊利诺斯大学的国家超级计算机中心NCSA(NationalCenterforSupercomputingApplications)开发了一个带有GUI的Web客户端浏览器软件Mosaic，受到了人们普遍的欢迎。从此，Web就开始迅猛增长。Web的起源与发展早期Internet对普通用户的局限性：信Web技术的发展阶段Web1.0Web2.0

Web3.0

用户通过浏览器获取信息更注重用户的交互作用，用户既是网站内容的浏览者，也是网站内容的制造者。

Web技术的发展阶段57Web的起源与发展Web发展的需求经过1989年诞生以来的发展，Web的内容已经从“静态网页”发展为“动态网页”。.接受请求.找到静态网页.返回网页客户端服务器端发回网页发出请求1.接受请求2.找到动态网页3.执行程序代码，生成静态网页4.发送网页客户端服务器端发回网页发出请求Web的起源与发展Web发展的需求.接受请求客户端服务器端静态网页与动态网页静态网页：纯静态：只包括单纯的文本或图像——无法交互如大学简介URL的后缀是.htm、.html、.shtml、.xml

浏览器端交互式：加入Javascript或Vbscript脚本代码——仍然是静态网页，它不需要Web服务器做任何工作动态网页在传统的静态页面中加入各种程序和逻辑控制，实现浏览器客户端和Web服务器的动态信息交互aspx、.jsp、.asp、.php、.perl、.cgi为后缀

如用户注册、用户登录、在线调查、用户管理、订单管理静态网页与动态网页静态网页：59静态网页工作原理浏览器端服务器端①编写web页②发出请求③定位html文件⑤浏览器处理html④返回html文件到浏览器每个静态网页都是保存在服务器上的一个独立的文件静态网页工作原理浏览器端服务器端①编写web页②发出请求③定60动态网页工作原理接受请求找到动态网页发送网页服务器端执行程序代码生成网页浏览器端动态网页工作原理接受请求找到动态网页发送网页服务器端执行程序61动态网页的优势动态网页：(1)以数据库技术为基础可以大大降低网站维护的工作量；(2)可以实现更多交互功能如用户注册、用户登录、在线调查、用户管理、订单管理等(3)动态网页是由服务器动态生成的它实际上并不是事先写好的、独立存在Web服务器上的网页文件，只有当用户请求时服务器才动态生成一个网页，并返回一个完整的网页到客户端浏览器。动态网页的优势动态网页：62一、Web技术概述C/S模式和B/S模式Web相关定义Web起源与发展理解WebWeb工作原理Web开发平台的组成及网页制作工具一、Web技术概述C/S模式和B/S模式63理解Web1）Web是Internet提供的一种服务。2）Web是一个巨大的信息宝库。3）Web上的信息彼此关联。4）Web上的信息保存在Web站点中。5）Web简单易用。2023/1/564理解Web1）Web是Internet提供的一种服务。202一、Web技术概述C/S模式和B/S模式Web相关定义Web起源与发展理解WebWeb工作原理Web开发平台的组成及网页制作工具一、Web技术概述C/S模式和B/S模式65Web工作原理2023/1/566Web工作原理2022/12/2722URL：统一资源定位符UniformResourceLocator:确定某信息的位置格式：<信息服务类型>：//<信息资源地址>/<文件路径>：端口号

例子：/5/zsjy.aspx5/telnet://:70ftp:///pub/www/docURL：统一资源定位符UniformResourceLo67超文本传输协议事务处理由4个步骤组成：（1）客户端与服务器建立连接；（2）客户端向服务器提出请求；（3）如果请求被接受，则服务器送回响应，在响应中包括状态码和所需的文件；（4）客户端和服务器断开连接。HTTP协议

HyperTextTransferProtocol超文本传输协议HTTP协议

HyperTextTransf68IP地址识别Internet中主机及网络设备的唯一标识表示方法：网络地址+主机地址，长度为4个字节（32bit），由3个用“.”分隔的十进制数组成，每个数不大于255，如22

A类：用于规模很大主机数目很多的网络B类：用于中型到大型的网络C类：用于小型本地网络（LAN）

思考：IPv4IPv6？IP地址识别Internet中主机及网络设备的唯一标识69域名DNS：域名服务器，为主机分配字符名称，即域名，并实现域名与IP地址的转换如：com 商业组织edu 教育机构gov 政府部门mil 军事部门net 网络中心org 非盈利性组织int 国际组织域名DNS：域名服务器，为主机分配字符名称，即域名，并实现域70端口port一台拥有IP地址的主机可以提供许多服务，比如Web服务、FTP服务、SMTP服务如何区分服务：端口网络上的服务：IP(域名)+端口:8080/FTP：21，web：80，这些端口也可自己指定0～1023：常用端口，绑定特定服务，固定的1024～65535之间的端口是动态端口，不固定分配。每个网络程序通信都要通过端口的，如QQ、BT、迅雷等端口port一台拥有IP地址的主机可以提供许多服务，比如We71思考：要唯一标识网络中某主机上的一个运行的程序(进程)需要几个元素?网络中的一个进程的唯一标识为:主机地址+进程地址(端口号)FTP服务internet主机在网络中地址（ip地址或者域名）进程在主机中的地址（端口号:0-65535）思考：要唯一标识网络中某主机上的一个运行的程序(进程)需要72一、Web技术概述C/S模式和B/S模式Web相关定义Web起源与发展理解WebWeb工作原理Web开发平台的组成及网页制作工具一、Web技术概述C/S模式和B/S模式73一、Web技术概述Web相关定义Web起源与发展理解WebWeb工作原理C/S模式和B/S模式Web开发平台的组成及网页制作工具一、Web技术概述Web相关定义Web开发平台的组成及网页制作工具

Web开发平台◆

.NET开发平台◆

JavaEE开发平台网页制作工具◆

SausageHotDogProfessional◆

AdobeDreamweaver、Fireworks、Flash、Golive◆

MicrosoftFrontPage◆MicrosoftVisualStudio2005（VS2005）◆IBMEclipse

Web开发平台的组成及网页制作工具

Web开发平台二、常用Web技术Web客户端技术Web服务器端技术二、常用Web技术Web客户端技术Web客户端技术HTML语言

HTML是HypertextMarkupLanguage（超文本标记语言）的缩写，它是构成Web页面的主要工具。JavaApplets

JavaApplets，即Java小应用程序。使用Java语言创建小应用程序，浏览器可以将JavaApplets从服务器下载到浏览器，在浏览器所在的机器上运行。脚本程序

嵌入在HTML文档中的程序。使用脚本程序可以创建动态页面，大大提高交互性。Web客户端技术HTML语言Web客户端技术CSS（级联样式表）CSS大大提高了开发者对信息展现格式的控制能力。DHTML（动态HTML）实现HTML页面的动态效果，无须启动Java虚拟机或其他脚本环境，可在浏览器的支持下，获得更好的展现效果和更高的执行效率。插件技术常见的插件QuickTime、Realplayer、MediaPlayer和Flash等VRML技术创建三维对象最重要的工具，它是一种基于文本的语言，并可运行于任何平台。Web客户端技术CSS（级联样式表）

Web服务端技术

服务器技术

有关Web服务器构建的基本技术CGI(CommonGatewayInterface)技术公共网关接口技术。最早的Web服务器简单地响应浏览器发来的HTTP请求，并将存储在服务器上的HTML文件返回给浏览器。PHP(PersonalHomePageTools)技术

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

Web服务端技术

服务器技术Web服务端技术ASP(ActiveServerPages)技术活动服务器页面技术。ASP使用的脚本语言是VBScript和Javascript。ASP.NET技术

面向下一代企业级网络计算的Web平台，是对传统ASP技术的重大升级和更新。Servlet、JSP技术JSP的组合让Java开发者同时拥有了类似CGI程序的集中处理功能和类似PHP的HTML嵌入功能Web服务端技术ASP(ActiveServerPage3.0附：Web编程基础HTTP协议简介HTML静态网页与动态网页3.0附：Web编程基础HTTP协议简介813.0.2HTML简介HTML:超文本标记语言(HyperTextMarkupLanguage)WWW上的专用语言：描述页面内容和结构HTML文档:它能独立于各种操作系统平台扩展名为.html或.htmHTML文档的编写方法：(1)手工编写： 如记事本

(2)用可视化所见即所得的HTML编辑工具设计

Frontpage，dreamwaver(3)格式转换工具： 现有的其它格式文档(如WORD文档）转换成HTML文档。

(4)由Web服务器实时动态地生成HTML文档 Jsp、aspx、servlet3.0.2HTML简介HTML:超文本标记语言(Hyper82HTML语法Html文档是带有标记的文本文件<tag></tag>1.成对出现的标记

<P>这是我的第一个的HTML文档</P>

2.只有开始标志,没有结束标志<P>现在我开始HTML学习，<Br>这是第一次学习</P>

3.标志嵌套<H1><I>这是我的第一次学习</I></H1>

4.带有属性的标志

<H1align=“center”>这是我的第一个HTML文档</H1>HTML语法Html文档是带有标记的文本文件832)HTML文档的结构<!DOCTYPEHTMLPUBLIC"-//W3D//DTDHTML4.0FINAL/EN"><HTML><HEAD><TITLE>窗口标题</TITLE></HEAD><BODY></BODY></HTML>向浏览器说明HTML版本，放在文档开头HTML的头包含文档的标题，显示在浏览器的窗口标题栏<TITLE>、样式、索引——用于搜索工具搜索的信息文档的正文，浏览器中要显示的所有标志和属性2)HTML文档的结构<!DOCTYPEHTMLPUB84<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01Transitional//EN"><html><head>

<title>MyHtml.html</title>

<metahttp-equiv="keywords"content="keyword1,keyword2,keyword3">

<metahttp-equiv="description"content="thisismypage">

<metahttp-equiv="content-type"content="text/html;charset=UTF-8">

<!--<linkrel="stylesheet"type="text/css"href="./styles.css">-->

</head>

<body>ThisismyHTMLpage.<br>

</body></html>索引，用于搜索工具搜索说明所使用的css样式表浏览器窗口标题头正文浏览器窗口标题头索引，用于搜索工具搜索浏览器窗口标题头说明所使用的css样式表索引，用于搜索工具搜索浏览器窗口标题头正文说明所使用的css样式表索引，用于搜索工具搜索浏览器窗口标题头<!DOCTYPEHTMLPUBLIC"-//W3C/85例：登录界面P30例：登录界面P3086<!DOCTYPEHTMLPUBLI