列表标签的介绍与使用

列表的作用:

整齐、整洁、有序,它作为布局会更加自由和方便。

根据使用情景不同,列表可以分为三大类:无序列表、有序列表和自定义列表

无序列表

<ul> 标签表示 HTML 页面中项目的无序列表,一般会以项目符号呈现列表项,而列表项使用 <li> 标签定义。
无序列表的基本语法格式如下:


<ul>
 <li>列表项1</li>
 <li>列表项2</li>
 <li>列表项3</li>
 ...
</ul>


1. 无序列表的各个列表项之间没有顺序级别之分,是并列的。
2. <ul></ul> 中只能嵌套 <li></li>,直接在 <ul></ul> 标签中输入其他标签或者文字的做法是不被允许的。
3. <li> 与 </li> 之间相当于一个容器,可以容纳所有元素。
4. 无序列表会带有自己的样式属性,但在实际使用时,我们会使用 CSS 来设置。

有序列表

有序列表即为有排列顺序的列表,其各个列表项会按照一定的顺序排列定义。
在 HTML 标签中,<ol> 标签用于定义有序列表,列表排序以数字来显示,并且使用 <li> 标签来定义列表项。
有序列表的基本语法格式如下:


<ol>
 <li>列表项1</li>
 <li>列表项2</li>
 <li>列表项3</li>
 ...
</ol>


1. <ol></ol>中只能嵌套<li></li>,直接在<ol></ol>标签中输入其他标签或者文字的做法是不被允许的。
2. <li> 与 </li>之间相当于一个容器,可以容纳所有元素。
3. 有序列表会带有自己样式属性,但在实际使用时,我们会使用 CSS 来设置

自定义列表

在 HTML 标签中,<dl> 标签用于定义描述列表(或定义列表),该标签会与 <dt>(定义项目/名字)和
<dd>(描述每一个项目/名字)一起使用。
其基本语法如下:


<dl>
 <dt>名词1</dt>
 <dd>名词1解释1</dd>
 <dd>名词1解释2</dd>
</dl>


1. <dl></dl> 里面只能包含 <dt> 和 <dd>。
2. <dt> 和 <dd>个数没有限制,经常是一个<dt> 对应多个<dd>。
 

实战

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

    <p>无序列表</p>
    <ul>
        <li>钦州</li>
        <li>南宁</li>
        <li>北海</li>
    </ul>
    <p>这里一个有序列表</p>
    <ol>
        <li>第一名</li>
        <li>第二名</li>
        <li>第三名</li>
    </ol>

    <p>这是自定义列表</p>
    <dl>
        <dt>联系我们</dt>
        <dd>微信</dd>
        <dd>qq</dd>
        <dd>新浪</dd>
    </dl>
</body>
</html>

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

C++设计模式——Adapter(适配器)模式

一、Adapter模式是个啥&#xff1f; 适配器模式在软件开发的江湖里&#xff0c;可以说用途是非常广的。下面几个经典的场景来说明适配器模式的使用。 场景一 场景二 假如你正在开发一款股票市场监测程序&#xff0c; 它会从不同来源下载 XML 格式的股票数据&#xff0c; 然后…

力扣每日一题day33[111. 二叉树的最小深度]

给定一个二叉树&#xff0c;找出其最小深度。 最小深度是从根节点到最近叶子节点的最短路径上的节点数量。 说明&#xff1a;叶子节点是指没有子节点的节点。 示例 1&#xff1a; 输入&#xff1a;root [3,9,20,null,null,15,7] 输出&#xff1a;2示例 2&#xff1a; 输入…

传感器(一) :IMU / 陀螺仪模块

IMU / 陀螺仪模块 一、概述二、注意参数2.1 陀螺仪芯片标准&#xff08;MPU6050)2.2 参数说明 三、IMU模式使用注意事项3.1 IMU模块安装注意事项3.2 为什么IMU要安装在机器中心位置 四、常见陀螺仪芯片品牌 一、概述 IMU全称为惯性测量单元&#xff0c;可以通过测量物体在三维空…

SpringSecurity6 | 登陆后的跳转

SpringSecurity6 | 自定义认证规则 ✅作者简介&#xff1a;大家好&#xff0c;我是Leo&#xff0c;热爱Java后端开发者&#xff0c;一个想要与大家共同进步的男人&#x1f609;&#x1f609; &#x1f34e;个人主页&#xff1a;Leo的博客 &#x1f49e;当前专栏&#xff1a; Ja…

HTML5+CSS3小实例:3D翻转Tab选项卡切换特效

实例:3D翻转Tab选项卡切换特效 技术栈:HTML+CSS 效果: 源码: 【HTML】 <!DOCTYPE html> <html><head><meta http-equiv="content-type" content="text/html; charset=utf-8"><meta name="viewport" content=…

JavaScript基础知识整理(最全知识点, 精简版,0基础版)

文章目录 一、输入和输出内容 1.1 输出 1.1.1 在浏览器的控制台输出打印 1.1.2 直接在浏览器的页面上输出内容 1.1.3 页面弹出警告对话框 1.2 输入 二、变量 2.1 变量是什么 2.2 变量的声明和赋值 2.3 变量的命名规范和规范 三、变量扩展&#xff08;数组&#xff09; 3.1 数组…

MyBatis 四大核心组件之 ParameterHandler 源码解析

&#x1f680; 作者主页&#xff1a; 有来技术 &#x1f525; 开源项目&#xff1a; youlai-mall &#x1f343; vue3-element-admin &#x1f343; youlai-boot &#x1f33a; 仓库主页&#xff1a; Gitee &#x1f4ab; Github &#x1f4ab; GitCode &#x1f496; 欢迎点赞…

