第一步：看懂 HTML、CSS 和 JavaScript
用一张网页理解结构、样式和交互，不背语法也能知道 AI 改动了什么。
HTML 负责网页的结构和内容，CSS 负责颜色、间距与排版，JavaScript 负责点击、输入等交互。零基础不必先背完语法，但必须能识别三个部分、保存原文件，并在每次修改后刷新浏览器检查结果。
- 区分 HTML、CSS、JavaScript
- 认识 index.html 文件
- 知道浏览器如何打开本地网页
01
HTML 是页面骨架
标题、段落、链接和按钮都是 HTML 元素。语义清楚的标签也有助于无障碍和搜索理解。
- h1 表示页面主标题
- p 表示段落
- a 表示链接
- button 表示按钮
02
CSS 决定视觉呈现
CSS 通过选择器找到元素，再设置颜色、字体、边距和布局。先从少量规则开始。
- 优先修改颜色与间距
- 不要一次重写全部样式
- 同时检查手机宽度
03
JavaScript 添加行为
JavaScript 可以监听点击并改变页面。第一次网页只需一个简单交互，避免复杂框架。
- 先确认静态页面正常
- 交互失败时查看控制台
- 不要粘贴不理解的外部脚本
可复制提示词
替换方括号后交给 AI
请解释下面网页代码中 HTML、CSS、JavaScript 各自负责什么。按“代码位置｜作用｜修改风险”输出表格，不要修改代码。 代码： """ [粘贴代码] """
先读懂，再复制运行
<!doctype html>
<html lang="zh-CN">
<head><meta charset="utf-8"><title>我的网页</title>
<style>body{font-family:sans-serif;max-width:680px;margin:60px auto}</style></head>
<body><h1>你好，网页！</h1><p>这是我的第一个页面。</p></body>
</html>动手练习 · 约 20 分钟
完成本步骤
- 新建 first-site 文件夹
- 创建 index.html
- 复制示例代码并保存
- 双击文件在浏览器打开
结果不对时先检查
- 文件名不是 index.html
- 代码保存成了 .txt
- 修改后没有刷新浏览器
常见问题
必须先安装编程软件吗？
创建最简单网页只需要文本编辑器和浏览器；代码编辑器会让后续修改更方便。
HTML 是编程语言吗？
HTML 是标记语言，用来描述内容结构；JavaScript 通常被称为编程语言。
可以把所有代码写在一个文件吗？
第一次练习可以；项目变大后通常把 CSS 和 JavaScript 分到独立文件。