网页需满足四要素：后缀为.html或.htm、首行严格为、用http://协议本地服务运行、meta charset声明UTF-8无BOM编码，缺一不可。
网页文件后缀名必须是 .html 或 .htm
浏览器只认后缀，不看内容。哪怕文件里写满 HTML 标签，如果后缀是 .txt 或没后缀，双击打开就是纯文本，不会渲染成网页。
- Windows 默认隐藏文件后缀，右键 →「属性」或「重命名」时务必确认显示了完整后缀，别只改名字却漏掉
.html - Mac 和 Linux 用户用终端重命名更可靠：
mv index.txt index.html - 编辑器（如 VS Code）保存时，在弹出的「另存为」对话框里手动输入
index.html，别依赖默认建议的.txt
是必需的，且必须在第一行
没有它，浏览器会进入怪异模式（Quirks Mode），CSS 布局、getBoundingClientRect() 行为、甚至 flex 的默认值都可能和预期不一致——不是报错，而是“看起来差不多但实际不对”。
- 常见错误：空行、BOM 字节、注释或
<meta>标签写在前面 - 正确写法（严格从第 1 行第 1 列开始）：
<!DOCTYPE html> <html> <head><meta charset="utf-8"></head> <body><p>Hello</p><div class="aritcle_card flexRow"> <div class="artcardd flexRow"> <a class="aritcle_card_img" href="/xiazai/skill11244" title="Convert Markdown To HTML And PDF - Markdown和HTML、PDF互转"><img src="https://img.php.cn/upload/skill/001/246/273/6adaf20d79f23518.jpg" alt="Convert Markdown To HTML And PDF - Markdown和HTML、PDF互转" ></a> <div class="aritcle_card_info flexColumn"> <a href="/xiazai/skill11244" title="Convert Markdown To HTML And PDF - Markdown和HTML、PDF互转">Convert Markdown To HTML And PDF - Markdown和HTML、PDF互转</a> <p>实现 Markdown↔ HTML 互转，支持导出 PDF，用于用户请求的文档格式转换。</p> </div> <a href="/xiazai/skill11244" title="Convert Markdown To HTML And PDF - Markdown和HTML、PDF互转" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div></body> </html> - VS Code 中可安装插件「Remove Blank Lines」+ 手动检查首行，避免看不见的字符干扰
用浏览器直接双击打开 ≠ 服务器环境，部分功能会失效
本地双击 index.html 是以 file:// 协议加载，此时 fetch()、XMLHttpRequest、Service Worker、甚至某些 CORS 相关的 iframe 行为会被浏览器拦截——不是代码写错了，是协议限制。
立即学习“前端免费学习笔记（深入）”；
- 开发阶段建议用轻量本地服务：VS Code 安装「Live Server」插件，右键 →「Open with Live Server」
- 命令行可用 Python：
python3 -m http.server 8000，然后访问http://localhost:8000/index.html - 若坚持双击打开，需避免所有跨源请求，静态资源（图片/CSS/JS）必须同目录或相对路径，且不能用
fetch('./data.json')
中文乱码？charset 必须显式声明且与文件编码一致
浏览器猜错编码就直接乱码，尤其 Windows 记事本保存的 GBK 文件配 utf-8 声明，或 UTF-8 BOM 文件配无 BOM 声明，都会出问题。
- 统一用 UTF-8 无 BOM 编码（VS Code 右下角点击编码 →「Save with Encoding」→ 选
UTF-8） -
<meta>标签必须放在最前面：<meta charset="utf-8"> - 不要写成
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">—— 已过时，且部分旧浏览器不识别
file:// 下静默失败的情况，最容易花半天查代码逻辑，其实根本没跑起来。 
