只有 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>
采用Javascript实现，用鼠标点击相应颜色，动态改变网页背景颜色
1×1.gif
1×1.gif 应该获得伟大的格莱美大奖。或者普利策新闻奖。或者类似三年级体育课上颁发的最佳进步奖。除了链式链表，它是计算机科学史上最重要的成就。它不是我们应得的未来，而是我们需要的未来（直到盒子模型彻底取代了它）。
如果你还没不熟悉我们的 1×1.gif 小把戏，请看下面：
你能看到它吗，让我们放大一些：
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
|
|
图片对于你而言是不是太高级了？《HTML For Dummies》是不是直到第四章才介绍
<IMG> 标签？现在好了，你是幸运的： 标签来了！
你可以对自己说，“我知道所有 HTML 实体编码。这个弱不禁风的帅哥来这里干嘛的？”
听着，我亲爱的聪明的迷人的读者朋友，这是一个如今的年轻人没有给予足够尊重的创新：不断重复
。很像 1×1.gif 的小把戏，你能任意地扩展
并用在任何你需要的地方：
JavaScript
PLEASE SIGN <BR> MY GUESTBOOK BELOW: <HR><HR>
1
2
3
|
PLEASE SIGN <BR>
MY GUESTBOOK BELOW:
<HR><HR>
|
在 90 年代，如果我每写下一个
就得到五美分，我就会有足够的钱支付来自美国在线的每月超支账单了。
<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 框架。
相应的Javascript源代码为：
像素字体
那个年代的电脑屏幕不是很大。我的意思是，虽然自从阴极射线管显示器 CRT 诞生后，显示器的尺寸的确很大，但是它们的分辨率不高。因此，为了充分利用像素，我们必须用 6 个像素点来表示任意字符。
从字里行间我们可以看出，当面对着这些简单的不能再简单的字体，并且当意识到这些字体都是由像素构成的时候，Web 开发者们会渴望成为一个漫画家。所以你会在启动画面上看到那些奇怪的等距像素插图，这些开发者的时间和金钱如果投到那些新上市的互联网公司会产生更多的价值，而不是浪费在安装 Photoshop 软件上。
复制代码 代码如下:
按钮
我相信人们之所以讨厌IE浏览器，都是因为IE浏览器抛弃了当初那种最纯粹的样子
IE 4.0 是浏览器的完美化身。它拥有动态桌面。拥有通道 Channels。对，就是伟大的通道，这是最酷的技术，之前从来没有在市场上被使用过，一点都没有。总的来说，IE 4 太优秀了，无论你是否喜欢它，你都应该把它装到你的电脑上。
当你属于精英团体时，你深刻理解完美的价值，你有一种与生俱来的冲动，你想告诉每一个你遇到的人你的决定。你，也唯独只有你有必要庄严地做一个伟大的决定。比如决定你的客户使用什么浏览器浏览你的网站。
这些按钮随处可见。就像军官衣服上的绶带：向人们宣告着他们为了如今的荣耀，曾经是如何努力战斗的故事。换句话说，无论你用哪一个编辑器（当然是 FrontPage 98），无论你的 Web 服务器是什么（傻瓜，当然是 GeoCities），无论是 Web 环的哪个部分（这个按钮无论如何都将提高你的网站排名）
我怀念这段美好的时光。如今我们在 Javascript上进行抽象，在抽象之上又进行抽象。我们甚至都不知道如何准确地进行计算。每当想起我们如何走到今天这一步，都令人十分吃惊。
让我们自豪地举起酒杯，帮我们一个忙：复制一堆
到你的下一个代码提交中，让你的团队成员大吃一惊吧。
1 赞 收藏 2 评论
var hex = new Array(6)
关于作者：dcscodelife
简介还没来得及写 :） 个人主页 · 我的文章 · 10 ·
hex[0] = "FF"
hex[1] = "CC"
hex[2] = "99"
hex[3] = "66"
hex[4] = "33"
hex[5] = "00"
function display(triplet) {
document.bgColor = '#' triplet
}
function drawCell(red, green, blue) {
document.write('<TD BGCOLOR="#' red green blue '">')
document.write('<A HREF="javascript:display('' (red green
blue) '')">')
document.write('<IMG SRC="place.gif" BORDER=0 HEIGHT=12
WIDTH=12>')
document.write('</A>')
document.write('</TD>')
}
function drawRow(red, blue) {
document.write('<TR>')
for (var i = 0; i < 6; i) {
drawCell(red, hex[i], blue)
}
document.write('</TR>')
}
function drawTable(blue) {
document.write('<TABLE CELLPADDING=0 CELLSPACING=0 BORDER=0>')
for (var i = 0; i < 6; i) {
drawRow(hex[i], blue)
}
document.write('</TABLE>')
}
function drawCube() {
document.write('<TABLE CELLPADDING=5 CELLSPACING=0
BORDER=1><TR>')
for (var i = 0; i < 6; i) {
document.write('<TD BGCOLOR="#FFFFFF">')
drawTable(hex[i])
document.write('</TD>')
}
document.write('</TR></TABLE>')
}
drawCube()
这是截图 相应的Javascript源代码为： 复制代码 代码如下: var hex = new Array...
编辑：2020欧洲杯冠军竞猜官方网站 本文来源：开辟者才记得那几个2020欧洲杯冠军竞猜官方网站
关键词： 欧洲杯竞猜