HTML列表

最新推荐文章于 2024-07-15 15:13:08 发布

Chico_D

最新推荐文章于 2024-07-15 15:13:08 发布

阅读量159

点赞数

分类专栏： HTML/CSS 文章标签： css html html5

本文链接：https://blog.csdn.net/Chico_D/article/details/117533183

版权

HTML/CSS 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

一、HTML有序列表 < ol> 标签

< ol> 标签定义了一个有序列表. 列表排序以数字来显示。
使用< li> 标签来定义列表选项。

属性	功能描述
compact	规定列表呈现的效果比正常情况更小巧。
reversedNew	指定列表倒序(9,8,7…)
start	一个整数值属性，指定了列表编号的起始值。这个属性在 HTML4中弃用，但是在 HTML5 中被重新引入。

下面展示一些实例

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>emm..(runoob.com)</title> 
</head>
<body>

/*有序标签 ol*/
<ol>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

/*从50开始*/
<ol start="50">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>
 
</body>
</html>

在这里插入图片描述

二、HTML无序列表 < ul> 标签

< ul> 标签定义无序列表。
将 < ul> 标签与 < li> 标签一起使用，创建无序列表。

属性	功能描述
compact	规定列表呈现的效果比正常情况更小巧。
type	规定列表的项目符号的类型。

下面展示一些实例

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>emm..(runoob.com)</title> 
</head> 
<body>

/*无序列表 ul*/
<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

</body>
</html>

在这里插入图片描述

三、HTML自定义列表 < dl> 标签

自定义列表不仅仅是一列项目，而是项目及其注释的组合。
标签与 < dt> （定义项目/名字）和 < dd> （描述每一个项目/名字）一起使用。

下面展示一些实例

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>emm..(runoob.com)</title> 
</head>
<body>

/*自定义列表 dl*/
<dl>
  <dt>Coffee</dt>/*定义项目/名字*/
  <dd>Black hot drink</dd>/*描述*/
  <dt>Milk</dt>
  <dd>White cold drink</dd>
</dl>

</body>
</html>

在这里插入图片描述

Chico_D

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML列表

一、HTML有序列表 < ol> 标签 < ol> 标签定义了一个有序列表. 列表排序以数字来显示。使用< li> 标签来定义列表选项。属性功能描述compactHTML5 中不支持，不赞成使用。请使用样式取代它。规定列表呈现的效果比正常情况更小巧。reversedNew指定列表倒序(9,8,7…)start一个整数值属性，指定了列表编号的起始值。这个属性在 HTML4中弃用，但是在 HTML5 中被重新引入。下面
复制链接

扫一扫