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

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

根据使用情景不同,列表可以分为三大类:无序列表、有序列表、和自定义列表

2.1无序列表

<ul>标签表示HTML页面中项目的无序列表,一般会以项目符号呈现列表项,而列表项使用<li>标签定义,<ul></ul>是父标签,<li></li>是ul的子标签

无序列表的基本语法格式如下:

<ul>
   <li>列表项1</li>
   <li>列表项2</li>
   <li>列表项3</li>
   ……
</ul>

例子:

<ul>
    <li>榴莲</li>
    <li>鲱鱼罐头</li>
    <li>臭豆腐</li>
 </ul>

特别说明

  1. 无序列表的各个列表项直接没有顺序级别之分,是并列的。
  2. <ul></ul>中只能嵌套<li></li>,直接在<ul></ul>标签中输入其他标签或者文章的做法虽然实现,但是是不被允许的。
  3. <li>与</li>之间相当于一个容器,可以容纳所有元素标签。

<ul>
    <li>榴莲</li>
    <li>鲱鱼罐头</li>
    <li>
      <p>臭豆腐</p> <!--这里的li标签中就嵌套了一个p标签-->
    </li>
 </ul>
  • 无序列表会带有自己的样式属性,但在实际使用时,我们会使用css来设置。

  • 2.2有序列表

    有序列表即为有排序顺序的列表,其各个列表项会按照一定的顺序排列定义。

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

    <ol>
        <li>榴莲</li>
        <li>鲱鱼罐头</li>
        <li>
          <p> 臭豆腐 </p><!--这里的li标签中就嵌套了一个p标签-->
        </li>
     </ol>

    1. <ul></ul>中只能嵌套<li></li>,直接在<ul></ul>标签中输入其他标签或者文章的做法虽然实现,但是是不被允许的。
    2. <li>与</li>之间相当于一个容器,可以容纳所有元素标签。
    3. 有序列表会带有自己的样式属性,但在实际使用时,我们会使用css来设置。

    最后修改:2022 年 03 月 11 日
    如果觉得我的文章对你有用,请随意赞赏