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

科技分類資訊推薦

特斯拉中國宣布:漲價 - 天天要聞

特斯拉中國宣布:漲價

(文/觀察者網周盛明 編輯/高莘)2025年7月1日,特斯拉中國宣布,Model 3長續航全輪驅動版車型售價上漲1萬元,至28.55萬元。 特斯拉中國 在漲價的同時,該車型的續航和加速得到了提升——CLTC續航由713km提升至753km,百公里加速時間由4.4秒提升至3.8秒。值得注意的是,特斯拉Model 3的其他兩個版本售價不變。Model 3後輪驅.
儲能與鋰電領域動態頻出:巨頭競逐、項目簽約與跨界調整並行 - 天天要聞

儲能與鋰電領域動態頻出:巨頭競逐、項目簽約與跨界調整並行

【環球網財經綜合報道】近期,儲能與鋰電領域動態不斷。陽光電源(300274.SZ)與寧德時代(300750.SZ)圍繞第三代儲能電芯定義權展開激烈爭奪。6月,陽光電源發佈搭載684Ah電芯的新款儲能系統,電芯由欣旺達供應;寧德時代宣布587Ah電芯於4月投產。當前儲能行業處於二代向三代電芯過渡期,二代容量為314Ah,兩大陣營分化明...
亞馬遜CEO:生成式AI或致員工數量減少,但也將帶來新機遇 - 天天要聞

亞馬遜CEO:生成式AI或致員工數量減少,但也將帶來新機遇

【環球網財經綜合報道】亞馬遜CEO安迪·賈西周一表示,生成式人工智能的快速推出,意味着公司未來或需更少員工完成計算機可處理的工作,如同每次技術轉型,一些工作將因自動化而用人減少,但也會有新工作產生。東方IC儘管人工智能會消除部分職位需求,賈西稱亞馬遜仍會在人工智能、機械人等領域招聘更多員工。不過,本月早...
25萬起售的小米YU7,三分鐘大定20萬台,數據是真的嗎? - 天天要聞

25萬起售的小米YU7,三分鐘大定20萬台,數據是真的嗎?

相信這幾天小米YU7的火爆程度大家都看到了,這款車發佈後開啟預定,打開預定通道後不久,小米官方就公布了一個數據,3分鐘大定超20萬台。沒過多久,小米官方又公布了一個更炸裂的數據,小米YU7在1小時內,大定已突破289000萬台。
鄒暉出任格力集團董事長 - 天天要聞

鄒暉出任格力集團董事長

本文來源:時代財經 珠海格力集團官網更新信息顯示,鄒暉已正式出任該集團黨委書記、董事長。公開資料顯示,鄒暉於1982年生,本科學歷。鄒暉曾擔任珠海市人大常委會農村農業工作委員會副主任,後轉任珠海市國資委副主任。此次調整後,格力集團領導班子為:鄒暉擔任集團黨委書記、董事長,王軼任黨委副書記、董事、總裁,吳...
【產業互聯網周報】阿里合伙人名單最新變動:9人已退出;美團在AI投入超百億元;黃仁勛:機械人技術是芯片製造商繼AI之後的最大機遇 - 天天要聞

【產業互聯網周報】阿里合伙人名單最新變動:9人已退出;美團在AI投入超百億元;黃仁勛:機械人技術是芯片製造商繼AI之後的最大機遇

圖片系AI生成【產業互聯網周報是由鈦媒體TMTpost發佈的特色產品,將整合本周最重要的企業級服務、雲計算、大數據領域的前沿趨勢、重磅政策及行研報告。】國內資訊北京經信局:北京累計備案上線大模型132款,全國佔比35%在2025全球數字經濟大會新聞發佈會上,北京市經濟和信息化局黨組成員、副局長、新聞發言人劉維亮表示,...