全局属性不是装饰品，每个都该有明确用途：id用于唯一DOM定位，class用于样式复用或批量控制，data-*仅存JS真正读取的数据；contenteditable与hidden不可共存；dir/lang必须从<html>根元素设置；enterkeyhint与inputmode是移动端表单刚需。
全局属性不是“随便加”，先看它是否真被需要
很多开发者一上来就给元素塞 id、class、data-*，结果发现 JS 没调用、CSS 没复用、调试时还多了一堆冗余标识。全局属性不是装饰品，每个都该有明确用途。
判断标准很简单：
-
id：只在需要唯一 DOM 定位（如document.getElementById()、锚点跳转、label[for]）时才用；重复或动态生成的列表项别硬套id="item-1" -
class：用于样式复用或批量行为控制；纯 JS 逻辑标识（比如“待校验字段”）优先用data-而非 class，避免样式污染 -
data-*：只存 JS 真正要读取的数据；别把data-id="123"和后端接口路径混着写，更别用data-config='{"a":1}'存复杂对象——JSON.parse 容易出错，改用dataset+ 原生属性拆分
contenteditable 和 hidden 同时出现，大概率是 bug
常见错误写法：<div hidden contenteditable="true">编辑区</div>。表面看是“先隐藏再等 JS 显示”，但实际问题很具体：
-
hidden会让元素不可聚焦、不可键盘导航，contenteditable形同虚设 - 即使后续 JS 移除
hidden，焦点管理、输入法状态、光标恢复都可能异常（尤其 iOS Safari） - 屏幕阅读器会忽略
hidden元素，但若 JS 动态显示又没同步更新aria-hidden，可访问性直接断裂
正确做法：用 CSS 控制显隐（如 display: none 或 visibility: hidden），需要时再激活 contenteditable；或者用 aria-hidden="true" + tabindex="-1" 替代 hidden，保留语义和焦点能力。
立即学习“前端免费学习笔记（深入）”；
dir 和 lang 必须从 <html> 开始设，别指望局部覆盖
想让整页 RTL？别只给 <body dir="rtl"> 或某个 <div lang="ar"> ——HTML 规范明确要求方向与语言基线由 <html> 根元素定义，否则 Unicode 双向算法（UBA）起点错乱，后果包括：
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 输入框光标默认停在左侧（应为右侧），退格键行为反向
- Tab 键顺序仍是 LTR，用户无法按视觉流操作
- Flex 布局主轴不翻转，
justify-content: flex-start还是贴左 - 滚动条位置错（macOS RTL 系统下本该在左，却仍在右）
正确写法只有这一种：<html lang="ar" dir="rtl">。后续子元素若需局部覆盖（比如一段英文嵌在阿拉伯文中），用 <bdi> 包裹，而不是手动加 dir="ltr" ——<bdi> 是语义化双向隔离标签，现代浏览器全支持，且不会破坏父级 UBA 上下文。
enterkeyhint 和 inputmode 不是锦上添花，而是移动端表单刚需
在手机上，用户看到的“回车键”图标直接影响操作直觉。不设 enterkeyhint，iOS 默认显示“换行”，Android 显示“搜索”或“前往”，但你的表单可能是登录、下单、发送消息——提示不符，用户会误操作。
搭配 inputmode 才完整：
-
<input type="text" inputmode="tel" enterkeyhint="next">→ 数字键盘 + “下一步”键 -
<input type="text" inputmode="email" enterkeyhint="send">→ 邮箱键盘 + “发送”键 -
<input type="search" enterkeyhint="search">→ 自动启用搜索键盘，无需额外设inputmode
注意：inputmode 在 iOS 16.4+、Android Chrome 100+ 才稳定生效；旧版本 fallback 到 type 属性（如 type="tel"），所以两者要配合用，不能只靠一个。
真正难的不是记住属性名，而是理解每个属性背后绑定的浏览器机制——dir 绑定 UBA，contenteditable 绑定输入法栈，enterkeyhint 绑定软键盘协议。漏掉任一环，表面功能正常，实则埋下兼容性或无障碍隐患。
