第二阶段:入门实战
第 1 章 · 开发第一个网页
第二阶段:入门实战

开发第一个网页

先做出第一份能访问的作品,再去谈优化。

基础概念:什么是网页?

网页就是运行在浏览器里的程序界面,也是你以后要不断打交道的“作品载体”。

它不是一堆孤立的文字,而是一种可以展示内容、接收交互、承载功能的页面形式。

它的构成

网页通常由几个非常基础的部分组成,理解它们能帮你少走很多弯路。

  • 页面内容:标题、文字、图片、按钮
  • 页面结构:不同模块之间的排布关系
  • 页面逻辑:用户点击后会发生什么
  • 页面样式:让它看起来更清楚

这些熟悉的产品,本质上都是网页

很多你天天在用的产品,本质上都是网页,只是外观和交互更复杂。

基础
搜索站点

最简单的网页形式之一,用来完成查找信息和快速检索。

常见
电商页面

商品、价格、购物车和支付流程都可以用网页串起来。

有趣
小游戏页面

很多轻量游戏就是一个网页,加上少量交互和状态管理。

热门
AI 工具页

通过网页把模型能力包装成更容易使用的产品界面。

任务目标

这一步不要求你做复杂项目,而是先做出一个能被浏览器打开、能表达内容、能让人看懂的页面。

你可以把它当成一个最小作品:页面有标题、有说明、有按钮,已经足够了。

你可以做什么

先从简单、有趣、容易完成的项目开始,建立“做得出来”的手感。

推荐
图片字幕生成器

上传一张图片,自动识别内容并生成适合展示的说明文字。

轻量
摸鱼小游戏

做一个能点、能玩、能看到结果的小页面,练习交互和状态。

实用
风格分析页

接入 AI 模型,帮你把一段文字或一张图整理成风格判断。

本关任务打卡

完成一次从编辑到浏览器打开的闭环,先感受“做出来”的成就感。

本关任务打卡
1先写一个最简单的页面
2让它在浏览器里成功打开
3补一个标题和一句说明
4如果有余力,再加一个按钮
继续完成本章节

先学完这一章,再点下一章继续。

下一章