Web程序设计方案基础.ppt
第1章 Web 程序设计基础,内容简介：本章主要介绍Web程序设计必需的基础知识，其中包括Web的基本概念和工作方式及特点、Internet网络协议、IP地址、与Web有关的协议和统一资源定位器URL、超文本标记语言HTML、样式表CSS、可扩展标记语言XML的基本语法和规则，并给出一些简单的应用实例帮助理解，为Web程序设计奠定基础。,第1章 Web 程序设计基础,1.1 Web概述1.2 Internet 概述1.3 超文本标记语言HTML1.4 样式表CSS1.5 可扩展标记语言XML,1.1 Web概述,1.1.1 什么是Web Web是一种信息系统，是基于Internet的、全球连接的、分布的、动态的、多平台的交互式超文本信息系统。1.1.2 Web的工作方式 Web服务器向浏览器提供服务的工作方式如下：（1）用户启动客户机（即本机）的浏览器程序，并在浏览器中指定一个URL（Uniform Resource Locator，统一资源定位器）。（2）Web服务器接到浏览器的请求后，把URL转换成页面所在服务器上的文件路经名。（3）若URL指向的是普通的HTML文档，Web服务器直接送给浏览器，浏览器负责将HTML格式文档解释转换成用户能接受的文本格式。1.1.3 Web页面的特点 可读性强、Web页面的导航可用性、Web页面与系统平台无关、Web页面信息的分布特性、Web页面的动态交互性、Web页面的新闻性。1.1.4 Web页面的功能 1.主页的功能。网站主页用于组织和表现内容，它提供到站点主要部分的链接，以此来指引用户。2.超链接功能 通过超链接功能，实现网页的设计对全球用户有吸引力，实现可访 问性和国际化。3.页面的交互性 交互是网站响应用户动作和选择的方式。交互是网页不可分割的组成部分。,1.2 Internet 概述,Internet是由各种不同类型和规模的、独立管理和运行的主机或计算机网络组成的一个全球性特大网络。大家在网上要共同遵守的网络协议是TCP/IP协议，凡是接入Internet的计算机都要安装和运行TCP/IP协议软件。,1.2.1 TCP/IP协议,TCP/IP(Transmission Control Protocol/Internet Protocol)是传输控制协议/网间协议。是一个工业标准的网络通信协议集，它是于1969年由U.S Department of Defense Advanced Research Projects Agency所开发。TCP/IP协议把整个网络分为四个层次自上而下分别是：应用层、传输层、网络层和物理链路层。,TCP/IP参考模型与OSI参考模型的对照,1.2.2 HTTP协议,超文本传输协议HTTP（Hyper Text Transfer Protocol）是专门为Web设计的一种网络协议。HTTP需要可靠的双向字节流传输服务，所以是建立在TCP之上的应用层协议。HTTP是基于客户和服务器进行通信的基本模式，即请求回答模式。HTTP协议不仅仅是限于Web服务，还支持如FTP协议和Telnet协议及名字服务等。Web浏览器和Web服务器之间的交互步骤如下：客户与服务器建立TCP链接。客户向服务器发出请求。服务器如果接受请求，就向客户发回响应信息，其中包括状态码和所要的文件（一般是HTML文档。客户与服务器关闭链接。,1.2.3 Telnet协议,Telnet是TCP/IP的一个应用层协议，即Internet远程登录服务协议，是Internet上强有力的功能。要实现此功能，用户计算机上必需安装和运行名为Telnet的程序。使用该功能用户可以访问连在Internet上的任何一台Telnet服务器，用户主机成为该主机的终端而访问各种所需的信息。实时地使用远程计算机上对外开放的全部资源包括各种数据资源和软件资源及其硬件资源，以达到资源共享之目的。用户使用Telnet必须具备的前提条件是：用户主机上装有包括Telnet应用层协议在内的TCP/IP协议族。要知道IP地址、域名、登录名、登录标识和口令，即所谓的权限。用户自己有帐号，完成拨号服务工作，使自己的调制解调器与远程主机建立通信关系。为公众开放的Telnet远程服务器对用户是开放的，不需用户有自己的帐号也不需口令、用户名，照样可以登录。,1.2.4 FTP协议,文件传输协议FTP（File Transfer Protocol）是TCP/IP网络体系结构传输层的一种协议，用来提供计算机在Internet 上传输二进制文件（程序和文档）的服务。它是一种上传/下载协议。通过FTP服务，允许Internet用户两地间的双向文件传输。实现真正意义上的全球资源共享。FTP与Telnet的不同之处：前者可以实现两地间的信息拷贝（在首先取得对方允许的情况下），而后者是只能在取得远程主机允许的情况下（如帐号、口令、用户名登录）让用户主机以终端方式共享远程主机上的资源，而不能将远程主机上的文件资源复制到用户主机再传入用户自己的PC机上。FTP是一种文件传输协议，体现的是服务。提供服务的机器称为FTP服务器，又称FTP网站。这类网站有两类：一类是访问该服务器时必须拥有远程计算机上的合法帐户和口令且拥有相应的访问权限。另一类是匿名FTP，即这类FTP服务器允许没有帐户和口令的用户仍然可以从远程计算机上获取文件，其目的是向公众提供文件拷贝服务。在与“匿名”FTP服务器建立连接时，只在“用户名”栏填入“anonymous”，在密码栏填入用户的E-mail地址作为口令完成注册。“匿名”FTP为广大Internet用户提供免费程序、文件、数据、新软件的下载，这类FTP服务器有很大一部分。,1.2.5 IP协议,Internet上的每一台计算机都有一个惟一的地址，称为IP地址，是识别网络中的主机及网络设备的惟一标识。IP地址有统一的格式，它是由协议IP规定的。一个IP地址由4个字节组成为32位二进制。各字节间用句号分隔，反映在十进制上就是3位数一组，共4组。每一个IP地址都由两部分组成：网络ID（NetWork ID）和主机ID（Host ID）。Net Work ID网络标识符，每个网络区段都有一个网络标识。网络标识代表一个网络。Host ID 主机标识符，每个网络区段中每台计算机都被赋予一个主机标识符。IP协议规定了五类IP地址AE。其中A，B，C三类是基本的，它们由IP地址的高位来区分。A类IP地址共有27=128个，均分配给大型网络使用。B类IP地址共有2=16384个，适用于中等规模的网络。C类IP地址最多，有2 419万个，主要分配给小型网络使用。,1.2.6 统一资源定位器URL,统一资源定位器URL（Uniform Resource Locator）是用来确定用户所需信息的确切位置。包括信息资源的名称及地址。URL用来指定Internet资源要说明它位于哪台计算机的哪个目录中。URL通过定义资源位置的抽像标识来定位网络资源，格式如下：访问方法：/服务器域名：端口/目录/文件名访问方法说明如何访问文档，即来用什么协议或说是信息服务类型，可以是：HTTP、FTP、GoPher、WAIS、NEWS、TELNET、MAILTO。冒号和“/”后部分指示一个网络主机的域名或IP地址，即文件所在的服务器。端口部分是可选项，一般情况下可省略。但在一些情况下指定端口是为了让操作系统用来辩认特定信息服务的软件端口，默认的是用与访问关联的端口，如HTTP默认的TCP端口是80。/目录/文件名是指文档在服务器中的目录。目录可包含子目录，各级目录之间用“/”分隔。,1.3 超文本标记语言HTML,HTML是Hyper Text Markup Language(超文本标记语言)的缩写。HTML语言是一种简单、通用的标记语言，又称Web网页描述语言。用HTML语言编制的文档为HTML文档，其文档扩展名通常是.htm或.html。由Web浏览器来解释并显示在用户浏览器窗口中的页面是Web页面。HTML的优点：每一个HTML文档占用空间小，易于传送。HTML文档是多平台兼容，只需有HTML浏览器就可在任何平台上阅读网页文件。HTML是标记性语言，易学易懂。HTML文档的建立只要有一个文本编辑软件即可完成书写。当然专门的HTML编辑器生成HTML文档会更便捷，不需去记忆一些格式命令，用点击工具或菜单即可。初学HTML应注意：HTML文档的编辑工具：HTML文档是纯文本文件，可用任何一个纯文本编辑工具。文件名的命名规则：要区分大小写；文件名中不能用空格和特殊字符。也尽量不要用汉字作文件名称部分。编写出的HTML文档不是所见即所得，成功与否要通过浏览器查看效果。,1.3.1 HTML的基本语法(1),标记是HTML语言的标签符号和用标签标符号构成的各种元素的统称，用来界定各种单元，用一对 中间包含若干字符命令表示，前一个“”为起始标记，后一个“”为结束标记，单元的名称和属性由起始标记给出。1.HTML标记（最外层的标记）语法规则：HTML/HTML 属 性：VERSION=String 2.HEAD标记（用来标记HTML文档的页首）语法规则为：HEAD/HEAD 属 性：None(无)3.TITLE标记（设置网页标题）语法规则：TITLE/TITLE 属 性：None（无）4.BODY标记（标注HTML文档的正文）语法规则：BODY/BODY 属 性：BACKGROUND=URL；指定用于网页背景图片文件的地址 BGCOLOR=#RRGGBB；指定背景色彩 TEXT=#RRGGBB；指定非可链接文字的色彩 LINK=#RRGGBB；指定可链接文字的色彩 ALINK=#RRGGBB；指定正被鼠标点击的可链接文字的色彩 VLINK=#RRGGBB；指定已被鼠标点击（访问）过的可链接文字的色彩 说明：#RRGGBB是指色彩红绿蓝（redgreenblue，RGB）的值，用16进制数码表示：0，1，2，3，4，5，6，7，8，9，a，b，c，d，e，f,根据规范前面需加“#”。,1.3.1 HTML的基本语法(2),5.Hn标记(标注文档正文的各级标题)语法规则：Hn/Hn 属性：ALIGN=left|right|center|justify 说明：Hn标记中的n表示标题的级别，值范围16。ALIGN用来控制标题文字的水平对齐方式，“|”标识相互排斥的属性值。6.P标记(显示段落标记)语法规则为：P/P 属性：ALIGN=left|center|right 说明：起始标记P必选，结束标记/P可选。若需强制换行，可用BR标记强制插入一个换行动作。Web浏览器会将文字中的多个空白字符（如空格、制表符）当作一个空格处理。若需在文字间插入多个空格，可使用SGML字符实体“ ”。各 之间用分号“；”间隔。,1.3.1 HTML的基本语法(3),7.BR标记(强制换行标记)语法规则：BR 属性：CLEAR=left|all|right|none 说明：BR仅是换行，并不像P那样还要在随后的文本前插入一个空行。CLEAR是可选属性:Left：标记后的文本换行至浏览器窗口左边界不被图像占用的地方显示。Right：标记后的文本换行至浏览器窗口右边界不被图像占用的地方显示。All：标记后的文本在浏览器窗口的左右边界均不被图像占用的地方显示。None：缺省值，仅换行而已。8.PRE标记(预格式化文本标记)语法规则：PRE/PRE 属性：WIDTH=n 说明：PRE和/PRE之间是预先排好的文本内容。浏览器按等间距（或等宽）字体显示用户预先已排好的格式文本。该标记之间某些使用自动换行标记、改变字体大小标记和图像。WIDTH为可选项，n表示文本一行的字符数。,1.3.2 HTML文档的基本结构,一个HTML文档是由标记和文本内容组成。HTML HEAD TITLE/TITLE/HEAD BODY/BODY/HTML,1.3.3 编写简单HTML文件,简单HTML文件的编写教程Web程序设计基础教程 第1章TCP/IP协议TCP/IP是传输控制协议/网间协议，英文全称是Transmission Control Protocol/Internet Protocol。,1.4 样式表CSS,CSS是Cascading Style Sheet（层叠样式表）的英文缩写。CSS的主要功能是通过对选择符进行设定，实现对网页中的字体、颜色、背景、图像以及其它各种元素的统一控制，以克服诸多不同设计者的网页作品在一个网站中得不到统一的困难。设计者可以只通过对一个CSS格式的文件进行编排或修改，就可以设定一个甚至多个网页页面的外观格式，提高了网页设计的效率，同时也克服了HTML在表现形式上的局限性。CSS有两个不同层次的标准：CSS1和CSS2。CSS的功能特点表现了它技术上的优势，可从如下几点体现：（）使得修改网页元素的格式变得容易，网页的更新变得轻松。（）由于对网页特殊视觉效果的书写变得代码短少，减少网页中使用图片的数量，提高了下载速度，增强了显示效率。（）CSS的强大定位技术，使网页布局简单化。（）由于CSS是W3C制定的标准，具有良好的适应性，从而得到广泛使用。,1.4.1 样式表CSS的基本语法,一 CSS最基本的语法为：SelectorProperty：值也可以用如下的形式表示：目标名称1，目标名称2.属性1：属性值；属性2：属性值；属性n：属性值；二样式引用1建立样式表2 样式表的引用方式（1）链接到一个外部样式表（2）嵌入样式表（3）内联样式表,1.4.2 样式表的继承和作用,样式表的继承表示在前一个标记中进行了样式的定义，这个被定义的样式可以在后继的标记中被引用。样式表的继承 样式表的作用优先级内联样式中所定义的样式优先级最高；其他样式表按其在HTML文件中出现或被引用的选择顺序越后出现，优先级越高；选择符的作用优先级顺序是：上下文选择符、类选择符、id选择符。未有任何文件中定义的样式，遵循浏览器的默认样式。,1.4.3 CSS的属性（1）,1字体属性font-family、font-size、font-style、font-variant、font-weight 颜色和背景属性color、background-color、background-image、background-repeat、background-attachment、background-position、background4 文本属性letter-spacing、text-decoration、text-transform、text-align、vertical-align、text-indent、line-height 列表属性list-style-type、list-style-image、list-style-position,1.4.3 CSS的属性（2）,定位属性 3种定位属性分别是绝对(absolute)、相对(relative)和静态(static)。定位属性基于用上边和左边来指定的从起点开始的距离这一假设：Top、Left CSS中的边界属性border-color、border-style、border-width、Margin、Padding 8 CSS中的分类属性分类属性允许您将元素分类成集类别。类名之前要加句点。,1.4.4 应用CSS的一个实例(1),1.主文件CSS综合应用示例这是一个CSS样式文件的综合示例！在这一例题中，样式的引用采用LINK链接到一个外部CSS样式表。在显示原样诗歌后，又可在蓝色文字处点击鼠标，超链接另一个HTML文档显示出一个表格。,乡 愁-余光中 小时候 乡愁是一枚小小的邮票 我在这头 母亲在那头 长大后 乡愁是一张窄窄的船票 我在这头 新娘在那头 后来啊.超链接到例1-10.HTML文档显示一个表格,1.4.4 应用CSS的一个实例(2),2.CSS样式表例1-9.CSS内容如下：H3 font-family:隶书;color:#FFFFFFP color:Aqua;background-color:#FF0000;font-size:9pt;3.用链接的文件例1-10.HTML内容如下：指定背景图片,1.4.4 应用CSS的一个实例(3),指定该网页背景图片和创建表格设定整个表格（TABLE)指定表格的框线粗细（BORDER)、表行(TR)、存放表头的单元格（TH)、存放数据的单元格（TD)等。姓 名性别年龄籍贯文化程度毕业学校专 业联系电话,陈勇刚男22山东大专济南师专美术,王 英女23青岛本科青岛大学国际贸易,1.4.4 应用CSS实例结果,1.5 可扩展标记语言XML,XML英文全称为eXtensible Markup Language，意即“可扩展标记语言”，是用于标记电子文档使其具有结构性的标记语言。XML是SGML（Standard Generalized Markup Language，标准通用标记语言）的一个子集，是一个精简的SGML，它将SGML的丰富功能与HTML的简单易学易用性有机地结合到Web的应用中。XML文档可用中文描述Web页面信息元素标记。XML保留了SGML的可扩展功能，不再像HTML那样使用固定的标记，而是允许定义数量不限的标记来描述文档中的资料，允许嵌套的信息结构。HTML只是Web显示数据的通用方法，而XML提供了一个直接处理Web数据的通用方法。HTML着重描述Web页面的显示格式，而XML着重描述Web页面的内容。,1.5.1 XML文档的组成,1声明区：声明区包含XML声明和处理指令。XML声明用于声明XML文档的版本信息、内码编码方式等通用信息。一般放在文档的开头第一行位置。处理指令是XML文档中为应用准备的指令，其作用是为解析器和其他应用程序提供信息。定义区定义区用于完成文档类型定义（Document Type Declaration，DTD），即定义元素的结构和属性列表以及元素间的逻辑关系，并以此为根据对文档进行有效性检查。“元素”即标记名称。文件主体区文档主体区包含标记和文档内容。标记是以树型分层结构 排列，描述出一个XML文档的逻辑结构，它由成 对的标记及包围在标记中的数据所组成。,1.5.2 创建XML文档的基本规则,文档必须有唯一的根元素，所有其他元素必须嵌套入其中。每个元素的起始标记和结束标记必须匹配，元素间嵌套必须正确，不可出现交叉嵌套。标记名称的大小写必须一致。元素必须正确嵌套不要出现不必要的空格。如和XML中可以使用注释，注释的内容放在注释标记之间，供阅读说明。注释不能放在XML文档的第一行，也就是不能放在XML声明的前面。注释不能放在标记中。除了注释本身的标记外，注释中不能再使用“!”和“-”。正确使用XML保留字符,1.5.3 将格式正确的XML文档转换为有效文档,一个有效的XML文档要满足两个要求：文档的开头必须有一个正确的声明和一个文档类型定义DTD。文档的主体必须符合DTD中定义的结构。XML文档要进行合法性检验，若文档符合DTD中的约束，这个文档被认为合法，否则为不合法。文档类型定义的通用格式是：元素类型声明通用格式是：,1.5.4 定义和使用实体,实体有两种类型：内部实体和外部实体。内部实体分为内部通用可析型和内部参数可析型。外部实体分为外部通用可析型和外部通用不可析型及外部可析型。实体定义定义外部通用可析型实体的格式为：定义内部通用可析型实体的格式为：实体的引用通用实体的引用形式是：,1.5.5 XML文档的显示,可以直接在Internet Exploren 5.0浏览器中打开XML文档.XML文档的显示有三种方法：使用CSS样式表显示XML文档、使用数据绑定显示XML文档和使用XSL样式表显示XML文档。1.使用XSL样式表显示XML文档的基本步骤如下：（）创建XSL样式表文档。一个XSL样式表是一个遵守XSL规则的格式正确的XML文档。（）链接XSL样式表到XML文档。创建XSL样式表,本章小结,本章主要介绍了Web编程的基础知识，包括Web的基本概念和工作原理、Internet网络协议、IP地址、域名和统一资源定位器URL超文本标记语言HTML、层叠样式表CSS以及可扩展标记语言XML。Web是一种基于客户机/服务器、采用Internet的超文本信息系统，它涉及到Web的许多技术，包括服务器技术、HTML技术、ASP技术、Java技术、ActiveX技术等。Internet是由各种不同类型和规模的、独立管理和运行的主机或计算机网络组成的一个全球性网络。它使用的网络协议是TCP/IP协议。TCP/IP协议是一个协议集，其应用层主要有：超文本传输协议HTTP、远程登录协议Telnet以及文件传输协议FTP和统一资源定位器URL等。TCP/IP协议把整个网络分为四个层次：应用层、传输层、网络层和物理链路层。IP地址，是识别网络中的主机及网络设备的惟一标识。统一资源定位器URL是用来确定用户所需信息的确切位置，包括信息资源的名称及地址。HTTP协议是为分布超媒体信息系统设计的一个协议。Telnet是TCP/IP的一个应用层协议，即Internet远程登录服务协议，是Internet上强有力的功能。文件传输协议FTP是TCP/IP网络体系结构传输层的一种协议，是一种上传/下载协议。网页是用HTML或XML语言编制的文档文件。HTML是一种简单、通用的标记语言，可以用其制作包含图形、文字、声音等精彩内容的网页。样式表CSS可以看作是一个显示样本，用来配合HTML标记语言达到在Web浏览器中显示文本的效果。XML是用于标记电子文档使其具有结构性的标记语言，是一个精简的SGML，突破了HTML固定标记集合的约束，使文档内容丰富灵活与结构性自成一体。HTML着重描述了Web页面的显示格式，而XML着重描述Web页面的内容。XML文档由三部分组成：声明区、定义区和文档主体。,
