如何创建和编写HTML文件（入门指南）

本文是一份面向初学者的HTML入门实战指南，直击用记事本等基础编辑器编写HTML时最易踩坑的核心细节：从文件命名规范（必须小写index.html）、编码设置（UTF-8无BOM）到不可省略的四大结构要素（DOCTYPE、lang属性、meta charset前置、非空title），再到本地开发常见故障根源——file://协议导致的图片路径失效、ES6模块CORS报错、大小写敏感问题，最后强调用W3C官方校验器替代肉眼检查，并指出虽有现代框架封装，但掌握这些底层规则对调试404页、邮件模板或SSR输出仍至关重要。

用记事本就能写 HTML，但得先搞清文件后缀和编码

不是所有 .txt 文件改个名就能当 HTML 用。Windows 记事本默认保存为 ANSI 编码，中文会乱码；Mac 的 TextEdit 默认导出富文本（.rtf），根本不是纯 HTML。

• 保存时必须选「另存为」→ 文件名填 index.html（不能是 index.htm 或 index.HTML，大小写在某些服务器上会出问题）
• 编码必须选 UTF-8（别选「UTF-8 with BOM」，BOM 会导致 PHP、Node.js 后端解析出错）
• 编辑器推荐：VS Code、Sublime Text、Notepad++ —— 它们新建文件默认就是 UTF-8 无 BOM，且能高亮 HTML 语法，少踩一半坑

最简 HTML 结构不能省这四行

浏览器对缺省标签容忍度高，但省掉关键部分会导致语义错误、SEO 失效、移动端缩放异常，甚至某些 CSS 选择器失效。

• 必须有 ：没有它，IE 和旧版 Edge 会进怪异模式（Quirks Mode），盒模型、display: flex 全崩
• 必须有 ：不写 lang 属性，屏幕阅读器无法正确发音，Google 搜索结果可能降权
• 里必须有 ：放在