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

三、HTTP协议、开发与HTML语言,主要内容,HTTP协议及其开发方法HTML语言,Page2,HTTP协议,问题,当我们想浏览一个网站的时候，只要在浏览器的地址栏里输入网站的地址就可以了，例如：，但是在浏览器的地址栏里面出现的却是：，你知道为什么会多出一个“http”吗？“http”是什么意思呢？,Page2,HTTP协议是什么,HTTP（HypertextTransferProtocol）中文“超文本传输协议”，是一种为分布式，合作式，多媒体信息系统服务，面向应用层的协议，是Internet上目前使用最广泛的应用层协议，它基于传输层的TCP协议进行通信，HTTP协议是通用的、无状态的协议。功能：用于在服务器和客户机之间传输超文本文件。,HTTP的运行原理,TCP/IP与HTTP,我们知道，Internet的基本协议是TCP/IP协议，然而在TCP/IP模型最上层的是应用层(Applicationlayer)，它包含所有高层的协议。高层协议有：文件传输协议FTP、电子邮件传输协议SMTP、域名系统服务DNS、网络新闻传输协议NNTP和HTTP协议等。,HTTP采用请求响应的握手方式，HTTP定义的事务处理其运作的基本过程如下图所示：,HTTP通信方式,Page2,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为,HTTPoverTCP,TCP连接,建立TCP连接,HTTP请求报文,释放TCP连接,HTTP的工作原理,1）点对点方式点对点方式是最简单的传输方式，用户经过请求与源服务器间通过HTTP建立起点对点的连接。2）具有中间服务器方式中间服务器系统充当通信中继功能，客户发出的请求通过中继到达相关的服务器，同样服务器的响应也要通过中继才能返回给客户。3）缓存方式缓存方式暂时保存一定时间内的客户请求及该客户请求所对应的服务器响应，这样的缓存便于处理新的客户请求，节省网络流量和当地计算资源。,HTTP工作方式主要三种：,即从客户端(浏览器)向Web服务器发送的请求报文。报文的所有字段都是ASCII码。,方法,URL,版本,CRLF,首部字段名,:,值,CRLF,CRLF,实体主体(Entitybody),请求行如:GET/index.htmlHTTP/1.1,首部行:用来说明浏览器、服务器或报文主体的一些信息。如:Host:Connection:closeUser-Agent:Mozilla/5.0Accept-Language:cn,请求报文,HTTP报文结构,即从Web服务器到客户机(浏览器)的应答。报文的所有字段都是ASCII码。,版本,状态码,短语,CRLF,首部字段名,:,值,CRLF,CRLF,实体主体(Entitybody),状态行如:HTTP/1.1200OK,首部行:用来说明浏览器、服务器或报文主体的一些信息。如:Date:Wed,08May200822Sever:Apache/1.3.2(Unix)Content-Length:4096Content-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把自己这种标识语言称作通用标记语言(GeneraizedMarkupLanguage)，即GML。但IBM没在GML上做太多工作，直到1986年国际标准化组织(ISO)认为IBM提出的概念很好，并发布了为生成标准化文档而定义的标记语言标准(ISO8879)，称为新的语言SGML，即标准通用标记语言。,HTML,HTML即超文本标记语言(HypertextMarkupLanguage)定义了超文本文档的SGML的子集。人们习惯使用术语HTML表示超文本文档本身(属于一种特殊类型的SGML文档)和用以产生超文本文档的标记语言。我们认为它是：一种在WEB上以超文本形式出版信息的国际化标准语言，它是基于SGML，非私有的资源描述格式。,HTML,它具备以下几个特性:是一种纯文本文件，可以使用各种文字编辑器来进行编辑。扩展名为.htm或.html。与浏览器程序产生文件关联，由浏览器编译执行。执行的顺序系由上而下，依序执行。因为浏览器支持或表现的方式不一，因此相同的文件在不同的客户环境（浏览器）中的表现可能或有差异。由许多标签（tag）所构成的元素（element）组合而成。,HTML的版本历史,目前的HTML已进入第四代，每一版本都是前一版本的超集。HTMLLevels0和1：目前大多浏览器均支持以上版本。HTML版本1较HTML0增加了加亮文本和页面内显示图象等标签。HTMLLevels2:增加了对表格的支持。真是一个重大的转变，从此WWW具有交互功能-即信息可以双向的传播。目前大多数浏览器均支持HTML2。HTMLLevel3:增加了许多重要的标签，如显示表(TABLE)的标签等等。HTMLLevel4:HTML系列的最高版本。XHTML1.0:具有更强的通用性。,基本概念,Hypertext:是指在文件中包含有链接到其它文件的能力，通常是利用不同颜色或加底线的字。使用者只需经由鼠标点取，便可链接到其它相关的文件。除了超文件的链接外，编辑出来的超文件同时具备展现多媒体的能力，可加入图片、声音、及动画及等效果。Hyperlink:即”超链接”，是将鼠标移到在附有超级链接的图片或文字上，按一下左键，就可以立刻连到这个超级链接所指定的内部网页或者是其它网站上的位置去浏览。HomePage：用html写成，可以用浏览器解析后看到的超文件。Browser：浏览器(IE、Netscape等),基本概念网页编写软件,一般文件编辑程序（如：记事本、Word、Excel、PowerPoint）文件式网页编辑程序（如：HTMLabc、HotDog.）所见即所得网贡编辑程序（如：MicrosoftFrontPage、MacromediaDreamwaver),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文件基本架构,【练习一】,Myfirstpage我的第一个网页,HTML文件基本架构,META标记符用于描述不包含在标准HTML里的一些文档信息，例如开发工具，作者，网页关键字，网页描述等。这些定义的内容并不在网页页面中显示，但是一些搜索引擎可以检索这些信息，浏览者可以根据这些关键字或描述查找到该网页。常用功能是设置自动转址功能使浏览器自动从一个地址跳转到另一个地址位置META标记符的常用属性包括：name、content和http-equivname属性给出特性名content属性给出特性值http-equiv属性指定HTTP响应名称，通常用于替换name属性，HTTP服务器使用该属性值为HTTP响应消息头收集信息,例1设置客户端行内程序的语言是JavaScript例2用来标记你的页面的解码方式例3META示例再过10秒钟，我就上学校的网站了！,我的第一个网页,例4,设置页面属性,正文标记符包括一些常用属性，可以用于设置网页背景颜色和图案，以及设置文档中文字和超链接的颜色设置页面背景颜色bgcolor设置页面背景图像background使用背景图案时，如果图案小于浏览器窗口的大小，则浏览器会自动象铺地板砖一样平铺背景图案。可以同时设置背景图案和背景色，以便在不能显示图像的浏览器上显示背景色,页面基本属性定义在中background=背景图片文件名bgcolor=背景颜色text=文本默认颜色link=未被访问链接源文字的颜色alink=被激活链接源文字的颜色vlink=访问过链接源文字的颜色topmargin=信息内容的顶边距离leftmargin=“”信息内容的左边距离背景音乐标记符用于指定网页的背景音乐属性src，用于指定背景音乐的源文件。loop，用于指定背景音乐重复的次数，如果不指定该属性，则背景音乐无限循环例子,16种标准颜色,注释的作用HTML注释的格式由开始标记符构成标记符之间的任何内容都将被浏览器解释为注释，而不在浏览器中显示例子：网页标题正文，正文，正文注释可插入在Web页的任何位置,添加注释,显示特殊字符,特殊字符参考字符（附录2）参考字符以“isapopularVCDprogram.isapopularVCDprogram,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属性默认值为center2.DIV标记符为文档分节，以便为文档的不同部分应用不同的段落格式必须与align等属性联合使用位于DIV标记符中的多段文本将被认为是一个节，可为它们设置一致的对齐格式。3.CENTER标记符将和包括起来的内容定义为居中对齐,【练习】段落标签示例登黄鹤楼白日依山尽，黄河入海流。欲穷千里目，更上一层楼。,【练习】分区显示标签的应用居中center居中center居左left居左left居右right居右right,文本对齐属性4.显示预排格式标签：保留HTML文件中已编辑好的格式，如回车、多个空格、等,【练习】显示预排格式唐诗二首赋得古原草送别长相思唐白居易唐白居易离离原上草，一岁一枯荣。汴水流，泗水流，野火烧不尽，春风吹又生。流到瓜洲古渡头。远芳侵古道，晴翠接荒城。吴山点点愁。又送王孙去，萋萋满别情。思悠悠，恨悠悠，恨到归时方始休。月明人依楼。,水平线标记符在网页内容中添加水平线，分隔文档内容属性：size：水平线的粗细程度，用整数表示，默认值为2width：水平线的长度，用像素长度或宽度的百分比表示noshade：去除水平线的3D样式color：水平线的颜色align：水平线的对齐方式例子：,基本语法介绍-标题和段落,【练习】水平线段标签的应用水平线,字体控制标记符,size属性控制字符的大小size=字号从17,字号越大，默认值为3color属性控制字符的颜色color=使用颜色名称或十六进制值指定颜色face属性指定字体样式face=常用的英文字体有“TimesNewRoman”、“Arial”等常用的中文字体有“宋体”、“楷体”等,基本语法介绍-文字标签,设置字符样式指标记符本身就说明了所修饰文字的效果的字符样式使用方法：将设置格式的字符括在标记符之间由于带有超链接的文本下通常包含下划线，因此下划线格式易让人产生误解，建议使用时慎重常见的物理字符样式,【练习】一号字二号字三号字四号字五号字六号字七号字,【练习】设置字体幼圆隶书楷体黑体仿宋宋体方正舒体华文彩云华文琥珀TimesNewRoman,【练习】设置字型正常字体加粗体正常字体斜体正常字体下划线正常字体标准打印机字体正常字体带删除线正常字体下标上标正常字体大字体文本正常字体小字体文本,1.有序列表（Orderedlist）定义：一种在表的各项前显示有数字或字母的缩排列表列表项1列表项2列表项3OL标记符的属性：type设置数字序列样式start设置数字序列的起始值,值可以是任意整数当位于OL标记符内时，LI标记符的属性：type设置数字样式，取值与OL的type属性相同value设置一个新的数字序列起始值，以获得非连续性的数字序列,基本语法介绍-列表,2.无序列表（Unorderedlist）定义：一种在表的各项前显示有特殊项目符号的缩排列表。无序列表标记符UL标记符的type属性控制列表项前特殊符号的显示列表项标记符LI标记符的type属性的值如下表所示：,在InternetExplorer中，type的值是区分大小写的,列表的嵌套使用有序列表嵌套可以获得不同层次的编号列表。嵌套时，只需将内层列表作为外层列表的一个列表项即可。列表的嵌套层数没有限制；有序列表和无序列表也可互相嵌套。,【练习】有序列表第一列第二列第三列,【练习】无序列表无序列表的使用圆圈方块圆点默认样式上层定义1上层定义2上层定义3上层定义4本地定义方块上层定义5,【练习】设置列表的种类设置列表的种类a类1a类2I类1i类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、rightBgcolor属性设置表格的背景颜色background属性设置表格的背景图案Cellspacing属性单元格之间的距离cellpadding属性分割线与数据之间的距离,标签符定义表格的标题align属性表格标题在网页中的对齐方式取值为：left、center、right成绩单标签符定义表格的一行align属性行中数据的水平对齐方式取值为：left、center、rightvalign属性行中数据的垂直对齐方式取值为：top、middle、bottomBgcolor属性整行单元格的背景颜色,标签符定义行中的具体单元格align属性单元格内数据的水平对齐方式取值为：left、center、rightvalign属性单元格内数据的垂直对齐方式取值为：top、middle、bottombgcolor属性单元格的背景颜色width属性、height属性单元格宽度、高度具体数据值或百分比rowspan属性单元格所占的行数表示该单元格高度为三行colspan属性单元格所占的列数,【练习】销售业绩张三销售业绩编号姓名外销内销总数0001张三4586131张三销售业绩编号姓名外销内销总数0001张三4586131张三销售业绩编号姓名外销内销总数0001张三4586131,【练习】B040801班姓名性别年龄张三男21王二女22B040801班姓名性别年龄张三男21王二女22,【练习】学生成绩学生成绩表学号姓名成绩Java网页制作数据库0001张三92691610002王五86921780003李四901001900004何六72861580005赵七8093173,【练习】学生成绩学生成绩表学号姓名成绩Java网页制作数据库0001张三92691610002王五86921780003李四901001900004何六72861580005赵七8093173,位图与矢量图,位图，用点描述图像,矢量图，用线条等数学信息描述图像,基本语法介绍-图像,Web页图像格式GIF格式GraphicsInterchangeFormat(图形交换格式)适用于颜色较少（小于256色）的图像压缩，并允许透明，也可以是动画JPEG格式JointPhotographicExpertsGroup(联合静态图形专家组)可控制图像的压缩比率,适用于颜色较为丰富的图像,不支持透明和动画PNG格式PortableNetworkGraphics(可移植网络图形)适用于矢量图像，并允许半透明,基本语法介绍-图像,图像标记符在网页中插入图像或动画元素具体属性：title,基本语法介绍-图像,【练习】图片背景用图片作为背景在浏览器中，作为背景的图片将按原来的大小复制，平铺而充满满整个网页的显示区域。因此作为背景的图片文件，可以做的很小，这样可以加快下载的速度。,【练习】图片的对齐方式居左居中居右居中,【练习】文本与图片在垂直方向上的对齐方式猫1顶部对齐猫2中央对齐猫3底部对齐,【练习】文本环绕图片及其解除加菲猫我们热爱的加菲猫已经26岁啦！但它还来不及为青春逝去而黯然神伤，而是兴致勃勃地随主人乔恩(布瑞金梅耶饰)来到了英国旅行。加菲，品种属橘色虎斑猫，1978年6月19日生于一家意大利餐馆的厨房,HTML高级应用,一、定义：能在同一个浏览器窗口中显示多个网页的页面布局控制容器二、作用：网站导航功能将浏览器窗口划分为不同的部分，每部分中装载不同的网页，通过为超链接指定目标框架，可以为框架之间建立起内容之间的联系，因而实现页面的导航和页面间的交互操作联机帮助,高级应用-框架,框架标记符及格式,框架集标记符，是框架容器，框架必须定义在框架集之内,定义浏览器不支持框架技术时所要显示的替代内容，必须包含在标记符之中，可选,框架标记符，定义一个框架，必须包含在标记符之中,也可以嵌套,高级应用-框架,框架集标签,高级应用-框架,框架集标签,高级应用-框架,rows/cols的值说明属性值可以使用数字、百分比、剩余值及三种方式的混合数字：表示所占的像素数百分比“%”：表示子窗口的高度/宽度占浏览器窗口高度/宽度的百分比剩余值“*”：表示所有定值窗口设定之后的剩余部分,框架标记符,高级应用-框架,框架中的超链接链接：超链接点特殊框架名_top_self_blank_parent,高级应用-框架,【练习】框架演示,【练习】各窗口边框的设置,【练习】-框架间的链接1框架间的链接1,【练习】-框架间的链接2框架间的链接02,定义：用于实现网页浏览者与服务器（或者说网页所有者）之间信息交互的一种页面元素，在WWW上它被广泛用于各种信息的搜集和反馈。,高级应用-表单,表单的基本工作原理：浏览者在表单中填写或选择信息；单击“提交”按钮，填写或选择的信息按照指定的方式通过网络传递到服务器端；由服务器端的特定程序进行处理处理的结果：返回一个页面例如：通知注册成