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

news/2024/7/26 11:18:01/文章来源:https://blog.csdn.net/2301_79341065/article/details/137156605

(大家好哇,今天我们将继续来学习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里可以放任何标签

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

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

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

相关文章

基于多数据源融合的医疗知识图谱框架构建研究

基于多数据源融合的医疗知识图谱框架构建研究 提出背景医学数据源医学数据获取方法知识图谱的构建 提出背景 论文&#xff1a;基于多数据源融合的医疗知识图谱框架构建研究 本文以医疗领域的实际应用需求为出发点&#xff0c;从医疗大数据获取、医疗实体及关系标注、医疗实体…

怎么加密文件夹?文件夹加密软件有哪些?

文件夹加密是保护文件夹数据安全的重要手段&#xff0c;可以有效地避免文件夹数据泄露。那么&#xff0c;文件夹加密软件有哪些呢&#xff1f;下面我们就一起来了解一下吧。 文件夹加密超级大师 文件夹加密超级大师作为一款专业的文件夹加密软件&#xff0c;支持五种文件夹加密…

网页实现-基于深度学习的车型识别与计数系统(YOLOv8/v7/v6/v5代码+训练数据集)

摘要&#xff1a;本文深入研究了基于YOLOv8/v7/v6/v5的车型识别与计数&#xff0c;核心采用YOLOv8并整合了YOLOv7、YOLOv6、YOLOv5算法&#xff0c;进行性能指标对比&#xff1b;详述了国内外研究现状、数据集处理、算法原理、模型构建与训练代码&#xff0c;及基于Streamlit的…

Java字符串、集合的基本使用

一、字符串 1.构造字符串 使用直接赋值获取一个字符串对象 String s1 "abc"; 使用new的方法获取一个字符串对象 //空参构造&#xff1a;获取空白的字符串对象 String s2 new String();//带参数的构造 String s3 new String("abc"); 传递一个字符数组&am…

深入核心招聘场景,用友大易帮助健合集团解决「渠道、效率、体验」三件事

自1999年成立以来&#xff0c;健合集团一直致力于婴幼儿营养与护理、成人自然健康营养与护理、以及宠物营养与护理三大核心领域。作为全球高端家庭营养及护理品牌的佼佼者&#xff0c;健合集团始终秉持「让人们更健康更快乐」的企业理念&#xff0c;这不仅体现在产品和服务上&a…

MP4文件中h264的 SPS、PPS获取

MP4文件中h264的SPS、PPS获取 如下图所示&#xff0c;为avcC 1 【参考依据】ISO/IEC 14496-15 2 【综述】在H264中&#xff0c;SPS和PPS存在于NALU header中&#xff0c;而在MP4文件中&#xff0c;SPS和PPS存在于AVCDecoderConfigurationRecord&#xff0c; 首先要定位avcC. …

HTML1:html基础

HTML 冯诺依曼体系结构 运算器 控制器 存储器 输入设备 输出设备 c/s(client客户端) 客户端架构软件 需要安装,更新麻烦,不跨平台 b/s(browser浏览器) 网页架构软件 无需安装,无需更新,可跨平台 浏览器 浏览器内核: 处理浏览器得到的各种资源 网页: 结构 HTML(超…

Redis 全景图(1)--- 关于 Redis 的6大模块

这是我第一次尝试以长文的形式写一篇 Redis 的总结文章。这篇文章我想写很久了&#xff0c;只是一直碍于我对 Redis 的掌握没有那么的好&#xff0c;因此迟迟未动笔。这几天&#xff0c;我一直在看各种不同类型的 Redis 文章&#xff0c;通过阅读这些文章&#xff0c;引发了我对…

zabbix主动发现,注册及分布式监控

主动发现 结果 主动注册 结果 分布式监控 服务机&#xff1a;132 代理机&#xff1a;133 客户端&#xff1a;135 代理机 数据库赋权&#xff1a; 代理机配置 网页上配置代理 客户端配置 网页上配置主机 重启代理机服务 网页效果

算法学习——LeetCode力扣图论篇1(797. 所有可能的路径、200. 岛屿数量、695. 岛屿的最大面积)

算法学习——LeetCode力扣图论篇1 797. 所有可能的路径 797. 所有可能的路径 - 力扣&#xff08;LeetCode&#xff09; 描述 给你一个有 n 个节点的 有向无环图&#xff08;DAG&#xff09;&#xff0c;请你找出所有从节点 0 到节点 n-1 的路径并输出&#xff08;不要求按特…

使用Bitmaps位图实现Redis签到

系列文章目录 文章目录 系列文章目录前言前言 前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家。点击跳转到网站,这篇文章男女通用,看懂了就去分享给你的码吧。 Redis提供了Bitmaps这个“数据类型”可以实现对位的操作: (1) Bitmaps…

springcloud基本使用四(Feign远程调用)

springcloud创建两个子项目order-server和user-server具体数据信息请查看springcloud前三章 order-server向user-server远程调用数据 order-server引入依赖&#xff1a; <dependency><groupId>org.springframework.cloud</groupId><artifactId>sprin…

pygwalker+streamlit python看板库使用体验

算作前言 在 B 站看到 pygwalker 的介绍&#xff0c;很感兴趣。 是一个类似于简化版的 tableau 工具。 原版 docs PyGWalker 文档 – Kanaries 搭建看板 直接结合 streamlit 使用&#xff0c;streamlit 真的神器。 import pygwalker as pyg import pandas as pd import str…

HarmonyOS 应用开发之启动/停止本地PageAbility

启动本地PageAbility PageAbility相关的能力通过featureAbility提供&#xff0c;启动本地Ability通过featureAbility中的startAbility接口实现。 表1 featureAbility接口说明 接口名接口描述startAbility(parameter: StartAbilityParameter)启动Ability。startAbilityForRes…

Object类的方法-(重点)equals()

根据JDK源代码及Object类的API文档&#xff0c;Object类当中包含的方法有11个。这里我们主要关注其中的6个&#xff1a; 1、(重点)equals() &#xff1a; 基本类型比较值:只要两个变量的值相等&#xff0c;即为true。 int a5; if(a6){…} 引用类型比较引用(是否指向同一个对象…

【Flume】尚硅谷学习笔记

实时监控目录下多个新文件 本案例是将虚拟机本地文件进行实时监控&#xff0c;并将上传的数据实时上传到HDFS中。 TAILDIR SOURCE【实现多目录监控、断点续传】 监视指定的文件&#xff0c;一旦检测到附加到每个文件的新行&#xff0c;就几乎实时地跟踪它们。如果正在写入新行…

空间数据结构(四叉树,八叉树,BVH树,BSP树,K-d树)

下文参考&#xff1a;https://www.cnblogs.com/KillerAery/p/10878367.html 游戏编程知识课程 - 四分树(quadtree)_哔哩哔哩_bilibili 利用空间数据结构可以加速计算&#xff0c;是重要的优化思想。空间数据结构常用于场景管理&#xff0c;渲染&#xff0c;物理&#xff0c;游…

CSS使用clip-path实现元素动画

前言&#xff1a; 在日常开发当中&#xff0c;如果想要开发多边形&#xff0c;一般都需要多个盒子或者伪元素的帮助&#xff0c;有没有一直办法能只使用一个盒子实现呢&#xff1f; 有的&#xff1a;css裁剪 目录 前言&#xff1a; clip-path到底是什么&#xff1f; clip-pa…

基于springboot+vue+Mysql的企业客户信息反馈平台

开发语言&#xff1a;Java框架&#xff1a;springbootJDK版本&#xff1a;JDK1.8服务器&#xff1a;tomcat7数据库&#xff1a;mysql 5.7&#xff08;一定要5.7版本&#xff09;数据库工具&#xff1a;Navicat11开发软件&#xff1a;eclipse/myeclipse/ideaMaven包&#xff1a;…

Windows 电脑麦克风 自动启用/禁用 小玩具!

WinMicrophone Windows 系统的 麦克风设备&#xff08;启用/禁用&#xff09;切换驱动&#xff01;它是小巧且快速的&#xff0c;它能够自动的检测并切换麦克风的情况。 您可以在软件包仓库中找到发布版本的exe包&#xff0c;无需安装&#xff01;其能够大大增大您在Windows中…