表單
form屬性
2.表單
form
action 定義提交的網(wǎng)址 也算是路徑
method 定義提交的請求方式
get
優(yōu)點:速度快 給服務(wù)器造成的壓力小
缺點:保密性差 對傳輸文件大小有限制
post
優(yōu)點:保密性好 可以上傳大文件
缺點:速度慢 給服務(wù)器造成的壓力大
input 元素
- 屬性
1.name 定義input元素的名稱 作為提交給服務(wù)器的參數(shù)名
2.value 定義input元素的值 作為提交給服務(wù)器的參數(shù)名對應(yīng)的值 - 類型 type
1.text 文本框(placeholder 定義文本框內(nèi) 默認(rèn)展示的值)
輸入框:<input type="text" placeholder="請輸入">
2.password 密碼框
在里面輸入的值會以星號或者小點展示
密碼框:<input type="password"><br>
3.button 按鈕
<button>按鈕</button>
4.checkbox 復(fù)選框 checked默認(rèn)狀態(tài) checked="checked"
<form action="">復(fù)選框:
<input type="checkbox" name="sex" value="man">數(shù)學(xué)
<input type="checkbox" name="sex" value="woman">語文
</form>
5.radio 單選框 name值必須一樣
<form action="">單選框:
<input type="radio" name="sex" value="man">男
<input type="radio" name="sex" value="woman">女
</form>
6.textarea 生成一個可以多行輸入的文本框
cols 定義文本的寬度
rows 定義文本的行數(shù)
<textarea name="" id="" cols="30" rows="10">這是一個文本框</textarea>
7.submit 提交 向服務(wù)器發(fā)送表單數(shù)據(jù)
<form action="">提交按鈕:
<input type="submit" value="提交">
</form>
8.select/option 創(chuàng)建單選或多選菜單 必須組合使用
<select>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
9.file 上傳文件
10.reset 重置 清空表單中所有已輸入的內(nèi)容
- 表單樣式初始化
form margin:0px;
input outline:0px/none;清除選中狀態(tài)下的藍色邊框
margin:0px;
padding:0px;
select margin:0px
textarea margin:0px;
padding:0px;
outline:0px/none;清除選中狀態(tài)下的藍色邊框
resize:none; 設(shè)定 用戶無法自己調(diào)節(jié)大小
overflow:auto; 超出隱藏
表單新增類型:
email 用來填寫郵箱地址
url 用來填寫網(wǎng)址
range設(shè)置滑動條
date 日期控件
month 年月控件
week 周控件
time 時間控件
datetime 日期控件
新增樣式:
rgba( ) r,g,b(0~255) a(0~1)
text-shadow 文字陰影
四個參數(shù)
水平位置
垂直位置
陰影模糊度
顏色
可以同時給一個文字設(shè)置多個陰影 陰影會重疊
writing-mode:vertical-lr;設(shè)置文字垂直排布居中
表格
table 所有的表格元素都在table中編寫
屬性(直接寫在標(biāo)簽內(nèi)部)
border 聲明 表格邊框
標(biāo)題沒有邊框
表格行沒有邊框
只有表格單元格有邊框
border 里面的數(shù)值控制的是最外層的大邊框 是table的獨有屬性
cellspacing 控制單元格之間的間隙 是table的獨有屬性
cellpadding 控制單元格內(nèi)部的內(nèi)邊距 是table的獨有屬性
樣式(寫在style標(biāo)簽里面)
border-collapse:collapse;樣式初始化
table td,th{padding: 0px;}樣式初始化
caption 編寫 表格標(biāo)題
文字居中
thead 定義表頭行
th定義 表頭行里面的標(biāo)準(zhǔn)單元格
文字居中
文字加粗
tbody 定義表格內(nèi)容區(qū)域
tr 定義表格行
td 定義表格標(biāo)準(zhǔn)單元格
行合并(橫著 上下) rowspan 將下面行的 同列單元格 合并到 本單元格中
被合并的單元格 不在下面行出現(xiàn) (被合并的不要那個td了)
列合并 (豎著 左右)colspan 將同行 本單元格 后面列的 若干單元格合并
被合并的單元格不在后面列出現(xiàn)(被合并的不要那個td了)
tfooter 定義表格尾部 行
單元格沒有特殊的標(biāo)簽 就使用td
總結(jié)
thead跟tr 都是定義行 但是thead專門定義表頭 tr一般用來定義內(nèi)容區(qū)域的行
同理 th 跟td一個作為表頭單元格 一個是內(nèi)容單元格
能達到 顯示與隱藏的視覺效果 的幾種方法
display none為隱藏 block 為顯示
opacity 0為完全透明 1為不透明
設(shè)置寬高 overflow:hidden 0px為消失 固定值為出現(xiàn)