index.html必须包含4个核心标签：①顶格首行；②明确语言；③中含和；④非空且唯一。
index.html 必须包含的 4 个核心标签
浏览器只认标准结构，缺任何一个都可能导致渲染异常或 SEO 失效。不是“能显示就行”，而是“必须按顺序、带必要属性写”。
必须顶格写在第一行，不能有空格或注释前置；漏掉会触发怪异模式（Quirks Mode），CSS 布局全乱-
的lang属性要明确，否则屏幕阅读器和搜索引擎无法判断语言，影响可访问性与搜索排名 -
里至少要有<meta charset="UTF-8">和<meta name="viewport" content="width=device-width, initial-scale=1.0">；前者不写，中文可能变乱码；后者不写，移动端页面会缩成一团 -
<title></title>必须存在且唯一，不能留空；它不仅是浏览器标签页文字，更是 SEO 的一级权重字段
body 里别直接堆 div：用语义化标签组织骨架
很多人写 <div id="header"> <code><div id="nav"> <code><div id="main">，看似清晰，实则放弃 HTML5 提供的原生语义能力。搜索引擎和辅助工具靠标签含义理解结构，不是靠 class 名。
<ul><li>页头统一用 <code><header></header>，不是 <div class="header">；它天然表示页面或章节的介绍性内容
<li>导航区块必须用 <code><nav></nav>，而非 <div class="nav">；屏幕阅读器遇到 <code><nav></nav> 会提示“导航区域”，用户可一键跳转
<main></main>，且整个页面只能有一个；<section></section> 用于逻辑分块（如“技能”“作品”），@#@#@#@#@#@#@#@#@#@0，不能加 ./ 或 /about.html（后者是绝对路径，本地双击打开会失败）pages/ 目录，index.html 中链接必须是 <a href="pages/contact.html"></a>，而不是 <a href="/pages/contact.html"></a>（开头斜杠会让本地文件协议 file:// 下直接 404）<img src="images/avatar.jpg"> 要求实际存在 images/ 子目录；若写成 <img src="./images/avatar.jpg">，多数情况能工作，但多余点号易引发混淆，建议统一省略username.github.io/repo-name），所有相对路径仍有效；但若误配为用户站点（username.github.io），则需确保 index.html 在仓库根目录，否则路径全部偏移为什么本地双击打开 index.html 总是样式丢失？
这不是 CSS 写得不对，而是浏览器安全策略限制：当用 file:// 协议打开 HTML 文件时，现代浏览器默认阻止加载本地 CSS/JS，除非路径完全匹配且无编码问题。
- 检查
<link rel="stylesheet" href="style.css">中的href值——它必须和实际文件名**大小写完全一致**（macOS/Linux 区分大小写，Windows 不区分，但部署后服务器通常区分） - CSS 文件不能放在子目录却写成根路径引用；例如 CSS 实际在
css/style.css，但<link>写的是href="style.css"，就会 404 - VS Code 里右键“Open with Live Server”比双击更可靠，它起一个本地
http://127.0.0.1:5500服务，绕过file://限制 - 如果坚持双击测试，把所有资源（HTML/CSS/JS/images）放在同一目录下，用最简路径：
href="style.css"、src="script.js"、src="logo.png"
lang 属性漏写、viewport 缺失、路径多了一个点、CSS 文件名大小写错了一位——这些细节不报错，但让效果彻底消失。
