一分钟看懂前端

在正式动手之前，我们先花一分钟，搞清楚一个最基础的问题：你每天看的网页，到底是怎么"变"出来的？

这门课不会让你死记 HTML 标签、背 CSS 属性。但你需要建立一个画面感——知道前端在做什么，后面让 AI 帮你写代码时，你才知道自己要的是什么。

网页的三层结构

随便打开一个网页（比如一个博客文章页），你看到的东西，拆开来其实只有三层：

层	技术	负责什么	类比
结构层	HTML	页面有哪些内容：标题、段落、图片、按钮	一栋楼的钢筋骨架
样式层	CSS	内容长什么样：颜色、大小、位置、间距	骨架上的装修
交互层	JavaScript	内容怎么动起来：点击响应、数据更新、动画	房间里的电器

就这么简单。所有网页，不管多复杂，本质都是这三层。

一个最朴素的例子

你看到的这一行字，它背后大概长这样（不用记，看一眼就行）：

<h1>我的第一篇博客</h1>
<p>你看到的这一行字，它背后大概长这样。</p>

• <h1> 告诉浏览器："这是一个大标题"
• <p> 告诉浏览器："这是一段文字"

浏览器读到这些"标签"，就把它们渲染成你眼前的样子。前端的本质，就是用这三种语言描述一个页面，然后让浏览器显示出来。

前端工程师日常在做什么

了解了三层结构，你就明白前端工程师每天做的事其实就两类：

1. 把设计稿变成网页：设计师画出页面长什么样，前端用 HTML/CSS/JS 把它实现出来，让浏览器能正确显示。
2. 让网页能交互：用户点按钮能弹窗、填表单能提交、滑动能加载更多——这些都是 JavaScript 在背后处理。

这里有个关键认知：前端的核心不是"背语法"，而是"把需求变成页面"。语法可以查、可以让 AI 写，但"要做成什么样"得你自己清楚。

这意味着什么

过去学前端，要花大量时间记标签、调样式、查 API，门槛很高。

但现在时代变了——这些"翻译"工作，AI 已经能做得又快又好。你只要能说清楚"我要一个什么样的页面"，AI 就能帮你生成对应的代码。

这正是这门课的核心思路：

你负责想清楚"要什么"，AI 负责"怎么写"。

本篇小结

• 网页 = 结构（HTML）+ 样式（CSS）+ 交互（JavaScript）三层
• 前端的工作 = 把需求变成浏览器能显示的页面
• 语法不是重点，描述需求的能力才是

下一篇，我们就来亲手体验一次：用一句话让 AI 帮你写出一个真实可用的网页。不用写一行代码，你会看到"描述需求 → AI 生成 → 浏览器显示"的完整过程。