直接用文本编辑器写html文件双击即可运行，但file:///协议下图片不显示、fetch报cors错误等是浏览器安全限制所致；必需结构为；路径以html文件为基准计算，推荐用本地服务器（如python3 -m http.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 时踩坑——比如 里没写 <meta charset="utf-8">，中文就变乱码； 缺失会导致样式作用域异常。
- 必需的最小结构是：
<meta charset="utf-8"> -
<title></title>不强制，但没它，浏览器标签页就显示空白或文件名，不利于调试 - 不要手动写
<script></script>在里又没加defer，否则 JS 执行时还没解析，document.getElementById()找不到元素
引用本地图片/CSS/JS 时路径怎么写才不 404
路径错误是静态页最常卡住的地方。关键不是“绝对还是相对”，而是以 HTML 文件为起点，算清楚“往上几层、往哪进文件夹”。
立即学习“前端免费学习笔记（深入）”；
- 同目录：直接写
<img src="logo.png" alt="html页面怎么做_html静态页面创建【基础】" > - 子目录：比如图片在
images/icon.jpg，HTML 在根目录，就写src="images/icon.jpg" - 上一级目录：用
../，比如 CSS 在css/style.css，HTML 在pages/index.html，那链接就得是../css/style.css - 绝对路径（慎用）：
/images/logo.png表示网站根目录下的images，但在file:///下无效，只适用于部署到服务器后
chrome 打开本地 HTML 却提示“已拦截跨源请求”
这不是你代码的问题，是 Chrome 对 file:// 协议的硬性限制。哪怕只是 fetch('./data.json')，也会被拦，连控制台报错都写着 Blocked a frame with origin "NULL"。
- 临时解决：启动 Chrome 时加参数
--disable-web-security --user-data-dir=/tmp/chrome-dev（仅开发用，有安全风险） - 推荐做法：用一行命令起服务，比如 Node 用户装
serve：npx serve -s .；Python 用户用python3 -m http.server 8000 - VS Code 安装插件
Live Server，右键 HTML 文件点 “Open with Live Server”，它自动开服务并刷新，比手动敲命令还快
事情说清了就结束。真正麻烦的不是写第一行 ，而是后续加交互时，才发现本地文件协议和浏览器安全模型根本不在一条线上。