41-42学时:编程实践 前端技术
前端技术入门：用PyCharm打造健康养老数据网页
你将用4个学时学习前端技术（HTML+CSS+JavaScript），从零开始，用 PyCharm Community Edition（你熟悉的工具）打造一个展示健康养老数据的网页。别担心，即使你没学过前端编程，我们会一步步带你学会：
用HTML搭建网页结构。
用CSS美化页面。
用JavaScript添加交互功能，比如输入数据、更新表格。
最后，你会完成一个展示老年人健康数据（血压、心率）的网页。
课程安排
学时1：理论课 - 了解前端基础，看看健康数据网页是什么样。
学时2：演示课 - 老师带你写一个健康数据展示页面。
学时3-4：实践课 - 你自己动手改代码、加功能，做出自己的网页！
开发环境
IDE：PyCharm Community Edition（免费，同学们熟悉）。
浏览器：推荐 Chrome，方便调试。
安装与设置：
确保已安装 PyCharm Community Edition（jetbrains.com/pycharm/download）。
打开 PyCharm，创建新项目（“File > New Project”），选择空项目，命名（比如“HealthWeb”）。
在项目中新建文件，右键项目文件夹，选“New > File”，命名为
index.html。安装 Live Server 插件：
去“File > Settings > Plugins”，搜索“Live Server”并安装。
安装后，右键 HTML 文件，选“Open in Browser”或“Run”预览网页。
如果 Live Server 不可用，可直接将
index.html拖到 Chrome 浏览器查看。
学时1：理论课 - 认识前端技术
1.1 什么是前端？
前端就是你看到的网页，比如医院网站上展示健康数据的页面。它的任务是：
让页面内容清晰（HTML）。
让页面好看（CSS）。
让页面能互动，比如点按钮显示新数据（JavaScript）。
例子：一个健康养老网页可以显示老年人的血压、心率，还能让你输入新数据，点击按钮更新。
1.2 HTML：网页的骨架
HTML就像搭积木，决定网页有什么内容，比如标题、表格、按钮。看看这个基本结构：
<!DOCTYPE html>
<html>
<head>
<title>我的网页</title>
</head>
<body>
<h1>欢迎你！</h1>
<p>这是一个段落。</p>
</body>
</html>你会用到的HTML标签：
标题：
<h1>（大标题）到<h6>（小标题）。段落：
<p>。表格：
<table>、<tr>（行）、<td>（单元格）。输入框：
<input>。按钮：
<button>。
1.3 CSS：网页的美妆师
CSS让网页变漂亮，比如改颜色、调整字体大小。试试这个：
<style>
h1 { color: blue; }
p { font-size: 16px; }
</style>你会用到的CSS：
颜色：
color（文字色）、background-color（背景色）。字体：
font-size（大小）、font-family（字体）。间距：
margin（外边距）、padding（内边距）。
1.4 JavaScript：网页的魔法师
JavaScript让网页“动起来”，比如点击按钮添加数据。看看这个：
<script>
alert("你好！");
</script>你会用到的JavaScript：
变量：
let name = "小明";（存数据）。函数：
function sayHi() { console.log("Hi!"); }（执行任务）。事件：
onclick（点击时触发）。DOM操作：改变网页内容，比如
document.getElementById("myId").innerHTML = "新内容";。
1.5 健康养老数据网页长啥样？
你的目标是做一个网页：
显示一个表格，列出姓名、血压、心率。
有输入框和按钮，让你添加新数据。
点击按钮，表格自动更新。
学时2：演示课 - 跟着老师做网页
2.1 目标
你将看到老师用 PyCharm 写一个健康数据展示网页，包含：
一个表格，显示姓名、血压、心率。
输入框和按钮，输入新数据。
点击按钮，表格会添加新数据。
2.2 完整代码
老师会讲解下面这个代码，你可以复制到 PyCharm 试试效果。
<!DOCTYPE html>
<html>
<head>
<title>健康养老数据展示</title>
<style>
body { font-family: Arial; margin: 20px; }
table { border-collapse: collapse; width: 50%; }
th, td { border: 1px solid black; padding: 8px; text-align: center; }
input, button { margin: 10px; padding: 5px; }
button { background-color: #4CAF50; color: white; border: none; }
</style>
</head>
<body>
<h1>老年人健康数据</h1>
<table id="healthTable">
<tr>
<th>姓名</th>
<th>血压</th>
<th>心率</th>
</tr>
<tr>
<td>张三</td>
<td>120/80</td>
<td>70</td>
</tr>
</table>
<h2>添加新数据</h2>
<input type="text" id="nameInput" placeholder="姓名">
<input type="text" id="bpInput" placeholder="血压 (如120/80)">
<input type="text" id="hrInput" placeholder="心率">
<button onclick="addData()">添加</button>
<script>
function addData() {
let name = document.getElementById("nameInput").value;
let bp = document.getElementById("bpInput").value;
let hr = document.getElementById("hrInput").value;
if (name && bp && hr) {
let table = document.getElementById("healthTable");
let row = table.insertRow();
row.insertCell(0).innerHTML = name;
row.insertCell(1).innerHTML = bp;
row.insertCell(2).innerHTML = hr;
document.getElementById("nameInput").value = "";
document.getElementById("bpInput").value = "";
document.getElementById("hrInput").value = "";
} else {
alert("请填写所有字段！");
}
}
</script>
</body>
</html>2.3 操作步骤
在 PyCharm 中创建文件：
打开 PyCharm，点击“File > New Project”，选择空项目，命名（比如“HealthWeb”）。
右键项目文件夹，选“New > File”，命名为
index.html。复制以上代码到
index.html，保存（Ctrl+S）。
运行网页：
确保 Live Server 插件已安装（“File > Settings > Plugins”，搜索“Live Server”）。
右键
index.html，选“Open in Browser”或“Run”，在 Chrome 查看网页。如果 Live Server 不可用，拖动
index.html到 Chrome 浏览器。
老师会展示：
HTML：表格和输入框的结构。
CSS：如何让表格整齐、按钮变绿色。
JavaScript：点击“添加”按钮后表格如何更新。
自己试试：
输入姓名、血压（比如“120/80”）、心率（比如“70”）。
点击“添加”，看表格是否添加新行。
调试提示：如果网页没显示，检查是否保存了 index.html，或 Live Server 是否启用。在 Chrome 按 F12，打开“Console”查看错误。
学时3-4：实践课 - 动手做你的网页
3.1 目标
你将用 PyCharm 修改演示课的代码，完成以下任务：
修改页面标题和样式，突出健康养老主题（比如绿色、更大字体）。
在表格加一列“时间”，显示数据录入时间。
加一个“清空表格”按钮，点击后删除所有数据（保留表头）。
（选做）检查心率，确保是50-120之间的数字。
3.2 准备工作
环境：
打开 PyCharm，加载包含
index.html的项目。确保 Live Server 插件已启用，方便预览。
起点：
复制演示课代码，另存为
my_health.html（右键项目 > “New > File”）。
调试：
改代码后保存（Ctrl+S），右键
my_health.html选“Open in Browser”。如果有问题，检查 PyCharm 底部“Problems”面板或 Chrome 的“Console”（F12）。
3.3 任务分解
任务1：改标题和样式
目标：让网页更像健康养老主题。
操作：
打开
my_health.html，找<h1>老年人健康数据</h1>，改为<h1>健康养老数据管理</h1>。在
<style>里加：h1 { color: #28a745; } button { font-size: 18px; }保存，右键“Open in Browser”，检查标题是否变绿、按钮字体是否变大。
任务2：加“时间”列
目标：表格显示数据录入时间。
操作：
在
<table>的表头<tr>加<th>时间</th>：<tr> <th>姓名</th> <th>血压</th> <th>心率</th> <th>时间</th> </tr>在初始数据行加
<td>：<tr> <td>张三</td> <td>120/80</td> <td>70</td> <td>2025-04-28 10:00:00</td> </tr>在
addData()函数，let hr = ...后加：let time = new Date().toLocaleString();在添加新行部分，
row.insertCell(2).innerHTML = hr;后加：row.insertCell(3).innerHTML = time;保存，运行，添加数据，检查时间列是否显示当前时间。
任务3：加“清空表格”按钮
目标：点击按钮清空数据，保留表头。
操作：
在 HTML，
<button onclick="addData()">添加</button>后加：<button onclick="clearTable()">清空表格</button>在
<script>，addData()函数后加：function clearTable() { let table = document.getElementById("healthTable"); while (table.rows.length > 1) { table.deleteRow(1); } }保存，运行，点击“清空表格”，检查数据行是否消失（表头保留）。
任务4：检查心率
目标：确保心率是50-120之间的数字。
操作：
在
addData()函数，let hr = ...后加：let hrNum = parseInt(hr); if (isNaN(hrNum) || hrNum < 50 || hrNum > 120) { alert("心率必须是50-120之间的数字！"); return; }保存，运行，输入无效心率（比如“abc”或“150”），检查是否弹窗提示且不添加数据。
3.4 完整代码（参考）
如果卡住了，可以参考这个完整代码，但尽量自己写哦！
<!DOCTYPE html>
<html>
<head>
<title>健康养老数据管理</title>
<style>
body { font-family: Arial; margin: 20px; }
table { border-collapse: collapse; width: 60%; }
th, td { border: 1px solid black; padding: 8px; text-align: center; }
input, button { margin: 10px; padding: 5px; font-size: 18px; }
button { background-color: #28a745; color: white; border: none; }
h1 { color: #28a745; }
</style>
</head>
<body>
<h1>健康养老数据管理</h1>
<table id="healthTable">
<tr>
<th>姓名</th>
<th>血压</th>
<th>心率</th>
<th>时间</th>
</tr>
<tr>
<td>张三</td>
<td>120/80</td>
<td>70</td>
<td>2025-04-28 10:00:00</td>
</tr>
</table>
<h2>添加新数据</h2>
<input type="text" id="nameInput" placeholder="姓名">
<input type="text" id="bpInput" placeholder="血压 (如120/80)">
<input type="text" id="hrInput" placeholder="心率">
<button onclick="addData()">添加</button>
<button onclick="clearTable()">清空表格</button>
<script>
function addData() {
let name = document.getElementById("nameInput").value;
let bp = document.getElementById("bpInput").value;
let hr = document.getElementById("hrInput").value;
let time = new Date().toLocaleString();
if (name && bp && hr) {
let hrNum = parseInt(hr);
if (isNaN(hrNum) || hrNum < 50 || hrNum > 120) {
alert("心率必须是50-120之间的数字！");
return;
}
let table = document.getElementById("healthTable");
let row = table.insertRow();
row.insertCell(0).innerHTML = name;
row.insertCell(1).innerHTML = bp;
row.insertCell(2).innerHTML = hr;
row.insertCell(3).innerHTML = time;
document.getElementById("nameInput").value = "";
document.getElementById("bpInput").value = "";
document.getElementById("hrInput").value = "";
} else {
alert("请填写所有字段！");
}
}
function clearTable() {
let table = document.getElementById("healthTable");
while (table.rows.length > 1) {
table.deleteRow(1);
}
}
</script>
</body>
</html>任务5：在老师提供的代码基础上增加数据项
目标：增加血糖、体重、运动步数数据项，放到时间之前。
3.5 提交要求
在 PyCharm 保存
index.html，上传上自己申请的免费阿里云服务器上的站点，可以通过公网ip访问。还可以试试个性化，比如：
改表格边框颜色（在
<style>加table { border: 2px solid green; }）。加健康主题图片（
<img src="health.jpg">）。
如果有问题，使用 Chrome 的“Console”（F12），开发者选项拍错。
3.6 时间安排
学时3（1小时）：
30分钟：完成任务1（改样式）和任务2（加时间列）。
30分钟：开始任务3（清空按钮），调试代码。
学时4（1小时）：
40分钟：完成任务3，尝试任务4（心率检查）。
20分钟：优化网页（加颜色、图片），部署作品。
小贴士
遇到问题？：
检查代码拼写，比如
id写错或漏了分号;。用 PyCharm 的“Ctrl+Shift+L”格式化代码，找错误。
调试技巧：
在 Chrome 按 F12，打开“Console”查看 JavaScript 错误。
PyCharm 底部“Problems”面板会高亮语法错误。
想加创意？：
改背景色（
body { background-color: #f0f8ff; }）。加健康主题图片，突出医疗感。
健康养老的意义：
你的网页可以帮助医生快速查看老年人的健康数据。
未来可以加图表或异常数据提醒功能！
PyCharm 优势：
代码提示：输入
<h，PyCharm 会建议<h1>。错误高亮：拼错会标红，鼠标悬停看提示。
Live Server：改代码后自动刷新浏览器。
最后编辑：信息技术教研室 更新时间：2025-08-13 10:53
