跳转至

编辑器与开发环境

学习 HTML 不需要复杂工具。一个支持纯文本编辑的代码编辑器和一个现代浏览器， 就足以完成本教程的全部练习。

学习目标

  • 选择合适的文本编辑器并保存 UTF-8 文件。
  • 建立可重复的文件与目录结构。
  • 使用浏览器开发者工具检查源码、DOM 和网络资源。

核心概念

代码编辑器应至少提供语法高亮、自动缩进、文件搜索和明确的字符编码提示。 Visual Studio Code、Zed、Sublime Text 或其他可信编辑器均可；工具选择不影响 HTML 标准。

建议为练习建立独立目录：

html-practice/
├── index.html
├── styles.css
└── images/
    └── example.png

文件名优先使用小写 ASCII 字母、数字和连字符，避免依赖大小写不敏感的本地文件系统。 例如 study-notes.html 通常比 Study Notes Final.html 更便于部署和链接。

第一个编辑流程

在 index.html 中输入：

<!doctype html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <title>编辑器测试</title>
  </head>
  <body>
    <h1>环境已准备好</h1>
  </body>
</html>

以 UTF-8 保存后用浏览器打开。修改文件并刷新页面即可查看结果；若使用本地开发服务器， 相对 URL、模块和网络行为通常更接近真实站点。

使用开发者工具

  • Elements 或 Inspector 面板显示浏览器最终构建的 DOM，不等于原始文件文本。
  • Network 面板显示资源 URL、状态码、响应头和加载失败原因。
  • Console 面板显示解析或脚本错误，但没有报错不代表 HTML 有效。
  • 无障碍检查器可查看元素角色、名称和标题结构。

不要在控制台粘贴来源不明的代码。浏览器书签脚本、扩展和在线预览工具也可能读取页面内容， 练习涉及令牌或私人数据时应使用隔离环境，并避免提交秘密到版本库。

验证习惯

编辑器补全只能减少拼写错误，不能证明嵌套和语义正确。定期使用 HTML 验证器， 同时用键盘、窄屏视口和至少一个现代浏览器检查实际体验。

常见错误

  • 使用富文本软件编辑 HTML，保存出额外格式或错误编码。
  • 文件实际名为 index.html.txt，却误以为已经创建 HTML 文件。
  • 链接大小写与真实文件名不同，只在本机能够访问。
  • 只看“查看源代码”，忽略脚本或解析器生成的最终 DOM。

相关链接