静态页面的前世今生

静态页面,也叫做静态网页,是网站最早的表现形式,是网页的原生状态,是亚当和夏娃吃苹果(我知道那个不是苹果,但既然大家都这么说,并且和乔布斯也能扯上关系,那就这么着吧 – 我承认我就是一俗人)之前的伊甸园。

无论自觉还是不自觉,自愿还是不自愿,人类离开伊甸园是早晚、必然的事。但同时,人类对伊甸园的怀念和向往也是根植于基因里的,无论喜欢还是不喜欢,正视还是忽视(亦或蔑视),总有人想着回到过去,回到曾经的天真无邪。

互联网也一样。

所以,即便在互联网飞速发展的今天,仍然有很多人惦记着静态网页,并且在互联网上,仍然存在着很多真正的静态网页。请注意,我把真正的三个字打了强调标签。

所谓真正的静态网页,是纯粹用HTML或XML或者干脆就是TXT书写的页面。这三者都可以被浏览器直接打开。txt就是内容本身;XML设计了一大堆标签,注重内容的逻辑结构;而HTML不仅注重内容的逻辑结构,还关心这些内容在浏览器中所表现出来的样子(由这些关心所发展出来的就是网页的另一个大分支,CSS)。

XML代码示例:

<note>
<to>小芳</to>
<from>大黑牛</from>
<heading>就是撒一个娇</heading>
<body>你还好吗?就是想你了。生日快乐!</body>
</note>

TXT就不举例了,这篇文章任何一段都是TXT。

HTML举例:

<!DOCTYPE html>
<html>
<head>
<title>你看不见我,但我就在这里</title>
</head>
<body>

<h1>什么是静态页面</h1>
<p>于千万人之中遇见你所要遇见的人,于千万年之中,时间的无涯的荒野里,没有早一步,也没有晚一步,刚巧赶上了,那也没有别的话可说,惟有轻轻地问一声:“噢,你也在这里吗?”</p>

</body>
</html>

请留意“!DOCTYPE html”这里,这个部分是修炼了“上千年”才变成如今这个简洁模样的。曾经的这个部分八国那么乱。

title标签里的内容,在浏览器前台是不显示出来的,或者说,head标签里所有的内容都不在浏览器前台显示,存在的原因是这里的东西是浏览器需要的,有些则是给搜索引擎准备的。

我们在浏览器可以看到的,就是body标签包裹着的内容。例如h1标签,就是网页内容的正标题;而p标签的作用,就是把正文部分包裹起来。

如果以上html不加任何CSS样式,那么它在浏览器中的样子是相当“粗犷与奔放”的,大概像是这样:

什么是静态页面

于千万人之中遇见你所要遇见的人,于千万年之中,时间的无涯的荒野里,没有早一步,也没有晚一步,刚巧赶上了,那也没有别的话可说,惟有轻轻地问一声:“噢,你也在这里吗?”


但是,HTML和CSS合谋起来,这些年很是产出了相当多的“奇巧淫技”,单单字体就有成百上千种选择,还有颜色,还有背景色,当然,CSS也发展出了很多非常酷炫的动漫效果,例如标题可以天外飞仙般地从任何你想象不到的地方以任何精灵古怪的姿势进入页面,正文部分也一样可以加诸动漫效果。如果再有javaScript加持,那么即便是所谓“静态页面”,现在也非常“动”得可以。

当然,静态页面的所谓“静”,不是指稀里哗啦的酷炫页面表现效果,指的是它的内容和原始页面一致,不会改变,也不会在前台用户的任何操作下产生改变 —— 我是指实质性的改变。

所以,除非是“古董”且“老”,否则如今的静态页面,也跟最早的静态页面有了相当大的不同,而二者还能共用“静态页面”这个名称,是它们仍然还拥有一样最基础的共性,就是前端所表现出来的核心数据(内容)仍然是由页面本身提供的,而不是经由什么其他第三方(例如后台语言 + 数据库)撺掇而成。

由此,我们如今讲的静态页面,和最早的静态页面相比较,在形式上已经发生了巨大的变化。现在的静态页面是静态页面2.0、3.0、4.0甚至n.0版本。之所以今天还在讲静态页面,是因为在数据不复杂,交互不频密的情况下,很多人,尤其是对极简生活非常执着的人,很不情愿动用“庞大、繁复”的服务器资源来驱动一个本来可以很简单的应用。

我们以Blog这种形式的网站为例,其实这种应用最大的需求就是对图文的合适展示,里面的内容是否有必要弄一个复杂的数据库来存储,再经过另外一个后台加工程序鼓捣一番,然后再吐出来给到浏览器——这中间的这么多过程,也不过就是一个从内容到内容的过程,与其这样,不如直接就把内容装到HTML的各类标签中,浏览器直接调用HTML这个文件就可以了。或者,Markdown是另外一种更加简洁的轻量级的标记语言,完全可以适应博客的写作需要。本文就是用Markdown编辑的,而我用到的标签还不超过5个。

静态页面不仅仅是一个技术术语,它也是一种人生哲学和生活态度。在这种极简主义理想的驱动下,用JavaScript + HTML + CSS + 另外一种驱动html的简单语言,例如Jekyll,我们就可以实现用静态页面表现Blog的需求。相关内容请参考Jekyll + GitHub 页面 – 个人Blog完美组合

Scroll to Top