HTTP协议、开发与HTML语言.ppt

《HTTP协议、开发与HTML语言.ppt》由会员分享，可在线阅读，更多相关《HTTP协议、开发与HTML语言.ppt（146页珍藏版）》请在金锄头文库上搜索。

1、三、三、HTTP协议、开发与协议、开发与HTML语言语言主要内容HTTP协议及其开发方法HTML语言 Page 2HTTPHTTP协议协议问题当我们想浏览一个网站的时候，只要在浏览器的地址栏里输入网站的地址就可以了，例如：，但是在浏览器的地址栏里面出现的却是：http:/，你知道为什么会多出一个“http”吗？“http”是什么意思呢？ Page 2HTTP协议是什么 HTTPHTTP（Hypertext Transfer Protocol）中文 “超文超文超文超文本传输协议本传输协议本传输协议本传输协议”，是一种为分布式，合作式，多媒体信息系统服务，面向应用层应用层应用层应用层的协议，是In

2、ternet上目前使用最广泛的应用层协议，它基于传输层的TCP协议进行通信，HTTP协议是通用的、无状态的协议。 功能功能功能功能：用于在服务器和客户机之间传输超文本文件。HTTP的运行原理ServerClientWebServerBrowserTCP/IPHTTP/1.0TCP/IP与HTTP我们知道，Internet的基本协议是TCP/IP协议，然而在TCP/IP模型最上层的是应用层(Applicationlayer)，它包含所有高层的协议。高层协议有：文件传输协议FTP、电子邮件传输协议SMTP、域名系统服务DNS、网络新闻传输协议NNTP和HTTP协议等。 HTTP采用采用请求请求请求

3、请求响应响应响应响应的握手方式，的握手方式，HTTP定义定义的事务处理其运作的基本过程如下图所示：的事务处理其运作的基本过程如下图所示： HTTP通信方式 Page 2HTTP协议发展史u HTTP/0.9HTTP/0.9HTTP/0.9HTTP/0.9：1990年就已经用来作为WWW的传输协议，当时非常简单，只支持GET方法，响应中携带的消息必须为HTML文件。u HTTP/1.0HTTP/1.0HTTP/1.0HTTP/1.0: 1996发布RFC1945，90年后，基于0.9的各种客户端和服务端的扩展层出不穷，把这些扩展进行综合推出新标准HTTP/1.0 。u HTTP/1.1HTTP/

4、1.1HTTP/1.1HTTP/1.1: 1997推出RFC2068，HTTP/1.1的标准。u HTTP/1.1HTTP/1.1HTTP/1.1HTTP/1.1: 1999推出RFC2616，废弃了RFC2068标准。HTTP协议的主要特点1.1.1.1.支持客户支持客户支持客户支持客户/ / / /服务器模式服务器模式服务器模式服务器模式。2.2.2.2.简单快速简单快速简单快速简单快速：客户向服务器请求服务时，只需传送请求方法和路径。请求方法常用的有GET、HEAD、POST。每种方法规定了客户与服务器联系的类型不同。3.3.3.3.灵活灵活灵活灵活：HTTP允许传输任意类型的数据对象。

5、正在传输的类型由Content-Type加以标记。4.4.4.4.无连接无连接无连接无连接：无连接的含义是限制每次连接只处理一个请求。服务器处理完客户的请求，并收到客户的应答后，即断开连接。采用这种方式可以节省传输时间。5.5.5.5.无状态无状态无状态无状态：HTTP协议是无状态协议。无状态是指协议对于事务处理没有记忆能力（服务器不记得曾经访问过的用户，也不记得曾经访问过多少次），该功能可使读取页面信息完成的较迅速。请求/响应交互模型InternetWeb服务器客户机(浏览器)Index.htmlIP:202.119.236.102在用户点击URL为http:/ 1）点对点方式点对点方式点对

6、点方式点对点方式 点对点方式是最简单的传输方式，用户经过请求与源服务器间通过HTTP建立起点对点的连接。 2）具有中间服务器方式具有中间服务器方式具有中间服务器方式具有中间服务器方式 中间服务器系统充当通信中继中继中继中继功能，客户发出的请求通过中继到达相关的服务器，同样服务器的响应也要通过中继才能返回给客户 。 3）缓存方式缓存方式缓存方式缓存方式 缓存方式暂时保存一定时间内的客户请求及该客户请求所对应的服务器响应，这样的缓存便于处理新的客户请求，节省网络流量和当地计算资源。HTTP工作方式工作方式主要三种：主要三种：请求报文即从客户端(浏览器)向Web服务器发送的请求报文。报文的所有字段都

