列表使用场景:

内容相关、结构相似、样式相近的内容,根据内容的不同分为:无序列表、有序列表、定义列表

  1. 无序列表:两个标签<ul>和<li>,是嵌套关系,快捷键ul>li

ul:unordered list,表示定义一个无序列表的大结构
li:list item,列表项,定义的是无序列表内的某一项

2.有序列表:<ol>和<li>,是嵌套关系,快捷键ol>li

ol:ordered list,表示定义一个有序的列表的大结构。
li:list item,定义的是有序列表的每一项。

有序无序列表注意事项:

  • 内部都只能嵌套<li>标签,而<li>不能脱离<ol>和<ul>单独书写
  • <li>标签是经典的容器级标签,可嵌套一个有序无序列表
  • <li>之间,有序列表有先后顺序,无序列表没有
  • 都只是搭建列表结构,前面的数字或圆点是CSS负责的
<h1>四部分</h1><ul><li>第一部分</li><li>第二部分</li><li>第三部分</li><li>第四部分</li></ul><h2>四部分</h2><ol><li>第一部分</li><li>第二部分</li><li>第三部分</li><li>第四部分</li></ol>

显示结果

3.定义列表:三个标签<dl>、<dt>和<dd>,dt和dd是同级关系,快捷键:dl>dt+dd

dl:definition list,表示定义一个自定义列表的大结构。
dt:definition term,表示定义自定义列表中的一个主题或者术语。
dd:definition description,定义解释项,表示描述或解释前面的定义主题。

定义列表注意事项:

  • <dl>内部只能嵌套<dt>和<dd>,<dt>与<dd>不能脱离<dl>单独书写。
  • dl内部可以放多组dt和dd,每个dd解释说明的是前面的距离最近的一个dt。
  • 每个dt后面可以有0到多个解释项的dd,每个dd解释的都是前面距离最近的一个dt。
  • <dl>
    <dt>A配送方式</dt>
    <dd>美团</dd>
    <dd>饿了么</dd>
    <dt>B配送方式</dt>
    <dd>
    <p>美团</p>
    <p>饿了么</p>
    <p>美团 <br/>饿了么 </p>
    </dd>
    <dt>C配送方式</dt>
    <dd>美团</dd>
    <dd>饿了么</dd>
    </dl>
显示结果

鼠标悬停在li标签上时显示一个弹框_HTML标签——列表标签相关推荐

  1. Axure 8 鼠标悬停在菜单文字上时文字颜色改变

    效果如下: 第一步:从原件库中拖拽垂直菜单到设计页面 第二步:选中菜单,然后点击鼠标悬停 第三步:在字体颜色的框中打钩选中,然后设置鼠标悬停后需要的颜色 第四步:在"选中的菜单项" ...

  2. python窗口消息处理_在Python中将鼠标光标悬停在某些内容上时显示消息

    您需要在< Enter>上设置绑定和事件. 注意:如果您选择弹出一个窗口(即:工具提示),请确保不要直接在鼠标下弹出窗口.会发生什么事情会导致离开事件,因为光标离开标签并进入弹出窗口.然后 ...

  3. java鼠标经过时变色_将鼠标悬停在标签上时,鼠标指针会变为手形

    您可能在某些浏览器中获得手形光标的原因是因为大多数浏览器中标签元素的主要用途之一是为表单输入元素提供可单击的描述 . 例如,这是 元素的典型用法: I agree to these terms 在大多 ...

  4. 存储卡插上时显示目录乱码打不开请问如何才能修复

    存储卡在使用的过程中会出现各种奇怪的错误,比如小编今天碰到的一个,打开分区提示目录乱码打不开!存储卡插上时显示目录乱码打不开请问如何才能修复 工具/软件:AornData软件 步骤1:先下载并解压程序 ...

  5. html的textarea标签的文本显示,文本框样式简单设置

    html的textarea标签的文本显示,文本框样式简单设置 后端传递数据如何在textarea标签的文本框内显示,如下. <textarea id="text" type= ...

  6. qt自定义按钮类,每个按钮自带一个右键弹出框,如何使同一时刻只显示一个弹出框

    提要 继承于QPushButton的自定义按钮类,其右键弹出一个弹框,创建多个这样的自定义按钮在窗口中,每一时刻只显示一个右键弹出框,避免同一时刻,多个按钮右键弹出弹出框后,未及时关闭弹出框导致的同一 ...

  7. win7系统的右键菜单只显示一个白色框不显示菜单项 解决办法

    如上图所示,桌面或其他大部分地方点击右键菜单,都只显示一个白色框,鼠标移上去才有菜单项看,并且效果很丑 解决办法: 计算机-右键-属性-高级-性能-设置-视觉效果-淡入淡出或滑动菜单到视图,将其前面的 ...

  8. ECharts地图,自定义map地图显示不同图标点,点击标点显示不同弹框

    ECharts地图点击标注显示不同弹框 使用的是湖北省js 可以自行更换 效果图 gitee下载地址 https://gitee.com/han-zihao/echarts

  9. echarts修改鼠标悬停在节点上时显示的内容,自定义鼠标悬停显示内容

    首先看一下效果,如下图所示: 代码部分: 1.在option对象下的tooltip对象中添加formatter函数,代码如下: var option = {tooltip: {trigger: 'it ...

最新文章

  1. 基于 OpenCV 的网络实时视频流传输
  2. 程序局部性原理的一些思考
  3. 浅谈如何防范电池事故
  4. PHPsymfony
  5. 使用java获取本机mac
  6. 【数字信号处理】基于DFT的滤波系列3之插值滤波(含MATLAB代码)
  7. 1215B. The Number of Products
  8. java方法报错_.setUndecorated 方法报错
  9. python之matplotlib详解
  10. mac php apache mysql 集成环境 的软件
  11. php创建目录规则,php创建目录功能
  12. 基于SSM框架的生源地助学贷款管理系统的设计与实现
  13. java读取zip文件损坏_java zip压缩文件损坏
  14. html+div+动画效果,CSS3效果:animate实现点点点loading动画效果(一)
  15. 2021-03-13 java八大基本数据类型
  16. csv,tsv,txt文件类型区别
  17. 一文搞懂Nginx如何配置Http、Https、WS、WSS!
  18. 【历史上的今天】10 月 12 日:C 语言之父逝世;西门子诞生;乔布斯推出 NeXT 电脑
  19. 锁屏状态下,看到歌手图片
  20. 1001 hzy 和zsl 的生存挑战

热门文章

  1. 电脑小写字母怎么切换_苹果电脑双系统如何切换?苹果电脑双系统切换方法
  2. 2017.10.22 诸神眷顾的幻想乡 失败总结
  3. noip2016的研究
  4. java shiro jwt_Springboot实现Shiro整合JWT的示例代码
  5. 严格对角占优矩阵特征值_二次型和特征值
  6. C#下实现的K-Means优化[1]-「离群点检测」
  7. Windows下openssl的下载安装和使用
  8. Unity的camera组件
  9. Algorithms Part 1-Question 2-QuickSort-快速排序算法
  10. QtCreator与catkin命令两种方式开发ROS程序(图示加代码)