双击HTML文件看不到图，主因是图片未随HTML一并导出；Photoshop需选“HTML和图像”而非“仅限HTML”，确保生成images文件夹且路径匹配，再用本地服务器（如Live Server）打开而非双击。

直接双击打开 HTML 文件却看不到图，大概率不是代码写错了，而是图片压根没跟着一起保存出来——仅限HTML 格式只生成一个空壳文件，所有图片资源全丢了。

用 Photoshop 存 HTML 时必须选 HTML 和图像

Photoshop 的「存储为 Web 所用格式」里有两个关键选项：

• 仅限HTML：只生成一个 .html 文件，不导出任何图片，浏览器加载时自然 404
• HTML 和图像：同时生成 .html + images/ 文件夹，所有切片或优化后的图都放进去

选错就白忙活。保存后务必检查桌面（或目标目录）是否多出了一个 images 文件夹，里面有没有对应命名的图片文件。没有？重存，别跳过这步。

src 路径必须匹配实际文件结构

Photoshop 自动生成的 HTML 里， 这类路径是硬编码的，它依赖两个前提：

• HTML 文件和 images/ 文件夹在同一级目录下
• images/ 文件夹里真有那个文件，且大小写完全一致（比如 logo.PNG ≠ logo.png）

如果手动挪动过 HTML 或图片文件，或者改过文件夹名，路径立刻失效。别猜，直接右键 →「在文件管理器中打开」，确认当前 HTML 所在位置，再看 images/ 是否紧挨着它。

HTML Text Extract

从HTML页面（URL、文件或标准输入）中提取主体内容文本，去除导航、页脚、广告和模板文本。可直接传递给readability_check或其他文本工具。

下载

别双击 HTML，用本地服务器打开

直接双击 HTML 文件走的是 file:// 协议，Chrome、Edge 等现代浏览器会主动拦截相对路径下的图片请求，控制台报 net::ERR_FILE_NOT_FOUND 或干脆静默失败。

• 临时解决：命令行运行 python3 -m http.server 8000，然后访问 http://localhost:8000/your-page.html
• 长期开发：VS Code 装 Live Server 插件，右键 →「Open with Live Server」

只要看到地址栏是 http:// 开头，路径解析才按标准来；file:// 下的一切路径行为都不稳定，别信它。

切片导出后图片尺寸错乱或显示异常

用切片工具切完再存 HTML，Photoshop 会把每块切片单独导出为图，并在 HTML 中用绝对定位拼回去。常见翻车点：

• 切片命名含中文或空格 → 导出后文件名被转义或截断，src 找不到原文件
• 切片区域太小（比如只有 1×1 像素）→ 某些浏览器渲染异常，显示为灰块或空白
• HTML 中用了 table 布局拼图 → 表格单元格默认有 border-collapse: separate，可能多出 1px 间隙

切片前先统一用英文命名，导出后手动打开 images/ 文件夹核对文件名；若布局错位，优先检查 HTML 源码里 的 width/height 是否和切片尺寸一致，而不是调 CSS。

最常被忽略的一点：Photoshop 导出的 HTML 是静态快照，不带响应式逻辑。如果图片在缩放后变形或错位，不是路径问题，是它本来就不支持自适应——别指望靠改 src 解决，得重切或换方案。

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