第四章：HTML列表与链接
- 作者
- Name
- 青玉白露
- Github
- @white0dew
- Modified on
- Reading time
- 3 分钟
阅读:.. 评论:..
在 Web 开发中，列表和链接是非常常见且重要的元素。列表可以帮助我们有条理地展示信息，而链接则是网页之间和网页内部导航的基础。本章将深入探讨如何使用 HTML 创建和管理列表与链接。
无序列表 (<ul>)
无序列表使用 <ul> 标签定义，列表项使用 <li> 标签包裹。无序列表的特点是每个列表项前面会有一个默认的圆点标示。
示例代码
<ul> <li>苹果</li> <li>香蕉</li> <li>樱桃</li> </ul>
解释
<ul>标签用来定义无序列表的开始和结束。<li>标签用来定义每个列表项。
渲染效果
- 苹果
- 香蕉
- 樱桃
有序列表 (<ol>)
有序列表使用 <ol> 标签定义，列表项同样使用 <li> 标签包裹。有序列表的特点是每个列表项前面会有一个编号。
示例代码
<ol> <li>第一步</li> <li>第二步</li> <li>第三步</li> </ol>
解释
<ol>标签用来定义有序列表的开始和结束。<li>标签用来定义每个列表项。
渲染效果
- 第一步
- 第二步
- 第三步
列表项 (<li>)
无论是无序列表还是有序列表，列表项都使用 <li> 标签进行定义。一个 <li> 标签可以包含文本、链接、图像甚至其他列表。
嵌套列表
列表中可以嵌套其他列表，以此来创建多层级结构。
示例代码
<ul> <li> 水果 <ul> <li>苹果</li> <li>香蕉</li> </ul> </li> <li> 蔬菜 <ul> <li>胡萝卜</li> <li>菠菜</li> </ul> </li> </ul>
渲染效果
- 水果
- 苹果
- 香蕉
- 蔬菜
- 胡萝卜
- 菠菜
超链接 (<a>)
超链接使用 <a> 标签定义，常用于从一个页面导航到另一个页面或在同一页面内跳转。
基本语法
<a href="链接地址">链接文本</a>
示例代码
<a href="https://www.example.com">访问示例网站</a>
解释
href属性指定链接的目标地址。- 链接文本是用户点击链接时看到的文本。
渲染效果
内部链接
内部链接用于在同一个页面内导航。我们可以使用元素的 id 属性来定义链接目标。
示例代码
<h2 id="section1">部分一</h2> <p>这是部分一的内容。</p> <a href="#section1">返回部分一</a>
解释
id属性定义了链接目标的位置。href属性使用#加上目标元素的id值来创建内部链接。
图文并茂示例
为了更好地理解列表和链接的用法，下面是一个包含无序列表、有序列表和链接的综合示例。
示例代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>列表与链接示例</title> </head> <body> <h1>欢迎来到我的网页</h1> <h2>待办事项列表</h2> <ol> <li>完成 HTML 作业</li> <li>学习 CSS</li> <li>开始 JavaScript 项目</li> </ol> <h2>购物清单</h2> <ul> <li> 水果 <ul> <li>苹果</li> <li>香蕉</li> </ul> </li> <li> 蔬菜 <ul> <li>胡萝卜</li> <li>菠菜</li> </ul> </li> </ul> <h2>有用的链接</h2> <ul> <li><a href="https://www.google.com">Google</a></li> <li><a href="https://www.wikipedia.org">Wikipedia</a></li> </ul> </body> </html>
渲染效果
- 欢迎来到我的网页
结论
本章介绍了如何使用 HTML 创建无序列表、有序列表和链接，并通过代码示例和详细解释帮助你理解这些元素的用法和渲染效果。掌握列表和链接的使用，将为你的 Web 开发打下坚实基础。
请在评论区留言讨论你对列表和链接的理解或提出任何问题。你的参与将使学习过程更加丰富多彩！
