HTML5列表標簽和表格標簽

一、列表

• 1.1 什么是列表標簽？
  作用：給一堆數據添加列表語義，也就是告訴搜索引擎告訴瀏覽器這一對數據是一個整體

無序列表---unordered-list（最多）：新聞列表、導航、商品列表 作用:給一堆數據添加列表語義里面所有數據沒有優先之分只是列舉出來 可以列舉圖片文字視頻	```<ul><li></li></ul>``` ul里面有屬性 type=“circle/square/disc”  清除前面符號 list-style：none； 可以在li中嵌套ul-li
有序列表---ordered-list（最少） 作用：給一堆添加語義，並且有先后之分	```<ol><li></li></ol>```  type=“1/A/a/I” start=“數字‘//css做
自定義列表definition-list（其次）:做網站底部信息 作用  :和無序列表語義，給添加語義 。先通過dt標簽定義列表中的所有標題，然后再通過dd標簽給每個標題添加描述信息	```<dl><dt><dt><dd></dd></dl>```dt用來定義標題

------無序列表注意點：
1）一定要記住ul標簽是用來給一堆數據添加列表語義的而不是用來添加小圓點的
2）ul標簽和li標簽是一個整體，是一個組合所有一般情況下ul標簽和li標簽都是一起出現
3）ul里面不推薦包含其他標簽
補充：br標簽里面的屬性width規定寬度
注意：雖然通過標簽屬性也能修改樣式，但是在企業開發中千萬不要這樣干前面我們說過ul中最好只放li標簽，但是在企業開發中。li標簽中內容可能會很復雜，所以我們可以繼續在li標簽中添加其他標簽來豐富我們的界面。

• 總結：
  1.一定要記住ul標簽只放li標簽
  1. 但是li中可以放其他標簽
     eg

<ul>
<li>
         <h2>標題</h2>
           <p>段落</p>
</li>
<li>
         <h2>標題1</h2>
           <p></p>
</li>
<li>
         <h2>標題2</h2>
           <p></p>
</li>
</ul>

-----有序列表 :
-----定義列表注意：1） dl/dt/dd是整體出現一起出現 ，dl 只放dt/dd，
2）推薦使用一個dt對應一個dd
3）為了豐富界面，我們可以在dt/dd中添加其他標簽

<dl>
    <dt>
<img  src=''nj.jpg width="150px" height="150px">
</dt>
<dd>
<h2>大學</h2>
<p>但是v哈巴河v不會吧</p>
</dd>
</dl>

二、表格使用

• 其實表格標簽中的table代表整個表格，也就是一堆table標簽就是一個標簽tr為行td為列 表格標簽有一個標簽屬性 這個屬性決定邊框寬度默認為0所以看不到邊框

屬性注意點:

1)寬度和高度屬性：可以給table和td標簽使用
1.1 表格寬度和高度默認是按照內容尺寸來調整的也可以通過

• 給table標簽設置width/height屬性的方式來手動指定表表格和寬度
• td是當前單元格的寬度和高度不影響整個表格的寬度和高度
  2）水平對齊和垂直對齊的屬性
  其中水平對齊table/tr/td都可以-------垂直對齊只能給tr/td使用
• 給table設置align=right/left/center控制表格在水平方向的對齊方式
• tr設置align，控制行中所有單元格的水平對齊方式
• td設置align，控制當前單元格中內容在說方向的對齊方式
  注意：如果td中設置align屬性，tr中也設置align，所有單元格按td來
• tr設置valign屬性，控制當前行所有單元格中內容垂直對齊
• td當前單元格垂直對齊
  注意：同時給tr和td設置vailgn以td為准
  3）外邊距和內邊距屬性
• 只能給table使用 外邊距就是單元格與單元格之間的距離。內邊距是單元格的邊框和文字之間的間隙，我們稱之為內邊距默認為1
  注意：企業用css修改樣式

表格標題caption作用:標題自動相對於表格的寬度居中

<table>
<caption>標題</caption>
</table>

標題單元格標簽

在表格標簽中提供了一個標簽專門用了存儲每一列的標題，這個標簽叫做th標簽，只要將當前列的標題存儲在這個標簽中就會自動居中加粗
注意：1.必須寫在table中且緊跟table中

細線表格 在表格標簽中想通過指定外邊距為0來實現，其實它是將兩條線合並一條線，看上去不舒服

1）給table標簽設置bgcolor=“color”；
2)給tr標簽設置bgcolor；
3）給table標簽設置cellspacing=“1px”；---表格於表格之間距離

由於表格中存儲的數據比較復雜，為了方便管理和提升語義，我們可以對表格中存儲的數據進行分類

• 4類
  1.表格標題
  2.表格的表頭信息
  3.表格的主體信息
  4.表格的頁尾信息

<table>
<caption>標題</caption>
<thead>
<tr>
        <th>每一列標題</th>
        <th></th>
</tr>
</thead>
<tbody>
<tr>
            <td></td>
            <td></td>
</tr>
<tfoot>
<tr>
            <td></td>
            <td></td>
</tr>
</tfoot>//它是自定義比其他行的高度小
</tbody>

• thead：指定表格的表頭信息
• tbody：指定表格主體信息
• tfoot：指定表格的附加信息
  注意：1.如果我們沒有編寫tbody，系統會給我們添加tbody
  2.如果指定了thead、和tfoot。那么在修改整個表格的高度時 thead和tfoot有自己默認的高度，不會隨表格的高度變換而變換。

單元格合並

• 水平方向上的單元格合並
  可以給td標簽添加一個rowspan屬性，來制定把某一個單元格當做多個單元格來看待
  colspan=“數字”行合並 rowspan=”“；列合並在td中寫合並后還要刪除后面的

<tr>
<td rowspan="2"></td>
<!--<td></td>-->//注釋掉
</tr>
<tr>
<td colspan="2"></td>
<!--<td></td>-->//注釋掉
</tr>
<tr>
<!--<td></td>-->//注釋掉
<td></td>
</tr>

注意：合並合並的時他的后面或者下面

<wiz_tmp_tag id="wiz-table-range-border" contenteditable="false" style="display: none;">

 

 

 

 

來自為知筆記(Wiz)