HTML基础——列表标签

一、列表标签是什么

what？

列表标签的作用：给一堆数据添加列表语义，也就是告诉搜索引擎/浏览器这一堆数据是一个整体。

二、列表标签分类

1.无序列表（最多）（unordered list）

（1）什么是无序列表？

无序列表：给一堆数据添加列表语义，并且一堆数据中所有的数据都无先后顺序：如：中国的城市有哪些？

（2）格式：

• 需要显示的条目内容

li：list litm的缩写：条目列表。list：列表；item:条目

（3）无序列表的应用：

新闻列表商品列表导航条

（4）注意点：

标签可以改变样式，但是不建议，改变样式一般是通过css。

标签中最好只放
• 标签，但是在
• 标签中还可以继续放其他的标签。

  2.有序列表（最少）（ordered list）

  （1）什么是有序列表？

  有序列表的作用：给一堆数据添加列表语义，并且这一堆数据中国所有的数据都有先后之分。

  （2）格式：

  （3）注意点：

  注意：也可以通过有序列表的 属性来改变有序序列表的格式，如：

  表明，序号是 i 和 ii 这种表示。但是一般没有人这么用，要想改变格式，通过css。

  3.定义列表（其次）（definition list ）

  (1)定义列表的作用：

  （1）给一堆数据添加列表语义

  （2）先通过dt标签定义列表中的所有标题，然后再通过dd标签给每个标题添加描述信息。

  （2）格式：

  （3）定义列表的应用场景

  做网站尾部的相关信息做图文混排

  （4）注意点：

  （1）和ul、ol一样，dl和dt/dd是一个整体，所以他们一般情况下不会单独出现，一般都是一起出现。（2）和ul、ol一样，由于dl和dt/dd是一个组合标签，所以dl中建议只放dt和dd标签（3）一个dt可以没有对应的dd，也可以有多个对应的dd，但是无论有或者没有dd都不推荐使用。推荐使用一个dt对应一个dd。（4）和li标签一样，当需要丰富界面时，我们可以在dt和dd标签中继续添加其他标签。但是不要直接在dl标签中添加其他的标签。

  三、列表标签分类详细介绍及示例

  1.无序列表

  1.1无序列表-建立带有项目符号的列表

  1.建立带有项目符号的列表：

  标签：使用

  和
  • 标签方法：
    和
    • 标签的type属性指定符号的样式，取值如下：

      属性值

      样式

      disc

      实心的圆圈

      square

      实心的方块

      circle

      空心的圆圈

      2.代码示例：

      • 《java》

      • 《vb实例教程》

      • 《c++系统编程》

      • 《jsp快速编程》

      • 《java》

      • 《vb实例教程》

      • 《c++系统编程》

      • 《jsp快速编程》

      • 《java》

      • 《vb实例教程》

      • 《c++系统编程》

      • 《jsp快速编程》

      3.效果：

      2. 有序列表

      2.1 有序列表-建立数字编号的列表

      1.建立数字编号有序列表：

      使用

      和
      1. 标签创建带数字编号的列表。在
         标签中使用start属性，设置起始的序号。在
         1. 标签中使用value属性，改变列表内的编号顺序。

            2.代码示例：

            1. 《java》

            2. 《vb实例教程》

            3. 《c++系统编程》

            4. 《jsp快速编程》

            效果：

            3.start属性：

            start属性，设置起始的序号。value属性，改变列表内的编号顺序。

            代码示例：

            10. 《java》

            11. 《vb实例教程》

            30. 《c++系统编程》

            31. 《jsp快速编程》

            效果：

            2.2 有序列表-指定编号的格式和顺序

            1.有序列表——创建指定编号的格式和顺序：如使用abcd的顺序等

            在

            和
            1. 标签中，使用type属性指定编号系统的类型。type属性的取值如下表所示：

               属性值

               数字风格

               A

               使用大写字母（A、B 、C等）

               a

               使用小写字母（a、b、c等）

               I

               使用大写罗马数字（I、II、III等）

               i

               使用小写罗马数字（i、ii、iii等）

               1

               使用阿拉伯数字（1、2、3等），这是缺省值

               2.代码示例：

               10. 《java》

               11. 《vb实例教程》

               30. 《c++系统编程》

               31. 《jsp快速编程》

               1. 《java》

               2. 《vb实例教程》

               3. 《c++系统编程》

               4. 《jsp快速编程》

               1. 《java》

               2. 《vb实例教程》

               3. 《c++系统编程》

               4. 《jsp快速编程》

               1. 《java》

               2. 《vb实例教程》

               3. 《c++系统编程》

               4. 《jsp快速编程》

               3. 效果：

               3. 定义列表

               3.1 定义列表-建立无符号的列表

               1.建立无符号的列表

               标签：

               和

               创建无符号的列表。缩进列表：使用

               标签替换

               ，创建缩进的列表。

               2.代码示例：

               《java》

               《vb实例教程》

               《c++系统编程》

               《jsp快速编程》

               《java》

               《vb实例教程》

               《c++系统编程》

               《jsp快速编程》

               3.效果：

               3.2 定义列表-建立术语列表

               1.建立术语列表

               方法：在

               元素中同时使用

               和

               标签，建立术语列表。术语列表中的列表项由两部分组成：术语：由

               标签指定术语的说明：由

               标签指定

               2. 代码示例：

               HTML

               超文本标记语言

               HTML

               超文本标记语言

               3.效果：

               本篇博客小编主要总结和分享有关列表标签的内容，分为三类五种形式，详细的用法在后续的项目实践中会慢慢分享~~~