HTML静态页面怎么创建？新手入门教程

本文详解了HTML静态页面从零创建的核心要点与常见陷阱，强调只需用文本编辑器编写标准HTML文件即可双击运行，但深入揭示了file:///协议下图片不显示、fetch报CORS错误等“看似代码出错”实则源于浏览器安全限制的本质原因；文章明确指出最小必需结构、UTF-8编码规范、命名避坑原则，并重点剖析路径引用逻辑——所有路径均以HTML文件为基准计算，而非项目根目录；更关键的是，直击新手痛点：想测AJAX或本地数据加载？必须启用本地服务器（如Python的http.server或VS Code的Live Server插件），而非依赖双击打开——因为真正的开发调试，从来不是在“能跑起来”的起点止步，而是在理解浏览器安全模型与工程实践边界的清醒认知中起步。

直接用文本编辑器写 .html 文件就能打开

浏览器不挑食，只要后缀是 .html 或 .htm，双击就能渲染。不需要服务器、不用装环境、不跑构建工具——这是静态页面最核心的“能跑起来”的底线。

常见错误现象：file:/// 路径下图片不显示、fetch() 报 CORS error、本地 XMLHttpRequest 失败。这些不是代码写错了，而是浏览器出于安全限制，禁止从本地文件系统读取资源或发起跨源请求。

• 用记事本、VS Code、Sublime 都行，保存时选“所有文件”，编码选 UTF-8（别用 UTF-8 with BOM，IE 和部分工具会解析错）
• 文件名避免空格和中文，比如 my-page.html 比 我的首页.html 更稳妥
• 想测 AJAX 或本地 JSON 加载？必须起一个本地服务，比如用 python3 -m http.server 8000，然后访问 http://localhost:8000

结构里这三块不能少

不是所有标签都可省略，但浏览器会“自动补全”。不过一旦依赖自动补全，就容易在后续加 CSS/JS 时踩坑——比如 里没写 ，中文就变乱码； 缺失会导致样式作用域异常。

• 必需的最小结构是：