HTML文件命名必须用全小写+kebab-case+.html，因下划线在GitHub Pages等平台易致404，驼峰在大小写敏感系统中引发冲突，空格中文则解析失败；首页必须为index.html，错误页需语义明确如404.html。
HTML 文档命名不是“起个能用的名字”就行，它直接影响部署成功率、团队协作效率和长期维护成本。核心结论：全小写 + kebab-case + .html 扩展名，是当前最安全、最通用的实践。
HTML 文件名为什么必须用 kebab-case（短横线）？
因为 URL 和多数 Web 服务器（尤其是 GitHub Pages、旧版 IIS、部分 Nginx 配置）对下划线（_）不友好——user_profile.html 可能返回 404；而驼峰（userProfile.html）在大小写敏感系统（Linux/Unix）中易引发 userprofile.html 与 UserProfile.html 冲突；空格或中文则直接导致路径解析失败。
常见错误现象：faq_section.html 本地双击能开，上传后 404；AboutUs.html 在 macOS 开发时正常，部署到 Linux 服务器后资源 404。
- ✅ 正确写法：
user-profile.html、product-list.html、404.html - ❌ 错误写法：
user_profile.html、UserProfile.html、用户页面.html、faq section.html - 服务端若启用 Apache
MultiViews，user.html可能被误匹配为user.json响应，需确认关闭该选项
首页、错误页、静态资源页怎么命名才不踩坑？
首页必须叫 index.html，不是 home.html 或 Index.html；否则 Web 服务器默认不会将其识别为目录入口。404、500 等错误页虽无强制标准，但命名需符合全局 kebab-case 规则且语义明确，避免与路由冲突。
使用场景：Nginx/Apache 的 index 指令默认只认 index.html；React/Vue SSR 项目中，若入口 HTML 不叫 index.html，构建产物可能无法正确挂载。
- ✅ 推荐：
index.html、404.html、maintenance.html、terms-of-service.html - ❌ 避免：
Home.html（大小写问题）、error-404.htm（扩展名不统一）、tos.html（缩写难理解，团队内需额外文档解释） -
default.html可作为备选首页，但兼容性不如index.html，不建议新项目使用
data-* 属性和表单 name/id 怎么命名才不和 JS 或第三方库打架？
不加前缀的 data-toggle 或 name="email" 在引入 Bootstrap、Alpine.js 或自定义脚本后极易冲突；for 与 id 不一致还会导致点击 无法聚焦控件，破坏可访问性。
性能影响：浏览器不校验 data- 属性，但大量无前缀命名会增加 JS 查询时的字符串比对开销（尤其在循环中用 getAttribute 判断）；name 重复会让表单序列化结果丢失数据。
- ✅
data-myapp-modal-trigger、data-shop-product-id="123"、name="contact[email]"（支持嵌套结构） - ✅ 表单控件：
id="contact-email"必须与for="contact-email"完全一致，区分大小写 - ❌
data-toggle（Bootstrap 冲突）、name="email"（多表单共存时覆盖）、id="email-input"与for="email"（不匹配）
真正容易被忽略的是动态生成场景：比如 SSR 渲染的 id="item-{{id}}"，若后端未保证 {{id}} 全局唯一，React hydration 会静默失败，控制台无报错但交互异常。这类问题往往要等上线后用户反馈才暴露，调试成本极高。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
