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>

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/285342.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

vue使用xlsx和xlsx-style导出xlsx文件并修改样式

1.下载依赖 npm install xlsx --save npm install file-saver --save npm install xlsx-style --save2.先修改xlsx-style的源码&#xff0c;一旦引入xlsx-style则会报错 在\node_modules\xlsx-style\dist\cpexcel.js 807行 的 var cpt require(’./cpt’ ‘able’); 改成 v…

翻译: LLMs新的工作流程和新的机会 New workflows and new opportunities

生成人工智能正以多种方式引领着不仅仅是成本节约&#xff0c;更是收入增长。但是&#xff0c;就像生成人工智能这样的通用技术创造价值的方式有很多&#xff0c;谈论这些方式是很多的。但在这个视频中&#xff0c;我想看看一些我看到的新兴的&#xff0c;或者更常见的走向这种…

BearPi Std 板从入门到放弃 - 先天神魂篇(9)(RT-Thread DAC->ADC)

简介 RT-Thread DAC->ADC 使用, 就是DAC1输出模拟量, ADC1 读取模拟量转化成电压值, 基于开发板 &#xff1a; Bearpi Std(小熊派标准板)主芯片: STM32L431RCT6串口: Usart1DAC1: PA5, OUT2ADC1: PC2, IN3将板子上的E53 接口, 5 和 6用排线相连, 即实现内部DAC1->ADC1 …

Leetcode—859.亲密字符串【简单】

2023每日刷题&#xff08;六十三&#xff09; Leetcode—859.亲密字符串 &#x1f4a9;山实现代码 class Solution { public:bool buddyStrings(string s, string goal) {int len1 s.size(), len2 goal.size();int cnt 0;int flag 0;int flag2 0;int odd -1;int a[26] …

react基于antd二次封装spin组件

目录 react基于antd二次封装spin组件组件使用组件效果 react基于antd二次封装spin组件 组件 import { Spin } from antd; import propTypes from "prop-types"; import React from react; import styleId from "styled-components"; // 使用 父div必须加…

智能优化算法应用:基于人工电场算法3D无线传感器网络(WSN)覆盖优化 - 附代码

智能优化算法应用&#xff1a;基于人工电场算法3D无线传感器网络(WSN)覆盖优化 - 附代码 文章目录 智能优化算法应用&#xff1a;基于人工电场算法3D无线传感器网络(WSN)覆盖优化 - 附代码1.无线传感网络节点模型2.覆盖数学模型及分析3.人工电场算法4.实验参数设定5.算法结果6.…

智能手表上的音频(五):录音

上篇讲了语音通话&#xff0c;本篇讲录音。录音功能就是把录到的音频保存成文件。保存文件的格式支持两种&#xff1a;一是PCM(16K采样)的WAV格式&#xff0c;二是AMR-NB&#xff08;8k采样&#xff09;的AMR格式。WAV格式简单&#xff1a;44字节的文件头PCM 数据&#xff0c;示…

OpenSSL 3.2.0新增Argon2支持——防GPU暴力攻击

1. 引言 OpenSSL新发布的3.20版本中&#xff0c;引入了一些新特性&#xff0c;包括&#xff1a; post-quantum方法Brainpool曲线QUICArgon2&#xff1a;Argon2 是一种慢哈希函数&#xff0c;在 2015 年获得 Password Hashing Competition 冠军&#xff0c;利用大量内存计算抵…

科技云报道:至简至强,新一代服务器的算力美学

科技云报道原创。 在这个时代&#xff0c;数据和计算的边界正在迅速扩张。 随着云计算、物联网和人工智能的日益成熟&#xff0c;对算力的需求已经突破了传统的限制&#xff0c;进入了一个全新的阶段。在这个阶段&#xff0c;不仅是算力的量级发生了变化&#xff0c;其性质和…

java配置+J_IDEA配置+git配置+maven配置+基本语句

当前目录文件夹dir 进入文件夹cd 返回上一级cd.. 创建文件夹&#xff1a;mkdir 文件名删除文件夹&#xff1a;rd 文件夹名&#xff0c; 目录不为空不能直接删 rd /s 带子文件夹一起删 清屏cls 切换d盘才能进入 下载git地址&#xff1a; Git - Downloading Package (g…

在linux上基于shell自动部署Java项目

一&#xff0c;安装git yum list git 列出git安装包 yum install git 在线安装git 使用 git -varsion 查看是否安装成功 安装成功 二&#xff0c; Git克隆代码 git clone 远程仓库地址 三&#xff0c;创建shell脚本 touch shell.sh shell脚本 #!/bin/sh echo echo 自动…

【计算机网络】TCP协议——2.连接管理(三次握手,四次挥手)

目录 前言 一. 建立连接——三次握手 1. 三次握手过程描述 2. TCP连接建立相关问题 二. 释放连接——四次挥手 1. 四次挥手过程描述 2. TCP连接释放相关问题 三. TCP状态转换 结束语 前言 TCP——传输控制协议(Transmission Control Protocol)。是一种面向连接的传…