为什么说，大学教育与社会脱节

发布时间：
更新时间：
🕒 阅读时间：10 min read 👀 阅读量：Loading...

本文适合有现代Web基础的人阅读

💡

本文存在AI生成内容(古老代码分析)

请注意辨别

我第一次真切感受到这句话

这学期我选修了一个课程《Web编程技术》,虽然我心里早有准备，但老师一开始发来的网站资源就已经让我瞠目结舌了。。。

古老的文件时间戳

为了细究这些资源有多古老，我仔细看了一下html

index.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">&nbsp;
          <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>&nbsp;</td>
            <td>性别：</td>
            <td>&nbsp;</td>
            </tr>
          <tr>
            <td>职称：</td>
            <td colspan="3">&nbsp;</td>
            </tr>
          <tr>
            <td class="ziti4"><a href="xiangce.html" target="_blank">成果专著</a>：</td>
            <td colspan="3">&nbsp;</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="&amp;MM_ComponentVersion=1&amp;skinName=Clear_Skin_1&amp;streamName=video/%E6%8E%88%E8%AF%BE%E5%BD%95%E5%83%8F1&amp;autoPlay=false&amp;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="&amp;MM_ComponentVersion=1&amp;skinName=Clear_Skin_1&amp;streamName=video/%E6%8E%88%E8%AF%BE%E5%BD%95%E5%83%8F1&amp;autoPlay=false&amp;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 空间里“欢迎光临”的霓虹灯。
003classid="clsid:D27CDB6E-…"Flash 王朝遗孤这段 UUID 比爸妈身份证号还长，Flash 坟头草三米高了，你还在 new ActiveXObject("ShockwaveFlash.ShockwaveFlash")。
004swfobject_modified.js2007 年“最佳前端工程”当年用这玩意跟老板交差：“看，我们做了兼容！” 现在打开控制台：404，swf 找不到，泪目。
005<!--[if !IE]>条件注释化石只有 IE 看得懂的摩斯密码，Edge 都懒得继承这段家产。
006Dreamweaver 模板注释<!-- InstanceBeginEditable -->打开代码就能闻到 Dreamweaver 的柴油味，Ctrl+Alt+V 一键生成。
007像素级切片表格<table width="778" border="0" …>Photoshop 切 20 张图，拼成 1 页，右键“另存为网页”，当年这叫“响应式”——响应老板的需求。
008地图热区 <area shape="circle">远古超链接雷达两个圆就敢叫导航，点个圈圈像打地鼠，点偏了就 404。
009ziti1.css / ziti3.css / ziti4.css字体三连击用数字给 CSS 起名，像极了 QQ 昵称“孤独01、寂寞03、忧伤04”。
010charset=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>

🪦 墓志铭

“这里长眠着一段 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。😄

当然，我也不是完全悲观。至少这次经历让我清醒地认识到：自学才是王道。学校给你的，只是基础；真正能让你立足社会的，是你自己的学习能力和适应能力。在这个快速变化的时代，如果你还指望学校教给你一切，那你注定要被时代淘汰。

我纵有千言万语，却在这里止住，唯有深深的无奈😮‍💨

为什么说，大学教育与社会脱节

作者: xingwangzhe

本文链接: https://xingwangzhe.fun/posts/f1467e6a

本文采用 知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议 进行许可。

留言评论
2000年1月1日星期六
00:00:00

文章目录

本文分类

胡思乱想 (15)

文章标签

大学 (1) 教育 (1) 社会 (1)