如何创建并保存HTML文件?零基础入门教程

原文:如何创建并保存HTML文件?零基础入门教程 | w3cschool笔记

本文将以Windows系统为例,教你用最简单的记事本创建并保存第一个HTML网页。

📝 第一步:准备工具

  1. 文本编辑器:使用系统自带的记事本(无需下载)。

    • 按下 Win + S,输入"记事本"并打开。
  2. 浏览器:Chrome、Edge等均可。

🛠️ 第二步:创建HTML文件

  1. 新建文本文档

    右键桌面或文件夹 → 选择"新建" → "文本文档"。

  2. 重命名为.html文件

    • 右键新建的文档 → 选择"重命名"。
    • 将文件名改为 index.html(关键步骤!)

    若看不到.txt扩展名

    打开文件夹顶部菜单【查看】→ 勾选【文件扩展名】。

✏️ 第三步:编写HTML代码

  1. 右键 index.html → 选择"打开方式" → "记事本"。

  2. 输入以下代码(复制粘贴即可):

    复制代码
    <!DOCTYPE html>
    <html>
    <head>
       <title>我的第一个网页 | 编程狮(w3cschool.cn)</title>
    </head>
    <body>
       <h1>欢迎来到编程狮!</h1>
       <p>我正在编程狮学习HTML!🐱💻</p>
    </body>
    </html>

💾 第四步:保存文件

  1. 按下 Ctrl + S 保存。

  2. 确保保存类型正确

    • 点击"保存类型"下拉框 → 选择【所有文件 (.)】
    • 确认文件名结尾为 .html(如 index.html

🌐 第五步:在浏览器中查看

  1. 双击 index.html 文件,浏览器会自动打开。

  2. 效果应显示大标题和段落文字,如下图:

🔄 修改并更新网页

  1. 右键文件 → 用记事本重新打开。

  2. 修改文字(如将"编程狮"改为"W3Cschool")→ 保存。

  3. 返回浏览器 → 按下 F5 刷新页面,立即查看变化!

❓ 常见问题解答

  1. 文件打开方式错误?

    • 右键.html文件 → "属性" → 将打开方式设置为浏览器。
  2. 代码没效果?

    • 检查标签是否闭合(如</h1>)。
    • 确保文件扩展名是.html而非.txt
  3. 中文显示乱码?

    • 保存时选择编码为 UTF-8:文件 → 另存为 → 底部编码选择UTF-8。

🚀 进阶推荐

  • 专业编辑器 :VS Code(来自微软的免费且高亮代码编辑器)
    下载地址:code.visualstudio.com/

  • AI 编辑器:Trea(字节跳动退出的免费AI IDE,专为中国开发者打造)

    下载地址:trae.com.cn/

  • 在线编译器:HTML在线编译器(W3Cschool提供的免下载HTML在线免费编译器)

    在线地址:www.w3cschool.cn/tryrun/runcode?lang=html

下一步学习建议:学会基础操作后,可尝试添加图片、链接等元素,逐步构建完整网页!

相关推荐
吴声子夜歌41 分钟前
ApacheCommons——commons-pool2(高性能通用对象池框架)
java·开发语言·apache
BYSJMG1 小时前
计算机毕设选题做什么好?基于大数据的用户健身行为数据分析与可视化系统,Hadoop+Spark处理
大数据·人工智能·hadoop·数据分析·spark·课程设计
知见漫记5 小时前
AI 桌面 Agent 本地执行能力技术对照:沙箱机制与权限模式拆解
大数据·人工智能
_阿南_5 小时前
项目中新增给AI制定的代码规范
前端·程序员
名字还没想好☜6 小时前
React 实现暗黑模式切换:localStorage 持久化、SSR 首屏闪烁与跟随系统主题
前端·javascript·react.js·ecmascript·react·next.js
数商云企6 小时前
2026年陕西软件开发首选数商云企AI微入口小程序定制方案
人工智能·小程序
吴佳浩6 小时前
FDE:从系统落地工程师,演变为企业 AI 能力的知识架构师
人工智能·llm·ai编程
kruptos6 小时前
分布式系统怎么“选主“?Raft 共识一次讲清
开发语言·分布式·php·共识算法
吴佳浩6 小时前
从 OpenClaw、Codex 到 Hermes,看懂 AI Agent 架构为什么正在收敛
人工智能·llm·agent
hanbon6 小时前
标书制作流程与技巧:从读标到装订
人工智能·招投标·ai写标书·技术标