html5中标签已被彻底移除，语法无效，现代浏览器直接忽略或触发怪异模式；应改用css grid/flexbox布局配合语义化标签或替代。

为什么<center></center>一用就报错

浏览器不会直接报错，但现代编辑器（如 VS Code）和构建工具（如 HTMLHint）会标红警告，因为 <center></center> 在 HTML5 中是 obsolete 特性，W3C 明确禁止在新项目中使用。它不语义、不可访问、无法被屏幕阅读器正确解析，且与 CSS 分离原则冲突。

常见错误现象：

• VS Code 提示 “The element center is obsolete”
• HTMLHint 报 W027: The <center> element is obsolete</center>
• 用 <center></center> 包裹 <div> 时，内容不居中——因为 <code><center></center> 只对行内内容有效，对块级元素无效

  替代方案按场景选：

  • 文字或图片居中：给父容器加 text-align: center
  • 单个块级元素（如 <div>、<code><section></section>）水平居中：设 margin: 0 auto + 显式 width 或 max-width
  • 全面居中（含垂直）：父容器用 display: flex; justify-content: center; align-items: center
  • 绝对定位居中（慎用）：需同时写 top: 50%、left: 50% 和 transform: translate(-50%, -50%)

  <font></font> 和 <basefont> 为什么不能简单替换为 style 属性

  能用 style 属性临时改，但不推荐——这不是废弃与否的问题，而是可维护性断层。HTML 中写 style="color:red;font-size:18px" 本质仍是“把样式塞进结构”，和 <font></font> 同属表现侵入，违背分离原则。

  真正该做的是抽离为 CSS 类：

  
  Html2md
  使用 Readability + Turndown 将 HTML 页面转换为干净的、Agent 友好的 Markdown。去除导航栏、广告、页脚、Cookie 横幅、社交按钮等干扰元素。支持 URL...
  下载
  • <font color="red" size="4"></font> → 改用 <p class="headline"></p> + .headline { color: #d32f2f; font-size: 1.25rem; }
  • <basefont face="Arial"> → 改为在 或根元素上设 font-family: Arial, sans-serif
  • 注意：size="4" 没有固定像素映射，不同浏览器解释不一；CSS 中应基于相对单位（em、rem）或响应式函数（clamp()）控制字号

  哪些废弃标签连“还能用”都不成立

  不是所有废弃标签都还被浏览器宽容支持。<applet></applet>、<bgsound></bgsound>、<marquee></marquee>、<blink></blink> 这类已彻底失效：

  • <applet></applet>：现代浏览器默认禁用 Java 插件，无任何 fallback 行为
  • <bgsound></bgsound>：仅 IE 支持，Chrome/Firefox/Safari 完全忽略
  • <marquee></marquee>：虽部分浏览器仍渲染，但行为不一致（滚动速度、暂停逻辑），且无法用 CSS 精确模拟
  • <blink></blink>：Firefox 早已移除支持，其他主流浏览器从未实现

  它们没有“渐进降级”路径，必须用现代方案重写：

  • <applet></applet> → <canvas></canvas> 或 <svg></svg> + JS
  • <bgsound></bgsound> → <audio></audio> + autoplay 和 loop（注意自动播放策略限制）
  • <marquee></marquee> → CSS @keyframes + animation，或 JS 控制滚动容器偏移

  旧项目里还有 <frameset></frameset>，现在怎么救

  <frameset></frameset> 不只是废弃，它是 HTML5 完全不识别的语法。浏览器解析时会直接忽略整个 <frameset></frameset> 块，退回到 渲染——结果往往是导航栏和内容堆叠在一起，完全错乱。

  迁移关键不是“模拟框架”，而是重构布局逻辑：

  • 用 <header></header> + <nav></nav> 替代顶部/左侧 frame，用 <main></main> 替代主内容 frame
  • 垂直分栏用 CSS Grid：grid-template-rows: 60px 1fr 比 rows="60,*" 更可控，且支持 @media 断点重排
  • 局部滚动不能靠 scrolling="auto"，得给对应容器设固定高度 + overflow-y: auto
  • 跨 frame 跳转（如 <a target="main"></a>）必须改为 JS 控制：监听点击，用 fetch() 加载内容到 <main></main>，或走前端路由

  最常被忽略的一点：<frameset></frameset> 下没有 ，所以旧 CSS 里写的 body { margin: 0 } 在新结构中可能失效——得检查所有全局样式是否还作用于正确根容器。