HTML 文件怎么创建？附 3 种方法从零开始讲清楚

HTML 文件怎么创建？3 种方法一次讲清

学做网页的第一步，就是创建一个 HTML 文件，可很多人卡在这里：用什么软件写？存成什么格式？双击后为什么显示的是代码？HTML 文件怎么创建？答案很简单——它就是一个以 .html 结尾的纯文本文件，用记事本写内容再保存就能创建，浏览器打开自动渲染成网页。这篇文章，编程狮用最直白的方式，把「新建 HTML 文件」彻底讲懂。

本文覆盖记事本、代码编辑器、在线工具三种创建方式，并附横向对比和踩坑清单。看完你不仅能亲手建出第一个网页，还能理解每种方式的适用场景，以后想升级工作流也知道往哪个方向走。

一、HTML 文件到底是什么

HTML 文件怎么创建，第一步是理解它只是个文本文件。HTML 文件是一个纯文本文件，扩展名是 .html（也常写作 .htm）。你可以把它理解成一张「带格式的信纸」：信纸本身是普通纸张（纯文本），上面用特定符号（HTML 标签）标注了哪里是标题、哪里是段落、哪里放图片，浏览器拿到这封信后再按标注渲染成你看到的网页。

1.1 最小的 HTML 文件长什么样

任何一个 HTML 文件都可以先写成这样：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>编程狮(www.w3cschool.cn)</title>
</head>
<body>
    <h1>你好，编程狮</h1>
    <p><a href="https://www.w3cschool.cn/">编程狮官网</a></p>
</body>
</html>

上面这段做的是：<!DOCTYPE html> 告诉浏览器"这是 HTML5 文档"；<head> 里放网页的元信息（比如 charset="UTF-8" 声明用 UTF-8 编码，中文才不会乱码）；<body> 里才是读者能看到的内容。把这 10 行存成 .html 文件，双击打开，就是你第一个能跑的网页。标签记不全没关系，把 HTML 参考手册当字典随查随用就行。

💡 小提示：初学者不用背全部标签，记住「<head& 是配置区、<body& 是内容区」这一个骨架就够起步了。

1.2 常见误解

很多人以为做网页必须用 Dreamweaver、FrontPage 这类「网页制作软件」。其实 HTML 只是文本，任何能打字保存的软件都能创建 HTML 文件——记事本、文本编辑、代码编辑器，甚至手机备忘录都行。区别只在于：专业工具能帮你补全标签、高亮语法、实时预览，效率更高。

二、方法一：用记事本创建（零依赖，最快上手）

适合只想先体验一下、不想装任何软件的你。Windows 和 macOS 都自带文本工具。

2.1 Windows 记事本

在桌面空白处右键 →「新建」→「文本文档」；
把上面的最小 HTML 代码粘贴进去；
菜单「文件」→「另存为」，文件名写 index.html，编码选 UTF-8（重要，否则中文会乱码）；
保存类型选「所有文件」，避免被偷偷加个 .txt 后缀。

Windows 记事本另存为时：文件名 index.html、编码 UTF-8、保存类型「所有文件」

上面这步做的是：让系统把文件按 index.html 保存而不是 index.txt。保存后双击文件，默认浏览器就会打开渲染。

2.2 macOS 文本编辑

打开「文本编辑」（Launchpad 里搜 TextEdit）；
菜单「格式」→「制作纯文本」，把富文本切成纯文本（否则保存的是 .rtf 格式，不是 HTML）；
粘贴代码，菜单「文件」→「存储」，文件名写 index.html，编码选 UTF-8；
如果系统询问「是否使用 .html 扩展名」，选「使用」。

⚠️ 注意：无论是哪个系统，保存后都要确认文件图标不是"文本文档/RTF 文档"。如果右键属性里扩展名仍是 .txt 或 .rtf，浏览器不会把它当网页解析。

三、方法二：用代码编辑器创建（推荐，长期路径）

当你开始写多行代码、需要高亮和自动补全时，记事本就吃力了。推荐装一个免费代码编辑器，如 VS Code——它的安装和常用操作可以看 VS Code 教程，这也是目前最主流的做法。

打开 VS Code，菜单「文件」→「新建文件」；
输入第一行 ! 后按 Tab，编辑器会自动补全 HTML5 骨架（比手写快得多）；
按 Ctrl + S（macOS 是 Cmd + S）保存，文件名写 index.html；
文件名旁边的语言标识会显示为 HTML，说明编辑器已识别；
想实时预览，可以装 Live Server 插件，右键文件「Open with Live Server」，浏览器会随保存自动刷新。

