HTML <li> 标签详解与实例

"本文档详细介绍了HTML中的`<li>`标签，用于定义列表项，并在有序列表`<ol>`和无序列表`<ul>`中使用。文档还提到了`<li>`标签在HTML4.01和XHTML1.0 Strict DTD中的差异，以及如何使用CSS替代过时属性。此外，它还列出了`<li>`标签的一些可选属性，如`type`和`value`，并提供了相关实例和事件属性的概述。" 在HTML中，`<li>`标签是一个非常基础且重要的元素，用于创建列表项。它可以被嵌套在`<ol>`（有序列表）或`<ul>`（无序列表）标签内，以组织和展示一系列相关的条目。例如： ```html <ol> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ol> <ul> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ul> ``` 在这个例子中，`<li>`标签定义了三个不同的列表项，分别是咖啡、茶和牛奶。在有序列表中，这些项会默认带有数字前缀；而在无序列表中，则会显示为带有圆点或实心圆的项目符号。 在HTML4.01和XHTML1.0 Strict中，`<li>`标签有两个已被废弃的属性：`type`和`value`。`type`属性用于设置无序列表`<ul>`中项目的符号类型，如圆形`circle`、实心圆`disc`或空心圆点`square`，在现代HTML中，这些效果应通过CSS来实现。而`value`属性则用于指定有序列表`<ol>`中项目的初始数值，但目前也建议使用CSS进行控制。 在实际开发中，为了保持代码的语义化和兼容性，开发者应避免使用这些过时属性，而是使用CSS来定义列表和列表项的样式。例如，要改变无序列表的项目符号，可以这样做： ```css ul { list-style-type: square; } ``` `<li>`标签还支持一些标准属性，如`id`、`class`、`title`、`style`、`dir`、`lang`和`xml:lang`，这些属性可以用来添加唯一的标识、类名、提示信息、内联样式、文本方向、语言信息和XML语言。同时，`<li>`标签还可以绑定事件属性，如`onclick`、`onmouseover`等，以实现与用户的交互功能。 `<li>`标签是构建列表结构的基础，它与`<ul>`和`<ol>`标签一起构成了HTML中重要的布局和信息组织工具。了解和正确使用`<li>`标签及其相关属性，对于创建清晰、易读的网页内容至关重要。