Photoshop自CC 2015起彻底移除切片导出HTML功能，仅支持导出PNG、JPG等图片格式；切片仍可命名和导出单图，但所有HTML/CSS生成功能已从UI和API中删除。
ps切片导出html不是标准功能，photoshop从cc 2015起就彻底移除了“存储为web所用格式（旧版）”和切片导出html选项——你点不到、选不了、也找不到那个按钮。
为什么PS里导不出HTML文件了
Adobe在2015年砍掉了文件 > 导出 > 存储为Web所用格式（旧版），连带把切片+HTML/CSS导出能力一并下线。这不是你设置错了，也不是版本没更新到最新，是功能被官方废弃了。现在PS的文件 > 导出 > 导出为只支持png、jpg、svg等图片格式，不生成任何HTML或CSS代码。
常见错误现象：
– 找不到“存储为Web所用格式”菜单项
– 右键切片区域，没有“导出切片”或“生成HTML”选项
– 搜索“HTML导出”只看到第三方插件或过时教程
- 切片本身仍可用：能画、能命名、能导出单个图片（右键切片 →
导出切片） - 但所有与HTML/CSS自动生成功能相关的入口，已从UI和底层API中移除
- 兼容性影响：哪怕你用CS6导出的HTML，在现代浏览器里也大概率错位、不响应、样式失效
替代方案：手动拼HTML + 引用切片图片
如果你手头已有PS切片导出的png、jpg等文件（比如放在images/目录下），且需要组织成静态页面，就得自己写HTML结构。这不是“还原PS布局”，而是用语义化标签+定位还原视觉关系。
使用场景：老项目维护、内部演示页、无需交互的静态落地页
立即学习“前端免费学习笔记（深入）”；
- 先用
文件 > 导出 > 导出为或右键切片 →导出切片，把每块切片存为独立图片，注意命名清晰（如header-bg.png、btn-submit.png） - 新建
index.html，用<div>按PS图层顺序包裹，配合background-image或<img>插入对应切片 - 避免用
position: absolute像素级还原——PS坐标≠浏览器渲染结果；优先用flex或grid做弹性布局
简短示例：
<div class="header"> <img src="images/logo.png" alt="logo"> <nav><img src="images/nav-bg.png" alt=""></nav> </div>
真要自动生成HTML？别依赖PS，换工具链
靠PS做前端交付已不现实。真正能接续“切片→代码”流程的，是设计稿转代码工具，而非图像处理软件。
- Figma + 插件（如
Anima、Zeplin）：支持导出带语义结构的HTML+CSS，可保留组件层级 - Sketch +
HTML Export插件：需配合Symbol和命名规范，生成较干净的标记 - 纯代码方式：用
html2canvas或dom-to-image截取运行时DOM，适合动态内容快照，不适用于原始切片逻辑
性能提示：自动生成的HTML往往冗余（大量div嵌套、内联样式），上线前务必人工梳理结构和样式表。
切片本身没死，死的是“一键导HTML”这个幻觉。真实工作流里，切片只是图片分发的起点，HTML是手写或由设计协作平台生成的终点——中间那条路，PS早在八年前就拆掉了。
