繁体

windows10怎么创建html

老刘

Windows 10 怎么创建 HTML 文件？新手也能一步一步学会

关键词：Windows 10 创建 HTML 文件

很多人第一次接触网页制作，最先要做的就是：在 Windows 10 里创建一个 HTML 文件。其实这件事并不复杂，不需要安装什么高级软件，系统自带的记事本就能完成。
如果你只是想快速写一个网页测试页面，或者学习前端入门，这篇内容足够你直接上手。

一、先搞清楚：HTML 文件到底是什么

HTML 是网页的基础语言，网页里的文字、图片、标题、按钮、链接，基本都靠它来组织。

一个 HTML 文件的本质其实就是：

  • 一个普通文本文件
  • 只是文件扩展名从 .txt 改成了 .html 或 .htm

也就是说，你在 Windows 10 上创建 HTML 文件，核心步骤就是：

  1. 新建一个文本文件
  2. 把内容写成 HTML 代码
  3. 把后缀名改成 .html
  4. 用浏览器打开查看效果

二、Windows 10 创建 HTML 文件的最简单方法

方法一：用记事本创建 HTML 文件

这是最适合新手的方式，不需要安装任何软件。

第一步：打开记事本

你可以这样做：

  • 点击左下角 开始菜单
  • 搜索 记事本
  • 打开它

第二步：输入一段 HTML 代码

先输入下面这段最基础的网页代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>我的第一个网页</title>
</head>
<body>
    <h1>Hello，HTML！</h1>
    <p>这是我在 Windows 10 里创建的第一个 HTML 文件。</p>
</body>
</html>

这段代码的意思很简单：

  • <!DOCTYPE html>：声明这是 HTML5 页面
  • <html>：网页的开始
  • <head>：网页头部，放标题、编码等信息
  • <meta charset="UTF-8">：防止中文乱码
  • <title>：浏览器标签页上显示的标题
  • <body>：网页正文，真正显示内容的地方
  • <h1>：一级标题
  • <p>：段落文字

第三步：另存为 HTML 文件

这一步最关键，很多新手都会在这里弄错。

在记事本里：

  • 点击左上角 文件
  • 选择 另存为

然后按下面设置：

  • 文件名：index.html
  • 保存类型：选择 所有文件
  • 编码：选择 UTF-8
  • 保存位置：比如桌面

注意

一定不要保存成：

  • index.html.txt
  • index.txt

正确的后缀必须是：

  • .html
  • 或 .htm

第四步：用浏览器打开

保存完成后，你会看到一个 HTML 文件图标。

然后你可以：

  • 双击这个文件
  • 系统会自动用浏览器打开
  • 看到你刚才写的网页内容

如果没有自动打开，也可以：

  • 右键文件
  • 选择 打开方式
  • 选择 Microsoft Edge、Chrome、Firefox 等浏览器

三、为什么你保存后可能不是 HTML 文件？

这个问题很常见，尤其是新手。

原因一：Windows 默认隐藏了文件扩展名

很多时候你看到文件名是 index.html，其实真实文件名可能是：

  • index.html.txt

只是系统把后缀藏起来了。

解决方法：

打开文件扩展名显示

  1. 打开 文件资源管理器
  2. 点击顶部的 查看
  3. 勾选 文件扩展名

这样你就能看到文件真正的后缀。

原因二：保存类型选错了

如果你在记事本“另存为”时没有选择：

  • 所有文件

那系统很可能默认帮你加上 .txt。

正确做法：

  • 文件名输入：index.html
  • 保存类型选择：所有文件
  • 编码：UTF-8

四、除了记事本，还有哪些方法可以创建 HTML 文件

如果你以后想更高效地写网页，可以用更专业的编辑器。

方法二：用 VS Code 创建 HTML 文件

这是很多前端开发者常用的软件，免费、好用、功能强。

操作步骤：

  1. 下载并安装 Visual Studio Code
  2. 打开软件
  3. 新建文件
  4. 输入 HTML 代码
  5. 按 Ctrl + S 保存
  6. 文件名写成 index.html
  7. 双击用浏览器打开

VS Code 的优势：

  • 自动补全代码
  • 语法高亮
  • 容易看错别字和结构错误
  • 适合长期学习网页开发

如果你只是临时创建一个 HTML 文件，记事本就够了；如果你准备认真学前端，建议直接上 VS Code。

