必须优先掌握6个HTML5语义化标签：、、、、、，它们覆盖90%页面结构需求且IE11+全支持。
HTML5 常用标签不是“背下来就能用”，关键在理解每个标签的语义和浏览器默认行为——用错 新手不用一上来学全部，先吃透这 6 个：它们覆盖了 90% 的页面结构需求，且所有现代浏览器（包括 IE11+）都原生支持。 两者视觉上没差别，但语义天差地别： 常见误用： HTML5 新增的 它解决的是“不同分辨率/像素密度下换图”，不是“根据视口宽度切换图片尺寸”。真正需要的往往是两者结合： 语义化标签的“难”不在写法，而在判断：这个区块对内容逻辑是否构成独立单元？是否会被搜索引擎或读屏软件当作一个整体识别？一旦开始习惯问这两个问题， 和 看不出区别，但会影响可访问性、SEO 和后期维护。哪些标签必须优先掌握（语义清晰 + 浏览器支持稳）
/ 的顶部区域，不是“所有带标题的容器”；它可包含 ～、logo、导航等：专指主导航链接组，不是每个 都该塞进去；侧边栏次要链接建议用
：整个页面有且仅有一个；不能嵌套在 或 内：内容独立、可被单独分发（如博客文章、新闻条目）；评论区不是 ，是它的子内容：与主内容相关但可分离的内容（如侧边栏推荐、术语解释），不是“装饰性区块”：对应最近的 或 ，不单指页面最底部；一个页面可以有多个
和 到底怎么选？
必须有标题（～），代表一个有主题的内容区块； 是纯样式/脚本挂钩容器，无语义。 包裹轮播图（无标题、无主题）→ 改用 实现卡片列表 → 若每张卡片是独立内容（如产品），应改用
→ 后期加屏幕阅读器支持时要额外补
role 和 aria- 属性，成本翻倍表单类标签最容易踩的兼容性坑
、 等，在不同平台表现差异极大：
type="date" 会唤起原生日期选择器，但 Android Chrome 可能只显示文本框（取决于系统版本）required 属性在所有浏览器都生效，但错误提示文案不可自定义；需 JS 拦截 submit 事件做统一校验 不是下拉菜单替代品：它只是输入建议源，用户仍可自由输入非选项内容
：同一 标签内处理 DPR（设备像素比） 标签会导致 和 就不会混用了。
