4.2 HTML、CSS 与 JavaScript 三件套

本节摘要：网页由三种语言协作而成：HTML 定结构，CSS 管外观，JavaScript 做交互。本节以"够用为准"——目标是让你看得懂 Flask 模板里的网页代码、给轻记账写出带表单和列表的页面，不追前端深水区。学完本节，你能亲手写出轻记账的静态原型，4.4 节再把它变成模板。

读完这节能做什么

阅读完本节，你应当能够：

读懂常见 HTML 标签，写出含标题、列表、表单的页面骨架
用 CSS 选择器改字体颜色间距，理解盒模型的思维
看懂 getElementById 和事件绑定的 JavaScript 片段
说清三件套的分工边界，判断"某个需求该改哪一层"

分工：骨架、皮肤、肌肉

一个网页好比一栋房子：HTML 是骨架，决定有哪些房间和门窗；CSS 是装修，决定墙刷什么色、家具怎么摆；JavaScript 是电路与机关，让按钮按下去有反应。三层各改各的，互不掺和——这个分工观念比任何语法都重要，因为它决定了你排查问题时去哪一层找。

图 4-2 三件套各管一层

HTML：标签写结构


<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>轻记账</title>
</head>
<body>
    <h1>本月支出</h1>
    <ul>
        <li>早饭 12.5 元</li>
        <li>地铁 4.0 元</li>
    </ul>

    <form action="/records" method="post">
        <input type="text" name="item" placeholder="用途">
        <input type="number" name="amount" step="0.01" placeholder="金额">
        <button type="submit">记一笔</button>
    </form>
</body>
</html>

标签成对出现，内容夹在中间；form 是本章主角——action 指定提交到哪个路径，method 指定 GET 或 POST（4.1 节的规矩立刻用上：记账是改数据，用 POST）。input 的 name 属性是关键：表单提交时，数据以 name 为键打包发给服务器，Flask 里就靠这个名字取值。三个高频细节：meta charset 必须第一行出现，否则中文乱码；number 类型加 step="0.01" 才能输小数；button 的 type 决定行为，submit 才会真正发请求。

CSS：选择器定向装修


/* 元素选择器：所有 li 都生效 */
li {
    padding: 6px 0;
    border-bottom: 1px solid #eee;
}
/* 类选择器：class="btn" 的元素生效 */
.btn {
    background: #2c7be5;
    color: white;
    border-radius: 6px;
    padding: 8px 20px;
}
/* id 选择器：唯一元素，井号开头 */
#total {
    font-size: 22px;
    font-weight: bold;
}

选择器是 CSS 的"瞄准器"：点目标是类（一类元素共用）、井号是 id（唯一一个）、裸写标签名是全体生效。盒模型是布局的思维方式——每个元素都是一个矩形盒子，由内到外是内容、内边距、边框、外边距，"间距不对"的九成问题都在这四层里。CSS 放进独立样式文件，页面头部用 link 标签引入。

JavaScript：让页面动起来


// 找到页面上的元素
const amountBox = document.getElementById("amount");
const form = document.querySelector("form");

// 绑定事件：提交前先校验
form.addEventListener("submit", function (event) {
    if (amountBox.value === "" || Number(amountBox.value) <= 0) {
        alert("金额必须大于零");
        event.preventDefault();   // 阻止表单真的发出去
    }
});

模式固定三拍：找元素、绑事件、改内容。本节只需要看懂这三拍——第 6 章的 Fetch 异步请求会把它用深，现在不求多。留意 preventDefault：它拦下了浏览器默认行为，是"前端先校验一道、后端再校验一道"这道双保险的第一道。

演练：轻记账静态原型

把上面的 HTML 片段拼成完整页面存好，直接双击用浏览器打开——不经过任何服务器，静态页面本地就能看。试着做三个改动：给"记一笔"按钮换颜色；在列表再加一行；给金额输入框加 placeholder 提示"如 12.5"。变式一：打开开发者工具的元素面板，实时改任意元素的文字与颜色，体会"浏览器就是最即时的练功房"。变式二：把表单的 method 改成 get 再提交，观察 URL 后面冒出来的查询参数——4.1 的知识与 4.2 的表单在此对上了号。

易错点清单

标签不闭合：少写结束标签，页面结构整个错位，浏览器猜你想干嘛
name 属性漏写：input 没名字，提交时这个字段直接丢失，服务器取不到
CSS 改了没生效：九成是选择器没匹配上，用开发者工具检查元素看样式面板
三件套互相甩锅：内容不对查 HTML、样子不对查 CSS、反应不对查 JS，别跨层排查

本节要点回顾

HTML 骨架、CSS 装修、JS 机关，排查问题先分层
form 三要素：action 提交到哪、method 用什么方法、input 的 name 是取值键
CSS 三种选择器：标签、类、id；盒模型是布局思维
JS 三拍：找元素、绑事件、改内容
静态原型就绪，等 4.4 节的模板引擎注入真实数据

网页原材料备齐，Python 端的接盘手该登场了。下一节 Flask 入门，让账本真正在浏览器里记账。

作者与出处

原作者：灏天文库

来源：灏天文库

整理：灏天文库整理

由灏天文库平台收录，内容或由平台用户上传，仅供学习交流