[Web自动化] HTML列表标签

3.6 列表标签

列表作为网页设计的重要内容之一,能够用来制作导航栏和新闻列表等。HTML 列表分为:有序列表(ol),无序列表(ul)以及自定义列表(dl)。

3.6.1 无序列表与有序列表

无序列表是一个项目的列表,此列项目使用实心圆、空心圆、方块进行标记,无序列表使用 <ul> 标签。同样,有序列表也是一列项目,列表项目使用数字进行标记。有序列表始于 <ol> 标签。每个列表项始于 <li> 标签。

html 复制代码
<p>无序列表</p>
<ul>
<li>列表项1</li>
<li>列表项2</li>
</ul>

<p>有序列表</p>
<ol>
<li>列表项1</li>
<li>列表项2</li>
</ol>

可以看到有多少个列表项就有多少个 <li> 标签。
ul标签的 type 属性:

type 属性定义了列表项前项目符号的类型。
<ul> 标签的 type 属性:

值 备注
disc(默认) 实心圆
circle 空心圆
square 小方块

ol标签的 type 属性:

值 备注
1(默认) 数字表示(1,2,3...)
A 大写字母表示(A,B,C...)
a 小写字母表示(a,b,c...)
I 大写罗马数字表示(I,II,III...)
i 小写罗马数字表示(i,ii,iii...)

我们来看其中一两个 type 属性:

html 复制代码
<p>无序列表</p>
<ul type="circle">
<li>空心圆列表项1</li>
<li>空心圆列表项2</li>
</ul>

<p>有序列表</p>
<ol type="A">
<li>列表项1</li>
<li>列表项2</li>
</ol>

只需要修改 type 属性,就可以看到不同的项目符号了。

3.6.2 自定义列表

定义:自定义列表不仅仅是一列项目,而是项目及其注释的组合。自定义列表以 <dl> 标签开始。每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以 <dd> 开始。自定义列表的列表项前没有任何项目符号。

语法格式:

html 复制代码
<dl>
<dt>名词1</dt>
<dd>名词1解释1</dd>
...
<dt>名词2</dt>
<dd>名词2解释1</dd>
...
</dl>

例子:

html 复制代码
<h2>一个自定义列表:</h2>
<dl>
<dt>春天</dt>
<dd>是万物复苏,百花争艳的季节</dd>
<dt>夏天</dt>
<dd>是夏日绵绵,烈日炎炎的季节</dd>
</dl>

在浏览器中的运行效果为:

相关推荐
快乐的韭菜根根2 小时前
SLURM配置服务器一
运维·服务器
databook2 小时前
让 LLM 输出不再失控:用 Pydantic 校验大模型输出
人工智能·python·llm
Z21-X2 小时前
云原生运维学习笔记:揭开虚拟化的硬核面纱,从底层架构到KVM实战
运维·笔记·学习·云原生
jingcairensheng2 小时前
vscode 配置Python虚拟环境基于扩展和原生miniconda的区别
ide·vscode·python
星恒随风2 小时前
Linux线程同步与互斥(二):从日志系统与线程池设计,到线程安全单例、可重入函数和死锁原理
linux·运维·状态模式
“AI国潮设计-小江”2 小时前
《【AIGC实战】Python+SDXL批量生成“英歌舞草莓抱抱卷蛋糕”IP插牌立牌方案,锁定角色一致性,甜品插件化落地》
开发语言·人工智能·python·prompt·aigc
LMT流氓兔2 小时前
第五单元——第7课:工具读取用户身份,而不是让模型填写身份
python·langchain
FlyWIHTSKY2 小时前
Agent阶段一:基础夯实
python·ai·fastapi
估值探索者2 小时前
【Python量化技术指标实战 04】布林带通道突破,怎么知道是真突破还是假突破?
java·开发语言·python·接口·股票数据api接口
whyutianict_vv2 小时前
HCIE-Datacom 考纲技术拆解:从 OSPF/BGP 到 VXLAN/Netconf 的知识地图
运维·网络