第7章 列表和表格

7.1 有序列表 <ol type="A"><li>這里是第1個(gè)li</li><li>這里是第2個(gè)li</li><li>這里是第3個(gè)li</li></ol> ol屬性： type : 數(shù)字(1),大小寫(xiě)字母(A,a),大小寫(xiě)羅馬數(shù)字(I,i) start: "起始編號(hào)位序"表示列表項(xiàng)的開(kāi)始編號(hào)所處的位置序號(hào)，即li前面開(kāi)始的數(shù)值 --> ?<ol type="a" start="3"> ??? 7.2 無(wú)序列表 <ul type="square"><li>這里是第1個(gè)li</li><li>這里是第2個(gè)li</li><li>這里是第3個(gè)li</li></ul> ul屬性： type->實(shí)心圓(disc)->空心圓(circle)->實(shí)心矩形(square) 該屬性順序是li中繼續(xù)包含ul后的type默認(rèn)屬性,后面默認(rèn)為實(shí)心矩形 注意：無(wú)論是有序列表還是無(wú)序列表，ul和ol能接的標(biāo)簽只能是li，但li中可以添加任意標(biāo)簽 ? ? 7.3 定義列表 <dl><dt>html是什么</dt><dd>HyperText Markup Languagehtml<br/>是一種超文本標(biāo)記語(yǔ)言</dd></dl> dd標(biāo)簽相當(dāng)于其他列表中的li標(biāo)簽，可以在其中添加任意標(biāo)簽，不過(guò)建議只放dt和dd標(biāo)簽，一般情況下使用標(biāo)簽+樣式實(shí)現(xiàn)文本的解析，不使用多個(gè)dd或dt標(biāo)簽 定義列表的應(yīng)用場(chǎng)景 1.做網(wǎng)站尾部的相關(guān)信息 2.做圖文混排 ??? 7.4 嵌套列表 <ul> -->無(wú)序列表<li><ol> -->有序列表<li>...</li> -->無(wú)序列表中嵌套了一個(gè)有序列表</ol></li></ul> ????7.5?表格? <table border="邊框?qū)挾?#34; bordercolor="邊框顏色" title="表格的提示信息，當(dāng)鼠標(biāo)移到表格上方時(shí)，所提示的信息"> 屬性： 寬width 高h(yuǎn)eight 對(duì)齊方式align 背景顏色bgcolor 背景圖片background 邊距cellpadding 間距cellspacing 摘要summary 邊框顯示：frame和rules ? ??對(duì)齊屬性: align : 水平方向?qū)R,值為left,center,right. ?適用于table,tr,td valign: 垂直方向?qū)R。值為top,middle,bottom. 適用于tr,td cellspacing : ?單元格之間的空白(默認(rèn)2px) ? ? 適用于table cellpadding : ?內(nèi)容與單元格的空白 ? ? ? ? ? ?適用于table bgcolor、background 兩個(gè)屬性也適用與表格。(table,tr,td) 在表格里面給寬度并不能真正的限制死表格的寬度，如果內(nèi)容超出表格的實(shí)質(zhì)寬高，依然會(huì)將表格的單元格甚至整個(gè)表格撐開(kāi) ??table的三個(gè)基本組成部分：行，列，單元格 ??表格標(biāo)題標(biāo)記:<caption align="水平對(duì)齊方式(左中右)" valign="垂直對(duì)齊(上下)"></caption> ??表格可以分成表頭、主體和表尾三部分，在HTML語(yǔ)言中分別用thead、tbody、tfoot表示 ★這里有三個(gè)注意點(diǎn)： （1）thead和tfoot在一張表中都只能有一個(gè)，而tbody可以有多個(gè)。 （2）tfoot必須出現(xiàn)在tbody前面，這樣瀏覽器在接收主體數(shù)據(jù)之前，就能渲染表尾，有利于加快表格的顯示速度。這一點(diǎn)對(duì)大型表格尤其重要。 （3）thead、tbody和tfoot里面都必須使用tr標(biāo)簽。 ??CSS中的table-layout語(yǔ)句?? ?table { table-layout: fixed/auto/inherit } auto表示單元格的大小由內(nèi)容決定。fixed表示單元格的大小是固定的，由第一個(gè)指定大小的單元格決定；如果所有單元格都沒(méi)有指定大小，則由第一個(gè)單元 格的默認(rèn)大小決定；如果單元格中的內(nèi)容超出單元格的大小，則用CSS中的overflow命令控制。微軟公司聲稱(chēng)使用這個(gè)命令，表格的顯示速度可以加快100倍。 inherit:從父元素繼承table-layout屬性的值，任何版本的IE都不支持。 ? tr ? ? ? 定義表格的行 ?th ? ? ? 定義標(biāo)題單元格 ?td ?定義表格的列,為一般單元格 ? colspan ?合并列單元格 ?rowspan ?合并行單元格
其他屬性還有 summary 屬性規(guī)定表格內(nèi)容的摘要。summary 屬性不會(huì)對(duì)普通瀏覽器中產(chǎn)生任何視覺(jué)變化。屏幕閱讀器可以利用該屬性。 ?frame和rules屬性，可以控制邊框的顯示。frame屬性控制著表格最外圍的四條邊框的可見(jiàn)性，而 rules 則控制著表格內(nèi)部邊框的可見(jiàn)性。 ??frame屬性可取的值及含義如下： ● void - 默認(rèn)值，表示不顯示表格最外圍的邊框 ● above - 顯示上部的外側(cè)邊框 ? ? ? ? ● below - 顯示下部的外側(cè)邊框 ● lhs - 顯示左邊的外側(cè)邊框 ? ? ? ? ? ● rhs - 顯示右邊的外側(cè)邊框 ● hsides - 顯示上部和下部的外側(cè)邊框 ?● vsides - 顯示左邊和右邊的外側(cè)邊框 ● box - 在所有四個(gè)邊上顯示外側(cè)邊框 ? ● border - 在所有四個(gè)邊上顯示外側(cè)邊框 ??rules 屬性可取的值有五個(gè)，分別是： ● none - 默認(rèn)值，無(wú)邊框 ● rows - 為行加邊框 ? ? ? ? ? ? ? ? ?● cols - 為列加邊框 ● groups - 為行組或列組加邊框 ? ? ? ?● all - 為所有行列（單元格）加邊框 demo： 1 <table border="1" width="600" frame="hsides" rules="groups"> 2 <caption>My Ultimate Table</caption> 3 <colgroup span="1" width="200"></colgroup> 4 <!-- tbody可以用來(lái)對(duì)"行"進(jìn)行分組，而colgroup則用來(lái)對(duì)"列"進(jìn)行分組 --> 5 <colgroup span="3" width="400"></colgroup> 6 <!-- colgroup這里將后三列為一組，每組寬度為400像素 --> 7 <thead> <tr> <td>cell 1-1</td> <td>cell 1-2</td> <td>cell 1-3</td> <td>cell 1-4</td> </tr> </thead> 8 <tfoot> <tr> <td>cell 4-1</td> <td>cell 4-2</td> <td>cell 4-3</td> <td>cell 4-4</td> </tr> </tfoot> 9 <tbody> <tr> <td>cell 2-1</td> <td>cell 2-2</td> <td>cell 2-3</td> <td>cell 2-4</td> </tr> 10 <tr> <td>cell 3-1</td> <td>cell 3-2</td> <td>cell 3-3</td> <td>cell 3-4</td> </tr> </tbody> 11 </table>

? 在瀏覽器中的顯示效果如下圖：

?

轉(zhuǎn)載于:https://www.cnblogs.com/chenhaoqiang/p/6266791.html

總結(jié)

以上是生活随笔為你收集整理的列表和表格---学习笔记02的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

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