HTML列表详解(重点掌握无序列表)
第一部分 列表的概念
表格是用来显示数据的,那么列表就是用来布局的。
列表最大的特点就是整齐、整洁、有序,它作为布局会更加自由和方便。
根据使用情景不同,列表可以分为三大类:无序列表、有序列表和自定义列表。
第二部分 无序列表(重点)
<ul>
标签表示HTML页面汇总项目的无序列表,一般会以项目符号呈现列表项,而列表项使用<li>
标签定义。
无序列表的基本语法格式如下:
<ul><li>列表项1</li><li>列表项2</li><li>列表项3</li>...
</ul>
总结:
A、无序列表的各个列表项之间没有顺序级别之分,是并列的。
B、<ul></ul>
中只能嵌套<li></li>
,直接在<ul></ul>
标签中输入其他标签或者文字的做法是不被允许的。
C、<li>与</li>
之间相当于一个容器,可以容纳所有元素。
D、无序列表会带有自己的样式属性,但在实际使用时,我们会使用CSS来设置。(后面学CSS的时候,我们会直接把前面的小黑点去掉。)
实操
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title>
</head>
<body><ul><li>榴莲</li><li>臭豆腐</li><li>鲱鱼罐头</li></ul>
</body>
</html>
第三部分:有序列表(理解)
有序列表即为有排列顺序的列表,其各个列表项会按照一定的顺序排列定义。
在HTML标签中,<ol>
标签用于定义有序列表,列表排序以数字来加粗样式显示,并且使用<li>
标签来定义列表项。
有序列表的基本语法格式如下:
<ol><li>列表项1</li><li>列表项2</li><li>列表项3</li>...
</ol>
总结
(1)<ol></ol>
中只能嵌套<li></li>
,直接在<ol></ol>
标签中输入其他标签或者文字的做法是不被允许的。
(2)<li></li>
之间相当于一个容器,可以容纳所有元素。
(3)有序列表会带有自己样式属性,但在实际使用时,我们会使用CSS来设置。(一般是去掉)
实操
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title>
</head>
<body><h4>粉丝排行榜</h4><ol><li>刘德华1000</li><li>刘若英200</li><li>小明2</li></ol>
</body>
</html>
第三部分:自定义列表(重点)
自定义列表的使用场景
自定义列表常用语对术语或名称进行解释和描述,定义列表的列表项前没有任何项目符号。
在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>
<dt>
和<dd>
是并列的,兄弟关系。
总结:遇到这种图形,就用自定义列表来坐。
第四部分:列表总结
注意
- 学会什么时候用无序列表,什么时候用自定义列表。
- 无序列表和自定义列表代码怎么写
HTML列表详解(重点掌握无序列表)相关推荐
- python怎么读取列表-详解Python如何获取列表(List)的中位数
前言 中位数是一个可将数值集合划分为相等的上下两部分的一个数值.如果列表数据的个数是奇数,则列表中间那个数据就是列表数据的中位数:如果列表数据的个数是偶数,则列表中间那2个数据的算术平均值就是列表数据 ...
- JavaScript数据结构与算法——列表详解(下),基于Nodejs实现一个列表应用
1.上篇回顾: 上篇我们实现了一个列表类,并添加了一些属性,实现了比较多的方法,本文章将与大家一起使用列表实现一个图书借阅查询系统.需要使用JavaScript数据结构与算法--列表详解(上)中写好的 ...
- JavaScript数据结构与算法——列表详解(上)
列表是一组有序的数据,每个数组中的数据项称为元素.数组相关知识不够了解的伙伴可以阅读本人上篇博客在JavaScript中,列表的元素可以是任意数据类型.列表中可以保存不定数量的元素,实际使用时元素的数 ...
- 路由器访问控制列表详解
路由器访问控制列表详解 路由器访问控制列表详解 网络安全保障的第一道关卡 对于许多网管员来说,配置路由器的访问控制列表是一件经常性的工作,可以说,路由器的访问控制列表是网络安全保障的第一道关卡.访问列 ...
- 详解Dialog(二)——有关列表的构建
前言:这段时间真是忙啊忙啊忙,元旦三天假加了两天班,已经连续六周只放一天了,天天加班到十点多,真是有一口血吐在屏幕上的感觉了,博客也积了好多,今天继续.无论人生有多艰难,梦想这个东西还是要坚持的. 相 ...
- Python 列表详解
Python 列表详解 什么是列表 列表的定义 列表的操作 访问列表元素 列表的切片 列表的相关运算 列表常用方法 更多内容,可以微信搜索[公][众][号][ 郑大钱呀],关注我们,一起学技术! 什么 ...
- html无序站点,html有序无序定义列表详解(案例介绍)
在前面小编已经把html中有序列表.无序列表及定义列表通过单独案例的方式进行讲解,而今天我们来绘制一个将有序无序和自定义结合在一起的案例,方便大家以后在实习过程能运用自如html列表.先来看看效果展示 ...
- 9、HTML:有序列表(ol),无序列表(ul),描述列表(dl、dt、dd)详解
1.什么是列表 什么是列表? 什么是有序列表? 什么是无序列表? 上面写的 3 句话就是一个列表,你懂得... 2.有序列表 有序列表:英文叫做 ordered list,所以标签也是取这个词组的首字 ...
- python求无序列表中位数_详解Python如何获取列表(List)的中位数
前言 中位数是一个可将数值集合划分为相等的上下两部分的一个数值.如果列表数据的个数是奇数,则列表中间那个数据就是列表数据的中位数:如果列表数据的个数是偶数,则列表中间那2个数据的算术平均值就是列表数据 ...
最新文章
- SAP MM Return Purchase Order之使用
- 如何估算大型项目的工作量
- luogu P1064 金明的预算方案
- 拦截锚点修改url_前端系列课程(2)-网络基础概念(URL)
- 【转载】RPA如何自动化SAP系统?
- access窗体中再制作查询窗体_Access
- 【MapReduce】
- 禅道开源版用户手册_自动化建模 | H2O开源工具介绍
- android 键盘遮盖输入框_android弹出输入框,软键盘挡住部分编辑框
- 首汽约车上线行程录音功能 产生司乘纠纷时可用于调查取证
- javascript案例---简单的视觉效应
- android源码编译完成之后
- 前端实现PDF分页与Vue中的render函数
- office设置保护色
- AI前言技术,一文带你深入了解语音识别的前世今生
- 模拟调节器和数字计算机如何实现PID控制,模拟PID 调节器设计及数字化实现
- 怎么找回服务器开机密码,如果忘了 开机密码该怎么办
- 通过PHP使用Google Translate API
- java 字符串编码转换的实现方法
- 图论专题1(网络流)
热门文章
- 中小企业智能化进销存管理模式
- 【MATLAB教程案例69】基于MATLAB编程实现H无穷控制器与性能分析
- 华为硬件工程师手册_一名电子工程师该如何打开正确的摆摊姿势?
- 搭建ELK日志审计系统
- b、B、KB、Kib、MB、MiB、GB、GiB、TB、TiB的区别
- 如何去掉Windows7开机那个烦人的360安全卫士提示窗口
- Android Studio 如何 安装 HAXM
- 三星升级android9,没买的不必看!三星手机各机升级Android 9.0 时间表
- mac hdmi 不能调整音量_在Mac上玩塞尔达?BMD视频采集卡 Review
- 大数据hive快速开始