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