HTML 与 CSS 基础
掌握网页的骨架（HTML）和样式（CSS）
- 理解 HTML 标签和文档结构
- 掌握 CSS 选择器和盒模型
- 了解 Flexbox 布局
- 理解响应式设计原理
HTML：网页的骨架
HTML（HyperText Markup Language）用标签描述网页的结构。每个标签用尖括号包裹，如 <h1>标题</h1>。
<!-- HTML 基本结构 -->
<!DOCTYPE html>
<html>
<head>
<title>我的第一个网页</title>
</head>
<body>
<h1>你好，世界！</h1>
<p>这是一个段落。</p>
<a href="https://python.org">访问 Python</a>
</body>
</html>h1-h6：标题；p：段落；a：链接；img：图片；ul/ol/li：列表；div：块级容器；span：行内容器；input：输入框；button：按钮；form：表单。
CSS：网页的外衣
CSS（Cascading Style Sheets）控制网页的外观：颜色、字体、间距、布局。
/* CSS 基本语法：选择器 { 属性: 值; } */
body {
font-family: system-ui, sans-serif;
background: #0f172a;
color: #e2e8f0;
margin: 0;
padding: 20px;
}
.button {
background: #4f46e5;
color: white;
padding: 10px 20px;
border-radius: 8px;
border: none;
cursor: pointer;
}
.button:hover {
background: #4338ca;
}盒模型
每个 HTML 元素都是一个矩形盒子，由内到外：内容（content）→ 内边距（padding）→ 边框（border）→ 外边距（margin）。
# 盒模型示意
print("""
┌─────────── margin ───────────┐
│ ┌──────── border ────────┐ │
│ │ ┌──── padding ────┐ │ │
│ │ │ content │ │ │
│ │ │ 文字/图片 │ │ │
│ │ └─────────────────┘ │ │
│ └─────────────────────────┘ │
└───────────────────────────────┘
""")Flexbox 布局
Flexbox 是现代 CSS 最常用的布局方式，能轻松实现居中、对齐、等高列这些效果。
/* Flexbox 三行代码实现完美居中 */
.container {
display: flex;
justify-content: center; /* 水平居中 */
align-items: center; /* 垂直居中 */
min-height: 100vh; /* 占满屏幕高度 */
}
/* 导航栏布局 */
.navbar {
display: flex;
justify-content: space-between; /* 两端对齐 */
align-items: center;
padding: 0 20px;
}响应式设计
响应式设计让网页在手机、平板、电脑上都有良好体验。核心技术是媒体查询（Media Query）和相对单位。
/* 手机优先：默认样式适配手机 */
.card {
width: 100%;
padding: 12px;
}
/* 平板及以上：768px */
@media (min-width: 768px) {
.card {
width: 48%;
padding: 20px;
}
}
/* 桌面：1024px 以上 */
@media (min-width: 1024px) {
.card {
width: 30%;
}
}真实项目里不会手写大量 CSS。常用方案：Tailwind CSS（原子化类名，本项目就在用）、CSS Modules（局部作用域）、styled-components（CSS-in-JS）。Tailwind 不用起类名，样式和组件放一块，打包时自动删掉没用到的样式。
下列哪个 CSS 属性控制元素与外部元素之间的间距（外边距）？
资深工程师加餐
底层原理 · 大厂视角 · 工程经验，点卡片展开
穿透是反复查「根本不存在」的数据，用布隆过滤器或缓存空值挡；击穿是某个热点 key 过期瞬间大量请求压向数据库，用互斥重建或逻辑过期；雪崩是大批 key 同时过期，给 TTL 加随机抖动。缓存与库的一致性常用「先更新数据库、再删除缓存」，并靠重试/订阅补偿。
挑战任务
计算盒模型占位宽度
一个元素在页面上实际占据的横向宽度 = 内容宽 + 左右内边距 + 左右边框 + 左右外边距。写个函数 outer_width(content, padding, border, margin)，后三个参数都是单侧值。
课后作业
创建个人名片
写个个人名片卡片，用HTML+CSS做就行。就弄文字当头像，再加姓名、职业、座右铭。要求深色背景，圆角，居中显示。