必须用记事本创建index.html时,需确保三点:保存类型选“所有文件”、文件名完整输入为index.html(非index.html.txt)、编码设为UTF-8;必须包含DOCTYPE声明及html/head/body标准结构;需开启文件扩展名显示并强制刷新浏览器(Ctrl+F5)避免缓存误导。

直接用记事本就能创建 index.html,但文件编码、扩展名隐藏、浏览器缓存这三点不处理好,你改了十次都看不到效果。
保存时必须选“所有文件”并手动加 .html
记事本默认保存为 .txt,哪怕你输入的是 index.html,实际文件名会变成 index.html.txt——浏览器根本不会识别它为网页。
- 在记事本「另存为」对话框中,把「保存类型」下拉菜单从「文本文件(*.txt)」改成「所有文件」
- 「文件名」栏里完整输入:
index.html(注意:不是index.html.txt,也不是引号包裹) - 确认「编码」选的是
UTF-8(Windows 10/11 记事本默认是 UTF-8,老版本可能默认 ANSI,会导致中文乱码)
写最简 HTML 结构,避免被浏览器当纯文本解析
如果只写一行 ,部分浏览器(尤其是旧版 IE 或 Edge 兼容模式)可能不触发 HTML 渲染,直接显示源码。Hello
- 必须包含
声明 - 必须有
、、三者嵌套结构 - 推荐开头这样写(复制粘贴即可):
<meta charset="UTF-8"><title>我的首页</title><h1>欢迎来到我的网站</h1>
双击打不开?检查系统是否隐藏了扩展名
即使你选了「所有文件」,如果 Windows 设置了「隐藏已知文件类型的扩展名」,你看到的仍是 index,而真实文件名可能是 index.html.txt 或 index.html 却被当成文本文档打开。
- 打开任意文件夹 → 顶部菜单点「查看」→ 勾选「文件扩展名」
- 找到你的文件,确认完整名称确实是
index.html(没有 .txt,没有空格,没有中文标点) - 右键 → 「打开方式」→ 选 Chrome / Firefox / Edge,不要依赖系统默认关联(有时会错绑到记事本)
改完代码刷新没变化?清空浏览器缓存或强制重载
浏览器对 index.html 缓存极强,尤其本地文件(file:// 协议),改完保存后直接按 F5 很可能还是旧内容。
- 按
Ctrl + F5(Windows/Linux)或Cmd + Shift + R(Mac)强制重载 - 或者在地址栏里删掉当前地址,重新拖拽
index.html文件进去再松手(绕过历史缓存) - 开发阶段建议用 Chrome,右键 → 「检查」→ 在 Network 标签页勾选「Disable cache」
真正卡住人的从来不是语法,而是文件名是否真实以 .html 结尾、编码是否为 UTF-8、浏览器是否真加载了你刚保存的那个文件——这三个点漏一个,就等于没写。
前端入门到VUE实战笔记:立即使用
在学习笔记中,你将探索 前端 的入门与实战技巧!











