无序列表的 type 属性

无序列表有 type 属性，可以定义前导符号的样式，但在 HTML5 中已经被废弃，建议使用 CSS 替代
只作为学习和了解即可

属性	值	描述
type	disc	默认值，实心圆
type	square	实心正方形
type	circle	空心圆

注意:

在 HTML 4 中的 ul 属性已废弃，html5 已不支持该属性，因此我们使用 CSS 代替来定义不同类型的无序列表如下：

<h1>无序列表标签</h1>

<p>ul的type属性在HTML5中已经废弃</p>

<h2>type="square" 实心正方形</h2><ul type="square">
  
  <li>小炒肉</li>
  
  <li>小龙虾</li>
  
  <li>剁椒鱼头</li>
  
  <li>酸辣白菜</li>
  
  <li>7分熟牛排</li>
  </ul>
  <h2>type="circle" 空心圆</h2>
  <ul type="circle">
  
  <li>小炒肉</li>
  
  <li>小龙虾</li>
  
  <li>剁椒鱼头</li>
  
  <li>酸辣白菜</li>
  
  <li>7分熟牛排</li>
  
  </ul>

注：

在 HTML5 中使用 CSS 代替来定义不同类型的无序列表

<h1>无序列表标签</h1>

<p>ul的type属性在HTML5中已经废弃，使用CSS替代</p>

<h2>style="list-style-type:disc" 实心圆</h2>

<ul style="list-style-type:disc">

  <li>小炒肉</li>

    <li>小龙虾</li>
  
  <li>剁椒鱼头</li>
  
  <li>酸辣白菜</li>
  
  <li>7分熟牛排</li>
  
  </ul>
  
  <h2>style="list-style-type:square" 实心正方形</h2>
  
  <ul style="list-style-type:square">
  
  <li>小炒肉</li>
  
  <li>小龙虾</li>
  
  <li>剁椒鱼头</li>
  
  <li>酸辣白菜</li>
  
  <li>7分熟牛排</li>
  
  </ul>
  <h2>style="list-style-type:circle" 空心圆</h2>
  
  <ul style="list-style-type:circle">
  
  <li>小炒肉</li>
  
  <li>小龙虾</li>
  
  <li>剁椒鱼头</li>
  
  <li>酸辣白菜</li>
  
  <li>7分熟牛排</li>
  
  </ul>

4、无序列表在开发中的使用

Tip

导航栏
各种页面 list 列表
..... 基本常见网站导航、列表页都会使用 ul li 无序列表标签

5、有序列表 - 基础 语法

有刻意顺序的列表就叫做有序列表

关于有序列表

有序列表使用
<ol></ol>标签，每个列表项都是<li></li>标签
<ol>标签是英文 ordered list（排序列表） 缩写
ol 的特性与 ul li 同理

<h1>编程语言排行榜</h1>
  <ol>
  <li>JavaScript</li>
  <li>Python</li>
  <li>C/C++</li>
  <li>JAVA</li>
  
  </ol>

6、有序列表 ol 的 type 属性

ol 标签可以设置 type 属性，用来设置编号的类型

type 属性值	描述
1	数字编号（默认值）
A	大写英文字母编号
a	小写英文字母编号
I	大写罗马数字编号
i	小写罗马数字编号

<h1>编程语言排行榜</h1>

<p>ol type属性值</p>

<ol type="1">

  <li>JavaScrIPt</li>

    <li>Python</li>
  
  <li>C/C++</li>
 
  <li>Java</li>
  
  </ol>
  
  <ol type="A">
 
  <li>JavaScript</li>
 
  <li>Python</li>
 
  <li>C/C++</li>
 
  <li>Java</li>
  
  </ol>.......

7、有序列表 ol 的 start 属性

start 属性

start属性值必须是一个整数，制定了列表编号的起始值
此属性的值阿拉伯数字，即使 ol 指定了 type 属性值

<h1>编程语言排行榜</h1>

<p>ol type属性值 和 start属性值</p>

<ol type="1" start="3">
  
  <li>JavaScript</li>
  
  <li>Python</li>
  
  <li>C/C++</li>
  
  <li>Java</li>
  
  </ol>
  
  <ol type="A" start="2">
  
  <li>JavaScript</li>
  
  <li>Python</li>
  
  <li>C/C++</li>
  
  <li>Java</li>
  
  </ol>
  
  <ol type="a" start="6">
  
  <li>JavaScript</li>
  
  <li>Python</li>
  
  <li>C/C++</li>
  
  <li>Java</li>
  
  </ol>

8、有序列表 ol 的 reversed 属性

reversed 属性

reversed 属性是 HTML5 中的新属性
reversed 属性是一个布尔属性
reversed 属性指定列表中的条目是否是倒序排列的
reversed 属性不需要值，只需要写 reversed 单词即可

<h1>有序列表 ol的reversed属性（倒序排列）</h1>

<ol type="1" reversed>
 
  <li>JavaScript</li>
 
  <li>Python</li>
 
  <li>C/C++</li>
 
  <li>Java</li>
  </ol>

9、定义列表

需要逐条给出定义描述的列表，就是定义列表

定义列表使用 <dl></dl>标签，是英文单词definition list（定义列表） 缩写
<dt></dt>标签，是英文单词 data term（数据项）缩写
<dd></dd>标签，是英文单词 data definition (数据定义)缩写
dd 标签内容是对dt 标签的解释说明
案例以小米官网首页底部

<dl>是定义列表标签，内容交替出现 <dt>、<dd>标签

<h1>定义列表 - dt dd标签交替出现</h1>

<dl>
  
  <dt>服务支持</dt>
  
  <dd>售后政策</dd>
  
  <dd>关注我们</dd>
  
  <dd>自助服务</dd>
  
  <dt>关注我们</dt>
  
  <dd>新浪微博</dd>
  
  <dd>官方微信</dd>
  
  <dd>关于我们</dd>
  
  </dl>

也允许 dt 和 dd 不交替出现，而是分别处于不同定义列表 dl 中
这么写，可以有更多的 dl ，可以更好的服务 css 样式

<h1>定义列表 dt dd 不交替出现</h1>

<dl>
  
  <dt>服务支持</dt>
  
  <dd>售后政策</dd>
  
  <dd>关注我们</dd>
  
  <dd>自助服务</dd>
  
  </dl>
  
  <dl>
  
  <dt>关注我们</dt>
    
  <dd>新浪微博</dd>
  
  <dd>官方微信</dd>
  
  <dd>关于我们</dd>
  
  </dl>

10、最佳实践

标签	适用场景	最佳实践	注意事项
`<ul>`	无序列表（顺序不重要）	菜单、导航链接	避免嵌套过深
`<ol>`	有序列表（顺序重要）	步骤说明、排名	合理使用编号类型
`<li>`	列表项（`<ul>` 或 `<ol>` 的子元素）	购物车商品、步骤项	不能单独使用
`<dl>`	术语和定义	术语解释、产品规格	避免用于简单键值对
`<dt>`	定义术语（`<dl>` 的子元素）	技术术语、名称	内容应简洁
`<dd>`	定义描述（`<dl>` 的子元素）	术语解释、详细说明	一个 `<dt>` 可对应多个 `<dd>`