Web程序设计基础ppt课件

1、第第1章章 Web 程序设计根底程序设计根底内容简介：内容简介：本章主要引见本章主要引见Web程序设计必需的根底知识，其中包程序设计必需的根底知识，其中包括括Web的根本概念和任务方式及特点、的根本概念和任务方式及特点、Internet网网络协议、络协议、IP地址、与地址、与Web有关的协议和一致资源定位有关的协议和一致资源定位器器URL、超文本标志言语、超文本标志言语HTML、款式表、款式表CSS、可扩、可扩展标志言语展标志言语XML的根本语法和规那么，并给出一些简的根本语法和规那么，并给出一些简单的运用实例协助了解，为单的运用实例协助了解，为Web程序设计奠定根底程序设计奠定根底 。第第1

2、章章 Web 程序设计根底程序设计根底1.1 Web概述概述1.2 Internet 概述概述1.3 超文本标志言语超文本标志言语HTML1.4 款式表款式表CSS1.5 可扩展标志言语可扩展标志言语XML1.1 Web概述概述1.1.1 什么是什么是Web Web是一种信息系统，是基于是一种信息系统，是基于Internet的、全球衔接的、分布的、动态的、的、全球衔接的、分布的、动态的、多平台的交互式超文本信息系统。多平台的交互式超文本信息系统。 1.1.2 Web的任务方式的任务方式 Web效力器向阅读器提供效力的任务方式如下：效力器向阅读器提供效力的任务方式如下： 1 用户启动客户机即本机

3、的阅读器程序，并在阅读器中指定一个用户启动客户机即本机的阅读器程序，并在阅读器中指定一个URLUniform Resource Locator，一致资源定位器。，一致资源定位器。 2 Web效力器接到阅读器的恳求后，把效力器接到阅读器的恳求后，把URL转换成页面所在效力器上的文件转换成页面所在效力器上的文件路经名。路经名。 3 假设假设URL指向的是普通的指向的是普通的HTML文档，文档，Web效力器直接送给阅读器，阅读效力器直接送给阅读器，阅读器担任将器担任将HTML格式文档解释转换成用户能接受的文本格式。格式文档解释转换成用户能接受的文本格式。1.1.3 Web页面的特点页面的特点 可读性

4、强可读性强 、Web页面的导航可用性页面的导航可用性 、Web页面与系统平台无关页面与系统平台无关 、Web页面信息的分布特性页面信息的分布特性 、Web页面的动态交互性页面的动态交互性 、Web页面的新闻性页面的新闻性 。1.1.4 Web页面的功能页面的功能 1. 主页的功能。主页的功能。 网站主页用于组织和表现内容，它提供到站点主要部分的链接，以此来指援用户。网站主页用于组织和表现内容，它提供到站点主要部分的链接，以此来指援用户。 2. 超链接功能超链接功能 经过超链接功能，实现网页的设计对全球用户有吸引力，经过超链接功能，实现网页的设计对全球用户有吸引力，实现可访实现可访 问性和国际化

5、。问性和国际化。 3. 页面的交互性页面的交互性 交互是网站响运用户动作和选择的方式。交互是网页不可分割的组成部交互是网站响运用户动作和选择的方式。交互是网页不可分割的组成部分。分。1.2 Internet 概述 Internet是由各种不同类型和规模的、独立管理和运转的主机或计算机网络组成的一个全球性特大网络。大家在网上要共同遵守的网络协议是TCP/IP协议，凡是接入Internet的计算机都要安装和运转TCP/IP协议软件。 1.2.1 TCP/IP协议协议l TCP/IP (Transmission Control Protocol/ Internet Protocol)是传输控制协议/

6、网间协议。是一个工业规范的网络通讯协议集，它是于1969年由U.S Department of Defense Advanced Research Projects Agency所开发。l TCP/IP协议把整个网络分为四个层次自上而下分别是：运用层、传输层、网络层和物理链路层。 应用层应用层表示层会话层传输层传输层网络层网络层数据链路层物理链路层物理层TCP/IP参考模型与参考模型与OSI参考模型的对照参考模型的对照 1.2.2 HTTP协议协议超文本传输协议HTTPHyper Text Transfer Protocol是专门为Web设计的一种网络协议。 HTTP需求可靠的双向字节流传输效

