HTML5的图像标签以及超链接

黑白土豆

已于 2023-12-17 22:48:01 修改

阅读量257

点赞数 3

文章标签： html 前端 html5

于 2023-12-15 18:44:13 首次发布

本文链接：https://blog.csdn.net/2201_75652268/article/details/135007931

版权

1.HTML的图像标签

2.HTML的超链接

1.HTML的图像标签

图像格式有很多种，但在实际开发的时候常见的有4钟，分别为JPG格式、PNG格式、GIF格式及BMP格式。图像标签:<img src="图像地址"/>,该标签为单标签。其中src属性表示图片的路径，它是<img/>标签必须的属性。为了在网页中灵活应用图像，<img/>标签还有四个属性：width是用来定义图像的宽度；height是用来定义图像的高度；alt是在图像不能显示的替代文字；title是鼠标悬停在图片时显示的文本。

语法：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图像标签的使用</title>
</head>
<body>
    <img src="C:\Users\sunqw\Desktop\a.jpg" alt="出错了" title="图片"/>
</body>
</html>

运行结果：

第一张图可以看到鼠标悬浮在图片上之后出现了图片两个字，第二张图就是图片没有加载出来，所以就变成了自己写的一段文字。

2.HTML的超链接

在HTML5中，创建超链接使用<a>标签对。

target常用的两个属性值：_self和_blank。_self是默认值，表示在自身窗口打开；_blank是在新的窗口打开。

语法：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>超链接的使用</title>
</head>
<body>
    <a href="https://www.baidu.com/" target="_self">点击跳转百度</a>
    <p></p>
    <a href="https://www.taobao.com/" target="_blank"><img src="TBlogo.jpg" width="200px" height="200px"/></a>
</body>
</html>

运行结果：