尧图网页设计 
咱们做前端的多半都有过这种经历接手一个老项目打开页面源码一看文件头赫然写着!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01 Transitional//EN再往下翻是各种font、table布局甚至还有marquee滚动字幕。第一次见这种代码的年轻同事可能会懵这玩意儿是啥怎么这么老气这就是 html4一个在 1997 年发布、1999 年才定稿的标记语言标准。虽然 W3C 早在 2018 年就把它正式标记为废弃Obsolete但你不得不承认它留下的东西至今还在我们的浏览器里运转——你今天写的!DOCTYPE html、用的input、textarea、select表单控件甚至 CSS 的盒模型思想底层全是 html4 那个时代打下的底子。这篇博文我不想聊太虚的“历史意义”我就以一线开发者的视角把 html4 到底干了什么、为什么被取代、以及今天还能怎么用、老项目怎么迁掰开揉碎讲清楚。哪怕你是个刚入行的新人看完也能对这段“上古代码”有个通透的理解。1. html4 到底给 Web 带来了什么1.1 从 HTML 3.2 到 HTML 4.0 的猛进要理解 html4得先看它出生前是个什么光景。1997 年之前HTML 3.2 是主流那会儿的网页基本就是“文档”标签少得可怜结构全靠p、h1这种最基础的元素撑场面样式直接写在标签里比如font colorred。网页想要好看一点就得靠表格拼拼凑凑没有任何“语义”可言。1997 年 12 月HTML 4.0 发布1999 年 12 月 HTML 4.01 定稿。这一版最大的变化是明确了文档结构和表现样式分离的思想。它引入了div、span这类无语义但极具扩展性的结构标签同时把font这类纯表现标签打入冷宫W3C 给出的建议是“样式用 CSS 写”。别看这事在今天稀松平常在当时是个不小的观念冲击。我打个比方HTML 3.2 时代做网页就像在纸上手写一封信字体大小、颜色、换行都是你一笔一笔画出来的html4 时代则变成了先写内容草稿再用一套统一的排版规范去套用格式内容和样式解耦改一个地方全站都能跟着变。html4 还引入了一个关键概念——文档的三种定义Strict严格、Transitional过渡、Frameset框架集。简单来说严格模式禁止所有表现性标签要求标签必须正确嵌套过渡模式允许保留font等老标签方便老网站平滑升级框架集模式则专门用于实现框架结构。这个“方言”体系让 Web 第一次有了“标准合规”的意识。1.2 核心设计文档结构、样式与脚本的三权分立html4 最大的架构贡献是确立了“结构、样式、行为”三位一体的分层模型。结构由 HTML 负责样式交给 CSS交互行为则用 JavaScript 实现。这个模型至今仍然是所有前端框架的底层逻辑。打个比方这就好比做饭HTML 是食材CSS 是摆盘和调味JavaScript 是烹饪火候。html4 之前这三者是混在一起的——所有东西都堆在 HTML 文件里就像一锅乱炖你想单独调整某个口味根本无从下手。html4 之后食材归食材、调味归调味、火候归火候各管各的这是 Web 开发走向工程化的起点。也正因为这个设计html4 才有了真正意义上的ID 和 Class 属性语义化使用。以前 class 主要给 CSS 当钩子id 则是给锚点跳转用的。html4 把这两个属性提升到了“文档结构标记”的高度为后来的 DOM 操作和 JavaScript 选择器铺平了道路。今天你用getElementById或者querySelector写任何一行前端代码源头都能在 html4 的标准文档里找到影子。1.3 快被遗忘但很超前的表单与可访问性设计html4 在表单方面的改进远比很多人印象中的要丰富。它的表单模型引入了label标签用于关联表单控件说明文字引入了fieldset和legend用于把相关字段分组还规范了input的各种 typetext、password、checkbox、radio、submit、reset、file 等和textarea、select的标准行为。这些表单控件的交互约定至今依然是浏览器兼容性的基石。我今天写一个登录页仍然用的是input typetext和input typepassword和 1999 年没有任何区别。你可以说 html4 老但它的表单设计足够稳稳到过了二十多年都没有被推翻。可访问性对很多前端新人来说是这两年才在需求文档里频繁出现的词但 html4 提出的accesskey键盘快捷键、tabindexTab 导航顺序设计就是早期 Web 可访问性实践的雏形。它在 1997 年就要求网页在无鼠标环境下也能操作这种考虑放到现在看依然很有前瞻性。虽然当时实现有限但思路没错网页不只是给“看得见、用鼠标”的人用的。2. 深入拆解html4 那些至今仍在影响你的技术设计2.1 DOCTYPE 和浏览器模式的源头每一个前端都写过!DOCTYPE html但很多人不知道这行“魔法声明”其实是从 html4 时代开始被赋予特殊使命的。html4 定义了三种 DOCTYPE分别对应前面说的 Strict、Transitional、Frameset 三种文档类型。这个声明不仅告诉解析器“这是标准文档”还直接触发了浏览器的“标准模式/怪异模式Quirks Mode”切换机制。举个例子老 IE 在没有 DOCTYPE 时进入怪异模式盒模型用的是 IE 那种“width 包含 padding 和 border”的算法声明了 DOCTYPE 之后进入标准模式盒模型才符合 W3C 规范。多少老前端当年被这个盒模型差异逼得差点砸电脑而这一切的根源就是 DOCTYPE 背后那套模式选择机制。今天你用!DOCTYPE html是 HTML5 简化后的写法它的作用同样是触发标准模式。可以说你只要写网页就生活在 html4 时代设计的这套解析规则之中哪怕你对此毫无察觉。2.2 表格布局的泛滥与自我救赎html4 时代最知名的“坏味道”恐怕就是表格布局了。由于 CSS 在当时还不够成熟尤其是浮动和定位的支持远没有后来那么完善开发者发现table自带的行列对齐能力简直是天然的布局工具。于是大量网站用嵌套表格来搭页面骨架有的页面甚至嵌套了七八层table。表格布局的体验有多酸爽改一个像素可能牵动外层所有嵌套表格的结构渲染一个页面浏览器要等整个表格的结构信息都齐了才会开始画网速慢的年代打开一个表格页能让你盯着白屏怀疑人生。而且对屏幕阅读器来说表格布局的页面就像是一段读不通的散文。我们做项目时说过一百遍“表格纯粹害人”但严格来说html4 本身并没“鼓励”表格布局它只是没提供更好的工具。CSS 在那时还太弱Flexbox 和 Grid 更是想都不敢想。直到 HTML5 时代 CSS 布局能力真正成熟表格才算彻底回归它“展示数据”的本职。所以现在你看到老代码里一堆table与其吐槽开发者水平不如理解那是时代局限下的最优解。2.3 严格模式与过渡模式的“方言”体系严格模式和过渡模式的分治是 html4 很值得琢磨的一个设计。它的本意是好的给新站点一条康庄大道Strict给老站点一条平滑升级的过渡路径Transitional。老站点可以继续用font、center同时逐步把表现性标签替换成 CSS。但这个设计也埋了个坑——因为过渡模式太宽松大多数开发者都选择了“自己省事”的 Transitional导致真正遵守 Strict 标准的网站寥寥无几。可以说html4 在标准落实这件事上有点“心有余而力不足”它把规范的旗帜插在了山顶但大部队还懒散在山脚下。这个教训影响深远它让 HTML5 的设计者痛定思痛直接砍掉所有表现性标签把所有“方言”统一成一套标准。HTML5 只有一个 DOCTYPE目的就是把以前“说一套做一套”的空间彻底堵死。2.4 iframe 与框架集被淘汰的“页面套娃”html4 时代很流行一种做法用frameset把浏览器窗口切成几块顶部是导航栏、左边是目录、右边是内容区点左边链接右边内容变化从而实现“局部刷新”。听起来是不是有点 SPA单页应用的雏形但实际体验差距很大。frameset的问题一眼就能看出来URL 不会随内容变化、刷新后回到初始状态、没法被搜索引擎索引子页面、每个框架都在地址栏留下独立的历史记录。这玩意儿在 SEO 和可用性上几乎是个灾难。后来 html4 又定义了iframe内联框架允许在页面内部嵌入独立文档但它同样有性能、安全和可访问性的问题。虽然 frameset 被 HTML5 正式废弃了iframe 却顽强地活了下来至今仍用于嵌入视频、地图、第三方支付页面。你看到的很多网站顶部广告、弹窗里的网页依然是 iframe 在干活。框架集是死了但“嵌入另一个文档”这个思路从未消失过。3. 为什么会被 html5 取代解码与继承3.1 三个致命短板html4 统治了 Web 将近十年但到了 2004 年前后它的短板越来越遮不住第一个短板是结构语义不够用。html4 的标签始终停留在“文档”层面没有header、footer、nav、article、section这些区域划分标签。开发者只能用div idheader这种方式自己约定脑补语义导致不同网站的 class 命名五花八门缺乏统一认知。模块化、组件化的前端理念开始萌芽时html4 这套词汇就显得格外寒酸。第二个短板是表单能力太弱。当时做日期选择要用 JavaScript 插件做邮箱校验要手写正则繁复又容易出错。开发者需要一个原生就能校验、自带日历、有范围限制的表单体系html4 无法提供。第三个短板是多媒体体验糟糕。那时候想在网页里放视频基本靠 Flash 插件。而 Flash 的封闭性、安全性、性能问题一直困扰全行业。html4 没有原生audio、video标签连个基本的画布绘图能力都没有。3.2 XHTML 1.0一次偏执的“矫正”在 HTML5 出来之前W3C 曾经试图用 XHTML 1.0 来“修正”html4XHTML 本质上是把 html4 重新用 XML 语法包装了一遍要求所有标签必须闭合、属性必须小写、属性值必须加引号。听起来很美好但问题在于 XHTML 选择了一条“严格到偏执”的路线任何一个小错误都会直接导致页面无法渲染。回头来看XHTML 的失败在于它违背了 HTML 宽容的基因。HTML 从诞生起就是个“差不多先生”——标签不闭合也能用大小写混乱也能看浏览器总能在出错时尽量猜出你的本意。XHTML 却非要走“非黑即白”的 XML 路线像要求一个随性的人突然变成严苛的档案管理员反抗自然激烈。更重要的是XHTML 并没有在语义和功能上带来任何实质进步它只是把旧瓶换了新标签。HTML5 的团队吸取了这个教训与其用 XML 语法惩罚开发者不如把精力放在增加真实有用的功能。这个决策最终让 HTML5 全面胜出也彻底终结了 XHTML 这条支线。3.3 从 html4 到 HTML5 的平滑迁移虽然 HTML5 在 2014 年正式定稿但它的设计从一开始就考虑了兼容老页面——HTML5 的解析器被要求必须能“读”所有 html4 时代的标签哪怕是早已废弃的font、center也得能容错渲染。这意味着你今天用浏览器打开一个 1999 年的老页面基本还能看这是向后兼容性的胜利。HTML5 也没有立即废除 html4 的经典语义而是选择了继承与扩展。比如 html4 的input typetext被 HTML5 扩展成input typeemail、input typenumber、input typedate等一系列专用类型html4 的通用块级容器div被拆分成header、section、article等语义化标签html4 的meta http-equivContent-Type contenttext/html; charsetutf-8被简写成meta charsetutf-8。我经常跟新同事说去读一遍 html4 的规范你才能明白 HTML5 里很多设计“为什么是现在这个样子”。input的pattern属性继承自 html4 时代表单校验的痛点> HTML4深度解析：网页标准的历史基石与老项目迁移实战
咱们做前端的多半都有过这种经历接手一个老项目打开页面源码一看文件头赫然写着!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01 Transitional//EN再往下翻是各种font、table布局甚至还有marquee滚动字幕。第一次见这种代码的年轻同事可能会懵这玩意儿是啥怎么这么老气这就是 html4一个在 1997 年发布、1999 年才定稿的标记语言标准。虽然 W3C 早在 2018 年就把它正式标记为废弃Obsolete但你不得不承认它留下的东西至今还在我们的浏览器里运转——你今天写的!DOCTYPE html、用的input、textarea、select表单控件甚至 CSS 的盒模型思想底层全是 html4 那个时代打下的底子。这篇博文我不想聊太虚的“历史意义”我就以一线开发者的视角把 html4 到底干了什么、为什么被取代、以及今天还能怎么用、老项目怎么迁掰开揉碎讲清楚。哪怕你是个刚入行的新人看完也能对这段“上古代码”有个通透的理解。1. html4 到底给 Web 带来了什么1.1 从 HTML 3.2 到 HTML 4.0 的猛进要理解 html4得先看它出生前是个什么光景。1997 年之前HTML 3.2 是主流那会儿的网页基本就是“文档”标签少得可怜结构全靠p、h1这种最基础的元素撑场面样式直接写在标签里比如font colorred。网页想要好看一点就得靠表格拼拼凑凑没有任何“语义”可言。1997 年 12 月HTML 4.0 发布1999 年 12 月 HTML 4.01 定稿。这一版最大的变化是明确了文档结构和表现样式分离的思想。它引入了div、span这类无语义但极具扩展性的结构标签同时把font这类纯表现标签打入冷宫W3C 给出的建议是“样式用 CSS 写”。别看这事在今天稀松平常在当时是个不小的观念冲击。我打个比方HTML 3.2 时代做网页就像在纸上手写一封信字体大小、颜色、换行都是你一笔一笔画出来的html4 时代则变成了先写内容草稿再用一套统一的排版规范去套用格式内容和样式解耦改一个地方全站都能跟着变。html4 还引入了一个关键概念——文档的三种定义Strict严格、Transitional过渡、Frameset框架集。简单来说严格模式禁止所有表现性标签要求标签必须正确嵌套过渡模式允许保留font等老标签方便老网站平滑升级框架集模式则专门用于实现框架结构。这个“方言”体系让 Web 第一次有了“标准合规”的意识。1.2 核心设计文档结构、样式与脚本的三权分立html4 最大的架构贡献是确立了“结构、样式、行为”三位一体的分层模型。结构由 HTML 负责样式交给 CSS交互行为则用 JavaScript 实现。这个模型至今仍然是所有前端框架的底层逻辑。打个比方这就好比做饭HTML 是食材CSS 是摆盘和调味JavaScript 是烹饪火候。html4 之前这三者是混在一起的——所有东西都堆在 HTML 文件里就像一锅乱炖你想单独调整某个口味根本无从下手。html4 之后食材归食材、调味归调味、火候归火候各管各的这是 Web 开发走向工程化的起点。也正因为这个设计html4 才有了真正意义上的ID 和 Class 属性语义化使用。以前 class 主要给 CSS 当钩子id 则是给锚点跳转用的。html4 把这两个属性提升到了“文档结构标记”的高度为后来的 DOM 操作和 JavaScript 选择器铺平了道路。今天你用getElementById或者querySelector写任何一行前端代码源头都能在 html4 的标准文档里找到影子。1.3 快被遗忘但很超前的表单与可访问性设计html4 在表单方面的改进远比很多人印象中的要丰富。它的表单模型引入了label标签用于关联表单控件说明文字引入了fieldset和legend用于把相关字段分组还规范了input的各种 typetext、password、checkbox、radio、submit、reset、file 等和textarea、select的标准行为。这些表单控件的交互约定至今依然是浏览器兼容性的基石。我今天写一个登录页仍然用的是input typetext和input typepassword和 1999 年没有任何区别。你可以说 html4 老但它的表单设计足够稳稳到过了二十多年都没有被推翻。可访问性对很多前端新人来说是这两年才在需求文档里频繁出现的词但 html4 提出的accesskey键盘快捷键、tabindexTab 导航顺序设计就是早期 Web 可访问性实践的雏形。它在 1997 年就要求网页在无鼠标环境下也能操作这种考虑放到现在看依然很有前瞻性。虽然当时实现有限但思路没错网页不只是给“看得见、用鼠标”的人用的。2. 深入拆解html4 那些至今仍在影响你的技术设计2.1 DOCTYPE 和浏览器模式的源头每一个前端都写过!DOCTYPE html但很多人不知道这行“魔法声明”其实是从 html4 时代开始被赋予特殊使命的。html4 定义了三种 DOCTYPE分别对应前面说的 Strict、Transitional、Frameset 三种文档类型。这个声明不仅告诉解析器“这是标准文档”还直接触发了浏览器的“标准模式/怪异模式Quirks Mode”切换机制。举个例子老 IE 在没有 DOCTYPE 时进入怪异模式盒模型用的是 IE 那种“width 包含 padding 和 border”的算法声明了 DOCTYPE 之后进入标准模式盒模型才符合 W3C 规范。多少老前端当年被这个盒模型差异逼得差点砸电脑而这一切的根源就是 DOCTYPE 背后那套模式选择机制。今天你用!DOCTYPE html是 HTML5 简化后的写法它的作用同样是触发标准模式。可以说你只要写网页就生活在 html4 时代设计的这套解析规则之中哪怕你对此毫无察觉。2.2 表格布局的泛滥与自我救赎html4 时代最知名的“坏味道”恐怕就是表格布局了。由于 CSS 在当时还不够成熟尤其是浮动和定位的支持远没有后来那么完善开发者发现table自带的行列对齐能力简直是天然的布局工具。于是大量网站用嵌套表格来搭页面骨架有的页面甚至嵌套了七八层table。表格布局的体验有多酸爽改一个像素可能牵动外层所有嵌套表格的结构渲染一个页面浏览器要等整个表格的结构信息都齐了才会开始画网速慢的年代打开一个表格页能让你盯着白屏怀疑人生。而且对屏幕阅读器来说表格布局的页面就像是一段读不通的散文。我们做项目时说过一百遍“表格纯粹害人”但严格来说html4 本身并没“鼓励”表格布局它只是没提供更好的工具。CSS 在那时还太弱Flexbox 和 Grid 更是想都不敢想。直到 HTML5 时代 CSS 布局能力真正成熟表格才算彻底回归它“展示数据”的本职。所以现在你看到老代码里一堆table与其吐槽开发者水平不如理解那是时代局限下的最优解。2.3 严格模式与过渡模式的“方言”体系严格模式和过渡模式的分治是 html4 很值得琢磨的一个设计。它的本意是好的给新站点一条康庄大道Strict给老站点一条平滑升级的过渡路径Transitional。老站点可以继续用font、center同时逐步把表现性标签替换成 CSS。但这个设计也埋了个坑——因为过渡模式太宽松大多数开发者都选择了“自己省事”的 Transitional导致真正遵守 Strict 标准的网站寥寥无几。可以说html4 在标准落实这件事上有点“心有余而力不足”它把规范的旗帜插在了山顶但大部队还懒散在山脚下。这个教训影响深远它让 HTML5 的设计者痛定思痛直接砍掉所有表现性标签把所有“方言”统一成一套标准。HTML5 只有一个 DOCTYPE目的就是把以前“说一套做一套”的空间彻底堵死。2.4 iframe 与框架集被淘汰的“页面套娃”html4 时代很流行一种做法用frameset把浏览器窗口切成几块顶部是导航栏、左边是目录、右边是内容区点左边链接右边内容变化从而实现“局部刷新”。听起来是不是有点 SPA单页应用的雏形但实际体验差距很大。frameset的问题一眼就能看出来URL 不会随内容变化、刷新后回到初始状态、没法被搜索引擎索引子页面、每个框架都在地址栏留下独立的历史记录。这玩意儿在 SEO 和可用性上几乎是个灾难。后来 html4 又定义了iframe内联框架允许在页面内部嵌入独立文档但它同样有性能、安全和可访问性的问题。虽然 frameset 被 HTML5 正式废弃了iframe 却顽强地活了下来至今仍用于嵌入视频、地图、第三方支付页面。你看到的很多网站顶部广告、弹窗里的网页依然是 iframe 在干活。框架集是死了但“嵌入另一个文档”这个思路从未消失过。3. 为什么会被 html5 取代解码与继承3.1 三个致命短板html4 统治了 Web 将近十年但到了 2004 年前后它的短板越来越遮不住第一个短板是结构语义不够用。html4 的标签始终停留在“文档”层面没有header、footer、nav、article、section这些区域划分标签。开发者只能用div idheader这种方式自己约定脑补语义导致不同网站的 class 命名五花八门缺乏统一认知。模块化、组件化的前端理念开始萌芽时html4 这套词汇就显得格外寒酸。第二个短板是表单能力太弱。当时做日期选择要用 JavaScript 插件做邮箱校验要手写正则繁复又容易出错。开发者需要一个原生就能校验、自带日历、有范围限制的表单体系html4 无法提供。第三个短板是多媒体体验糟糕。那时候想在网页里放视频基本靠 Flash 插件。而 Flash 的封闭性、安全性、性能问题一直困扰全行业。html4 没有原生audio、video标签连个基本的画布绘图能力都没有。3.2 XHTML 1.0一次偏执的“矫正”在 HTML5 出来之前W3C 曾经试图用 XHTML 1.0 来“修正”html4XHTML 本质上是把 html4 重新用 XML 语法包装了一遍要求所有标签必须闭合、属性必须小写、属性值必须加引号。听起来很美好但问题在于 XHTML 选择了一条“严格到偏执”的路线任何一个小错误都会直接导致页面无法渲染。回头来看XHTML 的失败在于它违背了 HTML 宽容的基因。HTML 从诞生起就是个“差不多先生”——标签不闭合也能用大小写混乱也能看浏览器总能在出错时尽量猜出你的本意。XHTML 却非要走“非黑即白”的 XML 路线像要求一个随性的人突然变成严苛的档案管理员反抗自然激烈。更重要的是XHTML 并没有在语义和功能上带来任何实质进步它只是把旧瓶换了新标签。HTML5 的团队吸取了这个教训与其用 XML 语法惩罚开发者不如把精力放在增加真实有用的功能。这个决策最终让 HTML5 全面胜出也彻底终结了 XHTML 这条支线。3.3 从 html4 到 HTML5 的平滑迁移虽然 HTML5 在 2014 年正式定稿但它的设计从一开始就考虑了兼容老页面——HTML5 的解析器被要求必须能“读”所有 html4 时代的标签哪怕是早已废弃的font、center也得能容错渲染。这意味着你今天用浏览器打开一个 1999 年的老页面基本还能看这是向后兼容性的胜利。HTML5 也没有立即废除 html4 的经典语义而是选择了继承与扩展。比如 html4 的input typetext被 HTML5 扩展成input typeemail、input typenumber、input typedate等一系列专用类型html4 的通用块级容器div被拆分成header、section、article等语义化标签html4 的meta http-equivContent-Type contenttext/html; charsetutf-8被简写成meta charsetutf-8。我经常跟新同事说去读一遍 html4 的规范你才能明白 HTML5 里很多设计“为什么是现在这个样子”。input的pattern属性继承自 html4 时代表单校验的痛点>