【S32K3环境搭建】-0.4-使用SEGGER J-Link烧录调试程序

【S32K3_MCAL从入门到精通】合集&#xff1a; S32K3_MCAL从入门到精通https://blog.csdn.net/qfmzhu/category_12519033.html 导入一个编译没有报错的S32K312工程。接着在菜单栏中&#xff0c;依次选择Debug下拉箭头 -- > Debug Configuration&#xff1b; 在弹出的Create…

Xcode doesn’t support iOS 16.6

xocde版本低&#xff0c;手动放入16.6的依赖文件 https://gitee.com/qiu1993/iOSDeviceSupport/blob/master/iOS16/16.6.zip 路径 /Applications/Xcode.app/Contents/Developer/Platforms/iPhoneOS.platform/DeviceSupport

最新国内可用GPT4,Midjourney绘画网站+使用教程

一、前言 ChatGPT GPT4.0&#xff0c;Midjourney绘画&#xff0c;相信对大家应该不感到陌生吧&#xff1f;简单来说&#xff0c;GPT-4技术比之前的GPT-3.5相对来说更加智能&#xff0c;会根据用户的要求生成多种内容甚至也可以和用户进行创作交流。 然而&#xff0c;GPT-4对普…

漏洞复现-用友NC任意文件上传漏洞(附漏洞检测脚本)

免责声明 文章中涉及的漏洞均已修复&#xff0c;敏感信息均已做打码处理&#xff0c;文章仅做经验分享用途&#xff0c;切勿当真&#xff0c;未授权的攻击属于非法行为&#xff01;文章中敏感信息均已做多层打马处理。传播、利用本文章所提供的信息而造成的任何直接或者间接的…

基于ssm端游账号销售管理系统论文

摘 要 互联网发展至今&#xff0c;无论是其理论还是技术都已经成熟&#xff0c;而且它广泛参与在社会中的方方面面。它让信息都可以通过网络传播&#xff0c;搭配信息管理工具可以很好地为人们提供服务。针对端游账号销售信息管理混乱&#xff0c;出错率高&#xff0c;信息安全…

全面高压化与全面超快充,破解新能源汽车的时代难题

是什么让新能源车主感到疲惫与焦虑&#xff1f;是什么阻挡更多消费者选择新能源汽车&#xff1f;我们在身边进行一个简单的调查就会发现&#xff0c;问题的答案非常一致&#xff1a;充电。 充电难&#xff0c;充电慢的难题&#xff0c;始终是困扰新能源汽车产业发展&#xff0c…

【Marp】基于Markdown-Marp快速制作PPT

【Marp】基于Markdown-Marp快速制作PPT 文章目录 【Marp】基于Markdown-Marp快速制作PPT零、参考资料一、Marp基本语法&#xff08;创建分页&#xff0c;排版图片&#xff0c;更换主题&#xff0c;Marp扩展指令修改样式&#xff09;1、创建新的PPT页面2、插入图片 & 排版图…

【LeetCode刷题-树】--112.路径总和

112.路径总和 方法&#xff1a;广度优先搜索 /*** Definition for a binary tree node.* public class TreeNode {* int val;* TreeNode left;* TreeNode right;* TreeNode() {}* TreeNode(int val) { this.val val; }* TreeNode(int val, TreeNode …

Shell数组函数:函数

一、概述 概念&#xff1a; 函数是一段完成特定功能的代码片段&#xff08;块&#xff09;在shell中定义了函数&#xff0c;就可以使代码模块化&#xff0c;使于复用代码注意函数必须先定义才可以使用。 重点&#xff1a; 传参 $1,$2局部变量 local返回值 return 即$? 二、定…

APP备案(Android) - 获取签名证书公钥、MD5

因为近期刚针对各应用平台对APP备案时间节点要求进行了统一整理&#xff0c;然后隔天就被要求提供一下app相关的的公钥和MD5&#xff0c;虽然很快就解决了这个事情&#xff0c;但忍不住又稍微衍生了一下&#xff0c;但行小步&#xff0c;莫问远方吧 关联Blog APP备案(Android)…

史上最全MySQL各种锁详解

锁详解 锁是计算机协调多个进程或线程并发访问某一资源的机制。 MySQL锁可以按模式分类为&#xff1a;乐观锁与悲观锁。按粒度分可以分为全局锁、表级锁、页级锁、行级锁。按属性可以分为&#xff1a;共享锁、排它锁。按状态分为&#xff1a;意向共享锁、意向排它锁。按算法分…

深度解析IP应用场景API:提升风险控制与反欺诈能力

前言 在当今数字化时代&#xff0c;网络安全和用户数据保护成为企业日益关注的焦点。IP应用场景API作为一种强大的工具&#xff0c;不仅能够在线调用接口获取IP场景属性&#xff0c;而且具备识别IP真人度的能力&#xff0c;为企业提供了卓越的风险控制和反欺诈业务能力。本文将…

2c 操作符详解

文章目录 1. 操作符分类&#xff1a;2. 算术操作符3. 移位操作符(对二进制移位)3.1 左移操作符3.2 右移操作符 4. 位操作符(重要)5. 赋值操作符6. 单目操作符6.1 单目操作符介绍6.2 sizeof 和 数组 7. 关系操作符8. 逻辑操作符(重要)9. 条件操作符10. 逗号表达式11. 下标引用、…