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

【HTML】标签学习(下.2)

(大家好哇,今天我们将继续来学习HTML(下.2)的相关知识,大家可以在评论区进行互动答疑哦~加油!💕)

目录

二.列表标签

2.1 无序列表(重点) 

 2.2有序列表(理解) 

2.3 自定义列表(重点) 

2.4 列表总结 


二.列表标签

表格是用来显示数据的,那么列表就是用来布局的。

列表最大的特点就是整齐,整洁,有序,它做为布局会更加自由和方便。

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

2.1 无序列表(重点

<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来没置。 

 2.2有序列表(理解) 

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

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

  ...
<ol> 

 特点:

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

2.3 自定义列表(重点

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

<dl>

  <dt> 名词1 </dt>

  <dt> 名词2 </dt>

  <dt> 名词3 </dt>

  ...

</dl>

 特点:

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

2.4 列表总结 

标签定义说明
<ul></ul>无序标签里面只能包含li,没有顺序,使用较多,li里可以包含任何标签
<ol></ol>有序标签里面只能包含li,有顺序,使用较少,li里可以包含任何标签
<dl></dl>自定义列表里面只能包含dt和dd, dt和dd里可以放任何标签

(今日分享暂时到此为止啦!为不断努力的自己鼓鼓掌吧。今日文案分享:若你决定灿烂,则山无遮海无拦。

相关文章:

【HTML】标签学习(下.2)

&#xff08;大家好哇&#xff0c;今天我们将继续来学习HTML&#xff08;下.2&#xff09;的相关知识&#xff0c;大家可以在评论区进行互动答疑哦~加油&#xff01;&#x1f495;&#xff09; 目录 二.列表标签 2.1 无序列表(重点) 2.2有序列表(理解) 2.3 自定义列表(重点…...

os模块篇(十一)

文章目录 os.chdir(path)os.chmod(path, mode, *, dir_fdNone, follow_symlinksTrue)os.chown(path, uid, gid, *, dir_fdNone, follow_symlinksTrue)os.getcwd()os.getcwdb()os.lchflags(path, flags)os.lchmod(path, mode)os.lchown(path, uid, gid) os.chdir(path) os.chdi…...

编译amd 的 amdgpu 编译器

1,下载源码 git clone --recursive https://github.com/ROCm/llvm-project.git 2, 配置cmake cmake -G "Unix Makefiles" ../llvm \ -DLLVM_ENABLE_PROJECTS"clang;clang-tools-extra;compiler-rt" \ -DLLVM_BUILD_EXAMPLESON …...

github 多个账号共享ssh key 的设置方法

确认本机是否已有ssh key 首先确认自己系统内有没有 ssh key。 bash复制代码cd ~/.ssh ls *.pub # 列出所有公钥文件id_rsa.pub若有&#xff0c;确认使用当前 key 或者生成新 key&#xff0c;若没有&#xff0c;生成新 key。由于我需要登录两个帐号&#xff0c;所以在已经存在…...

dm8修改sysdba用户的密码

1 查看达梦数据库版本 SQL> select * from v$version;LINEID BANNER ---------- --------------------------------- 1 DM Database Server 64 V8 2 DB Version: 0x7000c 3 03134283904-20220630-163817-200052 …...

基于boost准标准库的搜索引擎项目

零 项目背景/原理/技术栈 1.介绍boost准标准库 2.项目实现效果 3.搜索引擎宏观架构图 这是一个基于Web的搜索服务架构 客户端-服务器模型&#xff1a;采用了经典的客户端-服务器模型&#xff0c;用户通过客户端与服务器交互&#xff0c;有助于集中管理和分散计算。简单的用户…...

语言模型进化史(下)

由于篇幅原因&#xff0c;本文分为上下两篇&#xff0c;上篇主要讲解语言模型从朴素语言模型到基于神经网络的语言模型&#xff0c;下篇主要讲解现代大语言模型以及基于指令微调的LLM。文章来源是&#xff1a;https://www.numind.ai/blog/what-are-large-language-models 四、现…...

设计模式之旅:工厂模式全方位解析

简介 设计模式中与工厂模式相关的主要有三种&#xff0c;它们分别是&#xff1a; 简单工厂模式&#xff08;Simple Factory&#xff09;&#xff1a;这不是GoF&#xff08;四人帮&#xff0c;设计模式的开创者&#xff09;定义的标准模式&#xff0c;但被广泛认为是工厂模式的…...

大数据时代的生物信息学:挖掘生命数据,揭示生命奥秘

在当今科技日新月异的时代&#xff0c;大数据如同一座蕴藏无尽宝藏的矿山&#xff0c;而生物信息学则是那把锐利的探矿锤&#xff0c;精准有力地敲击着这座“生命之矿”&#xff0c;揭示出隐藏在其深处的生命奥秘。随着基因测序技术的飞速进步与广泛应用&#xff0c;生物医学领…...

微信小程序开发【从入门到精通】——页面导航

&#x1f468;‍&#x1f4bb;个人主页&#xff1a;开发者-曼亿点 &#x1f468;‍&#x1f4bb; hallo 欢迎 点赞&#x1f44d; 收藏⭐ 留言&#x1f4dd; 加关注✅! &#x1f468;‍&#x1f4bb; 本文由 曼亿点 原创 &#x1f468;‍&#x1f4bb; 收录于专栏&#xff1a…...

嵌入式|蓝桥杯STM32G431(HAL库开发)——CT117E学习笔记15:PWM输出

系列文章目录 嵌入式|蓝桥杯STM32G431&#xff08;HAL库开发&#xff09;——CT117E学习笔记01&#xff1a;赛事介绍与硬件平台 嵌入式|蓝桥杯STM32G431&#xff08;HAL库开发&#xff09;——CT117E学习笔记02&#xff1a;开发环境安装 嵌入式|蓝桥杯STM32G431&#xff08;…...

SQLite中的隔离(八)

返回&#xff1a;SQLite—系列文章目录 上一篇&#xff1a;SQLite版本3中的文件锁定和并发(七&#xff09; 下一篇&#xff1a;SQLite 查询优化器概述&#xff08;九&#xff09; 数据库的“isolation”属性确定何时对 一个操作的数据库对其他并发操作可见。 数据库连接之…...

Zabbix6 - Centos7部署Grafana可视化图形监控系统配置手册手册

Zabbix6 - Centos7部署Grafana可视化图形监控系统配置手册手册 概述&#xff1a; Grafana是一个开源的数据可视化和监控平台。其特点&#xff1a; 1&#xff09;丰富的可视化显示插件&#xff0c;包括热图、折线图、饼图&#xff0c;表格等&#xff1b; 2&#xff09;支持多数据…...

Electron无边框自定义窗口拖动

最近使用了electron框架&#xff0c;发现如果自定义拖动是比较实用的;特别是定制化比较高的项目&#xff0c;如果单纯的使用-webkit-app-region: drag;会让鼠标事件无法触发; 过程中发现问题&#xff1a; 1.windows缩放不是100%后设置偏移界面会缩放&#xff0c;感觉像吹起的气…...

vue3+echarts:echarts地图打点显示的样式

colorStops是打点的颜色和呼吸灯、label为show是打点是否显示数据、rich里cnNum是自定义的过滤模板用来改写显示数据的样式 series: [{type: "effectScatter",coordinateSystem: "geo",rippleEffect: {brushType: "stroke",},showEffectOn: &quo…...

vue3从精通到入门7:ref系列

Vue 3 的 Ref 是一个集合&#xff0c;包括多个与响应式引用相关的功能&#xff0c;这些功能共同构成了 Vue 3 响应式系统的重要组成部分。以下是更全面的介绍&#xff1a; 1.ref ref 接受一个内部值并返回一个响应式且可变的 ref 对象。这个对象具有一个 .value 属性&#xf…...

灵动翻译音频文件字幕提取及翻译;剪映视频添加字幕

参考&#xff1a;视频音频下载工具 https://tuberipper.com/21/save/mp3 1、灵动翻译音频文件字幕提取及翻译 灵动翻译可以直接chorme浏览器插件安装&#xff1a; 点击使用&#xff0c;可以上传音频文件 上传后自动翻译&#xff0c;然后点击译文即可翻译成中文&#xff0c;…...

在Gitee上创建新仓库

1. 登录到你的Gitee账户。 2. 在Gitee首页或仓库页面&#xff0c;点击“新建仓库”按钮。 3. 填写仓库名称、描述&#xff08;可选&#xff09;、选择仓库是否公开等信息。 4. 点击“创建仓库”按钮完成创建。 2. 本地代码连接到远程仓库 假设你已经在本地有一个项目&#…...

linux 配置NFS

1、NFS简介 NFS 是Network File System的缩写&#xff0c;即⽹络⽂件系统。NFS 的基本原则是“容许不同的客户 端及服务端通过⼀组RPC分享相同的⽂件系统”&#xff0c;它是独⽴于操作系统&#xff0c;容许不同硬件及操作 系统的系统共同进⾏⽂件的分享。 NFS在⽂件传送或信息…...

大疆御Pro(一代)更换晓spark摄像头评测

御Pro是17年的老机器&#xff0c;除了摄像头有点拉跨&#xff0c;续航、抗风、操作性在大疆民用系列里面算是数得上的。 机缘巧合&#xff0c;手头有几个御的空镜头&#xff08;里面的芯片已经去掉了&#xff09;&#xff0c;还有几个晓的摄像头&#xff08;只有芯片&#xff0…...

【小技巧】gitlab怎么在每次git push的时候不用输入账号密码?使用 SSH 密钥 的原理是什么?

1. gitlab怎么在每次git push的时候不用输入账号密码&#xff1f; 要在每次执行 git push 时避免输入 GitLab 的账号和密码&#xff0c;你可以通过以下几种方法实现&#xff1a; 使用 SSH 密钥&#xff1a;这是最常用的方法&#xff0c;通过生成 SSH 密钥并将其添加到 GitLab …...

笔记: JavaSE day15 笔记

第十五天课堂笔记 数组 可变长参数★★★ 方法 : 返回值类型 方法名(参数类型 参数名 , 参数类型 … 可变长参数名){}方法体 : 变长参数 相当于一个数组一个数组最多只能有一个可变长参数, 并放到列表的最后parameter : 方法参数 数组相关算法★★ 冒泡排序 由小到大: 从前…...

【Golang星辰图】数据处理的航海家:征服数据海洋的航行工具

数据处理的建筑师&#xff1a;用Go语言中构建稳固的数据分析建筑物 前言 数据处理和分析是现代计算机科学中的关键任务之一&#xff0c;而Go语言作为一门现代化的编程语言&#xff0c;也需要强大的数据处理和分析库来支持其在这一领域的应用。本文将介绍几款优秀的数据处理和…...

容器网络测试关键问题

资料问题 主要影响客户体验, 低级问题. 类似于单词拼写错误, 用词有歧义&#xff0c;等。 另一点是&#xff0c;我们的用户文档&#xff0c;主要偏向于技术向的描述&#xff0c;各种参数功能罗列。友商有比较好的最佳实践操作说明。我们后面也会都增加这样的最佳实践。golang o…...

6、Cocos Creator 2D 渲染组件:​Sprite 组件​

Sprite 组件 Sprite&#xff08;精灵&#xff09;是 2D/3D 游戏最常见的显示图像的方式&#xff0c;在节点上添加 Sprite 组件&#xff0c;就可以在场景中显示项目资源中的图片。 属性功能说明Type渲染模式&#xff0c;包括普通&#xff08;Simple&#xff09;、九宫格&#x…...

算法沉淀——动态规划篇(子数组系列问题(上))

算法沉淀——动态规划篇&#xff08;子数组系列问题&#xff08;上&#xff09;&#xff09; 前言一、最大子数组和二、环形子数组的最大和三、乘积最大子数组四、乘积为正数的最长子数组长度 前言 几乎所有的动态规划问题大致可分为以下5个步骤&#xff0c;后续所有问题分析都…...

通知中心架构:打造高效沟通平台,提升信息传递效率

随着信息技术的快速发展&#xff0c;通知中心架构作为一种关键的沟通工具&#xff0c;正逐渐成为各类应用和系统中必不可少的组成部分。本文将深入探讨通知中心架构的意义、设计原则以及在实际场景中的应用。 ### 什么是通知中心架构&#xff1f; 通知中心架构是指通过集中管…...

【Arduino使用SNR9816TTS模块教程】

【Arduino使用SNR9816TTS模块教程】 1.前言2. 硬件连接3. Arduino代码3.1 环境配置3.2 Arduino源码 4. 调试步骤5. 总结 1.前言 在今天的教程中&#xff0c;我们将详细介绍如何使用Arduino IDE开发ESP32C3与汕头新纳捷科技有限公司生产的SNR9816TTS中文人声语音合成模块进行交…...

牛客练习赛123(A,B,C,D)

牛客挑战赛&#xff0c;练习赛和小白月赛周赛不是一种东西。这玩意跟CF的div12差不多难度。而且找不到题解。所以决定不等题解补题了&#xff0c;直接写题解了。 比赛链接 光速签到下班&#xff0c;rk。感觉E可能能补掉&#xff0c;看情况补吧。 B题感觉之前考了两次&#x…...

docker部署-RabbitMq

1. 参考 RabbitMq官网 docker官网 2. 拉取镜像 这里改为自己需要的版本即可&#xff0c;下面容器也需要同理修改 docker pull rabbitmq:3.12-management3. 运行容器 docker run \ --namemy-rabbitmq-01 \ -p 5672:5672 \ -p 15672:15672 \ -d \ --restart always \ -…...

网站开发怎么谈/seo超级外链工具免费

爬取网站时经常会遇到需要登录的问题&#xff0c;这是就需要用到模拟登录的相关方法。python提供了强大的url库&#xff0c;想做到这个并不难。这里以登录学校教务系统为例&#xff0c;做一个简单的例子。 首先得明白cookie的作用&#xff0c;cookie是某些网站为了辨别用户身份…...

可以做哪些有趣的网站/百度搜索最多的关键词

经过一番调查&#xff0c;我发现这是因为Vue3中的event对象已经升级为全新的EventEmitter&#xff0c;与Vue2中的event对象有所不同&#xff0c;导致了这个问题的出现。如果你也遇到了同样的问题&#xff0c;不要担心&#xff0c;下面我来给大家分享一下解决方法。 &#xff0…...

wordpress安装模版500/如何做网页设计

一、官网下载&#xff1a; 先去官网下载安装包&#xff1a; postman的官网 二、下载后&#xff0c;创建安装包&#xff0c;postman会自动安装成功。直接打开即可。 三、如果没有账号&#xff0c;退出再次登录即可...

微网站后台录入/今日热点新闻事件2022

一、类加载器 ClassLoader 能根据需要将 class 文件加载到 JVM 中&#xff0c;它使用双亲委托模型&#xff0c;在加载类的时候会判断如果类未被自己加载过&#xff0c;就优先让父加载器加载。另外在使用 instanceof 关键字、equals()方法、isAssignableFrom()方法、isInstance(…...

windows 做网站服务器/百度关键词优化是什么意思

%>_<% 今天不是一般的被虐啊&#xff01;&#xff01;&#xff01; 先是高高兴兴的在发展中学校A了一题&#xff0c;发现没人做&#xff0c;过来HDU就悲剧了…… Bonsai Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)Total S…...

电子商务网站建设影响因素/新品上市的营销方案

apache flinkApache flink是下一代大数据工具&#xff0c;也称为4G大数据。 这是真正的流处理框架&#xff08;不会将流切成小批&#xff09;。 Flink的内核&#xff08;核心&#xff09;是流式运行时&#xff0c;它还提供分布式处理&#xff0c;容错等功能。Flink以一致的高速…...