h5 实现列表

列表实现方法

在HTML5中，可以通过多种方式实现列表，包括无序列表、有序列表和自定义列表。以下是具体的实现方法。

无序列表

无序列表使用<ul>标签，列表项使用<li>标签。默认情况下，列表项前会显示圆点符号。

<ul>
  <li>列表项1</li>
  <li>列表项2</li>
  <li>列表项3</li>
</ul>

有序列表

有序列表使用<ol>标签，列表项使用<li>标签。列表项前会显示数字或字母序号。

<ol>
  <li>列表项1</li>
  <li>列表项2</li>
  <li>列表项3</li>
</ol>

自定义列表

自定义列表使用<dl>标签，列表项使用<dt>（定义术语）和<dd>（定义描述）标签。

<dl>
  <dt>术语1</dt>
  <dd>描述1</dd>
  <dt>术语2</dt>
  <dd>描述2</dd>
</dl>

嵌套列表

列表可以嵌套使用，适用于多层级结构。

<ul>
  <li>一级列表项1
    <ul>
      <li>二级列表项1</li>
      <li>二级列表项2</li>
    </ul>
  </li>
  <li>一级列表项2</li>
</ul>

列表样式控制

通过CSS可以自定义列表样式，例如修改列表符号或序号类型。

ul {
  list-style-type: square; /* 修改无序列表符号为方块 */
}

ol {
  list-style-type: upper-roman; /* 修改有序列表序号为大写罗马数字 */
}

响应式列表

结合CSS Flexbox或Grid布局，可以实现响应式列表，适应不同屏幕尺寸。

ul {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

以上方法涵盖了HTML5中实现列表的基本和进阶用法，适用于大多数场景需求。