当前位置: 首页 > news >正文

HTML有哪些列表以及具体的使用!!!

文章目录

  • 一、HTML列表
  • 二、列表的应用
    • 1、无序列表
    • 2、有序列表
    • 3、自定义列表
  • 三、总结


一、HTML列表

html的列表有三种,一种是无序列表,一种是有序列表,还有一种为自定义列表。

二、列表的应用

1、无序列表

<ul> <li>
无序列表:无序列表基础版 主要使用<ul>标签
和<li>标签无序列表表示只是列表而已,
没有什么顺序之分它的展现形式是由<ul>标签包裹着<li>标签:

代码如下:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><ul><li>1</li><li>2</li><li>3</li></ul>
</body>
</html>

结果为:
在这里插入图片描述

2、有序列表

<ol> <li>
有序列表:简单的有序列表 由<ol>标签包裹着<li>标签组成
在网页上显示的时候会有1,2,3,4这样的数字图标显示,
表示为有顺序的显示:

代码如下:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><ol><li>1</li><li>2</li><li>3</li></ol>
</body>
</html>

结果为:
在这里插入图片描述

3、自定义列表

自定义列表:简单的自定义列表 由<dl>标签包裹着
<dt><dd>标签组成
dl为声明列表,而dt一般为小标题,dd则为内容

代码如下:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><dl><dt>123</dt><dd>1</dd><dd>2</dd><dd>3</dd><dt>123</dt><dd>1</dd><dd>2</dd><dd>3</dd><dt>123</dt><dd>1</dd><dd>2</dd><dd>3</dd></dl>
</body>
</html>

结果为:
在这里插入图片描述

三、总结

标签名定义说明
ul无序列表里面只能包含li,没有顺序,使用比较多,li里面可以包含任何标签
ol有序列表里面只能包含li,有序,使用相对较少。li里面可以包含任何标签
dl自定义列表里面只能包含 dt 和 dd。dt和dd里面都可以放任何标签
http://www.lryc.cn/news/263243.html

相关文章:

  • DriveWorks Solo捕获参数(二)
  • 基于开源的JAVA mongodb jdbc 驱动 使用教程
  • [RK-Linux] RK3399使用RK开源SPL,修改U-Boot为FIT打包方式,裁剪trust分区
  • 【网络安全】-Linux操作系统—VMWare软件
  • 关于chatgpt一点肤浅认识
  • Redis结合SpringBoot 基本使用
  • JAVA主流日志框架梳理学习及使用
  • java多个设计模式解决大量if-else堆积
  • js DOM的一些小操作 获取节点集合Node( getElementsByClassName等)
  • Arcgis导出为tiff
  • nginx中的root and alias命令的区别
  • python提取图片型pdf中的文字(提取pdf扫描件文字)
  • 08‐Mysql全局优化与Mysql 8.0新特详解
  • 【LeetCode刷题笔记】155.最小栈
  • 我的4096创作纪念日
  • Java Web 01_HTML4HTML5基础标签语法
  • Androidstudio加载编译时kotlin-compiler-embeddable一直下载中
  • 案例073:基于微信小程序的智慧旅游平台开发
  • Flink系列之:Flink 1.8.0 中的状态 TTL:如何在 Apache Flink 中自动清理应用程序状态
  • 2023 亚马逊云科技 re:Invent 大会探秘:Aurora 无限数据库的突破性应用
  • IDEA添加Apifox插件后,返回参数不详细解决办法
  • js多图合成一张图
  • 利用原始套接字解决mac地址错误问题【南瑞SysKeeper-2000】
  • JVM- 为什么G1垃圾回收器需要有大对象区
  • 操作系统的界面
  • User 怎么在anaconda的虚拟环境中安装下载好的jieba.tar.gz包呢
  • 1.【分布式】分布式事务详解
  • selenium-wire简介
  • 华为组播配置案例
  • lua语法