HTML——列表标签

2023-10-29

使用场景:在网页中按照展示关联性的内容,如:新闻列表、排行榜、账单等。

特点:按照行的方式,整齐显示内容。

种类:无序列表、有序列表、自定义列表。

1.无序列表

<ul> 标签表示 HTML 页面中项目的无序列表,一般会以项目符号呈现列表项,而列表项使用 <li> 标签定义。

语法格式:

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

网页显示效果:

 

注意事项<ul></ul> 中只能嵌套 <li></li><li> 与 </li> 之间相当于一个容器,可以容纳所有元素

2.有序列表

在 HTML 标签中,<ol> 标签用于定义有序列表,列表排序以数字来显示,并且使用 <li> 标签来定义列表项

语法格式:

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

网页显示效果:

 

3.自定义列表

在 HTML 标签中, <dl> 标签用于定义描述列表(或定义列表),该标签会与 <dt> (定义项目/名字)和 <dd> (描述每一个项目/名字)一起使用。
使用场景:在网页的底部导航中通常会使用自定义列表实现,常用于对术语或名词进行解释和描述,定义列表的列表项前没有任何项目符号。

语法格式:

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

 注意事项:<dl></dl> 里面只能包含 <dt> 和 <dd>,<dt> 和 <dd>个数没有限制,经常是一个<dt> 对应多个<dd>,且列表项前没有任何项目符号。

网页显示效果:

 

 

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

HTML——列表标签 的相关文章

  • jQuery mobile 中的文本区域高度和宽度?

    我修复了 jQuery mobile 中文本区域元素的高度 并且在纵向中得到了完美的高度和宽度 但在横向中宽度没有放大 谁能帮我 提前致谢 HTML
  • 无法使用 BeautifulSoup4 (Python 3) 抓取特定表

    我想从 Ligue 1 足球网站上抓取一张表格 具体来说 该表包含有关卡片和裁判的信息 http www ligue1 com LFPStats stats arbitre competition D1 http www ligue1 co
  • 使用本地存储在从另一个表保存的 HTML TABLE 中打印 JSON,以便我在另一个页面上打印我的表

    在我的作业中 我必须使用用户输入中的数据并将数据保存在本地存储中 我必须以水平表格式将这些数据从本地存储打印到其他页面 为此 我编写了用于用户输入并将数据保存在本地存储中的代码 div p p div
  • HTML W3C 有效元素 - DIV 在 TD 内有效吗?

    我正在和一位同事争论 但找不到证据证明我们俩都是对的 我之前已经看过给定标签的有效元素列表 但只是无法再次找到它 有人能指出我正确的方向吗 我对 XHTML 很好奇 但分歧具体在于 DIV 标签在 HTML 4 01 中的 TD 标签内是否
  • 为什么我的交互式图像仅在 Internet Explorer 上出现故障?

    我的问题 我为自己制作了一个图像地图 交互式图像 它在 Chrome safari 和 Firefox 上完美运行 然而 当我在可怕的互联网浏览器上尝试它时 它真的很糟糕 这些小点应该扩展到更大的盒子中 在互联网浏览器上它要么不起作用 要么
  • 禁用允许文本选择的

    残疾人可以吗
  • 图像随机损坏(但刷新后加载)并显示“资源解释为图像但使用 MIME 类型 text/html 传输”

    我目前正在开发一个简单的 php 网站 问题是 我的整个网站中的图像 发生在所有 php 文件中 随机损坏并显示错误资源解释为图像 但以 MIME 类型 text html 传输但是 如果我尝试多次刷新页面 可以再次加载图像并且错误消失 我
  • 如何在数据表中colspan rowspan?

    I am trying to use colspan and rowspan attributes with jQuery Datatables where a product sku can span 2 rows and a week
  • 身体动画不流畅

    下面代码中的 spaceShip 在开始按住任何箭头键时移动并不顺利 它移动一步 冻结一瞬间 然后 平稳 地移动 怎样才能让它从一开始就顺利运转 而不是 冻结 My code
  • 引导导航栏菜单与文本重叠

    我使用最新版本的引导程序 当我调整屏幕浏览器的大小时 使用小切换按钮下拉导航栏时 导航栏会重叠页面上的文本 而不是向下推页面内容 我已经多次研究过这个问题 我尝试将 padding bottom 放在导航栏上 将 padding top 放
  • 如何在 select2 下拉列表中换行?

    我正在使用 select 2 下拉菜单 然后在其内容中显示一些长句子 我想在句子的正确位置添加换行符 但下拉菜单是自动调整的 For example the content of the dropdown right now looks l
  • Masonry - imagesLoaded - 不是函数

    Masonry and imagesLoaded应加载并正常工作 已经制作了一个类似的网站 并且可以正常运行 我不知道我的问题出在哪里 所以我希望你能看到问题所在 应该是少了点什么 在 Chrome Inspect 中 我收到以下错误 Un
  • socket.io 的良好初学者教程? [关闭]

    就目前情况而言 这个问题不太适合我们的问答形式 我们希望答案得到事实 参考资料或专业知识的支持 但这个问题可能会引发辩论 争论 民意调查或扩展讨论 如果您觉得这个问题可以改进并可能重新开放 访问帮助中心 help reopen questi
  • @media语法/可能的组合

    我见过其中一些 media print media screen handheld print projection media all media all and property value media screen and prope
  • 为什么我的淘汰单选按钮在另一个具有点击绑定的元素内时会失败?

    我有一个单选按钮列表 我想要点击 li 他们还检查单选按钮 这一切都有效 直到我放了一个name单选元素上的属性 然后我的代码停止工作 我的代码如下所示 ul li li ul li
  • Jquery 数据表列总和

    我只是参考一下这个链接 https datatables net examples advanced init footer callback html了解如何获取 jquery 数据表中的列总计 但我已经完成了一半的项目 我在html页面
  • 在 HTML5 画布中,如何用我选择的背景遮盖图像?

    我试图用画布来实现这一点 globalCompositeOperation 但没有运气 所以我在这里问 这里有类似的问题 但我没有在其中找到我的案例 我的画布区域中有图层 从下到上的绘制顺序 画布底座填充纯白色 fff 用fillRect
  • 刷新页面时保存用户的选择

    我目前有一个页面显示不同团队的数据 我有一些数据 用户可以单击使其处于 打开 或 关闭 状态 并为每个数据显示不同的图标 它基本上就像一个清单 只是没有物理复选框 我想记住哪些 复选框 已被选中 即使在用户刷新页面或关闭浏览器并稍后返回之后
  • 表格行未扩展到全宽

    我有一个表格 当我将表格的宽度设置为 100 并将表格行的宽度设置为 100 时 没有任何反应或宽度发生变化 Table Normal position relative display block margin 10px auto pad
  • CSS溢出文本显示在几行中,没有断字

    我有一些长文本显示在 div 中 该 div 具有固定的宽度和高度 我希望文本显示在几行上 作为 div 高度 并且句子单词不会中断 一行中的单词前缀和下一行中的继续 此外 我想在末尾添加省略号最后一句话 CSS white space n

