澳门新葡亰553311b > 新葡亰Web前端 > 只有 90 年代的 Web 开发者才记得这些

只有 90 年代的 Web 开发者才记得这些
2019-12-16 12:56

只有 90 年代的 Web 开发者才记得这些

2016/04/26 · 基础技术 · 2 评论 · WEB

本文由 伯乐在线 - dcscodelife 翻译,艾凌风 校稿。未经许可,禁止转载!
英文出处:holman。欢迎加入翻译组。

你曾经强行把 <blink> 标签放入 <marquee> 标签吗?如今皮克斯动画工作室获得了所有荣誉,但是在 90 年代这个做法则是电脑动画的伟大创举。通过组合两种标签,你成为了一个先驱者。一个创意无限的人。一个令所有人都崇拜的人。

在 90 年代,你曾经是一个网页开发者。

在当时,你知道自己是一个出色的人物。伴随你而来的是极其大量的技术创新,从那时候开始,我们还没来得及做出喜好,技术就已经开始复制开来了。

让我们先放下 jQuery,抛开非关系型数据库不谈:我们有更重要的事情要讨论。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ";
<html xmlns=";
<HEAD>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<TITLE>『{$Think.config.web_name}管理平台』By ThinkPHP {$Think.version}</TITLE>
<load  file="../Public/css/{$Think.config.web_css_style|getDefaultStyle}.css" />
<style>
html{overflow-x : hidden;}
</style>
<base target="main" />
</HEAD>

1×1.gif

1×1.gif 应该获得伟大的格莱美大奖。或者普利策新闻奖。或者类似三年级体育课上颁发的最佳进步奖。除了链式链表,它是计算机科学史上最重要的成就。它不是我们应得的未来,而是我们需要的未来(直到盒子模型彻底取代了它)。

如果你还没不熟悉我们的 1×1.gif 小把戏,请看下面:

图片 1

你能看到它吗,让我们放大一些:

图片 2

The 1×1.gif

这个 1×1.gif – 或者 spacer.gif,或者 transparent.gif – 仅仅是一个长宽都是一个像素的透明 GIF 图像。

JavaScript

<IMG SRC="/1x1.gif" WIDTH=150 HEIGHT=250>

1
<IMG SRC="/1x1.gif" WIDTH=150 HEIGHT=250>

通过上面的代码,你可以把元素放置在页面的任何位置上。

JavaScript

<TABLE> <TR> <TD><IMG SRC="1x1.gif" WIDTH=300> <TD><FONT SIZE=42>Hello welcome to my <MARQUEE>Internet Web Home</MARQUEE></FONT> </TR> <TR> <TD BGCOLOR=RED><IMG SRC="/cgi/webcounter.cgi"> </TR> </TABLE>

1
2
3
4
5
6
7
8
9
<TABLE>
  <TR>
    <TD><IMG SRC="1x1.gif" WIDTH=300>
    <TD><FONT SIZE=42>Hello welcome to my <MARQUEE>Internet Web Home</MARQUEE></FONT>
  </TR>
  <TR>
    <TD BGCOLOR=RED><IMG SRC="/cgi/webcounter.cgi">
  </TR>
</TABLE>

1×1.gif 让你毫不费力地在页面的任何位放置元素。直到今天为止,它仍然是唯一的垂直居中元素的方法。

JavaScript

          

1
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

图片对于你而言是不是太高级了?《HTML For Dummies》是不是直到第四章才介绍 <IMG> 标签?现在好了,你是幸运的:&nbsp; 标签来了!

你可以对自己说,“我知道所有 HTML 实体编码。这个弱不禁风的帅哥来这里干嘛的?”

听着,我亲爱的聪明的迷人的读者朋友,这是一个如今的年轻人没有给予足够尊重的创新:不断重复 &nbsp;。很像 1×1.gif 的小把戏,你能任意地扩展 &nbsp; 并用在任何你需要的地方:

JavaScript

