超链接的使用

lingxiaoxing

于 2022-09-29 20:18:18 发布

阅读量1k

点赞数

分类专栏： HTML 文章标签： servlet html 前端

本文链接：https://blog.csdn.net/m0_46471322/article/details/127113261

版权

HTML 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

HTML超链接

在网页中我们随处可见的就是超链接了，在浏览网页的过程中我们点击文字或者图片或者其他可以跳转到另一个页面，这就是使用的超链接的功能，我们现在来看一下超链接标签的使用

1.超链接

超链接也是使用的双标签，用<a></a>来表示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>超链接</title>
</head>
<body>
    <a href="http://www.baidu.com" target="_blank">百度</a>
    <a href="2.html">测试页面</a>
    <!--
        当然除了用文字去跳转超链接，我们还可以用图片来进行跳转操作！
    -->
    <a href="http://www.baidu.com">
        <img src="/img/baidu.png">
    </a>
</body>
</html>

效果图

在超链接中有两个重要的属性

href：这个后面要跟需要链接的地址，当我们点击标签中的内容可以进行一个跳转操作，像代码中，当我点击百度这个文字就会跳转到对应的href中对应的链接！
target：这个便签的意义是我们怎么去选择链接打开的方式，默认是_self，也就是自网页跳转到另一个页面，而__blank则是重新打开一个夜间，在新页面中加载！

在图片中运用超链接，即直接在a标签中嵌套img标签插入图片即可！

2.图片标签

既然提到了图片标签，那就详细讲一下关于图片标签的应用！

<img src="文件路径">

那么图片的属性，出了src之外，还有哪些常用的呢？

title属性：用来说明图片的作用，当鼠标悬停在图片上会显示内容
alt：如果图片没有显示出来，会显示这样一条提示信息！
width：设置图片的宽度，当只设置一个宽度或高度之后图片会自动适配大小，不会因此变形
heigth：高度，同上！

案例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <img src="/code/img/XRmCIR3YIO.png" title="这可以作为一张桌面壁纸" >
    <img src="code/XRmCIR3YIO.png" alt="如果图片没显示，请刷新页面!">
    <img src="/code/img/XRmCIR3YIO.png" width="200px" >
    <img src="/code/img/XRmCIR3YIO.png" height="200px">
</body>
</html>

展示：