7、是ASCII码。方法URL版本CRLF首部字段名:值CRLF首部字段名:值CRLF首部字段名:值CRLFCRLF实体主体(Entitybody)空格CRLF回车换行请求行如:GET/index.htmlHTTP/1.1首部行:用来说明浏览器、服务器或报文主体的一些信息。如:Host:Connection:closeUser-Agent:Mozilla/5.0Accept-Language:cn请求报文HTTP报文结构响应报文即从Web服务器到客户机(浏览器)的应答。报文的所有字段都是ASCII码。版本状态码短语CRLF首部字段名:值CRLF首部字段名:值CRLF首部字段名:值CRLFCRLF实

8、体主体(Entitybody)空格CRLF回车换行状态行如:HTTP/1.1200OK首部行:用来说明浏览器、服务器或报文主体的一些信息。如:Date:Wed,08May200822Sever:Apache/1.3.2(Unix)Content-Length:4096Content-Type:text/html响应报文HTTP报文结构请求报文中的方法方法(操作)含义方法(操作)含义GET请求读取一个Web页面HEAD请求读取一个Web页面的首部POST附加一个命名资源(如Web页面)PUT请求存储一个Web页面DELETE删除Web页面TRACE用于测试，要求服务器送回收到的请求CONNECT

9、用于代理服务器OPTION查询特定选项方法(Method)是对所请求对象所进行的操作,也就是一些命令。请求报文中的操作有:HTTP报文结构响应报文中的状态码状态码(Status-Code)是响应报文状态行中包含的一个3位数字，指明特定的请求是否被满足，如果没有满足，原因是什么。状态码分为以下五类：状态码含义例子1xx通知信息100=服务器正在处理客户请求2xx成功200=请求成功(OK)3xx重定向301=页面改变了位置4xx客户错误403=禁止的页面；404=页面未找到5xx服务器错误500=服务器内部错误；503=以后再试具体各状态码的含义，请参考W3C的HTTP1.1标准规范RFC261

10、6http:/www.w3.org/Protocols/rfc2616/rfc2616.htmlHTTP报文结构首部字段或消息头头(header)类型说明User-Agent请求关于浏览器和它平台的信息，如Mozilla5.0Accept请求客户能处理的页面的类型，如text/htmlAccept-Charset请求客户可以接受的字符集，如Unicode-1-1Accept-Encoding请求客户能处理的页面编码方法，如gzipAccept-Language请求客户能处理的自然语言，如en(英语)，zh-cn(简体中文）Host请求服务器的DNS名称。从URL中提取出来，必需。Authori

11、zation请求客户的信息凭据列表Cookie请求将以前设置的Cookie送回服务器器，可用来作为会话信息Date双向消息被发送时的日期和时间Server响应关于服务器的信息，如Microsoft-IIS/6.0Content-Encoding响应内容是如何被编码的（如gzip)Content-Language响应页面所使用的自然语言Content-Length响应以字节计算的页面长度Content-Type响应页面的MIME类型Last-Modified响应页面最后被修改的时间和日期，在页面缓存机制中意义重大Location响应指示客户将请求发送给别处，即重定向到另一个URLSet-Cook

12、ie响应服务器希望客户保存一个CookieHTTP报文结构HTML基础基础HTML在80年代早期，IBMIBMIBMIBM提出在各文档之间共享一些相似的属性，诸如:字体大小和版面。IBM设计了一种文档系统，通过文档中辅加一种标签，从而可以标识文档中的每种元素。这样文档的显示和打印可能更少或更多地依赖特殊的硬件，不过这样的系统需要不同的计算机系统提供专门的软件来显示和打印文档。IBM把自己这种标识语言称作通用标记语言通用标记语言通用标记语言通用标记语言(Generaized Markup Language)，即GML。但IBM没在GML上做太多工作，直到1986年国际标准化组织(ISO)认为IB

13、M提出的概念很好，并发布了为生成标准化文档而定义的标记语言标准(ISO8879)，称为新的语言SGML，即标准通用标记语言。HTMLHTML即超文本标记语言(Hypertext Markup Language)定义了超文本文档的SGML的子集。人们习惯使用术语HTML表示超文本文档本身(属于一种特殊类型的SGML文档)和用以产生超文本文档的标记语言。我们认为它是：一种在WEB上以超文本形式出版信息的国际化标准语言，它是基于SGML，非私有的资源描述格式。HTML它具备以下几个特性:是一种纯文本文件，可以使用各种文字编辑器来进行编辑。扩展名为.htm或.html。与浏览器程序产生文件关联，由浏览

