标签配合 class 属性模拟其结构与含义。
1、将所有
2、将所有
立即学习“前端免费学习笔记(深入)”;
3、将所有
4、将所有 标签替换为 ,并闭合为
。
5、将所有
6、将所有
二、移除或降级 HTML5 表单控件与属性
HTML4 不支持 type="email"、type="date"、required、placeholder 等原生表单增强特性,需用传统 input type="text" 配合 JavaScript 或服务端验证替代。
1、将所有 type="email"、type="url"、type="number"、type="date" 等值统一改为 type="text"。
2、删除所有 required 属性,改由 JavaScript 或服务端逻辑校验必填项。
3、删除 placeholder 属性,改用 JavaScript 在 focus/blur 时动态控制输入框内默认文字。
4、将 替换为 ,并确保 name 值与后端接收字段一致。
5、将 替换为
三、处理 HTML5 文档类型与字符编码声明
HTML4 严格要求 DOCTYPE 声明符合 SGML DTD 规范,且 meta charset 必须使用 http-equiv 语法,否则部分旧浏览器无法正确解析编码。
1、将 a style="color:#f60; text-decoration:underline;" title= "html"href="https://www.php.cn/zt/15763.html" target="_blank">html> 替换为 HTML4.01 Strict 的 DOCTYPE:。
2、将 替换为 。
3、确保 标签显式添加 lang 属性,如 ,以满足 HTML4 对语言声明的要求。
四、替换 HTML5 内联 SVG 和 Canvas 为兼容方案
HTML4 浏览器(尤其是 IE6–IE8)不支持 svg> 和
1、将所有
2、对简单图标,使用 CSS background-image + span 替代 inline SVG 图标。
3、将
4、在 script 中检测 window.CanvasRenderingContext2D 是否存在,若不存在则加载 fallback 渲染逻辑。
5、禁用所有直接调用 canvas.getContext('2d') 的脚本,改用条件包装:if (canvas.getContext) { ... }。
五、修复 HTML5 新增全局属性与事件处理
HTML4 不识别 data-* 自定义属性、contenteditable、spellcheck、role 等属性,且部分事件(如 input、DOMContentLoaded)在旧浏览器中行为不一致,需标准化处理。
1、将所有 data-* 属性(如 data-id、data-url)移除,改用 class 名称编码或 hidden input 存储对应值。
2、将 contenteditable="true" 替换为 textarea 或 iframe 编辑区域,并绑定 keyup/mouseup 事件同步内容。
3、删除 spellcheck 属性,因 HTML4 浏览器无拼写检查能力,且该属性在 IE 中无效。
4、将 role="navigation"、role="main" 等 ARIA 属性全部删除,HTML4 无 ARIA 支持,且旧屏幕阅读器无法识别。
5、将 document.addEventListener('DOMContentLoaded', fn) 替换为 window.onload = fn 或使用 IE 兼容的 doScroll 检测方案。