第一节 Web客户端工作原理
1.浏览器工作原理
(1)Web客户端工作原理
Web客户端,在本课程中,显然就是指浏览器(Browser)端。任何应用系统都必须有一个供用户操作的界面,即用户界面。浏览器的工作,从整个B/S程序来看,是用户与整个B/S程序打交道的一个界面(接口),即人机界面(接口)、用户界面,它的任务是:
Ÿ 收集用户输入的数据(如用户数据:http://211.64.32.2/dsks/index.php)
Ÿ 将用户数据发送到服务器(向服务器请求该用户对服务器的请求)
Ÿ 接收服务器返回的响应(用浏览器能认识和执行的代码即客户端代码表示,如HTML代码,JavaScript代码等)
Ÿ 解释,执行这些代码,将结果显示在浏览器窗口中
可见,浏览器扮演的,是(多数情况下是远程的)服务器在用户那里的一个代理(Agent)的角色。这个代理,具有收集消息,请求响应和解释其领导(服务器)发回的指示的作用。
(2)Web客户端代码
无论是组织用于收集用户数据的界面,还是解释来自服务器的指示形成结果界面,都是用Web客户端代码表示的。常用的Web客户端代码使用HTML语言或JavaScript语言编写的,分别称为HTML代码或JavaScript代码。另外还有CSS、XML等语言。本课程仅介绍HTML语言或JavaScript语言。
2.HTML工作原理
(1)HTML简介
HTML:Hyper Text Markup Language,超文本标记语言。
20世纪80年代末,在欧洲粒子物理实验室(CERN:the European Laboratory for Particle Physics)工作的Tim Berners-Lee(人称WWW之父)通过研究发现:人们的视觉处理是以页为基础的。于是他得出了一个结论:电子资料应以页的方式呈现。以此为出发点,他使用超文本为中心的管理方式来组织网络上的资料,并提出了建立、存取与浏览网页的方法;建立了超文本标记语言;设计了超文本传输协议(HTTP:Hypertext Transport Protocol),用于获取超链接文件;使用统一资源定位器(URL:Uniform Resource Locator)来定位网络文件、站点或服务器。
(2)HTML工作原理
(1)HTML本质
HTML不是程序语言,而是一种标记语言。所谓标记,在有的书上也叫标签,从面向对象的角度而言,就是对浏览器对象的标识的意思。它用来控制文字、图片等浏览器的子对象在浏览器中的表现,以及如何建立文件之间链接的标记,这些标记均放在文本格式的文件中。而程序与之最大的不同,就是可用来控制操作系统或应用程序执行并完成某项作业。超文本标记语言的文档应该尽量做到,从形式上看,无论在任何操作系统的任何浏览器上打开都具有相同的效果。
(2)HTML的基本结构
其基本结构分为三部分:
Ÿ 版本声明,即序(Prologue)
Ÿ 头部(Head)
Ÿ 主体(Body)
其中,主要部分是头部和主体。
【例2-1】Web文档基本HTML结构标记
2-1.htm源代码:
<!--
代码内容:Web文档基本HTML结构标记
作 者:孙寿龙
日 期:20050907
-->
<HTML>
<HEAD>
<TITLE>这里写网页的标题</TITLE>
</HEAD>
<BODY>
这里是网页的主体(显示在浏览器窗口中的部分)
</BODY>
</HTML>
说明:
①标记一般成对出现:<开始标记></结束标记>,为了防止忘记写结束标记符,可采用成对书写,然后在中间插入的写法。
②放在HEAD标记内的信息一般不显示在浏览器的窗口中,通常这里面用来定义JavaScript函数,包含JavaScript代码文件,包含层叠样式表(CSS:Cascading Style Sheets)文件等一些预处理工作。
③BODY标记内通常放上需要表示或展示内容的标记格式。
④HTML中的注释:
第一种格式:<!注释内容>。其中,注释内容中不可出现“>”,常用于说明标记里的内容;
第二种格式:<!--注释内容-->。其中,注释内容中可包括“>”在内的任何符号,常用于注释大段的内容。
⑤HTML编辑软件:只要是文本编辑器或自带HTML编辑器的软件,就可以用来编写HTML文件,也可以使用HTML专用编辑器如Dreamweaver等来编辑HTML。可通过使用HTML专用编辑器快速生成一个HTML的基本结构;快速学习并掌握HTML语言。
⑥标记符中的字母,如<HTML>中的HTML,大小写不敏感,建议统一大些或小写使用。
⑦文件的扩展名:若仅含有HTML代码,一般以.htm为扩展名;若仅含有JavaScript代码,这种文件常作为.htm文件的包含文件(引用文件,类似于C程序文件中的头文件)一般以.js为扩展名;若含HTML代码和JavaScript代码,一般以.htm为扩展名。
(3)HTML标记简介
1)基本标记(Basic Tags)
Ÿ <HTML></HTML> 定义整个超文本文档(网页)对象,描述Web页面的起始与终止。
Ÿ <HEAD></HEAD> 设置页面的头部分,用来包含当前文档的一些相关信息。如定义样式、网页的标题、网页中使用的脚本语言以及对搜索引擎有帮助的关键字。
Ÿ <TITLE></TITLE> 用来指明文件的标题,其内容将显示在浏览器的标题栏内,设置它的好处:可为下载时提供默认的文件名;可为搜索引擎提供搜索关键字。
Ÿ <BODY></BODY> 放置Web页面的正文内容,包含文件内的文字、超链接文字的颜色、背景色彩、图片、动画、影像、音效等几乎所有对网页的展示功能。
Ÿ <META> 用来介绍与文件内容相关的信息。每一个<META>标记用于指明一个名称或数值对,常常放在头部标记中。
2)文本、字符格式(Text & Char Format)
Ÿ <Hn></Hn> 标题文字(n=1~6)
Ÿ <BR> 换行标记
Ÿ <P></P> 段落标记
Ÿ <HR> 水平线标记
Ÿ <FONT FACE=”字体名称” SIZE=”大小” COLOR=”颜色名或颜色值”>字符串</FONT> 设置字符串的字体、大小、颜色
颜色名:red,green,blue,yellow,black,white等。
颜色值:格式为#rrggbb,其中,r,g,b分别用十六进制数表示的红、绿、蓝三种颜色,如#FF0000表示红色,而#6CB0A6表示一种青色。
Ÿ 字符格式标记
<B></B> 粗体
<I></I> 斜体
<U></U> 加下划线
<STRONG></STRONG> 着重强调
<SUP></SUP> 定义上标
<SUB></SUB> 定义下标
3)超链接(Hyperlink)
标记<A href=”URL” … ></A>表示一个超链接元素。超链接的属性主要有超链接地址、超链接文件打开的窗口位置,都在其开始标记中定义。
【例2-2】超链接标记
2-2.htm源代码:
<A href="http://nc.dzu.edu.cn/article/show.php?id=139" target="_blank" >ASP,PHP,JSP之比较</A>
其中,
href即超链接地址,其值为http://211.64.32.2/dsks/index.php
target即窗口位置,对其值_blank而言,浏览器接收到服务器211.64.32.2发来的文件ndex.php,将在一个新浏览器的窗口中显示。
超链接一般简称链接。
4)表格(Table)
常用表格来精确定义页面文本或图片等的排版格式、排版布局,以使整齐美观。
<TABLE></TABLE> 定义一个表格
<TR></TR> 定义表格内的一行
<TD></TD> 定义一行内的一个单元格
5)表单(Form)
表单的概念同VB、VF、VC等程序设计语言,它是浏览器收集、发送用户所填数据的一种浏览器对象(控件),就像一部货车,一艘轮船,它本身不承载数据,而是通过包含表单对象(就像轮船上的集装箱)这些可以盛放数据的数据容器来承载数据,传送数据,从这个角度来看,它实际上是一个盛放数据容器的容器。
表单是B/S程序中人机交互界面的主要形式。从服务器的角度来看,或者说从服务器程序编写人员来看,表单及表单对象的名称(即其NAME属性名)被服务器看作变量来接收,称作表单变量;表单变量的值即用户在客户端表单对象中填写的数据。
表单的一般标记有:
Ÿ 表单本身:<FORM NAME=”form1” ACTION=”chuli.php” METHOD=”POST” ></FORM> 定义表单,其中:
属性ACTION的值起指明将表单中数据提交(发送的意思)的方向,即服务器上的某个处理程序。
属性METHOD指明提交数据的方法,常用POST和GET。
Ÿ <INPUT> 输入型表单对象
①文本字段,类似于VB、VF、VC里的文本框控件,基本标记形式如下:
<input name="textfield" type="text" value="这里是文本字段的值">
②隐藏域,设计时可见,运行时不可见的文本字段,程序员常用它向FORM的ACTION指向的文件传送变量。
<input type="hidden" name="hiddenField">
③文本区域,类似于VB、VF、VC里的文本框控件,基本标记形式如下:
<textarea name="textarea" cols="25" rows="5">这里是文本区域的值</textarea>
④单选按钮,类似于VB、VF、VC里的单选按钮控件(有人也称之为无线按钮),作用是在同名的多个单选按钮中提供单项选择。
⑤复选框,作用是在同名的多个复选框中提供多项选择。
⑥列表/菜单域,概念等同于VB、VF、VC里的下拉列表框。<SELECT></SELECT>
⑦提交表单型表单按钮,标记形式:
<INPUT TYPE=”submit” VALUE=”提交”> 作用是将表单中的数据提交到表单属性ACTION的值所指向的服务器端程序,由服务器端程序处理
⑧重置型表单按钮,标记形式:
<INPUT TYPE=”reset” VALUE=”重新填写”> 作用是清空表单中每个输入域中的数据,等待用户重新输入。
⑨定制型表单按钮,标记形式:
<INPUT TYPE=”button” VALUE=”转到教学网站” ONCLICK=”window.location=’ http://211.64.32.2/dsks’ ”> 作用是执行用户指定的函数、过程。这里,用户通过指定该按钮的单击事件处理过程为:将当前页面跳转到教学网站主页。
【例2-3】FORM标签示例
2-3.htm源代码:
<form name="form1" method="post" action="2-3.php">
姓名:<input name="xm" type="text"><br>
简介:<textarea name="jj" cols="25" rows="5"></textarea><br>
性别:
<input type="radio" name="xb" value="1">男
<input type="radio" name="xb" value="0">女
<br>
爱好:
<input type="checkbox" name="ah" value="1">运动
<input type="checkbox" name="ah" value="2">音乐
<input type="checkbox" name="ah" value="3">旅游<br>
今天要去哪里逛一逛:
<select name="where">
<option value="你未选择任何地方!" selected>请选择</option>
<option value="http://211.64.32.2/dsks">孙寿龙教学网站</option>
<option value="http://www.dzu.edu.cn">德州学院网站</option>
<option value="http://www.163.com">网易</option>
</select>
<br>
<input type="hidden" name="hiddenField">
<br>
<input type="submit" name="Submit" value="提交">
<input type="reset" name="Submit2" value="重置">
<input type="button" name="Submit3" value="定制">
</form>
向服务器请求2-3.htm的结果见图10。
图10 FORM标签示例
以上介绍了HTML的常用标记,美国麻省理工学院(MIT:Massachusetts Institute of Technology)计算机科学实验室的WWW标准化组织W3C(又称万维网联盟W3C),是HTML的先锋,其互联网地址为:http://www.w3.org。有关HTML、CSS、XML语言的各种最新的、权威的、官方的资料,在该网站均可查到。
传智播客[url=http://php.itcast.cn]php培训[/url],提供相关[url=http://php.itcast.cn/php/video.shtml]php教程[/url]
1.浏览器工作原理
(1)Web客户端工作原理
Web客户端,在本课程中,显然就是指浏览器(Browser)端。任何应用系统都必须有一个供用户操作的界面,即用户界面。浏览器的工作,从整个B/S程序来看,是用户与整个B/S程序打交道的一个界面(接口),即人机界面(接口)、用户界面,它的任务是:
Ÿ 收集用户输入的数据(如用户数据:http://211.64.32.2/dsks/index.php)
Ÿ 将用户数据发送到服务器(向服务器请求该用户对服务器的请求)
Ÿ 接收服务器返回的响应(用浏览器能认识和执行的代码即客户端代码表示,如HTML代码,JavaScript代码等)
Ÿ 解释,执行这些代码,将结果显示在浏览器窗口中
可见,浏览器扮演的,是(多数情况下是远程的)服务器在用户那里的一个代理(Agent)的角色。这个代理,具有收集消息,请求响应和解释其领导(服务器)发回的指示的作用。
(2)Web客户端代码
无论是组织用于收集用户数据的界面,还是解释来自服务器的指示形成结果界面,都是用Web客户端代码表示的。常用的Web客户端代码使用HTML语言或JavaScript语言编写的,分别称为HTML代码或JavaScript代码。另外还有CSS、XML等语言。本课程仅介绍HTML语言或JavaScript语言。
2.HTML工作原理
(1)HTML简介
HTML:Hyper Text Markup Language,超文本标记语言。
20世纪80年代末,在欧洲粒子物理实验室(CERN:the European Laboratory for Particle Physics)工作的Tim Berners-Lee(人称WWW之父)通过研究发现:人们的视觉处理是以页为基础的。于是他得出了一个结论:电子资料应以页的方式呈现。以此为出发点,他使用超文本为中心的管理方式来组织网络上的资料,并提出了建立、存取与浏览网页的方法;建立了超文本标记语言;设计了超文本传输协议(HTTP:Hypertext Transport Protocol),用于获取超链接文件;使用统一资源定位器(URL:Uniform Resource Locator)来定位网络文件、站点或服务器。
(2)HTML工作原理
(1)HTML本质
HTML不是程序语言,而是一种标记语言。所谓标记,在有的书上也叫标签,从面向对象的角度而言,就是对浏览器对象的标识的意思。它用来控制文字、图片等浏览器的子对象在浏览器中的表现,以及如何建立文件之间链接的标记,这些标记均放在文本格式的文件中。而程序与之最大的不同,就是可用来控制操作系统或应用程序执行并完成某项作业。超文本标记语言的文档应该尽量做到,从形式上看,无论在任何操作系统的任何浏览器上打开都具有相同的效果。
(2)HTML的基本结构
其基本结构分为三部分:
Ÿ 版本声明,即序(Prologue)
Ÿ 头部(Head)
Ÿ 主体(Body)
其中,主要部分是头部和主体。
【例2-1】Web文档基本HTML结构标记
2-1.htm源代码:
<!--
代码内容:Web文档基本HTML结构标记
作 者:孙寿龙
日 期:20050907
-->
<HTML>
<HEAD>
<TITLE>这里写网页的标题</TITLE>
</HEAD>
<BODY>
这里是网页的主体(显示在浏览器窗口中的部分)
</BODY>
</HTML>
说明:
①标记一般成对出现:<开始标记></结束标记>,为了防止忘记写结束标记符,可采用成对书写,然后在中间插入的写法。
②放在HEAD标记内的信息一般不显示在浏览器的窗口中,通常这里面用来定义JavaScript函数,包含JavaScript代码文件,包含层叠样式表(CSS:Cascading Style Sheets)文件等一些预处理工作。
③BODY标记内通常放上需要表示或展示内容的标记格式。
④HTML中的注释:
第一种格式:<!注释内容>。其中,注释内容中不可出现“>”,常用于说明标记里的内容;
第二种格式:<!--注释内容-->。其中,注释内容中可包括“>”在内的任何符号,常用于注释大段的内容。
⑤HTML编辑软件:只要是文本编辑器或自带HTML编辑器的软件,就可以用来编写HTML文件,也可以使用HTML专用编辑器如Dreamweaver等来编辑HTML。可通过使用HTML专用编辑器快速生成一个HTML的基本结构;快速学习并掌握HTML语言。
⑥标记符中的字母,如<HTML>中的HTML,大小写不敏感,建议统一大些或小写使用。
⑦文件的扩展名:若仅含有HTML代码,一般以.htm为扩展名;若仅含有JavaScript代码,这种文件常作为.htm文件的包含文件(引用文件,类似于C程序文件中的头文件)一般以.js为扩展名;若含HTML代码和JavaScript代码,一般以.htm为扩展名。
(3)HTML标记简介
1)基本标记(Basic Tags)
Ÿ <HTML></HTML> 定义整个超文本文档(网页)对象,描述Web页面的起始与终止。
Ÿ <HEAD></HEAD> 设置页面的头部分,用来包含当前文档的一些相关信息。如定义样式、网页的标题、网页中使用的脚本语言以及对搜索引擎有帮助的关键字。
Ÿ <TITLE></TITLE> 用来指明文件的标题,其内容将显示在浏览器的标题栏内,设置它的好处:可为下载时提供默认的文件名;可为搜索引擎提供搜索关键字。
Ÿ <BODY></BODY> 放置Web页面的正文内容,包含文件内的文字、超链接文字的颜色、背景色彩、图片、动画、影像、音效等几乎所有对网页的展示功能。
Ÿ <META> 用来介绍与文件内容相关的信息。每一个<META>标记用于指明一个名称或数值对,常常放在头部标记中。
2)文本、字符格式(Text & Char Format)
Ÿ <Hn></Hn> 标题文字(n=1~6)
Ÿ <BR> 换行标记
Ÿ <P></P> 段落标记
Ÿ <HR> 水平线标记
Ÿ <FONT FACE=”字体名称” SIZE=”大小” COLOR=”颜色名或颜色值”>字符串</FONT> 设置字符串的字体、大小、颜色
颜色名:red,green,blue,yellow,black,white等。
颜色值:格式为#rrggbb,其中,r,g,b分别用十六进制数表示的红、绿、蓝三种颜色,如#FF0000表示红色,而#6CB0A6表示一种青色。
Ÿ 字符格式标记
<B></B> 粗体
<I></I> 斜体
<U></U> 加下划线
<STRONG></STRONG> 着重强调
<SUP></SUP> 定义上标
<SUB></SUB> 定义下标
3)超链接(Hyperlink)
标记<A href=”URL” … ></A>表示一个超链接元素。超链接的属性主要有超链接地址、超链接文件打开的窗口位置,都在其开始标记中定义。
【例2-2】超链接标记
2-2.htm源代码:
<A href="http://nc.dzu.edu.cn/article/show.php?id=139" target="_blank" >ASP,PHP,JSP之比较</A>
其中,
href即超链接地址,其值为http://211.64.32.2/dsks/index.php
target即窗口位置,对其值_blank而言,浏览器接收到服务器211.64.32.2发来的文件ndex.php,将在一个新浏览器的窗口中显示。
超链接一般简称链接。
4)表格(Table)
常用表格来精确定义页面文本或图片等的排版格式、排版布局,以使整齐美观。
<TABLE></TABLE> 定义一个表格
<TR></TR> 定义表格内的一行
<TD></TD> 定义一行内的一个单元格
5)表单(Form)
表单的概念同VB、VF、VC等程序设计语言,它是浏览器收集、发送用户所填数据的一种浏览器对象(控件),就像一部货车,一艘轮船,它本身不承载数据,而是通过包含表单对象(就像轮船上的集装箱)这些可以盛放数据的数据容器来承载数据,传送数据,从这个角度来看,它实际上是一个盛放数据容器的容器。
表单是B/S程序中人机交互界面的主要形式。从服务器的角度来看,或者说从服务器程序编写人员来看,表单及表单对象的名称(即其NAME属性名)被服务器看作变量来接收,称作表单变量;表单变量的值即用户在客户端表单对象中填写的数据。
表单的一般标记有:
Ÿ 表单本身:<FORM NAME=”form1” ACTION=”chuli.php” METHOD=”POST” ></FORM> 定义表单,其中:
属性ACTION的值起指明将表单中数据提交(发送的意思)的方向,即服务器上的某个处理程序。
属性METHOD指明提交数据的方法,常用POST和GET。
Ÿ <INPUT> 输入型表单对象
①文本字段,类似于VB、VF、VC里的文本框控件,基本标记形式如下:
<input name="textfield" type="text" value="这里是文本字段的值">
②隐藏域,设计时可见,运行时不可见的文本字段,程序员常用它向FORM的ACTION指向的文件传送变量。
<input type="hidden" name="hiddenField">
③文本区域,类似于VB、VF、VC里的文本框控件,基本标记形式如下:
<textarea name="textarea" cols="25" rows="5">这里是文本区域的值</textarea>
④单选按钮,类似于VB、VF、VC里的单选按钮控件(有人也称之为无线按钮),作用是在同名的多个单选按钮中提供单项选择。
⑤复选框,作用是在同名的多个复选框中提供多项选择。
⑥列表/菜单域,概念等同于VB、VF、VC里的下拉列表框。<SELECT></SELECT>
⑦提交表单型表单按钮,标记形式:
<INPUT TYPE=”submit” VALUE=”提交”> 作用是将表单中的数据提交到表单属性ACTION的值所指向的服务器端程序,由服务器端程序处理
⑧重置型表单按钮,标记形式:
<INPUT TYPE=”reset” VALUE=”重新填写”> 作用是清空表单中每个输入域中的数据,等待用户重新输入。
⑨定制型表单按钮,标记形式:
<INPUT TYPE=”button” VALUE=”转到教学网站” ONCLICK=”window.location=’ http://211.64.32.2/dsks’ ”> 作用是执行用户指定的函数、过程。这里,用户通过指定该按钮的单击事件处理过程为:将当前页面跳转到教学网站主页。
【例2-3】FORM标签示例
2-3.htm源代码:
<form name="form1" method="post" action="2-3.php">
姓名:<input name="xm" type="text"><br>
简介:<textarea name="jj" cols="25" rows="5"></textarea><br>
性别:
<input type="radio" name="xb" value="1">男
<input type="radio" name="xb" value="0">女
<br>
爱好:
<input type="checkbox" name="ah" value="1">运动
<input type="checkbox" name="ah" value="2">音乐
<input type="checkbox" name="ah" value="3">旅游<br>
今天要去哪里逛一逛:
<select name="where">
<option value="你未选择任何地方!" selected>请选择</option>
<option value="http://211.64.32.2/dsks">孙寿龙教学网站</option>
<option value="http://www.dzu.edu.cn">德州学院网站</option>
<option value="http://www.163.com">网易</option>
</select>
<br>
<input type="hidden" name="hiddenField">
<br>
<input type="submit" name="Submit" value="提交">
<input type="reset" name="Submit2" value="重置">
<input type="button" name="Submit3" value="定制">
</form>
向服务器请求2-3.htm的结果见图10。
图10 FORM标签示例
以上介绍了HTML的常用标记,美国麻省理工学院(MIT:Massachusetts Institute of Technology)计算机科学实验室的WWW标准化组织W3C(又称万维网联盟W3C),是HTML的先锋,其互联网地址为:http://www.w3.org。有关HTML、CSS、XML语言的各种最新的、权威的、官方的资料,在该网站均可查到。
传智播客[url=http://php.itcast.cn]php培训[/url],提供相关[url=http://php.itcast.cn/php/video.shtml]php教程[/url]