7、力，所以是建立在TCP之上的运用层协议。HTTP是基于客户和效力器进展通讯的根本方式，即恳求回答方式。 HTTP协议不仅仅是限于Web效力，还支持如FTP协议和Telnet协议及名字效力等。Web阅读器和Web效力器之间的交互步骤如下： 客户与效力器建立TCP链接。 客户向效力器发出恳求。 效力器假设接受恳求，就向客户发回呼应信息，其中包括形状码和所要的文件普通是HTML文档。 客户与效力器封锁链接。1.2.3 Telnet协议协议Telnet是TCP/IP的一个运用层协议，即Internet远程登录效力协议，是Internet上强有力的功能。要实现此功能，用户计算机上必需安装和运转名为Tel

8、net的程序。运用该功能用户可以访问连在Internet上的任何一台Telnet效力器，用户主机成为该主机的终端而访问各种所需的信息。实时地运用远程计算机上对外开放的全部资源包括各种数据资源和软件资源及其硬件资源，以到达资源共享之目的。用户运用Telnet必需具备的前提条件是： 用户主机上装有包括Telnet运用层协议在内的TCP/IP协议族。 要知道IP地址、域名、登录名、登录标识和口令，即所谓的权限。 用户本人有帐号，完成拨号效力任务，使本人的调制解调器与远程主机建立通讯关系。为公众开放的Telnet远程效力器对用户是开放的，不需用户有本人的帐号也不需口令、用户名，照样可以登录。1.2.4

9、 FTP协议协议文件传输协议文件传输协议FTPFile Transfer Protocol是是TCP/IP网络体系构网络体系构造传输层的一种协议，用来提供计算机在造传输层的一种协议，用来提供计算机在Internet 上传输二进制文件上传输二进制文件程序和文档的效力。它是一种上传程序和文档的效力。它是一种上传/下载协议。经过下载协议。经过FTP效力，允效力，允许许Internet用户两地间的双向文件传输。实现真正意义上的全球资源用户两地间的双向文件传输。实现真正意义上的全球资源共享。共享。FTP与与Telnet的不同之处：前者可以实现两地间的信息拷贝在首先的不同之处：前者可以实现两地间的信息拷贝

10、在首先获得对方允许的情况下，而后者是只能在获得远程主机允许的情况获得对方允许的情况下，而后者是只能在获得远程主机允许的情况下如帐号、口令、用户名登录让用户主机以终端方式共享远程主下如帐号、口令、用户名登录让用户主机以终端方式共享远程主机上的资源，而不能将远程主机上的文件资源复制到用户主机再传入机上的资源，而不能将远程主机上的文件资源复制到用户主机再传入用户本人的用户本人的PC机上。机上。FTP是一种文件传输协议，表达的是效力。提供效力的机器称为是一种文件传输协议，表达的是效力。提供效力的机器称为FTP效效力器，又称力器，又称FTP网站。这类网站有两类：一类是访问该效力器时必需网站。这类网站有两

11、类：一类是访问该效力器时必需拥有远程计算机上的合法帐户和口令且拥有相应的访问权限。另一类拥有远程计算机上的合法帐户和口令且拥有相应的访问权限。另一类是匿名是匿名FTP，即这类，即这类FTP效力器允许没有帐户和口令的用户依然可以从效力器允许没有帐户和口令的用户依然可以从远程计算机上获取文件，其目的是向公众提供文件拷贝效力。在与远程计算机上获取文件，其目的是向公众提供文件拷贝效力。在与 “匿名匿名FTP效力器建立衔接时，只在效力器建立衔接时，只在“用户名栏填入用户名栏填入“anonymous，在密码栏填入用户的地址作为口令完成注册。，在密码栏填入用户的地址作为口令完成注册。“匿匿名名FTP为宽广为

