如何命名HTML_HTML文件与元素命名的规范与技巧【指南】
HTML文件名必须用kebab-case，因URL规范及部分服务器（如旧版IIS、GitHub Pages）对下划线路径响应异常致404；实操需全小写、用-连接、禁用空格/中文/特殊符，首页统一为index.html。
HTML 文件名该用 kebab-case 还是 snake_case？
HTML 文件名必须用 kebab-case（短横线分隔），不能用 snake_case（下划线）或 PascalCase。这是因 URL 规范和多数 Web 服务器默认不区分大小写但会把下划线当字面字符处理，而部分旧版 Windows IIS 或静态托管服务（如 GitHub Pages）对含下划线的路径响应异常，导致 404。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 文件名全小写，单词间用
-连接，例如：user-profile.html、faq-section.html - 避免空格、中文、特殊符号（如
用户页面.html、user profile.html、user_profile.html） - 首页统一用
index.html，不要写成Index.html或home.html - 若项目需部署到 Apache/Nginx，确认服务器配置未开启
MultiViews，否则user.html可能被误匹配为user.json响应
class 和 id 命名为什么不能只写“left”“top”“red”？
这类命名违反 BEM 或语义化原则，本质是描述样式而非功能或内容角色。一旦 CSS 重构（比如把 red 改成橙色），class 名就失效；更严重的是，它阻碍可访问性（AT 工具无法理解）和团队协作（新人看不懂 left 是布局位置还是内容状态）。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 用功能/意图命名，而非外观：用
btn-primary代替red-btn，用sidebar-nav代替left-nav -
id应唯一且稳定，适合锚点或 JS 操作目标，例如：id="contact-form"，而非id="form1" - 避免纯数字或带前缀的泛用名：
div1、section-a、my-div都不可维护 - 若用 BEM，严格遵循
block__element--modifier格式，例如：card__title--large
data-* 属性命名要不要加项目前缀？
要加，而且必须加。浏览器原生不校验 data- 属性，但多个第三方库（如 Alpine.js、HTMX）或自定义脚本可能监听相同名称（如 data-toggle），不加前缀极易冲突。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 使用简短但明确的项目/模块前缀，例如：
data-myapp-modal-target、data-shop-cart-item-id - 前缀后用 kebab-case，不混用下划线或驼峰：
data-abc_user_id❌，应为data-abc-user-id✅ - 值尽量保持简单类型（字符串、数字），避免 JSON 字符串嵌套；需要复杂数据时改用
script type="application/json"块 - 不要用
data-存敏感信息（如 token、用户邮箱），它在 HTML 源码中完全可见
表单控件的 name 和 for/id 关联容易出什么错？
最常见的错误是 name 值重复导致多选框/单选组失效，或 for 属性与 id 值不一致导致点击 
label 不触发控件聚焦——这直接影响可访问性和移动端体验。
实操建议：
立即学习“前端免费学习笔记（深入）”；
-
name决定提交字段键名，同组单选/复选框必须相同：name="payment-method"，每个选项用不同value -
label for="xxx"必须与对应控件的id="xxx"完全一致（包括大小写），且id在整个页面唯一 - 避免省略
id直接包裹控件：虽可用，但屏幕阅读器兼容性差，iOS VoiceOver 可能跳过 - 隐藏控件（如自定义 checkbox）仍需保留合法
id和关联label，否则 WCAG 2.1 1.3.1 条款不通过
命名不是风格偏好问题，而是影响部署稳定性、协作效率和无障碍支持的实际约束。最常被忽略的是文件名大小写和 data-* 前缀——它们不出错时没人注意，一出就是线上 404 或 JS 逻辑静默失效。
