Visual Studio Code:HTML——表单

最新推荐文章于 2025-03-30 12:53:44 发布

原创

最新推荐文章于 2025-03-30 12:53:44 发布 · 3k 阅读

23 ·

CC 4.0 BY-SA版权

文章标签：

#html

这篇博客聚焦于HTML表单的制作，重点在于如何利用colspan和rowspan属性来合并单元格，实现复杂布局。通过完成《个人简历》的实践练习，读者将掌握HTML表单的设计技巧，并能呈现专业级的网页效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

【关卡前提】
掌握HTML 表单制作
【关卡知识】

表单标签

表格标签

【关卡要求】
完成《个人简历》练习
【关卡效果】
《个人简历》练习效果图如下：
在这里插入图片描述
【知识补充】

HTML 合并单元格
如果要将两个或多个列合并为一个列，将使用colspan属性如果要合并两行或更多行，则将使用rowspan属性

【代码】


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>个人简历</title>
</head>
<body>
    <form action="">
        <table border="1" align="center">
            <h2 align="center">个人简历</h2>
            <tr align="center">
                <td>姓名</td>
                <td><input type="text"></td>
                <td >性别</td>
                <td><input type="text"></td>
                <td>出生年月</td>
                <td><input type="text"></td>
                <td rowspan="4"><input type="file"></td>
            </tr>
            <tr align="center">
                <td>民族</td>
                <td><input type="text">

最低0.47元/天解锁文章

200万优质内容无限畅学