【HTML系列】第2篇:HTML编辑器

🔧 第二篇：HTML 编辑器

工欲善其事，必先利其器

📝 上期小测验 · 答案公布

1. ✗ 错 — HTML 不是编程语言，是标记语言（Markup Language）2. ✓ B — <head> 标签内容用户看不到，只给浏览器看3. 代码中的错误是<p>标签内嵌套了<div>标签。正确的写法应该是 <div><p>内容</p></div>4. 2行： <head>中的内容不可见。

<body>中的 <h1>Hello</h1>会显示为一级标题“Hello”。

<body>中的 World会显示为一个段落“World”。

标题和段落默认都会换行显示，所以用户能看到两行文字。

5. <!DOCTYPE html>连接告诉浏览器这是 HTML5

<meta charset=”utf-8″>连接告诉浏览器编码格式

<title>连接显示在浏览器标签页上

💡 写在前面：上期我们写了第一个 HTML 文件，但你肯定好奇——”我就用记事本写不行吗？” 行，但效率太低。这期聊聊：写 HTML 到底该用什么工具。

🔹 一、什么是 HTML 编辑器？

简单说，HTML 编辑器就是专门用来写网页代码的工具。你可以用记事本写，但就像用铅笔写作业——能写，但费劲。

一个好的编辑器能帮你：

语法高亮

— 标签自动变色，结构一目了然
自动补全

— 打 <h1> 自动补 </h1>，少写一半字
实时预览

— 写代码的同时看到网页效果
错误提示

— 标签没闭合会提醒你

🔹 二、编辑器推荐

⭐ 首选：VS Code（Visual Studio Code）

微软出品，免费，目前最主流的前端编辑器。

✅ 优点：插件丰富、免费、支持所有系统📥 下载：https://code.visualstudio.com/

📝 最原始：记事本 / Notepad

Windows 自带的记事本就能写 HTML，不用安装任何东西。

✅ 适合：第一次体验写网页，零配置❌ 缺点：没有高亮、没有提示，写着很累

🌐 在线版：菜鸟在线编辑器

不用安装，打开网页就能写代码 + 看效果，非常适合初学者试错。

📥 地址：https://www.jyshare.com/front-end/61/

⚡ 轻量选手：Sublime Text

启动极快，界面简洁，但部分功能需要付费激活（可无限试用）。

🔹 三、手把手：用 VS Code 创建第一个 HTML 文件

⚠️ 还没装 VS Code？先去官网下载安装，全程下一步就行，不懂可以搜”VS Code 安装教程”。

步骤 1：新建文件，写入代码

打开 VS Code → 菜单栏「文件 → 新建文件」→ 粘贴或输入以下代码：

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>我的第一个网页</title>

</head>

<body>

    <h1>你好，HTML！</h1>

    <p>这是我用 VS Code 写的第一行代码。</p>

</body>

</html>

步骤 2：另存为 .html 文件

「文件 → 另存为」→ 文件名填 my-first.html（扩展名必须是 .html）→ 保存在一个好找的文件夹里。

💡 扩展名用 .html 或 .htm 都可以，完全没区别，建议统一用 .html，更直观。

步骤 3：用浏览器打开，看到结果！

找到刚才保存的 my-first.html 文件 → 右键 → 选择浏览器打开（或双击文件）。

✅ 看到网页出来了？恭喜，你已经完成了「写代码 → 保存 → 运行」的完整流程。这才是真正的学习。

🔹 四、两个让你效率翻倍的 VS Code 插件

装了下面这两个插件，写 HTML 的体验会好很多：

① Live Preview（实时预览）

安装后在编辑区右键 → Show Preview，右侧会出现实时预览窗口，改代码立刻看到效果，不用每次手动刷新浏览器。

② open in browser（右键打开浏览器）

安装后可以在 VS Code 里右键文件 → Open in Default Browser，不用去文件夹里找，省事。

💡 怎么装插件？VS Code 左侧那排图标里，找那个四个小方块的图标（扩展商店），点进去搜索插件名，点Install就行。

🌱 今日小记

这一篇没有太多新概念，主要是在帮你把工具配好。很多人学前端卡在第一步——连编辑器都没装好，或者装了一堆东西不知道怎么用。

我建议你：现在就打开 VS Code，照着上面的步骤，亲手建一个 .html 文件，用浏览器打开它。这个过程你走一遍，比看十遍教程都有用。

下一期我们正式开始学 HTML 标签，从最常用、最好理解的几个开始，不贪多，一篇搞懂几个。

📌 下期预告：HTML 网页的骨架——标签和元素

标题、段落、换行、水平线——这些是最基础的页面元素，搞懂它们，网页才有”内容”。

📝 今日小测验（5题）

1. 判断题：用记事本也可以写 HTML 文件。（对 / 错）

2. 单选题：以下哪个是目前最主流的前端代码编辑器？

A. Microsoft Word

B. VS Code

C. Photoshop

D. Excel

3. 判断题：HTML 文件的扩展名必须是 .htm，用 .html 会出错。（对 / 错）

4. 纠错题：下面代码少了什么？（提示：文件保存后浏览器能打开，但不是标准写法）
<html> 
<head>
   <meta charset="utf-8"> 
</head> 
<body>
   <h1>你好</h1> 
</body> 
</html>
5. 匹配题：把插件和它的功能连起来

① Live Preview A. 右键文件直接在浏览器打开② open in browser B. 写代码时右侧实时显示网页效果

👉 答案在下期公布，欢迎在评论区写下你的答案！

— 重学HTML系列 · 第二篇 —