HTML/CSS 基础知识点总结：列表与超链接样式详解

一、HTML 列表标签核心要点

1. 无序列表 <ul> vs 有序列表 <ol>

<ul>：定义无序列表，列表项前默认显示项目符号（如圆点 •），通过 list-style-type 可修改符号样式（如 disc/circle/square）。

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

<ol>：定义有序列表，列表项前默认显示数字编号，支持 type 属性（如 1/a/A/i/I）。

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

2. 列表的关键规则

必填项要求：
每对 <ul></ul> 或 <ol></ol> 中至少包含一个 <li> 元素，否则列表无实际内容，属于无效结构。

<!-- 正确写法 -->
<ul>
  <li>有效列表项</li>
</ul>

嵌套规则：
列表可自由嵌套，无序列表中可嵌套有序列表，反之亦然，只需保持标签层级正确。

<ul>
  <li>主列表项
    <ol>
      <li>子列表项1</li>
      <li>子列表项2</li>
    </ol>
  </li>
</ul>

3. 移除默认样式：list-style: none;

作用：清除列表的默认项目符号 / 编号及缩进。
典型场景：

自定义导航菜单（如水平导航栏）。
用 <ul> 实现纯文本分组（如 FAQ 列表）。

ul {
  list-style: none; /* 移除圆点 */
  padding: 0; /* 清除默认内边距 */
}

二、超链接 <a> 与 CSS 伪类详解

1. 超链接核心属性

href：指定链接目标（URL / 锚点），非 target 属性。

链接到同一页面锚点：href="#top"
链接到外部页面锚点：href="list.html#one"（格式：页面路径#锚点名）

target：指定打开方式（如 _blank 新窗口打开）。

2. CSS 伪类：控制链接状态

样式顺序建议：按 link → visited → hover → active（LVHA）顺序编写，确保生效。

a:link, a:visited {
  color: #333;
  text-decoration: none; /* 移除默认下划线 */
}
a:hover {
  color: #f00;
}
a:active {
  transform: scale(0.98); /* 按下时缩小 */
}

3. 文本装饰属性：text-decoration

none：清除下划线（如超链接默认样式）。
underline：添加下划线（模拟链接效果）。
line-through：添加删除线（如商品原价）。

.old-price {
  text-decoration: line-through;
  color: #999;
}

三、常见错误与最佳实践

1. 列表相关误区

❌ 错误：认为无序列表只能嵌套无序列表。
✅ 正确：无序列表可嵌套有序列表，反之亦然，只需结构正确。

❌ 错误：使用空 <ul></ul> 标签。
✅ 正确：至少包含一个 <li> 元素，确保语义完整。

2. 超链接锚点写法

跨页面链接锚点格式：页面路径#锚点名（如 list.html#one），必须包含扩展名（如 .html）。
锚点定义：推荐使用 HTML5 的 id 属性（如 <h1>），替代传统的 <a name="one">。

四、总结

列表标签 <ul>/<ol> 需包含 <li> 子元素，list-style: none; 是自定义列表的核心样式。
超链接通过伪类和 text-decoration 实现丰富交互效果，锚点链接需注意路径与锚点的格式。
开发中建议遵循 LVHA 伪类顺序，并合理利用 CSS 缩写属性（如 list-style）简化代码。

希望以上总结对前端初学者理解 HTML 列表与超链接样式有所帮助！如有疑问，欢迎在评论区交流～