需将HTML5代码降级为HTML4兼容版本：一、语义标签全换为div+class；二、表单控件降级为type="text"并用JS补验证；三、DOCTYPE改为HTML4.01 Strict，meta用http-equiv声明编码；四、SVG/Canvas替换为PNG或excanvas.js；五、移除data-*、contenteditable等HTML5属性，事件改用onload或doScroll。
如果您需要将 HTML5 代码适配为能在仅支持 HTML4 的旧浏览器（如 IE6–IE8）中正常渲染和运行的版本，则需移除 HTML5 特有语义元素、API 和语法特性，并替换为 HTML4 所允许的等效结构。以下是执行此转换的具体步骤：
一、替换 HTML5 语义化标签为 div + class
HTML4 不识别 <header>、<nav>、<section>、<article>、<aside>、<footer> 等语义标签，必须用 <div> 标签配合 class 属性模拟其结构与含义。
1、将所有 <header> 标签替换为 <div class="header">，并闭合为 </div>。
2、将所有 <nav> 标签替换为 <div class="nav">，并闭合为 </div>。
立即学习“前端免费学习笔记（深入）”；
3、将所有 <section> 标签替换为 <div class="section">，并闭合为 </div>。
4、将所有 <article> 标签替换为 <div class="article">，并闭合为 </div>。
5、将所有 <aside> 标签替换为 <div class="aside">，并闭合为 </div>。
6、将所有 <footer> 标签替换为 <div class="footer">，并闭合为 </div>。
二、移除或降级 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、将 <input type="search"> 替换为 <input type="text" name="q">，并确保 name 值与后端接收字段一致。
5、将 <input type="range"> 替换为 <select> 下拉菜单或带 hidden input 的滑块模拟组件（需额外 JS 支持）。
三、处理 HTML5 文档类型与字符编码声明
HTML4 严格要求 DOCTYPE 声明符合 SGML DTD 规范，且 meta charset 必须使用 http-equiv 语法，否则部分旧浏览器无法正确解析编码。
1、将 <!DOCTYPE html> 替换为 HTML4.01 Strict 的 DOCTYPE：<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">。
2、将 <meta charset="UTF-8"> 替换为 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">。
3、确保 <html> 标签显式添加 lang 属性，如 <html lang="zh-CN">，以满足 HTML4 对语言声明的要求。
四、替换 HTML5 内联 SVG 和 Canvas 为兼容方案
HTML4 浏览器（尤其是 IE6–IE8）不支持 <svg> 和 <canvas> 标签，需用 PNG/SWF 或 VML（Vector Markup Language）替代矢量图形渲染。
1、将所有 <svg> 块整体移除，替换为 <img src="graphic.png" alt="描述文字">。
2、对简单图标，使用 CSS background-image + span 替代 inline SVG 图标。
3、将 <canvas> 标签替换为 <div id="canvas-fallback"></div>，并在页面底部引入 excanvas.js（仅 IE6–IE8 兼容的 canvas 模拟库）。
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 检测方案。
