html中的列表标签

列表标签

什么是列表标签？

答：可以用来表示一组一组的内容，页面中相同结构、或相同意义都可以用列表

列表标签可以分为有序列表、无序列表、定义列表。

1.有序列表用ol创建 ,li标签表示列表项

示例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><h3>超市购物清单</h3><ol><li>衣服</li><li>生活用品</li><li>学习用品</li></ol>
</body>
</html>

有序列表

默认样式：

1、加了1.2.3.等项目符号

2、列表项的前面加了一些间距

可以用type属性，更改项目符号

属性值：默认是阿拉伯数字，1，2，3

还可以是a/A/i/I

2.无序列表用ul创建，li标签标识列表项

示例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><h3>起床三件事</h3><ul><li>穿衣</li><li>刷牙</li><li>洗脸</li></ul>
</body>
</html>

无序列表

默认样式：

1、项目符号小圆点

2、每个列表项前面也有间距

也可以用type属性去更改项目符号

默认是实心小圆点

disc，默认值，实心的圆点

square，实心的方块

circle，空心的圆

3.定义列表用dl创建 dt表示下定义，dd表示对定义内容的解释

示例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><dl><dt>厨房用品</dt><dd>碗</dd><dd>筷子</dd><dd>锅</dd><dt>日常用品</dt><dd>牙膏</dd><dd>牙刷</dd><dd>洗发水</dd><dt>衣服</dt><dd>裤子</dd><dd>袜子</dd></dl>
</body>
</html>

定义列表

默认样式：

dt是顶格写的，dd前面有间距

注意：1、最常用：有序列表和无序列表

2、在实际应用过程，一般有序列表、无序列表不做特殊的区分

3、列表标签也是块元素

4、列表是可以相互嵌套

html中的列表标签相关推荐

html表格中加入导航栏,用HTML中的列表标签做个导航栏吧
我们在网上浏览的好多网页都有导航栏,它提供信息导航的功能,想知道它是怎么做出来的吗? 首先要知道的:HTML中的列表标签都有那些呢? ul-li无序列表 ( 网页中显示的默认样式一般为:每项 li 前 ...
用HTML中的列表标签做一个导航栏吧
我们在网上浏览的好多网页都有导航栏,它提供信息导航的功能,想知道它是怎么做出来的吗? 首先要知道的:HTML中的列表标签都有那些呢? ul-li无序列表 ( 网页中显示的默认样式一般为:每项 li 前 ...
html中正方形列表标签属性,CSS 列表样式
我们知道在 HTML 中列表可以分为无序列表.有序列表.定义列表.在网页中经常可以看到无序列表的使用,例如像导航栏菜单.新闻列表.商品分类.图片展示等,基本都是通过无序列表来实现的. 无序列表中每个列 ...
html中正方形列表标签属性,如何在HTML中创建带有方形项目符号的无序列表？
Developed Countries The list of developed countries : US Australia New Zealand
dede中list标签php,dedecms标签中什么表示列表标签
dedecms标签中什么表示列表标签? dedecms标签中list表示列表标签: 标签名称:list 功能说明:表示列表模板里的分页内容列表适用范围:仅列表模板 list_*.htm 基本语法:{ ...
如何设置iMatrix平台中列表标签(gridjqGrid)实现动态列表
动态列表以demo中"订单(动态列表)"为例说明:此列表显示的信息包括订单主表的信息和订单子表的信息,其中主表信息是编号为ES_ORDER对应列表的信息,子表的信息是从后台动态取 ...
织梦DedeCms标签中的文档列表标签是什么
DedeCms标签中的文档列表标签是什么 DedeCms标签中的文档列表标签就是arclist标签. 一.标签参数列表本标签的参数列表非常多参数,说明它的功能强大,自由拓展性很大,学好了之后作用不小 ...
html中的a标签、img标签、iframe标签、列表标签
一. a标签 <a href="路径" target="打开方式">内容</a> 1.页面跳转: 2.定位:①设定锚点:在要定位到的位置 ...
列表标签ul、ol、dl、li
列表标签的种类无序列表标签(ul标签) 有序列表标签(ol标签) 自定义列表标签(dl标签) 无序列表无序列表的各个列表项之间没有顺序级别之分,是并列的.其基本语法格式如下: <!-- ul ...

html中的列表标签

html中的列表标签相关推荐

最新文章

热门文章