为什么每个程序员都该会做网页

不管你以后做什么方向——写 Python、做 App、搞 AI——你都需要一个地方展示自己的作品。而最快的展示方式，就是做一个网页。网页不挑设备，手机电脑打开浏览器就能看。

HTML 和 CSS 是最简单的两门"编程语言"——它们甚至不算真正的编程语言，只是标记语言。但它们是通往 Web 世界的大门，学完就能做出看得见摸得着的作品，成就感极强。

第一个让你写出"别人能看到"的代码，往往是网页。
本文核心知识点
  • HTML用标签描述网页结构。
  • CSS控制颜色、字体、间距。
  • 盒子模型网页布局的核心概念。
  • 个人主页第一个实战作品。
网页制作启蒙配图：蓝色渐变背景上一个浏览器窗口框住彩色分块布局，旁边漂浮彩色积木块、画笔调色盘、齿轮、标签和线框网格
浏览器、积木、画笔：网页制作三件套。

HTML：网页的骨架

HTML 用标签描述网页内容。一个最简单的网页：

<!DOCTYPE html>
<html>
  <head>
    <title>我的主页</title>
  </head>
  <body>
    <h1>你好，我是小明</h1>
    <p>这是我的第一个网页。</p>
  </body>
</html>

把这段代码存成 index.html，双击用浏览器打开，就能看到效果。常用标签：`h1` 大标题、`p` 段落、`img` 图片、`a` 链接、`ul/li` 列表、`div` 分块。

CSS：网页的衣服

HTML 决定网页有什么，CSS 决定网页长什么样。加一段 style 就能改颜色、字号、背景：

<style>
  body {
    background: #1E5FA8;
    color: white;
    font-family: sans-serif;
  }
  h1 {
    font-size: 36px;
    text-align: center;
  }
</style>

把这段放进 head 里，整个页面就变成蓝底白字、标题居中。改几个数字，刷新浏览器立刻看到变化——这种即时反馈非常适合初学者。

盒子模型：理解网页布局

网页上每个元素都是一个"盒子"——外面有边框（border）、边框里有内边距（padding）、盒子本身有内容（content）、盒子之间有外边距（margin）。

理解了盒子模型，你就知道为什么两个元素之间有空隙、为什么内容贴边不对齐。所有网页布局，本质上都是在摆这些盒子。

做一个个人主页

综合前 4 节，做一个简单的个人主页：

<body>
  <h1>小明的主页</h1>
  <p>你好！我是一名初中生，喜欢编程和打篮球。</p>
  <h2>我的爱好</h2>
  <ul>
    <li>写 Python 小游戏</li>
    <li>打篮球</li>
    <li>看科幻电影</li>
  </ul>
</body>

这就是一个完整的个人主页雏形。发给同学看，他用手机也能打开。