h属性编辑器⭕修改工具：把元素的每一个属性当作枝叶，安静地修剪出干净源码
h属性编辑器⭕修改工具把散落在标签里的 class、id、data-*、aria-*、style、hidden 收进同一张桌面，先用标签名与选择器把元素找出来，再逐个读取、命名、替换与复核。它不追求一键翻新，而是像打理阳台上的绿植：看清枝条的走向，再决定剪掉哪一段。以下内容围绕这张工作台展开，包含可照做的步骤、常用属性的图鉴、一次真实感的改版手记，以及编辑前后可直接比对的对照表。
定位
按标签、类名、属性名或文本切片缩小范围，改版时不再靠滚动逐行找元素。
改写
在属性面板里增、删、改，支持同名属性的批量替换与命名统一，改动即时回写源码。
复核
检查重复 id、空类名、缺少替代文本与无障碍标注的元素，把问题留在发布之前。
一次属性改版的五步工作流
顺序可以按项目调整，但每一步都建议留下记录，方便回退。
- 圈定范围先决定这次只动一个区块，还是一次性整理全站。范围越小，属性命名越容易统一；范围越大，越需要先冻结一份命名清单。
- 读取现状把目标元素的属性原样导出，包括类名顺序、内联样式与自定义数据属性。看清现状再动手，能避免把有用的钩子误删。
- 规划命名为类名与 data-* 定下统一风格，例如「模块名 + 角色 + 修饰」，让后来者只看属性就明白元素职责。
- 批量替换用同名替换把旧类名一次换掉，同时处理样式表与脚本里的引用，避免只改了一半导致外观走样。
- 回归复核检查 id 是否唯一、无障碍标注是否到位、隐藏属性是否仍有必要，并在小屏幕上确认阅读顺序。
属性图鉴：常被改动的十个属性
每一张卡片说明一个属性的用途与改写时的注意点。
class
class="gallery-card is-wide"空格分隔的类名，可复数存在。改写时保持顺序稳定，方便样式层叠的可预测性。
id
id="main-gallery"文档内应唯一，常被锚点与脚本引用。改名要同步检查跳转链接。
data-*
data-index="3"自定义数据属性，用来给脚本传参。命名建议全小写并用连字符分词。
aria-label
aria-label="作品缩略图"为没有可见文字的控件补上名称，读屏时才不会只念出一个空白按钮。
aria-hidden
aria-hidden="true"把纯装饰元素从无障碍树里移出，避免重复朗读装饰性图形。
role
role="listitem"在原生语义不足时补充角色，能用现成标签就不要额外添加。
hidden
hidden布尔属性，存在即生效。整理时留意它是否与折叠交互的脚本冲突。
style
style="margin-top:8px"内联样式优先级高，容易压制样式表。改版时优先把它挪进类名。
tabindex
tabindex="0"调整键盘焦点顺序。正值会打乱自然顺序，尽量只用 0 与 -1。
lang / dir
lang="zh-CN" dir="ltr"声明语言与书写方向，混排多语言内容时尤其需要逐一确认。
改版手记：小岑的作品集页面
傍晚的光斜进来，小岑把笔记本支在窗边，屏幕上是一个做了三年的作品集页面。她说这个页面「像没修过枝的藤」，堆了二十多个类名，最早的几个连她自己都认不出用途。
她先圈定范围：这次只整理作品列表区块，其余部分原样保留。导出属性后，第一眼看到的是 class="box1 box2 img-wrap floatL"，三个类名各写各的，顺序还前后颠倒。她照着「模块名 + 角色 + 修饰」的约定，改写成 class="gallery-card gallery-card--wide"。
「名字写清楚以后，我居然能一眼看出哪张卡是宽版。」她把这句话念出来，顺手给每张卡片补上 aria-label="作品缩略图：河边写生"。
替换脚本跑完，她做了回归复核：两个重复的 id 合并成一个，内联样式里残留的 style="margin-top:8px" 挪进了类名，被折叠脚本依赖的 data-index 全部保留。最后她在手机上从头滑到尾，确认阅读顺序没有因为结构调整而错乱。关掉屏幕时，页面已经瘦了一圈。
编辑前后对照
同一区块，整理前后的写法与收益。
| 项目 | 整理前 | 整理后 |
|---|---|---|
| 类名 | box1 box2 img-wrap floatL | gallery-card gallery-card--wide |
| 唯一标识 | 两个重复 id | 保留一个 main-gallery |
| 数据属性 | 无 | data-index 按顺序标注 |
| 无障碍 | 仅装饰图，无名称 | aria-label 说明图像内容 |
| 样式来源 | 类名与内联样式混杂 | 统一下沉到类名 |
常见问答
- 批量替换类名会不会把样式改坏？
- 只要样式表与脚本里的引用同步更新，外观不会变化。建议在替换前先列出所有引用位置，替换后逐条核对，必要时保留旧类名一轮再删除。
- data-* 和 id 都能给脚本传参，怎么选？
- 需要唯一锚点时用 id；只是携带数值、状态或序列化数据时用 data-*。id 改名影响面更大，data-* 更适合局部调整。
- 装饰性图片的属性该怎么处理？
- 纯装饰元素可以留空替代文本并加上 aria-hidden="true"，让它从无障碍树里移出；承载信息的图片则应写明内容，而不是堆一串修饰词。
- 内联样式一定要全部清理吗？
- 不必。动态计算出来的少量内联样式有其合理性，长期不变的外观规则则更适合放进类名，便于统一维护。