五、一个完整的 HTML 文件示例

如果你想做一个更像样一点的网页，可以直接用下面这个版本：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>个人主页</title>
    <style>
        body {
            font-family: Arial, "Microsoft YaHei", sans-serif;
            background: #f5f5f5;
            padding: 40px;
        }
        .box {
            max-width: 600px;
            margin: 0 auto;
            background: #fff;
            padding: 30px;
            border-radius: 10px;
            box-shadow: 0 0 10px rgba(0,0,0,0.1);
        }
        h1 {
            color: #333;
        }
        p {
            line-height: 1.8;
            color: #666;
        }
    </style>
</head>
<body>
    <div class="box">
        <h1>欢迎来到我的网页</h1>
        <p>这是一个在 Windows 10 中创建的 HTML 文件示例。</p>
        <p>你可以在这里继续添加图片、链接、按钮和更多内容。</p>
    </div>
</body>
</html>

这个版本比最基础版更美观，也顺便加了简单的样式。

六、创建 HTML 文件时最容易踩的坑

1. 文件后缀没改对

这是最常见的问题。

错误：

  • test.html.txt

正确：

  • test.html

2. 中文乱码

如果你写了中文，打开后变成乱码，通常是编码问题。

解决方法：

保存时选择：

  • UTF-8

并且 HTML 里要写：

<meta charset="UTF-8">

3. 文件打开后显示的是代码，不是页面

如果你用记事本打开 HTML 文件，那看到的一定是代码，不是网页。

解决方法：

  • 用浏览器打开，比如 Edge、Chrome

4. 修改后网页没变化

有时候你改了文件，但浏览器还是老内容。

解决方法：

  • 按 Ctrl + F5 强制刷新
  • 或者重新保存后再打开

七、适合小白的最简操作流程

如果你记不住太多，就按这个流程来：

  1. 打开记事本
  2. 写 HTML 代码
  3. 点击“文件” → “另存为”
  4. 文件名写 index.html
  5. 保存类型选“所有文件”
  6. 编码选 UTF-8
  7. 双击文件，用浏览器打开

这 7 步就是 Windows 10 创建 HTML 文件的标准做法。

八、如果你想快速验证 HTML 是否创建成功

你可以复制下面这段最小代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>测试页面</title>
</head>
<body>
    <h1>HTML 创建成功</h1>
</body>
</html>

保存为 test.html 后，用浏览器打开，如果看到“HTML 创建成功”，就说明你已经会创建 HTML 文件了。

九、进阶一点的建议

如果你准备继续学网页开发，可以顺手养成这几个习惯：

1. 文件命名尽量用英文

比如：

  • index.html
  • about.html
  • contact.html

不要总用中文文件名，避免兼容性问题。

2. 网页项目单独建文件夹

建议你每个项目都放到一个独立文件夹里，比如：

  • myweb
    • index.html
    • style.css
    • script.js

这样后续管理更清楚。

3. 先学最基础的标签

建议顺序是：

  • 标题标签 h1-h6
  • 段落标签 p
  • 链接标签 a
  • 图片标签 img
  • 列表标签 ul、ol
  • 容器标签 div

十、总结

在 Windows 10 里创建 HTML 文件，最简单的方法就是：

  • 用记事本或 VS Code 写代码
  • 保存时把文件名改成 .html
  • 保存类型选“所有文件”
  • 编码选 UTF-8
  • 最后用浏览器打开

如果你只是想快速做一个网页测试，记事本完全够用；如果你想长期学习网页开发，建议直接用 VS Code，这样效率更高，也更不容易出错。

HTML 文件创建成功后，你就已经迈出了网页开发的第一步。

文章版权声明：文章内容均来源于各大短视频平台搜集以及修改和删减新增，如有侵权或者违规，请联系站长进行删除，如需转载或复制请以超链接形式并注明出处。

相关阅读

发表评论

快捷回复： 表情：
AddoilApplauseBadlaughBombCoffeeFabulousFacepalmFecesFrownHeyhaInsidiousKeepFightingNoProbPigHeadShockedSinistersmileSlapSocialSweatTolaughWatermelonWittyWowYeahYellowdog
验证码
评论列表 （暂无评论，3人围观）

还没有评论，来说两句吧...

目录[+]