图片标签img和超链接标签a_img跳转链接-优快云博客

本文链接：https://blog.youkuaiyun.com/lm12032015/article/details/123599480

本文介绍了HTML5中图片标签img的使用，包括BMP位图、资源存放、相对路径、alt和title属性的设置。同时，还详细讲解了超链接标签a的应用，如target属性用于设置跳转模式，以及href属性实现锚链接和qq推广的链接效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

图片标签img

BMP位图
一般在项目目录下创建一个resource目录,专门存放资源
相对路径…/表示上一级目录

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
    
  <img src="resource/image/李长歌.jpg" width="55px" height="95px" alt="图片丢失时的替代文字" title="鼠标悬停在图片上时的文字">

</body>
</html>

运行结果

alt替代文字

alt

title悬停文字

悬停文字

超链接标签a

target设置跳转模式:_blank打开新窗口,_self还是当前窗口
href=index.html#top:锚链接,到index.html页面的,id为top的,地方去

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>

  <!--链接标签:
        target设置跳转模式:_blank打开新窗口,_self还是当前窗口

        href=index.html#top:锚链接,到index.html页面的,id为top的,地方去
    -->
  <a href="index.html#top" target="_self">
    图片式链接,点击文字和图片都可以
    <img src="resource/image/李长歌.jpg" width="55px" height="95px">
  </a>

<!-- ==================================================================== -->

  <a href="mailto:123456@qq.com">邮箱链接(邮向指示器),会打开系统的邮箱应用,自动准备给设定的123456@qq.com发送消息</a>

<!-- ==================================================================== -->

  <a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=&site=qq&menu=yes">qq推广<img border="0" src="http://wpa.qq.com/pa?p=2::51" alt="请联系我"/></a>

</body>
</html>