Web前端开发技术

Appearance

演示：BBS 与文本浏览器 ​

HTTP客户端把客户端排成一条能力阶梯。本演示沿阶梯下段走一遭：先回到 Web 诞生之前，用 telnet 进一个 BBS（只有键盘和字符的世界）；再用文本浏览器 Links 打开现代网站——它真的在渲染页面，只是渲染成一屏文字。看完应能回答：

  • 不执行 JS、不画图形的客户端，看到的互联网是什么样？
  • 哪些现代网站还能用，哪些只剩空白？为什么？
  • 一行 JS 都不跑，表单是怎么把帖子发出去的？

元信息 ​

  • 目标：从 telnet BBS 到文本浏览器 Links，亲眼看到“客户端的能力决定你看到的互联网”——解析渲染、执行 JS、输出图形界面是三件独立的事，缺一格就少一个世界；课上老师演示，课后可自行复现
  • 关键概念：BBS、telnet、文本浏览器、Links、表单 POST、无 JS 可用、能力阶梯
  • 关联阶段：cp1
  • 常见误区：以为 BBS 是“网页论坛的古称”（它是 telnet 终端时代的独立物种，比 Web 更早）；以为浏览器一定有图形界面（Links 渲染出文字排版的完整页面）；以为现代网站在任何客户端里都能打开（内容靠 JS 生成的站点在无 JS 客户端里只剩空壳）；以为发帖必须有 JS（标准 HTML 表单 POST 就够，JS 只是增强）

怎么算看到了（复现自检） ​

  • 在 telnet 里进入一个 BBS，用键盘翻动菜单
  • 在 Links 里打开维基百科，看到排版好的正文
  • 找到至少一个在 Links 里近乎空白的现代网站，能说出原因

准备 ​

  • telnet：最轻量的网络客户端，支持 TCP 协议的连接，通过它提供的控制台即可与其他服务器交互。Windows 默认未启用，开启方式：
shell
pkgmgr /iu:"TelnetClient"
# restart command prompt
quit
# telnet默认端口 23
telnet sb-discovery.com
telnet 127.0.0.1 80
  • Links Portable：解压即用，无需安装、无需管理员权限。基本操作：Esc 呼出/收起菜单，g 输入网址，方向键滚动与选择链接，Enter 打开链接或进入输入框，Backspace 后退，q 退出
powershell
LinkPortable.exe  https://zh.wikipedia.org/wiki/万维网

演示流程 ​

第一幕：telnet 进 BBS ​

BBS（Bulletin Board System，电子公告板）是拨号上网时代的社交网站，比 Web 更早：仅需终端和键盘进行访问和交互，看板、发帖、站内信全在字符界面里完成。

图0 BBS 界面

现场连接一个 BBS 站点（如 StarBase Discovery），观察三件事：全字符的界面、键盘导航（而非鼠标）、一问一答的即时交互。

课后自连：

第二幕：telnet 对 Web 服务器说话 ​

Web 服务器同样接受 telnet 连接（端口 80）。telnet 127.0.0.1 80 连上后，你就站在了 curl 的位置：手工敲 HTTP 命令、收字节流。这正是实训：curl 收发报文要亲手做的事，telnet 比 curl 更原始，连 HTTP 的语法都要自己打。

按 g 逐个输入地址，观察各自“剩下多少”：

记录：哪些站能看到正文？哪些只剩骨架？Links 缺了“执行 JS”那一格，缺格的后果在这里具体长什么样。

第四幕：无 JS 发一条评论 ​

  • 用 Links 打开自己博客的任意一篇文章，滚到页面底部的评论表单
  • 用 Tab 或方向键在字段间移动，Enter 进入编辑，填好姓名、邮箱、评论内容
  • 移到“发表评论”按钮上，Enter 提交

这是一次纯 HTML 表单 POST：填字段、提交、浏览器把数据发给服务器，从头到尾一行 JS 都没跑。回想实训：curl 收发报文里 POST 的请求体，你在输入框里敲下的内容就是这样上路的。

再换 Chrome 打开同一篇文章：评论已经在前台了。同一份 HTML，两个客户端两种呈现，一个渲染成像素，一个渲染成文字，服务器根本不关心客户端长什么样。

复现的常见卡点 ​

  • telnet 连不上：Windows 未开启 TelnetClient（见准备节）；BBS 站点时有歇业，换列表里的其他站，或用 ftelnet 在线版
  • 中文乱码：用 Windows Terminal 启动，或在菜单设置里把字符集调为 UTF-8
  • 想自己发帖：需要先完成第 1 周的建站实训，有自己的 WordPress

思考 ​

  • telnet、curl、Links、Chrome 各在能力阶梯的哪一格？两两相比，多的、少的是什么？
  • telnet BBS 与文本浏览器看到的互联网，差在哪一层？
  • WordPress 的评论表单不靠 JS 也能工作，这对屏幕阅读器用户（见HTTP客户端的语音浏览器一节）意味着什么？

收获与下一步 ​

  • 客户端的能力决定你看到的互联网：缺“解析渲染”只剩字节流（telnet/curl），缺“执行 JS”只剩空壳（Links），缺“图形界面”还有一屏文字
  • 表单 POST 是 HTML 的原生能力，JS 只是增强，这也是无障碍的底座
  • 带着阶梯回看 HTTP客户端与浏览器：前端技术只在阶梯顶端那一格被执行