HTML4的<font>标签因语义缺失、渲染不一致且被HTML5废弃，必须替换为语义化标签+CSS；<center>和<u>也需按场景用CSS替代；DOCTYPE切换影响渲染模式；HTML5新标签提升可访问性但需正确使用。
HTML4 里 <font> 标签为什么必须删
它不光被 HTML5 彻底废弃，连浏览器都早就不保证渲染一致——Chrome 和 Firefox 对 <font color="red"> 的处理可能完全不同，更别说移动端 WebView。语义上它只干一件事：改文字样式，而这本该由 CSS 控制。
实操建议：
- 所有
<font>替换为带类名的<span>或语义化标签（如<em>、<strong>），再用 CSS 控制颜色/大小/字体 - 批量替换时注意：
<font size="+2">这种相对尺寸没有直接等价 CSS，得转成font-size: 1.5em这类相对单位，而非硬写px - 老项目里如果还依赖
<font>的 JS 操作（比如document.getElementsByTagName('font')），必须同步改脚本，否则运行时报undefined
<center> 和 <u> 的现代等效写法
这两个标签在 HTML5 中同样被移除，但它们的“替代方案”不是一一映射，而是按场景拆解：
常见错误现象：直接用 text-align: center 给 <div> 加居中，结果整块内容（包括子元素内联盒）全挤一起；或者用 text-decoration: underline 给链接加下划线，反而覆盖了默认的可访问性提示。
立即学习“前端免费学习笔记（深入）”；
实操建议：
-
<center>→ 优先用margin: 0 auto配合固定宽容器实现水平居中；块级居中用display: flex+justify-content: center；避免无差别套text-align: center -
<u>→ 仅在确实需要“非链接下划线”时用text-decoration: underline，且务必加text-underline-offset微调位置（防止贴底），并确保对比度满足 WCAG 1.4.1 - 特别注意：
<u>在旧 IE 中会触发 hasLayout，在现代 CSS 中已无此副作用，但若项目还要兼容 IE11，得补vertical-align: baseline防止行高错乱
DOCTYPE 切到 <!DOCTYPE html> 后的隐性变化
表面只是改一行声明，实际触发的是整个渲染模式切换：从怪异模式（Quirks Mode）切到标准模式（Standards Mode）。影响远不止盒模型，还包括表单控件默认样式、getBoundingClientRect() 返回值精度、甚至 document.write() 的执行时机。
实操建议：
- 切完 DOCTYPE 立即检查：表格边框是否变细、
padding是否突然不生效、height: 100%是否失效——这些八成是旧代码依赖了怪异模式下的盒模型或继承行为 - 老项目中常见
<table width="100%">写法，在标准模式下会被忽略，必须补 CSS：table { width: 100%; } - 如果用了 jQuery 1.x，注意其
.offset()在不同模式下计算逻辑不同，升级前先跑一遍 DOM 偏移相关测试用例
HTML5 新标签不是“必须用”，但 <section> 和 <article> 会影响屏幕阅读器
不用它们不会报错，但跳过语义结构会让辅助技术丢失上下文。比如一个新闻列表页，全用 <div> 套，NVDA 就无法区分“这是主文章”还是“这是侧边推荐”。
实操建议：
-
<section>不等于“分块视觉区域”，它代表有标题的独立主题内容；没<h2>–<h6>就别硬套<section> -
<article>适用于能单独分发的内容（博客、评论、新闻稿），不是所有卡片都算 article；误用会导致 RSS 抓取或搜索引擎摘要异常 - 最易忽略的一点：旧版 IE8 及以下不识别新语义标签，若仍需支持，必须用
document.createElement('article')注册，且 CSS 中要显式声明display: block
width=100、靠 <center> 堆出来的布局、以及 JS 直接操作 <font> 节点的逻辑——它们不会报错，但会在某个深夜的 Chrome 更新后集体失灵。 
