一、表格
1、表格標簽
a、table 表格
b、thead 表格頭
c、tbody 表格主體
d、tr 表格行
e、th 元素定義表頭
f、td 元素定義表格單元
2、表格樣式重置
a、table{border-collapse:collapse;}單元格間隙合並(默認:separate分隔)
b、th,td{padding:0;}重置單元格默認填充
3、單元格合並
a、colspan屬性規定單元格可橫跨的列數。
<td colspan="2"></td>
b、a、colspan屬性規定單元格可橫跨的列數。
<td rowspan="2"></td>
4、縱向合並不要跨主體標簽進行合並。比如從thead到tbody;給表格添加背景顏色,優先考慮給tr/td
二、表單
1、form 表單(action=“” method=“” post get delete put)(<form action="https://www.baidu.com/s">)
2、表單元素:<input type="類型" name="" value=""/>
a、text 文本框 (outline:none;光標移入效果去掉。)
b、password 密碼
c、radio 單選
d、checkbox 復選
e、submit 提交
f、reset 重置
g、button 按鈕
h、image 圖片作為提交按鈕<input type="image" src="圖片地址" value="后台提交的文字">顯示的文字
i、file 上傳
j、hidden 隱藏 <input type="hidden">(<input type="hidden" name="marriage" value="未婚">)
k、date 日期選擇框 (H5新增類型,不兼容)
l、time 時間選擇框 (H5新增類型,不兼容)
3、IE6下 input 背景圖兼容
input 的背景圖片會跟隨文字一起被擠走。
解決辦法:不給input加背景,而是用一個額外的標簽包含input,然后給這個標簽加背景,並將input的背景、邊框等設置為none。
4、input屬性:
a、label標簽為input元素定義標注
<input type="checkbox" name="" id="a">
<lable for="a">········</lable>
b、checked在頁面加載時默認選定的input元素。
<input type="checkbox" name=""checked/>
c、disabled屬性規定應該禁用input元素。
<input type="checkbox" name="" disabled/>
5、select/option下拉選框
對高度的支持不兼容;
6、textarea文本域
各個瀏覽器下的默認滾動條顯示不兼容
css3新增resize調整尺寸樣式屬性;
7、outline輪廓線;
A標簽輪廓線去除方法:
a、<a herf="#" onfocus="this.blur();">······</a>
b、<a herf="#"hidefocus>····</a>
8、表單提交數據的方式:method
a、.get 默認值
通過地址欄講師局傳輸給后端服務器
get 方式可以提交的最大數據是1024字節。
只能提交文本信息
b、post
通過瀏覽器后台隱藏提交數據給后端服務器
post方式本身提交的數據是沒有任何限制的,但是會受網絡鏈接超時,或者服務器最大允許提交文件大小的限制
可以提交各種類型的數據。
9、 表單布局注意事項
1.不要挑戰用戶的習慣:比如像注冊,重置等按鈕,用戶已經習慣這些按鈕的順序和位置,我們在開發過程中,不要輕易改變這些按鈕的順序和位置。
2.有風險的操作,都應當有的確認提示:比如重置按鈕,有可能用戶是誤點。