必须置于最前面，因为浏览器流式解析HTML时，若此前遇到中文等非ASCII字符而未声明编码，会按默认编码（如GBK或ISO-8859-1）错误解码，导致乱码且无法回溯修正。

HTML 不是编程语言，也不需要编译或运行环境，写完保存为 .html 文件双击就能在浏览器里看到效果——这是它最实在的入门门槛。

为什么 必须放在 最前面

浏览器解析 HTML 是从上到下流式进行的。如果 写在 后面，或者被 CSS/JS 标签挡在后面，那么标题里的中文、页面中的中文文本就可能先按系统默认编码（比如 GBK）解码一次，再被纠正，造成乱码闪现甚至永久错解。

• 必须紧贴 开始标签之后，越早声明越好
• 不要依赖编辑器自动保存编码，charset 是给浏览器看的，不是给编辑器的
• 若用 VSCode，确认右下角显示 “UTF-8”，但依然要写这行 meta —— 两者作用对象不同

的 src 路径写错时，为什么控制台不报错但图片不显示

浏览器对 加载失败是静默处理的：不会中断页面渲染，也不会抛出 JavaScript 错误，只会在开发者工具的 Network 面板里标记为 404，在 Elements 面板中该 元素上出现虚线边框 + 缺失图标。根本原因是 是自闭合标签，加载失败属于资源请求层面问题，不属于 DOM 解析错误。

• 相对路径优先用 ./images/logo.png，避免 images/logo.png（少个 ./ 在某些服务器配置下会变成根路径查找）
• 绝对路径慎用 http://，本地开发建议统一用 /assets/img/xxx.jpg（以 / 开头表示从站点根目录找）
• 永远写 alt 属性，既是无障碍要求，也能在路径出错时提供上下文线索

标签的 target="_blank" 为什么必须配 rel="noreferrer noopener"

不加 rel 属性时，新打开的页面能通过 window.opener 反向访问原页面的 window 对象，存在安全风险（比如跳转页执行 window.opener.location = 'https://evil.com' 劫持原页）。现代浏览器已默认隔离部分能力，但显式声明才是合规做法。

htmlppt.skill

把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。

下载

• rel="noopener" 切断 window.opener 引用，防止页面被重定向
• rel="noreferrer" 同时阻止 Referer 头发送，保护来源隐私
• 二者可合并写作 rel="noreferrer noopener"，顺序无关
• 仅当链接目标可信且需通信时（极少见），才考虑去掉 noopener

到

不是字号工具，而是结构信号

搜索引擎和读屏软件依赖标题层级理解内容主次。把所有标题都写成

或跳着用（比如

后直接

），等于撕掉地图上的路标，既影响 SEO 排名，也破坏残障用户的信息获取路径。

• 一个页面有且仅有一个
  ，通常是主标题或 Logo 区域
• 子模块用
  ，其内部小节用
  ，依此类推，保持树状嵌套
• 视觉样式交给 CSS 控制，不要为了“看起来小”而降级用

• 可用浏览器插件（如 HeadingsMap）实时检查标题结构是否断裂

语义不是锦上添花的装饰，而是 HTML 作为信息载体的底层契约；一旦忽略，后续加 CSS、接 JS、做 SEO、适配读屏器，全都会在某个环节突然卡住——而且往往是最难排查的那个环节。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！