必须置于最前面，因为浏览器流式解析HTML时，若此前遇到中文等非ASCII字符而未声明编码，会按默认编码（如GBK或ISO-8859-1）错误解码，导致乱码且无法回溯修正。
HTML 不是编程语言，也不需要编译或运行环境，写完保存为 .html 文件双击就能在浏览器里看到效果——这是它最实在的入门门槛。
为什么 <meta charset="UTF-8"> 必须放在
浏览器解析 HTML 是从上到下流式进行的。如果 <meta charset="UTF-8"> 写在 <title></title> 后面，或者被 CSS/JS 标签挡在后面，那么标题里的中文、页面中的中文文本就可能先按系统默认编码（比如 GBK）解码一次，再被纠正，造成乱码闪现甚至永久错解。
- 必须紧贴
开始标签之后，越早声明越好 - 不要依赖编辑器自动保存编码，
charset是给浏览器看的，不是给编辑器的 - 若用 VSCode，确认右下角显示 “UTF-8”，但依然要写这行 meta —— 两者作用对象不同
<img alt="从基础到进阶的HTML开发指南" > 的 src 路径写错时，为什么控制台不报错但图片不显示
浏览器对 <img src alt="从基础到进阶的HTML开发指南" > 加载失败是静默处理的：不会中断页面渲染，也不会抛出 JavaScript 错误，只会在开发者工具的 Network 面板里标记为 404，在 Elements 面板中该 <img alt="从基础到进阶的HTML开发指南" > 元素上出现虚线边框 + 缺失图标。根本原因是 <img alt="从基础到进阶的HTML开发指南" > 是自闭合标签，加载失败属于资源请求层面问题，不属于 DOM 解析错误。
- 相对路径优先用
./images/logo.png，避免images/logo.png（少个./在某些服务器配置下会变成根路径查找） - 绝对路径慎用
http://，本地开发建议统一用/assets/img/xxx.jpg（以/开头表示从站点根目录找） - 永远写
alt属性，既是无障碍要求，也能在路径出错时提供上下文线索
<a></a> 标签的 target="_blank" 为什么必须配 rel="noreferrer noopener"
不加 rel 属性时，新打开的页面能通过 window.opener 反向访问原页面的 window 对象，存在安全风险（比如跳转页执行 window.opener.location = 'https://evil.com' 劫持原页）。现代浏览器已默认隔离部分能力，但显式声明才是合规做法。
立即学习“前端免费学习笔记（深入）”；
-
rel="noopener"切断window.opener引用，防止页面被重定向 -
rel="noreferrer"同时阻止Referer头发送，保护来源隐私 - 二者可合并写作
rel="noreferrer noopener"，顺序无关 - 仅当链接目标可信且需通信时（极少见），才考虑去掉
noopener
<h1></h1> 到 <h6></h6> 不是字号工具，而是结构信号
搜索引擎和读屏软件依赖标题层级理解内容主次。把所有标题都写成 <h1></h1> 或跳着用（比如 <h2></h2> 后直接 <h4></h4>），等于撕掉地图上的路标，既影响 SEO 排名，也破坏残障用户的信息获取路径。
- 一个页面有且仅有一个
<h1></h1>，通常是主标题或 Logo 区域 - 子模块用
<h2></h2>，其内部小节用<h3></h3>，依此类推，保持树状嵌套 - 视觉样式交给 CSS 控制，不要为了“看起来小”而降级用
<h6></h6> - 可用浏览器插件（如 HeadingsMap）实时检查标题结构是否断裂
语义不是锦上添花的装饰，而是 HTML 作为信息载体的底层契约；一旦忽略，后续加 CSS、接 JS、做 SEO、适配读屏器，全都会在某个环节突然卡住——而且往往是最难排查的那个环节。
