1.有序列表和無序列表
ol是有序列表標(biāo)簽张咳,它里面的列表項是有序號的
ul是無需列表標(biāo)簽,它里面的列表項是沒有序列的似舵,但是有符號
li 是列表項標(biāo)簽
列表可以嵌套定義
通過設(shè)置ol的type屬性值脚猾,可以改變序號類型,可以設(shè)置屬性值有:A砚哗,a龙助,I,i蛛芥,1
ul標(biāo)簽通過type屬性提鸟,也可以設(shè)置符號類型:屬性值有:disc,circle仅淑,square
2.定義列表標(biāo)簽
dl是定義列表標(biāo)簽
dt的定義列表的標(biāo)題標(biāo)簽
dd是定義列表的描述標(biāo)簽称勋,用來描述dt
可以用多個dd去描述一個dt
一個dl可以只描述一個dt,也可以描述多個dt
一般圖文布局的結(jié)構(gòu)會使用定義列表標(biāo)簽
3.表格標(biāo)簽
table是表格標(biāo)簽涯竟,通過border屬性設(shè)置表格的邊框赡鲜,width屬性設(shè)置寬度空厌,height屬性設(shè)置高度
設(shè)置表格的屬性align="center",將整個表格居中
tr是行標(biāo)簽
設(shè)置tr的align屬性银酬,控制的是tr里面的所有td的水平對齊方式
td是列標(biāo)簽
td設(shè)置align屬性嘲更,只是對當(dāng)前td設(shè)置水平對齊方式
colspan屬性,用于單元格跨列
rowspan屬性揩瞪,用于單元格跨行
如果表格里面的單元格需要跨列或者跨行:
先將完整的表格畫好
然后做跨列
最后做跨行
4.表格的完整結(jié)構(gòu)
表格根據(jù)結(jié)構(gòu)劃分:thead是表格的頭部赋朦,tbody是表格的主體,tfoot是表格的尾部
caption是表格的標(biāo)題標(biāo)簽
td是普通列壮韭,th是表頭列北发,th里面的內(nèi)容默認(rèn)會加粗并且居中
5.表單標(biāo)簽
form是表單標(biāo)簽,表單的作用是:接收用戶輸入的數(shù)據(jù)喷屋,并向服務(wù)器發(fā)送
method屬性設(shè)置表單的提交方式:GET和POSTP (POST比GET更安全)
action屬性設(shè)置表單的提交地址琳拨,比如:http://192.168.112.55:8080/address/add
6.表單里面的常用元素
form是表單標(biāo)簽,所有的表單元素屯曹,必須要放到form標(biāo)簽里面狱庇,才能提交到服務(wù)器
如果表單中使用了文件域,表單標(biāo)簽需要添加一個enctype="multipart/form-data"屬性
input標(biāo)簽是表單的元素恶耽,絕大多數(shù)表單元素都是使用input標(biāo)簽密任,通過type屬性設(shè)置元素的類型
type="text"是文本框,size屬性設(shè)置初始長度偷俭,maxlength屬性設(shè)最大輸入長度浪讳,name屬性設(shè)置表單元素的名稱
type="password"是密碼框
type="radio"是單選框,注意:一組單選框涌萤,必須要設(shè)置相同的name屬性值淹遵,value屬性設(shè)置表單元素保存的值,
checked屬性設(shè)置默認(rèn)選中,該屬性的屬性值也是checked负溪,在html中如果屬性值跟屬性名相同透揣,可以省略屬性值
type="checkbox"是復(fù)選框,也可以使用checked屬性
type="file"是文件域川抡,該標(biāo)簽用于選擇文件
type="button"是普通按鈕
type="submit"是提交按鈕辐真,用于將表單里面的數(shù)據(jù)向服務(wù)器提交,disabled屬性設(shè)置表單元素禁用
type="reset"是重置按鈕崖堤,用于清空表單里面的填寫內(nèi)容
type="image"是圖片提交按鈕侍咱,它不需要通過value屬性設(shè)置文本,但是需要通過src屬性設(shè)置一張圖片
type="hidden"是隱藏域密幔,用于在網(wǎng)頁中隱藏信息放坏。在實(shí)際開發(fā)中,隱藏域里面的信息是需要加密存儲的
select標(biāo)簽是下拉框老玛,option是下拉框的選項標(biāo)簽,value屬性設(shè)置每個選項的值,
注意:值可能跟顯示的文本不一樣蜡豹,selected屬性設(shè)置默認(rèn)選中
textarea標(biāo)簽是文本域麸粮,其實(shí)就是多行文本框,rows屬性設(shè)置行數(shù)镜廉,cols屬性設(shè)置每行列數(shù)弄诲,
readonly屬性表示只讀
7.html5新增表單元素
type="number"是數(shù)字文本框,min設(shè)置最小值娇唯,max設(shè)置最大值齐遵,step設(shè)置增量值
type="range"是滑塊,min塔插,max梗摇,step用法同number
type="url"是網(wǎng)址文本框,輸入的內(nèi)容必須以ftp: 或者 http: 或者 https: 開頭
type="email"是郵箱文本框想许,輸入的內(nèi)容必須包含@字符
type="search"其實(shí)就是文本框伶授,只是專門用于做搜索框用,輸入內(nèi)容后流纹,帶有清空內(nèi)容的小按鈕
<button type="submit">提交按鈕</button>
<button type="reset">重置按鈕</button>
<button type="button">普通按鈕</button>
新增屬性:
placeholder屬性設(shè)置文本框里面的提示內(nèi)容糜烹,當(dāng)在文本框中輸入真正的內(nèi)容時,會自動消失
required屬性給文本框漱凝,添加非空驗(yàn)證
pattern屬性用于給文本框疮蹦,添加正則表達(dá)式驗(yàn)證