静态页面和动态页面中的静态和动态到底指的是什么

小鱼儿 2022-04-02 03:57 325阅读 0赞

### 今天讨论一个话题，这是在考研的专业课考试中的一个问题：静态页面和动态页面的联系和区别 ，这考的我就很猝不及防 ，这个方面虽然以前有了解 ，但是理解得并不深刻，网安方向涉及到的东西太多了，慢慢学习吧~首先来了解 一下，什么 是动态页面，什么是静态页面，接着我们再来理解静态页面和动态页面中的静态和动态到底指的是什么？ ###

# 静态Web页面 #

Web的基础是将Web页面从服务器传输到客户端。在最简单的形式中，Web页面是静态的。**这里的静态，指的是它们就是存放于服务器上的文件，每次被客户端获取和显示表示的都是一样的方式。** 并不是说页面在这个浏览器端是呆滞的。包含一段视频的页面也可以是一个静态Web页面。  
Web中的大多数页面使用**HTML（超文本标记语言）** 语言来编写，**教师的网页**通常是**静态的HTML页面**，而**公司的网页**则通常是由一个网页设计公司制作的**动态页面**。  
HTML的**最初目标**是指定文档的结构，而不是文档的外观。例如：

<h1> Deborah's Photos </h1>

指示浏览器要强调标题，但没有说明有关字型、点的大小或颜色等任何信息。标题的外观如何表现留给浏览器考虑，因为浏览器应该知道显示器的属性（例如，它有多少像素）。然而，许多网页设计师希望能 绝对控制自己设计的网页如何呈现 ，因此新的标签被添加到 HTML以便控制页面的外观 ，例如 ：

<font face="helvetica" size="24" color="red" > Deborah's Photos </font>

但是当我们想要更好地去控制整个页面的显示的时候，随之而来的问题就会造成不同浏览器，同一浏览器不同版本或者不同屏幕分辨率的显示器的不兼容。  
所以，一种更好的替代方案就是使用样式表，**层叠样式表CSS**将样式表引入到HTML4.0的Web

# 动态Web页面和Web应用 #

到目前为止，我们使用的**静态页面模型**将页面作为**多媒体文档**处理，这些文档方便地链接在一起。这是Web初期的一个拟合模型。  
如今，**围绕Web的许多兴奋点在于可将它用作应用程序和服务**。比如：在电子商务网站购买产品，检索图书馆目录，探索地图，阅读和发送电子邮件，以及进行文档合作。这些新的用途有点类似于传统的应用软件，不同的是这些应用程序运行在浏览器内部，而用户数据存储在Internet数据中心的服务器上。

## 这种方法的优点： ##

*  用户不需要安装单独的应用程序，可以从不同的计算机访问用户数据，而且由服务提供商负责备份。

写到这里突然想起了当初了解到的C/S架构和B/S架构，这种方式不正是B/S架构么！  
稍微提一嘴

*  C/S架构：客户/服务器模式，典型的应用就是我们安装的各种软件的客户端，比如QQ，微信等
 *  B/S架构：浏览器/服务器模式，典型的应用有网页版的QQ，网页版的oofice

这种模式就是**云计算**的普遍形式，它将从个人台式电脑转移到Internet上的共享服务器集群。  
为了运行应用程序，Web页面不能再是静态的了，动态内容是必需的。**例如**，一个图书馆目录的页面应该反映出哪些书籍当前可借和哪些书籍已经借出因而不可用的当前状态。类似的，一个有用的股票市场页面将允许用户与页面交互，以便查看不同时期的股票价格，以及计算利润和亏损。从这两个例子我们来分析一下，**静态页面的静态和动态页面的动态到底指的是什么？** 这个时候再回顾一下静态页面的定义，是它**每次**被客户端获取的时候像用户呈现的内容是相同的。而**动态页面**，比如图书馆页面，书籍的借阅情况是**实时变化**的，因此你不同时候看浏览这个页面，看到的内容也会实时变化，股票市场的页面更是如此。所以这里可以明确的说明一下了：  
**静态页面的静态和动态页面的动态指的是页面内容会不会变化，不变自然是静态，变自然是动态**；*而不是说，页面上的内容是不是包含视频动画就说他是动态页面了，一个页面上即使全是数字和线图，如果不同时候你查看会呈现不同的状态，这也是动态页面，如果一个页面里包含了动画，但是你每次浏览这个页面，内容没有发生改变的话，也是静态页面！*

### 到这里，其实我们就已经把动态页面和静态页面的区别开了，接下来，讨论一下动态内容的生成情况 ###

从上面给出的例子表明，动态内容可以由服务器或者浏览器内的运行的程序产生。  
![动态页面][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xvdmVDQ19vcmFuZ2U_size_16_color_FFFFFF_t_70]  
下面简单给出这两种情况：

*  **服务器端动态Web页面生成**
 *  **客户端动态Web页面生成**

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xvdmVDQ19vcmFuZ2U_size_16_color_FFFFFF_t_70]: /images/20220402/34b6ecfd20c44630a1c0c228fe72d6ed.png