前端基础——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>