前端基础——HTML练习项目:填写简历信息

页面效果

填写简历信息

代码实现

html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- table:表示整个表格 -->
    <table>
        <!-- thead:表格的头部区域 -->
        <thead><h3>请填写简历信息</h3></thead>
        <!-- tr:表格的一行 -->
        <tr>
            <!-- td:一个单元格 -->
            <td>
                <!-- label:点击label也能选中对应的单选,for属性:指定当前label和哪个相同id的input标签对应 -->
                <label for="name">姓名</label>
            </td>
            <td><input type="text"name=""id="name"></td>
        </tr>
        <tr>
            <td>性别</td>
            <td>
                <!-- 单选框radio;复选框checkbox;checked设置默认值;name相同时只能选一个 -->
                <input type="radio"name="sex"id="male"checked="checked">
                <label for="male">
                    <img src="https://img95.699pic.com/xsj/05/2y/9a.jpg!/fw/700/watermark/url/L3hzai93YXRlcl9kZXRhaWwyLnBuZw/align/southeast" alt=""width="20"height="20">男
                </label>
                <input type="radio"name="sex"id="female">
                <label for="female">
                    <img src="https://pic.616pic.com/ys_bnew_img/00/06/90/6YlqFNky01.jpg" alt=""width="20"height="20">女
                </label>
            </td>
        </tr>
        <tr>
            <td>出生日期</td>
            <td>
                <!-- select下拉菜单;selected="selected"表示默认选中;option提供选项 -->
                <select name="" id="">
                    <option value="">--请选择年份--</option>
                    <option value="">2000</option>
                    <option value="">2001</option>
                    <option value="">2002</option>
                    <option value="">2003</option>
                    <option value="">2004</option>
                    <option value="">2005</option>
                    <option value="">2006</option>
                </select>
                <select name="" id="">
                    <option value="">--请选择月份--</option>
                    <option value="">1</option>
                    <option value="">2</option>
                    <option value="">3</option>
                    <option value="">4</option>
                    <option value="">5</option>
                    <option value="">6</option>
                    <option value="">7</option>
                    <option value="">8</option>
                    <option value="">9</option>
                    <option value="">10</option>
                    <option value="">11</option>
                    <option value="">12</option>
                </select>
                <select name="" id="">
                    <option value="">--请选择日期--</option>
                    <option value="">1</option>
                    <option value="">2</option>
                    <option value="">3</option>
                    <option value="">4</option>
                    <option value="">5</option>
                    <option value="">6</option>
                    <option value="">7</option>
                    <option value="">8</option>
                    <option value="">9</option>
                    <option value="">10</option>
                    <option value="">11</option>
                    <option value="">12</option>
                    <option value="">13</option>
                    <option value="">14</option>
                    <option value="">15</option>
                    <option value="">16</option>
                    <option value="">17</option>
                    <option value="">18</option>
                    <option value="">19</option>
                    <option value="">20</option>
                    <option value="">21</option>
                    <option value="">22</option>
                    <option value="">23</option>
                    <option value="">24</option>
                    <option value="">25</option>
                    <option value="">26</option>
                    <option value="">27</option>
                    <option value="">28</option>
                    <option value="">29</option>
                    <option value="">30</option>
                    <option value="">31</option>
                </select>
            </td>
        </tr>
        <tr>
            <td><label for="school">就读学校</label></td>
            <td><input type="text" id="school"></td>
        </tr>
        <tr>
            <td>应聘岗位</td>
            <td>
                <input type="checkbox"name="" id="fe">
                <label for="fe">前端开发</label>
                <input type="checkbox"name="" id="server">
                <label for="server">后端开发</label>
                <input type="checkbox"name="" id="test">
                <label for="test">测试开发</label>
                <input type="checkbox"name="" id="operation">
                <label for="operation">运维开发</label>
            </td>
        </tr>
        <tr>
            <td>掌握的技能</td>
            <!-- textarea:内容框 -->
            <td><textarea name="" id=""cols="30"row="10"></textarea></td>
        </tr>
        <tr>
            <td>项目经历</td>
            <!-- textarea:内容框 -->
            <td><textarea name="" id=""cols="30"row="10"></textarea></td>
        </tr>
        <tr>
            <td></td>
            <td>
                <input type="checkbox"id="read">
                <label for="read">我已仔细阅读公司的招聘要求</label>
            </td>
        </tr>
        <tr>
            <td></td>
            <td><a href="#">查看我的状态</a></td>
        </tr>
        <tr>
            <td></td>
            <td>
                <ul>
                    <li>以上信息真实有效</li>
                    <li>能够尽早去公司学习</li>
                    <li>能够接受公司的加班文化</li>
                </ul>
            </td>
        </tr>
    </table>
</body>
</html>
相关推荐
CodeCraft Studio2 小时前
国产化PDF处理控件Spire.PDF教程:如何在 C# 中从 HTML 和 PDF 模板生成 PDF
pdf·c#·html·.net·spire.pdf·pdf文档开发·html创建模板pdf
muyouking113 小时前
深入理解 HTML `<label>` 的 `for` 属性:提升表单可访问性与用户体验
前端·html·ux
软件技术NINI3 小时前
html css js网页制作成品——饮料官网html+css+js 4页网页设计(4页)附源码
javascript·css·html
软件技术NINI3 小时前
html css js网页制作成品——HTML+CSS辣条俱乐部网页设计(5页)附源码
javascript·css·html
IT_陈寒3 小时前
Java性能调优:从GC日志分析到实战优化的5个关键技巧,让你的应用快如闪电!
前端·人工智能·后端
Mintopia3 小时前
🚀 Next.js API 压力测试:一场前端与后端的“极限拉扯”
前端·后端·全栈
Mintopia3 小时前
🛡️ 对抗性攻击与防御:WebAI模型的安全加固技术
前端·javascript·aigc
庙堂龙吟奈我何3 小时前
qiankun知识点
前端
ProcessOn官方账号3 小时前
深度解析产品运营的多元策略
程序人生·职场和发展·产品运营