HTML超链接和图片的插入

最新推荐文章于 2026-05-30 14:58:19 发布

原创最新推荐文章于 2026-05-30 14:58:19 发布 · 4.8k 阅读

23 ·

本内容遵循CC 4.0 BY-SA版权协议

本文介绍了HTML中的超链接和图片插入的基本用法。包括<a>标签的href和target属性，以及<img>标签的src和alt属性。同时讲解了不同窗口打开方式的区别及图片显示的适应性解决方案。

HTML超链接

HTML标签里，<a>就是用来超链接的，所谓的超链接是指从一个网页指向一个目标的连接关系，这个目标可以是另一个网页，也可以是相同网页上的不同位置，还可以是一个图片，一个电子邮件地址，一个文件，甚至是一个应用程序。而在一个网页中用来超链接的对象，可以是一段文本或者是一个图片。

在超链接<a>中有 href 和 target 这两个属性，href 就是我们想要连接的目标，而 target 就是窗口的打开方式。

在 target 中最常用的两个，_self 和 _blank 这两个属性，_self 是在现有的窗口中打开新页面，_blank 则是新窗口中打开新页面。

还有一点区别是，_self 的原窗口会被覆盖，_blank 的原窗口会被保留。

 <a href="https://www.csdn.net/" target="_self">这是一个链接，指向CSDN官网</a>

 <a href="https://www.csdn.net/" target="_blank">这是一个链接，指向CSDN官网</a>

HTML图片的插入

在HTML标签里，图片的插入使用 <img> 标签，它是自闭和标签，只有开始标签和属性。

属性包括 src 和 alt ：

src用来指明图片的地址或者路径。src 支持多种图片格式，比如 jpg、png、gif 等。
alt 用来定义图片的文字描述信息。当由于某些原因导致图片无法加载时，就会显示 alt 属性中的信息。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>我的眼里都是学习</title>
</head>
<body>
	<h1>这是一个标题</h1>
	<hr>
	<h2>这是一个标题</h2>
	<h3>这是一个标题</h3>
    <p>我的第一个段落。</p>
	<!--照片的插入-->
<img src="xuexi.jpg" alt="我的眼里都是学习"/> <br> <!--图片在html同级文件内-->
</body>
</html>

图片在 html 文件上一层的话，则如下所示：

<img src="../学习.jpg"/> <!--返回上一层-->

运算结果如下：

还可以设置图片的高度和宽度，有两种方法

<img src="xuexi.jpg" width="258" height="390" />

<img src="heiheihei.jpg" style="width:258; height:390;" />

现在还存在用户显示器的不同，导致分辨率的不同，每个人能浏览的图片有差异。所以就存在<picture> 标签来解决这一问题。

<picture> 标签中包含零个或多个 <source> 标签，通过 <source> 标签中的 media 属性可以设定匹配条件（允许哪个版本的图片显示），通过 srcset 属性可以定义图片的路径。另外，在 <picture> 标签的最后还需要定义一个 <img> 标签。

最后是默认标签，假如上面两个都不显示，那么就会显示默认标签。

<picture>
    <source media="(min-width: 1000px)" srcset="xuexi-large.png">
    <source media="(max-width: 500px)" srcset="xuexi-small.png">
    <img src="xuexi-default.png" alt="我眼里只有学习">
</picture>

标签

#html #前端