學習了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 快捷鍵提高輸入效率.

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。