一、列表

1.1 什么是列表標(biāo)簽？

作用：給一堆數(shù)據(jù)添加列表語(yǔ)義，也就是告訴搜索引擎告訴瀏覽器這一對(duì)數(shù)據(jù)是一個(gè)整體

無(wú)序列表---unordered-list(最多)：新聞列表、導(dǎo)航、商品列表

作用:給一堆數(shù)據(jù)添加列表語(yǔ)義里面所有數(shù)據(jù)沒(méi)有優(yōu)先之分只是列舉出來(lái)

可以列舉圖片文字視頻```

ul里面有屬性 type=“circle/square/disc” ?清除前面符號(hào) list-style：none；

可以在li中嵌套u(yù)l-li

有序列表---ordered-list(最少)

作用：給一堆添加語(yǔ)義，并且有先后之分```

``` ?type=“1/A/a/I” start=“數(shù)字‘//css做

自定義列表definition-list(其次):做網(wǎng)站底部信息

作用?:和無(wú)序列表語(yǔ)義，給添加語(yǔ)義 。先通過(guò)dt標(biāo)簽定義列表中的所有標(biāo)題，然后再通過(guò)dd標(biāo)簽給每個(gè)標(biāo)題添加描述信息```

```dt用來(lái)定義標(biāo)題

------無(wú)序列表注意點(diǎn)：

1)一定要記住ul標(biāo)簽是用來(lái)給一堆數(shù)據(jù)添加列表語(yǔ)義的而不是用來(lái)添加小圓點(diǎn)的

2)ul標(biāo)簽和li標(biāo)簽是一個(gè)整體，是一個(gè)組合所有一般情況下ul標(biāo)簽和li標(biāo)簽都是一起出現(xiàn)

3)ul里面不推薦包含其他標(biāo)簽

補(bǔ)充：br標(biāo)簽里面的屬性width規(guī)定寬度

注意：雖然通過(guò)標(biāo)簽屬性也能修改樣式，但是在企業(yè)開(kāi)發(fā)中千萬(wàn)不要這樣干前面我們說(shuō)過(guò)ul中最好只放li標(biāo)簽，但是在企業(yè)開(kāi)發(fā)中。li標(biāo)簽中內(nèi)容可能會(huì)很復(fù)雜，所以我們可以繼續(xù)在li標(biāo)簽中添加其他標(biāo)簽來(lái)豐富我們的界面。

總結(jié)：

1.一定要記住ul標(biāo)簽只放li標(biāo)簽

但是li中可以放其他標(biāo)簽

eg

• 標(biāo)題

  段落

• 標(biāo)題1

• 標(biāo)題2

-----有序列表 :

-----定義列表注意：1) dl/dt/dd是整體出現(xiàn)一起出現(xiàn) ，dl 只放dt/dd，

2)推薦使用一個(gè)dt對(duì)應(yīng)一個(gè)dd

3)為了豐富界面，我們可以在dt/dd中添加其他標(biāo)簽

大學(xué)

但是v哈巴河v不會(huì)吧

二、表格使用

其實(shí)表格標(biāo)簽中的table代表整個(gè)表格，也就是一堆table標(biāo)簽就是一個(gè)標(biāo)簽tr為行td為列 表格標(biāo)簽有一個(gè)標(biāo)簽屬性 這個(gè)屬性決定邊框?qū)挾饶J(rèn)為0所以看不到邊框

屬性注意點(diǎn):

1)寬度和高度屬性：可以給table和td標(biāo)簽使用

1.1 表格寬度和高度默認(rèn)是按照內(nèi)容尺寸來(lái)調(diào)整的也可以通過(guò)

給table標(biāo)簽設(shè)置width/height屬性的方式來(lái)手動(dòng)指定表表格和寬度

td是當(dāng)前單元格的寬度和高度不影響整個(gè)表格的寬度和高度

2)水平對(duì)齊和垂直對(duì)齊的屬性

其中水平對(duì)齊table/tr/td都可以-------垂直對(duì)齊只能給tr/td使用

給table設(shè)置align=right/left/center控制表格在水平方向的對(duì)齊方式

tr設(shè)置align，控制行中所有單元格的水平對(duì)齊方式

td設(shè)置align，控制當(dāng)前單元格中內(nèi)容在說(shuō)方向的對(duì)齊方式

注意：如果td中設(shè)置align屬性，tr中也設(shè)置align，所有單元格按td來(lái)

tr設(shè)置valign屬性，控制當(dāng)前行所有單元格中內(nèi)容垂直對(duì)齊

td當(dāng)前單元格垂直對(duì)齊

注意：同時(shí)給tr和td設(shè)置vailgn以td為準(zhǔn)

3)外邊距和內(nèi)邊距屬性

只能給table使用 外邊距就是單元格與單元格之間的距離。內(nèi)邊距是單元格的邊框和文字之間的間隙，我們稱之為內(nèi)邊距默認(rèn)為1

注意：企業(yè)用css修改樣式

表格標(biāo)題caption作用:標(biāo)題自動(dòng)相對(duì)于表格的寬度居中

標(biāo)題單元格標(biāo)簽

在表格標(biāo)簽中提供了一個(gè)標(biāo)簽專門(mén)用了存儲(chǔ)每一列的標(biāo)題，這個(gè)標(biāo)簽叫做th標(biāo)簽，只要將當(dāng)前列的標(biāo)題存儲(chǔ)在這個(gè)標(biāo)簽中就會(huì)自動(dòng)居中加粗

注意：1.必須寫(xiě)在table中且緊跟table中

細(xì)線表格 在表格標(biāo)簽中想通過(guò)指定外邊距為0來(lái)實(shí)現(xiàn)，其實(shí)它是將兩條線合并一條線，看上去不舒服

1)給table標(biāo)簽設(shè)置bgcolor=“color”；

2)給tr標(biāo)簽設(shè)置bgcolor；

3)給table標(biāo)簽設(shè)置cellspacing=“1px”；---表格于表格之間距離

由于表格中存儲(chǔ)的數(shù)據(jù)比較復(fù)雜，為了方便管理和提升語(yǔ)義，我們可以對(duì)表格中存儲(chǔ)的數(shù)據(jù)進(jìn)行分類

4類

1.表格標(biāo)題

2.表格的表頭信息

3.表格的主體信息

4.表格的頁(yè)尾信息

每一列標(biāo)題

//它是自定義比其他行的高度小

thead：指定表格的表頭信息

tbody：指定表格主體信息

tfoot：指定表格的附加信息

注意：1.如果我們沒(méi)有編寫(xiě)tbody，系統(tǒng)會(huì)給我們添加tbody

2.如果指定了thead、和tfoot。那么在修改整個(gè)表格的高度時(shí) thead和tfoot有自己默認(rèn)的高度，不會(huì)隨表格的高度變換而變換。

單元格合并

水平方向上的單元格合并

可以給td標(biāo)簽添加一個(gè)rowspan屬性，來(lái)制定把某一個(gè)單元格當(dāng)做多個(gè)單元格來(lái)看待

colspan=“數(shù)字”行合并 rowspan=”“；列合并在td中寫(xiě)合并后還要?jiǎng)h除后面的

//注釋掉

//注釋掉

//注釋掉

注意：合并合并的時(shí)他的后面或者下面

總結(jié)

以上是生活随笔為你收集整理的html5列表标签代码,HTML5列表标签和表格标签(示例代码)的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。