1.列表標(biāo)簽
(1)作用:給一堆數(shù)據(jù)添加列表語(yǔ)義
(2)分類(lèi):
-無(wú)序列表:
? ? ? ? ? ? ? ? ? -給一堆數(shù)據(jù)添加列表語(yǔ)義璧尸,數(shù)據(jù)沒(méi)有先后之分
? ? ? ? ? ? ? ? ? -格式:<ul>
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? <li>需要顯示的條目?jī)?nèi)容</li>
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? </ul>
? ? ? ? ? ? ? ? ? ?-應(yīng)用場(chǎng)景:新聞列表助赞、商品列表、導(dǎo)航條
? ? ? ? ? ? ? ? ? ?-練習(xí):一個(gè)ul標(biāo)簽中只能有l(wèi)i標(biāo)簽非春,但是li標(biāo)簽中可以添加其他標(biāo)簽柱徙,所以,可以嘗試在li標(biāo)簽中添加其他標(biāo)簽來(lái)仿寫(xiě)其他網(wǎng)站的
-有序列表:
? ? ? ? ? ? ? ? ? -使用比較少奇昙,給一堆數(shù)據(jù)添加列表語(yǔ)義护侮,數(shù)據(jù)有先后之分
? ? ? ? ? ? ? ? ? -格式:<ol>
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?<li>需要顯示的條目?jī)?nèi)容</li>
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? </ol>
? ? ? ? ? ? ? ? ? -定義列表:
? ? ? ? ? ? ? ? ? -格式:<dl>
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? <dt>列表標(biāo)題</dt>
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? <dd>標(biāo)題下的描述</dt>
? ? ? ? ? ? ? ? ? ? ? ? ? ? ?</dl>
? ? ? ? ? ? ? ? ? -應(yīng)用場(chǎng)景:網(wǎng)站尾部的相關(guān)信息、圖文混排
2.表格標(biāo)簽
(1)格式:<table>(整個(gè)表格)
? ? ? ? ? ? ? ? ? ? <tr>(表格的每行)
? ? ? ? ? ? ? ? ? ? <td></td>(每行中的一個(gè)單元格)
? ? ? ? ? ? ? ? ? ? </tr>
? ? ? ? ? ? ? ? ? ? </table>
(2)作用:給一堆數(shù)據(jù)添加表格語(yǔ)義
(3)表格標(biāo)簽中储耐,默認(rèn)邊框是看不到的羊初,如果需要顯示,就添加屬性border(<table border="邊框的粗細(xì)值">)
(4)其他屬性:
? ? ? ? ? ? ? ? ? ? ? ? ? ?-寬度(width)什湘、高度(height):
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 用于table標(biāo)簽和td標(biāo)簽
? ? ? ? ? ? ? ? ? ? ? ? ? ?-水平對(duì)齊(align)长赞、垂直對(duì)齊(valign):
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 水平對(duì)齊用于table標(biāo)簽、tr標(biāo)簽和td標(biāo)簽
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 垂直對(duì)齊用于tr標(biāo)簽和td標(biāo)簽
? ? ? ? ? ? ? ? ? ? ? ? ? ?-外邊距(單元格與單元格的距離cellspacing)闽撤、內(nèi)邊距(單元格與文字的距離cellpadding):
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 用于table標(biāo)簽
(5)單元格合并:colspan(水平方向合并得哆,合并后需要?jiǎng)h除一個(gè)單元格)、rowspan(垂直方向合并)
(6)表格標(biāo)簽在過(guò)去用的非常多哟旗,但如今用css就可以實(shí)現(xiàn)了