HTTP协议开发与HTML语言.pptx

Click to edit Master title style,Click to edit Master text styles,Second level,Third level,Fourth level,Fifth level,#,主要内容,HTTP,协议及其开发方法,HTML,语言,Page 2,HTTP,协议,问题,当我们想浏览一个网站的时候，只要在浏览器的地址栏里输入网站的地址就可以了，例如：,，但是在浏览器的地址栏里面出现的却是：,，你知道为什么会多出一个“,http”,吗？,“,http,”是什么意思呢？,Page 2,HTTP,协议是什么,HTTP,（,Hypertext Transfer Protocol,）中文“,超文本传输协议,”，是一种为分布式，合作式，多媒体信息系统服务，面向,应用层,的协议，是,Internet,上目前使用最广泛的应用层协议，它基于传输层的,TCP,协议进行通信，,HTTP,协议是通用的、无状态的协议。,功能,：用于在服务器和客户机之间传输超文本文件。,HTTP,的运行原理,Server,Client,Web,Server,Browser,TCP/IP,HTTP/1.0,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,协议是无状态协议。无状态是指协议对于事务处理没有记忆能力（服务器不记得曾经访问过的用户，也不记得曾经访问过多少次），该功能可使读取页面信息完成的较迅速。,请求,/,响应交互模型,Internet,Web,服务器,客户机,(,浏览器,),Index.html,IP:202.119.236.102,在用户点击,URL,为,over TCP,4,浏览器与服务器建立,TCP,连接,(80,端口,),5,浏览器请求文档：,GET/index.html,6,服务器给出响应，将文档,index.html,发送给浏览器,7,释放,TCP,连接,8,浏览器显示,index.html,中的内容,TCP,连接,建立,TCP,连接,请求文档,1,HTTP,请求报文,响应文档,2,HTTP,响应报文,释放,TCP,连接,HTTP,的工作原理,1,）,点对点方式,点对点方式是最简单的传输方式，用户经过请求与源服务器间通过,HTTP,建立起点对点的连接。,2,）,具有中间服务器方式,中间服务器系统充当通信,中继,功能，客户发出的请求通过中继到达相关的服务器，同样服务器的响应也要通过中继才能返回给客户。,3,）,缓存方式,缓存方式暂时保存一定时间内的客户请求及该客户请求所对应的服务器响应，这样的缓存便于处理新的客户请求，节省网络流量和当地计算资源。,HTTP,工作方式,主要三种：,请求报文,即从客户端,(,浏览器,),向,Web,服务器发送的请求报文。报文的所有字段都是,ASCII,码。,方法,URL,版本,CRLF,首部字段名,:,值,CRLF,首部字段名,:,值,CRLF,首部字段名,:,值,CRLF,CRLF,实体主体,(Entity body),空格,CRLF,回车换行,请求行,如,:,GET/index.html HTTP/1.1,首部行,:,用来说明浏览器、服务器或报文主体的一些信息。如,:,Host:,Connection:close,User-Agent:Mozilla/5.0,Accept-Language:cn,请求报文,HTTP,报文结构,响应报文,即从,Web,服务器到客户机,(,浏览器,),的应答。报文的所有字段都是,ASCII,码。,版本,状态码,短语,CRLF,首部字段名,:,值,CRLF,首部字段名,:,值,CRLF,首部字段名,:,值,CRLF,CRLF,实体主体,(Entity body),空格,CRLF,回车换行,状态行,如,:,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,报文结构,请求报文中的,方法,方法,(,操作,),含义,方法,(,操作,),含义,GET,请求读取一个,Web,页面,HEAD,请求读取一个,Web,页面的首部,POST,附加一个命名资源,(,如,Web,页面,),PUT,请求存储一个,Web,页面,DELETE,删除,Web,页面,TRACE,用于测试，要求服务器送回收到的请求,CONNECT,用于代理服务器,OPTION,查询特定选项,方法,(Method),是对所请求对象所进行的操作,也就是一些命令。请求报文中的操作有,:,HTTP,报文结构,响应报文中的,状态码,状态码,(Status-Code),是响应报文状态行中包含的一个,3,位数字，指明特定的请求是否被满足，如果没有满足，原因是什么。状态码分为以下五类：,状态码,含义,例子,1xx,通知信息,100=,服务器正在处理客户请求,2xx,成功,200=,请求成功,(OK),3xx,重定向,301=,页面改变了位置,4xx,客户错误,403=,禁止的页面；,404=,页面未找到,5xx,服务器错误,500=,服务器内部错误；,503=,以后再试,具体各状态码的含义，请参考,W3C,的,HTTP1.1,标准规范,RFC2616,www.w3.org/Protocols/rfc2616/rfc2616.html,HTTP,报文结构,首部字段或消息头,头,(header),类型,说明,User-Agent,请求,关于浏览器和它平台的信息，如,Mozilla5.0,Accept,请求,客户能处理的页面的类型，如,text/html,Accept-Charset,请求,客户可以接受的字符集，如,Unicode-1-1,Accept-Encoding,请求,客户能处理的页面编码方法，如,gzip,Accept-Language,请求,客户能处理的自然语言，如,en(,英语,),，,zh-cn(,简体中文）,Host,请求,服务器的,DNS,名称。从,URL,中提取出来，必需。,Authorization,请求,客户的信息凭据列表,Cookie,请求,将以前设置的,Cookie,送回服务器器，可用来作为会话信息,Date,双向,消息被发送时的日期和时间,Server,响应,关于服务器的信息，如,Microsoft-IIS/6.0,Content-Encoding,响应,内容是如何被编码的（如,gzip),Content-Language,响应,页面所使用的自然语言,Content-Length,响应,以字节计算的页面长度,Content-Type,响应,页面的,MIME,类型,Last-Modified,响应,页面最后被修改的时间和日期，在页面缓存机制中意义重大,Location,响应,指示客户将请求发送给别处，即重定向到另一个,URL,Set-Cookie,响应,服务器希望客户保存一个,Cookie,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,.,）,所见即所得网贡编辑程序（如：,Micro,s,oft FrontPage,、,Macromedia Dreamwaver,),HTML,标,签,的格式,通常,HTML,的标,签,是以,成对的方式,出现的，其格式如下：,标签名称 属性名称参数,内容,/,标签名称,凡是在,和,之间的内容均会受到这个标签的影响,但是有少部份的标签，加上结尾标签反而觉得累赘，因此在习惯上也有不加结尾标签的。其格式如下：,基本概念,HTML,文件基本架构,文件标题,:,:,:,表头区,主体区,以,开头,以,结尾,HTML,语法：,说明：声明此文件为,HTML,文件与结束,HTML,文件,.,HEAD,语法：,说明：标示,HTML,文件头的开始与结束，可省略不写,.,标题语法：,说明：用来设定,HTML,文件的标题名称，这个标题会在浏览器的左上方显,示出来,.,背景语法：,属性：,背景图片：,BACKGROUND=,”,图档所在,的,URL,”,背景颜色：,BGCOLOR=,”,#RRGGBB,”,，,R,、,G,、,B=0,F,文字颜色：,TEXT=,”,#RRGGBB,”,，,R,、,G,、,B=0,F,超级链接颜色：,LINK=,”,#RRGGBB,”,，,R,、,G,、,B=0,F,浏览过超级链接颜色：,VLINK=,”,#RRGGBB,”,，,R,、,G,、,B=0,F,使用中超级链接颜色：,ALINK=,”,#RRGGBB,”,，,R,、,G,、,B=0,F,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,种标准颜色,色彩名,十六进制值,色彩名,十六进制值,Aqua,（水蓝色）,#00FFFF,Navy,（藏青色）,#000080,Black,（黑色）,#000000,Olive,（茶青色）,#808000,Blue,（蓝色）,#0000FF,Purple,（紫色）,#800080,Fuchsia,（樱桃色）,#FF00FF,Red,（红色）,#FF0000,Gray,（灰色）,#808080,Silver,（银色）,#C0C0C0,Green,（绿色）,#008000,Teal,（茶色）,#008080,Lime,（石灰色）,#00FF00,White,（白色）,#FFFFFF,Maroon,（褐红色）,#800000,Yellow,（黄色）,#FFFF00,注释的作用,HTML,注释的,格式,由开始标记符,构成,标记符之间的任何内容都将被浏览器解释为注释，而不在浏览器中显示,例子：,网页标题,正文，正文，正文,注释可插入在,Web,页的任何位置,添加注释,显示特殊字符,特殊字符,参考字符,（附录,2,）,参考字符以,“,&,”,号开始，以,“,;,”,结束,参考字符既可用数字代码表示，也可用代码名称表示,与,HTML,标记符同，字符代码名称区分大小写,例子：,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,设置一个新的数字序列起始值，以获得非连续性的数字序列,值,type,属性的值,含义,1,阿拉伯数字：,1,、,2,、,3,等，此项为默认值,A,大写字母：,A,、,B,、,C,等,a,小写字母：,a,、,b,、,c,等,I,大写罗马数字：,I,、,II,、,III,、,IV,等,i,小写罗马数字：,i,、,ii,、,iii,、,iv,等,基本语法介绍,-,列表,2.,无序列表（,Unordered list,）,定义：一种在表的各项前显示有特殊项目符号的缩排列表。,无序列表标记符,UL,标记符的,type,属性,控制列表项前特殊符号的显示,列表项标记符,LI,标记符的,type,属性的值如下表所示：,值,type,属性的,含义,disc,实心圆，通常是非嵌套列表的默认值,circle,空心圆，通常是嵌套列表的默认值,square,实心或空心的方块，取决于浏览器,在,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,src,指定要显示的图像的文件名,(URL),alt,指定当图像无法显示或加载时显示的文字,dynsrc,动态源,指定到视频剪辑或,VRMl,文件的,URL,border,整数，图像边框的宽度,align,对齐方式：,left,、,right top,、,middle,、,bottom,height,整数，图像的高度,设置图像的高度和宽度,width,整数，图像的宽度,hspace,像素,水平方向的空白,设置图像周围的空白,vspace,像素,垂直方向的空白,基本语法介绍,-,图像,【,练习,】,图片背景,用图片作为背景,在浏览器中，作为背景的图片将按原来的大小复制，平铺而充满满整个网页的显示区域。,因此作为背景的图片文件，可以做的很小，这样可以加快下载的速度。,【,练习,】,图片的对齐方式,居左,居中,居右,居中,【,练习,】,文本与图片在垂直方向上的对齐方式,猫,1,顶部对齐,猫,2,中央对齐,猫,3,底部对齐,【,练习,】,文本环绕图片及其解除,加菲猫,我们热爱的加菲猫已经,26,岁啦！但它还来不及为青春逝去而黯然神伤，,而是兴致勃勃地随主人乔恩,(,布瑞金,梅耶饰,),来到了英国旅行。,在伦敦，一次偶然的事件中，加菲被误认为是一只长得十分相似的皇室,血统猫，并因此意外继承了一座美丽的城堡。在这座城堡里，加菲终于过上了,它梦寐以求的生活,享受管家和仆人的照顾，和朋友们一起狂欢,party,，每,天可以睡上好多个午觉，醒来后还有可口的下午茶搭配无限量供应的猪肉卷,加菲，品种属橘色虎斑猫，,1978,年,6,月,19,日生于一家意大利餐馆的厨房,HTML,高级应用,一、定义,：,能在同一个浏览器窗口中显示多个网页的页面布局控制容器,二、作用：,网站导航功能,将浏览器窗口划分为不同的部分，每部分中装载不同的网页，通过为超链接指定目标框架，可以为框架之间建立起内容之间的联系，因而实现页面的导航和页面间的交互操作,联机帮助,高级应用,-,框架,框架,标记,符及格式,框架集标记符,，是框架容器，框架必须定义在框架集之内,定义浏览器不支持框架技术时所要显示的替代内容，必须包含在,标记符之中，可选,框架标记符,，定义一个框架，必须包含在,标记符之中,也可以嵌套,高级应用,-,框架,框架集标签,高级应用,-,框架,属性,含义,rows,窗口横向分隔。,cols,窗口纵向分隔。,border,分割窗口的框架的边框宽度，以像素为单位。,bordercolor,框架边框的颜色。,frameborder,是否显示框架。,0-,不显示，,1-,显示；默认为,1,framespacing,框架间保留空白的间距，以像素为单位。,框架集标签,高级应用,-,框架,rows/cols,的值说明,属性值可以使用数字、百分比、剩余值及三种方式的混合,数字：表示所占的像素数,百分比“,%”,：表示子窗口的高度,/,宽度占浏览器窗口高度,/,宽度的百分比,剩余值“*”：表示所有定值窗口设定之后的剩余部分,框架标记符,高级应用,-,框架,属性,含义,src,指定框架显示的,HTML,文件的位置。,name,指定窗口的名称。,noresize,设置是否可以调整窗口大小。该属性是标志，没有取值。,bordercolor,框架边框的颜色。,marginwidth,窗口内的内容与窗口左右边缘的距离，单位像素。,marginheight,窗口内的内容与窗口上下边缘的距离，单位像素。,frameborder,是否显示框架。,0-,不显示，,1-,显示；默认为,1,framespacing,框架间保留空白的间距，以像素为单位。,scrolling,是否显示滚动条。,no-,不显示，,yes-,显示，,auto-,自动设置；默认为,auto,。,框架中的超链接,链接：,超链接点,特殊框架名,_top,_self,_blank,_parent,高级应用,-,框架,【,练习,】,框架演示,【,练习,】,各窗口边框的设置,【,练习,】,-,框架间的链接,1,框架间的链接,1,【,练习,】,-,框架间的链接,2,框架间的链接,02,单击此处将打开一个新的浏览器窗口来显示这,3,个框架,单击此处将在本窗口内来显示这,3,个框架,单击此处将在这,3,个框架的父窗口,(FRAMESET),内来显示,A,窗口,单击此处将用整个浏览器窗口来显示,A,窗口,定义：,用于实现网页浏览者与服务器（或者说网页所有者）之间信息交互的一种页面元素，在,WWW,上它被广泛用于各种信息的搜集和反馈。,高级应用,-,表单,表单的基本工作原理：,浏览者在表单中填写或选择信息；,单击“提交”按钮，填写或选择的信息按照指定的方式通过网络传递到服务器端；,由服务器端的特定程序进行处理,处理的结果：,返回一个页面,例如：通知注册成功的页面,在服务器端完成特定功能,例如：在数据库中记录下新用户的信息）,表单不但需要在网页中用,HTML,进行显示，而且,还需要服务器端特定程序的支持,高级应用,-,表单,表单的标签符,格式：,用户数据提交给服务器的方法,处理已提交表单数据的程序，该程序必须能够处理表单数据,表单发送时所使用的内容类型,高级应用,-,表单,属性,提交,method,属性,get,方法：在,URL,的末尾附加要向服务器发送的信息。如：,-,TEXT1、TEXT2,或用户选择的任何名称。,VALUE,此属性是可选属性，它指定表单元素的初始值,SIZE,此属性指定表单控件的显示长度。用于文本输入的表单元素即输入类型是,TEXT,或,PASSWORD,的,MAXLENGTH,此属性用于指定在,TEXT,或,PASSWORD,表单元素中可以输入的最大字符数。默认值为无限的,CHECKED,此属性是一个,Boolean,属性，指定按钮是否是被选中的。当输入类型为,RADIO,或,CHECKBOX,时，使用此属性。,disabled,设置该表单域不可用，不能编辑。,控件的类型：,文本框,text,口令框,password,复选框,checkbox,单选框,radio,文件选择框,file,按钮,submit reset button,多行文本框,选项菜单,高级应用,-,表单,【,练习,】,输入文本和密码,个人资料,姓名,:,主页的网址,:,密码,:,【,练习,】,个人资料,个人资料,姓名,:,性别,:,男,女,出生日期,:,年,月,日,个人爱好,:,体育,文学,艺术,旅游,美食,其他,【,练习,】,-,选择栏的使用 见,154,页