当前位置：首页 > news >正文

005+limou+HTML——（5）HTML图片和HTML超链接

news 2025/6/29 2:39:56

1、图片标签<img>

（1）图片标签属性

[src]：用于指定这个图片所在的路径，常使用相对路径，比较少使用绝对路劲。如果图片路径有错误的话，就会发生图片显示错误
[alt]：用于指定图片的提示文字，这个描述文字是给收索引擎看的，当图片无法显示时，就会显示这个属性的文字
[title]：用于指定图片的提示文字，这个描述文字是给用户看的，当鼠标指针移动到图片上时，会显示这个属性的文字

<!DOCTYPE html>
<html><head><meta charset="utf-8"/><title>网页标题</title></head><body><img src="D:\limou_picture\bd90a92f3ac21ba8-1650856738514.png" alt="阿鸠" title="阿鸠和她的小伙伴" /></body>
</html>

在这里插入图片描述

（2）图片格式

图片格式一般有两种：像素图（位图）、矢量图（向量图）

像素图：由像素点构成，无论是放大还是缩小都会有一定程度的失真
- .jpg格式，很好处理大面积色调的图片，适合存储颜色丰富的复杂图片，例如照片、高清图片。但是一般体积较大，并且不支持保存透明背景
- .png格式，是一种无损格式，可以无损压缩以保证页面打开速度。此外png体积小，并且支持保存透明背景，不过不适合存储颜色丰富的图片
- .gif格式，图片效果最差，但是适合制作动画。在qq和微信发的表情包大都是gif格式的
- 对于像素图一般采用Photoshop软件处理
矢量图：是一种通过数学描述的方式来记录内容的图片格式，优点是图片可以任意放大缩小或旋转，不会有失真，缺点是难以表现色彩丰富的图片
- 常见格式有，.ai、.cdr、.fh、.swf，其中“.swf”格式是最常用的
- 对于矢量图一般采用illustrator、CorelDRAW软件处理

2、超链接标签<a>

（1）外部链接：跳转到其他外部网站

①文字超链接

②图片超链接

<!DOCTYPE html>
<html><head><meta charset="utf-8"/><title>网页标题</title></head><body><a href="https://www.baidu.com">一个百度的链接</a><a href="https://bilibili.com"><img src="D:\limou_picture\WEB\按钮-赞_o.png" alt="bilibili" title="bilibili网站"/></a></body>
</html>

在这里插入图片描述

③[target]属性

默认情况下，超链接都是在当前浏览器窗口打开新窗口，不过可以使用target属性改变这一默认
在这里插入图片描述
一般情况下只会用“_blank”这一个值就行

<!DOCTYPE html>
<html><head><meta charset="utf-8"/><title>网页标题</title></head><body><a href="https://www.baidu.com">一个百度的链接</a><a href="https://bilibili.com" target="_blank"><img src="D:\limou_picture\WEB\按钮-赞_o.png" alt="bilibili" title="bilibili网站"/></a></body>
</html>

在这里插入图片描述

（2）内部链接：指向内部链接指向“自身网站的页面”

①我们尝试把之前做的html文档链接进去，先建一个文件夹

在这里插入图片描述

<!DOCTYPE html>
<html><head><meta charset="utf-8"/><title>网页标题</title></head><body><a href="https://www.baidu.com">一个百度的链接</a><a href="https://bilibili.com" target="_blank"><img src="D:\limou_picture\WEB\按钮-赞_o.png" alt="bilibili" title="bilibili网站"/></a><br/><a href="website\my_web_2023_2_28.html" target="_blank">跳转页面1</a><br/><a href="website\my_web_2023_3_1.html" target="_blank">跳转页面2</a><br/><a href="my_web_2023_3_2.html" target="_blank">跳转页面3</a><br/></body>
</html>

在这里插入图片描述

②锚点链接主要是为了跳转到当前网页的某处，其实也算内部链接的一种

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>网页标题</title></head><body><div><a href="#article">推荐文章</a><br/><a href="#music">推荐音乐</a><br/><a href="#movie">推荐电影</a><br/></div><p>……</p><p>……</p><p>……</p><p>……</p><p>……</p><p>……</p><p>……</p><p>……</p><div id="article"><h3>推荐文章</h3><ul><li>计算机网络基础</li><li>深入浅出Java</li><li>C primer puls</li></ul></div><p>……</p><p>……</p><p>……</p><p>……</p><p>……</p><p>……</p><p>……</p><p>……</p><div id="music"><h3>推荐音乐</h3><ul><li>Ether Strike (以太打击)('Divine Mercy' Extended)</li><li>K-forest、Seiya komori - Break Over</li><li>World.Execute (Me) ;</li></ul></div><p>……</p><p>……</p><p>……</p><p>……</p><p>……</p><p>……</p><p>……</p><p>……</p><div id="movie"><h3>推荐电影</h3><ul><li>游戏人生-零</li><li>天气之子</li><li>夏日幻魂</li></ul></div><p>……</p><p>……</p><p>……</p><p>……</p><p>……</p><p>……</p><p>……</p><p>……</p></body>
</html>