模块 3.1

前端基础——HTML

从一个本地网页开始，让它有结构、样式和交互

零到全栈 · 李勃老师 · 2026

2.3 里创建过的 ~/zero-to-tech/index.html
这一节继续发展它
让它开始像一个真正的网页

这一节结束时，你会理解 HTML、CSS、JavaScript 各自负责什么，也会亲手把页面变得更完整一些。

BACK TO THE FILE

先把之前那个文件找回来

它还在你的电脑里

~/zero-to-tech/index.html

# 用 VS Code 打开上层目录
code ~/zero-to-tech/

# 再用浏览器打开这个文件
open ~/zero-to-tech/index.html

这里有两个动作

VS Code 打开的是目录，不只是单个文件
浏览器打开的是这个 html 文件本身
它现在还是一个很朴素的白底黑字页面

HTML SKELETON

理解html文件的基本骨架

先把它简化

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
  </head>
  <body>
  </body>
</html>

先抓住这三个点

<!DOCTYPE html> 只是在告诉浏览器：这是一份 HTML 文件
<head> 放元信息，不直接显示在页面里
<body> 里的内容，才会真正显示出来

到这里，不需要会写完整 HTML，能看懂结构就够用了

TAGS & ATTRS

HTML 里最常见的就是标签和属性

标签大多成对出现

<h1>你好，互联网</h1>
<p>这是我的第一个网页</p>

开头一个，结尾一个。结尾标签会多一个斜杠。

属性写在标签上

<html lang="zh-CN">
<p id="msg">...</p>

lang 表示语言，id 表示唯一标识，后面 JavaScript 会用它来找到这段文字。

ADD CSS

给html加一点样式

把这段放进 <head>

<style>
  body { background-color: #f0f4f8; }
  .card { background: white; padding: 40px; }
  h1 { color: #2c3e50; }
  button { background-color: #3498db; }
</style>

这里发生了什么

这段代码写在 <style> 标签里
它的位置是在 </head> 之前
CSS 负责描述“这些内容应该长什么样”

CHANGE THE BODY

再改一下 body 里的结构

修改前

<body>
  <h1>你好，互联网</h1>
  <p>这是我的第一个网页</p>
</body>

修改后

<body>
  <div class="card">
    <h1>你好，互联网</h1>
    <p>这是我的第一个网页，现在它有了一点样式。</p>
  </div>
</body>

浏览器不是“理解了 card 这个词”，而是在匹配 CSS 里的 .card 规则

ADD JAVASCRIPT

让页面动起来

先在 body 里补两个东西

<p id="msg">...</p>

<button onclick="changeText()">
  点我试试
</button>

再在 </body> 前补脚本

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

JavaScript 负责描述“当某件事发生时，应该做什么”

WHAT HAPPENS ON CLICK

点击按钮之后，浏览器在做什么

按钮

你点击它

→

onclick

触发 changeText()

→

id="msg"

找到那段文字

→

textContent

把文案改掉

→

浏览器

重新显示页面

THREE LAYERS

同一个 index.html 里，现在已经有三层东西

HTML

内容和结构：页面上有什么

+

CSS

样式和外观：这些东西长什么样

+

JavaScript

行为和交互：发生了什么事要做什么

现在这三层还挤在同一个文件里。项目小时没问题，项目一大就会开始不方便。

HTML + AI

HTML格式在AI时代焕发了新的生命力

表达力

HTML 足够强

它能描述结构、内容、层级、按钮、链接和区域

训练数据

AI 看过太多 HTML

网页是公开世界里最丰富、最常见的一类数字内容

协作性

HTML 对 AI 友好

比起 Word、PPT 这类格式，HTML 更容易被读取、修改和生成

你现在看到的这份 slides，本身也是 HTML

理解 HTML，不只是为了写网页，也是为了更好地和 AI 协作

HTML 负责内容和结构
CSS 负责样式和外观
JavaScript 负责行为和交互

下一节开始拆分文件。让 HTML、CSS、JavaScript 各回各位。

零到全栈 · 模块 3.1 完