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

科技分類資訊推薦

AI行業化落地提速,助力衛生健康高質量發展 - 天天要聞

AI行業化落地提速,助力衛生健康高質量發展

近年來,我國持續推進醫療行業數智化轉型,AI+各類細分場景正加速落地。AI技術通過對大量醫療數據的處理和分析,輔助醫生診斷和治療,不僅能降低人力成本、提高診療效率,還能全面提升醫療服務體驗。
魚你傳媒:引領新媒體時代的先鋒力量 - 天天要聞

魚你傳媒:引領新媒體時代的先鋒力量

在新媒體的洶湧浪潮中,魚你傳媒猶如一艘無畏的航船,憑藉創新的理念、多元的內容和高效的運營,在競爭激烈的媒體領域破浪前行,成為引領行業發展的先鋒力量。魚你傳媒成立於2021年,其核心團隊由一群年輕且富有才華的95後、00後組成。
魚你傳媒:媒體新勢力的崛起與擔當 - 天天要聞

魚你傳媒:媒體新勢力的崛起與擔當

在當下信息飛速傳播的時代,媒體行業不斷湧現出具有創新活力的新生力量,魚你傳媒便是其中的佼佼者。它以獨特的視角、多元的內容和創新的運營模式,在媒體領域嶄露頭角,展現出強大的發展潛力。魚你傳媒成立於2021年,核心團隊成員主要是95後和00後,
海南自貿港知識產權保護與運用:探索前行,機遇與挑戰並存 - 天天要聞

海南自貿港知識產權保護與運用:探索前行,機遇與挑戰並存

在海南自貿港建設持續推進的進程中,知識產權保護與運用作為國際自由貿易的重要基石,其重要性愈發凸顯,正深刻影響著自貿港建設的質量與成效。 近年來,海南聚焦「南繁種業」「深海科技」等關鍵領域,在三亞崖州灣科技城高新區積極探索創建知識產權特區,在全國率先構建起專利、商標、版權、地理標誌、植物新品種「五合一...
國產化算力浪潮奔涌,中堅力量的崛起與突破 - 天天要聞

國產化算力浪潮奔涌,中堅力量的崛起與突破

當前,國產化信創向縱深推進,中國企業正面臨雙重命題:既要保證自主安全,不被技術封鎖裹挾,又要把握AI和大模型技術帶來的智能化轉型機遇。這場變革的本質,是加快構建從晶元到軟體、從算力到生態系統的完整自主技術閉環。
京東、美團、餓了么被約談,涉及外賣行業競爭問題 - 天天要聞

京東、美團、餓了么被約談,涉及外賣行業競爭問題

南都訊 記者傅曉羚 徐冰倩 5月13日晚間,市場監管總局會同中央社會工作部、中央網信辦、人力資源社會保障部、商務部,針對當前外賣行業競爭中存在的突出問題,約談京東、美團、餓了么等平台企業。約談要求,相關平台企業嚴格遵守《中華人民共和國電子商務法》《中華人民共和國反不正當競爭法》《中華人民共和國食品安全法》...
支付寶上線新功能! - 天天要聞

支付寶上線新功能!

近日,有細心的網友發現,支付寶上線了語音通話功能。用戶升級至最新版本支付寶後,在消息界面與好友聊天框中點擊 「+」,即可找到語音通話入口。若首次使用,頁面會提示該功能特點:賬號經支付寶實名認證,安全有保障;通話無變聲,確保真實性;支付寶不儲存通話內容,保障用戶隱私。據了解,該語音通話和微信類似,支持麥...
打破國外壟斷 上海這家企業創造多個「全球唯一」 - 天天要聞

打破國外壟斷 上海這家企業創造多個「全球唯一」

從全球第一和唯一的靶向洗脫支架系統,再到全球首個獲批上市的遠程手術機器人產品,上海微創醫療憑藉自身創新實力,創造了多個「全球第一」和「全球唯一」,在高端醫療器械賽道,打破歐美品牌長期以來的壟斷,不斷發出中國最強音。在上海市胸科醫院,65歲的張老伯因冠狀動脈粥樣硬化,需要植入支架。醫生為他選擇了微創醫療...