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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈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 参…