14、器编译执行。执行的顺序系由上而下，依序执行。因为浏览器支持或表现的方式不一，因此相同的文件在不同的客户环境（浏览器）中的表现可能或有差异。由许多标签标签标签标签（tag）所构成的元素（element）组合而成。HTML的版本历史的版本历史目前的HTML已进入第四代，每一版本都是前一版本的超集。HTML Levels 0和1：目前大多浏览器均支持以上版本。HTML版本1较HTML0增加了加亮文本 和页面内显示图象等标签。HTML Levels 2:增加了对表格的支持。真是一个重大的转变，从此WWW具有交互功能- 即信息可以双向的传播。目前大多数浏览器均支持HTML2。HTML Level 3:增

15、加了许多重要的标签，如显示表(TABLE)的标签等等。HTML Level 4:HTML系列的最高版本。XHTML 1.0:具有更强的通用性。基本概念HypertextHypertext:是指在文件中包含有链接到其它文件的能力，通常是利用不同颜色或加底线的字。使用者只需经由鼠标点取，便可链接到其它相关的文件。除了超文件的链接外，编辑出来的超文件同时具备展现多媒体的能力，可加入图片、声音、及动画及等效果。HyperlinkHyperlink:即”超链接”，是将鼠标移到在附有超级链接的图片或文字上，按一下左键，就可以立刻连到这个超级链接所指定的内部网页或者是其它网站上的位置去浏览。HomePage

16、HomePage：用html写成，可以用浏览器解析后看到的超文件。BrowserBrowser：浏览器(IE、Netscape等)基本概念网页编写软件一般文件编辑程序（如：记事本、Word、Excel、PowerPoint）文件式网页编辑程序（如：HTMLabc、HotDog.）所见即所得网贡编辑程序（如：MicrosoftFrontPage、MacromediaDreamwaver)HTML标签的格式通常HTML的标签是以成对的方式成对的方式出现的，其格式如下： 标签名称标签名称标签名称标签名称 属性名称参数属性名称参数属性名称参数属性名称参数内容内容内容内容/ / / /标签名称标签名称标

17、签名称标签名称凡是在 和 之间的内容均会受到这个标签的影响但是有少部份的标签，加上结尾标签反而觉得累赘，因此在习惯上也有不加结尾标签的。其格式如下： 基本概念HTML 文件基本架构文件标题文件标题:表头区表头区主体区主体区以以 开头开头以以 结尾结尾HTMLHTML语法：语法：说明：声明此文件为HTML文件与结束HTML文件.HEADHEAD语法：语法：说明：标示HTML文件头的开始与结束，可省略不写.标题语法：标题语法：说明：用来设定HTML文件的标题名称，这个标题会在浏览器的左上方显示出来.背景语法：背景语法：属性：背景图片：BACKGROUND=”图档所在的URL”背景颜色：BGCOLO

18、R=”#RRGGBB”，R、G、B=0F文字颜色：TEXT=”#RRGGBB”，R、G、B=0F超级链接颜色：LINK=”#RRGGBB”，R、G、B=0F浏览过超级链接颜色：VLINK=”#RRGGBB”，R、G、B=0F使用中超级链接颜色：ALINK=”#RRGGBB”，R、G、B=0FHTML文件基本架构【练习一练习一】 My first page 我的第一个网页 HTML文件基本架构METAMETA标记符标记符用于描述不包含在标准HTML里的一些文档信息，例如开发工具，作者，网页关键字，网页描述等。这些定义的内容并不在网页页面中显示，但是一些搜索引擎可以检索这些信息，浏览者可以根据这些

19、关键字或描述查找到该网页。常用功能是设置自动转址功能使浏览器自动从一个地址跳转到另一个地址位置META 标记符的常用属性包括：name、 content和 http-equivname 属性给出特性名content 属性给出特性值http-equiv 属性指定 HTTP 响应名称，通常用于替换 name 属性，HTTP 服务器使用该属性值为 HTTP 响应消息头收集信息例例1 设置客户端行内程序的语言是设置客户端行内程序的语言是 JavaScript例例2用来标记你的页面的解码方式例例3 META示例 再过10秒钟，我就上学校的网站了！我的第一个网页 A例例4设置页面属性设置页面属性正文标记符

20、包括一些常用属性，可以用于设置网页背景颜色和图案，以及设置文档中文字和超链接的颜色设置页面背景颜色 bgcolorBODY bgcolor=设置页面背景图像 backgroundBODY background = 使用背景图案时，如果图案小于浏览器窗口的大小，则使用背景图案时，如果图案小于浏览器窗口的大小，则浏览器会自动象铺地板砖一样平铺背景图案。浏览器会自动象铺地板砖一样平铺背景图案。可以同时设置背景图案和背景色，以便在不能显示图像的浏览器上显示背景色F页面基本属性定义在中background= 背景图片文件名bgcolor= 背景颜色text = 文本默认颜色link = 未被访问链接源文

