第1章 Web 程序设计基础 内容简介: 本章主要介绍Web程序设计必需的基础知识,其中包 括Web的基本概念和工作方式及特点、Internet网 络协议、IP地址、与Web有关的协议和统一资源定位 器URL、超文本标记语言HTML、样式表CSS、可扩 展标记语言XML的基本语法和规则,并给出一些简单 的应用实例帮助理解,为Web程序设计奠定基础 。 第1章 1.1 1.2 1.3 1.4 1.5 Web 程序设计基础 Web概述 Internet 概述 超文本标记语言HTML 样式表CSS 可扩展标记语言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参考模型与OSI参考模型的对照 TCP/IP (Transmission Control Protocol/ Internet Protocol)是传输控制协议/网 间协议。是一个工业标准的 网络通信协议集,它是于 1969年由U.S Department of Defense Advanced Research Projects Agency 所开发。 TCP/IP协议把整个网络分为 四个层次自上而下分别是: 应用层、传输层、网络层和 物理链路层。 应用层 表示层 应用层 会话层 传输层 传输层 网络层 网络层 数据链路层 物理层 物理链路层 1.2.2 HTTP协议 • 超文本传输协议HTTP(Hyper Text Transfer Protocol)是专门为 Web设计的一种网络协议。 • HTTP需要可靠的双向字节流传输服务,所以是建立在TCP之上的应用 层协议。 • HTTP是基于客户和服务器进行通信的基本模式,即请求回答模式。 • HTTP协议不仅仅是限于Web服务,还支持如FTP协议和Telnet协议 及名字服务等。 • Web浏览器和Web服务器之间的交互步骤如下: 1. 客户与服务器建立TCP链接。 2. 客户向服务器发出请求。 3. 服务器如果接受请求,就向客户发回响应信息,其中包括状态 码和所要的文件(一般是HTML文档。 4. 客户与服务器关闭链接。 1.2.3 Telnet协议 • Telnet是TCP/IP的一个应用层协议,即Internet远程登录服务协议, 是Internet上强有力的功能。要实现此功能,用户计算机上必需安 装和运行名为Telnet的程序。使用该功能用户可以访问连在 Internet上的任何一台Telnet服务器,用户主机成为该主机的终端 而访问各种所需的信息。实时地使用远程计算机上对外开放的全部 资源包括各种数据资源和软件资源及其硬件资源,以达到资源共享 之目的。 • 用户使用Telnet必须具备的前提条件是: 1. 用户主机上装有包括Telnet应用层协议在内的TCP/IP协议族。 2. 要知道IP地址、域名、登录名、登录标识和口令,即所谓的权 限。 3. 用户自己有帐号,完成拨号服务工作,使自己的调制解调器与 远程主机建立通信关系。 • 为公众开放的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地址A—E。其中A,B,C三类是基本的,它们由IP 地址的高位来区分。 – A类IP地址共有27=128个,均分配给大型网络使用。 – B类IP地址共有214=16384个,适用于中等规模的网络。 – C类IP地址最多,有222 ≈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是指色彩红—绿—蓝(red—green—blue,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表示标题的级别,值范围1—6。 – 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 VERSION="-//W3C/DTD.HTML4.0 Final//EN"> <HEAD> <TITLE>简单HTML文件的编写教程</TITLE> </HEAD> <BODY bgcolor="#00FFFF" TEXT="#FF0000" > <H1 ALIGN=left>Web程序设计基础教程 </H1> <H2 ALIGN=left>第1章 Web程序设计基础</H2> <P>本章主要介绍Web程序设计必需的基础知识和相关概念。</P> <H3>1.1 Web概述</H3> <PRE> 1.1.1 什么是Web 1.1.2 Web的工作方式 1.1.3 Web页面的特点 1.1.4 Web页面的功能 </PRE> <H3>1.2 Internet概述</H3> Internet,中国的权威机构把它译作“国际互联网络”。<BR> <H4>1.2.1 TCP/IP协议</H4> TCP/IP是传输控制协议/网间协议,英文全称是<BR> Transmission Control Protocol/ Internet Protocol。 </BODY> </HTML> 1.4 样式表CSS • CSS是Cascading Style Sheet(层叠样式表)的英文缩写。 CSS的 主要功能是通过对选择符进行设定,实现对网页中的字体、颜色、背 景、图像以及其它各种元素的统一控制,以克服诸多不同设计者的网 页作品在一个网站中得不到统一的困难。设计者可以只通过对一个 CSS格式的文件进行编排或修改,就可以设定一个甚至多个网页页面 的外观格式,提高了网页设计的效率,同时也克服了HTML在表现形 式上的局限性。 • CSS有两个不同层次的标准:CSS1和CSS2。 • CSS的功能特点表现了它技术上的优势,可从如下几点体现: (1) 使得修改网页元素的格式变得容易,网页的更新变得轻松。 (2) 由于对网页特殊视觉效果的书写变得代码短少,减少网页中使用 图片的数量,提高了下载速度,增强了显示效率。 (3) CSS的强大定位技术,使网页布局简单化。 (4) 由于CSS是W3C制定的标准,具有良好的适应性,从而得到广泛 使用。 1.4.1 样式表CSS的基本语法 一. CSS最基本的语法为: • Selector{Property:值} 也可以用如下的形式表示: 目标名称1,目标名称2......{ 属性1:属性值; 属性2:属性值; …… 属性n:属性值;} 二.样式引用 1.建立样式表 2. 样式表的引用方式 (1) 链接到一个外部样式表 (2) 嵌入样式表 (3) 内联样式表 1.4.2 样式表的继承和作用 样式表的继承表示在前一个标记中进行了样式的定义, 这个被定义的样式可以在后继的标记中被引用。 1.样式表的继承 2. 样式表的作用优先级 • 内联样式中所定义的样式优先级最高; • 其他样式表按其在HTML文件中出现或被引用的选择顺 序越后出现,优先级越高; • 选择符的作用优先级顺序是:上下文选择符、类选择符、 id选择符。 • 未有任何文件中定义的样式,遵循浏览器的默认样式。 1.4.3 CSS的属性(1) 1.字体属性 font-family、font-size、font-style、font-variant、fontweight 2. 颜色和背景属性 color、background-color、 background-image、backgroundrepeat、background-attachment、background-position、 background 4. 文本属性 letter-spacing、text-decoration、text-transform、textalign、vertical-align、 text-indent、line-height 5. 列表属性 list-style-type 、list-style-image 、list-style-position 1.4.3 CSS的属性(2) 6.定位属性 3种定位属性分别是绝对(absolute )、相对 (relative)和静态(static )。定位属性基于用 上边和左边来指定的从起点开始的距离这一 假设: Top、Left 7. CSS中的边界属性 border-color、border-style、border-width 、 Margin、Padding 8. CSS中的分类属性 分类属性允许您将元素分类成集类别。类名之前 要加句点 。 1.4.4 应用CSS的一个实例(1) 1. 主文件 <HTML> <HEAD><title>CSS综合应用示例</title> <meta http-equiv="Content-Type" content="text/html;charset=gb2312"> <link rel=stylesheet type="text/css" href="例19.css"〉 </head> <BODY> <STYLE type="text/css"> <!-{background-image: url(J169.JPG)} --> </STYLE> <H3>这是一个CSS样式文件的综合示例!</H3> <P>在这一例题中,样式的引用采用LINK链接到一个外 部CSS样式表。<br> 在显示原样诗歌后,又可在蓝色文字处点击鼠标,<br> 超链接另一个HTML文档显示出一个表格。</P> <PRE> 乡 愁 —--余光中 小时候 乡愁是一枚小小的邮票 我在这头 母亲在那头 长大后 乡愁是一张窄窄的船票 我在这头 新娘在那头 后来啊 . . . </PRE> <a href="例1-10.html">超链接到例110.HTML文档显示一个表格</a><br><br> </BODY> </HTML> 1.4.4 应用CSS的一个实例(2) 2. CSS样式表 例1-9.CSS 内容如下: H3 {font-family:"隶书";color:"#FFFFFF"} P {color:Aqua;background-color:"#FF0000";font-size:9pt;} 3. 用<A href=“要链接网页(或文件)的URL”>链接的文件 例110.HTML 内容如下: <HTML> <HEAD> <TITLE>指定背景图片</TITLE> <STYLE type="text/css"> <!-BODY {background-image: url(image1.jpg)} P {font-family:"隶书";font-size:12pt} --> </STYLE> </HEAD> 1.4.4 应用CSS的一个实例(3) <BODY bgcolor="#FFFFFF" <H2>指定该网页背景图片和创建表格</H2> <P>设定整个表格(TABLE)指定表格的框线粗 细(BORDER) 、表行(TR)<BR>、存放表 头的单元格(TH)、存放数据的单元格 (TD)等。</P> <TABLE border="4"> <TR> <TH>姓 名</TH> <TH>性别</TH> <TH>年龄</TH> <TH>籍贯</TH> <TH>文化程度</TH> <TH>毕业学校</TH> <TH>专 业</TH> <TH>联系电话</TH> </TR> <TR> <TD>陈勇刚 </TD> <TD>男</TD> <TD>22</TD> <TD>山东</TD> <TD>大专</TD> <TD>济南师专 </TD> <TD>美术</TD> <TD>13059125 688</TD </TR> <TR> <TD>王 英 </TD> <TD>女</TD> <TD>23</TD> <TD>青岛</TD> <TD>本科</TD> <TD>青岛大学 </TD> <TD>国际贸易 </TD> <TD>13968788 691</TD> </TR> </TABLE> </BODY> </HTML> 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文档中为应用准备 的指令,其作用是为解析器和其他应用程序提供信息。 2. 定义区 • 定义区用于完成文档类型定义(Document Type Declaration,DTD),即定义元素的结构和属性列表以及 元素间的逻辑关系,并以此为根据对文档进行有效性检查。 “元素”即标记名称。 3.文件主体区 • 文档主体区包含标记和文档内容。标记是以树型分层结构 排列,描述出一个XML文档的逻辑结构,它由成 对的标记及包围在标记中的数据所组成。 1.5.2 创建XML文档的基本规则 1.文档必须有唯一的根元素,所有其他元素必须嵌套入其中。 2.每个元素的起始标记和结束标记必须匹配,元素间嵌套必须 正确,不可出现交叉嵌套。 3.标记名称的大小写必须一致。 4.元素必须正确嵌套 5.不要出现不必要的空格。如<_目录 >和</目录> 6.XML中可以使用注释,注释的内容放在注释标记<!--和-->之 间,供阅读说明。 • 注释不能放在XML文档的第一行,也就是不能放在XML声明的 前面。 • 注释不能放在标记中。 • 除了注释本身的标记外,注释中不能再使用“!—”和“-->”。 7. 正确使用XML保留字符 1.5.3 将格式正确的 XML文档转换为有效文档 • 一个有效的XML文档要满足两个要求: 1.文档的开头必须有一个正确的声明和一个文 档类型定义DTD。 2.文档的主体必须符合DTD中定义的结构。 XML文档要进行合法性检验,若文档符合DTD 中的约束,这个文档被认为合法,否则为不合 法。 • 文档类型定义的通用格式是: <!DOCTYPE Name DTD> • 元素类型声明通用格式是: < !ELEMENT Name Contentspec> 1.5.4 定义和使用实体 实体有两种类型:内部实体和外部实体。 • 内部实体分为内部通用可析型和内部参数可析型。 • 外部实体分为外部通用可析型和外部通用不可析型及外部 可析型。 1.实体定义 • 定义外部通用可析型实体的格式为: <!ENTITY Entity Name SYSTEM System Literal> • 定义内部通用可析型实体的格式为: <!ENTITY Entity Name Entity Value> 2. 实体的引用 • 通用实体的引用形式是: & Entity Name; 1.5.5 • XML文档的显示 可以直接在Internet Exploren 5.0浏览器中打 开XML文档. • XML文档的显示有三种方法:使用CSS样式表 显示XML文档、使用数据绑定显示XML文档和 使用XSL样式表显示XML文档。 1. 使用XSL样式表显示XML文档的基本步骤如下: (1) 创建XSL样式表文档。一个XSL样式表是一 个遵守XSL规则的格式正确的XML文档。 (2) 链接XSL样式表到XML文档。 2. 创建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文档由三部分组成:声明区、定义区和文档主体。
© Copyright 2024 ExpyDoc