HTML13.列表

1.列表标签

学习目标

• 理解

  • 无序列表的应用场景

  • 自定义列表的应用场景

• 应用

  • 无序列表语法

  • 自定义列表语法

  列表就是用来布局的，因为非常整齐和自由

  • 概念： 容器里面装载着结构，样式一致的文字或图表的一种形式，叫列表

  • 特点： 列表的最大特点就是 整齐、整洁、有序，跟表格类似，但是他可组合自由度会更高。

     

    1.1无序列表 ul（重点）

  无序列表的各个列表项之间没有顺序级别之分，是并列的。（列表去掉了行的概念）其基本语法格式如下：

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

• • 注：

  • 1. ul 中只能嵌套 li ,直接在 ul 标签中输入其他标签或者文字的做法是不被允许的。

    2. li 和 li 之间相当于一个容器，可以容纳所有元素。

    3. 无序列表会带有自己样式属性，放下那个样式，让CSS来！

  •  

  • 1.2有序列表 ol (了解)

  • 有序列表即为有排列顺序的列表，其各个列表项按照一定的顺序排列定义，有序列表的基本语法如下：

  • <ol>
      <li>列表项1</li>
      <li>列表项2</li>
      <li>列表项3</li>
      ......
    <ol>

  • 所有特性基本与ul一致。但是实际中比 无序列表 用的少很多。

  •  

  • 1.3自定义列表（理解）

  • 定义列表常用于对术语或名词进行解释和描述，定义列表的列表项前没有任何项目符号。其基本语法如下：

  • <dl>
        <dt>名词1</dt>
        <dt>名词1解释1</dt>
        <dt>名词1解释2</dt>
        ...
        <dt>名词2</dt>
        <dt>名词2解释1</dt>
        <dt>名词2解释2</dt>
        ...
    </dl>

 

列表总结

标签名	定义	说明
<ul></ul>	无序列表	里面只能包含li 没有顺序，我们以后布局中最常用的列表
<ol></ol>	有序列表	里面只能包含li 有顺序，使用情况较少
<dl></dl>	自定义列表	里面有两个兄弟，dt和dd

• 现在还没有学布局，现在只要保证2个点：

  1. 学会什么时候用无序列表，学会什么时候用自定义列表

  2. 无序列表和自定义列表代码如何写

  3. 具体的我们刚才看的布局，等我们学历CSS再来全面布局