1.无序列表

无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记。
无序列表始于 <ul> 标签。每个列表项始于<li>。

也可以通过CSS改变项目符号，也可以自己设置图片，如<li img src=“ ”>

2.有序列表

有序列表也是一列项目，列表项目使用数字进行标记。
有序列表始于 <ol> 标签。每个列表项始于 <li> 标签。

改变排序方式

3.自定义列表

自定义列表不仅仅是一列项目，而是项目及其注释的组合。
自定义列表以 <dl> 标签开始。每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以 <dd> 开始。

4.列表的嵌套：

列表嵌套可以增强网页页面层次性，比如图书的目录。有序列表和无序列表不仅能自身嵌套也能互相嵌套。

注：dl元素只允许包含dt和dd，同时dt不能包含块状元素，只允许包含行内元素，对于dd可以包含任何元素。
有序列表和无序列表之间的区别是：前缀的不同，有序的是有大写字母和小写字母、数字、罗马数字等，而无序列表是实心圆、空心圆、实心正方形。但是共同点是都有前缀。
而自定义列表与有序无序的区别是没有前缀，而且是有缩进。

扩展：

1.行内元素
　　行内元素最常使用的就是span，其他的只在特定功能下使用，修饰字体<b>和<i>标签，还有<sub>和<sup>这两个标签可以直接做出平方的效果，而不需要类似移动属性的帮助，很实用。
　　行内元素特征：(1)设置宽高无效
　　　　　　　　　(2)对margin仅设置左右方向有效，上下无效；padding 设置上下左右都有效，即会撑大空间
　　　　　　　　　(3)不会自动进行换行
2.块状元素
　　块状元素代表性的就是div，其他如p、nav、aside、header、footer、section、article、ul-li、address等等，都可以用div来实现。不过为了可以方便程序员解读代码，一般都会使用特定的语义化标签，使得代码可读性强，且便于查错。
块状元素特征：(1)能够识别宽高
　　　　　　　(2)margin和padding的上下左右均对其有效
　　　　　　　(3)可以自动换行
　　　　　　　(4)多个块状元素标签写在一起，默认排列方式为从上至下
自定义列表的好处：
在自定义列表中，在dt和dd中有了一个缩进。在有序和无序列表要实现此结构就要用到列表的嵌套。
当遭遇一系列术语与解释的列表（比如术语表）时，自定义列表就会很有用了。
dl元素像ul元素和ol元素一样确立列表。不同的是，自定义列表用dt（definition term，定义术语）元素来代替li元素，其后跟随dd（definition description，定义描述）元素。
不局限于一个dt跟着一个dd，而是任意的。自定义列表用于一个术语名对应多重定义或者多个术语名同一个给出的定义，也可以只有术语名称或只有定义，即<dt>与<dd>在其中数量不限，对应关系不限。
自定义列表一般用于以下内容
1.比如有很多同义词，就可能多个dt跟着一个dd。如果有一个有许多不同意义的词，就可能一个dt后有多个dd。
2.网页搜索下面的相关搜索

像这种的列表使用自定义列表要比使用ul更好些。

HTML列表标签及自定义列表的应用相关推荐

列表标签，自定义列表，img标签，超链接a标签
1.列表标签: 有序列表 ol创建有序列表 type="" li 列表项默认是数字1-n的列表符号,可以通过ol的type属性改变列表符号如果type属性值为:A, a, I, ...
html无序列表的滚动效果,html无序列表标签和有序列表标签使用示例
原标题:html无序列表标签和有序列表标签使用示例一.上下层列表标签: : 上层dt 下层dd:封装的内容会被自动缩进的效果复制代码代码如下: 运动户外板鞋篮球鞋足球鞋跑步鞋二.定义有 ...
HTML 列表标签、有序列表、无序列表、自定义列表dl dt dd
文章目录有序列表无序列表自定义列表(重点) 总结有序列表有序列表即为有排列顺序的列表,其各个列表项会按照-定的顺序排列定义. 在HTML标签中, 标签用于定义有序列表,列表排序以数字来显示, ...
html5列表标签代码,HTML5列表标签和表格标签(示例代码)
一.列表 1.1 什么是列表标签? 作用:给一堆数据添加列表语义,也就是告诉搜索引擎告诉浏览器这一对数据是一个整体无序列表---unordered-list(最多):新闻列表.导航.商品列表作用: ...
html中正方形列表标签属性,CSS 列表样式
我们知道在 HTML 中列表可以分为无序列表.有序列表.定义列表.在网页中经常可以看到无序列表的使用,例如像导航栏菜单.新闻列表.商品分类.图片展示等,基本都是通过无序列表来实现的. 无序列表中每个列 ...
有序列表标签与无序列表标签
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> ...
HTML无序列表、有序列表、自定义列表标签的基本知识
今天的文章主要讲述HTML无序列表.有序列表.自定义列表标签的基本知识,和在网页中的效果一.列表的应用场景场景: 在网页中按照行展示关联性的内容,如:新闻列表.排行榜.账单等特点: 按照行的方式 ...
Web前端开发笔记——第二章 HTML语言第六节区域标签、列表标签
目录一.区域标签 (一)div标签的定义 (二)div标签的属性二.列表标签 (一)列表标签的定义 (二)列表标签的类型 1.有序列表 (1)有序列表的定义 (2)有序列表的属性 2.无序列表 ( ...
从零开始学前端：列表标签 --- 今天你学习了吗？（CSS：Day06）
从零开始学前端:程序猿小白也可以完全掌握!-今天你学习了吗?(CSS) 复习:从零开始学前端:表单制作 - 今天你学习了吗?(CSS:Day05) 文章目录从零开始学前端:程序猿小白也可以完全掌握! ...

HTML列表标签及自定义列表的应用

1.无序列表

2.有序列表

3.自定义列表

4.列表的嵌套：

扩展：

HTML列表标签及自定义列表的应用相关推荐

最新文章

热门文章