21、字的颜色alink = 被激活链接源文字的颜色vlink = 访问过链接源文字的颜色topmargin = 信息内容的顶边距离信息内容的顶边距离leftmargin =“ ”信息内容的左边距离信息内容的左边距离F背景音乐标记符标记符用于指定网页的背景音乐属性src，用于指定背景音乐的源文件。loop，用于指定背景音乐重复的次数，如果不指定该属性，则背景音乐无限循环例子 16 种标准颜色色彩名十六进制值色彩名十六进制值Aqua（水（水蓝色）色）#00FFFFNavy（藏青色）（藏青色）#000080Black（黑色）（黑色）#000000Olive（茶青色）（茶青色）#808000Blue（蓝色

22、）色）#0000FFPurple（紫色）（紫色）#800080Fuchsia（樱桃色）桃色）#FF00FFRed（红色）色）#FF0000Gray（灰色）（灰色）#808080Silver（银色）色）#C0C0C0Green（绿色）色）#008000Teal（茶色）（茶色）#008080Lime（石灰色）（石灰色）#00FF00White（白色）（白色）#FFFFFFMaroon（褐（褐红色）色）#800000Yellow（黄色）（黄色）#FFFF00注释的作用HTML 注释的注释的格式由开始标记符由开始标记符 构成构成标记符之间的任何内容都将被浏览器解释标记符之间的任何内容都将被浏览器解释为

23、注释，而不在浏览器中显示为注释，而不在浏览器中显示例子：例子： 网页标题网页标题 正文，正文，正文正文，正文，正文 注释可插入在注释可插入在 Web 页的任何位置页的任何位置添加注释添加注释显示特殊字符显示特殊字符 特殊字符参考字符（附录 2 ）参考字符以“ & ”号开始，以“ ; ”结束参考字符既可用数字代码表示，也可用代码名称表示与HTML标记符同，字符代码名称区分大小写例子： <Tom & Jerry> is a popular VCD program. is a popular VCD program 特殊字符数字代码代码名称&&>>空

24、格  HTML基本语法基本语法基本语法介绍-标题和段落设定字体的大小，通常用于标题处。语法：，I=16, 是最大的字，是最小的字【练习】 设置标题 第1级标题(H1) 第2级标题(H2) 第3级标题(H3) 第4级标题(H4)（居左） 第5级标题(H5)（居右） 第6级标题(H6)（居中） 段落标记符 将文档划分为段落可以省略换行标记符在文档中强制断行F区别区别：不能产生多个空行，而则可在内容之间设置多个空行，即形成空白是断段，而是断行基本语法介绍-标题和段落【练习】 换行示例 登鹳雀楼白日依山尽，黄河入海流。欲穷千里目，更上一层楼。 文本对齐属性文本对齐属性文本对齐属性文

25、本对齐属性1.align属性设置段落的对齐格式取值：right（右）、left（左）、center（居中）justify（两端）应用范围：多种标记符，最典型的是应用于 P、Hn、HR 、 DIV不同的标记符，其align属性的默认值并不相同标记符P、Hn 的align属性默认值为left标记符HR的align属性默认值为center2.DIV标记符 为文档分节，以便为文档的不同部分应用不同的段落格式必须与 align等属性联合使用位于 DIV 标记符中的多段文本将被认为是一个节，可为它们设置一致的对齐格式。3.CENTER标记符 将和 包括起来的内容定义为居中对齐【练习】 段落标签示例 登黄鹤

26、楼白日依山尽，黄河入海流。欲穷千里目，更上一层楼。 【练习】 分区显示标签的应用 居中center居中center 居左left居左left 居右right居右right 文本对齐属性文本对齐属性文本对齐属性文本对齐属性4. 显示预排格式标签： 保留HTML文件中已编辑好的格式，如回车、多个空格、等【练习】 显示预排格式 唐诗二首 赋得古原草送别 长 相 思 唐白居易 唐白居易 离离原上草，一岁一枯荣。 汴水流，泗水流， 野火烧不尽，春风吹又生。 流到瓜洲古渡头。 远芳侵古道，晴翠接荒城。 吴山点点愁。 又送王孙去，萋萋满别情。 思悠悠，恨悠悠， 恨到归时方始休。 月明人依楼。 水平线标记符水

