HTML學習筆記【3】
阿新 • • 發佈：2021-06-17
前集回顧：《HTML學習筆記【1】》
前集回顧：《HTML學習筆記【2】》
3 HTML標籤
3.15 無語義的塊標籤&行內標籤
div【無語義的塊標籤】
span【無語義的行內標籤】
3.16 表格
<table border="" cellspacing="" cellpadding="">
<tr><th>Header</th></tr>
<tr><td>Data</td></tr>
</table>
- table 【表格標籤】：宣告表格
- border 【邊框粗細】：預設值是0，即未設定時看不見邊框；在不為0時，可以讓單元格也有邊框，但是這個值本身並不能改變單元格邊框的粗細（單元格只有0到1的變化）
- bordercolor 【邊框顏色】：包括最外框和內框
- align【對齊】：指的是表格整體在頁面中的位置
- width/height【表格寬/高】：在未設定寬高時，沒有內容的單元格會壓縮成一條線，但設定了寬高之後，就會保證最低有寬高值；
- cellpadding【內容邊距】：設定單元格內容與單元格邊框之間的距離，預設值是0（預設到左部邊的距離是0）
- cellspacing【單元格邊距】：單元格之間的間距，預設值是2，但最常用的值是0，單元格與邊框疊加，轉化成了日常生活中常用的表格
- caption【標題】：必須緊貼table標籤上方
- th 【表頭】：替換td【單元格】位置
- tr 【表格行】
- bgcolor【背景顏色】：區域性優先，預設繼承父級（table標籤）
- align【水平對齊方式】：left/center/right
- valign【垂直對齊方式】：top/middle/bottom
- td 【表格列】
- bgcolor【背景顏色】：區域性優先，預設繼承父級（tr標籤）
- width/height【單元格寬/高】
- 優先滿足此格設定的寬高，水平方向：其餘的格子平分剩餘的距離尺寸；豎直方向：隨此單元格設定的高度變化
- 如果在單個tr內的單元格設定總和超過了表格大小，則不會溢位表格；如果在兩個及以上的tr中設定的寬高，則自動擴充表格
- 行高預設看行內最高單元格的高度，但如果經過了設定，就隨設定的值
- align【水平對齊方式】：left/center/right
- valign【垂直對齊方式】：top/middle/bottom
- rowspan【合併行】
- colspan【合併列】
【例項】
<html>
<body>
<h4>橫跨兩列的單元格：</h4>
<table border="1">
<tr>
<th>姓名</th>
<th colspan="2">電話</th>
</tr>
<tr>
<td>Bill Gates</td>
<td>555 77 854</td>
<td>555 77 855</td>
</tr>
</table>
<h4>橫跨兩行的單元格：</h4>
<table border="1">
<tr>
<th>姓名</th>
<td>Bill Gates</td>
</tr>
<tr>
<th rowspan="2">電話</th>
<td>555 77 854</td>
</tr>
<tr>
<td>555 77 855</td>
</tr>
</table>
</body>
</html>
3.17 列表
3.17.1 無序列表
- 無序列表是一個專案的列表，此列專案預設使用粗體圓點disk（典型的小黑圓圈）進行標記。
- 除了disk之外，還有circle/square 空心圓/小方塊
- 然而最重要的是把前面的標記刪除，用type="none"
- 無序列表始於
<ul>標籤。每個列表項始於<li>。
【例項】
<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>
瀏覽器顯示如下：
- Coffee
- Milk
（列表項內部可以使用段落、換行符、圖片、連結以及其他列表等等。）
3.17.2 有序列表
- 同樣，有序列表也是一列專案，列表專案使用數字進行標記。
- 有序列表始於
- 標籤。每個列表項始於
- 標籤。
- 標記同樣可改：1,2,3.. or a,b,c.. or A,B,C..
- type="1"可以【改標記樣式】，這裡用1 2 3計數
- start【開始位置】：用2表示從2開始，字母按照數字順延，即要從c開始，start="3"
<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>
瀏覽器顯示如下：
1. Coffee
2. Milk
- 列表項內部可以使用段落、換行符、圖片、連結以及其他列表等等。
3.17.3 定義列表
- 自定義列表不僅僅是一列專案，而是專案及其註釋的組合。
- 自定義列表以
<dl>標籤開始。每個自定義列表項以<dt>開始。每個自定義列表項的定義以<dd>開始。
<dl>
<dt>Coffee</dt>
<dd>Black hot drink</dd>
<dt>Milk</dt>
<dd>White cold drink</dd>
</dl>
瀏覽器顯示如下：
Coffee
Black hot drink
Milk
White cold drink
- 定義列表的列表項內部可以使用段落、換行符、圖片、連結以及其他列表等等。