网页需满足四要素：后缀为.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/js/426" title="网格图片手风琴jquery特效代码"><img src="https://img.php.cn/upload/jscode/000/000/001/58c3887cd9c6d940.png" alt="网格图片手风琴jquery特效代码"></a> <div class="aritcle_card_info flexColumn"> <a href="/xiazai/js/426" title="网格图片手风琴jquery特效代码">网格图片手风琴jquery特效代码</a> <p>网格图片手风琴jquery特效代码，结合网格手风琴缩略图和手风琴面板的功能，给你展示你的图片网站一个有趣的方法。你可以选择使用XML或HTML。功能强大的API将允许进一步提高这个jQuery插件的功能，可以方便地集成到您自己的应用程序。兼容主流浏览器，php中文网推荐下载！ 使用方法： 1、在head区域引入样式表文件style.css和grid-accordion.css 2、在head</p> </div> <a href="/xiazai/js/426" title="网格图片手风琴jquery特效代码" 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:// 下静默失败的情况，最容易花半天查代码逻辑，其实根本没跑起来。 
