无序列表标签<ul>和<li>

news2024/11/20 13:41:38

HTML5中提供了3种列表。

无序列表

无序列表是没有刻意顺序的列表。

比如我们如果想去超市买东西,想买的东西又比较多,为了避免忘记漏买某些东西,就会列一个购物清单,购物清单就是一个无序列表,因为要买的东西只要没有遗漏就好,不需要给它排列顺序。

<ul>标签和<li>标签

无序列表使用<ul></ul>标签,每个列表项都是<li></li>标签。

无序列表的英文单词是unordered list,英文缩写就是ul,列表项的英文单词是list item,所以英文缩写就是是li。

ul标签和li标签可以共同实现一个无序列表。比如你的购物清单上面有面包、牛奶、鸡蛋、水果这4样东西,无序列表就可以这样写:

在浏览器上的显示效果,默认会在每一个列表项的前面,带一个黑色的小圆点,效果如下:

父子组合标签

无序列表是一个父子组合标签。其中,ul标签是父标签,li标签是子标签,li标签是嵌套在ul标签里面的。ul标签和li标签是嵌套组合在一起使用的,不能单独使用。也就是说要实现一个无序列表,ul和li标签是同时成组出现的。

之前我们了解的div标签,它作为一个盒子、容器,里面可以很自由的嵌套各种其他标签。但是对于无序列表,ul标签和li标签是紧密相关的,ul标签里面,只能固定的嵌套li标签。

注意:

1、<li>标签不能单独使用。

<li>必须放到无序列表标签<ul>或者有序列表标签<ol>中。li标签只能作为别的标签的子标签,它自己是不能独当一面,单独使用的。

比如单独几个li标签:

这样的写法是错误的。

2、<ul>标签的字标签只能是<li>。

HTML规定,<ul>标签的子标签必须是<li>,绝对不能出现任何其他的标签。

比如下面的写法:

这种写法,肯定是想给这个列表清单添加一个标题,所以使用了h1标签,但是这种写法是完全错误的,它已经违反了HTML的规定。

如果你就是想给这个清单添加一个标题呢?那就可以把这个h1标签写到ul标签的外面:

这样写就是符合HTML规定的。

3、<li>标签中可以放其他任何标签。

HTML5规定,<li>标签是容器,它的内部是可以放置任何其他标签的。

比如:

这样写是合法的。

同样的,<li>标签中,你也可以写任何h系列标签。

但是你把<p>标签写到<li>标签的外面、作为<ul>的直接子标签是错误的。

注意代码的正确缩进

当HTML标签形成嵌套的时候,必须注意代码的正确嵌套(按tab键)。

正确缩进之后,代码要表达的意思就一目了然。

接下来你可以打开vscode编辑器,在里面写一个小demo。

<!DOCTYPE html><htmllang="en"><head>
<metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0">
<title>Doc vcncn.cn</title></head>
<body><h1>购物清单</h1>
<ul><li>面包</li>
<li>牛奶<p>牛奶要买脱脂或者低脂的</p></li>
<li>鸡蛋</li>
<li>咖啡</li>
<li>水果</li>
</ul>
</body>
</html>

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

如何为博客选择目标受众(+例子)

要创建免费网站和博客&#xff1f;从易服客建站平台开始 500M免费空间&#xff0c;可升级为20GB电子商务网站 创建免费网站 您是否正在寻找为您的博客选择目标受众的最佳实践&#xff1f; 选择目标受众可以让您创建更好的内容&#xff0c;引起用户的共鸣。这有助于您获得更…

[学习笔记]解决因C#8.0的语言特性导致EFCore实体类型映射的错误

今天下午在排查一个EF问题时&#xff0c;遇到了个很隐蔽的坑&#xff0c;特此记录。 问题 使用ef执行Insert对象到某表时报错&#xff0c;此对象的Address为空&#xff1a; 不能将值 NULL 插入列 Address&#xff0c;表 dbo.xxx&#xff1b;列不允许有 Null 值。INSERT 失败。…

