列表標(biāo)簽
- 無序列表
- 格式：
<ul>
<li>需要顯示條目?jī)?nèi)容</li>
</ul> - 作用：給一堆數(shù)據(jù)添加列表語義, 并且這一堆數(shù)據(jù)中所有的數(shù)據(jù)都沒有先后之分
- 應(yīng)用場(chǎng)景：
- 導(dǎo)航條
- 新聞列表
- 商品列表
- 注意：
- 一定要記住ul標(biāo)簽是用來給一堆數(shù)據(jù)添加列表語義的, 而不是用來給他們添加小圓點(diǎn)的
- ul標(biāo)簽和li標(biāo)簽是一個(gè)整體, 是一個(gè)組合. 所以一般情況下ul標(biāo)簽和li標(biāo)簽都是一起出現(xiàn), 不會(huì)單個(gè)出現(xiàn).
- 由于ul和li是一個(gè)整體, 所以u(píng)l里面不推薦包裹其它標(biāo)簽, 永遠(yuǎn)記住ul里面最好只寫li標(biāo)簽
- 雖然ul中推薦只能寫li標(biāo)簽, 但是li標(biāo)簽是一個(gè)容器標(biāo)簽, li標(biāo)簽中可以添加任意標(biāo)簽, 甚至可以添加ul標(biāo)簽
- 這里指的無序是指對(duì)于主體來說內(nèi)容沒有先后之分
- 有序列表
- 格式：
<ol>
<li>需要顯示條目?jī)?nèi)容</li>
</ol> - 作用：給一堆數(shù)據(jù)添加列表語義, 并且這一堆數(shù)據(jù)中所有的數(shù)據(jù)都有先后之分
- 應(yīng)用場(chǎng)景：
- 排行榜
- 用處極少了解為主
- 定義列表
- 格式：
<dl>
<dt></dt>
<dd></dd>
</dl> - 作用：先通過dt標(biāo)簽定義列表中的所有標(biāo)題, 然后再通過dd標(biāo)簽給每個(gè)標(biāo)題添加描述信息
- 應(yīng)用場(chǎng)景：
- 網(wǎng)站底部相關(guān)信息
- 圖文混排
- 注意：
- 和ul/ol一樣, dl和dt/dd是一個(gè)整體, 所以他們一般情況下不會(huì)單獨(dú)出現(xiàn), 都是一起出現(xiàn)
- 和ul/ol一樣, 由于dl和dt/dd是一個(gè)組合標(biāo)簽, 所以dl中建議只放dt和dd標(biāo)簽
- 一個(gè)dt可以沒有對(duì)應(yīng)的dd,也可以有多個(gè)對(duì)應(yīng)的dd, 但是無論有或者沒有dd都不推薦使用.
推薦使用一個(gè)dt對(duì)應(yīng)一個(gè)dd - 和li標(biāo)簽一樣, 當(dāng)需要豐富界面時(shí), 我們可以在dt和dd標(biāo)簽中繼續(xù)添加其它標(biāo)簽
表格標(biāo)簽
- 格式：
<table>
<tr></tr>
<td></td>
</table> - 作用：
- 以表格形式將數(shù)據(jù)顯示出來, 當(dāng)數(shù)據(jù)量非常大的時(shí)候, 表格這種展現(xiàn)形式被認(rèn)為是最為清晰的一種展現(xiàn)形式
- table代表整個(gè)表格, 也就是一堆table標(biāo)簽就是一個(gè)表格。
- tr標(biāo)簽代表整個(gè)表格中的一行數(shù)據(jù), 也就是說一對(duì)tr標(biāo)簽就是表格中的一行。
-
td標(biāo)簽代表表格中一行中的一個(gè)單元格, 也就是說一對(duì)td標(biāo)簽就是一行中的一個(gè)單元格。
表格標(biāo)簽.png
表格標(biāo)簽屬性
- border：默認(rèn)情況下表格的邊框?qū)挾葹?看不到, 通過border屬性給表格指定邊框?qū)挾?/li>
- width： 默認(rèn)情況下表格的寬度是由內(nèi)容自動(dòng)計(jì)算出來的, 可以通過width屬性指定表格的寬度
- height：默認(rèn)情況下表格的高度是由內(nèi)容自動(dòng)計(jì)算出來的, 可以通過height屬性指定表格的高度
- cellspacing：外邊距. 就是單元格和單元格之間的距離,默認(rèn)情況下單元格和單元格之間的外邊距的距離是2px
- cellpadding：內(nèi)邊距，就是單元格的邊框和文字之間的間隙, 默認(rèn)情況下內(nèi)邊距是1
- align：水平方向的對(duì)齊方式，它的取值有center、left、right
- 給table設(shè)置align屬性, 是讓表格在瀏覽器中居左/居右/居中
- 給tr設(shè)置align屬性, 是讓當(dāng)前行中所有內(nèi)容居左/居右/居中
- 給td設(shè)置align屬性,是讓當(dāng)前單元格中所有內(nèi)容居左/居右/居中
- 注意：如果td中設(shè)置了align屬性, tr中也設(shè)置了align屬性, 那么單元格中的內(nèi)容會(huì)按照td中設(shè)置的來對(duì)齊
- valign：可以控制當(dāng)前行中所有單元格中的內(nèi)容, 在垂直方向的對(duì)齊方式， 它的取值有center、left、right
- 給table設(shè)置valign屬性, 無效
- 給tr設(shè)置valign屬性, 是讓當(dāng)前行中所有內(nèi)容居上/居中/居下
- 給td設(shè)置valign屬性,是讓當(dāng)前單元格中所有內(nèi)容居上/居中/居下
- 注意：如果td中設(shè)置了valign屬性, tr中也設(shè)置了valign屬性, 那么單元格中的內(nèi)容會(huì)按照td中設(shè)置的來對(duì)齊
- bgcolor：規(guī)定表格的背景顏色
- 給table設(shè)置bgcolor屬性, 是給整個(gè)表格設(shè)置背景顏色
- 給tr設(shè)置bgcolor屬性, 是給當(dāng)前行設(shè)置背景顏色
- 給td設(shè)置bgcolor屬性, 是給當(dāng)前單元格設(shè)置背景顏色
- 細(xì)線表格的制作方式:
- 給table標(biāo)簽設(shè)置bgcolor=“black” 給table標(biāo)簽設(shè)置cellspacing = "1px"
- 給tr標(biāo)簽設(shè)置bgcolor=“white”
- 以上內(nèi)容僅僅作為了解, 因?yàn)闃邮揭院蠖际峭ㄟ^css來控制
表格中的其他標(biāo)簽
- caption：專門用來設(shè)置表格的標(biāo)題
- 作用:只要將標(biāo)題寫在caption標(biāo)簽中, 那么標(biāo)題就會(huì)自動(dòng)相對(duì)于表格的寬度居中
- 注意：
- caption一定要寫在table標(biāo)簽中, 否則無效
- caption一定要緊跟在table標(biāo)簽后面
- th：專門用來存儲(chǔ)每一列的標(biāo)題
- 作用：
- 只要將當(dāng)前列的標(biāo)題存儲(chǔ)在這個(gè)標(biāo)簽中就會(huì)自動(dòng)居中+加粗文字
- 到此為止我們就發(fā)現(xiàn), 其實(shí)表格中有兩種單元格, 一種是td, 一種是th. td是專門用來存儲(chǔ)數(shù)據(jù)的, th是專門用來存儲(chǔ)當(dāng)前列的標(biāo)題的
表格的結(jié)構(gòu)
- thead：表格的表頭信息
- tbody：表格的主體信息
- tfoot：表格的頁尾信息
<table>
<caption>表格的標(biāo)題</caption>
<thead>
<tr>
<th>每一列的標(biāo)題</th>
</tr>
</thead>
<tbody>
<tr>
<td>數(shù)據(jù)</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>數(shù)據(jù)</td>
</tr>
</tfoot>
</table>
單元格合并
- colspan：可以給td標(biāo)簽添加一個(gè)colspan屬性, 來指定把某一個(gè)單元格當(dāng)做多個(gè)單元格來看待(水平方向)
- 例如;<td colspan="2"></td>
- 含義：把當(dāng)單元格當(dāng)做兩個(gè)單元格來看待前，再刪除多余的單元格就不會(huì)發(fā)生變形。
- rowspan：可以給td標(biāo)簽設(shè)置一個(gè)rowspan屬性, 來指定把某一個(gè)單元格當(dāng)做多個(gè)單元格來看待(垂直方向)
- 例如：<td rowspan="2"></td>
- 含義: 把當(dāng)前單元格當(dāng)做兩個(gè)單元格來看待
- 注意：
- 由于把某一個(gè)單元格當(dāng)做了多個(gè)單元格來看到, 所以就會(huì)多出一些單元格, 所以需要?jiǎng)h掉一些單元格才能正常顯示
- 一定要記住單元格合并永遠(yuǎn)都是向后或者向下合并, 而不能向前或者向上合并
