波仔
🧡 第三章 你的第一个项目
📄 一句话概括

第一个项目不要挑难的：一个个人主页只需要骨架、编码、标题、大标题、列表五个零件；第一次的价值不在页面，在于你亲眼看见一句话能变成一个文件。

📝 本节和前面几节的关系

上一章你已经装好并跑通了工具，这一章开始做真正的东西——先从五分钟的热身开始。

一、为什么先做主页

因为它足够小，又足够完整：有文件、有结构、能看到结果、还不会出错。 这种项目最适合当第一次——你不会因为搞不定而半途放弃。 它同时具备一个真项目的全部要素：创建文件、写内容、结构安排、打开验证。

二、它其实只有五个零件

页面骨架（告诉浏览器这是什么）、字符编码声明（中文不乱码的关键）、页面标题、页面大标题、作品列表。 一个主页的大小就是这五样。多一样是装饰，少一样就出不来东西。 本节的演示当场生成一个真文件，你可以打开看看——它不是你想象的，是真做出来的。

三、第一次真正要记住的事

不是页面的写法，是这个事实：你说一句，它写出一个文件，你打开就看见了。 很多人学 AI 编程卡在【我不敢让它动手】。这一页就是用来破这个心结的。 第二个动作更有价值：让它改一处。比如把标题换掉、给列表加一条——你会发现改比做更容易。

四、动手 Demo：热身——当场做出一个能打开的个人主页

下面这段当场生成一个 HTML 文件，并统计它的构成。

name, title = u"波仔", u"波仔的作品页"
items = [u"照明设计图", u"CAD 图纸", u"自动化脚本"]
rows = u"\n".join(u"    <li>%s</li>" % x for x in items)
html = (u"<!DOCTYPE html>\n<html lang=\"zh-CN\">\n<head>\n"
        u"  <meta charset=\"utf-8\">\n  <title>%s</title>\n"
        u"</head>\n<body>\n  <h1>%s</h1>\n  <ul>\n%s\n  </ul>\n"
        u"</body>\n</html>\n" % (title, name, rows))
io.open("index.html", "w", encoding="utf-8").write(html)

实跑输出：

--------------------------------------------------------------------
热身——五分钟做一个个人主页
--------------------------------------------------------------------

第一个项目不要挑难的。下面这段当场生成一个能打开的个人主页，看看五分钟能出多少东西：

生成文件：_tmp_ch3\index.html（328 字节，16 行）

  构成             行数     作用
  -----------------------------------------------
  文档骨架         1        告诉浏览器这是什么
  字符编码声明     1        中文不乱码的关键
  页面标题         1        浏览器标签上显示的字
  正文标题         1        页面顶上那一行大字
  作品列表         3        三条记录的容器

一个主页就是五个零件：骨架、编码、标题、大标题、列表。
**第一次的价值不在这个页面，在于你亲眼看见【一句话能变成一个文件】。**

输出里最该看的不是字节数，是构成那张表：五项各有各的用处，字符编码那两行决定了你打开时会不会看到乱码。 然后是那句实话：这个文件是真生成的，不是示意图。打开它，你的热身就完成了。

30 秒实验

  1. 让它生成一个属于你自己的主页（名字、标题、三条记录），然后把文件打开。
  2. 接着让它改一处：换标题、加一条记录、或改成深色背景——体会一下【改比做容易】。

常见误区

  1. 第一次就挑个大项目。第一次的失败率会把你劝退，小项目才是正确起点。
  2. 生成完就完事。一定要让它改一处——动手改一次，才算真的建立了手感。
自测三问（点开对答案） 1. 个人主页由哪五个零件组成？ —— 页面骨架、字符编码声明、页面标题、页面大标题、作品列表。 2. 为什么第一个项目要挑最小的？ —— 小项目不容易失败，能让你走完整条链并建立动手的信心。 3. 第一次最该记住的是什么？ —— 你说一句，它写出一个文件，你打开就看见了——破掉【不敢让它动手】的心结。

相关笔记