哪些标签必须优先掌握（语义清晰 + 浏览器支持稳）

新手不用一上来学全部，先吃透这 6 个：它们覆盖了 90% 的页面结构需求，且所有现代浏览器（包括 IE11+）都原生支持。

• ：只用于页面或 /
  的顶部区域，不是“所有带标题的容器”；它可包含
  ～
  、logo、导航等
• ：专指主导航链接组，不是每个 都该塞进去；侧边栏次要链接建议用
• ：整个页面有且仅有一个；不能嵌套在 或
  内
• ：内容独立、可被单独分发（如博客文章、新闻条目）；评论区不是 ，是它的子内容
• ：与主内容相关但可分离的内容（如侧边栏推荐、术语解释），不是“装饰性区块”
• ：对应最近的 或
  ，不单指页面最底部；一个页面可以有多个

和 到底怎么选？

两者视觉上没差别，但语义天差地别：

必须有标题（

～

），代表一个有主题的内容区块； 是纯样式/脚本挂钩容器，无语义。

常见误用：

• 用
  包裹轮播图（无标题、无主题）→ 改用
• 用 实现卡片列表 → 若每张卡片是独立内容（如产品），应改用
• 为 CSS 类名方便而全用 → 后期加屏幕阅读器支持时要额外补 role 和 aria- 属性，成本翻倍

  表单类标签最容易踩的兼容性坑

  HTML5 新增的 、 等，在不同平台表现差异极大：

  • iOS Safari 的 type="date" 会唤起原生日期选择器，但 Android Chrome 可能只显示文本框（取决于系统版本）
  • required 属性在所有浏览器都生效，但错误提示文案不可自定义；需 JS 拦截 submit 事件做统一校验
  • 不是下拉菜单替代品：它只是输入建议源，用户仍可自由输入非选项内容

  出生日期
  
  

  + 响应式图片不是万能解

  它解决的是“不同分辨率/像素密度下换图”，不是“根据视口宽度切换图片尺寸”。真正需要的往往是两者结合：

  • ：匹配媒体查询，决定用哪套资源
  • ：同一 标签内处理 DPR（设备像素比）
  • 漏掉 标签会导致 完全不渲染（它是容器，不负责展示）

  
    
    
    
    @@##@@
  

  语义化标签的“难”不在写法，而在判断：这个区块对内容逻辑是否构成独立单元？是否会被搜索引擎或读屏软件当作一个整体识别？一旦开始习惯问这两个问题，

  和 就不会混用了。