轻松学JavaWeb开发之浏览器技术.pptx

,单击此处编辑母版标题样式,2020/2/7,#,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,第,1,章 浏览器技术,如今随着互联网技术的飞速发展，人们对网络的依赖不断加深。其中，浏览器更是一个连接,Internet,主要的工具。我们熟悉的浏览器包括微软的,IE,，,Mozilla,的,FireFox,，,OPERA,等等。那么浏览器真正的作用是什么呢？它是如何工作的呢？官方的解释是这样的定义浏览器的：万维网（,Web,）服务的客户端浏览程序。可向万维网（,Web,）服务器发送各种请求，并对从服务器发来的超文本信息和各种多媒体数据格式进行解释、显示和播放。下面我们就来详细地了解它。,1.1 HTTP,协议,我们通过浏览器在互联网上浏览新闻，看电影，购物等这些行为看似是顺理成章的事。其实，这一切的行为都是浏览器通过与远在各地的,Web,服务器进行交互。为了交互的进行，它们需要共同遵守一定的协议来控制。这就是,HTTP,（,Hypertext Transport Protocol,），超文本传输协议，一种详细规定了浏览器和,web,服务器之间互相通信的规则，通过因特网传送万维网文档的数据传送协议。,1.1.1 HTTP,协议原理,HTTP,协议是一种通信协议。它允许将,HTML,（超文本标记语言）从,Web,服务器传送到,Web,浏览器。因此需要,Web,服务器和,Web,浏览器都支持该协议。它的具体请求、响应格式如图,1.1,所示。,1.1.1 HTTP,协议原理,当浏览器向,web,服务器发送一个请求，,Web,服务器在接受到这个请求后，会返回一个响应给浏览器。这个请求包含一个请求页面的名字和请求页面的信息等。返回的响应包含被请求的页面和被请求页面的信息以及服务器的一些信息等。从图,1.1,我们可以也看到，浏览器发送这个请求的时候，依据的是,HTTP/1.1,的格式，因此在返回响应的时候，服务器也必须按照,HTTP/1.1,的协议格式来响应。,1.1.2 HTTP,请求格式,HTTP,协议对浏览器所发出的,request,格式有如下三部分的规定：,第一部分是,request line,。包裹请求的方法、所请求资源的名字以及现在所使用的协议。,第二部分是,request headers,。它包含浏览器的一些信息。,第三部分是,body,。其中,request headers,与,body,之间有个空行。,具体结构如图,1.2,所示。,其中，,METHOD,表示请求的方法，如“,POST,”、“,GET,”。,path-to-resource,表示请求的资源。,HTTP/version-number,表示,HTTP,协议的版本号。,1.1.3 HTTP,响应格式,HTTP,协议对,Web,服务器所返回的,response,也有具体的格式规定。和,request,一样，,response,也分为三部分。,第一部分是,response line,。它包含,HTTP,协议的版本信息，响应状态等。,第二部分是,response header,。它包括服务器的一些基本信息。,第三部分是,body,。,response header,与,body,之间也有个空行。,具体结构如图,1.4,所示。,其中，,HTTP/version-number,表示,HTTP,协议的版本号。,statuscode,表示服务器返回的状态码。,message,表示服务器返回的状态消息。,注意：这里返回的状态码是,200,，状态信息是,OK,。表示服务器响应成功，请求被成功的完成，所请求的资源被发送到客户端。,1.1.4 Content type,服务器在接受到请求后，必须能识别要发送的信息类型，比如图片、,txt,文本、,excel,表格还是其他的形式。还需要知道网页的编码方式是什么。因此，,Content type,就是用于定义网络文件的类型以及网页字符的编码。用于决定浏览器以什么形式、什么编码读取这个文件。,1.MIME,类型,MIME,（,Multipurpose Internet Mail Extensions,），即多功能,Internet,邮件扩充服务。它是一种多用途网际邮件扩充协议，服务器会通过这种手段来告诉浏览器它所发送的这些多媒体数据是什么类型的，需要用何种程序来打开这种文件。最常用的,MIME,类型有如表,1.1,所示。,名称,MIME,类型,超文本标记语言,hext/html,普通文本,text/plain,Microsoft Word,application/msword,PDF,文档,application/pdf,AVI,文件,video/x-msvideo,2.Content-charset,字符的编码方式有很多种。有的支持中文显示，有的支持英文显示。其中最常见的字符集编码类型如表,1.2,所示。,charset,类型,字符集编码类型,ISO-8859-1,拉丁语系,1,Big5,繁体中文,UTF-8,通用子集转化格式（,8,位）,ISO-2022-JP,日本语,ISO-2022-KR,韩国语,GBK,简体中文（兼容,GB2312,）,GB2312,汉字国标码,1.2 HTML,HTML,（,Hypertext,Markup Language,），即超文本标记语言，是用于描述网页文档的一种标记语言。它是一种规范，一种标准，通过标记符号来标记要显示网页的各个部分。任何动态语言都离不开,HTML,的支持。所以在学习,Web,开发之前，读者首先要掌握,HTML,的相关基础知识。,1.2.1,标记语言,标记语言，也叫做置标语言。是将文本以及文本相关的其他信息结合起来，展现出文档的结构和数据处理细节的电脑文字编码。,标记语言根据使用范围的不同有很多类型。例如用户网页信息的是超文本标记语言（,HTML,），用户电脑处理各种信息的是可扩展的标记语言（,XML,）等。由于类型的不同，它们各自的语法也各不相同。下面我们重点介绍的是用于搭建网页的超文本标记语言，即,HTML,。,HTML,的大致结构如图,1.6,所示。,1.2.1,标记语言,我们在地址栏中输入文件的存储地址，就可以运行这个,html,文件，运行结果如图,1.8,所示,。,注意：一般情况下，可以包括其他内容的,HTML,标签都是成对出现的，例如上面例子中的,这对标签，它包含了一个文字的标题信息，所以成对出现。而,这样的标签仅仅是一个回车换行的作用，它不包含其他内容，所以不成对出现。,1.2.2,超链接,在,HTML,中实现页面的跳转的主要方式是用超链接的形式。超链接的用途非常广泛，可以是一个字、一个词，或者一组词，也可以是一幅图像。用户可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。例如我们打开百度首页，如图,1.7,所示。它的每个词汇单击后都可以链接到一个新的页面，甚至在点击首页中图片的时候也打开了一个新的页面，这都是超链接的应用。,在,HTML,中超链接的标签是,，它的语法格式如图,1.8,所示：,1.2.3,静态页面,当一个网页页面仅仅由,HTML,语言代码组织起来的，那么这个页面就是一个静态的页面。它不会与数据库、服务器进行交互，只能通过浏览器进行显示，是一个独立存在的文件。现今我们通过浏览器浏览,Internet,的时候，所看到的大部分网站都不是静态网站。因为它的显示单一，功能简单，已经被动态网站所取代。,与静态网站相对应的是动态网站，所谓的动态网站，就是用户可以通过浏览器与服务器端进行数据交互的网站。,动态网站不只是,HTML,语言组织起来的。它是由,HTML,语言与其他的脚本语言共同组织起来的，例如,HTML+ASP,、,HTML+PHP,、,HTML+JSP,等。,HTML,语言起到一个显示的作用，至于交互的动作及过程，都是由脚本语言完成的。有关动态网站的内容我们会在后面章节中为大家讲解。,1.3 HTML,常用表单标签,在,HTML,的布局标签中，表单标签是使用频率最高的一个。它可以把一组信息用表格的形式表示出来。这一节我们就来看表单元素是如何实现的。,1.3.1,表单元素,在,HTML,的标签库中有,这样一个成对标签，它用于向一个目标地址提交一些数据。在这个标签中，我们可以设计文本框、单选框、复选框和按钮等等一些元素用于获取数据，这些元素都称为表单元素。下面我们介绍几个最常用的表单元素。,1.,文本框,在,HTML,页面最常用的就是一个单行的文本框了。它的语法格式是：,在浏览器页面显示的效果如图,1.11,所示。,2.,单选框,单选框就是在并列的几个值中只能选择一项。对于一组元素，必须保证它们的,name,属性值相同、语法格式如下所示：,在浏览器上显示的效果如图,1.12,所示。,3.,复选框,当用户需要从若干给定的选择中选取一个或若干选项时，就会用到复选框。对于同一组值，必须要保证它们的,name,值相同。语法格式如下：,在浏览器上显示的效果如图,1.13,所示。,4.,提交按钮,当表单要提交时，单击这个按钮，表单就会将表单中所选数据提交到目的地址。语法格式如下：,在浏览器上显示的效果如图,1.14,所示：,除了上述介绍的几个元素外，表单还有其他很多的元素，例如重置按钮、密码框和下拉列表等等。,1.3.2,表单元素的属性,在这些元素中，有一些共同的属性，即,type,、,name,和,value,。那么这三个属性都有什么作用呢？,type,属性：表示该元素的类型。有,text,（文本框）、,checkbox,（单选框）和,button,（按钮）等值。,name,属性：表示该元素的名称，只能有唯一值。,value,属性：设置该元素的默认值。,与提交表单之前相比，字符串后面多了“？,hobby=test&tijiao=botton,”，这表示，在我们提交表单后，表单会将表单元素中文本框和按钮属性的值以“,key=value,”的形式附加到地址字符串的后面，之间用符号“,&,”隔开。,1.3.3,表单中添加目的地址,在示例,1.4,中我们可以看到，在,form,表单中并没有目的地址属性。表单提交仅仅是包含着数据但并没有提交到某个页面。在这里我们在,form,中添加,action,这个属性。这个属性的作用就是表示表单要提交的目的地址。语法格式如图,1.17,所示：,1.3.4,表单中添加数据的提交方式,当我们的数据可以提交到目的地址后，疑问也随之产生，就是数据时以何种方式提交的呢？是通过浏览器的地址栏中的附加到地址字符串方式提交的吗？还是有其他的方式？,form,表单中有还有一个属性,method,。它表示表单中数据的提交方式。它有两个可选值：,POST,和,GET,。,POST,：将数据打包，以隐含的方式传递。,GET,：附加到,URL,上，通过,URL,来传递数据。,1.4 CSS,基础简介,在前面的内容中讲解了,HTML,，现在我们已经基本可以编出最简单的网页了，但是仅仅这样还是不够的，一个专业的网页需要在字体、颜色、布局等方面进行各种设置，需要给用户带来视觉的冲击。这一节我们简要介绍一下页面美化技术,CSS,。,1.4.1 CSS,属性设置,CSS,（,Cascading Style Sheets,）即层叠样式表，也就是通常所说样式表。,CSS,是一种美化网页的技术。通过使用,CSS,，可以方便、灵活地设置网页中不同元素的外观属性，通过这些设置可以使网页在外观上达到一个更高的级别。,CSS,美化网页就是通过设置页面元素的属性来实现的，下面我们就来介绍,CSS,属性设置的一些基本方法。,1,字体、颜色、背景等属性设置,字体、颜色、背景属性是,CSS,最基本的属性，其最常用的属性方法如表,1.3,所示。,属性方法,方法作用,font-family,定义使用哪种字体,font-style,定义是否使用斜体,font-weight,定义字体的粗细,font-size,定义字体的大小,background-color,定义背景颜色,background-image,定义背景图片,background-attacement,定义滚动,background-position,定义背景图片的初始位置,2,鼠标样式属性设置,在一些网页中，我们经常会遇到这样一种情况，当把鼠标移到不同区域，或者是在执行不同功能的时候，鼠标的形状都会发生变化。这种功能的实现其实非常简单，就是控制,CSS,中的,cursor,属性来实现的。,1.4.2,CSS,绝对定位,在,HTML,中布局一般情况下需要使用表格，如果要定位只有通过表格的嵌套来实现，这种方法的确可以在一定程度上解决问题，但是却不能随意定位页面元素，而且对某个元素位置的改变有可能影响到整个页面的布局。在,CSS,中提供了灵活的定位的方法，所以在页面布局中我们又多了一种可以选择的方案。,CSS,中常用的定位属性如表,1.4,所示。,属性,作用,属性,作用,absolute,绝对定位,width,定义宽,relative,相对定位,height,定义高,static,静态定位,overflow,定义内容超出的处理方法,left,定义横坐标,z-index,定义立体效果,top,定义纵坐标,visibility,定义可见性,1.4.3 CSS,实现表格变色,在一些,Web,应用中间经常会用表格来展示数据，当表格行数比较多的时候，就容易后看错行的情况发生，所以需要一种方法来解决这个问题。在这里我们采取这样一种措施，当鼠标移到某一行的时候，这行的背景颜色发生变化，这样当前行就会比较突出，不容易出错。,1.5,小结,本章主要讲解了与浏览器相关的技术，包括,HTTP,协议、,HTML,、,HTML,中用于提交数据的表单以及,CSS,技术的基础知识。重点是在理解,HTTP,的请求与响应的交互原理以及表单中各个元素的用法。难点在于,HTML,与,CSS,技术的熟练运用。在接下来的章节中，我们将开始,JSP,、,Servlet,等关键技术的讲解，这也是本书的重点。,