HTML5列表標籤和表格標籤

1、列表

• 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>

2、表格使用

• 其實表格標籤中的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)