Appearance
HTML 编辑器
什么是 HTML 编辑器
HTML 编辑器是用于创建和编辑 HTML 代码的软件工具。你可以使用任何文本编辑器来编写 HTML，但专业的 HTML 编辑器能提供更多便利功能。
使用记事本或文本编辑器
你可以使用 Windows 自带的记事本来学习 HTML：
- 打开记事本（在开始菜单中搜索"notepad"）
- 编写 HTML 代码
- 保存文件时，将扩展名改为
.html - 用浏览器打开这个文件
使用记事本的步骤：
步骤 1： 打开记事本
步骤 2： 编写 HTML 代码
html
<!DOCTYPE html>
<html>
<head>
<title>我的第一个网页</title>
</head>
<body>
<h1>Hello World!</h1>
<p>这是我的第一个网页。</p>
</body>
</html>步骤 3： 保存 HTML 文件
- 点击文件 → 另存为
- 文件名：
index.html - 保存类型：所有文件
- 编码：UTF-8
步骤 4： 在浏览器中查看 双击保存的 HTML 文件，它会在默认浏览器中打开。
推荐的 HTML 编辑器
免费编辑器
1. Visual Studio Code (VS Code)
- 微软开发的免费编辑器
- 支持语法高亮、自动补全
- 丰富的扩展插件
- 下载地址：https://code.visualstudio.com/
2. Notepad++
- 轻量级的代码编辑器
- 支持多种编程语言
- 语法高亮功能
- 下载地址：https://notepad-plus-plus.org/
3. Atom
- GitHub 开发的开源编辑器
- 可定制性强
- 丰富的插件生态
在线编辑器
1. CodePen
- 网址：https://codepen.io/
- 在线编写 HTML、CSS、JavaScript
- 实时预览效果
2. JSFiddle
- 网址：https://jsfiddle.net/
- 在线代码测试和分享平台
3. W3Schools Tryit Editor
- 网址：https://www.w3schools.com/tryit/
- 简单易用的在线 HTML 编辑器
编辑器的基本功能
语法高亮
- 不同的 HTML 标签用不同的颜色显示
- 帮助识别代码结构
- 减少编写错误
自动补全
- 输入标签时自动提示
- 减少拼写错误
- 提高编码效率
括号匹配
- 自动匹配开始和结束标签
- 帮助检查标签是否正确闭合
实时预览
- 边编写边预览效果
- 快速发现问题
学习建议
初学者推荐使用记事本
- 强制你记住所有标签
- 帮助理解 HTML 基本结构
有基础后使用专业编辑器
- VS Code 是最推荐的选择
- 功能强大且完全免费
在线编辑器用于快速测试
- 不用安装软件
- 方便分享代码
小贴士
- 保存 HTML 文件时一定要使用
.html扩展名 - 使用 UTF-8 编码避免中文乱码问题
- 养成良好的代码缩进习惯
- 定期保存你的工作
下一章我们将开始学习 HTML 的基础知识和标签结构。