HTML学习笔记二--表单及表格的结合使用个人简历制作
生活随笔
收集整理的這篇文章主要介紹了
HTML学习笔记二--表单及表格的结合使用个人简历制作
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
?部分內容轉自：https://www.cnblogs.com/inmeditation/p/12171727.html
一、表格
1、表格標簽
? ? 表格由 <table> 標簽來定義。每個表格均有若干行（由 <tr> 標簽定義），每行被分割為若干單元格（由 <td> 標簽定義）。字母 td 指表格數據（table data），即數據單元格的內容。數據單元格可以包含文本、圖片、列表、段落、表單、水平線、表格等等。??
| 表格標簽 | 描述 |
| <table> | 表格的最外層容器 |
| <tr> | 定義表格行 |
| <th> | 定義表頭 |
| <td> | 定義表格單元 |
| <caption> | 定義表格表題/2、 |
2、表格邊框
| border | 表格邊框 |
| cellpadding | 單元格內的空間 |
| cellspacing | 單元格之間的空間 |
3、語義化標簽
| <thead> | 表格頭部 |
| <tbody> | 表格主題 |
| <tfoot> | 表格結束 |
4、表格屬性
| left | 左 |
| center | 中 |
| right | 右 |
| top | 上 |
| middle | 中 |
| bottom | 下 |
?
二、表單
?HTML 表單用于搜集不同類型的用戶輸入。
<form> 元素
<form> 元素定義 HTML 表單：
<input> 元素
用于搜集用戶信息,根據不同的type屬性值,展示不同的控件
表單標簽
?表單元素指的是不同類型的 input 元素、復選框、單選按鈕、提交按鈕等等。
| text | 普通的文本輸入框 |
| password | 密碼輸入框 |
| checkbox | 復選框 |
| radio | 單選框 |
| file | 上傳文件 |
| submit | 提交按鈕 |
| reset | 重置按鈕 |
?
例子：
<form >輸入框: <input type="text"> <br>密碼框: <input type="password"> <br>復選框: <input type="checkbox">JAVA<input type="checkbox">C++<input type="checkbox">JS <br>單選框: <input type="radio" name="gender">男<input type="radio" name="gender">女 <br>上傳文件: <input type="file"> <br>提交按鈕: <input type="submit">重置按鈕: <input type="reset"> <br></form>?結果：
表單屬性
Action 屬性
action 屬性定義在提交表單時執行的動作。
向服務器提交表單的通常做法是使用提交按鈕。
通常，表單會被提交到 web 服務器上的網頁。
在上面的例子中，指定了某個服務器腳本來處理被提交表單。
Method 屬性
method 屬性規定在提交表單時所用的 HTTP 方法（GET?或?POST）。
GET方法的使用
GET方法為默認方法，在沒有敏感信息時使用，適合少量數據的提交，瀏覽器會設置容量限制。
POST方法的使用
?如果表單正在更新數據，或者包含敏感信息，則POST更加安全。
Name 屬性
如果要正確地被提交，每個輸入字段必須設置一個 name 屬性。
個人簡歷例子代碼：
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=<device-width>, initial-scale=1.0"><title>Document</title></style> </head> <body><from><table border="1px" bordercolor="#000000" cellspacing="0px" ><tr> <caption><h2>個人簡歷</h2></caption></tr><tr width="705px"><td style="text-align: center;"width="100px"height="30px">姓名</td><td width="100px"height="30px"><input type="text" style="width: 92%;height: 70%;" /></td><td style="text-align: center;"width="100px"height="30px">性別</td><td width="100px"height="30px"><input type="text" style="width: 92%;height: 70%;"/></td><td style="text-align: center;"width="100px"height="30px">出生年月</td><td width="100px"height="30px" ><input type="text"style="width: 92%;height: 70%;" /></td><td rowspan="4"width="100px"height="120px"><input type="file"style="width: 97%;height: 70%;"></td></tr><tr width="705px"><td style="text-align: center;"width="100px"height="30px">民族</td><td width="100px"height="30px"><input type="text"style="width: 92%;height: 70%;" /></td><td style="text-align: center;"width="100px"height="30px">政治面貌</td><td width="100px"height="30px"><input type="text"style="width: 92%;height: 70%;" /></td><td style="text-align: center;" width="100px"height="30px">身高</td><td width="100px"height="30px"><input type="text"style="width: 92%;height: 70%;" /></td></tr><tr width="705px"><td style="text-align: center;"width="100px"height="30px">學制</td><td width="100px"height="30px"><input type="text"style="width: 92%;height: 70%;" /></td><td style="text-align: center;"width="100px"height="30px">學歷</td><td width="100px"height="30px"><input type="text"style="width: 92%;height: 70%;" /></td><td style="text-align: center;"width="100px"height="30px">戶籍</td><td width="100px"height="30px"><input type="text"style="width: 92%;height: 70%;" /></td></tr><tr width="705px"><td style="text-align: center;"width="100px"height="30px">專業</td><td width="100px"height="30px"><input type="text"style="width: 92%;height: 70%;" /></td><td style="text-align: center;" colspan="2"width="200px"height="30px">畢業學校</td><td colspan="2"width="200px"height="30px"><input type="text"style="width: 96%;height: 70%;" /></td></tr><tr width="705px"><td colspan="7"style="text-align: center;"width="700px"height="30px"><b>技能、特長或愛好</b></td></tr><tr width="705px"> <td style="text-align: center;"width="100px"height="30px">外語等級</td><td colspan="2"width="200px"height="30px"><input type="text"style="width: 96%;height: 70%;" /></td><td style="text-align: center;"width="100px"height="30px">計算機</td><td colspan="3"width="300px"height="30px"><input type="text" style="width: 97%;height: 70%;" /></td></tr><tr width="705px"><td colspan="7"style="text-align: center;"width="700px"height="30px">個人履歷</td></tr><tr width="705px"><td style="text-align: center;"width="100px"height="30px">時間</td><td style="text-align: center;"colspan="2"width="200px"height="30px">單位</td><td style="text-align: center;"colspan="4"width="400px"height="30px">經歷</td></tr><tr width="705px"><td width="100px"height="30px"><input type="text"style="width: 92%;height: 70%;" /></td><td colspan="2"width="200px"height="30px"><input type="text"style="width: 96%;height: 70%;" /></td><td colspan="4"width="400px"height="30px"><input type="text" style="width: 98%;height: 70%;" /></td></tr><tr width="705px"><td width="100px"height="30px"><input type="text"style="width: 92%;height: 70%;" /></td><td colspan="2"width="200px"height="30px"><input type="text"style="width: 96%;height: 70%;" /></td><td colspan="4"width="400px"height="30px"><input type="text" style="width: 98%;height: 70%;" /></td></tr><tr width="705px"><td width="100px"height="30px"><input type="text"style="width: 92%;height: 70%;" /></td><td colspan="2"width="200px"height="30px"><input type="text" style="width: 96%;height: 70%;" /></td><td colspan="4"width="400px"height="30px"><input type="text" style="width: 98%;height: 70%;" /></td></tr><tr width="705px"><td colspan="7"style="text-align: center;"width="700px"height="30px">聯系方式</td></tr><tr width="705px"><td width="100px" height="30px"style="text-align: center;">通信地址</td><td colspan="2"width="200px"height="30px"><input type="text"style="width: 96%;height: 70%;" /></td><td style="text-align: center;"width="100px"height="30px">聯系電話</td><td colspan="3"width="300px"height="30px"><input type="text" style="width: 97%;height: 70%;" /></td></tr><tr width="705px"><td style="text-align: center;" width="100px"height="30px">E-mail</td><td colspan="2"width="200px"height="30px"><input type="text" style="width: 96%;height: 70%;" /></td><td style="text-align: center;"width="100px"height="30px">郵編</td><td colspan="3"width="300px"height="30px"><input type="text"style="width: 97%;height: 70%;" /></td></tr><tr width="705px"><td colspan="7"style="text-align: center;"width="700px"height="30px">自我評價</td></tr></table></from> </body> </html>?結果：
三、學習總結?
四、注意事項?
? ? 在個人簡歷例子中，需要使用到表單和表格，在<from>標簽中嵌入<table>,在<td>中使用<input>輸入數據。在<input>中可以使用百分比來設置撐滿父容器。
?
總結
以上是生活随笔為你收集整理的HTML学习笔记二--表单及表格的结合使用个人简历制作的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： python培训班排行榜-重庆Pytho
- 下一篇： 项目经理的“势能”培养 (转)