列表标签

2个月前 (07-24) 364次浏览 已收录 1个评论

列表定义

表格是用来显示数据的,而列表就是用来布局的。

列表最大的特点就是整齐、整洁、有序,它作为布局会更加自由和方便。


无序列表(重点)

<ul>标签标识html页面中项目的无序列表,列表项使用<li>标签来定义。

格式

<ul>
     <li>列表项</li>
      <li>列表项</li>
</ul>

练习

<!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>
    <h4>用户喜爱食物调查</h4>
    <ul>
        <li>苹果</li>
        <li>桃子</li>
        <li>香蕉</li>
    </ul>
    <!--
        <ul></ul>中只能嵌套<li></li>,直接在标签中输入其他标签或者文字的做法是不允许的。
        <li>中可以放任何元素
    -->
</body>
</html>
结果演示

有序列表(理解)

定义

有序列表会按照一定的顺序排列定义

在html中,<ol>标签用于定义有序列表,列表顺序以数字显示,并且用<li>标签来定义列表项。

<ol>
        <li>列表项</li>
        <li>列表项</li>
        <li>列表项</li>
    </ol>

练习

<!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>
    <h4>食物排行榜</h4>
    <ol>
        <li>苹果</li>
        <li>西瓜</li>
        <li>橘子</li>
        <!--
            有序列表注意事项和无序列表注意事项相同
        -->
    </ol>
</body>
</html>
结果演示

自定义列表(重点)

定义

<dl>用于定义描述列表的,该标签必须和<d>(定义项目名字)和<dd>(描述每一个项目的成员)一起使用。

<dl>
        <dt>名词1</dt>
        <dd>名词1成员</dd>
        <dd>名词1成员</dd>
</dl>

练习

<!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>关于我们</dt>
        <dd>官方微信</dd>
        <dd>联系我们</dd>
        <!--
            <dl>中只能包含<dt><dd>标签
        -->
    </dl>
</body>
</html>
结果演示
渣渣龙, 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权
转载请注明原文链接:列表标签
喜欢 (3)

您必须 登录 才能发表评论!

(1)个小伙伴在吐槽
  1. 我给大佬补充一个:去掉li前面的项目符号(小圆点)用list-style:none;
    2021-08-08 22:33