【HTML入门】第七课 - 链接的学习（一）

经海路大白狗

于 2024-07-10 16:35:38 发布

阅读量122

点赞数

分类专栏： WEB前端小白从这里出发文章标签：学习 html 前端

本文链接：https://blog.csdn.net/xingyu_qie/article/details/140327205

版权

WEB前端小白从这里出发专栏收录该内容

8 篇文章 0 订阅

订阅专栏

我们在浏览网页的时候，时常可以点击一个可跳转的蓝色的文字，点击后，就跳转到网页的其他地方，或者浏览器会打开一个新的窗口，又或者呢，浏览器不会打开新的窗口，而是在当前网页替换了内容。这些都是链接标签的效果作用。

链接的标签是 a 。

1 锚点

什么是锚点呢，就是上面说的，点击后，跳转到了当前网页的其他内容那里去。我们做个例子就明白了。

注意：这里还有个前提，网页需要足够多的内容，如果只有一屏，没有滚动条呢，是不会有跳转效果的。最好目标地点是不在当前屏幕里的。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>我的第一个网页</title>
        <style type="text/css">
            
        </style>
    </head>
    <body>
        <a href="#here">我要跳过去</a>
        <br/>
        <p>这里是为了占位置</p>
        <br/>
        <p>这里是为了占位置</p>
        <br/>
        <p>这里是为了占位置</p>
        <br/>
        <p>这里是为了占位置</p>
        <br/>
        <p>这里是为了占位置</p>
        <br/>
        <p>这里是为了占位置</p>
        <br/>
        <p>这里是为了占位置</p>
        <br/>
        <p>这里是为了占位置</p>
        <br/>
        <p>这里是为了占位置</p>
        <br/>
        <p>这里是为了占位置</p>
        <br/>
        <p>这里是为了占位置</p>
        <br/>
        <p>这里是为了占位置</p>
        <br/>
        <p>这里是为了占位置</p>
        <br/>
        <p id="here">过来吧</p>
    </body>
</html>

我们看上面的代码，希望点击 “我要跳过去” 的时候呢，网页可以滚动到 “过来吧” 的这个段落标签这里。而且中间加了很多站位的段落，目标就是为了使网页一屏放不下，产生纵向的滚动条。看一下网页当前的情况：

可以看出，“过来吧” 的这个目标段落，并没有在当前屏幕展示着。然后点击一下 “我要跳过去” 这个链接标签。

会发现，滚动条已经滚动到了下面，然后 “过来吧” 对应的目标段落标签，也已经展示出来了。这就是锚点的效果。

然后你是否也看出来了，链接这个a标签的样子呢，就是蓝色的，底部加了个横线，这就是链接。

2 链接的鼠标上移文字

我们这里说一个属性，title属性，当然，这个title属性并不是 a 标签所特有的，所有html标签，都可以加上这个title属性。当加了title属性后呢，鼠标上移到这个元素上面的时候，就会显示出添加的title的属性值。比如这样：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>我的第一个网页</title>
        <style type="text/css">
            
        </style>
    </head>
    <body>
        <a href="#here" title="鼠标上移的提示文字">我要跳过去</a>
        <br/>
        <p title="这里是为了占空间">这里是为了占位置</p>
        <br/>
    </body>
</html>

你看，我们给a标签加了title的属性，给p标签也加了title的属性，你可以刷新一下页面，把鼠标指针移动到这2个标签上，看一下效果，是不是对应添加的文字，以漂浮的形式显示出来了呢？