12、宽广Internet用户提供免费程序、文件、数据、新软件的用户提供免费程序、文件、数据、新软件的下载，这类下载，这类FTP效力器有很大一部分。效力器有很大一部分。 1.2.5 IP协议协议Internet上的每一台计算机都有一个独一的地址，称为IP地址， 是识别网络中的主机及网络设备的独一标识。IP地址有一致的格式， 它是由协议IP规定的。一个IP地址由4个字节组成为32位二进制。各字节间用句号分隔，反映在十进制上就是3位数一组，共4组。每一个IP地址都由两部分组成：网络IDNetWork ID和主机IDHost ID。 Net Work ID网络标识符，每个网络区段都有一个网络标识。网络标识

13、代表一个网络。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一致资源定位器URLUniform Resource Locator是用来确定用户所需信息确实切位置。包括信息资源的称号及地址。URL用来指定Internet资源要阐明它位于哪台计算机的哪个目录中。URL经

14、过定义资源位置的抽像标识来定位网络资源，格式如下： 访问方法：/效力器域名：端口/目录/文件名访问方法阐明如何访问文档，即来用什么协议或说是信息效力类型，可以是：、FTP、GoPher、WAIS、NEWS、TELNET、MAILTO。冒号和“/后部分指示一个网络主机的域名或IP地址，即文件所在的效力器。端口部分是可选项，普通情况下可省略。但在一些情况下指定端口是为了让操作系统用来辩认特定信息效力的软件端口，默许的是用与访问关联的端口，如HTTP默许的TCP端口是80。/目录/文件名是指文档在效力器中的目录。目录可包含子目录，各级目录之间用“/分隔。 1.3 超文本标志言语超文本标志言语HTML

15、HTML是Hyper Text Markup Language (超文本标志言语)的缩写。HTML言语是一种简单、通用的标志言语，又称Web网页描画言语。用HTML言语编制的文档为HTML文档，其文档扩展名通常是.htm或.html。由Web阅读器来解释并显示在用户阅读器窗口中的页面是Web页面。 HTML的优点：每一个HTML文档占用空间小，易于传送。HTML文档是多平台兼容，只需有HTML阅读器就可在任何平台上阅读网页文件。HTML是标志性言语，易学易懂。HTML文档的建立只需有一个文本编辑软件即可完成书写。当然专门的HTML编辑器生成HTML文档会更便利，不需去记忆一些格式命令，用点击工

16、具或菜单即可。 初学HTML应留意：HTML文档的编辑工具：HTML文档是纯文本文件，可用任何一个纯文本编辑工具。文件名的命名规那么：要区分大小写；文件名中不能用空格和特殊字符。也尽量不要用汉字作文件称号部分。编写出的HTML文档不是所见即所得，胜利与否要经过阅读器查看效果。1.3.1 HTML的根本语法的根本语法(1)标志是HTML言语的标签符号和用标签标符号构成的各种元素的统称，用来界定各种单元，用一对 中间包含假设干字符命令表示，前一个“为起始标记，后一个“为终了标志，单元的称号和属性由起始标志给出。1.HTML标志最外层的标志 语法规那么： HTML/HTML 属 性：VERSION=

17、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

18、；指定已被鼠标点击访问过的可链接文字的颜色 阐明：#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用来控制标题文字的程度对齐方式，用来控制标题文字

19、的程度对齐方式，“|标识相互排斥的属性值。标识相互排斥的属性值。6.P标志标志(显示段落标志显示段落标志) 语法规那么为：语法规那么为：P/P 属性：属性：ALIGN=left|center|right 阐明：阐明：起始标志起始标志P必选，终了标志必选，终了标志/P可选。可选。假设需强迫换行，可用假设需强迫换行，可用BR标志强迫插入一个换行动作。标志强迫插入一个换行动作。Web阅读器会将文字中的多个空白字符如空格、制表符当作一个空阅读器会将文字中的多个空白字符如空格、制表符当作一个空格处置。假设需在文字间插入多个空格，可运用格处置。假设需在文字间插入多个空格，可运用SGML字符实体字符实体 “