27、平线标记符水平线标记符水平线标记符在网页内容中添加水平线，分隔文档内容属性：size：水平线的粗细程度，用整数表示，默认值为2width：水平线的长度，用像素长度或宽度的百分比表示 noshade：去除水平线的3D样式color：水平线的颜色align：水平线的对齐方式例子：基本语法介绍-标题和段落【练习】 水平线段标签的应用 水平线 字体控制标记符字体控制标记符字体控制标记符字体控制标记符 size 属性属性控制字符的大小size= 字号从17,字号越大，默认值为3color属性属性控制字符的颜色color= 使用颜色名称或十六进制值指定颜色face 属性属性指定字体样式face = 常用的

28、英文字体有“Times New Roman”、“Arial”等常用的中文字体有“宋体”、“楷体”等基本语法介绍-文字标签设置字符样式设置字符样式设置字符样式设置字符样式指标记符本身就说明了所修饰文字的效果的字符样式使用方法：将设置格式的字符括在标记符之间由于带有超链接的文本下通常包含下划线，因此下划线格式易让人产生误解，建议使用时慎重常见的物理字符样式标记功能功能标记功能功能 粗体 删除线 大字体 下标 斜体 上标 删除线 固定宽度字体 小字体 下划线【练习】 一号字 二号字 三号字 四号字 五号字 六号字 七号字 【练习】 设置字体 幼圆 隶书 楷体 黑体 仿宋 宋体 方正舒体 华文彩云 华

29、文琥珀 Times New Roman 【练习】 设置字型 正常字体 加粗体 正常字体 斜体 正常字体 下划线 正常字体 标准打印机字体 正常字体 带删除线 正常字体 下标 上标 正常字体 大字体文本 正常字体 小字体文本 1. 1.有序列表（有序列表（有序列表（有序列表（Ordered listOrdered list）定义：一种在表的各项前显示有数字或字母的缩排列表 列表项 1 列表项 2 列表项 3 OL标记符的属性：type设置数字序列样式start 设置数字序列的起始值, 值可以是任意整数当位于 OL 标记符内时，LI 标记符的属性：type 设置数字样式，取值与 OL 的 type

30、 属性相同value 设置一个新的数字序列起始值，以获得非连续性的数字序列值 type 属性的值属性的值含含义 1 阿拉伯数字：1、2、3等，此项为默认值 A 大写字母：A、B、C等 a 小写字母：a、b、c等 I 大写罗马数字：I、II、III、IV等 i 小写罗马数字：i、ii、iii、iv等 基本语法介绍-列表2. 2.无序列表（无序列表（无序列表（无序列表（Unordered listUnordered list）定义：一种在表的各项前显示有特殊项目符号的缩排列表。 无序列表标记符 UL 标记符的 type 属性控制列表项前特殊符号的显示列表项标记符LI 标记符的 type 属性的值如

31、下表所示：值 type 属性的属性的含含义 disc 实心圆，通常是非嵌套列表的默认值 circle 空心圆，通常是嵌套列表的默认值 square 实心或空心的方块，取决于浏览器 在Internet Explorer 中，type 的值是区分大小写的 列表的嵌套使用有序列表嵌套可以获得不同层次的编号列表。嵌套时，只需将内层列表作为外层列表的一个列表项即可。列表的嵌套层数没有限制；有序列表和无序列表也可互相嵌套。【练习】 有序列表 第一列 第二列 第三列 【练习】 无序列表 无序列表的使用 圆圈 方块 圆点 默认样式 上层定义1 上层定义2 上层定义3 上层定义4 本地定义方块 上层定义5 【练

32、习】 设置列表的种类 设置列表的种类 a类1 a类2 I类1 i类2 【练习】 有序列表中签套有序列表 有序列表中套有序列表示例 有序1 有序a 有序b 有序2 有序罗马1 有序罗马2 有序罗马3 【练习】 有序列表中嵌套无序列表 有序列表中嵌套无序列表示例 有序1 无序 无序 有序2 无序 无序 无序 有序3 锚点标签锚点标签锚点标签锚点标签 格式:链接点 href属性：用于指定超链接的目标链接目标：要访问的目标页面或其他资源，使用URL来表示链接点：在和之间任何可单击的网页元素，如文字或图像 我的大学基本语法介绍-超链接指向本页的超链接指向本页的超链接指向本页的超链接指向本页的超链接对同一

33、网页的不同部分或进行链接指向本页的链接必须先定义锚点，然后才能定义链接。锚点的定义：此处内容可省略定义链接链接点定义指向不同页面内锚点的链接，形式如下链接点【练习】 我的主页 欢迎来到我的主页 最新更新 我的自传 给我留言 【练习】 我的主页 欢迎来到我的主页 最新更新     我的自传     给我留言     最新更新 . 返回 我的自传 . 返回 给我留言 . 返回 【练习】 使用超链接来传送电子邮件 请将对此网页内容的意见或感想， 发送邮件给我 ，谢谢！ 表格标题 表

