一文搞懂HTML图片与链接标签

最新推荐文章于 2024-03-31 09:22:00 发布

酷尔。

最新推荐文章于 2024-03-31 09:22:00 发布

阅读量625

点赞数 8

分类专栏：网页前端高级编程从入门到精通文章标签： html 前端

本文链接：https://blog.csdn.net/apple_51931783/article/details/122596636

版权

网页前端高级编程从入门到精通专栏收录该内容

59 篇文章 22 订阅

订阅专栏

文章目录

一、引入图片
- 1.代码
- 2.展示效果
二、引入链接
- 1.代码
- 2.运行结果
三、将图片与链接绑定到一块
- 1.代码
- 2.运行结果

一、引入图片

使用标签：img
将标签内的属性src修改为图片所在的链接

1.代码

<!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>
    <img src="../1.jpg" title="小汽车嘀嘀嘀" alter="我的小汽车">
    <img src="../1.png" title="小汽车嘀嘀嘀" alter="我的小汽车" width=1000>
    <img src="../1.jpg" title="小汽车嘀嘀嘀" alter="我的小汽车" height="200" border =15>
</body>
</html>

2.展示效果

在这里插入图片描述

二、引入链接

	使用a标签
	将链接地址赋给a标签的href属性

1.代码

	br是换行的意思

<!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>
	<!-- 加入以下属性会获得相应的功能-->
    <!-- target="_self"新页面替换旧的页面 -->
    <!-- target="_blank"在新的页面打开连接 -->
    <h1 id="Head">通向罗马的路不止一条</h1>
    <a href="http://www.baidu.com" target="_blank">外部链接</a><br/>
    <a href="FirstTest.html">内部链接</a><br/>
    <!-- 空连接用于占位,表示目前这里缺一个连接,但不知道缺什么 -->
    <a href="#">空连接</a><br/> 
    <!-- 图片连接 -->
    <a href="http://www.bilibili.com" target="_blank"><img src="1.jpg" width="100"></a><br/>
    <!-- 锚点连接 -->
   <a href="#mine">芝麻开门</a>
    <h1 >文章段落</h1>
    <p>

</p>
    <h3 id="mine">中心段落</h3><br />
    <a href="#Head">回到顶部</a><br/>

/etc/shdow--------口令配置文件<br><br><br><br><br><br><br><br><br><br>
每行的含义：登录<br><br><br><br><br><br><br><br><br><br>名：加密口令<br><br><br><br><br><br><br><br><br><br>：最后一次修改时间：最小时间间隔<br><br><br><br><br><br><br><br><br><br>：最大时间间隔：警<br><br><br><br><br><br><br><br><br><br>告时间：不活动时<br><br><br><br><br><br><br><br><br><br>间：失效时间：标志
①增加用户
useradd 用户名<br><br><br><br><br><br><br><br><br><br>

<a href="#Head">回到顶部</a>
</body>
</html>

2.运行结果

实现了回到顶部的按钮,以及页面间的跳转。

在这里插入图片描述

三、将图片与链接绑定到一块

1.代码

<!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>
    <a href="http://www.4399.com" target="_blank"><img src="../2.png" title="下载游戏" width="100"></a>
</body>

</html>

2.运行结果

	点击以下图片按钮将会进行跳转,可以将以上的src修改为你自己的图片,href这个链接修改为你想要的链接

在这里插入图片描述

酷尔。

关注

8
点赞
踩
8

收藏

觉得还不错? 一键收藏
打赏
3
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录