學(xué)習(xí)了HTML基礎(chǔ)知識后,我們就可以實現(xiàn)一個簡單的填寫簡歷的頁面了. (關(guān)于HTML的基礎(chǔ)知識可以查看本篇文章.-->HTML基礎(chǔ)知識.)

---

代碼如下:

<table width="500px" cellspacing="0"><thead><h3>請?zhí)顚懞啔v信息</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 內(nèi)部, 保證點擊圖標(biāo)也能選中單選框 --><!-- 還需要把 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>就讀學(xué)校</td><td><input type="text"></td></tr><tr><td>應(yīng)聘崗位</td><td><input type="checkbox" id="frontend"> <label for="frontend"> 前端開發(fā)</label><input type="checkbox" id="backend"> <label for="backend">后端開發(fā)</label><input type="checkbox" id="qa"> <label for="qa">測試開發(fā)</label><input type="checkbox" id="op"> <label for="op">運維開發(fā)</label></td></tr><tr><td>掌握技能</td><td><textarea cols="50" rows="10"></textarea></td></tr><tr><td>項目經(jīng)歷</td><td><textarea cols="50" rows="10"></textarea></td></tr><tr><td></td><td><input type="checkbox" id="confirm"> <label for="confirm">我已仔細(xì)閱讀過公司的招聘要求</label></td></tr><tr><td></td><td><a href="#">查看我的狀態(tài)</a></td></tr><tr><td></td><td><h4>應(yīng)聘者確認(rèn):</h4><ul><li>以上信息真實有效</li><li>能夠盡早來公司實習(xí)</li><li>能夠接受公司的加班文化</li></ul></td></tr></table>

提示:

• 使用表格進(jìn)行整體布局
• 使用各種 input 標(biāo)簽 + textarea 實現(xiàn)頁面中的輸入控件
• input 標(biāo)簽搭配合適的 label 提升用戶體驗.
• 針對下拉框這種選項較多的, 使用 Emmet 快捷鍵提高輸入效率.

總結(jié)

以上是生活随笔為你收集整理的HTML小案例: 填写简历信息页面布局的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。