3.1 前端基础——HTML

课时概要

模块 3 开篇：回到 2.3 写过的 index.html，先读懂 HTML 的标签结构，再依次加上 CSS（让页面好看）和 JavaScript（让按钮能点），建立前端最核心的「三层分工」直觉。

以上为 UP 主的 B 站官方简介，非观看笔记；只有跟完这一节才算自己的理解。

视频：【零到全栈】3.1-前端基础——HTML ｜时长 39:29 ｜模块 3 · 前端基础

讲义：模块 3.1：前端基础——HTML（李勃老师.com）

本节要点

HTML 用尖括号 标签（tag） 组织内容，大多数成对出现（开头 <h1> + 结尾 </h1>）；标签上可以挂属性（如 lang="zh-CN"、class="card"）。
<head> 放元信息不显示，<body> 里的内容才真正显示在页面上。
CSS 写在 <style> 块里、用大括号 {}，负责「这些东西长什么样」；.card 是类选择器，<div class="card"> 的元素就套用它。
JavaScript 写在 <script> 块里，负责「某件事发生时做什么」：按钮 onclick="changeText()" 触发函数，document.getElementById('msg') 精准找到元素并改文字。
一个网页文件里同时有三种代码，三层分工：HTML 管内容结构、CSS 管外观、JavaScript 管交互——这是前端的基础直觉。
项目小的时候三层可以挤在同一个 html 文件里；下一节讲怎么拆成三个文件。

笔记正文（讲义整理）

找回 2.3 的 index.html

code ~/zero-to-tech/      # 打开整个目录，不是只打开一个文件
open ~/zero-to-tech/index.html

看到的是白底黑字的朴素页面。这节课把它一步步发展起来。

先看懂这份 HTML

<!DOCTYPE html>          # 第一行固定，告诉浏览器这是 HTML，不用管
<html lang="zh-CN">      # 标签 + 属性：内容语言是简体中文
<head>                   # 元信息，不显示在页面上
  <meta charset="UTF-8">
  <title>我的第一个网页</title>
</head>
<body>                   # 这里的内容才显示出来
  <h1>你好，互联网</h1>
  <p>这是我的第一个网页……</p>
</body>
</html>

尖括号 <> 括起来的叫标签，大多成对（结尾多一个 /）；标签上挂的 lang、class 叫属性。不需要背所有标签，知道「head 放元信息、body 放显示内容」这个结构就够了。

第一步：加 CSS，让它好看

在 </head> 前插入 <style> 块。CSS 不用尖括号，而是大括号 {}：

body { background-color: #f0f4f8; display: flex; ... }
.card { background: white; padding: 40px; border-radius: 12px; ... }
button:hover { background-color: #2980b9; }

再把 <body> 里的内容包进 <div class="card">。浏览器并不认识「card」这个词，它只是去匹配有没有 .card 这条规则。保存刷新——浅灰背景、白色卡片、居中排版都来自这段 CSS。CSS 负责「长什么样」。

第二步：加 JavaScript，让它能动

三步：

给段落加锚点：<p id="msg">……</p>
加按钮：<button onclick="changeText()">点我试试</button>
在 </body> 前加脚本：

<script>
  function changeText() {
    document.getElementById('msg').textContent = '你刚刚触发了一段 JavaScript。';
  }
</script>

点按钮，文字变了。JavaScript 负责「当某件事发生时，应该做什么」。

三层分工

现在这一份 index.html 里同时住着三种代码：

和 GFG / 课程笔记的连接

这节是 GFG Web Development 开篇那块「HTML/CSS/JavaScript 是什么」的亲手版：

课程里做的	GFG 对应
看懂 `<head>`/`<body>`、标签和属性	GFG HTML Basics：元素、属性、文档结构
`<style>` 里写选择器和大括号规则	GFG CSS Introduction：选择器、盒模型、布局
`onclick` 触发函数、`getElementById` 改文字	GFG JavaScript 入门：DOM 操作、事件监听
三层挤在一个文件里	GFG 后面会讲如何分离 HTML/CSS/JS 文件——正是 3.2 的内容

我们最终要做的「职场语言翻译器」，输入框、按钮、结果展示 = HTML 搭结构；配色和卡片 = CSS；点击翻译、调后端接口 = JavaScript。三层各管一摊。

关键概念

标签（tag）：尖括号括起来的 HTML 单位，大多成对，定义页面上的元素。
属性（attribute）：挂在标签上的补充信息，如 lang、class、id。
<head> / <body>：一个放元信息（不显示），一个放页面内容（显示出来）。
CSS：写在 <style> 里、用大括号描述元素样式的语言，负责「长什么样」。
类选择器 .card / id：CSS 和 JS 定位元素的两套钩子——class 可重复，id 唯一。
JavaScript：写在 <script> 里，负责事件和行为，这节用它响应按钮点击。

代码 / 实操

code ~/zero-to-tech/                 # VS Code 打开项目目录
open ~/zero-to-tech/index.html       # 浏览器看效果

# 1) </head> 前加 <style>…</style>
# 2) <body> 内容包进 <div class="card">…</div>
# 3) <p id="msg"> + <button onclick="changeText()">
# 4) </body> 前加 <script>…</script>
# 每改一次保存 + 刷新浏览器

我的收获

同一个文件里能住三种代码：HTML 是骨架、CSS 是妆造、JS 是动作，各管一摊互不混淆。
浏览器不是「理解」代码，而是按规则匹配：找 .card 套样式、找 id="msg" 改文字——这和 AI 读指令的思路很像。
「改一行 → 保存 → 刷新 → 立刻看到变化」的反馈循环，是前端最上瘾的地方。

待深入

（待填：没听懂、想回头查的。）