随机推荐

  • android 注册页面实现

    自己动手做的第一个demo 简单的注册页面的实现 并且注册成功后返回注册信息 适用于android新手基本控件的使用 注册页面的实现 import android os Bundle import android app Activity
  • 如果确定游戏服务器位置,如果确定游戏服务器位置

    如果确定游戏服务器位置 内容精选 换一换 远程登录服务器出现蓝屏或黑屏 可能是由于explorer exe进程异常导致的桌面无法显示 这是由于Windows服务器的explorer exe进程异常导致的 explorer exe是Windo
  • 腾讯混元大模型:新一代人机环境系统智能的发展趋势

    近日 腾讯混元大模型亮相 该通用大语言模型具备强大的中文创作能力 复杂语境下的逻辑推理能力 以及可靠的任务执行能力 同时也可以作为基底模型 为不同产业场景构建专属应用 从可靠 成熟 自研和实用的底层逻辑来看 腾讯混元大模型其实是建立在人机环
  • 算法设计学习记录(一):G-S算法实现稳定匹配

    最近这几周在复习微机原理 不可避免地重燃了对硬件的兴趣 一度想要拿下一张树莓派玩玩 好在这东西不便宜 思来想去还是决定暂时放放 一直有在考虑自己未来的发展方向 自动驾驶还是交通运输 这对我来说是一个很难决定的事情 回过头来想 其实现在确实想
  • 解决 if you already hava 64-bit JDK installed,define a JAVA_HOME variable in Computer>System....

    启动Android studio 弹窗 提示如图 一般是修改studio64 exe vmoptions文件出差 例如我的studio64 exe vmoptions位于C Users 24359 AppData Roaming Googl
  • vue3+scss开启写轮眼

    vue3 scss开启写轮眼 一 相关技术 二 使用步骤 1 安装依赖 2 眼球 3 勾玉 4 旋转动画 5 综合 一 相关技术 采用vue3 vite scss的技术内容进行开发 二 使用步骤 1 安装依赖 代码如下 npm instal
  • vue3+ts+webpack 搭建+环境配置+路由

    一 搭建 vue js webpack的项目 1 vite vue cli 版本在 4 5 0 以上 我用的5 0 4 npm install g vue cli vue V 创建项目 vue create 项目名字 安装依赖运行项目 cd
  • CentOS7 Install nodejs & npm

    1 安装nodejs npm yum install y nodejs npm 2 n Interactively Manage Your Node js Versions npm install g n 安装提示 root localho
  • 如何让 git 使用我选择的编辑器来编辑提交消息?

    问 如何全局配置 git 以使用特定编辑器 例如 vim 来提交消息 答1 一个优秀的自由职业者 应该有对需求敏感和精准需求捕获的能力 而huntsbot com提供了这个机会 设置 Git 的默认编辑器 选一个 在你的 Git 配置中设置
  • msvcp140.dll缺失解决办法

    出现dll缺失 可以考虑如下情况 推荐使用修复功能 能解决大部分情况 如果是开发者 有可能是发布的debug版本 在其它电脑没环境 下面的是各版本对应版本号 推荐使用release版本 可以解决大部分情况 msvcp msvcr vcomp
  • Ubuntu安装solc编译环境步骤

    Ubuntu安装solc编译环境步骤 cmake装过程 安装Z3 安装Boost Solidity安装 Ethereum使用 更进一步的开发 cmake装过程 solc编译器需要的cmake版本要大于3 9 0 所以要安装高于这个版本的cm
  • 论文笔记:FeUdal Networks for Hierarchical Reinforcement Learning

    0 abstract introduction 这也是一篇分层强化学习的论文 分为两层 Manager 上层 设置抽象的goal 这个goal传递给Worker 和H DQN不同 这个goal是由Manager自己学出来的 或者说 FUN不
  • Linux 下系统调用的三种方法

    系统调用 System Call 是操作系统为在用户态运行的进程与硬件设备 如CPU 磁盘 打印机等 进行交互提供的一组接口 当用户进程需要发生系统调用时 CPU 通过软中断切换到内核态开始执行内核系统调用函数 下面介绍Linux 下三种发
  • redis 高级应用之二(Redis的持久化 和 消息的[pub/sub]发布和订阅)

    1 Redis的持久化机制 redis是个支持持久化的内存数据库 也就是说redis要经常把内存中的数据保存到硬盘中来保证持久化 redis持久化方式有两种 snapshotting 快照 也是默认方式 原理 默认redis是会以快照的形式
  • Apache Tomcat 漏洞复现

    文章目录 Apache Tomcat 漏洞复现 1 Tomcat7 弱密码和后端 Getshell 漏洞 1 1 漏洞描述 1 2 漏洞复现 1 3 漏洞利用 1 3 1 jsp小马 1 3 2 jsp大马 1 4 安全加固 2 Aapac
  • Mybatis多表联查的几种办法

    前言 开发过程中 对数据库多表连接查询是常规操作 Mybatis plus 在多表连接查询上提供了很好的支持 通常 表与表之间存在四种映射关系 一对一映射 多对一映射 一对多映射 多对多映射 在处理的过程中 多对一和一对一映射一般采用同一种
  • vb.net制作动态链接库(*.dll)

    dll制作专栏 关于vb net图像 视频处理的类库调用 大Mod制造者abfun的博客 CSDN博客 新建一个类库 我相信这不需要细讲了 dll有什么优点 第一 减少应用程序体积 但是单独的dll有时也会占用不少空间 第二 减少程序内存
  • 【Neo4j】第 7 章:社区检测和相似性措施

    大家好 我是Sonhhxg 柒 希望你看完之后 能对你有所帮助 不足请指正 共同学习交流 个人主页 Sonhhxg 柒的博客 CSDN博客 欢迎各位 点赞 收藏 留言 系列专栏 机器学习 ML 自然语言处理 NLP 深度学习 DL fore
  • Java BufferedWriter.write()具有什么功能呢?

    转自 Java BufferedWriter write 具有什么功能呢 BufferedWriter write 功能说明 bufferedWriter write 写入数据到文件中 由于缓冲区大小有限 需调用flush方法及时刷新缓冲区
  • HTML——列表标签

    使用场景 在网页中按照行展示关联性的内容 如 新闻列表 排行榜 账单等 特点 按照行的方式 整齐显示内容 种类 无序列表 有序列表 自定义列表 1 无序列表 ul 标签表示 HTML 页面中项目的无序列表 一般会以项目符号呈现列表项 而列表