Web应用开发模式与网页技术解析-优快云博客

本文介绍了Web应用程序的发展历程，从主机/终端模式到客户机/服务器模式，再到浏览器/服务器模式。详细讲解了B/S结构的工作原理，网页的组成部分及分类，以及静态网页与动态网页的区别。此外，还探讨了XHTML的基本语法规则，如文档级元素html、head和body的使用，并介绍了如何添加正文内容，如标题、段落、引用、列表和分区块文本的定义。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、主机/终端模式（Mainframe/Terminal）

企业应用程序是围绕一个中心大型主机建立的，使用者一般通过只有一个屏幕、一个键盘和一根主机连接线的“哑终端”与主机的应用程序进行交互。例如：超市收银、航空售票、小型储蓄所等。

二、客户机/服务器

图形用户界面（Graphic User Interface,即GUI）、分布式客户/服务器(Client/Server,简称C/S)

C/S模式开发的系统具有信息共享性好、网络的信息传输量小等优点，但却具有不易维护，用户操作界面风格不一致，能够处理的数据类型不易扩展等缺点等。

三、浏览器/服务器模式（Browser/Server,简称B/S)

按B/S模式建立的应用系统的特征是，客户端只需要安装普遍使用的浏览器（如：IE、FireFox等)

B/S结构Web应用程序工作原理

1、有网页组成的web应用程序；

2、存放web应用程序并提供网页浏览服务的web服务器；

3、解析网页并显示网页给用户浏览器的客户端浏览器；

4、在客户端和web服务器端提供通讯的HTTP网络协议；

四、网页：由四个部分组成包括：要显示给用户看的数据信息（即网页的内容）、网页内容的组织形式（即网页的结构）、格式化网页内容的网页表现形式部分，以及与控制网页的网页行为部分

五、网页的分类：分为静态网页、客户端动态网页、服务器端动态网页三种。

1、静态网页：这些网页以.html或者.htm文件保存，页面的内容（文本、图像、超链接等）和外观总是保持不变，——他并不考虑谁在访问页面，何时访问页面、如何进入页面以及其他因素，其优点在于信息访问的效率很高，网站的架设与开发相当容易。

2、客户端动态网页

包含了页面逻辑的脚本，典型的客户端动态网页技术包括JavaScript、ActiveX控件、Java Applet等，客户端动态网页技术的主要优点是充分利用了客户端的计算资源，减轻了服务器和网络上的计算压力，同事可以很方便地实现基于图形的用户交互界面

六、XHTML基本语法规则

一个网页，也就是一个XHTML文档，是由元素组成，元素定义了文本和图形在XHTML文档中的结构。XHTML文档的扩展名通常是.HTML或者.HTM。

所有的XHTML 文档都是三个文档级的元素：html、head和body

1、html元素的标记对之间是XHTML文档的内容，

2、head元素中可以包含文档标题、元数据信息、文档脚本、样式表信息等。每个网页只需要一个文档标题，也就是只有一个head元素或title元素

3、<head>标题部分是大部分内容是在浏览器上不可见的，只有<title>部分内容可以显示在浏览器的标题栏上，在XHTML文档中，html、head、body元素必须出现，title元素必须出现head元素内部。

七、添加XHTML文档正文

1、定义正文标题

XHTML提供六个元素h1、h2、h3、h4、h5、h6以支持六个级别的正文标题

2、定义一个段落：<p></p>

3、定义引用文本：<blockquote></blockquote>

4、定义列表：

①有序列表：用元素ol定义（Ordered List)

②无序列表：用元素ul定义(Unordred List)

③定义列表：用元素dl定义(Defined List)

<p>定义列表实例</p>
<dl>
<dt>猫</dt>
<dd>一只可爱的猫</dd>
<dt>手电筒</dt>
<dd>使用电池的设备</dd>
<dt>cute</dt>
<dd>可爱</dd>
</dl>

有序列表和无序类别的列表项是用元素LI标记（list）；定义列表项是由两个元素dt 和dd 构成，其中dt（Defingde Term）用于定义列表项的名称，dd用于定义列表项的具体内容，定义列表通常用于文档中的词汇表、术语表等

<p>无序列表实例</p>
<ul>
   <li>编写XHTML文件<>
   <li>编写XML文件<>
   <li>编写JSP文件<>
</ul>
<p>有序列表实例</p>
<ol>
   <li>编写XHTML文件<>
   <li>编写XML文件<>
   <li>编写JSP文件<>
</ol>

5、定义与编排文本：<pre></pre>

6、定义分区块文本：分区(division)是块格式化的更高级别，通常用于成组的段落、整个页面，有时也用于仅仅一个段落，分区元素div为核实后一个文档的较大的部分提供了一个简单的解决方案例如:

<html>
<head>
<style>
.bordered {border - style:solid;}
</style>
</head>
<body>
<p>这是一个常规段落</p>
<div class = "bordered">
<p>这是一个用div 样式界定的段落</p>
</div>
</body>
</html>

<div> 7.特殊字符

&nbsp；空格

&lt；左尖括号<或小于号

&gt;右尖括>或大于号

&copy;版权符号

&reg；已注册符号

&amp;and符号&

&3151;长破折号
</div>

8.创建超链接

web连接有两个基本的组件：

①链接：指在主文档中指向其它文档的文本

②目标：指链接所指向的文档或者主文档中的某个位置

格式：

<a><href="目标URL">描述文本</a>

Web应用程序开发原理