零基礎教你學前端——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

科技分類資訊推薦

本屆西博會 全球首款空客A350碳纖維增強聚合物機翼結構件等首發首創產品將集中亮相 - 天天要聞

本屆西博會 全球首款空客A350碳纖維增強聚合物機翼結構件等首發首創產品將集中亮相

5月13日,四川省政府新聞辦在北京梅地亞中心二樓多功能廳舉行新聞發布會,介紹第二十屆中國西部國際博覽會有關情況。會上,四川國際博覽集團有限公司總經理劉嘉透露,本屆西博會的展覽展示和展會服務,堅持以新益求新、炘耀生輝、欣迎賓朋、歆動消費、心虔志誠五個維度為著力點,深度踐行“共辦、共享、共贏”的開放理念,...
TechWeb微晚報:蘋果擬將AI引入iPhone電池管理系統;消息稱日產擬全球裁員2萬人 - 天天要聞

TechWeb微晚報:蘋果擬將AI引入iPhone電池管理系統;消息稱日產擬全球裁員2萬人

要聞一覽:消息稱蘋果準備將AI引入iPhone電池管理系統Kimi升級後被指“不如之前有人味兒” 月之暗面回應網傳“豐田正考慮收購哪吒汽車”後者回應官方通報65款應用違法收集個人信息 T3出行等上榜美團將旗下外賣服務Keeta引入巴西消息稱日產汽車計劃全球裁員約2萬人6月底發布!華為Pura 80將採用全新影像模組小米Civi 5 Pro跑...
消息確認:浙江一知名公司,多名員工被帶走! - 天天要聞

消息確認:浙江一知名公司,多名員工被帶走!

近日,國內頭部短劇公司嘉興九州文化傳媒有限公司(以下簡稱:九州文化)多名員工因貪腐被採取刑事強制措施,此事引發輿論關注和熱議。9日,該公司向員工發布的一份通報在網上流傳。通報中稱,原九州文化海外事業部員工劉某龍、高某勝、陳某發等人在任職期間利用職務便利實施了嚴重的貪腐舞弊行為,嚴重侵害了企業利益,情...
2026 款本田 CR-V 官圖發布!新增 TrailSport 越野版 - 天天要聞

2026 款本田 CR-V 官圖發布!新增 TrailSport 越野版

汽車市場的風雲變幻中,每一款新車的亮相都備受矚目。近日,本田汽車正式發布了 2026 款 CR-V 的官圖,作為年度改款車型,新車在保留經典元素的基礎上,帶來了令人驚喜的變化,尤其是新增的 TrailSport 越野版,更是為 CR-V 家族注入了新的活力。
三星S25 Edge配備3900mAh電池 但可以做到一天一充 - 天天要聞

三星S25 Edge配備3900mAh電池 但可以做到一天一充

【CNMO科技消息】三星Galaxy S25 Edge終於正式發布,它也成為三星迄今為止最薄的直板手機,機身厚度僅為5.8毫米。很多人關心一個問題:為了實現如此纖薄的設計,三星是否犧牲了電池容量?充滿電後,它是否還能撐滿一整天的使用?
蘋果旗艦降價參加國補,但只有128GB版 - 天天要聞

蘋果旗艦降價參加國補,但只有128GB版

5月11日,京東平台顯示,iPhone 16 Pro的128GB版本首次參與國家補貼,國補後售價僅為5499元,而原價為7999元。此前,有消息傳出蘋果向渠道商下發了調價通知,蘋果iPhone 16 Pro Max所有版本降價160美元(約合人民幣1150元),而iPhone 16 Pro的128GB版本降價176美元(約合人民幣1266元),其他版本降價1
外交部:數字紅利不能成為數字霸權 智能革命不應擴大智能鴻溝 - 天天要聞

外交部:數字紅利不能成為數字霸權 智能革命不應擴大智能鴻溝

5月13日,外交部發言人林劍主持例行記者會。有記者提問,第二期人工智能能力建設研討班日前在北京開班。發言人能否介紹相關情況?林劍表示,5月12日,第二期人工智能能力建設研討班在北京開班,近40個國家和國際組織派員參加。此次研討班是落實《全球人工智能治理倡議》、“加強人工智能能力建設國際合作”聯大決議以及《人...