零基礎教你學前端——14、有序列表

2022年10月11日16:05:28 科技 1456

列表標籤

列表在各種頁面內容展示形式中, 使用頻率非常高。

HTML中列表分為以下三種:左邊我們稱之為有序列表,中間我們稱之為無序列表,右邊我們稱之為自定義列表。這節課我們先來學習有序列表。

零基礎教你學前端——14、有序列表 - 天天要聞

看幾個例子, markdown 文件中的目錄, 購物購票指南, 儀器的使用操作步驟, 百度熱搜榜等都是通過列表顯示的。

零基礎教你學前端——14、有序列表 - 天天要聞

我們發現 這些列表有一個共同特點 每一條內容的前面,都有數字序號。

在HTML中 把這些有順序的列表清單稱為有序列表 它們可以表達顯示順序操作步驟 排行等信息。

有序列表由兩個元素組成 元素 ol 和元素 li , 二者是父子關係。 li 標籤必須被包裹在 ol 中使用,ol 是由order list 的縮寫, 表示有序列表 li 是 list item 的縮寫 表示列表, 兩個都是雙標籤。

零基礎教你學前端——14、有序列表 - 天天要聞

有序列表的語法是


零基礎教你學前端——14、有序列表 - 天天要聞

這裡再次強調 為了遵循 W3C 的語法標準,ol 裡面只能嵌套 li 如果需要嵌套其他的標籤 需放置到 li 標籤裡面。

這裡在 li 標籤中放置一些文本。

來做一個案例:要把大象裝冰箱,總共分幾步?3步!


零基礎教你學前端——14、有序列表 - 天天要聞

打開編輯器, 新建 order_list.html文件, 補全基本代碼, 在body 裡面使用 ctrl + 斜杠( / ) 實現一個注釋, 在注釋裡面添加, 這是有序列表的介紹

本案例需要使用一個ol , 裡面包裹三個li, 分別把三個步驟的內容, 輸入到對應的 li 標籤裡面, 把冰箱門打開, 把大象裝進去, 把冰箱門帶上, 保存。

在瀏覽器中打開頁面, 清楚的看到, 三個步驟前面都自動的添加了序號 1 2 3

零基礎教你學前端——14、有序列表 - 天天要聞

零基礎教你學前端——14、有序列表 - 天天要聞

在這裡列表前面的序號被稱之為項目符號,默認有序列表的項目符號取值為自然數,從 1 開始。

需要注意 W3C標準為了兼顧多語種需求 規定了有序列表的項目符號是可以設置的 通過給 ol 標籤添加 type 屬性來定義 type屬性的值可以設置列表項目的符號 需要大家熟記的 type的取值有五種:分別是 A/a/I/i/1 大寫A 小寫a 大寫I 小寫 i 數字 1 各自表示 英文字母順序、 羅馬數字順序、 阿拉伯數字順序。


零基礎教你學前端——14、有序列表 - 天天要聞

返回編輯器, 給 ol 標籤, 添加屬性type, 屬性值設置為大寫的字母A (A), 保存。

回到瀏覽器, 刷新, 原來數字顯示的項目符號, 變成了大寫 A 開頭的字母。

零基礎教你學前端——14、有序列表 - 天天要聞

通過給 ol 添加另外一個屬性 start 就可以實現起始序號, start 取值為數字序號 不需要添加任何單位。

零基礎教你學前端——14、有序列表 - 天天要聞

返回編輯器中 給 ol 再添加一個 start 屬性, 取值為6,保存。

零基礎教你學前端——14、有序列表 - 天天要聞

回到瀏覽器 刷新 , 有序列表的項目符號從原來 A 開始 變成了從 F 開始。

零基礎教你學前端——14、有序列表 - 天天要聞

文章配套視頻:

https://www.bilibili.com/video/BV1oU4y1278g?p=15

科技分類資訊推薦

特斯拉官宣Model 3長續航全輪驅動版28.55萬起售 - 天天要聞

特斯拉官宣Model 3長續航全輪驅動版28.55萬起售

7月1日,特斯拉官方微博宣布Model 3長續航全輪驅動版車型升級,CLTC續航升至753公里,百公里加速升至3.8秒,售價28.55萬元起。特斯拉表示,7月31日(含)前下單,還可享8000元限時保險補貼、5年0息、8000元車漆選裝金等購車優惠政策。...
央視新聞報道:全國加能站充電樁配置率達45% - 天天要聞

央視新聞報道:全國加能站充電樁配置率達45%

報名 | 掃描上圖二維碼,鎖定超級沙龍重慶站席位 產品 | 掃描上方二維碼提交需求 可高效對接 本文來源 | 中國石油石化6月28日,2025能源產業生態論壇在北京召開。論壇上發布了《中國加油(能)站發展藍皮書2024-2025》,數據顯示,當前,傳統加油站正從單一能源供給,向綜合服務生態深度轉型。《藍皮書》顯示,截至2024年底...
韋東奕,民族的脊樑,崇尚他,國家民族更有前途和希望 - 天天要聞

韋東奕,民族的脊樑,崇尚他,國家民族更有前途和希望

最近,北大韋神韋東奕又「霸屏」了。這位北京大學助理教授、數學科學學院微分方程教研室研究員,因開通個人網路賬號,兩天漲粉兩千萬。這是什麼概念?一般頭部網路主播,即便有團隊共同打造賬號,要漲粉兩千萬,沒有幾年時間也難以達成。這說明什麼?
厲害!榮耀400系列三周激活量超70萬台 - 天天要聞

厲害!榮耀400系列三周激活量超70萬台

上周行業消息顯示榮耀400系列全球激活量已經突破100萬台,還引起了行業的熱議。大家都在講這一次榮耀400系列的銷量確實牛,市場認可度確實高。不過當時給出的是全球數據,並不知道國內與海外的佔比。
YU7銷量為何沒受前段時間小米負面的影響? - 天天要聞

YU7銷量為何沒受前段時間小米負面的影響?

為什麼前段時間小米負面不斷,但是現在SU7發布之後,一樣是賣爆了呢?其實我之前就說過了,這些負面不會影響到小米的銷量。互聯網是健忘的。之前那個小米手機發生高速車禍,很多人在說小米的自駕問題。但是實際上大家要明白,真正會去買小米這個汽車的人,他們的側重點是什麼?
華為發布新一代OceanStor Dorado 3000融合全快閃記憶體存儲:最高1600塊SSD、8PiB容量 - 天天要聞

華為發布新一代OceanStor Dorado 3000融合全快閃記憶體存儲:最高1600塊SSD、8PiB容量

快科技6月30日消息,華為今日正式發布新一代OceanStor Dorado 3000融合全快閃記憶體存儲。最大支持2 TB內存、1600塊SSD,提供高達8 PiB(‌1PiB=1024TB)可用容量,單系統最大可擴展到16個控制器。具有以下三大優勢:全新融合:華為新一代OceanStor Dorado 3000採用原生塊、文件、對象並行架構,一套存儲滿足多種業