列表標簽的介紹與使用

列表的作用:

整齊、整潔、有序,它作為布局會更加自由和方便。

根據使用情景不同,列表可以分為三大類:無序列表、有序列表和自定義列表

無序列表

<ul> 標簽表示 HTML 頁面中項目的無序列表,一般會以項目符號呈現列表項,而列表項使用 <li> 標簽定義。
無序列表的基本語法格式如下:


<ul>
?<li>列表項1</li>
?<li>列表項2</li>
?<li>列表項3</li>
?...
</ul>


1. 無序列表的各個列表項之間沒有順序級別之分,是并列的。
2. <ul></ul> 中只能嵌套 <li></li>,直接在 <ul></ul> 標簽中輸入其他標簽或者文字的做法是不被允許的。
3. <li> 與 </li> 之間相當于一個容器,可以容納所有元素。
4. 無序列表會帶有自己的樣式屬性,但在實際使用時,我們會使用 CSS 來設置。

有序列表

有序列表即為有排列順序的列表,其各個列表項會按照一定的順序排列定義。
在 HTML 標簽中,<ol> 標簽用于定義有序列表,列表排序以數字來顯示,并且使用 <li> 標簽來定義列表項。
有序列表的基本語法格式如下:


<ol>
?<li>列表項1</li>
?<li>列表項2</li>
?<li>列表項3</li>
?...
</ol>


1. <ol></ol>中只能嵌套<li></li>,直接在<ol></ol>標簽中輸入其他標簽或者文字的做法是不被允許的。
2. <li> 與 </li>之間相當于一個容器,可以容納所有元素。
3. 有序列表會帶有自己樣式屬性,但在實際使用時,我們會使用 CSS 來設置

自定義列表

在 HTML 標簽中,<dl> 標簽用于定義描述列表(或定義列表),該標簽會與 <dt>(定義項目/名字)和
<dd>(描述每一個項目/名字)一起使用。
其基本語法如下:


<dl>
?<dt>名詞1</dt>
?<dd>名詞1解釋1</dd>
?<dd>名詞1解釋2</dd>
</dl>


1. <dl></dl> 里面只能包含 <dt> 和 <dd>。
2. <dt> 和 <dd>個數沒有限制,經常是一個<dt> 對應多個<dd>。
?

實戰

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><p>無序列表</p><ul><li>欽州</li><li>南寧</li><li>北海</li></ul><p>這里一個有序列表</p><ol><li>第一名</li><li>第二名</li><li>第三名</li></ol><p>這是自定義列表</p><dl><dt>聯系我們</dt><dd>微信</dd><dd>qq</dd><dd>新浪</dd></dl>
</body>
</html>

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/news/212469.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/212469.shtml
英文地址,請注明出處:http://en.pswp.cn/news/212469.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

深入了解linux下網卡防火墻selinux

深入了解linux下網卡防火墻selinux 在Linux系統中&#xff0c;網絡安全是非常重要的。為了保護系統免受惡意攻擊和未經授權的訪問&#xff0c;我們可以使用防火墻來限制網絡流量。而在Linux下&#xff0c;我們可以使用SELinux&#xff08;Security-Enhanced Linux&#xff09;…

Java調試技巧之垃圾回收機制解析

Java作為一種高級編程語言&#xff0c;以其跨平臺、面向對象、自動內存管理等特性而廣受開發者的喜愛。其中&#xff0c;自動內存管理是Java的一大亮點&#xff0c;通過垃圾回收機制實現對內存的自動分配和釋放&#xff0c;極大地簡化了開發者的工作。本文將深入探討Java的垃圾…

mysql數據庫文件丟失恢復---惜分飛

客戶服務器重啟,mysql相關數據文件丟失 通過底層工具進行分析,無法正確恢復數據庫名字,一個個單個ibd文件(而且很多本身是錯誤的) 對于這種情況,通過mysql block掃描恢復出來page文件 恢復出來客戶需要數據 這個客戶出現該故障的原因大概率是由于文件系統損壞導致.最終…

C語言進階之路-數據結構篇

目錄 一、學習目標 二、數據結構 1.基本概念 線性關系&#xff1a; 非線性關系&#xff1a; 存儲形式 2. 算法分析 2.1 時間復雜度 2.2 空間復雜度 2.3 時空復雜度互換 總結 一、學習目標 了解數據結構的基本概念了解算法的分析方法 二、數據結構 1.基本概念 數據結…

測試bug分析

項目場景&#xff1a; 提示&#xff1a;這里簡述項目相關背景&#xff1a; 例如&#xff1a;項目場景&#xff1a;示例:通過藍牙芯片(HC-05)與手機 APP 通信&#xff0c;每隔 5s 傳輸一批傳感器數據(不是很大) 問題描述 提示&#xff1a;這里描述項目中遇到的問題&#xff1…

Nacos源碼解讀11——客戶端怎么讀取最新的配置信息

項目啟動怎么讀取的配置信息 自動裝配 SpringBoot 自動裝配機制 加載 WEB/INF spring.factories 會將如下幾個Bean加載到ioc 容器中 BeanConditionalOnMissingBeanpublic NacosConfigProperties nacosConfigProperties() {return new NacosConfigProperties();}BeanCondition…

【算法Hot100系列】兩數之和

&#x1f49d;&#x1f49d;&#x1f49d;歡迎來到我的博客&#xff0c;很高興能夠在這里和您見面&#xff01;希望您在這里可以感受到一份輕松愉快的氛圍&#xff0c;不僅可以獲得有趣的內容和知識&#xff0c;也可以暢所欲言、分享您的想法和見解。 推薦:kwan 的首頁,持續學…

