一.有序列表 (ordered list)
- 格式：
<ol>
<li>有序列表</li>
<li>有序列表</li>
<li>有序列表</li>
</ol>
-
語義及運用：
給一堆數(shù)據(jù)添加列表語義沐绒，數(shù)據(jù)有先后之分吞获。常運用于歌單账忘，排行榜等需要列出先后順序的列表晃洒。 -
注意點：
1.<ol><li>標(biāo)簽是一個組合垒玲，一般情況下一起使用损谦。
2.<ol>標(biāo)簽中一般只有<li>標(biāo)簽岳颇，不可能有其它標(biāo)簽。
3.若在開發(fā)中列表包含的信息很多需要添加其它語義觅捆，則可在<li>標(biāo)簽中嵌套其它標(biāo)簽赦役。
二.無序列表 (unordered list)
- 格式：
<ul>
<li>無序列表</li>
<li>無序列表</li>
<li>無序列表</li>
</ul>
-
語義及運用：
給一堆數(shù)據(jù)添加列表語義，數(shù)據(jù)無先后之分栅炒。此種列表運用的最多掂摔。常運用于新聞條，商品列表等無需列出先后順序的列表赢赊。 -
注意點：
1.<ul><li>標(biāo)簽是一個組合乙漓，一般情況下一起使用。
2.<ul>標(biāo)簽中一般只有<li>標(biāo)簽释移，不可能有其它標(biāo)簽叭披。
3.若在開發(fā)中列表包含的信息很多需要添加其它語義，則可在<li>標(biāo)簽中嵌套其它標(biāo)簽玩讳。
三.定義列表 (definition list)
- 格式：
<dl>
<dt>列表頭</dt>
<dd>列表類容</dd>
<dt>列表頭</dt>
<dd>列表內(nèi)容</dd>
</dl>
-
語義及運用：
定義列表用dt定義標(biāo)題涩蜘，dd定義標(biāo)題的描述。常運用于網(wǎng)站尾部相關(guān)信息熏纯，圖文混排等同诫。 -
注意點：
1.<dl><dt><dd>標(biāo)簽是一個組合，一般情況下一起使用樟澜。
2.<dt>標(biāo)簽中一般只對應(yīng)一個<dd>標(biāo)簽误窖，雖然它可以對應(yīng)多個<dd>標(biāo)簽。
3.若在開發(fā)中列表包含的信息很多需要添加其它語義秩贰，則可在<dt><dd>標(biāo)簽中嵌套其它標(biāo)簽霹俺。
四.列表的嵌套
-
列表內(nèi)嵌套其它標(biāo)簽
有時列表內(nèi)包含的信息需要添加其它標(biāo)簽
格式：
<ul>
<li>
<h2>這是一個標(biāo)題</h2>
<p>這是一個段落</p>
</li>
<li>
<h2>這是一個標(biāo)題</h2>
<p>這是一個段落</p>
</li>
</ul>
-
列表內(nèi)部嵌套列表
列表內(nèi)部可以嵌套子列表
格式：
<ul>
<li>
<ul>
<li>這是子列表1</li>
<li>這是子列表1</li>
</ul>
</li>
<li>
<ul>
<li>這是子列表2</li>
<li>這是子列表2</li>
</ul>
</li>
</ul>
-
各種類型列表相互嵌套
各種列表可以按需求搭配嵌套
格式：
<ul>
<li>無序列表</li>
<li>
<ol>
<li>有序列表</li>
<li>
<dl>
<dt>定義列表頭</dt>
<dd>定義列表內(nèi)容</dd>
<dd>定義列表內(nèi)容</dd>
</dl>
</li>
</ol>
</li>
</ul>
-
注意點：
1.一般無序列表使用的最多，有序列表使用的最少毒费。
2.若要去除列表前面的小圓點或數(shù)字可以使用CSS樣式去除丙唧。
格式：
<style> ol, ul { list-style: none; }</style>
五.< table>表格標(biāo)簽及其屬性
- 格式：
<table border="1px">
<tr>
<th>這是單元格1-1</td>
<th>這是單元格1-2</td>
</tr>
<tr>
<td>這是單元格2-1</td>
<td>這是單元格2-2</td>
</tr>
<tr>
<td>這是單元格3-1</td>
<td>這是單元格3-2</td>
</tr>
</table>
-
作用：
用來給一堆表格標(biāo)簽添加語義。表格是數(shù)據(jù)展現(xiàn)的一種形式觅玻，當(dāng)數(shù)據(jù)非常大的時候艇棕，使用表格額可以清晰的展現(xiàn)。 - < table>表格標(biāo)簽常用屬性：
| < table>屬性 | 作用 |
|---|---|
| border | 邊框 |
| cellpadding | td的內(nèi)邊距 |
| cellspacing | td的外邊距 |
| width | table寬度 |
| < td>屬性 | 作用 |
|---|---|
| align | 水平對齊方式 |
| valign | 垂直對齊方式 |
| width | 寬度串塑，默認(rèn)自動分布 |
-
注意點：
1.< table><tr><td>是一個組合，<tr>元素定義表格行北苟，<th>元素定義表頭桩匪，<td>元素定義表格單元。簡單的 HTML 表格由< table>元素以及一個或多個<tr>友鼻、<th>或<td>元素組成傻昙。更復(fù)雜的 HTML 表格也可能包括 caption闺骚、col、colgroup妆档、thead僻爽、tfoot 以及 tbody 元素。
2.表格中的border屬性決定邊框的寬度贾惦，平常默認(rèn)寬度為0胸梆，也就是看不見表格。
3.width/height屬性決定表格的寬度和高度须板。平常默認(rèn)寬高是根據(jù)內(nèi)容的寬高來展現(xiàn)的碰镜。若只設(shè)置<td>的寬高則只改變當(dāng)前單元格的寬高，表格整體寬高不受影響习瑰。
4.在<tr><td>中都設(shè)置了align屬性的話绪颖，系統(tǒng)優(yōu)先采用<td>。
5.表格中的內(nèi)容一般默認(rèn)為垂直居中的甜奄，所以只需設(shè)置水平居中便可柠横，一般使用CSS樣式來進(jìn)行此項操作，不推薦使用align屬性课兄。CSS格式：text-align:centertext-align:center.
6.若想合并全部單元格牍氛，清除單元格的外邊距〉谠可使用樣式border-collapse: collapse;糜俗。
六.< table>表格的其他標(biāo)簽
為表格設(shè)置標(biāo)題：使用<capition>標(biāo)簽
設(shè)置單元格標(biāo)題：使用<th>標(biāo)簽替換<td>標(biāo)簽
- 格式：
<table border="1">
<caption>表格標(biāo)題</caption>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
</table>
-
作用
表格標(biāo)題會自動跟隨表格，會在表格中的最上面水平居中曲饱，而不是在頁面中水平居中悠抹。
單元格標(biāo)題會自動在單元格中居中，并且文字會加粗扩淀。 -
注意點：
<capition>標(biāo)簽必須寫在< table>標(biāo)簽里面楔敌，并且緊跟< table>標(biāo)簽。
七.表格單元格的合并
-
水平方向的單元格合并
方法：
在需要合并的單元格中加入colspan屬性驻谆，要合并幾個單元格屬性的取值就為幾卵凑。
格式：
<td colspan="3">
表示這個單元格在水平方向上相當(dāng)于三個單元格。
-
垂直方向的單元格合并
方法：
在需要合并的單元格中加入rowspan屬性胜臊，要合并幾個單元格屬性的取值就為幾勺卢。
格式：
<td rowspan="3">
表示這個單元格在垂直方向上相當(dāng)于三個單元格。
-
注意點：
1.單元格的合并只能是從左至右和由上到下象对。
2.合并單元格之后要刪掉多出來的單元格黑忱。例如colspan``rowspan的取值為3的話，就相當(dāng)于這個單元格在水平方向或垂直方向相當(dāng)于3個單元格。那么我們就要刪除這個單元格的右邊2個單元格或者下邊兩個單元格甫煞。
*** 此文章著作權(quán)由饑人谷_劉沖和饑人谷(QQ 群: 222459918) 所有菇曲。轉(zhuǎn)載須說明來源。***