20、 。各。各 之间用分号之间用分号“；间隔。；间隔。 1.3.1 HTML的根本语法的根本语法(3)7.BR标志标志(强迫换行标志强迫换行标志) 语法规那么：语法规那么：BR 属性：属性：CLEAR=left | all | right | none 阐明：阐明： HEAD TITLE /TITLE /HEAD BODY /BODY/HTML 1.3.3 编写简单编写简单HTML文件文件简单HTML文件的编写教程Web程序设计根底教程 第1章   Web程序设计根底本章主要引见Web程序设计必需的根底知识和相关概念。1.1  Web概述 1.1.1

21、什么是Web1.1.2 Web的任务方式1.1.3 Web页面的特点1.1.4 Web页面的功能1.2 Internet概述Internet,中国的权威机构把它译作“国际互联网络。1.2.1 TCP/IP协议TCP/IP是传输控制协议/网间协议，英文全称是Transmission Control Protocol/ Internet Protocol。1.4 款式表款式表CSSCSS是Cascading Style Sheet层叠款式表的英文缩写。 CSS的主要功能是经过对选择符进展设定，实现对网页中的字体、颜色、背景、图像以及其它各种元素的一致控制，以抑制诸多不同设计者的

22、网页作品在一个网站中得不到一致的困难。设计者可以只经过对一个CSS格式的文件进展编排或修正，就可以设定一个甚至多个网页页面的外观格式，提高了网页设计的效率，同时也抑制了HTML在表现方式上的局限性。CSS有两个不同层次的规范：CSS1和CSS2。CSS的功能特点表现了它技术上的优势，可从如下几点表达： 使得修正网页元素的格式变得容易，网页的更新变得轻松。 由于对网页特殊视觉效果的书写变得代码短少，减少网页中运用图片的数量，提高了下载速度，加强了显示效率。 CSS的强大定位技术，使网页规划简单化。 由于CSS是W3C制定的规范，具有良好的顺应性，从而得到广泛运用。1.4.1 款式表款式表CSS的

23、根本语法的根本语法一一 CSS最根本的语法为：最根本的语法为：SelectorProperty：值：值也可以用如下的方式表示：也可以用如下的方式表示：目的称号目的称号1，目的称号，目的称号2. 属性属性1：属性值；：属性值； 属性属性2：属性值；：属性值； 属性属性n：属性值；：属性值；二款式援用二款式援用1建立款式表建立款式表2 款式表的援用方式款式表的援用方式 1 链接到一个外部款式表链接到一个外部款式表2 嵌入款式表嵌入款式表3 内联款式表内联款式表1.4.2 款式表的承继和作用款式表的承继和作用 款式表的承继表示在前一个标志中进展了款式的定义，款式表的承继表示在前一个标志中进展了款式的

24、定义，这个被定义的款式可以在后继的标志中被援用。这个被定义的款式可以在后继的标志中被援用。款式表的承继款式表的承继 款式表的作用优先级款式表的作用优先级内联款式中所定义的款式优先级最高；内联款式中所定义的款式优先级最高；其他款式表按其在其他款式表按其在HTML文件中出现或被援用的选择顺序文件中出现或被援用的选择顺序越后出现，优先级越高；越后出现，优先级越高；选择符的作用优先级顺序是：上下文选择符、类选择符、选择符的作用优先级顺序是：上下文选择符、类选择符、id选择符。选择符。未有任何文件中定义的款式，遵照阅读器的默许款式。未有任何文件中定义的款式，遵照阅读器的默许款式。1.4.3 CSS的属性

25、的属性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-st

26、yle-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中的分类属性中的分类属性分类属性允许您

27、将元素分类成集类别。类名之前分类属性允许您将元素分类成集类别。类名之前要加句点要加句点 。1.4.4 运用运用CSS的一个实例的一个实例(1)1. 主文件主文件CSS综合运用例如综合运用例如link rel=stylesheet type=text/css href=例例1-9.css这是一个这是一个CSS款式文件的综合例如！款式文件的综合例如！在这一例题中，款式的援用采用在这一例题中，款式的援用采用LINK链接到一个链接到一个外部外部CSS款式表。款式表。在显示原样诗歌后，又可在蓝色文字处点击鼠标，在显示原样诗歌后，又可在蓝色文字处点击鼠标，超链接另一个超链接另一个HTML文档显示出一个表格

