直接用浏览器打开HTML文件虽可运行，但file://协议下因安全限制会导致fetch失败、图片不显示、中文乱码、localStorage异常及script不执行等问题；推荐用http-server或Python内置服务替代双击打开。
直接用浏览器打开 HTML 文件就能运行，不需要服务器——但前提是路径、编码、MIME 类型都对，否则 fetch 失败、图片不显示、中文乱码、localStorage 读写异常这些“看似能跑”的问题全会冒出来。
本地双击打开 HTML 文件时 script 标签不执行
常见错误现象是控制台报错 Access to script at 'file:///...' from origin 'null' has been blocked，或者脚本完全静默无反应。
根本原因是现代浏览器（Chrome/Firefox/Edge）出于安全限制，对 file:// 协议禁用了跨域相关能力，包括 fetch、XMLHttpRequest、Service Worker，甚至部分 localStorage 行为也会受限。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 用轻量命令行工具起一个本地 HTTP 服务：比如
npx http-server（需 Node.js）、python3 -m http.server 8000（Python 自带） - 避免在
file://下测试含 API 调用、模块导入（type="module"）、import动态加载的代码 - 如果只是验证基础 DOM 操作或纯前端逻辑，可临时改用
data:URL 方式嵌入 HTML 片段测试
HTML 中引入 JS/CSS 时路径总出错
错误现象包括 404、控制台提示 Failed to load resource、样式不生效、Uncaught SyntaxError: Unexpected token '（其实是 HTML 被当 JS 加载了）。
关键在于路径解析规则：浏览器始终以当前 HTML 文件所在目录为基准，不是编辑器打开的项目根目录，也不是 Sublime Text 的工作区根目录。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 一律用相对路径，且从 HTML 文件位置出发计算：比如
./js/main.js表示同级js文件夹下的文件；../assets/style.css表示上层目录的assets文件夹 - 避免使用
~/或绝对路径（如/css/style.css），它会相对于域名根目录，在本地file://下完全无效 - Sublime Text 中可用侧边栏右键 → “Copy File Path” 粘贴后手动转成相对路径，比凭感觉写更可靠
中文注释或内容显示为乱码
典型表现是页面中出现方块、问号或一堆乱码字符，控制台可能提示 Resource interpreted as Stylesheet but transferred with MIME type text/plain。
这不是 HTML 本身的问题，而是文件保存编码与 <meta charset> 声明不一致，或服务器未返回正确 Content-Type 头。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 用 Sublime Text 保存时务必选
UTF-8编码（菜单：File → Save with Encoding → UTF-8） - HTML 文件开头必须有且仅有一条
<meta charset="UTF-8">，放在<head>最前面 - 如果用
http-server，默认返回text/html; charset=UTF-8，无需额外配置；但 Python 的http.server默认不带 charset，此时必须靠<meta>补救
在线运行时视频/音频无法自动播放
页面加载后 <video autoplay> 静音也不播，控制台没报错，但播放器 UI 显示暂停图标。
这是浏览器策略变更：2018 年起 Chrome/Firefox/Safari 全面启用“自动播放策略”，要求 autoplay 必须配合 muted，否则被静音拦截。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 加
muted属性：<video autoplay muted controls></video> - 若需带声自动播放，必须由用户手势（如 click/tap）触发
play()，不能在DOMContentLoaded里直接调 - 检查
preload值：设为"metadata"可加快首帧加载，但不会绕过自动播放限制
真正卡住人的从来不是语法，而是浏览器怎么解释你写的那几行路径和编码——尤其当你在 Sublime Text 里改完保存，双击就跑，却忘了它根本不是服务器环境。