34、格的行 行列标题数据 普通数据 表格基本语法介绍-表格HTML 表格模型使用户可以将各种数据（包括文本、预格式化文本、图像、链接、表单、表单域以及其他表格等）排成行和列，从而获得特定的表格效果用于设计网页的布局基本语法介绍-表格使用TABLETABLE标记符包括所有表格内容使用CAPTIONCAPTION标记符定义表格的标题 从第一行开始，使用TRTR标记符分隔每一行表格有多少行，就应该有多少个TR标记符表格的行数应该是垂直方向上单元格的最大数表格的行数应该是垂直方向上单元格的最大数在每一行(即TR标记符后)内，依次用THTH或TDTD标记符标记每个单元格的内容按照步骤2的做法，顺次一行一行处

35、理，直到表格结束如果遇到空单元格，只需使用空的TH或TD标记符即可基本语法介绍-表格标签符标签符标签符标签符Width属性表格宽度可以为像素点值或百分比Border属性边线宽度具体数值，0表示不显示边线Frame属性控制表格边框表示表格最外层的四条框线，该属性的取值可以是：Void无边框。void是默认值，即默认时不显示边框 Above仅有顶框 Below仅有底框 Hsides仅有顶框和底框（水平方向）vsides 仅有左、右侧框（垂直方向） lhs 仅有左侧框 rhs 仅有右侧框 box 包含全部四个边框border 包含全部四个边框rules属性控制是否显示以及如何显示单元格之间的分隔线，

36、取值可以是：none 无分隔线。none是默认值，即默认时不显示单元格间的分隔线 rows 仅有行分隔线cols 仅有列分隔线all 包括所有分隔线Align属性控制表格与页面其它内容的对齐方式，取值可以是：Left 、center、rightBgcolor属性设置表格的背景颜色background属性设置表格的背景图案Cellspacing属性单元格之间的距离cellpadding属性分割线与数据之间的距离标签符标签符定义表格的标题align属性表格标题在网页中的对齐方式取值为：left 、center 、right成绩单 标签符标签符定义表格的一行align属性行中数据的水平对齐方式取值为

37、：left 、center 、rightvalign属性行中数据的垂直对齐方式取值为：top 、middle 、bottomBgcolor属性整行单元格的背景颜色标签符标签符定义行中的具体单元格align属性单元格内数据的水平对齐方式取值为：left 、center 、rightvalign属性单元格内数据的垂直对齐方式取值为：top 、middle 、bottombgcolor属性单元格的背景颜色width属性、height属性单元格宽度、高度具体数据值或百分比rowspan属性单元格所占的行数表示该单元格高度为三行colspan属性单元格所占的列数【练习】 销售业绩 张三销售业绩 编号姓名

38、外销内销总数 0001张 三4586131 张三销售业绩 编号姓名外销内销总数 0001张 三4586131 张三销售业绩 编号姓名外销内销总数 0001张 三4586131 【练习】 B040801班 姓名性别年龄 张三男21 王二女22 B040801班 姓名 性别年龄 张三男21 王二女22 【练习】 学生成绩 学生成绩表 学号姓名成绩 Java网页制作数据库 0001张三9269161 0002王五8692178 0003李四90100190 0004何六7286158 0005赵七8093173 【练习】 学生成绩 学生成绩表 学号姓名成绩 Java网页制作数据库 0001张三926

39、9161 0002王五8692178 0003李四90100190 0004何六7286158 0005赵七8093173 位图与矢量图位图与矢量图位图与矢量图位图与矢量图位位图矢量矢量图描述方式用图片上每一点的信息来描述图像 用线条和填充色等数学信息来描述图像 存储量较大小显示效果与分辨率相关与分辨率无关位图，用点描述图像矢量图，用线条等数学信息描述图像基本语法介绍-图像WebWeb页图像格式页图像格式页图像格式页图像格式GIF格式Graphics Interchange Format(图形交换格式)适用于颜色较少（小于256色）的图像压缩，并允许透明，也可以是动画JPEG格式Joint P