28、。文档显示出一个表格。 乡 愁 -余光中 小时候 乡愁是一枚小小的邮票 我在这头 母亲在那头 长大后 乡愁是一张窄窄的船票 我在这头 新娘在那头 后来啊.超链接到例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 运用运用C

29、SS的一个实例的一个实例(3)BODY bgcolor=#FFFFFF指定该网页背景图片和创建表格设定整个表格TABLE)指定表格的框线粗细BORDER) 、表行(TR)、存放表头的单元格TH)、存放数据的单元格TD)等。姓 名性别年龄籍贯文化程度毕业学校专 业联络陈勇刚男22山东大专济南师专美TD王 英女23青岛本科青岛大学国际贸易687886911.4.4 运用运用CSS实例实例结果结果1.5 可扩展标志言语可扩展标志言语XML XML英文全称为eXtensible Markup Language，意即“可扩展标志言语，是用于标志电子文档使其具有构造性的标志言语。

30、XML是SGMLStandard 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声明

31、区：声明区：声明区包含声明区包含XML声明和处置指令。声明和处置指令。XML声明用于声明声明用于声明XML文文档的版本信息、内码编码方式等通用信息。普通放在文档档的版本信息、内码编码方式等通用信息。普通放在文档的开头第一行位置。处置指令是的开头第一行位置。处置指令是XML文档中为运用预备的文档中为运用预备的指令，其作用是为解析器和其他运用程序提供信息。指令，其作用是为解析器和其他运用程序提供信息。 定义区定义区定义区用于完成文档类型定义定义区用于完成文档类型定义Document Type Declaration，DTD，即定义元素的构造和属性列表以及，即定义元素的构造和属性列表以及元素间的逻辑

32、关系，并以此为根据对文档进展有效性检查。元素间的逻辑关系，并以此为根据对文档进展有效性检查。“元素即标志称号。元素即标志称号。文件主体区文件主体区文档主体区包含标志和文档内容。标志是以树型分层构造文档主体区包含标志和文档内容。标志是以树型分层构造 陈列，描画出一个陈列，描画出一个XML文档的逻辑构造，文档的逻辑构造，它由成它由成 对的标志及包围在标志中的数据所组成。对的标志及包围在标志中的数据所组成。 1.5.2 创建创建XML文档的根本规那文档的根本规那么么文档必需有独一的根元素，一切其他元素必需嵌套入其中。每个元素的起始标志和终了标志必需匹配，元素间嵌套必需正确，不可出现交叉嵌套。标志称号

33、的大小写必需一致。元素必需正确嵌套不要出现不用要的空格。如和XML中可以运用注释，注释的内容放在注释标志之间，供阅读阐明。注释不能放在XML文档的第一行，也就是不能放在XML声明的前面。注释不能放在标志中。除了注释本身的标志外，注释中不能再运用“!和“-。 正确运用XML保管字符1.5.3 将格式正确的将格式正确的XML文档转换为有效文档文档转换为有效文档 一个有效的XML文档要满足两个要求： 文档的开头必需有一个正确的声明和一个文档类型定义DTD。 文档的主体必需符合DTD中定义的构造。XML文档要进展合法性检验，假设文档符合DTD中的约束，这个文档被以为合法，否那么为不合法。 文档类型定义的通用格式是： 元素类型声明通用格式是： 1.5.4 定义和运用实体定义和运用实体实体有两种类型：内部实体和外部实体。实体有两种类型：内部实体和外部实体。内部实体分为内部通用可析型和内部参数可析型。内部实体分为内部通用可析型和内部参数可析型。外部实体分为外部通用可析型和外部通用不可析型及外部可外部实体分为外部通用可析型和外部通用不可析型及外部可析型。析型。实体定义实体定义定义