【rabbitMQ】模擬work queue,實現單個隊列綁定多個消費者

上一篇&#xff1a; springboot整合rabbitMQ模擬簡單收發消息 https://blog.csdn.net/m0_67930426/article/details/134904766?spm1001.2014.3001.5502 在這篇文章的基礎上進行操作 基本思路&#xff1a; 1.在rabbitMQ控制臺創建一個新的隊列 2.在publisher服務中定義一個…

MySQL中的數據類型

MySQL中的數據類型 大家好&#xff0c;我是微賺淘客系統的小編&#xff0c;也是冬天不穿秋褲&#xff0c;天冷也要風度的程序猿&#xff01;今天我們將探討MySQL中的數據類型&#xff0c;這是數據庫設計中至關重要的一部分。數據庫作為程序的底層支持&#xff0c;數據類型的選擇…

[python]利用whl輪子文件python3.12安裝talib

ta-lib目前很多人使用&#xff0c;網上也有很多人下載whl文件直接pip安裝即可&#xff0c;但是最新版本3.12沒有出來&#xff0c;因此本人獨家制作python 3.12版本whl文件&#xff0c;從源碼開始編譯生成。TA-Lib-0.4.28-cp312-cp312-win-amd64.whl &#xff0c;注意這個whl文件…

Java 多線程下的單例模式

單例對象&#xff08;Singleton&#xff09;是一種常用的設計模式。在Java應用中&#xff0c;單例對象能保證在一個JVM中&#xff0c;該對象只有一個實例存在。正是由于這個特 點&#xff0c;單例對象通常作為程序中的存放配置信息的載體&#xff0c;因為它能保證其他對象讀到一…

JWT的原理

在談及jwt原理前,我們其實對jwt并不陌生,對于有經驗的碼農,大都聽過或者實踐過,對于一些初學者,凡是談及安全方面的問題,總是覺得很復雜,感覺不是自己能搞得懂得,但其實無非也是加密解密的過程,不要想的太復雜,我們先說一說JWT在生產上的應用 JWT在生產上的應用 傳遞用戶身份信…

Android系統中使用Cunit測試C/C++接口

Android系統中使用Cunit測試C/C接口 Cunit是C/C語言的單元測試框架&#xff0c;但常用于Windows和Linux開發中。 Android系統中經常有jni、so庫、hal service等都是C/C實現&#xff0c;本文講解如何將Cunit嵌入Android中&#xff0c;用于測試一些C/C api。 Cunit簡介 Cunit是很…

全面解析“由于找不到hid.dll,無法繼續執行代碼”的4個解決方法

在計算機使用過程中&#xff0c;我們經常會遇到一些錯誤提示&#xff0c;其中之一就是“找不到hid.dll”。這個問題通常出現在嘗試運行某個程序或訪問某個設備時。那么&#xff0c;當我們遇到這個問題時&#xff0c;應該如何解決呢&#xff1f;本文將詳細介紹找不到hid.dll的解…

高校需要哪些大數據實訓平臺?

當前&#xff0c;數據已成為重要的生產要素&#xff0c;大數據產業作為以數據生成、采集、存儲、加工、分析、服務為主的戰略性新興產業&#xff0c;是激活數據要素潛能的關鍵支撐&#xff0c;是加快經濟社會發展質量變革、效率變革、動力變革的重要引擎。 泰迪大數據實驗…

Angular 14帶來了類型化表單和獨立組件

獨立組件通過減少對ngmodule的需求&#xff0c;有望簡化Angular應用的開發。 介紹 Angular 14是谷歌開發的、基于typescript的web應用框架的最新版本&#xff0c;它以輸入表單和獨立組件的開發者預覽版為特色。 其特性包括&#xff1a; 一個基于組件的框架&#xff0c;用于構…

Fortran讀取netcdf文件/WRF中的文件讀取

一直很好奇WRF到底如何通過netcdf庫讀取netcdf文件&#xff0c;正巧有個機會&#xff0c;試了下fortran讀取nc文件&#xff0c;總結一下。 netcdf庫 Fortran讀取nc文件需要依賴netcdf外部庫。安裝該庫以后&#xff0c;會有專門寫給ffortran函數聲明的頭文件&#xff1a;netcd…

數據類型·

定義 數據類型是指在編程語言中&#xff0c;能夠表示不同種類的數據值并對其進行操作的集合。在不同的編程語言中&#xff0c;數據類型可能有所不同&#xff0c;但通常包括基本數據類型和復合數據類型兩種。 基本數據類型通常包括整數、浮點數、布爾值、字符等。這些類型的數…

231210 刷題日報

單調棧&#xff1a; 為啥需要單調棧&#xff1f;因為棧的后入先出特性方便從棧頂刪除剛入棧的元素 496. 下一個更大元素 I 739. 每日溫度 單調對列&#xff1a; 為啥要用單調對列&#xff1f;因為像滑動窗口這種題目&#xff0c;窗口兩端都需要插入和刪除&#xff0c;所以需…

Python滿屏飄字表白代碼

? 目錄 系列文章 寫在前面 Turtle入門 滿屏飄字 寫在后面 系列文章 序號文章目錄直達鏈接表白系列1浪漫520表白代碼https://want595.blog.csdn.net/article/details/1306668812滿屏表白代碼https://want595.blog.csdn.net/article/details/1297945183跳動的愛心https://…