HTML--列表标签

最新推荐文章于 2024-10-16 10:13:45 发布

浮光跃金.free

最新推荐文章于 2024-10-16 10:13:45 发布

阅读量44

点赞数

文章标签： html servlet java

本文链接：https://blog.csdn.net/qq_52040402/article/details/127270589

版权

无序列表

<!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>无序列表</title>
</head>
<body>
    <!-- 无序列表 -->
    <!-- 在网页表示一组无顺序之分的列表,比如新闻列表 -->
    <!-- ul---表示无序列表的整体,用于包裹li标签 ul标签中只允许包含li标签-->
    <!--li---表示无序列表的每一项,用于包裹每一行的内容  li标签可以包含任意内容-->
    <!-- 列表每一项前默认显示圆点标识 -->
    <h1>水果</h1>
    <ul>
        <li>榴莲</li>
        <li>苹果</li>
        <li>香蕉</li>
    </ul>
</body>
</html>

有序列表

<!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>有序列表</title>
</head>
<body>
    <!-- 有序列表 -->
    <!-- 网页中表示一组有顺序之分的列表,比如排行榜 没有自动排序功能-->
    <!-- ol---有序列表的整体,包裹li标签 只允许包含li标签-->
    <!-- li---表示有序列表的每一项,用于包裹每一行的内容  li标签可以包含任意内容 -->
    <!-- 列表每一项前默认显示序号标识 -->
    <h1>成绩列表</h1>
    <ol>
        <li>齐司礼 89</li>
        <li>Even 99</li>
    </ol>
</body>
</html>

自定义列表

<!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>自定义列表</title>
</head>
<body>
    <!-- 网页底部导航中通常会使用自定义列表实现 -->
    <!-- dl--自定义列表的整体,包裹dt/dd标签 只允许包含dt/dd标签-->
    <!-- dt--表示自定义列表的主题 -->
    <!-- dd--自定义列表针对主题的每一项内容,dd前会默认显示缩进效果 -->
    <!-- dd/dt标签可以包含任意内容 -->
    <dl>
        <dt>帮助中心</dt>
        <dd>账户管理</dd>
        <dd>购物指南</dd>
    </dl>
</body>
</html>