HTML img标签 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        a {
            text-decoration: none; #去除超链接文字底部横线
        }
        a span{
            color:gray; #设置超链接文字颜色：灰色
        }
        #i1 {
            text-decoration: none;
        }
        #i2 span{
            color:gray;
        }
    </style>
</head>
<body>
<img width="300" height="200" src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" alt="百度图片" title="百度"> #src:展示图片；alt：图片获取失败输出“百度图片”；title：浮标签；width=图片的宽度 height=图片的高度
<a href="https://www.baidu.com"><img width="300" height="200" src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" alt="百度图片" title="百度">百度1</a> #百度文字=图片功能
<a href="https://www.baidu.com"><img width="300" height="200" src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" alt="百度图片" title="百度"><span>百度2</span></a>
<a id="i1" href="https://www.baidu.com"><img width="300" height="200" src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" alt="百度图片" title="百度"><span>百度3</span></a>
<a id="i2" href="https://www.baidu.com"><img width="300" height="200" src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" alt="百度图片" title="百度"><span>百度4</span></a> #id:唯一表示（css代码调用）；a.href:跳转地址；img.width=图片的宽度；img.height=图片的高度；img.src:展示超链接图片；img.title浮标签；img.target：（_blank）打开新的界面，（_self）本界面跳转；span：百度文字软连接
</body>
</html>

 

posted @ 2022-05-17 20:30  呼长喜  阅读(74)  评论(0)    收藏  举报