<section>必须配h2～h6标题，否则语义断裂、可访问性受损；判断用section还是div的唯一标准是内容能否独立成文；避免滥用、错嵌、无标题或替代更具体语义标签。
为什么不能当用
因为浏览器和辅助技术会把 <section> 当作一个有独立主题、可被单独引用或分发的内容单元，不是视觉容器。错用会导致结构解析失败、SEO 权重分散、屏幕阅读器跳过整块内容。
-
<section> 必须自带标题（<h2>–<h6>），否则语义失效——没标题的 <section> 和 <div> 没区别，但更误导
- 常见误用：用
<section> 包裹整个用户列表，但每条记录才该是独立 <article>；或用它包搜索框、登录入口，这些应归入 <header> 或 <aside>
- 验证方法：在 Chrome DevTools 的「Accessibility」面板里看「Landmarks」，
<section> 会显示为“Section”，若大量无标题的 section 出现，说明语义已混淆
如何识别并替换废弃标签
<font>、<center>、<u>、<b> 这类标签在 HTML5 中已被弃用，它们只管样式、不表达含义，且与现代 CSS 和可访问性要求冲突。
-
<b> → 改用 <strong>（强调重要性）或 <span class="highlight">（纯视觉加粗）
-
<u> → 移除，下划线应由 CSS 控制（text-decoration: underline），否则会被屏幕阅读器误读为拼写错误
-
<font> 和 <center> 必须删，没有替代标签——全部交给 CSS 的 font-family、text-align 等属性处理
- 检查方式：全局搜索
<font、<center、<u>，再用 W3C Validator 提交 HTML，它会明确标出废弃标签位置
class/id 命名暴露语义混乱
当 class 名出现 div-header、section-wrapper、card-container-inner 这类词，本质是在补救语义缺失——HTML 结构本不该靠 class 来“解释”自己。
- 删掉所有带
-wrapper、-container、-box 的 class，它们是 <div> 泛滥的副产品
- 禁止用 class 模拟语义标签：比如
class="nav" 应直接换成 <nav>；class="main" 必须改为 <main>
- 命名统一用 kebab-case，且只描述内容本身（
user-profile-card），不描述布局（left-sidebar）、状态（active-item）或视觉（red-button）
DOM 深度超标时怎么定位冗余层
嵌套超过 6 层的 DOM 节点会显著拖慢渲染和 JS 查询速度，而问题往往藏在模板引擎输出或手写重复结构里。
立即学习“前端免费学习笔记（深入）”；
- 在 Chrome DevTools 的「Elements」面板中右键节点 → 「Break on」→ 「Attribute modifications」，观察哪些
<div> 是 JS 动态插入却没实际用途的
- 用
document.querySelectorAll('div').length 统计页面 div 总数，若 >150 且多数没 id/class，基本就是冗余
- 重点清理：CMS 模板里自动包裹的
<div class="field">、JS 渲染前的空占位 <div id="app"></div> 外又套一层 <div class="wrapper">
语义混淆不是写得不够多，而是每个标签都在回答“它是什么”，而不是“它看起来像什么”。最容易被忽略的是：删掉一个 <div> 后，如果发现 CSS 样式崩了，那问题不在 HTML，而在 CSS 过度依赖 class 名而非语义层级。
用
因为浏览器和辅助技术会把 <section> 当作一个有独立主题、可被单独引用或分发的内容单元，不是视觉容器。错用会导致结构解析失败、SEO 权重分散、屏幕阅读器跳过整块内容。
-
<section>必须自带标题（<h2>–<h6>），否则语义失效——没标题的<section>和<div>没区别，但更误导 - 常见误用：用
<section>包裹整个用户列表，但每条记录才该是独立<article>；或用它包搜索框、登录入口，这些应归入<header>或<aside> - 验证方法：在 Chrome DevTools 的「Accessibility」面板里看「Landmarks」，
<section>会显示为“Section”，若大量无标题的 section 出现，说明语义已混淆
如何识别并替换废弃标签
<font>、<center>、<u>、<b> 这类标签在 HTML5 中已被弃用，它们只管样式、不表达含义，且与现代 CSS 和可访问性要求冲突。
-
<b>→ 改用<strong>（强调重要性）或<span class="highlight">（纯视觉加粗） -
<u>→ 移除，下划线应由 CSS 控制（text-decoration: underline），否则会被屏幕阅读器误读为拼写错误 -
<font>和<center>必须删，没有替代标签——全部交给 CSS 的font-family、text-align等属性处理 - 检查方式：全局搜索
<font、<center、<u>，再用 W3C Validator 提交 HTML，它会明确标出废弃标签位置
class/id 命名暴露语义混乱
当 class 名出现 div-header、section-wrapper、card-container-inner 这类词，本质是在补救语义缺失——HTML 结构本不该靠 class 来“解释”自己。
- 删掉所有带
-wrapper、-container、-box的 class，它们是<div>泛滥的副产品 - 禁止用 class 模拟语义标签：比如
class="nav"应直接换成<nav>；class="main"必须改为<main> - 命名统一用 kebab-case，且只描述内容本身（
user-profile-card），不描述布局（left-sidebar）、状态（active-item）或视觉（red-button）
DOM 深度超标时怎么定位冗余层
嵌套超过 6 层的 DOM 节点会显著拖慢渲染和 JS 查询速度，而问题往往藏在模板引擎输出或手写重复结构里。
立即学习“前端免费学习笔记（深入）”；
- 在 Chrome DevTools 的「Elements」面板中右键节点 → 「Break on」→ 「Attribute modifications」，观察哪些
<div>是 JS 动态插入却没实际用途的 - 用
document.querySelectorAll('div').length统计页面 div 总数，若 >150 且多数没 id/class，基本就是冗余 - 重点清理：CMS 模板里自动包裹的
<div class="field">、JS 渲染前的空占位<div id="app"></div>外又套一层<div class="wrapper">
<div> 后，如果发现 CSS 样式崩了，那问题不在 HTML，而在 CSS 过度依赖 class 名而非语义层级。
