编辑器与开发环境 - HTML 教程

讲解

写 HTML 不需要任何昂贵或复杂的工具：任何能保存纯文本的编辑器都可以，但一个好编辑器能显著提高效率。目前前端开发的事实标准是 Visual Studio Code（简称 VS Code），免费、跨平台、插件生态庞大。安装后建议装上 Prettier（自动格式化）和 Live Server（保存后浏览器自动刷新）两个插件，前者让代码永远整齐，后者免去手动刷新的麻烦。

VS Code 内置了 Emmet，这是一套 HTML 速记语法：输入 p>strong 再按 Tab，会自动展开成 <p><strong></strong></p>；输入 ! 再按 Tab，会展开成一整页标准的 HTML 骨架。熟练 Emmet 能让写结构的速度快好几倍，教程后面章节的骨架代码你都可以用 ! 一键生成，不必逐字敲。

项目文件的组织也有讲究：一个网站对应一个文件夹，首页固定命名为 index.html（服务器默认会把它作为目录的入口页面），图片放 images/ 目录，样式放 css/ 目录。文件名一律用小写字母、数字和连字符（about-us.html），不要用中文、空格和大写——它们在不同服务器和操作系统上容易出问题。保存文件时编码选 UTF-8，这是中文正常显示的前提。

示例

一个典型的初学者项目目录长这样：

my-site/
├── index.html        ← 首页，固定文件名
├── about.html        ← 关于页
├── css/
│   └── style.css     ← 样式文件
├── images/
│   └── logo.png      ← 图片
└── js/
    └── main.js       ← 脚本

在 VS Code 里新建 index.html，输入感叹号按 Tab，立刻得到完整骨架：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body></body>
</html>

记得把 lang="en" 改成 lang="zh-CN"，把 <title> 换成你的页面标题。

常见坑

用 Word 或记事本富文本模式写代码：它们会偷偷插入格式字符或智能引号，导致文件无法解析。必须用纯文本编辑器，并确认保存为 UTF-8。
文件名带中文或空格：我的页面.html 在链接里会变成一串 % 编码，还可能因大小写敏感问题在服务器上 404。
直接双击文件用 file:// 打开就以为万事大吉：本地开发大多够用，但涉及路径、fetch 等特性时 file:// 会有差异，建议用 Live Server 起一个本地服务。
装一堆插件却不用快捷键：Emmet 展开（Tab）、格式化（Shift+Alt+F）、注释（Ctrl+/）是最高频的三个操作，早记早受益。

小结

VS Code + Prettier + Live Server 是顺手的起步组合，Emmet 的 ! 能快速生成页面骨架。项目目录规范、文件名小写无空格、保存用 UTF-8。下一章逐行拆解 HTML 文档的基本结构。