# 在项目目录里用命令行创建也可以（Windows / macOS / Linux 通用）
echo "<h1>你好！编程狮</h1>" > index.html

上面这步做的是：在命令行把字符串直接写进 index.html。适合你已经会打开终端、想快速搭文件骨架的场景。

💡 小提示：VS Code 这类编辑器自带语法高亮和标签自动闭合，写错标签当场就能发现，强烈建议从这一步开始长期使用。

四、方法三：用在线工具直接写（免安装、带预览）

如果只是临时起意、不想在电脑上装任何软件，可以直接用在线代码工具：在浏览器里输入代码，右侧实时看渲染效果，连保存这一步都省了。想系统学一遍 HTML 语法，可以对照 HTML 教程的基础章节边写边看。

在线工具的使用路径基本一致：打开工具页 → 左侧 HTML 编辑区粘贴代码 → 右侧即时预览 → 把满意的代码复制回本地存成 .html 文件，就完成了「在线写 + 本地存」的闭环。

方式	适合谁	优点	代价
记事本	只体验一次	零安装	无高亮、易存错格式
代码编辑器	长期学习/开发	高亮、补全、预览	需要安装一个软件
在线工具	临时演示/手机	免安装、实时预览	代码存在云端，记得另存

HTML 文件创建的三种方式怎么选？

五、踩坑清单

把新手做完之后最常卡住的四个点列出来：

存成了 .txt 文件：双击打开看到的是一堆代码而不是网页。原因是保存时类型没选「所有文件」或文件名带了 .txt。Windows 默认隐藏扩展名，可以在资源管理器「查看」里勾选「文件扩展名」来确认。
中文变成乱码：绝大多数情况是文件保存时编码不是 UTF-8。记事本另存为时务必选 UTF-8；如果已经乱码，用编辑器重新以 UTF-8 另存即可修复。
双击 .html 打开的是代码不是页面：在 Windows 上默认关联被改过，右键文件 →「打开方式」→ 选择浏览器即可。
用记事本打开了 .html 还以为是预览：双击默认可能被记事本接管，同样用「打开方式」改成 Chrome / Edge。

⚠️ 注意：如果你的 HTML 里引用了本地图片（<img src="logo.png"&），图片和 HTML 文件要放在同一文件夹，路径才能对上，否则浏览器里会显示破图。

总结

HTML 文件怎么创建？答案很朴素：它就是 .html 结尾的纯文本文件，记事本写、代码编辑器写、在线工具写都可以，保存后交给浏览器渲染即可。

要点带走：

HTML 文件 = 纯文本 + .html 后缀 + 浏览器渲染；
保存时编码选 UTF-8、类型选「所有文件」，别让它变成 .txt；
长期学习建议直接用代码编辑器（VS Code），比记事本效率高一个档次。

下一步建议把 HTML 的基础标签过一遍，尤其是 <head> 和 <body> 的分工；语法记不住时翻 HTML 速查手册，写的时候随查随用。

延伸学习

想把网页基础打牢，可以按这个顺序来：

配套课程：HTML入门课程(含HTML5)，图文微课形式，边看边敲比单看教程记得牢；
写出来的代码想压缩一下体积：HTML压缩格式化一键搞定；
想看别人从零搭一个网页的真实路径，这篇从零开始搭建你的第一个网页和你现在的进度最贴。

常见问题

Q：HTML 文件必须叫 index.html 吗？
A：不是必须。index.html 只是服务器默认的首页文件名，本地双击打开叫什么都行。但如果以后要部署到服务器，首页文件叫 index.html 会被自动识别为主页。

Q：.html 和 .htm 有什么区别？
A：没有本质区别，.htm 是早期 Windows 8.3 文件名限制时代的产物，现在统一用 .html 即可。

Q：写好的 HTML 怎么发给别人看？
A：直接把 .html 文件发给对方，双击就能看（只要不依赖本地图片路径）。要让全网都能访问，则需要部署到服务器或静态托管平台，那属于下一步的话题。

Q：为什么不装软件、用手机备忘录能创建 HTML 吗？
A：能。只要存成 .html 扩展名就行。但手机上不方便管理文件和预览，更适合用在线工具，写完复制到电脑上保存。