40、hotographic Experts Group(联合静态图形专家组)可控制图像的压缩比率,适用于颜色较为丰富的图像,不支持透明和动画PNG格式Portable Network Graphics(可移植网络图形)适用于矢量图像，并允许半透明基本语法介绍-图像图像标记符图像标记符图像标记符图像标记符在网页中插入图像或动画元素具体属性：titlesrc指定要显示的图像的文件名(URL)alt指定当图像无法显示或加载时显示的文字dynsrc动态源,指定到视频剪辑或VRMl文件的URLborder整数，图像边框的宽度align对齐方式：left、 right top、middle、bottomhei

41、ght整数，图像的高度设置图像的高度和宽度width整数，图像的宽度hspace像素,水平方向的空白设置图像周围的空白vspace像素,垂直方向的空白基本语法介绍-图像【练习】 图片背景 用图片作为背景 在浏览器中，作为背景的图片将按原来的大小复制，平铺而充满满整个网页的显示区域。因此作为背景的图片文件，可以做的很小，这样可以加快下载的速度。 【练习】 图片的对齐方式 居左 居中 居右 居中 【练习】 文本与图片在垂直方向上的对齐方式 猫1顶部对齐 猫2中央对齐 猫3底部对齐 【练习】 文本环绕图片及其解除 加菲猫 我们热爱的加菲猫已经26岁啦！但它还来不及为青春逝去而黯然神伤， 而是兴致勃勃

42、地随主人乔恩(布瑞金梅耶饰)来到了英国旅行。       在伦敦，一次偶然的事件中，加菲被误认为是一只长得十分相似的皇室 血统猫，并因此意外继承了一座美丽的城堡。在这座城堡里，加菲终于过上了 它梦寐以求的生活享受管家和仆人的照顾，和朋友们一起狂欢party，每 天可以睡上好多个午觉，醒来后还有可口的下午茶搭配无限量供应的猪肉卷      加菲，品种属橘色虎斑猫，1978年6月19日生于一家意大利餐馆的厨房 HTML高级应用高级应用一、定义一、定义：能在同一个浏览器窗口中显示多个网页的页面布局控制容器 二、

43、作用：二、作用：网站导航功能将浏览器窗口划分为不同的部分，每部分中装载不同的网页，通过为超链接指定目标框架，可以为框架之间建立起内容之间的联系，因而实现页面的导航和页面间的交互操作联机帮助 高级应用-框架框架框架标记标记符及格式符及格式 框架集标记符框架集标记符，是框架容器，框架必须定义在框架集之内定义浏览器不支持框架技术时所要显示的替代内容，必须包含在 标记符之中，可选框架标记符框架标记符，定义一个框架，必须包含在 标记符之中,也可以嵌套高级应用-框架框架集标签框架集标签高级应用-框架属性属性含义含义rows窗口横向分隔。cols窗口纵向分隔。border分割窗口的框架的边框宽度，以像素为单

44、位。bordercolor框架边框的颜色。frameborder是否显示框架。0-不显示，1-显示；默认为1framespacing框架间保留空白的间距，以像素为单位。框架集标签框架集标签高级应用-框架rows/cols的值说明属性值可以使用数字、百分比、剩余值及三种方式的混合数字：表示所占的像素数百分比“%”：表示子窗口的高度/宽度占浏览器窗口高度/宽度的百分比剩余值“*”：表示所有定值窗口设定之后的剩余部分框架标记符框架标记符高级应用-框架属性属性含义含义src指定框架显示的HTML文件的位置。name指定窗口的名称。noresize设置是否可以调整窗口大小。该属性是标志，没有取值。bor

45、dercolor框架边框的颜色。marginwidth窗口内的内容与窗口左右边缘的距离，单位像素。marginheight窗口内的内容与窗口上下边缘的距离，单位像素。frameborder是否显示框架。0-不显示，1-显示；默认为1framespacing框架间保留空白的间距，以像素为单位。scrolling是否显示滚动条。no-不显示，yes-显示，auto-自动设置；默认为auto。框架中的超链接框架中的超链接链接：超链接点特殊框架名_top_self _blank_parent高级应用-框架【练习】 框架演示 【练习】 各窗口边框的设置 【练习】-框架间的链接1 框架间的链接1 【练习】

46、-框架间的链接2 框架间的链接02 <a href=ex4_5_1.html target=_blank> 单击此处将打开一个新的浏览器窗口来显示这3个框架</a> <a href=ex4_5_1.html target=_self> 单击此处将在本窗口内来显示这3个框架</a> <a href=xcol.html target=_parent> 单击此处将在这3个框架的父窗口(FRAMESET)内来显示A窗口</a> <a href=xcol.html target=_top> 单击此处将用整个浏览器窗口来显

