class属性应以功能/内容命名（如search-submit），禁用暴露样式或结构的名称（如red-btn、left），确保语义清晰、可维护且兼容JS查询与无障碍访问。
class 属性为什么不能叫 left 或 red-btn
这类名字直接暴露样式或结构细节，一改就废。red-btn 在主题切换后变成橙色，left 可能被 flex 布局取代，div1 根本看不出语义。更严重的是，它让 JS 查询和可访问性支持失效——document.getElementById("div1") 拿到的可能是任意一个“第一个 div”，屏幕阅读器也读不出内容角色。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 用功能/内容命名：
search-submit、user-profile__avatar、error-message - 禁止纯数字、拼音、大写或下划线：
user_profile、UserProfile、div2全部违规 - BEM 不是必须套双下划线，但 block 名必须唯一：
user-profile是底线，profile就等于没隔离 - 所有 class 值必须小写 + 连字符，如
main-nav、form-group；数字不能开头：3col-layout❌，应写成cols-3-layout✅
id 属性重复或命名错误会引发哪些真实故障
id 必须全局唯一，重复会导致 document.getElementById() 永远只返回第一个匹配元素。最典型的现象是：列表里多个 delete-btn 按钮，JS 事件只绑在第一个上，其余点击无响应。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 服务端模板或 React/Vue 组件循环中，绝不能写死
id="item"—— 必须拼接唯一标识：id="item-{{id}}"（后端）或:id="`user-${userId}`"（Vue） - 命名只能用字母开头 + 数字/连字符：
search-input✅，user.email❌（querySelector("#user.email")会被解析为 id=user 且 class=email） - 纯数字开头如
id="123"虽 HTML5 允许，但 CSS 里要写成#\31 23（转义），极易出错，直接避开 - 现代做法是优先用
class或data-*替代：class="js-submit"或data-action="submit"，再用document.querySelector("[data-action='submit']")获取
data-* 属性怎么命名才不和其他库打架
浏览器不限制 data-toggle 或 data-target，但 Alpine.js、HTMX、自定义弹窗脚本全可能监听同名属性。裸写 data-id="123" 等于把钥匙扔在门口——三个月后没人知道它是用户 ID 还是订单号，也没人知道谁在读它。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 强制加业务前缀：
data-user-id="123"、data-shop-cart-item-id="456" - kebab-case 是唯一安全格式：
data-abc-user-id✅，data-abc_user_id❌ - 值保持简单类型：字符串或数字即可，别塞 JSON；复杂数据改用
<script type="application/json"> - 禁用敏感信息：
data-user-token这种写法等于把 token 明文贴在 HTML 里
全局属性值的引号、大小写与空格陷阱
属性只能写在开始标签里，绝对不能写在结束标签；多个属性之间用空格分隔，逗号、分号都不行；引号必须英文双引号——中文引号、属性写在结束标签、属性间用逗号，都会让 HTML 失效。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 新手统一全部用英文双引号：
title="这是提示"✅，title='这是提示'可用但不推荐，title=这是提示❌（无引号仅限部分简单值，易出错） - 属性名必须小写：
CLASS、Class都不是标准全局属性，class才是 - 布尔属性无需赋值：
autofocus✅，autofocus="true"❌（虽能工作但不符合规范，某些 SSR 工具会警告） - 空格必须严格：属性名与
=之间、=与引号之间不能有多余空格，class = "btn"是无效写法
真正难的不是记住规则，而是每次写 id 或 data-* 时，都得想清楚这个值未来会不会被另一个团队、另一种框架、甚至另一个时间点的自己读取——命名不是填空，是契约。
