对 Python 开发者来说，HTML 和 CSS 往往是把后端数据变成可用页面的最后一公里。无论你使用 Django、Flask，还是只想快速制作一个静态页面，都需要理解三个基础问题：HTML 如何组织内容、浏览器如何找到 CSS 文件，以及样式规则如何选中并改变元素。
HTML 负责结构，不负责业务逻辑
HTML 使用元素描述页面内容的含义。一个完整页面通常包含文档声明、html 根元素、页面元信息和可见内容：
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Python 项目面板</title>
</head>
<body>
<header>
<h1>Python 项目面板</h1>
<p>查看任务和运行状态。</p>
</header>
<main>
<section aria-labelledby="task-title">
<h2 id="task-title">今日任务</h2>
<ul>
<li>运行测试</li>
<li>检查日志</li>
<li>部署新版本</li>
</ul>
</section>
</main>
</body>
</html>
这里的 header、main 和 section 不只是为了排版，它们还表达了内容的角色。相比把所有内容都塞进 div，语义化元素更便于维护，也能帮助浏览器和辅助技术理解页面。
编写 HTML 时，可以把标签嵌套想象成 Python 的数据结构：开始标签和结束标签需要正确配对，父子关系也不能混乱。缩进虽然不会像 Python 那样直接决定语义，但清晰的缩进能快速暴露缺失标签和错误嵌套。
CSS 文件是如何连接到页面的
外部样式表通常通过 head 中的 link 元素加载：
<link rel="stylesheet" href="styles.css">
其中：
rel="stylesheet"告诉浏览器这是样式表；href指向 CSS 文件；- 相对路径以当前 HTML 文件所在位置为基准。
如果项目结构如下：
html-css-demo/
├── index.html
└── styles.css
那么 href="styles.css" 可以直接工作。如果样式文件位于 static/css/site.css，链接就应改为：
<link rel="stylesheet" href="static/css/site.css">
页面没有样式时，不要立刻怀疑 CSS 语法。先打开浏览器开发者工具的 Network 面板，检查 CSS 请求是否返回 404。路径错误、文件名大小写不一致，以及后端没有正确暴露静态目录，都是常见原因。
选择器、层叠与盒模型
CSS 规则由选择器和声明组成：
.card {
padding: 1rem;
border: 1px solid #d0d7de;
border-radius: 0.75rem;
}
.card 选中所有带有 class="card" 的元素。常见选择器还包括：
/* 元素选择器 */
p {
line-height: 1.6;
}
/* 类选择器 */
.warning {
color: #9a3412;
}
/* ID 选择器 */
#task-title {
letter-spacing: 0.02em;
}
/* 后代选择器 */
.card li {
margin-block: 0.4rem;
}
当多条规则命中同一元素时，浏览器会结合来源、选择器优先级和声明顺序决定最终值。实际项目中应优先使用可复用的类选择器，避免不断提高选择器优先级，也不要把 !important 当作常规修复工具。
盒模型同样值得掌握。元素占用的空间由内容、内边距、边框和外边距共同决定。下面这条规则可以让尺寸计算更直观：
*,
*::before,
*::after {
box-sizing: border-box;
}
动手做一个可运行的小页面
可以用 Python 自带的 HTTP 服务器练习，无需安装框架。创建目录并进入其中：
mkdir html-css-demo
cd html-css-demo
创建 index.html：
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>任务面板</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<main class="container">
<article class="card">
<p class="eyebrow">PYTHON WORKFLOW</p>
<h1>今日任务</h1>
<ul>
<li>运行 <code>pytest</code></li>
<li>检查应用日志</li>
<li>更新部署说明</li>
</ul>
<a class="button" href="https://docs.python.org/3/">查看 Python 文档</a>
</article>
</main>
</body>
</html>
再创建 styles.css：
*,
*::before,
*::after {
box-sizing: border-box;
}
body {
margin: 0;
min-height: 100vh;
font-family: system-ui, sans-serif;
color: #172033;
background: #eef2ff;
}
.container {
width: min(90%, 44rem);
margin-inline: auto;
padding-block: 4rem;
}
.card {
padding: 2rem;
background: white;
border: 1px solid #c7d2fe;
border-radius: 1rem;
box-shadow: 0 1rem 2.5rem rgb(30 41 59 / 12%);
}
.eyebrow {
margin: 0;
color: #4f46e5;
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0.12em;
}
h1 {
margin-block: 0.5rem 1rem;
}
li + li {
margin-top: 0.5rem;
}
.button {
display: inline-block;
margin-top: 1rem;
padding: 0.7rem 1rem;
color: white;
background: #4f46e5;
border-radius: 0.5rem;
text-decoration: none;
}
.button:hover,
.button:focus-visible {
background: #3730a3;
}
启动本地服务器：
python -m http.server 8000
然后访问 http://localhost:8000/。修改 CSS 后刷新页面即可看到变化。如果浏览器缓存了旧样式，可以执行强制刷新，或在开发者工具中临时禁用缓存。
把静态练习迁移到 Python 框架时
在静态示例里，styles.css 与 HTML 位于同一目录，因此相对路径足够。进入 Flask 或 Django 项目后，模板文件和静态文件通常由不同机制处理，不能简单假定它们在磁盘上的相对位置等同于浏览器访问路径。
以 Flask 为例，可以这样引用静态资源：
<link rel="stylesheet" href="{{ url_for('static', filename='css/styles.css') }}">
对应文件可以放在：
project/
├── app.py
├── templates/
│ └── index.html
└── static/
└── css/
└── styles.css
这里的关键区别是：模板路径由服务端负责解析，而 CSS 的 URL 需要能够被浏览器实际请求到。部署时还要确认反向代理、CDN 或静态文件服务的配置。
用这组问题检查基础是否扎实
完成页面后，可以不看代码回答下面的问题：
head与body分别放什么内容？href="styles.css"是相对于哪个位置解析的？.card、#card和card分别选择什么？- 为什么
padding会改变元素占用的空间？ - 两条 CSS 规则同时命中元素时，哪一条会生效？
- 为什么 Flask 或 Django 模板中的静态资源通常需要专用 URL 生成方式？
- 如果 CSS 没有加载，应在浏览器开发者工具中先检查什么？
能够独立回答并通过小项目验证这些问题，就已经掌握了构建简单页面所需的核心基础。接下来再学习 Flexbox、Grid、响应式设计和表单样式，会比直接复制大型前端框架的类名更稳妥。