列表定义

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

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

无序列表（重点）

<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>

结果演示