基于云服务器的博客和靶场搭建-经验教训

搭这两个东西还是走了很多弯路 我就不给你们讲方法过程了&#xff0c;直接参考我给的链接&#xff0c;我主要说经验教训 博客搭建参考&#xff1a;https://zhuanlan.zhihu.com/p/37896471 靶场搭建参考&#xff1a;https://zhuanlan.zhihu.com/p/86409304 https://www.free…

LAMP搭建Discuz

文章目录 一、关闭防火墙二、安装apache三、安装Mysql四、安装PHP五、安装Discuz 一、关闭防火墙 [rootlocalhost ~]# systemctl status firewalld.service还要关闭selinux&#xff0c;要不然后面web页安装Discuz时会过不去。 [rootlocalhost ~]# setenforce 0编辑 /etc/seli…

堆排序——我欲修仙(功法篇)

个人主页&#xff1a;【&#x1f60a;个人主页】 系列专栏&#xff1a;【❤️我欲修仙】 学习名言&#xff1a;学习和研究好比爬梯子&#xff0c;要一步一步地往上爬&#xff0c;企图一脚跨上四五步&#xff0c;平地登天&#xff0c;那就必须会摔跤了。——华罗庚 系列文章目录…

国产游戏引擎,竟然用来搞民航

​本文源自量子位 | 公众号 QbitAI 只是给飞行员做个“装备”&#xff0c;竟然突破了国内民用航空领域的一大技术难题&#xff1f;&#xff01; 这是一群游戏技术开发者的真实经历。 他们用自研游戏引擎开发了一个飞行模拟软件&#xff0c;能够第一视角模拟飞行员起飞、着陆…

Html中使用jquery通过Ajax请求WebService接口以及跨域问题解决

场景 VS2019新建WebService/Web服务/asmx并通过IIS实现发布和调用&#xff1a; VS2019新建WebService/Web服务/asmx并通过IIS实现发布和调用_霸道流氓气质的博客-CSDN博客 在上面实现发布WebService的基础上&#xff0c;怎样在html中通过jquery对接口发起 请求和解析数据。…

【航空和卫星图像中检测建筑物】使用gabor特征和概率的城市区域和建筑物检测研究(Matlab代码实现)

&#x1f4a5;&#x1f4a5;&#x1f49e;&#x1f49e;欢迎来到本博客❤️❤️&#x1f4a5;&#x1f4a5; &#x1f3c6;博主优势&#xff1a;&#x1f31e;&#x1f31e;&#x1f31e;博客内容尽量做到思维缜密&#xff0c;逻辑清晰&#xff0c;为了方便读者。 ⛳️座右铭&a…

领域驱动设计DDD架构解析和绘图模板分享

DDD整洁架构 DDD整洁架构为了解决强调用的关系&#xff0c;出现了洋葱架构&#xff08;六边形&#xff09;架构&#xff0c;就是为了实现依赖倒置 它的思想就是把领域模型放到核心的位置&#xff0c;领域模型是独立的&#xff0c;不会直接强依赖其他层&#xff0c;而通过适配…

mmtrack mmdet mmcv环境安装 版本匹配 2023.5.18

一、参考官网&#xff1a; https://mmtracking.readthedocs.io/zh_CN/latest/install.html# mmtracking&#xff0c;mmcv&#xff0c;mmdetection版本匹配关系&#xff1a; MMTracking versionMMCV versionMMDetection versionmastermmcv-full>1.3.17, \<2.0.0MMDetec…

100 个 Go 错误以及如何避免:9~12

协议&#xff1a;CC BY-NC-SA 4.0 译者&#xff1a;飞龙 本文来自【OpenDocCN 饱和式翻译计划】&#xff0c;采用译后编辑&#xff08;MTPE&#xff09;流程来尽可能提升效率。 真相一旦入眼&#xff0c;你就再也无法视而不见。——《黑客帝国》 九、并发实践 本章涵盖 防止 …

