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

三、HTTP协议、开发与HTML语言,主要内容,HTTP协议及其开发方法 HTML语言,Page 2,HTTP协议,问题,当我们想浏览一个网站的时候，只要在浏览器的地址栏里输入网站的地址就可以了，例如：，但是在浏览器的地址栏里面出现的却是：，你知道为什么会多出一个“http”吗？ “http”是什么意思呢？,Page 2,HTTP协议是什么,HTTP（Hypertext Transfer Protocol）中文 “超文本传输协议”，是一种为分布式，合作式，多媒体信息系统服务，面向应用层的协议，是Internet上目前使用最广泛的应用层协议，它基于传输层的TCP协议进行通信，HTTP协议是通用的、无状态的协议。 功能：用于在服务器和客户机之间传输超文本文件。,HTTP的运行原理,TCP/IP与HTTP,我们知道，Internet的基本协议是TCP/IP协议，然而在TCP/IP模型最上层的是应用层(Applicationlayer)，它包含所有高层的协议。 高层协议有：文件传输协议FTP、电子邮件传输协议SMTP、域名系统服务DNS、网络新闻传输协议NNTP和HTTP协议等。,HTTP采用请求响应的握手方式，HTTP定义的事务处理其运作的基本过程如下图所示：,HTTP通信方式,Page 2,HTTP协议发展史,HTTP/0.9：1990年就已经用来作为WWW的传输协议，当时非常简单，只支持GET方法，响应中携带的消息必须为HTML文件。 HTTP/1.0: 1996发布RFC1945，90年后，基于0.9的各种客户端和服务端的扩展层出不穷，把这些扩展进行综合推出新标准HTTP/1.0 。 HTTP/1.1: 1997推出RFC2068，HTTP/1.1的标准。 HTTP/1.1: 1999推出RFC2616，废弃了RFC2068标准。,HTTP协议的主要特点,支持客户/服务器模式。 简单快速：客户向服务器请求服务时，只需传送请求方法和路径。请求方法常用的有GET、HEAD、POST。每种方法规定了客户与服务器联系的类型不同。 灵活：HTTP允许传输任意类型的数据对象。正在传输的类型由Content-Type加以标记。 无连接：无连接的含义是限制每次连接只处理一个请求。服务器处理完客户的请求，并收到客户的应答后，即断开连接。采用这种方式可以节省传输时间。 无状态：HTTP协议是无状态协议。无状态是指协议对于事务处理没有记忆能力（服务器不记得曾经访问过的用户，也不记得曾经访问过多少次），该功能可使读取页面信息完成的较迅速。,在用户点击URL为/index.html的链接后，浏览器和Web服务器执行以下动作：,HTTP over TCP,TCP连接,建立TCP连接,HTTP请求报文,释放TCP连接,HTTP的工作原理,1）点对点方式 点对点方式是最简单的传输方式，用户经过请求与源服务器间通过HTTP建立起点对点的连接。 2）具有中间服务器方式 中间服务器系统充当通信中继功能，客户发出的请求通过中继到达相关的服务器，同样服务器的响应也要通过中继才能返回给客户 。 3）缓存方式 缓存方式暂时保存一定时间内的客户请求及该客户请求所对应的服务器响应，这样的缓存便于处理新的客户请求，节省网络流量和当地计算资源。,HTTP工作方式主要三种：,即从客户端(浏览器)向Web服务器发送的请求报文。报文的所有字段都是ASCII码。,方法,URL,版本,CRLF,首部字段名,:,值,CRLF,CRLF,实体主体 (Entity body),请求行 如: GET /index.html HTTP/1.1,首部行:用来说明浏览器、服务器或报文主体的一些信息。如: Host: Connection: close User-Agent: Mozilla/5.0 Accept-Language: cn,请求报文,HTTP报文结构,即从Web服务器到客户机(浏览器)的应答。报文的所有字段都是ASCII码。,版本,状态码,短语,CRLF,首部字段名,:,值,CRLF,CRLF,实体主体 (Entity body),状态行 如: HTTP/1.1 200 OK,首部行:用来说明浏览器、服务器或报文主体的一些信息。如: Date: Wed,08 May 2008 22 Sever: Apache/1.3.2(Unix) Content-Length: 4096 Content-Type: text/html,响应报文,HTTP报文结构,方法(Method)是对所请求对象所进行的操作,也就是一些命令。请求报文中的操作有:,HTTP报文结构,状态码(Status-Code)是响应报文状态行中包含的一个3位数字，指明特定的请求是否被满足，如果没有满足，原因是什么。状态码分为以下五类：,具体各状态码的含义，请参考W3C的HTTP1.1标准规范RFC2616 /Protocols/rfc2616/rfc2616.html ,HTTP报文结构,HTTP报文结构,HTML基础,HTML,在80年代早期，IBM提出在各文档之间共享一些相似的属性，诸如:字体大小和版面。IBM设计了一种文档系统，通过文档中辅加一种标签，从而可以标识文档中的每种元素。 这样文档的显示和打印可能更少或更多地依赖特殊的硬件，不过这样的系统需要不同的计算机系统提供专门的软件来显示和打印文档。IBM把自己这种标识语言称作通用标记语言(Generaized Markup Language)，即GML。但IBM没在GML上做太多工作，直到1986年国际标准化组织(ISO)认为IBM提出的概念很好，并发布了为生成标准化文档而定义的标记语言标准(ISO8879)，称为新的语言SGML，即标准通用标记语言。,HTML,HTML即超文本标记语言(Hypertext Markup Language) 定义了超文本文档的SGML的子集。 人们习惯使用术语HTML表示超文本文档本身(属于一种特殊类型的SGML文档)和用以产生超文本文档的标记语言。 我们认为它是：一种在WEB上以超文本形式出版信息的国际化标准语言，它是基于SGML，非私有的资源描述格式。,HTML,它具备以下几个特性: 是一种纯文本文件，可以使用各种文字编辑器来进行编辑。 扩展名为.htm或.html。 与浏览器程序产生文件关联，由浏览器编译执行。执行的顺序系由上而下，依序执行。 因为浏览器支持或表现的方式不一，因此相同的文件在不同的客户环境（浏览器）中的表现可能或有差异。 由许多标签（tag）所构成的元素（element）组合而成。,HTML的版本历史,目前的HTML已进入第四代，每一版本都是前一版本的超集。 HTML Levels 0和1：目前大多浏览器均支持以上版本。HTML版本1较HTML0增加了加亮文本 和页面内显示图象等标签。 HTML Levels 2:增加了对表格的支持。真是一个重大的转变，从此WWW具有交互功能- 即信息可以双向的传播。目前大多数浏览器均支持HTML2。 HTML Level 3:增加了许多重要的标签，如显示表(TABLE)的标签等等。 HTML Level 4:HTML系列的最高版本。 XHTML 1.0:具有更强的通用性。,基本概念,Hypertext: 是指在文件中包含有链接到其它文件的能力，通常是利用不同颜色或加底线的字。使用者只需经由鼠标点取，便可链接到其它相关的文件。除了超文件的链接外，编辑出来的超文件同时具备展现多媒体的能力，可加入图片、声音、及动画及等效果。 Hyperlink: 即”超链接”，是将鼠标移到在附有超级链接的图片或文字上，按一下左键，就可以立刻连到这个超级链接所指定的内部网页或者是其它网站上的位置去浏览。 HomePage：用html写成，可以用浏览器解析后看到的超文件。 Browser：浏览器(IE、Netscape等),基本概念网页编写软件,一般文件编辑程序 （如：记事本、Word、Excel、PowerPoint） 文件式网页编辑程序（如：HTMLabc、HotDog.） 所见即所得网贡编辑程序（如：Microsoft FrontPage、Macromedia Dreamwaver),HTML标签的格式,通常HTML的标签是以成对的方式出现的，其格式如下： 标签名称 属性名称参数内容/标签名称 凡是在 和 之间的内容均会受到这个标签的影响 但是有少部份的标签，加上结尾标签反而觉得累赘，因此在习惯上也有不加结尾标签的。其格式如下： ,基本概念 HTML 文件基本架构, 文件标题 : : : ,表头区,主体区,以 开头,以 结尾,HTML语法： 说明：声明此文件为HTML文件与结束HTML文件. HEAD语法： 说明：标示HTML文件头的开始与结束，可省略不写. 标题语法： 说明：用来设定HTML文件的标题名称，这个标题会在浏览器的左上方显 示出来. 背景语法： 属性： 背景图片：BACKGROUND=”图档所在的URL” 背景颜色：BGCOLOR=”#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=0F,HTML文件基本架构,【练习一】, My first page 我的第一个网页 ,HTML文件基本架构,META标记符 用于描述不包含在标准HTML里的一些文档信息，例如开发工具，作者，网页关键字，网页描述等。这些定义的内容并不在网页页面中显示，但是一些搜索引擎可以检索这些信息，浏览者可以根据这些关键字或描述查找到该网页。 常用功能是设置自动转址功能使浏览器自动从一个地址跳转到另一个地址 位置 META 标记符的常用属性包括：name、 content和 http-equiv name 属性给出特性名 content 属性给出特性值 http-equiv 属性指定 HTTP 响应名称，通常用于替换 name 属性，HTTP 服务器使用该属性值为 HTTP 响应消息头收集信息,例1 设置客户端行内程序的语言是 JavaScript 例2 用来标记你的页面的解码方式 例3 META示例 再过10秒钟，我就上学校的网站了！ , 我的第一个网页 ,例4,设置页面属性,正文标记符包括一些常用属性，可以用于设置网页背景颜色和图案，以及设置文档中文字和超链接的颜色 设置页面背景颜色 bgcolor 设置页面背景图像 background 使用背景图案时，如果图案小于浏览器窗口的大小，则浏览器会自动象铺地板砖一样平铺背景图案。 可以同时设置背景图案和背景色，以便在不能显示图像的浏览器上显示背景色,页面基本属性定义在中 background=“ “ 背景图片文件名 bgcolor= “ “背景颜色 text =“ “文本默认颜色 link =“ “未被访问链接源文字的颜色 alink =“ “被激活链接源文字的颜色 vlink =“ “访问过链接源文字的颜色 topmargin =“ “ 信息内容的顶边距离 leftmargin =“ ”信息内容的左边距离 背景音乐标记符 用于指定网页的背景音乐 属性 src，用于指定背景音乐的源文件。 loop，用于指定背景音乐重复的次数，如果不指定该属性，则背景音乐无限循环 例子 ,16 种标准颜色,注释的作用 HTML 注释的格式 由开始标记符 构成 标记符之间的任何内容都将被浏览器解释为注释，而不在浏览器中显示 例子： 网页标题 正文，正文，正文 注释可插入在 Web 页的任何位置,添加注释,显示特殊字符,特殊字符参考字符（附录 2 ） 参考字符以“ is a popular VCD program. is a popular VCD program,HTML基本语法,基本语法介绍-标题和段落,设定字体的大小，通常用于标题处。 语法： ，I=16, 是最大的字， 是最小的字,【练习】 设置标题 第1级标题(H1) 第2级标题(H2) 第3级标题(H3) 第4级标题(H4)（居左） 第5级标题(H5)（居右） 第6级标题(H6)（居中） ,段落标记符 将文档划分为段落 可以省略 换行标记符 在文档中强制断行 区别： 不能产生多个空行，而则可在内容之间设置多个空行，即形成空白 是断段，而是断行,基本语法介绍-标题和段落,【练习】 换行示例 登鹳雀楼白日依山尽，黄河入海流。欲穷千里目，更上一层楼。 ,文本对齐属性 1.align属性 设置段落的对齐格式 取值：right（右）、left（左）、center（居中）justify（两端） 应用范围： 多种标记符，最典型的是应用于 P、Hn、HR 、 DIV 不同的标记符，其align属性的默认值并不相同 标记符P、Hn 的align属性默认值为left 标记符HR的align属性默认值为center 2.DIV标记符 为文档分节，以便为文档的不同部分应用不同的段落格式 必须与 align等属性联合使用 位于 DIV 标记符中的多段文本将被认为是一个节，可为它们设置一致的对齐格式。 3.CENTER标记符 将和 包括起来的内容定义为居中对齐,【练习】 段落标签示例 登黄鹤楼白日依山尽，黄河入海流。欲穷千里目，更上一层楼。 ,【练习】 分区显示标签的应用 居中center居中center 居左left居左left 居右right居右right ,文本对齐属性 4. 显示预排格式标签： 保留HTML文件中已编辑好的格式，如回车、多个空格、等,【练习】 显示预排格式 唐诗二首 赋得古原草送别 长 相 思 唐白居易 唐白居易 离离原上草，一岁一枯荣。 汴水流，泗水流， 野火烧不尽，春风吹又生。 流到瓜洲古渡头。 远芳侵古道，晴翠接荒城。 吴山点点愁。 又送王孙去，萋萋满别情。 思悠悠，恨悠悠， 恨到归时方始休。 月明人依楼。 ,水平线标记符 在网页内容中添加水平线，分隔文档内容 属性： size：水平线的粗细程度，用整数表示，默认值为2 width：水平线的长度，用像素长度或宽度的百分比表示 noshade：去除水平线的3D样式 color：水平线的颜色 align：水平线的对齐方式 例子： ,基本语法介绍-标题和段落,【练习】 水平线段标签的应用 水平线 ,字体控制标记符 ,size 属性控制字符的大小size=“ “ 字号从17,字号越大，默认值为3 color属性控制字符的颜色color=“ “ 使用颜色名称或十六进制值指定颜色 face 属性指定字体样式face =“ “ 常用的英文字体有“Times New Roman”、“Arial”等 常用的中文字体有“宋体”、“楷体”等,基本语法介绍-文字标签,设置字符样式 指标记符本身就说明了所修饰文字的效果的字符样式 使用方法：将设置格式的字符括在标记符之间 由于带有超链接的文本下通常包含下划线，因此下划线格式易让人产生误解，建议使用时慎重 常见的物理字符样式,【练习】 一号字 二号字 三号字 四号字 五号字 六号字 七号字 ,【练习】 设置字体 幼圆 隶书 楷体 黑体 仿宋 宋体 方正舒体 华文彩云 华文琥珀 Times New Roman ,【练习】 设置字型 正常字体 加粗体 正常字体 斜体 正常字体 下划线 正常字体 标准打印机字体 正常字体 带删除线 正常字体 下标 上标 正常字体 大字体文本 正常字体 小字体文本 ,1.有序列表（Ordered list） 定义：一种在表的各项前显示有数字或字母的缩排列表 列表项 1 列表项 2 列表项 3 OL标记符的属性： type设置数字序列样式 start 设置数字序列的起始值, 值可以是任意整数 当位于 OL 标记符内时，LI 标记符的属性： type 设置数字样式，取值与 OL 的 type 属性相同 value 设置一个新的数字序列起始值，以获得非连续性的数字序列,基本语法介绍-列表,2.无序列表（Unordered list） 定义：一种在表的各项前显示有特殊项目符号的缩排列表。 无序列表标记符 UL 标记符的 type 属性控制列表项前特殊符号的显示 列表项标记符 LI 标记符的 type 属性的值如下表所示：,在Internet Explorer 中，type 的值是区分大小写的,列表的嵌套 使用有序列表嵌套可以获得不同层次的编号列表。嵌套时，只需将内层列表作为外层列表的一个列表项即可。列表的嵌套层数没有限制； 有序列表和无序列表也可互相嵌套。,【练习】 有序列表 第一列 第二列 第三列 ,【练习】 无序列表 无序列表的使用 圆圈 方块 圆点 默认样式 上层定义1 上层定义2 上层定义3 上层定义4 本地定义方块 上层定义5 ,【练习】 设置列表的种类 设置列表的种类 a类1 a类2 I类1 i类2 ,【练习】 有序列表中签套有序列表 有序列表中套有序列表示例 有序1 有序a 有序b 有序2 有序罗马1 有序罗马2 有序罗马3 ,【练习】 有序列表中嵌套无序列表 有序列表中嵌套无序列表示例 有序1 无序 无序 有序2 无序 无序 无序 有序3 ,锚点标签 格式: 链接点 href属性：用于指定超链接的目标 链接目标：要访问的目标页面或其他资源，使用URL来表示 链接点：在和之间任何可单击的网页元素，如文字或图像 我的大学,基本语法介绍-超链接,指向本页的超链接,对同一网页的不同部分或进行链接 指向本页的链接必须先定义锚点，然后才能定义链接。 锚点的定义： 此处内容可省略 定义链接 链接点 定义指向不同页面内锚点的链接，形式如下 链接点,【练习】 我的主页 欢迎来到我的主页 最新更新 我的自传 给我留言 ,【练习】 我的主页 欢迎来到我的主页 最新更新 最新更新 返回 我的自传 返回 给我留言 返回 ,【练习】 使用超链接来传送电子邮件 请将对此网页内容的意见或感想， 发送邮件给我 ，谢谢！ , 表格标题, 表格的行, 行列标题数据, 普通数据, 表格,基本语法介绍-表格,HTML 表格模型使用户可以将各种数据（包括文本、预格式化文本、图像、链接、表单、表单域以及其他表格等）排成行和列，从而获得特定的表格效果 用于设计网页的布局,基本语法介绍-表格,使用TABLE标记符包括所有表格内容 使用CAPTION标记符定义表格的标题 从第一行开始，使用TR标记符分隔每一行 表格有多少行，就应该有多少个TR标记符 表格的行数应该是垂直方向上单元格的最大数 在每一行(即TR标记符后)内，依次用TH或TD标记符标记每个单元格的内容 按照步骤2的做法，顺次一行一行处理，直到表格结束 如果遇到空单元格，只需使用空的TH或TD标记符即可,基本语法介绍-表格,标签符 Width属性表格宽度 可以为像素点值或百分比 Border属性边线宽度 具体数值，0表示不显示边线 Frame属性控制表格边框表示表格最外层的四条框线，该属性的取值可以是： Void无边框。void是默认值，即默认时不显示边框 Above仅有顶框 Below仅有底框 Hsides仅有顶框和底框（水平方向） vsides 仅有左、右侧框（垂直方向） lhs 仅有左侧框 rhs 仅有右侧框 box 包含全部四个边框 border 包含全部四个边框,rules属性控制是否显示以及如何显示单元格之间的分隔线，取值可以是： none 无分隔线。none是默认值，即默认时不显示单元格间的分隔线 rows 仅有行分隔线 cols 仅有列分隔线 all 包括所有分隔线 Align属性控制表格与页面其它内容的对齐方式，取值可以是： Left 、center、right Bgcolor属性设置表格的背景颜色 background属性设置表格的背景图案 Cellspacing属性单元格之间的距离 cellpadding属性分割线与数据之间的距离,标签符 定义表格的标题 align属性表格标题在网页中的对齐方式 取值为：left 、center 、right 成绩单 标签符 定义表格的一行 align属性行中数据的水平对齐方式 取值为：left 、center 、right valign属性行中数据的垂直对齐方式 取值为：top 、middle 、bottom Bgcolor属性整行单元格的背景颜色,标签符 定义行中的具体单元格 align属性单元格内数据的水平对齐方式 取值为：left 、center 、right valign属性单元格内数据的垂直对齐方式 取值为：top 、middle 、bottom bgcolor属性单元格的背景颜色 width属性、height属性单元格宽度、高度 具体数据值或百分比 rowspan属性单元格所占的行数 表示该单元格高度为三行 colspan属性单元格所占的列数,【练习】 销售业绩 张三销售业绩 编号姓名外销内销总数 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张三9269161 0002王五8692178 0003李四90100190 0004何六7286158 0005赵七8093173 ,位图与矢量图,位图，用点描述图像,矢量图，用线条等数学信息描述图像,基本语法介绍-图像,Web页图像格式 GIF格式 Graphics Interchange Format(图形交换格式) 适用于颜色较少（小于256色）的图像压缩，并允许透明，也可以是动画 JPEG格式 Joint Photographic Experts Group(联合静态图形专家组) 可控制图像的压缩比率,适用于颜色较为丰富的图像,不支持透明和动画 PNG格式 Portable Network Graphics(可移植网络图形) 适用于矢量图像，并允许半透明,基本语法介绍-图像,图像标记符 在网页中插入图像或动画元素 具体属性：title,基本语法介绍-图像,【练习】 图片背景 用图片作为背景 在浏览器中，作为背景的图片将按原来的大小复制，平铺而充满满整个网页的显示区域。 因此作为背景的图片文件，可以做的很小，这样可以加快下载的速度。 ,【练习】 图片的对齐方式 居左 居中 居右 居中 ,【练习】 文本与图片在垂直方向上的对齐方式 猫1顶部对齐 猫2中央对齐 猫3底部对齐 ,【练习】 文本环绕图片及其解除 加菲猫 我们热爱的加菲猫已经26岁啦！但它还来不及为青春逝去而黯然神伤， 而是兴致勃勃地随主人乔恩(布瑞金梅耶饰)来到了英国旅行。 加菲，品种属橘色虎斑猫，1978年6月19日生于一家意大利餐馆的厨房 ,HTML高级应用,一、定义： 能在同一个浏览器窗口中显示多个网页的页面布局控制容器 二、作用： 网站导航功能 将浏览器窗口划分为不同的部分，每部分中装载不同的网页，通过为超链接指定目标框架，可以为框架之间建立起内容之间的联系，因而实现页面的导航和页面间的交互操作 联机帮助,高级应用-框架,框架标记符及格式,框架集标记符，是框架容器，框架必须定义在框架集之内,定义浏览器不支持框架技术时所要显示的替代内容，必须包含在 标记符之中，可选,框架标记符，定义一个框架，必须包含在 标记符之中,也可以嵌套,高级应用-框架,框架集标签,高级应用-框架,框架集标签,高级应用-框架,rows/cols的值说明 属性值可以使用数字、百分比、剩余值及三种方式的混合 数字：表示所占的像素数 百分比“%”：表示子窗口的高度/宽度占浏览器窗口高度/宽度的百分比 剩余值“*”：表示所有定值窗口设定之后的剩余部分,框架标记符,高级应用-框架,框架中的超链接 链接： 超链接点 特殊框架名 _top _self _blank _parent,高级应用-框架,【练习】 框架演示 ,【练习】 各窗口边框的设置 ,【练习】-框架间的链接1 框架间的链接1 ,【练习】-框架间的链接2 框架间的链接02 ,定义： 用于实现网页浏览者与服务器（或者说网页所有者）之间信息交互的一种页面元素，在 WWW 上它被广泛用于各种信息的搜集和反馈。,高级应用-表单,表单的基本工作原理： 浏览者在表单中填写或选择信息； 单击“提交”按钮，填写或选择的信息按照指定的方式通过网络传递到服务器端； 由服务器端的特定程序进行处理 处理的结果： 返回一个页面 例如：通知注册成功的页面 在服务器端完成特定功能 例如：在数据库中记录下新用户的信息） 表单不但需要在网页中用HTML进行显示，而且还需要服务器端特定程序的支持,高级应用-表单,表单的标签符,格式： ,用户数据提交给服务器的方法,处理已提交表单数据的程序，该程序必须能够处理表单数据,表单发送时所使用的内容类型,高级应用-表单,属性 提交method属性 get方法：在URL的末尾附加要向服务器发送的信息。如： http: