第一个HTML文件可用记事本编写,关键要保存为UTF-8无BOM编码、扩展名.html且保存类型选“所有文件”;标准结构需含、、、和等标签。

用记事本就能写出来的第一个 HTML 文件
不需要安装任何软件,Windows 自带的记事本、macOS 的文本编辑(纯文本模式)、VS Code 都能直接新建并保存为 .html 文件。关键不是“怎么新建”,而是“保存时必须选对编码和扩展名”——很多人卡在这一步,双击打开是乱码或直接下载,其实是没保存成 UTF-8 无 BOM 格式。
- 在记事本中写完内容后,点「文件 → 另存为」
- 「文件名」填
index.html(不能是index.html.txt) - 「编码」选
UTF-8(Windows 记事本里叫“UTF-8”,不是“ANSI”或“Unicode”) - 「保存类型」选「所有文件」,否则会自动加
.txt
最简 HTML5 页面结构必须包含哪些标签
HTML5 不再强制要求 、、 全写,但实际开发中漏掉它们会导致语义混乱、CSS/JS 加载异常、SEO 失效。浏览器能“容错渲染”,不代表你应该依赖它。
我的第一个页面 Hello World
必须顶格写在第一行,不能有空格或注释前置-
必须放在内且尽量靠前,否则中文可能乱码 -
中的lang属性影响屏幕阅读器和搜索引擎识别语言
双击打不开?检查这三件事
常见错误不是代码写错,而是环境或操作疏忽。尤其新手容易反复试错却忽略路径和协议问题。
- 文件路径含中文或空格:改成
D:\demo\index.html这种纯英文路径再试 - 用 Chrome 直接双击打开时地址栏显示
file:///开头——这是正常行为;但如果页面空白,右键「查看页面源代码」确认是否真的保存成功 - 修改后没刷新:Chrome 按
Ctrl + F5强制重载,避免缓存旧版本 - 误把文件存在系统目录(如
C:\Windows):部分系统会拦截访问,移到桌面或文档目录再试
后续想加样式或交互,从哪一行开始改
静态页面不是“只能放文字”。只要在正确位置插入代码,立刻生效。别被“静态”二字吓住——它只表示不依赖服务器端语言(如 PHP),不是功能受限。
立即学习“前端免费学习笔记(深入)”;
- 加 CSS:在
里加,或外链 - 加 JS:在
前加,确保 DOM 已就绪 - 图片路径写相对地址:
表示和 HTML 同目录;不要用
C:\xxx\photo.jpg这种绝对路径
真正容易被忽略的是:所有路径都以当前 HTML 文件为基准,而不是你双击打开时所在的文件夹。哪怕你从桌面双击运行,它的“根”仍是那个 index.html 所在目录。










