3、HTML列表与链接：无序列表、有序列表、自定义列表、超链接、锚点链接

列表和链接，可以说是HTML里最常用的两个东西了。你想想看，哪个网页没有导航菜单？哪个页面不需要跳转？我做了这么多年前端，几乎每天都在跟它们打交道。今天咱们就把它们彻底搞明白。

3.1 无序列表：最常用的列表

无序列表，说白了就是前面带个小圆点的列表。你看到的导航菜单、商品列表、文章分类，大部分都是用无序列表做的。

它的结构很简单：

<ul>
    <li>前端开发</li>
    <li>后端开发</li>
    <li>全栈开发</li>
</ul>

显示效果就是：

• 前端开发
• 后端开发
• 全栈开发

无序列表可以嵌套，这在做多级菜单时特别有用：

<ul>
    <li>编程语言
        <ul>
            <li>JavaScript</li>
            <li>Python</li>
            <li>Java</li>
        </ul>
    </li>
    <li>框架
        <ul>
            <li>Vue</li>
            <li>React</li>
        </ul>
    </li>
</ul>

3.2 有序列表：有顺序的列表

有序列表就是前面带数字的列表。什么时候用？比如排行榜、操作步骤、比赛名次这些有明确顺序的场景。

<ol>
    <li>打开编辑器</li>
    <li>创建HTML文件</li>
    <li>编写代码</li>
    <li>保存并预览</li>
</ol>

显示效果：

1. 打开编辑器
2. 创建HTML文件
3. 编写代码
4. 保存并预览

有序列表还可以设置起始值和类型：

<ol start="5" type="A">
    <li>第五步</li>
    <li>第六步</li>
</ol>

type属性可以设置成：1（数字）、A（大写字母）、a（小写字母）、I（大写罗马数字）、i（小写罗马数字）。

3.3 自定义列表：成对出现的数据

自定义列表你可能用得少一些，但它其实很实用。它由两部分组成：术语（dt）和描述（dd）。

最适合的场景是什么？比如产品参数、词典解释、问答列表这些成对出现的内容。

<dl>
    <dt>HTML</dt>
    <dd>超文本标记语言，负责网页结构</dd>
    
    <dt>CSS</dt>
    <dd>层叠样式表，负责网页样式</dd>
    
    <dt>JavaScript</dt>
    <dd>脚本语言，负责网页交互</dd>
</dl>

显示效果：

HTML

超文本标记语言，负责网页结构

CSS

层叠样式表，负责网页样式

JavaScript

脚本语言，负责网页交互

3.4 超链接：网页的命脉

没有链接的网页，就像一座孤岛。超链接让整个互联网连在了一起。

最基本的用法：

<a href="https://www.example.com">访问示例网站</a>

链接有几个重要的属性：

属性	作用	示例
href	链接目标地址	href="https://..."
target	打开方式	target="_blank"
title	鼠标悬停提示	title="点击查看详情"
rel	关系描述	rel="noopener"

链接还可以是图片、按钮，甚至是一段文字中的某个词：

<a href="detail.html">
    <img src="product.jpg" alt="产品图片">
</a>

<p>更多内容请<a href="about.html">关于我们</a></p>

3.5 锚点链接：页面内的导航

锚点链接，说白了就是页面内部的跳转。比如你点一下「回到顶部」，页面就嗖的一下滚上去了。

实现起来分两步：

第一步，在目标位置设置锚点：

<h2 id="section1">第一章：HTML基础</h2>

第二步，创建指向锚点的链接：

<a href="#section1">跳转到第一章</a>

注意href里的#号，它表示这是一个页面内的锚点，而不是外部链接。

锚点也可以指向其他页面的某个位置：

<a href="help.html#faq">查看常见问题</a>

这样点击后，会先打开help.html页面，然后自动滚动到id为faq的位置。

3.6 综合实战：做一个简单的导航菜单

来，咱们把今天学的知识串起来，做一个简单的页面导航：

<!-- 导航菜单 -->
<nav>
    <ul>
        <li><a href="#html">HTML</a></li>
        <li><a href="#css">CSS</a></li>
        <li><a href="#js">JavaScript</a></li>
    </ul>
</nav>

<!-- 内容区域 -->
<h2 id="html">HTML 基础</h2>
<p>HTML是网页的骨架...</p>

<h2 id="css">CSS 样式</h2>
<p>CSS让网页变得好看...</p>

<h2 id="js">JavaScript 交互</h2>
<p>JS让网页动起来...</p>

你看，无序列表ul用来做菜单结构，a标签实现跳转，锚点让页面内导航变得流畅。这三个知识点配合起来，一个完整的页面导航就出来了。