哪些场景必须用

和 ？

它们只应在表达「页面或区块的头部/尾部内容」时使用，且需满足语义合理性：

• 应包裹页面顶部导航、logo、搜索框，或 /
  内的标题与元信息（如作者、发布时间）
• 应出现在页面底部（版权信息、联系方式），或出现在 末尾（如编辑说明、相关链接）
• 一个页面可有多个
  和 ，但每个都必须对应一个明确的「所属容器」——比如不能把全站底部版权塞进某个
  的 里

什么时候还得老实用 ？

当没有语义归属、纯为布局或样式隔离时， 仍是唯一选择：

• 栅格容器（如 ）、Flex 包裹层（）
• 动画触发区、JS 操作锚点（）、动态插入内容的空容器
• 尚未形成共识的 UI 组件（如「标签页容器」「折叠面板外层」），目前仍缺乏对应语义标签
• 嵌套过深且语义模糊的中间层：比如
  —— 这里的 是合理的，它不表达结构层级，只承载交互区域

  滥用结构标签的典型错误

  语义错位会干扰辅助技术、SEO 解析，甚至影响浏览器默认样式继承：

  立即学习“前端免费学习笔记（深入）”；

  • 用
    包裹侧边栏顶部的筛选控件（它不属于该区域的“头部”，只是个功能模块）
  • 在 里放 显示“本栏更新时间”—— 本身不构成独立内容单元，其 会被误读为整个页面的次要底部
  • 为兼容旧浏览器强行降级：现代项目无需因 IE8 放弃语义，用 或 CSS 重置即可，而非全退回

    
    
      
    
        
    如何调试 fetch 错误
        
    2025年6月15日
      
      
    fetch 默认不抛出网络错误……
      
    
    
    
    热门工具
    JSONLint
    

    最常被忽略的一点：浏览器对

    和 的默认 display 是 block，但部分旧版 Safari 曾对孤立使用的结构标签应用奇怪的 margin；如果视觉异常，优先检查是否缺失父容器（如没包在 或
    中），而不是立刻加 display: block 覆盖。