网页设计基础 第七讲：巧用超链接与锚点，让简历页面焕然一新！

TechLearn
3,203 阅读3分钟

本文详细介绍了如何利用HTML超链接和锚链接功能，在个人简历页面中实现快速导航。通过简单的示例代码，我们不仅能够理解链接的基本语法，还能学习到如何使用HTML5的语义化标签来提升页面质量，使简历看起来更加专业和易于浏览。

知识回顾

超链接

是指从一个网页指向一个目标的连接关系。这个目标可以是另一个网页，也可以是相同网页上的不同位置，还可以是一个图片，一个电子邮件地址，一个文件，甚至是一个应用程序。而在一个网页中用来做超链接的对象，可以是一段文本或者是一个图片。当浏览者单击已经链接的文字或图片后，链接目标将显示在浏览器上，并且根据目标的类型来打开或运行。

语法

<a href="要跳转的路径">显示文本</a>

锚链接

一个锚链接包含两个部分：

  • 锚点：页面中要跳转到的位置
  • 链接：跳转的超链接

语法

1）定义锚点：使用标签的name属性给锚点命名，一个页面中锚点名称不能重复。

<a name=”锚点名称”>显示文本</a>

也可以使用id属性给锚点命名

<p id="锚点名称">段落</p>

2）链接锚点：

使用超链接跳转到锚点，此处的锚点名称与定义的锚点名称要一致，名称前必须使用#号

<a href="#锚点名称">显示文本</a>

功能链接

使用a标签还能实现特殊的功能

1、发送邮件

语法

<a href=”mailto:邮箱地址”>显示文本</a>

示例

<a href="mailto:zhujw@budaos.com">zhujw@budaos.com</a>

任务描述

要求：在一个页面中实现以下效果，点链接可以跳转到页面中的相应位置(基本信息、自我评价、教育经历、所获奖励)

image.png

任务准备

  • VsCode开发工具已安装
  • 掌握基础的html知识

任务实施

 <!DOCTYPE html>

<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>个人简历</title>
</head>
<body>

<h1>个人简历</h1>

<!-- 导航链接 -->

<a href="#basic-info">基本信息</a> | <a href="#self-evaluation">自我评价</a> | <a href="#education">教育经历</a> | <a href="#awards">所获奖励</a>

<!-- 内容部分 -->

<h2 id="basic-info">基本信息</h2>
<p>姓名：张三</p>
<p>性别：男</p>
<p>出生年月：1998.10</p>
<p>民族：汉</p>
<img src="转存失败，建议直接上传图片文件 image_url" alt="个人头像转存失败，建议直接上传图片文件" style="width:100px;">

<h2 id="self-evaluation">自我评价</h2>
<p>在四年的大学生活，我充实了很多... </p>

<h2 id="education">教育经历</h2>
<p>2012年9月 - 2015年4月 华南师范大学金融管理专科...</p>
<p>2012年7月 - 2014年7月 广州暨南职业技术学院工商企业管理...</p>

<h2 id="awards">所获奖励</h2>
<p>2001年荣获最佳自学勇气奖</p>
<p>2002年荣获最佳好职员奖</p>

</body>
</html>

实验实训

用nav,section另一种实现

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>个人简历</title>
</head>
<body>

<h1>个人简历</h1>
<nav>
    <a href="#basic-info">基本信息</a> |
    <a href="#self-evaluation">自我评价</a> |
    <a href="#education">教育经历</a> |
    <a href="#awards">所获奖励</a>
</nav>

<section id="basic-info">
    <h2>基本信息</h2>
    <p>姓名：张三</p>
    <p>性别：男</p>
    <p>出生年月：1998.10</p>
    <p>民族：汉</p>
    <img src="image_url" alt="个人头像" style="width:100px;">
</section>

<section id="self-evaluation">
    <h2>自我评价</h2>
    <p>在四年的大学生活，我充实了很多... </p>
</section>

<section id="education">
    <h2>教育经历</h2>
    <p>2012年9月 - 2015年4月 华南师范大学金融管理专科...</p>
    <p>2012年7月 - 2014年7月 广州暨南职业技术学院工商企业管理...</p>
</section>

<section id="awards">
    <h2>所获奖励</h2>
    <p>2001年荣获最佳自学勇气奖</p>
    <p>2002年荣获最佳好职员奖</p>
</section>

</body>
</html>

了解了如何使用超链接和锚点来优化我们的个人简历之后，接下来让我们继续深入，探索一下如何通过CSS为网页增添更多的视觉魅力，使其不仅功能强大而且美观动人。

avatar
文章
阅读
粉丝