【HTML入门】第七课 - 链接的学习(一)

发布于:2024-07-11 ⋅ 阅读:(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个标签上,看一下效果,是不是对应添加的文字,以漂浮的形式显示出来了呢?