🕒 阅读时间：5 分钟 📝 字数：1760 👀 阅读量： Loading...
本文适合有现代Web基础的人阅读
:::tip 本文存在AI生成内容(古老代码分析)
请注意辨别 :::
这学期我选修了一个课程《Web编程技术》,虽然我心里早有准备，但老师一开始发来的网站资源就已经让我瞠目结舌了。。。
为了细究这些资源有多古老，我仔细看了一下html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><!-- InstanceBegin template="/Templates/boban.dwt" codeOutsideHTMLIsLocked="false" -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- InstanceBeginEditable name="doctitle" -->
<title>个人网站</title>
<!-- InstanceEndEditable -->
<!-- InstanceBeginEditable name="head" -->
<!-- InstanceEndEditable -->
<bgsound src="mn.mp3" loop="-1">
<style type="text/css">
#apDiv1 {
position:absolute;
width:766px;
height:60px;
z-index:1;
left: 453px;
top: 12px;
}
</style>
<script src="Scripts/swfobject_modified.js" type="text/javascript"></script>
<link href="ziti1.css" rel="stylesheet" type="text/css" />
<link href="ziti3.css" rel="stylesheet" type="text/css" />
<link href="ziti4.css" rel="stylesheet" type="text/css" /></head>
<body>
<table width="778" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td><img src="images/index_01.jpg" width="778" height="209" border="0" usemap="#Map" /></td>
</tr>
</table>
<table width="778" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="186"><table width="186" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><img src="images/index_02.jpg" width="186" height="74" /></td>
</tr>
<tr>
<td height="381" valign="top" background="images/index_05.jpg">
<marquee width="180" height="100" scrolldelay="200" direction="up" onmousemove=this.stop() onmouseout=this.start()><table width="120" border="0" align="right" cellpadding="0" cellspacing="0">
<tr>
<td><span class="ziti3">欢迎</span>光临我的<span class="ziti1">个人</span><span class="ziti4">网站</span></td>
</tr>
</table></marquee></td>
</tr>
</table></td>
<td valign="top"><div id="apDiv1">
<object id="FlashID" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="776" height="60">
<param name="movie" value="bk.swf" />
<param name="quality" value="high" />
<param name="wmode" value="opaque" />
<param name="swfversion" value="6.0.65.0" />
<!-- 此 param 标签提示使用 Flash Player 6.0 r65 和更高版本的用户下载最新版本的 Flash Player。如果您不想让用户看到该提示，请将其删除。 -->
<param name="expressinstall" value="Scripts/expressInstall.swf" />
<!-- 下一个对象标签用于非 IE 浏览器。所以使用 IECC 将其从 IE 隐藏。 -->
<!--[if !IE]>-->
<object type="application/x-shockwave-flash" data="bk.swf" width="776" height="60">
<!--<![endif]-->
<param name="quality" value="high" />
<param name="wmode" value="transparent" />
<param name="swfversion" value="6.0.65.0" />
<param name="expressinstall" value="Scripts/expressInstall.swf" />
<!-- 浏览器将以下替代内容显示给使用 Flash Player 6.0 和更低版本的用户。 -->
<div>
<h4>此页面上的内容需要较新版本的 Adobe Flash Player。</h4>
<p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="获取 Adobe Flash Player" width="112" height="33" /></a></p>
</div>
<!--[if !IE]>-->
</object>
<!--<![endif]-->
</object>
</div>
<!-- InstanceBeginEditable name="EditRegion3" -->
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><img src="images/index_03.jpg" width="564" height="116" /></td>
</tr>
<tr>
<td><table width="500" border="0" align="center" cellpadding="5" cellspacing="0">
<tr>
<td>姓名：</td>
<td> </td>
<td>性别：</td>
<td> </td>
</tr>
<tr>
<td>职称：</td>
<td colspan="3"> </td>
</tr>
<tr>
<td class="ziti4"><a href="xiangce.html" target="_blank">成果专著</a>：</td>
<td colspan="3"> </td>
</tr>
<tr>
<td colspan="4" align="center" valign="top"><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="320" height="240" id="FLVPlayer">
<param name="movie" value="FLVPlayer_Progressive.swf" />
<param name="quality" value="high" />
<param name="wmode" value="opaque" />
<param name="scale" value="noscale" />
<param name="salign" value="lt" />
<param name="FlashVars" value="&MM_ComponentVersion=1&skinName=Clear_Skin_1&streamName=video/%E6%8E%88%E8%AF%BE%E5%BD%95%E5%83%8F1&autoPlay=false&autoRewind=false" />
<param name="swfversion" value="8,0,0,0" />
<!-- 此 param 标签提示使用 Flash Player 6.0 r65 和更高版本的用户下载最新版本的 Flash Player。如果您不想让用户看到该提示，请将其删除。 -->
<param name="expressinstall" value="Scripts/expressInstall.swf" />
<!-- 下一个对象标签用于非 IE 浏览器。所以使用 IECC 将其从 IE 隐藏。 -->
<!--[if !IE]>-->
<object type="application/x-shockwave-flash" data="FLVPlayer_Progressive.swf" width="320" height="240">
<!--<![endif]-->
<param name="quality" value="high" />
<param name="wmode" value="opaque" />
<param name="scale" value="noscale" />
<param name="salign" value="lt" />
<param name="FlashVars" value="&MM_ComponentVersion=1&skinName=Clear_Skin_1&streamName=video/%E6%8E%88%E8%AF%BE%E5%BD%95%E5%83%8F1&autoPlay=false&autoRewind=false" />
<param name="swfversion" value="8,0,0,0" />
<param name="expressinstall" value="Scripts/expressInstall.swf" />
<!-- 浏览器将以下替代内容显示给使用 Flash Player 6.0 和更低版本的用户。 -->
<div>
<h4>此页面上的内容需要较新版本的 Adobe Flash Player。</h4>
<p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="获取 Adobe Flash Player" /></a></p>
</div>
<!--[if !IE]>-->
</object>
<!--<![endif]-->
</object></td>
</tr>
</table></td>
</tr>
</table>
<script type="text/javascript">
swfobject.registerObject("FLVPlayer");
</script>
<!-- InstanceEndEditable --></td>
<td width="28" valign="top"><img src="images/index_04.jpg" width="28" height="455" /></td>
</tr>
</table>
<table width="778" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td><img src="images/index_07.jpg" width="778" height="55" /></td>
</tr>
</table>
<map name="Map" id="Map">
<area shape="circle" coords="593,153,30" href="lianxi.html" target="_blank" />
<area shape="circle" coords="346,90,31" href="lianxi.html" target="_blank" />
</map>
<script type="text/javascript">
swfobject.registerObject("FlashID");
</script>
</body>
<!-- InstanceEnd --></html>
怎么样，第一行的DOCTYPE声明是否吓到了你？我们不妨拆开来说
下面这份“上古卷轴”级别的 HTML，简直可以放进博物馆玻璃柜里供人瞻仰。边看边笑，边笑边哭——
| 文物编号 | 文物名称 | 年代感 | 吐槽 |
|---|---|---|---|
| 001 | <bgsound> | 1998 年 IE 4 限定彩蛋 | 放 BGM？不，这是“网吧神曲”自动播放机，Chrome 直接当它不存在。 |
| 002 | <marquee> | 上古滚动神器 | 鼠标一上去就停，像极了当年 QQ 空间里“欢迎光临”的霓虹灯。 |
| 003 | classid="clsid:D27CDB6E-…" | Flash 王朝遗孤 | 这段 UUID 比爸妈身份证号还长，Flash 坟头草三米高了，你还在 new ActiveXObject("ShockwaveFlash.ShockwaveFlash")。 |
| 004 | swfobject_modified.js | 2007 年“最佳前端工程” | 当年用这玩意跟老板交差：“看，我们做了兼容！” 现在打开控制台：404，swf 找不到，泪目。 |
| 005 | <!--[if !IE]> | 条件注释化石 | 只有 IE 看得懂的摩斯密码，Edge 都懒得继承这段家产。 |
| 006 | Dreamweaver 模板注释 | <!-- InstanceBeginEditable --> | 打开代码就能闻到 Dreamweaver 的柴油味，Ctrl+Alt+V 一键生成。 |
| 007 | 像素级切片表格 | <table width="778" border="0" …> | Photoshop 切 20 张图，拼成 1 页，右键“另存为网页”，当年这叫“响应式”——响应老板的需求。 |
| 008 | 地图热区 <area shape="circle"> | 远古超链接雷达 | 两个圆就敢叫导航，点个圈圈像打地鼠，点偏了就 404。 |
| 009 | ziti1.css / ziti3.css / ziti4.css | 字体三连击 | 用数字给 CSS 起名，像极了 QQ 昵称“孤独01、寂寞03、忧伤04”。 |
| 010 | charset=utf-8 但文件名 gbk | 中文乱渊 | 本地打开全是“锟斤拷”，老板却说“我电脑正常”，神秘东方力量。 |
<!-- 1. 背景音乐，IE Only，Chrome 直接装死 -->
<bgsound src="mn.mp3" loop="-1">
<!-- 2. 滚动字幕，鼠标悬停即停，像极了夜市 LED -->
<marquee
width="180"
height="100"
scrolldelay="200"
direction="up"
onmousemove="this.stop()"
onmouseout="this.start()"
>
欢迎光临我的个人网站
</marquee>
<!-- 3. 双对象标签，给 IE 和非 IE 各写一份，当年叫“优雅降级” -->
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" …>
<param name="movie" value="bk.swf" />
<!--[if !IE]>-->
<object type="application/x-shockwave-flash" data="bk.swf" …>
<!--<![endif]-->
</object>
<!-- 4. Dreamweaver 模板标记，Ctrl+Alt+V 自动生成 -->
<!-- InstanceBegin template="/Templates/boban.dwt" -->
<!-- 5. 用图片拼页面，一像素不能差，差了就裂 -->
<table width="778" border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<img
src="images/index_01.jpg"
width="778"
height="209"
border="0"
usemap="#Map"
/>
</td>
</tr>
</table>
<!-- 6. 热区地图，点圆圈像打地鼠 -->
<map name="Map">
<area shape="circle" coords="593,153,30" href="lianxi.html" target="_blank" />
</map></object
></bgsound>
“这里长眠着一段 2003 年的前端代码，它用
<table>布局，用<bgsound>唱歌，用 Flash 跳舞，用<marquee>说永远爱你。
它没见过 Flex，没听过 Grid，更不懂 Vue 与 React，但它把青春写进了ziti4.css，把眼泪留在了index_07.jpg的 1×55 像素里。
安息吧，古早互联网。愿天堂没有 404。”
我承认学校教育并非一定要与现代生态结合，但至少要保证代码能跑起来。这个里面竟然还有flash,IE标准，实在是令人遗憾，也让我感受到大学教育与社会脱节的现状。
说实话，看到这份教学资源的时候，我脑子里闪过的第一个念头就是：这还是2025年吗？我们居然还在用2007年的技术栈来教学生？！
你知道这意味着什么吗？这意味着我们这些学生，从大一开始就在学习一门已经死了10年的技术。老师在上面讲得津津有味…
这种教育和社会的严重脱节，让学生处境尴尬极了。毕业时手里拿着一纸文凭，简历上却只能写”熟悉HTML/CSS/JS基础语法”。去面试的时候，人家HR问你有没有项目经验，你说做过几个静态页面；问你用过什么框架，你说学过jQuery；问你版本控制，你说会用SVN。😄
当然，我也不是完全悲观。至少这次经历让我清醒地认识到：自学才是王道。学校给你的，只是基础；真正能让你立足社会的，是你自己的学习能力和适应能力。在这个快速变化的时代，如果你还指望学校教给你一切，那你注定要被时代淘汰。
我纵有千言万语，却在这里止住，唯有深深的无奈😮💨
此内容由惯性聚合(RSS阅读器)自动聚合整理，仅供阅读参考。 原文来自 — 版权归原作者所有。