HTML小案例: 填写简历信息页面布局

学习了HTML基础知识后,我们就可以实现一个简单的填写简历的页面了. (关于HTML的基础知识可以查看本篇文章.-->HTML基础知识.)

---

代码如下:

<table width="500px" cellspacing="0">
    <thead>
        <h3>请填写简历信息</h3>
    </thead>
    <tbody>
        <tr>
            <td>
                <label for="name">姓名</label>
            </td>
            <td>
                <input type="text" id="name">
            </td>
        </tr>
        <tr>
            <td>
                性别
            </td>
            <td>
                <input type="radio" name="sex" id="male" checked="checked">
                <!-- img 要放到 label 内部, 保证点击图标也能选中单选框 -->
                <!-- 还需要把 width 加上, 否则图片太大了 -->
                <!-- 图片路径自行输入 -->
                <label for="male"><img src="./image/男.png" alt="" width="20px">男</label>
                <input type="radio" name="sex" id="female">
                <label for="female"><img src="./image/女.png" alt="" width="20px">女</label>
            </td>
        </tr>
        <tr>
            <td>
                出生日期
            </td>
            <td>
                <select>
                    <option>--请选择年份--</option>
                    <option>1995</option>
                    <option>1996</option>
                    <option>1997</option>
                    <option>1998</option>
                    <option>1999</option>
                    <option>2000</option>
                    <option>2001</option>
                    <option>2002</option>
                    <option>2003</option>
                    <option>2004</option>
                </select>
                <select>
                    <option>--请选择月份--</option>
                    <option>1</option>
                    <option>2</option>
                    <option>3</option>
                    <option>4</option>
                    <option>5</option>
                    <option>6</option>
                    <option>7</option>
                    <option>8</option>
                    <option>9</option>
                    <option>10</option>
                    <option>11</option>
                    <option>12</option>
                </select>
                <select>
                    <option>--请选择日期--</option>
                    <option>1</option>
                    <option>2</option>
                    <option>3</option>
                    <option>4</option>
                    <option>5</option>
                    <option>6</option>
                    <option>7</option>
                    <option>8</option>
                    <option>9</option>
                    <option>10</option>
                    <option>11</option>
                    <option>12</option>
                    <option>13</option>
                    <option>14</option>
                    <option>15</option>
                    <option>16</option>
                    <option>17</option>
                    <option>18</option>
                    <option>19</option>
                    <option>20</option>
                    <option>21</option>
                    <option>22</option>
                    <option>23</option>
                    <option>24</option>
                    <option>25</option>
                    <option>26</option>
                    <option>27</option>
                    <option>28</option>
                    <option>29</option>
                    <option>30</option>
                    <option>31</option>
                </select>
            </td>
        </tr>
        <tr>
            <td>就读学校</td>
            <td>
                <input type="text">
            </td>
        </tr>
        <tr>
            <td>应聘岗位</td>
            <td>
                <input type="checkbox" id="frontend"> <label for="frontend"> 前端开发</label>
                <input type="checkbox" id="backend"> <label for="backend">后端开发</label>
                <input type="checkbox" id="qa"> <label for="qa">测试开发</label>
                <input type="checkbox" id="op"> <label for="op">运维开发</label>
            </td>
        </tr>
        <tr>
            <td>掌握技能</td>
            <td>
                <textarea cols="50" rows="10"></textarea>
            </td>
        </tr>
        <tr>
            <td>项目经历</td>
            <td>
                <textarea cols="50" rows="10"></textarea>
            </td>
        </tr>
        <tr>
            <td></td>
            <td>
                <input type="checkbox" id="confirm"> <label for="confirm">我已仔细阅读过公司的招聘要求</label>
            </td>
        </tr>
        <tr>
            <td></td>
            <td>
                <a href="#">查看我的状态</a>
            </td>
        </tr>
        <tr>
            <td></td>
            <td>
                <h4>应聘者确认:</h4>
                <ul>
                    <li>以上信息真实有效</li>
                    <li>能够尽早来公司实习</li>
                    <li>能够接受公司的加班文化</li>
                </ul>
            </td>
        </tr>
    </table>

提示:

• 使用表格进行整体布局
• 使用各种 input 标签 + textarea 实现页面中的输入控件
• input 标签搭配合适的 label 提升用户体验.
• 针对下拉框这种选项较多的, 使用 Emmet 快捷键提高输入效率.