vue3的学习【超详细】

目录 一、vue3的优点1、vue3的优点 二、常用的API1、setup&#xff08;Composition API&#xff09;2、生命周期&#xff08;Composition API&#xff09;3、ref函数和reactive函数用法和区别&#xff08;Composition API&#xff09;1、ref2、reactive3、ref和reactive的区别 …

linux + ros 使用 catkin 从源码编译安装并运行 rocon_rtsp_camera_relay 订阅 rtsp 视频流

1. rocon_rtsp_camera_relay 介绍 最主要的功能在于把相机的 rtsp 视频流 转换为 ros topic 发布出来&#xff0c;使其他节点可以通过订阅的形式获取视频流数据。 2. 编译安装 注&#xff1a;官网的安装命令 sudo apt-get install ros-<distro>-rocon-rtsp-camera-rel…

leetcode 1557. Minimum Number of Vertices to Reach All Nodes(到达所有顶点的最少顶点集)

给出一个有向无环图&#xff08;DAG&#xff09;&#xff0c;顶点有n个&#xff1a;0&#xff5e;n - 1, 边[from, to]为从顶点from到to的边。 找出最小的顶点集合&#xff0c;从这些顶点出发能到达图中的所有顶点&#xff08;集合里不一定每个点都能到达所有顶点&#xff0c;而…

kettle——处理缺失值

目录 一、删除缺失值 1、文本文件输入 2、字段选择 3、过滤记录 4、输出excel文件 5、运行 二、填充缺失值 1、添加文件 2、过滤记录 3、替换NULL值 4、合并记录 5、替换NULL值2 6、字段选择 7、Excel输出 8、运行并查看执行结果 一、删除缺失值 1、文本文件输入…

MMOE - 经典多任务模型(谷歌)

文章目录 1、动机&#xff1a;2、模型结构&#xff1a; Modeling Task Relationships in Multi-task Learning with Multi-gate Mixture-of-Expertsmmoe: Multi-gate Mixture-of-Expertsmmoe由谷歌发表在KDD-2018【和阿里的ESMM同年发表&#xff0c;SIGIR-2018】&#xff1b;模…

华为手环8添加门禁卡操作指导

不得不说&#xff0c;华为基于手机/手环NFC和蓝牙等技术应用&#xff0c;结合门禁卡灵活、安全、便利的优势&#xff0c;给社区场景提供更优质和更多样的技术支持与服务&#xff0c;为广大用户创造美好的数字化生活体验。 目前华为手环8支持模拟市面上未经加密过的、频率为13.5…

服务发现原理与grpc源码解析

一 服务发现基础概念 为什么需要服务发现 在微服务架构中&#xff0c;在生产环境中服务提供方都是以集群的方式对外提供服务&#xff0c;集群中服务的IP随时都可能发生变化&#xff0c;如服务重启&#xff0c;发布&#xff0c;扩缩容等&#xff0c;因此我们需要及时获取到对应…

ThreadLocal使用和原理

ThreadLocal是线程本地变量&#xff0c;用来解决并发下数据隔离性的问题&#xff0c;不能解决共享。 他可以将一个变量拷贝的线程内&#xff0c;线程调用时再线程内进行使用&#xff0c;相当于给每个线程复制一个副本供各个线程使用。 ThreadLocal简单使用 他的目的很简单&a…

Unity用AI制作天空盒,并使用,详细图文教程

Unity用AI制作天空盒&#xff0c;并使用&#xff0c;详细图文教程 效果AI制作使用总结版权声明 效果 先上我自己做的效果 AI制作 首先登录AI制作的网站&#xff0c;打开就可以用&#xff0c;不需要登录 这是网址&#xff1a;https://skybox.blockadelabs.com/ 1.创建新的 2…