HTML 列表-代码号

HTML 列表是网页内容组织的基本构建单元，用于以有序且视觉清晰的方式呈现相关信息。列表不仅提升了内容的可读性和可访问性，还增强了信息的层次结构。HTML 提供了三种主要列表类型，每种类型适用于不同的内容场景。

一、有序列表（Ordered List）

有序列表适用于需要按特定顺序展示的项目，通常使用数字、字母或罗马数字进行标识。有序列表使用 <ol> 标签定义，每个列表项包含在 <li> 标签中。
基本语法

<ol>
  <li>项目一</li>
  <li>项目二</li>
</ol>

示例演示

<ol>
  <li>第一阶段：需求分析</li>
  <li>第二阶段：原型设计</li>
  <li>第三阶段：开发实现</li>
</ol>

输出效果：
第一阶段：需求分析
第二阶段：原型设计
第三阶段：开发实现
有序列表属性
有序列表支持以下属性来控制编号行为：

属性	描述	值示例
type	指定编号类型	1（数字）、A（大写字母）、a（小写字母）、I（大写罗马数字）、i（小写罗马数字）
start	设置起始编号	数字（如3表示从3开始）
reversed	反向排序（降序）	布尔属性，无需值

属性应用示例

<ol type="A" start="3" reversed>
  <li>高级功能</li>
  <li>中级功能</li>
  <li>基础功能</li>
</ol>

输出效果：
C. 高级功能
B. 中级功能
A. 基础功能

二、无序列表（Unordered List）

无序列表适用于没有特定顺序的项目，通常以项目符号形式呈现。无序列表使用 <ul> 标签定义，每个列表项同样使用 <li> 标签。
基本语法

<ul>
  <li>项目一</li>
  <li>项目二</li>
</ul>

示例演示

<h3>代码号html教程</h3>
<ul>
  <li>HTML5</li>
  <li>CSS3</li>
  <li>JavaScript</li>
  <li>React框架</li>
</ul>

输出效果：
• HTML5
• CSS3
• JavaScript
• React框架
无序列表属性
无序列表支持以下属性：

属性	描述	备注
type	指定项目符号样式	disc（实心圆）、circle（空心圆）、square（实心方块）
compact	紧凑显示（减少间距）	HTML5中已弃用，建议使用CSS替代

三、描述列表（Description List）

描述列表适用于展示术语及其对应定义的场景，常见于词汇表、FAQ或键值对数据展示。描述列表使用 <dl> 标签作为容器，<dt> 标签定义术语，<dd> 标签提供描述。
基本结构

<dl>
  <dt>术语一</dt>
  <dd>术语一的详细描述</dd>
  <dt>术语二</dt>
  <dd>术语二的详细描述</dd>
</dl>

示例演示

<dl>
  <dt>HTML</dt>
  <dd>超文本标记语言，用于创建网页结构和内容。</dd>
  
  <dt>CSS</dt>
  <dd>层叠样式表，用于定义网页的视觉表现和布局。</dd>
  
  <dt>JavaScript</dt>
  <dd>脚本编程语言，用于实现网页的交互功能和动态效果。</dd>
</dl>

四、嵌套列表（Nested List）

嵌套列表是指列表中包含子列表的结构，适用于呈现层次化信息或分类内容。HTML 允许将不同类型的列表相互嵌套。
嵌套示例

<ol>
  <li>前端开发
    <ul>
      <li>HTML</li>
      <li>CSS</li>
      <li>JavaScript</li>
    </ul>
  </li>
  <li>后端开发
    <ul>
      <li>Node.js</li>
      <li>Python</li>
      <li>Java</li>
    </ul>
  </li>
</ol>

HTML 列表标签

标签	描述
`<ul>`	定义无序列表（项目符号列表）
`<ol>`	定义有序列表（编号列表）
`<li>`	定义列表项（用于ul和ol）
`<dl>`	定义描述列表容器
`<dt>`	定义描述列表中的术语
`<dd>`	定义术语的描述内容

课程实践建议
语义化选择：根据内容性质选择合适的列表类型。有序列表适用于步骤流程、排名等有顺序要求的内容；无序列表适用于项目、功能列表等无顺序要求的内容；描述列表适用于术语定义、键值对数据。
CSS样式控制：使用CSS而非HTML属性控制列表样式，这样可以实现更灵活的设计效果，同时保持HTML代码的简洁性和语义性。
合理嵌套：当需要创建层次结构时，确保子列表放置在父列表的<li>元素内，以保证代码结构的规范性和可访问性。
无障碍访问：正确使用列表结构有助于屏幕阅读器等辅助技术更好地理解和导航内容，提升网站的可访问性。
浏览器兼容性
所有现代浏览器（包括Chrome、Firefox、Safari、Edge和Opera）都支持HTML列表元素及其基本属性。