列表標籤
列表在各種頁面內容展示形式中, 使用頻率非常高。
HTML中列表分為以下三種:左邊我們稱之為有序列表,中間我們稱之為無序列表,右邊我們稱之為自定義列表。這節課我們先來學習有序列表。
看幾個例子, markdown 文件中的目錄, 購物購票指南, 儀器的使用操作步驟, 百度熱搜榜等都是通過列表顯示的。
我們發現 這些列表有一個共同特點 每一條內容的前面,都有數字序號。
在HTML中 把這些有順序的列表清單稱為有序列表 它們可以表達顯示順序操作步驟 排行等信息。
有序列表由兩個元素組成 元素 ol 和元素 li , 二者是父子關係。 li 標籤必須被包裹在 ol 中使用,ol 是由order list 的縮寫, 表示有序列表 li 是 list item 的縮寫 表示列表, 兩個都是雙標籤。
有序列表的語法是
這裡再次強調 為了遵循 W3C 的語法標準,ol 裡面只能嵌套 li 如果需要嵌套其他的標籤 需放置到 li 標籤裡面。
這裡在 li 標籤中放置一些文本。
來做一個案例:要把大象裝冰箱,總共分幾步?3步!
打開編輯器, 新建 order_list.html文件, 補全基本代碼, 在body 裡面使用 ctrl + 斜杠( / ) 實現一個注釋, 在注釋裡面添加, 這是有序列表的介紹。
本案例需要使用一個ol , 裡面包裹三個li, 分別把三個步驟的內容, 輸入到對應的 li 標籤裡面, 把冰箱門打開, 把大象裝進去, 把冰箱門帶上, 保存。
在瀏覽器中打開頁面, 清楚的看到, 三個步驟前面都自動的添加了序號 1 2 3
在這裡列表前面的序號被稱之為項目符號,默認有序列表的項目符號取值為自然數,從 1 開始。
需要注意 W3C標準為了兼顧多語種需求 規定了有序列表的項目符號是可以設置的 通過給 ol 標籤添加 type 屬性來定義 type屬性的值可以設置列表項目的符號 需要大家熟記的 type的取值有五種:分別是 A/a/I/i/1 大寫A 小寫a 大寫I 小寫 i 數字 1 各自表示 英文字母順序、 羅馬數字順序、 阿拉伯數字順序。
返回編輯器, 給 ol 標籤, 添加屬性type, 屬性值設置為大寫的字母A (A), 保存。
回到瀏覽器, 刷新, 原來數字顯示的項目符號, 變成了大寫 A 開頭的字母。
通過給 ol 添加另外一個屬性 start 就可以實現起始序號, start 取值為數字序號 不需要添加任何單位。
返回編輯器中 給 ol 再添加一個 start 屬性, 取值為6,保存。
回到瀏覽器 刷新 , 有序列表的項目符號從原來 A 開始 變成了從 F 開始。
文章配套視頻:
https://www.bilibili.com/video/BV1oU4y1278g?p=15