html语言介绍

  本章是在 html语法后继续介绍html语言中的列表，包括有序列表、无序列表以及自定义列表。
在 HTML 中，有序列表、无序列表和自定义列表是常用的列表类型，它们用于组织和呈现信息。以下是对这三种列表的介绍：

一、有序列表（Ordered List）

1.定义：
  有序列表是一种有顺序的列表，其中的列表项会按照一定的顺序进行编号。
  通常使用数字、字母或罗马数字等作为编号。
2.语法：
  使用 <ol> 标签来定义有序列表。
  在 <ol> 标签内部，使用 <li> 标签来定义列表项。
3.应用场景：
  适用于需要呈现步骤、流程或有明确顺序的内容。
  例如，制作教程、说明书等。

二、无序列表（Unordered List）

1.定义：
  无序列表是一种没有特定顺序的列表，其中的列表项通常以项目符号（如圆点、方块等）来标识。
2.语法：
  使用 <ul> 标签来定义无序列表。
  在 <ul> 标签内部，使用 <li> 标签来定义列表项。
3.应用场景：
  适用于列举没有特定顺序的内容。
  例如，列出菜单选项、产品特点等。

三、自定义列表（Definition List）

1.定义：
  自定义列表由两部分组成：名词术语和对该术语的描述。
  通常用于定义术语、词汇表或展示一些具有特定名称和描述的内容。
2.语法：
  使用 <dl> 标签来定义自定义列表。
  在 <dl> 标签内部，使用 <dt> 标签来定义名词术语，使用 <dd> 标签来定义对该术语的描述。
3.应用场景：
  适用于展示术语的定义、解释或说明。
  例如，制作词汇表、技术文档等。
  至于他们的具体语法将会在本章展开讲述。

列表

①无序列表

  场景：在网页中表示一组无顺序之分的列表，如：新闻列表
  特点：显示的每一行前都有一个圆点标识

标签名	说明
ul	表示无序列表的整体，用于包裹li标签(unordered list)
li	表示无序列表的每一项，用于包含每一行的内容(list item)

以下是类型示例：

圆点列表(默认)

<ul style="list-style-type:disc" >
      <li>苹果</li>
      <li>香蕉</li>
      <li>橘子</li>
      <li>西瓜</li>
</ul>

圆圈列表

<ul style="list-style-type:circle">
      <li>苹果</li>
      <li>香蕉</li>
      <li>橘子</li>
      <li>西瓜</li>
</ul>	

正方形列表

<ul style="list-style-type:square">
      <li>苹果</li>
      <li>香蕉</li>
      <li>橘子</li>
      <li>西瓜</li>
</ul>	

去掉列表符号

<ul type="none">
      <li>苹果</li>
      <li>香蕉</li>
      <li>橘子</li>
      <li>西瓜</li>
</ul>	

②有序列表

  场景：在网页中表示一组无顺序之分的列表，如：新闻列表
  特点：显示的每一行前都有一个有序标识

标签名	说明
ol	表示有序列表的整体，用于包裹li标签(Ordered List)
li	表示有序列表的每一项，用于包含每一行的内容(list item)

有序列表默认样式是1234，序号从1开始。

属性	作用
type	设置有序列表符号的显示类型
start	设置有序排序的起始值，默认为1
以下是类型示例：

编号列表(默认)

<ol>
      <li>苹果</li>
      <li>香蕉</li>
      <li>橘子</li>
      <li>西瓜</li>
</ol>

大写字母列表

<ol  type="A">
      <li>苹果</li>
      <li>香蕉</li>
      <li>橘子</li>
      <li>西瓜</li>
</ol>

小写字母列表

<ol  type="a">
      <li>苹果</li>
      <li>香蕉</li>
      <li>橘子</li>
      <li>西瓜</li>
</ol>

罗马数字列表

<ol  type="I">
      <li>苹果</li>
      <li>香蕉</li>
      <li>橘子</li>
      <li>西瓜</li>
</ol>

小写罗马数字列表

<ol type="i">
      <li>苹果</li>
      <li>香蕉</li>
      <li>橘子</li>
      <li>西瓜</li>
</ol>

  以下是起始序号示例：

编号

<ol>
      <li>苹果</li>
      <li>香蕉</li>
      <li>橘子</li>
      <li>西瓜</li>
</ol>	

指定开始序号

<ol  start="3">
      <li>苹果</li>
      <li>香蕉</li>
      <li>橘子</li>
      <li>西瓜</li>
</ol>	

指定开始序号

<ol  type="a" start="2">
      <li>苹果</li>
      <li>香蕉</li>
      <li>橘子</li>
      <li>西瓜</li>
</ol>	

③自定义列表

  场景：在网页的底部导航中通常会使用自定义列表实现
  注意：dl只能包裹dt/dd标签，dt/dd标签可以包含任何内容

标签名	说明
dl	整体，用于包裹dt/dd标签(defined list)
dt	主题(d title)
dd	针对主题的每一项内容(d data)(dd前会显示缩进效果)

<dl>
    <dt>帮助中心</dt>
    <dd>账户管理</dd>
<dd>购买流程</dd> 
</dl>