正在加载...

HTML 编辑器

你已经知道 HTML 是文本文件里的标记。本课关注用来编写该文件的工具：HTML 编辑器。选择简单的纯文本工具能保持标签干净，也方便在浏览器中打开你的第一批页面。

什么是 HTML 编辑器？

HTML 编辑器是任何能让你编写纯文本并保存为 .html 文件的程序。浏览器不在乎品牌，只需要正确的标记和可打开的文件。编辑器范围从小记事本到带语法高亮和文件浏览的代码编辑器都有。

直接回答：初学者该用什么？

从免费代码编辑器开始，例如 Visual Studio Code；也可以用 Windows 自带的记事本，或 macOS 上纯文本模式的 TextEdit。HTML 课程请避免使用 Microsoft Word、Google Docs 或类似文字处理软件。那些应用面向可打印文档，常常插入隐藏格式，从而破坏网页。

纯文本编辑器与代码编辑器

纯文本编辑器只保存你输入的字符，对 HTML 已经足够。代码编辑器同样保存纯文本，但增加有用功能：

  • 语法高亮，让标签和文本更易读
  • 行号，便于定位错误
  • 在一个窗口中管理文件夹和多个文件
  • 以后可选的扩展（本课程不需要）
    学习 HTML 不需要付费的 IDE。

用于保存的最小页面

html
HTML Code 
<!DOCTYPE html>
<html>
<head>
<title>编辑器练习</title>
</head>
<body>
<h1>我在编辑器里写了这个</h1>
<p>已保存为 .html 文件并在浏览器中打开。</p>
</body>
</html>

这个练习文件做什么用？

把示例复制到编辑器，保存为 editor-practice.html，然后用 Chrome、Firefox、Edge 或 Safari 打开。如果能看到标题和段落，说明编辑器与保存设置正常。

如何创建你的第一个 HTML 文件

  1. 打开编辑器并新建文件
  2. 粘贴或输入一份基础 HTML 文档
  3. 用以 .html 结尾的名称保存（例如 index.html）
  4. 若编辑器询问编码，尽量选择 UTF-8
  5. 在浏览器中打开已保存的文件（双击，或把文件拖进浏览器窗口）
    在 Windows 记事本中使用“另存为”，将类型设为“所有文件”，并自己输入 .html 扩展名，以免变成 .txt。

在线编辑器与本站的 Try-it 框

在线沙箱可在浏览器中编辑 HTML，无需安装软件，适合快速试验。本课程也请用本地 .html 文件练习，以掌握真实的“保存并打开”流程。当课程显示 Try-it 代码框时，你可以在那里运行，并在自己的编辑器中重建相同标记。

推荐的免费选项

这些是常见、适合初学者的选择（任选其一即可）：

  • Visual Studio Code — 流行的免费代码编辑器
  • Notepad++（Windows）— 轻量且带高亮
  • Sublime Text — 快速代码编辑器（可免费试用）
  • 系统自带记事本 / 纯文本 TextEdit — 前几课足够
    选一个工具并坚持使用一段时间，让流程变成习惯。

常见错误

  • 在 Word 或 Docs 中写 HTML 并导出，却不理解这些工具添加的额外标记
  • 误存为 .txt，然后奇怪浏览器为何显示原始标签或行为异常
  • 编辑了文件却在刷新浏览器前忘记保存
  • 富文本模式改变引号，或在属性中插入智能标点
  • 指望编辑器自己“运行” HTML——浏览器显示页面；编辑器只保存源代码

小结

  • HTML 在编辑器中以纯文本编写，再保存为 .html
  • 代码编辑器的高亮很有帮助；记事本类工具也能用
  • 学习 HTML 标记时避免使用文字处理软件
  • 先保存，再打开或刷新浏览器以查看更改
  • 在线编辑器很方便；本地文件教会真实工作流
  • 固定使用一个编辑器，好过每课换工具

🧠 测试您的知识

准备开始

测试您的知识

通过这个互动测验挑战自己，看看你对这个主题的理解程度如何

❓
8
问题
🎯
70%
及格要求
♾️
∞
时间
🔄
∞
尝试次数

📝 说明

  • 仔细阅读每个问题
  • 为每个问题选择最佳答案
  • 您可以随时重新参加测验
  • 您的进度将显示在顶部
主题 1 的 1
Html 教程