双击index.html显示空白或代码，主因是浏览器未正确解析html：文件实际为index.html.txt（扩展名被隐藏）、使用中文标点、内容误写在中、大小写敏感路径错误，或file://协议限制；应检查真实扩展名、用vs code+live server启动http服务。
别学“HTML是什么”，直接从能跑起来的代码开始——第一行写完，5秒内必须在浏览器里看到效果，否则就卡住了。
怎么让 index.html 双击就显示内容，而不是一片空白？
不是代码写错了，是浏览器根本没加载成功。常见断点就那几个：
- 文件后缀不是
.html（比如记事本默认存成index.txt，或扩展名被系统隐藏） - 用了中文标点：
＜div＞或全角空格，浏览器直接跳过整行 - 内容写在
里了，比如把<h1>Hello</h1>放在<title></title>下面——不渲染可见内容 - 路径错得隐蔽：比如
<img src="logo.png">，但图片实际叫LOGO.PNG，Windows 下不敏感，macOS/Linux 会 404
最稳做法：用 VS Code 写，右键 → Open with Live Server，地址变成 http://127.0.0.1:5500/，绕开 file:// 协议限制和缓存干扰。
哪些标签必须写，哪些可以先跳过？
新手常陷在“所有标签都要背”里。其实前 8 小时只盯这 7 个就够了：
—— 必须放在第一行，大小写不敏感但不能漏-
——lang属性加不加不影响显示，但影响屏幕阅读器和 SEO，建议写上 -
<meta charset="UTF-8"> <title>页面标题</title>——charset防乱码，<title></title>是唯一必须填内容的子标签 -
—— 所有你能看见的东西都得包在里面 -
<h1></h1>～<h6></h6>—— 标题层级，别用style="font-size:32px"模拟<h1></h1> -
<p></p>—— 段落，不是“换行”，是语义分组；连续两个<p></p>自带间距，别用<br>堆 -
@#@#@#@#@#@#@#@#@#@0和<img src="pic.jpg" alt="描述">——alt属性不是可选，是强制可访问性要求
为什么改了代码，刷新页面还是老样子？
大概率是缓存，不是你写错了。尤其 Windows 记事本保存后，Chrome 经常读的是旧缓存页。
- 强制刷新：
Ctrl + F5（Windows）或Cmd + Shift + R（Mac） - 右键页面 → “查看页面源代码”，确认看到的是你刚保存的内容，不是快照
- 检查地址栏：如果是
file:///D:/xxx/index.html，部分 JS/CSS 会被 Chrome 拦截（CORS 错误），这时必须用Live Server - VS Code 安装
Prettier插件，保存自动格式化，能快速暴露漏掉的或错位的
Emmet 是什么，为什么它比教程更重要？
不是炫技工具，是防手残的第一道防线。写错一个尖括号，整个结构就塌，而 Emmet 自动生成闭合标签。
- 输入
!+Tab→ 补全完整 HTML5 骨架 - 输入
header>nav>ul>li*3+Tab→ 生成带嵌套的导航结构 - 输入
.container#main+Tab→ 生成<div class="container" id="main"></div> - 输入
p{段落内容}+Tab→ 生成<p>段落内容</p>，内容自动包裹
真正卡住人的从来不是标签记不住，而是闭合遗漏、嵌套错层、编码不一致这些看不见的细节——Emmet 把它们挡在键盘敲下去的那一刻。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
