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