HTML常见的列表标签

目录

🍧无序列表

ul+li的组合,ul标签与li标签之间尽量不要写标签或内容
列表可以嵌套多层


type属性,可以指定序号的类型

复制代码
    可选值:默认值,使用阿拉伯数字

                    a/A 采用小写或大写字母作为序号

                    i/I 采用小写或大写的罗马数字作为序号
html 复制代码
<ul>
    这是ul和li之间
    <li>无序列表,第1个列表项</li>
    <li>无序列表,第2个列表项</li>
    <li>无序列表,第3个列表项</li>
    <li>无序列表,第4个列表项</li>
</ul>

;

🍧有序列表

ol+li的组合,ol标签与li标签之间尽量不要写标签或内容
列表可以嵌套多层

type属性可以修改无序列表的项目符号

属性 符号
disc 默认值,实心的圆点
square 实心的方块
circle 空心的圆

html 复制代码
 <ol>
        这是ol与li之间
        <li>无序列表、第1个列表项</li>
        <li>无序列表、第2个列表项</li>
        <li>无序列表、第3个列表项</li>
        <li>无序列表、第4个列表项</li>
    </ol>

;

🍧 定义列表

定义列表的每一个定义项是由dt(Define Title)与dd(Define Description)组成。

dl:定义列表标签

dt:表示定义项0的标题

dd:表示对上一个dt中的标题内容进行描述或补充说明


html 复制代码
<dl>
       <dt>赵本山</dt>
       <dd>春晚常驻选手,国内一线大品牌</dd>
       <dd>乡村爱情故事,二人转,小品</dd>
    </dl>
    

;

🍧 菜单列表

菜单列表是HTML版本中新增的列表标签,

实际上就是ul标签(无序列表)


html 复制代码
  <!-- 菜单列表是HTML版本中新增的列表标签,实际上就是ul标签(无序列表) -->
    <menu>
        <li>首页</li>
        <li>商品</li>
        <li>专题</li>
        <li>用户</li>
        <li>版权</li>
    </menu>

最后,几种列表标签中最常用的只有ul,当然也有新版本的menu标签。其他的2种标签(ol与dl),基本不使用。

:

OK,以上就是关于HTML常见的列表标签的常见内容啦!

相关推荐
anOnion7 分钟前
构建无障碍组件之Toolbar Pattern
前端·html·交互设计
惊鸿一博31 分钟前
图标加载方式_zeroIcon_是否加前缀mdi
开发语言·前端·javascript
2501_940041741 小时前
前端工程化进阶:5个高交互与可视化项目提示词
前端
你很易烊千玺1 小时前
JS 异步 从零讲(大白话 + 真实场景 + 可运行案例)
前端·javascript·vue.js
why技术3 小时前
AI Coding开始进入第四个时代,我还没上车呢!
前端·人工智能·后端
大家的林语冰4 小时前
CSS 已死?DOM 性能黑洞!Pretext 排版革命让你在文本间跳舞,没有 DOM 也能纵享丝滑~
前端·javascript·css
vipbic4 小时前
我也该升级了,陪伴了我7年的博客
前端
Lee川4 小时前
RAG 实战:从一篇掘金文章出发,拆解检索增强生成的全链路
前端·人工智能·后端
Lee川4 小时前
MCP 高德地图实战:当 AI 学会使用工具,一个协议如何重塑大模型的行动边界
前端·人工智能·后端
ZC跨境爬虫4 小时前
跟着 MDN 学CSS day_14:(尺寸调整技能测试与实战解析)
前端·css·ui·html·tensorflow