【测试全栈,先从前端开始--HTML之无序列表/有序列表】(十三)

时间:2022-10-26 17:59:51

很久之前讲了HTML合并单元格,接下来我们说下列表,包含无序列表和有序列表。

  <ul>标签表示HTML页面中项目的无序列表,一般会以项目符号呈现列表项,而列表项使用<li>标签定义。无序列表的基本语法格式如下:

<ul>

    <li>列表项1</li>

    <li>列表项2</li>

    <li>列表项3</li>

    ...

</ul>

来实战下,看看代码怎么写:

【测试全栈,先从前端开始--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>

    <h4>您喜欢的事物</h4>

    <ul>

        <li>桃子</li>

        <li>苹果</li>

        <li>西瓜</li>

    </ul>

</body>

</html>

对于无序列表,还有几点是需要注意的:

  1. 无序列表的各个列表项之间没有顺序级别之分,是并列的
  2. <ul></ul>之间只能嵌套<li></li>,在<ul></ul>之间放置其他标签或者是文字等,是不被允许的。
  3. <li></li>之间相当于一个容器,可以放任意元素。比如
  4. 无序列表会带自己的样式属性,但在实际操作时,使用css来设置

先看效果:

【测试全栈,先从前端开始--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>

    <h4>您喜欢的事物</h4>

    <ul>

        <li>桃子</li>

        <li>苹果</li>

        <li>西瓜</li>

        <li>

            <p>这是一个段落</p>

            <tr>

                <td>苦难</td>

            </tr>

        </li>

    </ul>

</body>

</html>

这里插入了一个<p>,还有<tr>和<td>,确实是什么都可以插进去的


无序列表说完后,我们来讲讲有序列表

<ol>标签用于定义有序列表,列表排序以数字来显示,并使用<li>标签来定义列表项。

<ol>

    <li>列表项1</li>

    <li>列表项2</li>

    <li>列表项3</li>

</ol>


好的,今天就先到这里,稍后再说