一、列表標簽
語義：標記一堆數據是一個整體/列表
html中列表標簽分為三種
1、無序列表（列表標簽中使用最多的一種，非常重要）：unordered list
#1、作用： 制作導航條、商品列表、新聞列表等 #2、組合使用ul>li <ul> <li>秒殺</li> <li>優惠券</li> <li>PLUS會員</li> <li>閃購</li> <li>拍賣</li> <li>京東服飾</li> <li>京東超市</li> <li>生鮮</li> <li>全球購</li> <li>京東金融</li> </ul> #3、ul標簽的屬性type（這屬於列表的樣式，所以了解即可） type：列表標識的類型 disc：實心圓(默認值) circle：空心圓 square：實心矩形 none：不顯示標識 可以通過css直接去掉小圓點 <style type="text/css"> ul { list-style: none; } </style> #4、注意 ul與li是組合標簽應該一起出現，並且ul的子標簽只應該是li，而li的子標簽則可以是任意其他標簽
2、有序列表（極少使用）
<h1>智商排名</h1> <ol> <li>Egon</li> <li>劉清正</li> <li>武佩奇</li> <li>alex</li> <li>元昊</li> </ol> <!--有序列表能干的事，完全可以用無序列表取代--> <h1>智商排名</h1> <ul style="list-style: none"> <li>1. xiwang</li> <li>2. dabao</li> <li>3. xiaoer</li> <li>4. wangxing</li> <li>5. ayca</li> </ul>
3、自定義列表（也會經常使用）
#1、作用分析 選擇用什么標簽的唯一標准，是看文本的實際語義，而不是看長什么樣子 無序列表：內容是並列的,沒有先后順序 有序列表：內容是有先后順序的 自定義列表：對一個題目進行解釋說明的時候，用自定義列表,可以做網站尾部相關信息，網易注冊界面的輸入框 #2、自定義列表也是一個組合標簽：dl>dt+dd dl:defination list，自定義列表 dt：defination title，自定義標題 dd：defination description，自定義描述 <dl> <dt>自定義標題1<dt> <dd>描述1<dd> <dd>描述2<dd> <dd>描述3<dd> <dt>自定義標題2<dt> <dd>描述1<dd> <dd>描述2<dd> <dd>描述3<dd> <dt>自定義標題3<dt> <dd>描述1<dd> <dd>描述2<dd> <dd>描述3<dd> </dl> #3、注意: 3.1 dl>dt+dd應該組合出現，dl中只應該存放dt和dd，而可以在dt和dd中添加任意其他標簽 3.2 一個dt可以可以沒有對應的dd，也可以有多個，但建議一個dt對應一個dd
用法舉例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> ul { list-style: none; } </style> </head> <body> <!--無序列表--> <ul> <li> <h2>標題欄</h2> </li> <li>1.秒殺</li> <li>2.優惠券</li> <li>3.PLUS會員</li> </ul> <!--無序列表--> <!--有序列表--> <ol> <li>秒殺</li> <li>優惠券</li> <li>PLUS會員</li> </ol> <!--有序列表--> <!--自定義列表--> <dl> <dt>智商排名</dt> <dd>1、egon</dd> <dd>2、lxx</dd> <dd>3、alex</dd> <dd>4、hxx</dd> <dt>顏值排名</dt> <dd>egon</dd> <dd>lxx</dd> <dd>hxx</dd> <dd>alex</dd> </dl> <!--自定義列表--> <!--練習題--> <dl> <dt>購物流程</dt> <dd>1111</dd> <dd>1111</dd> <dd>1111</dd> <dt>配送方式</dt> <dd>1111</dd> <dd>1111</dd> <dd>1111</dd> <dt>支付方式</dt> <dd>1111</dd> <dd>1111</dd> <dd>1111</dd> </dl> <hr> <h1>物品清單</h1> <ul> <li> <h2>蔬菜</h2> <ul> <li>黃瓜</li> <li>茄子</li> <li>蘿卜</li> </ul> </li> <li> <h2>水果</h2> <ul> <li>西紅柿</li> <li>香蕉</li> <li>蘋果</li> </ul> </li> </ul> </body> </html>
二、table標簽
語義：標記一段數據為表格
1、介紹
#1、作用 表格標簽是一種數據的展現形式，當數據量非常大的時候，使用表格的形式來展示被認為是最清晰的 #2、格式 <table> <tr> <td></td> </tr> </table> tr代表表格的一行數據 td表一行中的一個普通單元格 th表示表頭單元格 #3、注意點： 表格標簽有一個邊框屬性，這個屬性決定了邊框的寬度。默認情況下這個屬性的值為0，所以看不到邊框
2、表格屬性
#1、寬度和高度
可以給table和td設置width和height屬性
1.1 默認情況下表格的寬高是按照內容的尺寸來調整的，也可以通過給table標簽設置widht和height來手動指定表格的寬高
1.2 如果給td標簽設置width和height屬性，會修改當前單元格的寬度和高度，只要不超過table的寬高，則不會影響整個表格的寬度和高度
#2、水平對齊和垂直對齊
水平對齊align可以給table、tr、td標簽設置
垂直對齊valign只能給tr、td標簽設置
========水平對齊===========
取值
align=“left”
align=“center”
align=“right”
2.1 給table標簽設置水平對齊，可以讓表格在水平方向上對齊
強調：table只能設置水平方向
2.2 給tr設置水平對齊，可以控制當前行所有單元格內容都水平對齊
2.3 給td設置水平對齊，可以控制當前單元格內容水平對齊，tr與td沖突的情況下，以td為准
========垂直對齊===========
取值
valign=“top”
valign=“center”
valign=“bottom”
2.4 給tr設置垂直對齊可以讓當前行所有單元格內容都垂直對齊
2.5 給td設置垂直對齊可以讓當前單元格內容垂直對齊
#3、外邊距和內邊距
只能給table設置
3.1 外邊距：單元格與單元格之間的間隔，cellspacing="3px"，默認值為2px
3.2 內邊距：單元格邊框與文字之間的距離:cellpadding="200px"
3、三種細線表格
#1、方式一 在標簽中，想通過指定外邊距為0來實現細線表格是不靠譜的，其實他是將2條線合成了一條線.所以看上去很不舒服,如下實現 <table width="200px" height="200px" bgcolor="black" border="1" cellspacing="0px"> <tr bgcolor="white"> <td>姓名</td> <td>性別</td> <td>年齡</td> </tr> <tr bgcolor="white" > <td>Egon</td> <td>male</td> <td>18</td> </tr> <tr bgcolor="white"> <td>ALex</td> <td>male</td> <td>73</td> </tr> <tr bgcolor="white"> <td>Wxx</td> <td>female</td> <td>84</td> </tr> </table> #2、方式二 細線表格的制作方式： 1、給table標簽設置bgcolor 2、給tr標簽設置bgcolor 3、給table標簽設置cellspacing="1px" 注意： table、tr、td標簽都支持bgcolor屬性 <table width="200px" height="200px" bgcolor="black" cellspacing="1px"> <tr bgcolor="white"> <td>姓名</td> <td>性別</td> <td>年齡</td> </tr> <tr bgcolor="white" > <td>Egon</td> <td>male</td> <td>18</td> </tr> <tr bgcolor="white"> <td>ALex</td> <td>male</td> <td>73</td> </tr> <tr bgcolor="white"> <td>Wxx</td> <td>female</td> <td>84</td> </tr> </table> #3、方式三（style="border-collapse: collapse;border: 1px solid red"） <table border="1px" style="border-collapse: collapse;border: 1px solid red"> <tr> <td>姓名</td> <td>性別</td> <td>年齡</td> </tr> <tr> <td>egon</td> <td>male</td> <td>18</td> </tr> <tr> <td>alex</td> <td>female</td> <td>19</td> </tr> </table>
4、表格的結構
5、表的結構詳解
ps:
整張表格table只能水平對齊，默認左對齊
垂直方向都是默認中對齊
tr td可以水平左右對齊
為了方便管理維護以及提升語義，我們將表格中存儲的數據分為四類： #1、表格的標題:caption 特點:相對於表格寬度自動居中對齊 注意: 1.1 該標簽一定要寫在table標簽里，否則無效 1.2 caption一定要緊跟在table標簽內的第一個 #2、表格的表頭信息:thead 特點：專門用來存儲每一列的標題，只要將當前列的標題存儲在這個標簽中就會自動居中+加粗文字 #3、表格的主體信息:tbody 注意： 3.1 如果沒有添加tbody，瀏覽器會自動添加 3.2 如果指定了thread和tfoot，那么在修改整個表格的高度時，thead和tfoot有自己默認的高度，不會隨着 表格的高度變化而變化 #4、表尾信息:tfoot <html> <head> <meta charset="utf-8"/> </head> <body> <table bgcolor="black" border="1" width="300px" height="300px" cellspacing="1px"> <caption>學員信息統計</caption> <thead> <tr bgcolor="white"> <th>姓名</th> <th>性別</th> <th>年齡</th> </tr> </thead> <tbody> <tr bgcolor="white"> <td>egon</td> <td>male</td> <td>18</td> </tr> <tr bgcolor="white"> <td>egon</td> <td>male</td> <td>18</td> </tr> <tr bgcolor="white"> <td>egon</td> <td>male</td> <td>18</td> </tr> </tbody> <tfoot> <tr bgcolor="white"> <td>3</td> <td>3</td> <td>3</td> </tr> </tfoot> </table> </body> </html>
6、表格單元格合並
#1、水平向上的單元格colspan 可以給td標簽添加一個colspan屬性，來把水平方向的單元格當做多個單元格來看待 <td colspan="2"></td> #2、垂直向上的單元格rowspan 可以給td標簽設置一個rowspan屬性，來把垂直方向的的單元格當成多個去看待 #注意注意注意: 1、由於把某一個單元格當作了多個單元格來看待，所以就會多出一些單元格，所以需要刪掉一些單元格 2、一定要記住，單元格合並永遠是向后或者向下合並，而不能向前或向上合並
單元格合並舉例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <table border="1px" align="center" width="500px" height="500px" style="border-collapse: collapse;border: 1px solid green"> <caption>老爺們培訓學員信息統計</caption> <thead> <th>姓名</th> <th>年齡</th> <th>智商</th> </thead> <tbody> <tr> <td>艾莉克斯</td> <td>73</td> <td>70</td> </tr> <tr> <td>egon</td> <td>18</td> <td>70</td> </tr> <tr> <td>艾莉克斯</td> <td>73</td> <td>70</td> </tr> </tbody> <tfoot> <td>統計</td> <td>43.6</td> <td>90</td> </tfoot> </table> </body> </html>
7、傳統布局
傳統的布局方式就是使用table來做整體頁面的布局，布局的技巧歸納為如下幾點：
#1、定義表格寬高，將border、cellpadding、cellspacing全部設置為0
#2、單元格里面嵌套表格
#3、單元格中的元素和嵌套的表格用align和valign設置對齊方式
#4、通過屬性或者css樣式設置單元格中元素的樣式
傳統布局目前應用：
#1、快速制作用於演示的html頁面
#2、商業推廣EDM制作(廣告郵件)