列表標簽

• 無序列表
• 格式：
  <ul>
  <li>需要顯示條目內容</li>
  </ul>
• 作用：給一堆數據添加列表語義, 并且這一堆數據中所有的數據都沒有先后之分
• 應用場景：
  • 導航條
  • 新聞列表
  • 商品列表
• 注意：
  • 一定要記住ul標簽是用來給一堆數據添加列表語義的, 而不是用來給他們添加小圓點的
  • ul標簽和li標簽是一個整體, 是一個組合. 所以一般情況下ul標簽和li標簽都是一起出現, 不會單個出現.
  • 由于ul和li是一個整體, 所以ul里面不推薦包裹其它標簽, 永遠記住ul里面最好只寫li標簽
  • 雖然ul中推薦只能寫li標簽, 但是li標簽是一個容器標簽, li標簽中可以添加任意標簽, 甚至可以添加ul標簽
  • 這里指的無序是指對于主體來說內容沒有先后之分
• 有序列表
• 格式：
  <ol>
  <li>需要顯示條目內容</li>
  </ol>
• 作用：給一堆數據添加列表語義, 并且這一堆數據中所有的數據都有先后之分
• 應用場景：
• 排行榜
• 用處極少了解為主
• 定義列表
• 格式：
  <dl>
  <dt></dt>
  <dd></dd>
  </dl>
• 作用：先通過dt標簽定義列表中的所有標題, 然后再通過dd標簽給每個標題添加描述信息
• 應用場景：
  • 網站底部相關信息
  • 圖文混排
• 注意：
  • 和ul/ol一樣, dl和dt/dd是一個整體, 所以他們一般情況下不會單獨出現, 都是一起出現
  • 和ul/ol一樣, 由于dl和dt/dd是一個組合標簽, 所以dl中建議只放dt和dd標簽
  • 一個dt可以沒有對應的dd,也可以有多個對應的dd, 但是無論有或者沒有dd都不推薦使用.
    推薦使用一個dt對應一個dd
  • 和li標簽一樣, 當需要豐富界面時, 我們可以在dt和dd標簽中繼續添加其它標簽

表格標簽

• 格式：
  <table>
  <tr></tr>
  <td></td>
  </table>
• 作用：
  • 以表格形式將數據顯示出來, 當數據量非常大的時候, 表格這種展現形式被認為是最為清晰的一種展現形式
  • table代表整個表格, 也就是一堆table標簽就是一個表格。
  • tr標簽代表整個表格中的一行數據, 也就是說一對tr標簽就是表格中的一行。

  • td標簽代表表格中一行中的一個單元格, 也就是說一對td標簽就是一行中的一個單元格。

    
    
    表格標簽.png

表格標簽屬性

• border：默認情況下表格的邊框寬度為0看不到, 通過border屬性給表格指定邊框寬度
• width： 默認情況下表格的寬度是由內容自動計算出來的, 可以通過width屬性指定表格的寬度
• height：默認情況下表格的高度是由內容自動計算出來的, 可以通過height屬性指定表格的高度
• cellspacing：外邊距. 就是單元格和單元格之間的距離,默認情況下單元格和單元格之間的外邊距的距離是2px
• cellpadding：內邊距，就是單元格的邊框和文字之間的間隙, 默認情況下內邊距是1
• align：水平方向的對齊方式，它的取值有center、left、right
• 給table設置align屬性, 是讓表格在瀏覽器中居左/居右/居中
• 給tr設置align屬性, 是讓當前行中所有內容居左/居右/居中
• 給td設置align屬性,是讓當前單元格中所有內容居左/居右/居中
• 注意：如果td中設置了align屬性, tr中也設置了align屬性, 那么單元格中的內容會按照td中設置的來對齊
• valign：可以控制當前行中所有單元格中的內容, 在垂直方向的對齊方式， 它的取值有center、left、right
• 給table設置valign屬性, 無效
• 給tr設置valign屬性, 是讓當前行中所有內容居上/居中/居下
• 給td設置valign屬性,是讓當前單元格中所有內容居上/居中/居下
• 注意：如果td中設置了valign屬性, tr中也設置了valign屬性, 那么單元格中的內容會按照td中設置的來對齊
• bgcolor：規定表格的背景顏色
• 給table設置bgcolor屬性, 是給整個表格設置背景顏色
• 給tr設置bgcolor屬性, 是給當前行設置背景顏色
• 給td設置bgcolor屬性, 是給當前單元格設置背景顏色
• 細線表格的制作方式:
  • 給table標簽設置bgcolor=“black” 給table標簽設置cellspacing = "1px"
  • 給tr標簽設置bgcolor=“white”
• 以上內容僅僅作為了解, 因為樣式以后都是通過css來控制

表格中的其他標簽

• caption：專門用來設置表格的標題
• 作用:只要將標題寫在caption標簽中, 那么標題就會自動相對于表格的寬度居中
• 注意：
  • caption一定要寫在table標簽中, 否則無效
  • caption一定要緊跟在table標簽后面
• th：專門用來存儲每一列的標題
• 作用：
  • 只要將當前列的標題存儲在這個標簽中就會自動居中+加粗文字
  • 到此為止我們就發現, 其實表格中有兩種單元格, 一種是td, 一種是th. td是專門用來存儲數據的, th是專門用來存儲當前列的標題的

表格的結構

• thead：表格的表頭信息
• tbody：表格的主體信息
• tfoot：表格的頁尾信息
  <table>
  <caption>表格的標題</caption>
  <thead>
  <tr>
  <th>每一列的標題</th>
  </tr>
  </thead>
  <tbody>
  <tr>
  <td>數據</td>
  </tr>
  </tbody>
  <tfoot>
  <tr>
  <td>數據</td>
  </tr>
  </tfoot>
  </table>

單元格合并

• colspan：可以給td標簽添加一個colspan屬性, 來指定把某一個單元格當做多個單元格來看待(水平方向)
• 例如;<td colspan="2"></td>
• 含義：把當單元格當做兩個單元格來看待前，再刪除多余的單元格就不會發生變形。
• rowspan：可以給td標簽設置一個rowspan屬性, 來指定把某一個單元格當做多個單元格來看待(垂直方向)
• 例如：<td rowspan="2"></td>
• 含義: 把當前單元格當做兩個單元格來看待
• 注意：
• 由于把某一個單元格當做了多個單元格來看到, 所以就會多出一些單元格, 所以需要刪掉一些單元格才能正常顯示
• 一定要記住單元格合并永遠都是向后或者向下合并, 而不能向前或者向上合并