## HTML基礎(chǔ)-列表標(biāo)簽/表格標(biāo)簽
# 列表標(biāo)簽(無序列表/有序列表/定義列表)
# 表格標(biāo)簽
# 單元格合并
1.什么是列表標(biāo)簽
列表標(biāo)簽的作用:給一堆數(shù)據(jù)添加列表語義,也就是告訴搜索引擎高速瀏覽器這一堆數(shù)據(jù)是一個(gè)整體
2.HTML中列表標(biāo)簽的分類
-無序列表(最多)(unordered list)
-有序列表(最少)(ordered list)
-定義列表(其次)(definition list)
無序列表的作用:
給一堆數(shù)據(jù)添加列表語義,并且這一堆數(shù)據(jù)中所有的數(shù)據(jù)沒有先后之分
無序列表格式:
需要顯示的條目?jī)?nèi)容
li是list item的縮寫
list是列表的意思
item是條目的意思
結(jié)合起來就是列表?xiàng)l目的意思
注意點(diǎn):
-ul標(biāo)簽是用來給一堆數(shù)據(jù)添加列表語義的,而不是給列表添加小圓點(diǎn)的
-ul標(biāo)簽和li標(biāo)簽是一個(gè)整體,是一個(gè)組合.所以一般情況下不會(huì)單獨(dú)出現(xiàn)
-由于ul標(biāo)簽和li標(biāo)簽是一個(gè)組合,所以u(píng)l標(biāo)簽中不推薦出現(xiàn)其他標(biāo)簽;但是li標(biāo)簽中可以放其他標(biāo)簽
無序標(biāo)簽應(yīng)用場(chǎng)景:
-新聞列表
-商品列表
-導(dǎo)航條
注意點(diǎn):
雖然通過標(biāo)簽屬性也能修改樣式,但是企業(yè)開發(fā)中不推薦這樣做
在webstrom中如何快速編寫一個(gè)ul的格式
ul>li*
或者
ul>li*數(shù)量
ul>li*2>h2+ul>li*3
定義列表的格式:
dt是英文definition title的縮寫,所以dt的含義就是用來定義列表
dd是標(biāo)題definition description的縮寫,所以dd的含義就是來定義標(biāo)題對(duì)應(yīng)的描述的
先通過dt標(biāo)簽定義列表中的所有標(biāo)題,然后
定義列表的應(yīng)用
-網(wǎng)站底部的相關(guān)信息
-圖文混排
定義列表的注意點(diǎn):
-dl和ul/ol一樣,dl和dt/dd是一個(gè)整體,所以他們一般情況下不會(huì)單獨(dú)出現(xiàn),都是一起出現(xiàn)
-和ul.ol一樣,由于dt/dd是一個(gè)組合標(biāo)簽,所以dl中建議只放dt和dd標(biāo)簽
-一個(gè)dt可以沒有對(duì)應(yīng)的dd標(biāo)簽,也可以有多個(gè)對(duì)應(yīng)的dd標(biāo)簽,但是一般推薦一個(gè)dt對(duì)應(yīng)一個(gè)dd標(biāo)簽
-和li標(biāo)簽一樣,為了豐富內(nèi)容,可以在dd/dt中添加其他標(biāo)簽
定義列表練習(xí)(了解)
什么是表格標(biāo)簽?
表格標(biāo)簽作用:用來給一堆數(shù)據(jù)添加表格語義
表格標(biāo)簽格式:
需要顯示的內(nèi)容
需要顯示的內(nèi)容
-表格標(biāo)簽中的table表示整個(gè)表格,也就是一堆table標(biāo)簽就是一個(gè)表格
-表格標(biāo)簽中的tr標(biāo)簽代表整個(gè)表格中的一行數(shù)據(jù),也就是說一對(duì)tr標(biāo)簽代表表格中的一行數(shù)據(jù)
-表格標(biāo)簽中的td標(biāo)簽代表表格中一行中的一個(gè)單元格,也就是說一對(duì)td標(biāo)簽就是一行中的一個(gè)單元格
注意點(diǎn):
-表格標(biāo)簽有一個(gè)邊框?qū)傩?這個(gè)屬性決定了邊框的寬度.
-默認(rèn)情況下這個(gè)屬性的值是0,所以看不到邊框
-表格標(biāo)簽和列表標(biāo)簽一樣,table/tr/td一般是同時(shí)出現(xiàn)
td:table datacell
tr:table dataroll
表格標(biāo)簽的屬性:
1.高度和寬度的屬性
-可以給table標(biāo)簽和td標(biāo)簽使用
1.1表格的寬度和高度是根據(jù)內(nèi)容的尺寸來調(diào)整的,也可以通過設(shè)置width/height屬性手動(dòng)指定
1.2如果給td標(biāo)簽設(shè)置width/height屬性,會(huì)修改當(dāng)前單元格的寬度高度,不會(huì)影響整個(gè)表格的寬度和高度
2.水平對(duì)齊和垂直對(duì)齊
-水平對(duì)其可以給table標(biāo)簽和tr標(biāo)簽和td標(biāo)簽使用
-垂直對(duì)齊只能給tr標(biāo)簽和td標(biāo)簽使用
2.1給table標(biāo)簽設(shè)置align屬性,可以控制表格在水平方向的對(duì)齊方式
2.2給tr標(biāo)簽設(shè)置align屬性,可以控制當(dāng)前行中所有單元格內(nèi)容的水平方向的對(duì)齊方式
注意點(diǎn):如果td中設(shè)置了align屬性,tr中也設(shè)置了align屬性,那么單元格中會(huì)按照td中的設(shè)置來對(duì)齊
2.3給tr標(biāo)簽設(shè)置valign屬性,可以控制當(dāng)前行中所有單元格在垂直方向的對(duì)齊方式
2.4給td標(biāo)簽設(shè)置valign屬性,可以控制當(dāng)前單元格在垂直方向的對(duì)齊方式
注意點(diǎn):如果td中設(shè)置了valign屬性,tr中也設(shè)置了valign屬性,那么單元格中會(huì)按照td中的設(shè)置來對(duì)齊
3.外邊距和內(nèi)邊距屬性
-只能給table標(biāo)簽使用
默認(rèn)情況下兩個(gè)單元格之間的外邊距cellspacing是2
默認(rèn)情況下單元格內(nèi)內(nèi)邊距cellpadding為1
如何制作一個(gè)細(xì)線表格?
-在表格標(biāo)簽中想通過指定外邊距為0來實(shí)現(xiàn)細(xì)線表格是不靠譜的,其實(shí)它是把兩條線合并成一條線(正確做法 table bgcolor=“black” cellspacing=“1px” 然后tr bgcolor=“white”)
以上講解內(nèi)容都作為了解,以后這些都是使用css來設(shè)置
-在表格標(biāo)題中提供了一個(gè)標(biāo)簽專門用來設(shè)置表格的標(biāo)題,這個(gè)標(biāo)簽叫做caption標(biāo)簽
caption標(biāo)簽的注意點(diǎn):
caption標(biāo)簽一定要寫在table標(biāo)簽中,否則無效
caption標(biāo)簽一定要緊跟在table標(biāo)簽后面
-在表格標(biāo)簽中提供了一個(gè)標(biāo)簽專門用來存儲(chǔ)每一列的標(biāo)題
只要將內(nèi)容設(shè)置為標(biāo)題單元格,那么會(huì)自動(dòng)將內(nèi)容設(shè)置為居中+加粗
表格的結(jié)構(gòu)
由于表格中存儲(chǔ)的數(shù)據(jù)比較復(fù)雜,為了方便管理和閱讀以及提升語義,我們可以對(duì)表格中存儲(chǔ)的數(shù)據(jù)進(jìn)行分類
1.表格的標(biāo)題
2.表格的表頭信息
3.表格的主體信息
4.表格的頁(yè)尾信息
caption作用:指定表格的標(biāo)題
thead:指定表格的表頭信息
tbody:指定表格的主體信息
tfoot:指定表格的附加信息
注意點(diǎn):
1.如果我們沒有編寫tbody,系統(tǒng)會(huì)給我們添加tbody
2.如果指定了表格的高度,不會(huì)改變tbody和tfoot的高度
單元格合并
colspan=“2”
水平方向上的單元格合并
-可以給td標(biāo)簽添加一個(gè)colspan屬性,來指定某一個(gè)單元格當(dāng)做多個(gè)單元格來看待
例如:
含義:把當(dāng)前單元格當(dāng)做兩個(gè)單元格來看待
注意點(diǎn):
1.由于把某個(gè)單元格當(dāng)做兩個(gè)單元格,所以會(huì)多出一個(gè)單元格,所以需要?jiǎng)h掉一個(gè)單元格
2.向右或者向下合并
垂直方向上的單元格合并
-可以給td標(biāo)簽設(shè)置一個(gè)rowspan屬性,來制定把某一個(gè)單元格當(dāng)做多個(gè)單元格來看待(垂直方向)
例如:
含義:把當(dāng)前單元格當(dāng)做兩個(gè)單元和看待
1.由于把某個(gè)單元格當(dāng)做兩個(gè)單元格,所以會(huì)多出一個(gè)單元格,所以需要?jiǎng)h掉下一行的一個(gè)單元格
2.向右或者向下合并
快速移動(dòng)選中的代碼
command + control + 方向鍵
快速折疊
command + -/+
commannd + shift + -/+
快速新啟一行
shift + enter
