前置知识: Markdown

环境搭建与第一个网页

7 min入门

零基础第一课：安装编辑器、创建并保存 .html 文件、用浏览器打开、认识 F12 开发者工具。

0.1 HTML 入门实战清单：从文件到页面结构

必会标签与用途

标签作用初学者必须掌握的属性常见错误
<!doctype html>告诉浏览器使用标准模式解析页面无写错或遗漏后，旧浏览器可能进入怪异模式
<html>整个 HTML 文档根元素lang忘记写 lang="zh-CN" 会影响翻译、朗读和搜索理解
<head>放页面元数据，不直接展示正文无把正文内容误放进 head
<meta>声明字符集、视口、SEO 信息charset、name、content忘记 charset="UTF-8" 导致中文乱码
<title>浏览器标签页标题无与正文标题混淆，或所有页面标题都一样
<body>放用户可见内容全局属性把脚本、样式和内容混在一起且缺少结构
<h1> 到 <h6>标题层级全局属性为了字体大小乱跳级，而不是表达结构
<p>段落全局属性在段落里塞块级复杂布局
<a>链接与页面跳转href、target、rel新窗口打开外链时忘记 rel="noopener"
<img>图片内容src、alt、width、height省略 alt 或不写尺寸导致布局抖动

第一份标准模板

<!doctype html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>我的第一个网页</title>
  </head>
  <body>
    <h1>你好，HTML</h1>
    <p>这是我亲手创建的第一个网页。</p>
  </body>
</html>

调试动作

  1. 在 Elements 面板中选中 <h1>，确认浏览器真的解析出了标题节点。
  2. 修改 <title> 后刷新页面，观察浏览器标签页变化。
  3. 故意删除 </p> 再打开 Elements，观察浏览器如何自动修复错误结构。
  4. 用 Console 输入 document.title，确认 JavaScript 可以读取 HTML 元数据。

0. 学习目标（可验证）

  • 能在电脑上新建一个 .html 文件并用记事本或 VS Code 编辑
  • 能用浏览器打开这个文件并看到内容
  • 能打开 F12 开发者工具，说出 Elements 和 Console 是干什么的

1. 一句话理解

网页本质上就是一个”写满了标签的文本文件”。你负责用编辑器写它，浏览器负责读懂并画出来；这两件事打通了，后面所有的 HTML 学习都有地方落地。

2. 第一步：安装编辑器（5 分钟）

写代码需要一个编辑器。推荐 VS Code（免费、跨平台、前端标配）：

  1. 打开官网 https://code.visualstudio.com/，下载对应系统的安装包；
  2. 一路”下一步”安装完成；
  3. 安装后打开 VS Code，界面分成三块：左边是文件列表、中间是编辑区、顶部有菜单。

也可以先用系统自带的”记事本”起步（零成本），等写到第 3 篇再换 VS Code 也不迟。VS Code 的完整安装与配置见 shell/060-VSCodeInstall。

讲解：

  1. 编辑器只是”写字工具”，它本身不运行网页；真正运行网页的是浏览器。
  2. 记事本能写代码，但没有语法高亮和自动补全；VS Code 有，所以长期学习用它。
  3. 不要用 Word 写代码：Word 会插入隐藏格式字符，导致网页显示异常。

3. 第二步：新建文件并保存为 .html（2 分钟）

3.1 桌面新建文本文档

  1. 在桌面空白处右键 → “新建” → “文本文档”；
  2. 把文件名从 新建文本文档.txt 改为 index.html；
  3. 如果改完名字后缀还是 .txt，说明系统隐藏了扩展名，需要打开显示：
    • Windows 资源管理器 → 顶部”查看” → 勾选”文件扩展名”；
    • 然后再重命名一次，确保是 index.html。

讲解：

  1. 后缀 .html 告诉浏览器”这是网页文件”，双击才会用浏览器打开。
  2. index 是网站首页的约定名称：服务器默认找 index.html。
  3. 显示扩展名是零基础第一道坎，看不到后缀就改不了类型，这一步必须会。

