2012年（27）
分类： IT业界
2012-09-11 17:39:56
（1）Web客户端工作原理
Web客户端，在本课程中，显然就是指浏览器（Browser）端。任何应用系统都必须有一个供用户操作的界面，即用户界面。浏览器的工作，从整个B/S程序来看，是用户与整个B/S程序打交道的一个界面（接口），即人机界面（接口）、用户界面，它的任务是：
Ÿ 收集用户输入的数据（如用户数据：）
Ÿ 将用户数据发送到服务器（向服务器请求该用户对服务器的请求）
Ÿ 接收服务器返回的响应（用浏览器能认识和执行的代码即客户端代码表示，如HTML代码，JavaScript代码等）
Ÿ 解释，执行这些代码，将结果显示在浏览器窗口中
可见，浏览器扮演的，是（多数情况下是远程的）服务器在用户那里的一个代理（Agent）的角色。这个代理，具有收集消息，请求响应和解释其领导（服务器）发回的指示的作用。
（2）Web客户端代码
无论是组织用于收集用户数据的界面，还是解释来自服务器的指示形成结果界面，都是用Web客户端代码表示的。常用的Web客户端代码使用HTML语言或JavaScript语言编写的，分别称为HTML代码或JavaScript代码。另外还有CSS、XML等语言。本课程仅介绍HTML语言或JavaScript语言。
工作原理（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源代码：
这里是网页的主体（显示在浏览器窗口中的部分）
说明：
①标记一般成对出现：<开始标记>，为了防止忘记写结束标记符，可采用成对书写，然后在中间插入的写法。
②放在HEAD标记内的信息一般不显示在浏览器的窗口中，通常这里面用来定义JavaScript函数，包含JavaScript代码文件，包含层叠样式表（CSS：Cascading Style Sheets）文件等一些预处理工作。
③BODY标记内通常放上需要表示或展示内容的标记格式。
④HTML中的注释：
第一种格式：。其中，注释内容中不可出现“>”，常用于说明标记里的内容；
第二种格式：。其中，注释内容中可包括“>”在内的任何符号，常用于注释大段的内容。
⑤HTML编辑软件：只要是文本编辑器或自带HTML编辑器的软件，就可以用来编写HTML文件，也可以使用HTML专用编辑器如Dreamweaver等来编辑HTML。可通过使用HTML专用编辑器快速生成一个HTML的基本结构；快速学习并掌握HTML语言。
⑥标记符中的字母，如中的HTML，大小写不敏感，建议统一大些或小写使用。
⑦文件的扩展名：若仅含有HTML代码，一般以.htm为扩展名；若仅含有JavaScript代码，这种文件常作为.htm文件的包含文件（引用文件，类似于C程序文件中的头文件）一般以.js为扩展名；若含HTML代码和JavaScript代码，一般以.htm为扩展名。
（３）HTML标记简介
１）基本标记（Basic Tags）
Ÿ 定义整个超文本文档（网页）对象，描述Web页面的起始与终止。
Ÿ 设置页面的头部分，用来包含当前文档的一些相关信息。如定义样式、网页的标题、网页中使用的脚本语言以及对搜索引擎有帮助的关键字。
Ÿ
Ÿ 放置Web页面的正文内容，包含文件内的文字、超链接文字的颜色、背景色彩、图片、动画、影像、音效等几乎所有对网页的展示功能。
Ÿ 用来介绍与文件内容相关的信息。每一个标记用于指明一个名称或数值对，常常放在头部标记中。
２）文本、字符格式（Text & Char Format）
Ÿ
Ÿ
换行标记
Ÿ 段落标记
Ÿ
水平线标记
Ÿ 字符串 设置字符串的字体、大小、颜色
颜色名：red,green,blue,yellow,black,white等。
颜色值：格式为#rrggbb，其中，r,g,b分别用十六进制数表示的红、绿、蓝三种颜色，如#FF0000表示红色，而#6CB0A6表示一种青色。
Ÿ 字符格式标记
粗体
斜体
加下划线
着重强调
定义上标
定义下标
３）超链接（Hyperlink）
标记表示一个超链接元素。超链接的属性主要有超链接地址、超链接文件打开的窗口位置，都在其开始标记中定义。
【例2-2】超链接标记
2-2.htm源代码：
其中，
href即超链接地址，其值为
target即窗口位置，对其值_blank而言，浏览器接收到服务器211.64.32.2发来的文件ndex.php，将在一个新浏览器的窗口中显示。
超链接一般简称链接。
４）表格（Table）
常用表格来精确定义页面文本或图片等的排版格式、排版布局，以使整齐美观。
定义一个表格
定义表格内的一行
５）表单（Form）
表单的概念同VB、VF、VC等程序设计语言，它是浏览器收集、发送用户所填数据的一种浏览器对象（控件），就像一部货车，一艘轮船，它本身不承载数据，而是通过包含表单对象（就像轮船上的集装箱）这些可以盛放数据的数据容器来承载数据，传送数据，从这个角度来看，它实际上是一个盛放数据容器的容器。
表单是B/S程序中人机交互界面的主要形式。从服务器的角度来看，或者说从服务器程序编写人员来看，表单及表单对象的名称（即其NAME属性名）被服务器看作变量来接收，称作表单变量；表单变量的值即用户在客户端表单对象中填写的数据。
表单的一般标记有：
Ÿ 表单本身：
属性ACTION的值起指明将表单中数据提交（发送的意思）的方向，即服务器上的某个处理程序。
属性METHOD指明提交数据的方法，常用POST和GET。
Ÿ 输入型表单对象
①文本字段，类似于VB、VF、VC里的文本框控件，基本标记形式如下：
②隐藏域，设计时可见，运行时不可见的文本字段，程序员常用它向FORM的ACTION指向的文件传送变量。
③文本区域，类似于VB、VF、VC里的文本框控件，基本标记形式如下：
④单选按钮，类似于VB、VF、VC里的单选按钮控件（有人也称之为无线按钮），作用是在同名的多个单选按钮中提供单项选择。
⑤复选框，作用是在同名的多个复选框中提供多项选择。
⑥列表/菜单域，概念等同于VB、VF、VC里的下拉列表框。
⑦提交表单型表单按钮，标记形式：
⑧重置型表单按钮，标记形式：
⑨定制型表单按钮，标记形式：
作用是执行用户指定的函数、过程。这里，用户通过指定该按钮的单击事件处理过程为：将当前页面跳转到教学网站主页。
【例2-3】FORM标签示例
2-3.htm源代码：
姓名：
简介：
性别：
男
女
爱好：
运动
音乐
旅游
今天要去哪里逛一逛：
向服务器请求2-3.htm的结果见图10。
图10 FORM标签示例
以上介绍了HTML的常用标记，美国麻省理工学院（MIT：Massachusetts Institute of Technology）计算机科学实验室的WWW标准化组织W3C（又称万维网联盟W3C），是HTML的先锋，其互联网地址为：。有关HTML、CSS、XML语言的各种最新的、权威的、官方的资料，在该网站均可查到。
传智播客，提供相关