47、示A窗口</a> 定义：定义： 用于实现网页浏览者与服务器（或者说网页所有用于实现网页浏览者与服务器（或者说网页所有者）之间信息交互的一种页面元素，在者）之间信息交互的一种页面元素，在 WWW WWW 上它被上它被广泛用于各种信息的搜集和反馈。广泛用于各种信息的搜集和反馈。高级应用-表单表单的基本工作原理：浏览者在表单中填写或选择信息； 单击“提交”按钮，填写或选择的信息按照指定的方式通过网络传递到服务器端； 由服务器端的特定程序进行处理处理的结果：返回一个页面例如：通知注册成功的页面在服务器端完成特定功能例如：在数据库中记录下新用户的信息）表单不但需要在网页中用表单不但需要在网页

48、中用HTMLHTML进行显示，而且进行显示，而且还需还需要服务器端特定程序的支持要服务器端特定程序的支持 高级应用-表单表单的标签符表单的标签符u格式：FORM 用户数据提用户数据提交给服务器交给服务器的方法的方法处理已提交表单数据的程序，处理已提交表单数据的程序，该程序必须能够处理表单数据该程序必须能够处理表单数据表单发送时所使用的内容类型高级应用-表单u属性属性提交提交method属性属性get方法：在URL的末尾附加要向服务器发送的信息。如： http:/ 处理处理action属性属性提供处理表单的程序的地址，程序存放在Web服务器上程序常用的语言有ASP、PHP、JSP、Perl等内容

49、类型内容类型enctype属性属性application/x-www-form-urlencodedmultipart/form-datatext/plain高级应用-表单表单域标签：使用input标签，根据不同的type属性来区分不同的控件input主要有以下属性：属性属性含义含义type区分不同控件。name控件标识。value输入的值。高级应用-表单表单域标签的属性TYPE此属性指定表单控件的类型。可用的选项有TEXT、PASSWORD、CHECKBOX、RADIO、SUBMIT、RESET、FILE、HIDDEN和BUTTON。默认值为TEXT。NAME此属性指定表单控件的名称。例如，

50、如果表单上有几个文本框，可以按照名称来标识它们 - TEXT1、TEXT2或用户选择的任何名称。 VALUE此属性是可选属性，它指定表单元素的初始值 SIZE此属性指定表单控件的显示长度。用于文本输入的表单元素即输入类型是TEXT或PASSWORD的 MAXLENGTH此属性用于指定在TEXT或PASSWORD表单元素中可以输入的最大字符数。默认值为无限的 CHECKED此属性是一个Boolean属性，指定按钮是否是被选中的。当输入类型为RADIO或CHECKBOX时，使用此属性。 disabled设置该表单域不可用，不能编辑。 控件的类型：文本框text口令框password复选框check

51、box单选框radio文件选择框file按钮submit reset button多行文本框选项菜单 高级应用-表单【练习】 输入文本和密码 个人资料 姓名: 主页的网址: 密码: 【练习】 个人资料 个人资料 姓名: 性别: 男 女 出生日期: 年 月 日 个人爱好:体育 文学 艺术 旅游 美食 其他 【练习】-选择栏的使用 见154页【练习】-多行文本输入框 见156页高级应用-动态效果滚动文字效果滚动文字效果作用：标记符之间的内容以滚动的方式显示属性：width 和height滚动字幕滚动区域的宽度和高度align滚动字幕与周围对象对齐的方式behavior滚动字幕移动的方式#=scro

52、ll, slide, alternatebgcolor 滚动字幕区域的背景色direction 文本滚动的方向 #=left, righthspace和vspace 滚动字幕四周水平和垂直方向上的间隙loop 滚动重复的次数scrollamout 文本滚动的步进象素间距scrolldelay 两次文本重画之间的毫秒延时数【练习】 滚动字幕 图片和文字都可以动！ 我往左跑 我往右跑 高级应用-多媒体插入音频插入音频背景声音背景声音背景声音标签是个隐藏标签，可以放在任何位置。前景声音前景声音（1）链接法：声音提示说明（2）嵌入式：【练习】背景音乐高级应用-多媒体插入视频插入视频（1）链接法：）链接法：视频提示说明（2）嵌入式：）嵌入式：（3）图片插入式：）图片插入式：【练习】 插入多媒体文件 网页中的多媒体 作业作业1.应用HTML制作第一个页面，向浏览器输出一行文字。2.使用HTML制作一个页面，要有背景图案，页面显示内容及格式如所示。3制作一个页面，上有文字、图像和朋友的E-Mail地址，在文字和图像上创建超级链接，当用户点击链接时， 页面转跳到其它页面，点击E-Mail地址时，打开信箱，发送邮件。4使用HTML技术制作一个本学期使用的课表。5制作一个计算器界面，界面如图所示。