HTML列表元素
阿新 • • 發佈：2020-07-21
<ol>有序列表
屬性：type（設定樣式），reversed （降序）
<ul>無序列表
<li>表示列表中的項
如圖1所示的是正序的有序列表，程式碼如下
<ol>
<li></li><!--表示列表中的項-->
<li></li><!--表示列表中的項-->
<li></li><!--表示列表中的項-->
</ol>
圖1
為實現降序，就需要使用reversed，效果如圖2所示。
<ol
圖2
type元素
將type設定為"a",則列表序號從‘a’開始向下，效果如圖3列表3所示
<ol type="a">
<li>a</li><!--表示列表中的項-->
<li>
圖3
將type設定為"I",則列表序號從‘I’開始向下（羅馬數字），效果如圖4列表4所示
<ol type="I">
<li>a</li><!--表示列表中的項-->
<li>a</li><!--表示列表中的項-->
<li>a</li><!--表示列表中的項
圖4
將type設定為"i",則列表序號從‘i’開始向下（羅馬數字），效果如圖5列表5所示
<ol type="i">
<li>a</li><!--表示列表中的項-->
<li>a</li><!--表示列表中的項-->
<li>a</li><!--表示列表中的項-->
</ol>
圖5
圖6
使用下述程式碼就可以實現如圖6的效果。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<ol>
<li>處理影象</li><!--表示列表中的項-->
<ol type="a">
<li>在頁面上插入圖片</li><!--表示列表中的項-->
<li>從圖片和檔案列印樣式中提取文字</li><!--表示列表中的項-->
<li>在筆記本頁面上插入螢幕剪輯</li><!--表示列表中的項-->
<li>裁剪圖片</li>
<li>在頁面上組合圖片</li>
</ol>
<li>處理表格</li><!--表示列表中的項-->
<ol type="a">
<li>設定表格格式</li>
<li>插入表格</li>
<ol type="i">
<li>插入一表格</li>
<li>TAB鍵，回車鍵建立表格</li>
</ol>
</ol>
<li>建立專案符號列表或者編號列表</li>
</ol>
<br><!--換行符-->
</body>
</html>
無序序列ul
<ul>
<li>a</li>
<li>a</li>
<li>a</li>
</ul>
圖7