html列表總結補充

1.有序列表的type屬性

不同的type值表示不同的排序標號

1 表示列表項目用數字標號(1,2,3...
1
a 表示列表項目用小寫字母標號(a,b,c...
2
A 表示列表項目用大寫字母標號(A,B,C...
3
i 表示列表項目用小寫羅馬數字標號(i,ii,iii...
4
I 表示列表項目用大寫羅馬數字標號(I,II,III...
實例:

<body>

<ol>
<li>尚學堂</li>
<li>itbaizhan</li>
<li>阿里</li>
<li>京東</li>
</ol>

<ol type="1">
<li>尚學堂</li>
<li>itbaizhan</li>
<li>阿里</li>
<li>京東</li>
</ol>

<ol type="a">
<li>尚學堂</li>
<li>itbaizhan</li>
<li>阿里</li>
<li>京東</li>
</ol>

<ol type="A">
<li>尚學堂</li>
<li>itbaizhan</li>
<li>阿里</li>
<li>京東</li>
</ol>

<ol type="i">
<li>尚學堂</li>
<li>itbaizhan</li>
<li>阿里</li>
<li>京東</li>
</ol>

<ol type="I">
<li>尚學堂</li>
<li>itbaizhan</li>
<li>阿里</li>
<li>京東</li>
</ol>

<ol>
<li>100</li>
<li>
<ol>
<li>201</li>
<li>202</li>
<li>203</li>
</ol>
</li>
<li>300</li>
</ol>

</body>

2.無序列表

無序列表的type屬性

disc 默認實心圓
circle 空心圓
square 小方塊
none 不顯示
這個type屬性也是表示的每一項前面的標號,不過抽象的用符號表示

<body>

? ? <ul>
<li>尚學堂</li>
<li>itbaizhan</li>
<li>京東</li>
<li>阿里</li>
</ul>

? ? <ul type="disc">
<li>尚學堂</li>
<li>itbaizhan</li>
<li>京東</li>
<li>阿里</li>
</ul>

? ? <ul type="circle">
<li>尚學堂</li>
<li>itbaizhan</li>
<li>京東</li>
<li>阿里</li>
</ul>

? ? <ul type="square">
<li>尚學堂</li>
<li>itbaizhan</li>
<li>京東</li>
<li>阿里</li>
</ul>

? ? <ul type="none">
<li>尚學堂</li>
<li>itbaizhan</li>
<li>京東</li>
<li>阿里</li>
</ul>

? ? <ul>
<li>100</li>
<li>
<ul>
<li>201</li>
<li>202</li>
<li>203</li>
<li>204</li>
</ul>
</li>
<li>300</li>
</ul>

</body>
</html>

在以上代碼中,無序列表是可以嵌套的,有序列表是不能嵌套的
3.列表快捷鍵:
快捷鍵的本質是將超鏈接套在一個載體之中
這是普通列表

<ul>
<li>Xiaomi手機</li>
<li>Redmi手機</li>
<li>電視</li>
<li>筆記本</li>
</ul>

這是嵌套之后的快捷鍵列表

<ul>
<li><a href="https://itbaizhan.com">itbaizhan</a></li>
<li><a href="https://mi.com">小米</a></li>
<li><a href="https://jd.com">京東</a></li>
</ul>

有序無序自定義列表都可以添加快捷鍵

4。自定義列表:

可以把自定義列表理解成生活里的 “物品 + 說明書” 組合 —— 它不只是簡單列一堆東西,而是給每個東西都配上專門的解釋 / 說明,就像你買了個家電,既有 “家電名稱”(項目),又有 “家電用法”(注釋),兩者是一一對應的關系。

先看一個最直觀的例子:用自定義列表介紹 3 種水果(項目)和它們的特點(注釋),代碼和效果對應如下:

<!-- 自定義列表的核心結構:dl(列表容器)、dt(項目,即“物品”)、dd(注釋,即“說明書”) -->
<dl><!-- 第一個項目:蘋果 --><dt>蘋果</dt><!-- 蘋果的注釋:解釋它的特點 --><dd>常見水果,口感脆甜,富含維生素C,能直接吃或做沙拉。</dd><!-- 第二個項目:香蕉 --><dt>香蕉</dt><!-- 香蕉的注釋:解釋它的特點 --><dd>熱帶水果,口感軟糯,富含鉀元素,能快速補充能量。</dd><!-- 第三個項目:葡萄 --><dt>葡萄</dt><!-- 葡萄的注釋:解釋它的特點 --><dd>串狀水果,分甜、酸兩種口味,富含花青素,適合鮮食或釀葡萄酒。</dd>
</dl>

這個例子里,你能清楚看到 “項目 + 注釋” 的組合邏輯:

  • <dt>?標簽就像 “商品名稱”,只寫核心的 “項目”(蘋果、香蕉、葡萄),是列表里的 “主角”;
  • <dd>?標簽就像 “商品說明”,專門解釋對應?<dt>?的細節(口感、營養、用法),是 “主角的補充信息”;
  • 整個?<dl>?標簽把這些 “主角 + 補充說明” 打包成一個完整的列表,不是零散的文字堆。

如果對比無序列表(只列 “蘋果、香蕉、葡萄”,沒有解釋),你就會明白:自定義列表的核心不是 “列項目”,而是 “給每個項目配專屬注釋”,就像你記筆記時,先寫 “知識點標題”(項目),再寫 “知識點詳解”(注釋),兩者綁定在一起,看的時候能直接對應,不會混亂。

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

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

相關文章

smartctl Current_Pending_Sector 硬盤待處理扇區

smartctl -a /dev/sdae當前值: 312 個待處理扇區 嚴重警告信號&#xff0c;硬盤發現了 312 個可疑扇區&#xff0c;正在等待重新分配 197 Current_Pending_Sector 0x0022 100 100 000 Old_age Always - 312讀取錯誤頻發 錯誤計數: 38 次 ATA 錯誤 …

MATLAB1-基本操作和矩陣輸入-臺大郭彥甫

目錄 基礎的指令 format 矩陣和向量 找出某行某列的矩陣元素 快速打出多個矩陣或者向量 矩陣連接 矩陣計算 一些特殊矩陣fuction 矩陣相關函數 基礎的指令 clc 清空命令行窗口 clear all 清空工作區的全部變量 who 將工作區的全部變量顯示出來 whos 工作區的變量信息詳…

【CSS 3D 交互】實現精美翻牌效果:從原理到實戰

效果圖 前言 在現代網頁設計中&#xff0c;交互效果是提升用戶體驗的重要手段。3D 翻牌效果作為一種常見的交互模式&#xff0c;廣泛應用于卡片展示、問答切換、產品詳情等場景。本文將詳細介紹如何使用 CSS 3D 技術實現一個精美的翻牌效果&#xff0c;并深入解析其實現原理。…

Python核心技術開發指南(062)——靜態方法

版權聲明 本文原創作者:谷哥的小弟 作者博客地址:http://blog.csdn.net/lfdfhl 靜態方法的定義 靜態方法是類中定義的一種特殊方法,它不需要依賴類實例或類本身即可調用,也不隱含傳遞self(實例引用)或cls(類引用)參數。在Python中,通過@staticmethod裝飾器來定義靜態…

炒股進階理論知識

學完前面的《從零開始學炒股》這樣的入門課程后&#xff0c;你已經有了一個基本的框架&#xff0c;接下來需要做的是深化、拓展和建立自己的交易系統。以下是為你量身定制的后續學習路徑和理論知識建議&#xff0c;分為幾個核心模塊&#xff1a;模塊一&#xff1a;技術分析的深…

華為OD機試真題-跳馬-OD統一考試(C卷)

題目描述: 馬是象棋(包括中國象棋和國際象棋)中的棋子,走法是每步直一格再斜一格,即先橫著或直著走一格,然后再斜著走一個對角線,可進可退,可越過河界,俗稱“馬走‘日’字。 給頂m行n列的棋盤(網格圖),棋盤上只有有棋子象棋中的棋子“馬”,并且每個棋子有等級之分,…

PyTorch 模型保存與加載 (速查版)

文章目錄1. 推理用: 保存 & 加載權重 (最常見)2. 繼續訓練用: 保存 & 加載完整狀態3. 微調用: 部分加載 (分類頭不同等情況)1. 推理用: 保存 & 加載權重 (最常見) import torch import torch.nn as nnmodel nn.Linear(10, 2)# 保存權重 torch.save(model.state_d…

oneshape acad數據集 sam-dataset

Full Text Search - Hugging Face sketchai (Sketch AI)

0913刷題日記

今日計劃10道1/10兩眼一睜就是刷209. 長度最小的子數組target 396893380 超時頭疼看下題解我的問題在于&#xff0c;中間有一個又寫了一個遍歷&#xff0c;思路和滑動窗口差不多&#xff0c;但是那個遍歷就把時間倍數了。頭疼還能做題&#xff0c;你很棒了,身體健康最重要。沒…

【JAVA】網絡編程

引言 在學習網絡編程之前&#xff0c;我們編寫的程序幾乎都是“單機版”的——只能在本地運行&#xff0c;自娛自樂&#xff0c;無法與其他主機&#xff08;用戶&#xff09;進行交互。 有些同學可能會產生誤解&#xff1a;既然 Java 號稱“一次編譯&#xff0c;到處運…

HTML標簽關系詳解:構建網頁的骨架結構

前言 在上一篇教程中&#xff0c;我們學習了HTML5的基本結構。今天&#xff0c;讓我們深入探討HTML標簽之間的關系。理解HTML標簽之間的關系對于構建結構清晰、語義明確的網頁至關重要。就像在現實生活中&#xff0c;建筑物的各個部分需要按照一定的規則組合在一起一樣&#x…

238 除自身以外數組的的乘積

我的解法&#xff08;沒頭緒&#xff0c;參考AI的思路&#xff09; 好奇怪啊&#xff0c;這個題目&#xff0c;沒什么思路 題目的主要難點是&#xff0c;如何通過這個線性運算得出所有的乘積和&#xff0c;同時不適用除法。 問了下AI&#xff0c;這種題目我可以從什么方向入手&…

智能體:從技術架構到產業落地的深度解析

在人工智能技術從 “感知智能” 向 “認知智能” 跨越的關鍵階段&#xff0c;智能體&#xff08;Intelligent Agent&#xff09;作為具備自主決策與環境交互能力的核心載體&#xff0c;正成為連接 AI 算法與產業應用的重要橋梁。不同于傳統被動執行指令的軟件系統&#xff0c;智…

MATLAB基于組合近似模型和IPSO-GA的全焊接球閥焊接工藝參數優化研究

引言與研究背景 全焊接球閥的重要性&#xff1a;廣泛應用于石油、天然氣、化工等長輸管道和關鍵裝置&#xff0c;其安全性、密封性和耐久性至關重要。閥體一旦發生焊接缺陷&#xff0c;可能導致災難性后果。 焊接工藝的挑戰&#xff1a;焊接是一個涉及電、熱、力、冶金的復雜瞬…

EzRemove(ezremove.ai)評測與實操:5 秒在線摳圖、支持批量與換底(電商/設計團隊提效指南)

摘要&#xff1a;做主圖、白底圖、海報的小伙伴&#xff0c;經常被“摳圖—換底—導出”這套流程折磨。EzRemove 是一個在線 AI 摳圖工具&#xff0c;支持5 秒自動摳圖、透明 PNG 導出、批量處理、背景替換與基礎編輯&#xff0c;無需安裝本地軟件&#xff0c;適合電商商家、設…

RStudio 教程:以抑郁量表測評數據分析為例

R 語言是一種專為統計計算、數據分析和圖形可視化而設計的編程語言&#xff0c;在學術界和工業界都備受青睞。RStudio是一款為 R 語言量身打造的集成開發環境&#xff08;IDE&#xff09;。它如同一個功能強大的指揮中心&#xff0c;能夠將數據科學工作所需的一切&#xff1a;控…

Rupert Baines加入CSA Catapult董事會

英國半導體行業領軍人物魯珀特貝恩斯&#xff08;Rupert Baines&#xff09;正式出任英國化合物半導體應用公司&#xff08;CSA Catapult&#xff09;非執行董事&#xff0c;宛若一位經驗豐富的航海家將為這艘科技旗艦指引航向。這位三次成功創業退出的科技企業家&#xff0c;將…

第七篇:識破“共因失效”——如何阻止汽車系統的“團滅”危機

想象一下這個場景&#xff1a; 你精心設計了一套雙備份的剎車系統&#xff0c;就像給車裝了兩條獨立的剎車線&#xff0c;心想&#xff1a;“這下總萬無一失了吧&#xff01;”結果&#xff0c;一場寒潮來襲&#xff0c;兩條剎車線因為同一個原因——低溫&#xff0c;同時被凍住…

健康大數據與傳統大數據技術專業有何不同?

在“數據即資產”的時代&#xff0c;大數據技術已滲透至各行各業。從電商推薦到金融風控&#xff0c;從智能制造到智慧城市&#xff0c;數據驅動的決策模式正在重塑產業格局。然而&#xff0c;隨著醫療健康領域數字化進程的加速&#xff0c;一個新興且高度專業化的分支——健康…

圖神經網絡分享系列-SDNE(Structural Deep Network Embedding) (三)

目錄 一、實驗 1.1 數據集 1.2 基線算法 1.3 評估指標 1.4 參數設置 1.5 實驗效果 1.5.1 網絡重構 1.5.1.1 方法性能優勢 1.5.1.2 特定數據集表現 1.5.1.3 模型對比分析 1.5.1.4 鄰近性重要性驗證 1.5.2 多標簽分類 1.5.3 鏈路預測 1.5.4網絡可視化的應用 1.6 參…