PSD转HTML5时图层组未映射为语义化结构，需按四步修正：一、规范命名并确保可见；二、控制嵌套≤4层并扁平化；三、启用插件分组识别开关；四、用GROUP_START/END标记强制封装。
如果您将PSD文件转换为HTML5代码时发现图层组未正确映射为语义化HTML结构，可能是由于Photoshop中图层组命名不规范、嵌套层级异常或导出插件未识别分组逻辑。以下是通过分组检查法定位与修正图层组导错问题的操作步骤：
一、验证图层组命名与可见性状态
Photoshop中图层组的名称直接影响HTML中容器元素（如
1、在Photoshop右侧“图层”面板中，展开全部图层组，确认目标分组前的眼睛图标为开启状态。
2、双击图层组名称，检查是否包含空格、中文顿号、斜杠或连续下划线等非常规字符。
立即学习“前端免费学习笔记（深入）”；
3、将含特殊符号的组名修改为英文小写+短横线格式，例如将“导航栏_2024”改为nav-header。
4、右键点击图层组，选择“图层属性”，确认“颜色标签”未设为“无”，避免部分插件依据颜色过滤分组。
二、检查图层组嵌套深度与扁平化冲突
多数PSD转HTML5工具对嵌套层级有硬性限制（通常不超过4层），深层嵌套易导致子组被合并至父级或丢失结构。需人工核查并调整嵌套关系。
1、从最外层画布开始，逐级展开图层组，使用键盘快捷键Ctrl+Shift+[（Windows）或Cmd+Shift+[（Mac）将当前选中组移至顶层，观察层级缩进变化。
2、若某组内包含超过3个子图层组，将其拆分为独立同级组，并添加统一前缀，例如原结构“首页/头部/Logo/文字”改为header-logo与header-text两个并列组。
3、对仅含一个图层的空组执行“合并到上一组”操作：右键该组 → 选择“合并图层组”，防止导出器误判为冗余节点。
三、启用导出插件的分组识别开关
部分插件（如PS2HTML、Avocode、Zeplin）默认关闭图层组语义解析，需手动激活分组映射功能，否则所有图层将被平铺输出为无嵌套的