3.2 用编辑器打开

  1. 右键 index.html → “打开方式” → 选择 VS Code（或记事本）；
  2. 在编辑器里输入内容后按 Ctrl+S 保存；
  3. 以后修改文件，都是”编辑器里改 → 保存 → 浏览器刷新”三步循环。

4. 第三步：用浏览器打开（1 分钟）

保存后关闭编辑器，回到桌面：

  1. 双击 index.html，默认浏览器会打开它；
  2. 如果双击打开的还是编辑器，右键 → “打开方式” → 选择 Chrome/Edge；
  3. 想再次预览修改结果：回到浏览器按 F5 或 Ctrl+R 刷新。

讲解：

  1. 双击打开文件用的是”本地文件协议”（地址栏以 file:// 开头），适合学习阶段。
  2. 后期做网站时改用 http://localhost 本地服务器访问，效果一样但能力更强（见 035 综合项目）。
  3. 刷新是开发者的日常操作：改代码后忘记刷新，会以为”没生效”。

5. 第四步：认识 F12 开发者工具（3 分钟）

在已打开的网页上按 F12（或右键 → “检查”），浏览器下方/右侧会弹出开发者工具。零基础先认识三个面板：

面板一句话用途现在能做什么
Elements（元素）查看页面结构点选左边小箭头，再点页面任意文字，能定位到它的 HTML 代码
Console（控制台）看错误和日志输入 1 + 1 回车，看到 2；有报错会显示红色信息
Network（网络）看加载了哪些文件刷新页面，能看到 index.html 这条记录

讲解：

  1. Elements 面板是学习 HTML 的”透视镜”：看到的每一个结构都能对应到代码。
  2. Console 面板是以后学 JavaScript 的”草稿纸”。
  3. 关掉工具：按 F12 或点面板右上角的 ×。

6. 第一个网页（5 分钟）

在 index.html 里输入下面的内容（建议手敲，不要复制）：

<!DOCTYPE html>
<html>
  <head>
    <title>我的第一个网页</title>
  </head>
  <body>
    <h1>你好，世界！</h1>
    <p>我正在学习 HTML。</p>
  </body>
</html>

讲解：

  1. <!DOCTYPE html> 声明文档类型，告诉浏览器”这是 HTML5”，必须写在第一行。
  2. <html> 是整张网页的根标签；<head> 放”配置”（比如标题），<body> 放”内容”。
  3. <title> 里的文字显示在浏览器标签页上，不出现在页面正文中。
  4. <h1> 是一级标题，<p> 是段落；标签成对出现，</p> 表示结束。
  5. 保存后刷新浏览器：标签页标题、页面大标题、段落文字都应该正确显示。

7. 常见问题（遇到再查）

问题原因解决
双击打开的还是编辑器系统默认打开方式没设对右键 → 打开方式 → 选择浏览器
改完代码页面没变化忘记保存或没刷新Ctrl+S 保存，再按 F5 刷新
页面出现乱码文件保存编码不是 UTF-8VS Code 右下角把编码改为 UTF-8 后重新保存
文件名还是 .txt扩展名被隐藏打开”显示文件扩展名”再重命名
标签页标题不显示title 写错位置检查 <title> 是否在 <head> 内

8. 动手试试

入门版（必做）

  1. 把 <p> 里的文字改成你的名字，保存并刷新；
  2. 按 F12，用 Elements 面板的箭头工具点一下页面标题，看它高亮的是哪一行代码。

进阶版（选做）

  1. 在 <body> 里再加一个 <h2> 和一段 <p>，猜一猜 <h2> 会比 <h1> 小还是大；
  2. 在 Console 面板输入 document.title 回车，看返回什么，对照 <title> 标签理解。

9. 一句话记住

网页 = 编辑器写出的 .html 文本 + 浏览器读它画出来；改代码的三步循环是”保存 → 刷新 → 看结果”，遇到问题先按 F12。

10. 下一步

你已经完成了网页制作的完整闭环。接下来 001-004 四篇前置课会依次补上零基础必懂的概念：注释与特殊字符（001）、块级与行内元素（002）、div 与 span 容器（003）、id/class/style 全局属性（004）；然后 020-HTML5OverviewCoreFeature 会用 5 分钟写第二个网页，并拆解刚才那几行代码背后的含义。