PLEASE SIGN <BR>       MY GUESTBOOK BELOW: <HR><HR>

1
2
3
PLEASE SIGN  <BR>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;MY GUESTBOOK BELOW:
<HR><HR>

在 90 年代,如果我每写下一个 &nbsp; 就得到五美分,我就会有足够的钱支付来自美国在线的每月超支账单了。

<body >
<div id="menu" >
<TABLE cellpadding=0 cellspacing=0 >
<tr>
 <td height='5' colspan=7 ></td>
</tr>
<TR >
 <th ><IMG SRC="../Public/images/home.gif" WIDTH="16" HEIGHT="16" BORDER="0" ALT="" align="absmiddle"> <present name="Think.get.title"> {$Think.get.title}</present><notpresent name="Think.get.title">后台首页</notpresent> </th>
</TR>
<iterate id="item" name="menu" >
<eq name="item['group_id']" value="$menuTag">
<eq name="item['access']" value="1" >
<TR >
 <TD><div ><IMG SRC="../Public/images/comment.gif" WIDTH="9" HEIGHT="9" BORDER="0" align="absmiddle" ALT=""> <A name']}/index/" id="{$key}">{$item['title']}</A></div></TD>
</TR>
</eq>
</eq>
</iterate>
<tr>
 <td height='5' colspan=7 ></td>
</tr>
</TABLE>
</div>
<script language="JavaScript">
<!--
 function refreshMainFrame(url)
 {
  parent.main.document.location = url;
 }

点下划线,边界效应

在 HTML 快走到他的黄金时代的尾巴时,CSS 登场了,它带来了一个内容和样式分离的世界,从此我们也开始不停地处理灾难。

首当其冲地当然是用 CSS 来删除链接的下划线效果。一夜之间,整个因特网都陷入了这个方法所带来的泥泞之中,文本看起来像链接,链接看起来像文本。你不知道点哪里,但是黑暗并没有持续多久,因为我们发明了光标效果(你还没有活到你的鼠标有十二个火球尾巴的时候)。

高级技术的应用是如此引人注目,以至于几乎我们所有人都从一开始就使用 CSS。我甚至在 2000 年的一份 index.shtml(对,就是 SSI)文档中发现了证据:

JavaScript

<style type="text/css"> <!-- a:hover {text-decoration: none; color: #000000} --> </style>

1
2
3
4
5
<style type="text/css">
<!--
a:hover {text-decoration: none; color: #000000}
-->
</style>

就是它了!当然,这是 CSS 的内嵌样式。这个样式使你的鼠标滑过链接时,删除链接的下划线并且链接的文字变黑。从此,交互式网站诞生了。

 if (document.getElementsByTagName("a")[0].href)
 {
refreshMainFrame(document.getElementsByTagName("a")[0].href);  
 }
//-->
</script>
</body>
</html>

DHTML 动态超文本标记语言

就在我们拥有了删除链接下划线的技术后,我们决定把它和一个强大功能结合起来,这个功能就是在页面加载的时候弹出一个消息框 alert("Welcome to my website!")。组合 CSS 和 JavaScript 的二者力量,我们得到了一个技术怪兽:DHTML。

DHTML,表示“分布式 HTML”,这是网页开发工具的最高成就。它将经受住时间的考验,它可以使我们实现很多效果,比如雪花从页面顶部飘落下来,或者创建可折叠的菜单,动态的图片地图,又或者除了使用语义标签 <div>,我们还可以自定义 <marquee> 标签。

DHTML 帮助 Web 开发从业余爱好发展到一个成熟的专业领域。类似 Dynamic Drive 这样的网站使你可以仅仅通过复制粘贴一个 50 行的代码块,就可以解决任何问题,而不需要自己再思考创新的解决方法。实际上, DHTML 就是那个年代的 Twitter Bootstrap 框架。


上一篇:刨根问底HTTP和WebSocket协议 下一篇:没有了