006 认识 HTML 超链接+图片 标签

目录

超链接

1 超链接标签 是一个内联标签

2 超链接标签使用a标识

超链接标签
       跳转的方式
       悬浮显示

3 超链接标签 的特性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>百度</title>
</head>
<body>
<!--超链接标签 跳转功能，-->

<!--href  访问网络资源，-->
<a href="https://baidu.com">百度一下</a>
<!--href 能访问本地资源，-->
<a href="./123.jpeg">照片</a>

<!--可以覆盖当前页面也可以。-->
<a href="https://baidu.com" target="_self">百度两下</a>
<!-- _blank 打开一个新的标签页。-->
<a href="https://baidu.com" target="_blank">百度三下</a>


<!--title显示悬浮的标题-->
<a href="https://baidu.com" target="_blank" title="百度一下">百度四下</a>


<!--如果href 如果为空，跳转到本身这个页面-->
<a href="" target="_blank" title="百度一下">百度五下</a>

<!--如果想达到一个效果是什么也不要变化 ，加#即可-->
<a href="#" target="_self" title="百度一下">百度六下</a>
</body>
</html>

图片标签 img

 img 标签 设置图片的规格，
 属性值:
 src设置图片的来源本地或者远程
 title 设置图片的悬浮显示，
 alt设置获取不到资源显示的文本信息
 img标签可以被嵌套在a标签内


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

<img src="123.jpeg" alt="图片没有了" title="美女图片" height="500px" width="500px">

<!--img标签有加载本地资源和网络资源，如果引用网络资源不在了，设置属性alt -->
<!--鼠标悬浮显示-->
<!--可以设置高宽-->


<!--把图片作为一个a标签  把img标签嵌套到a 标签内-->
<a href="http://baidu.com" title="访问百度">
    <img src="123.jpeg" alt="图片没有了" height="90" width="80">
</a>

</body>
</html>
posted @ 2023-02-09 16:31  mmszxc  阅读(56)  评论(0)    收藏  举报