## HTML基礎-列表標簽/表格標簽
# 列表標簽(無序列表/有序列表/定義列表)
# 表格標簽
# 單元格合并
1.什么是列表標簽
列表標簽的作用:給一堆數據添加列表語義,也就是告訴搜索引擎高速瀏覽器這一堆數據是一個整體
2.HTML中列表標簽的分類
-無序列表(最多)(unordered list)
-有序列表(最少)(ordered list)
-定義列表(其次)(definition list)
無序列表的作用:
給一堆數據添加列表語義,并且這一堆數據中所有的數據沒有先后之分
無序列表格式:
需要顯示的條目內容
li是list item的縮寫
list是列表的意思
item是條目的意思
結合起來就是列表條目的意思
注意點:
-ul標簽是用來給一堆數據添加列表語義的,而不是給列表添加小圓點的
-ul標簽和li標簽是一個整體,是一個組合.所以一般情況下不會單獨出現
-由于ul標簽和li標簽是一個組合,所以ul標簽中不推薦出現其他標簽;但是li標簽中可以放其他標簽
無序標簽應用場景:
-新聞列表
-商品列表
-導航條
注意點:
雖然通過標簽屬性也能修改樣式,但是企業開發中不推薦這樣做
在webstrom中如何快速編寫一個ul的格式
ul>li*
或者
ul>li*數量
ul>li*2>h2+ul>li*3
定義列表的格式:
dt是英文definition title的縮寫,所以dt的含義就是用來定義列表
dd是標題definition description的縮寫,所以dd的含義就是來定義標題對應的描述的
先通過dt標簽定義列表中的所有標題,然后
定義列表的應用
-網站底部的相關信息
-圖文混排
定義列表的注意點:
-dl和ul/ol一樣,dl和dt/dd是一個整體,所以他們一般情況下不會單獨出現,都是一起出現
-和ul.ol一樣,由于dt/dd是一個組合標簽,所以dl中建議只放dt和dd標簽
-一個dt可以沒有對應的dd標簽,也可以有多個對應的dd標簽,但是一般推薦一個dt對應一個dd標簽
-和li標簽一樣,為了豐富內容,可以在dd/dt中添加其他標簽
定義列表練習(了解)
什么是表格標簽?
表格標簽作用:用來給一堆數據添加表格語義
表格標簽格式:
需要顯示的內容
需要顯示的內容
-表格標簽中的table表示整個表格,也就是一堆table標簽就是一個表格
-表格標簽中的tr標簽代表整個表格中的一行數據,也就是說一對tr標簽代表表格中的一行數據
-表格標簽中的td標簽代表表格中一行中的一個單元格,也就是說一對td標簽就是一行中的一個單元格
注意點:
-表格標簽有一個邊框屬性,這個屬性決定了邊框的寬度.
-默認情況下這個屬性的值是0,所以看不到邊框
-表格標簽和列表標簽一樣,table/tr/td一般是同時出現
td:table datacell
tr:table dataroll
表格標簽的屬性:
1.高度和寬度的屬性
-可以給table標簽和td標簽使用
1.1表格的寬度和高度是根據內容的尺寸來調整的,也可以通過設置width/height屬性手動指定
1.2如果給td標簽設置width/height屬性,會修改當前單元格的寬度高度,不會影響整個表格的寬度和高度
2.水平對齊和垂直對齊
-水平對其可以給table標簽和tr標簽和td標簽使用
-垂直對齊只能給tr標簽和td標簽使用
2.1給table標簽設置align屬性,可以控制表格在水平方向的對齊方式
2.2給tr標簽設置align屬性,可以控制當前行中所有單元格內容的水平方向的對齊方式
注意點:如果td中設置了align屬性,tr中也設置了align屬性,那么單元格中會按照td中的設置來對齊
2.3給tr標簽設置valign屬性,可以控制當前行中所有單元格在垂直方向的對齊方式
2.4給td標簽設置valign屬性,可以控制當前單元格在垂直方向的對齊方式
注意點:如果td中設置了valign屬性,tr中也設置了valign屬性,那么單元格中會按照td中的設置來對齊
3.外邊距和內邊距屬性
-只能給table標簽使用
默認情況下兩個單元格之間的外邊距cellspacing是2
默認情況下單元格內內邊距cellpadding為1
如何制作一個細線表格?
-在表格標簽中想通過指定外邊距為0來實現細線表格是不靠譜的,其實它是把兩條線合并成一條線(正確做法 table bgcolor=“black” cellspacing=“1px” 然后tr bgcolor=“white”)
以上講解內容都作為了解,以后這些都是使用css來設置
-在表格標題中提供了一個標簽專門用來設置表格的標題,這個標簽叫做caption標簽
caption標簽的注意點:
caption標簽一定要寫在table標簽中,否則無效
caption標簽一定要緊跟在table標簽后面
-在表格標簽中提供了一個標簽專門用來存儲每一列的標題
只要將內容設置為標題單元格,那么會自動將內容設置為居中+加粗
表格的結構
由于表格中存儲的數據比較復雜,為了方便管理和閱讀以及提升語義,我們可以對表格中存儲的數據進行分類
1.表格的標題
2.表格的表頭信息
3.表格的主體信息
4.表格的頁尾信息
caption作用:指定表格的標題
thead:指定表格的表頭信息
tbody:指定表格的主體信息
tfoot:指定表格的附加信息
注意點:
1.如果我們沒有編寫tbody,系統會給我們添加tbody
2.如果指定了表格的高度,不會改變tbody和tfoot的高度
單元格合并
colspan=“2”
水平方向上的單元格合并
-可以給td標簽添加一個colspan屬性,來指定某一個單元格當做多個單元格來看待
例如:
含義:把當前單元格當做兩個單元格來看待
注意點:
1.由于把某個單元格當做兩個單元格,所以會多出一個單元格,所以需要刪掉一個單元格
2.向右或者向下合并
垂直方向上的單元格合并
-可以給td標簽設置一個rowspan屬性,來制定把某一個單元格當做多個單元格來看待(垂直方向)
例如:
含義:把當前單元格當做兩個單元和看待
1.由于把某個單元格當做兩個單元格,所以會多出一個單元格,所以需要刪掉下一行的一個單元格
2.向右或者向下合并
快速移動選中的代碼
command + control + 方向鍵
快速折疊
command + -/+
commannd + shift + -/+
快速新啟一行
shift + enter
