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>
点击“推荐文章”、“推荐音乐”、“推荐电影”三个文字，就可以跳转到下面的文字
