pr、font、center等标签未被HTML5规范收录，属废弃标签，需用语义化标签（如p、span）和CSS替代，并通过W3C Validator验证嵌套合法性与语义结构。

pr、font、center 这类标签不是“老但能用”，而是根本没被 HTML5 规范收录——浏览器不认，屏幕阅读器跳过，SEO 不解析，改的时候别只想着替换字符串。

为什么 pr 会直接被浏览器忽略甚至报错

它压根不是标准标签，W3C 文档里查不到。浏览器遇到 pr，通常当未知元素丢弃语义；有些引擎会把整个 <pr>Hello</pr><pr>World</pr> 渲染成连续文本，段落间距、CSS 样式、无障碍支持全失效。

典型现象包括：Element pr not allowed as child of element body in this context 控制台报错；pr 上写的 margin 或 color 完全不生效；用 VoiceOver 读页面时直接跳过这些内容。

• 别用正则全局替换 <pr>(.*?)</pr> → <p>$1</p> <p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p> 就完事——得看上下文：如果 pr 原本在 <li> 里，换成 <p></p><div class="aritcle_card flexRow"> <div class="artcardd flexRow"> <a class="aritcle_card_img" href="/xiazai/skill5493" title="html-to-pptx"><img src="https://img.php.cn/upload/skill/000/000/081/179051045119472.jpg" alt="html-to-pptx" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a href="/xiazai/skill5493" title="html-to-pptx">html-to-pptx</a> <p>将多页 HTML 演示文稿转换为美化的 PPTX 文件，便于分享和分发。</p> </div> <a href="/xiazai/skill5493" title="html-to-pptx" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div> 就违反嵌套规则（p 不能是 li 的子元素）
• 如果只是想换行，不用任何标签，改用

  <br>

  ；<p></p> 表示语义段落，不是视觉折行工具
• 地址、联系方式这类短语组，更适合用 <address></address> 或 <div class="contact-info"> + 语义类名，而不是硬套 <code><p></p>

  font 和 center 怎么安全替换成现代写法

  它们不是“过时”，而是已被移出规范，连浏览器兼容表都标记为 “Deprecated”。直接删掉再补 CSS 是最稳妥的路径，但要注意旧样式依赖。

  • <font color="red" size="4">错误提示</font> → 改成 <span class="error-text">错误提示</span>，并加 role="alert" 提供可访问性上下文
  • <center>标题</center> → 改成 <h2 class="text-center">标题</h2>，CSS 里用 text-align: center 控制，避免影响语义层级
  • 所有替换必须同步更新 CSS：如果原样式是 font[color="red"]，新规则得补上 .error-text；否则页面立刻崩
  • 禁用 !important 强覆盖旧样式——它会掩盖真实结构问题，后续维护更难

  HTMLHint 怎么提前揪出这类废弃标签

  靠肉眼或 DevTools 查漏效率太低。HTMLHint 能在保存时就报错，关键是配对规则。

  • 开 "unknown-tag": true：命中所有未注册标签，pr、txt、row 全部拦截
  • 开 "tagname-lowercase": true：防止你写成 <font></font> 还以为合法
  • 关掉 "attr-no-duplication" 这类对老旧模板过于严苛的规则——ASP/PHP 动态生成的重复 id 是已知限制，先标记再评估
  • .htmlhintrc 放项目根目录，VS Code 装 HTMLHint 插件后规则立即生效，错误标在行尾，右键可扫整个目录

  修复后必须验证的两个盲点

  改完 pr→p、font→span 不代表结束。浏览器自动修复 DOM 会掩盖真实问题，W3C Validator 才暴露真相。

  • 检查是否误把 pr 替换进 <td> 或 <code><li> 里：<p></p> 在表格单元格中是非法子元素，W3C 会报 Element p not allowed as child of element td
  • 确认没把 <p></p> 塞进 <span></span> 或 <a></a> 这类内联元素里——浏览器会自动拆解 DOM，导致结构错乱，但控制台不报错
  • 别只看 DevTools 里的渲染后 DOM；提交原始 HTML 源码到 W3C Validator，它能指出浏览器“悄悄修好”但实际违规的地方

  最麻烦的不是改标签，而是改完后要重新验证语义层级和嵌套合法性——这点很容易被跳过。