创建锚点链接

最新推荐文章于 2022-11-05 17:09:43 发布

已转行@

最新推荐文章于 2022-11-05 17:09:43 发布

阅读量5.3k

点赞数 3

分类专栏：从零学习HTML5 文章标签： jquery javascript html5

原文链接：https://www.ptpress.com.cn

版权

从零学习HTML5 专栏收录该内容

57 篇文章 12 订阅

订阅专栏

如果网页内容较多，页面过长，浏览网页时就需要不断地拖动滚动条，来查看所需要的内容，这样效率较低且不方便。为了提高信息的检索速度，HTML语言提供了一种特殊的链接——锚点链接，通过创建锚点链接，用户能够快速定位到目标内容。

废话少说，先上代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>锚点链接</title>
</head>
<body>
   课程介绍：
   <ul>
      <li><a href="#one">平面广告设计</a></li>
     <li><a href="#two">网页设计与制作</a></li>
     <li><a href="#three">Flash互动广告动画设计</a></li>
     <li><a href="#four">用户界面（UI）设计</a></li>
     <li><a href="#five">JavaScript与jQuery网页特效</a></li>
   </ul>
<h3 id="one">平面广告设计</h3>
   <p>课程涵盖Photoshop图像处理、Illustrator图像设计、平面广告创意设计、字体设计与标志设计。</p>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<h3 id="two">网页设计与制作</h3>
   <p>课程涵盖DIV+CSS实现Web标准布局、Dreamweaver快速网站建设、网页版式构图与设计技巧、网页配色理论与技巧。</p>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<h3 id="three">Flash互动广告动画设计</h3>
   <p>课程涵盖Flash动画基础、Flash高级动画、Flash互动广告设计、Flash商业网站设计。</p>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<h3 id="four">用户界面（UI）设计</h3>
   <p>课程涵盖实用美术基础、手绘基础造型、图标设计与实战演练、界面设计与实战演练。</p>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<h3 id="five">JavaScript与jQuery网页特效</h3>
   <p>课程涵盖JavaScript编程基础、JavaScript网页特效制作、jQuery编程基础、jQuery网页特效制作。</p>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
</body>
</html>

效果图如下：

1-17

上图为一个较长的网页页面。当鼠标点击“课程介绍”下的链接时，页面会自动定位到相应的内容介绍部分。

如：点击“Flash互动广告动画设计”时，页面效果如下图：

1-17-2

重点：

创建锚点链接分为两步：


 1. 使用“<a href="#id名">链接文本</a>”创建链接文本；
 2. 使用相当的id名标注跳转目标的位置。

声明：“来自于网络，如果侵犯著作权，请联系删除”

已转行@

关注

3
点赞
踩
18

收藏

觉得还不错? 一键收藏
0
评论
创建锚点链接

如果网页内容较多，页面过长，浏览网页时就需要不断地拖动滚动条，来查看所需要的内容，这样效率较低且不方便。为了提高信息的检索速度，HTML语言提供了一种特殊的链接——锚点链接，通过创建锚点链接，用户能够快速定位到目标内容。废话少说，先上代码：<!DOCTYPE html><html><head><meta charset="UTF-8"><title>锚点链接</title></head><body&gt
复制链接

扫一扫