2025.2.24
web练习创建一个博客主页，你需要积累所学到的知识，并将其应用，以截图的方式展示网页内容及代码。该主页必须包含以下模块，还可以添加其他模块或内容：
关于我模块：个人的简单介绍
我的技能模块：提醒：无序列表，使用<ul>标签，其中每个列表项由<li>标签表示。
我的时间表模块：使用表格标签将表格添加到你的博客主页中, 代表你的每日学习时间表。
联系我模块：为博客主页创建一个联系表单。这个联系表单包括名称，电子邮件和消息字段，还有一个提交按钮。
<!DOCTYPE html>
<html>
<head>
<title>
博客主页
</title>
</head>
<body>
<h2 style="color: rgb(53, 51, 134);font-family: 'Courier New', Courier, monospace;font-size: 35px;">关于我</h2>
<p style="color: rgb(63, 63, 139);font-family: 'Courier New', Courier, monospace;font-size: 25px;"><b>姓名：</b>...</p>
<p style="color: rgb(63, 63, 139);font-family: 'Courier New', Courier, monospace;font-size: 25px;"><b>年龄：</b>...</p>
<p style="color: rgb(63, 63, 139);font-family: 'Courier New', Courier, monospace;font-size: 25px;"><b>身高/体重：</b>...</p>
<p style="color: rgb(63, 63, 139);font-family: 'Courier New', Courier, monospace;font-size: 25px;"><b>专业：</b>...</p>
<p style="color: rgb(63, 63, 139);font-family: 'Courier New', Courier, monospace;font-size: 25px;"><b>职业：</b>...</p>
<h2 style="color: rgba(42, 14, 70, 0.815);font-family: 'Courier New', Courier, monospace;font-size: 35px;">技能模块</h2>
<ul>
<li style="color: rgba(66, 35, 96, 0.815);font-family: 'Courier New', Courier, monospace;font-size: 35px;">...</li>
<img src="图片地址" width="304" height="150">
<li style="color: rgba(66, 35, 96, 0.815);font-family: 'Courier New', Courier, monospace;font-size: 35px;">...</li>
</ul>
<h2 style="color: rgba(75, 19, 86, 0.815);font-family: 'Courier New', Courier, monospace;font-size: 35px;">...</h2>
<style>
table {
width: 100%;
border-collapse: collapse;
}
th, td {
border: 1px solid #000;
padding: 10px;
text-align: center;
}
th {
background-color: #f2f2f2;
font-weight: bold;
}
td {
background-color: #fff;
}
</style>
<table>
<!-- 表头：星期 -->
<thead>
<tr>
<th>时间</th>
<th>周一</th>
<th>周二</th>
<th>周三</th>
<th>周四</th>
<th>周五</th>
<th>周六</th>
<th>周日</th>
</tr>
</thead>
<!-- 表体：课程信息 -->
<tbody>
<!-- 第一行：日期 -->
<tr>
<td>日期</td>
<td>02-17</td>
<td>02-18</td>
<td>02-19</td>
<td>02-20</td>
<td>02-21</td>
<td>02-22</td>
<td>02-23</td>
</tr>
<!-- 第二行：课程1 -->
<tr>
<td>08:00-09:40</td>
<td>WEB应用开发技术</td>
<td>Python程序设计</td>
<td></td>
<td>概率论与数理统计</td>
<td></td>
<td></td>
<td></td>
</tr>
<!-- 第三行：课程2 -->
<tr>
<td>10:00-11:40</td>
<td></td>
<td>数据库原理</td>
<td>计算机网络</td>
<td></td>
<td>高级英语</td>
<td></td>
<td></td>
</tr>
<!-- 第四行：课程3 -->
<tr>
<td>14:00-15:40</td>
<td>体育IV</td>
<td></td>
<td>软件工程</td>
<td></td>
<td>毛概</td>
<td></td>
<td></td>
</tr>
<!-- 第五行：课程4 -->
<tr>
<td>16:00-17:40</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
<h2 style="color: rgba(102, 21, 118, 0.815);font-family: 'Courier New', Courier, monospace;font-size: 35px;">联系我模块</h2>
<form action="/博客主页.html" method="POST" style="width: 80%; margin: 20px auto; background-color: #fff; padding: 20px; border-radius: 8px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);">
<label for="name" style="font-size: 20px; margin-bottom: 10px; display: block;">名称：</label>
<input type="text" id="name" name="name" required style="width: 100%; padding: 10px; margin-bottom: 20px; border: 1px solid #ccc; border-radius: 4px; font-size: 16px;">
<label for="email" style="font-size: 20px; margin-bottom: 10px; display: block;">电子邮件：</label>
<input type="email" id="email" name="email" placeholder="请输入电子邮件" required style="width: 100%; padding: 10px; margin-bottom: 20px; border: 1px solid #ccc; border-radius: 4px; font-size: 16px;">
<label for="message" style="font-size: 20px; margin-bottom: 10px; display: block;">消息：</label>
<textarea id="message" name="message" rows="5" placeholder="请输入您的消息" required style="width: 100%; padding: 10px; margin-bottom: 20px; border: 1px solid #ccc; border-radius: 4px; font-size: 16px;"></textarea>
<button type="submit" style="background-color: rgb(53, 51, 134); color: white; font-size: 20px; padding: 10px 20px; border: none; border-radius: 4px; cursor: pointer; width: 100%;">提交</button>
</form>
</body>
</html>
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 10年+ .NET Coder 心语 ── 封装的思维：从隐藏、稳定开始理解其本质意义
· 地球OL攻略 —— 某应届生求职总结
· 提示词工程——AI应用必不可少的技术
· Open-Sora 2.0 重磅开源！
· 周边上新：园子的第一款马克杯温暖上架