HTML学习：图片格式—

HTML学习：图片格式——超链接

一、图片格式

1.jpg格式

概述:扩展名为.jpg 或.jpeg ，是一种有损的压缩格式(把肉眼不容易观察出来的细节丢弃了)。

主要特点:支持的颜色丰富、占用空间较小、不支持透明背景、不支持动态图。

使用场景:对图片细节没有极高要求的场景，例如:网站的产品宣传图等。--该格式网页中很常见。

2.png格式

概述:扩展名为.png，是一种无损的压缩格式，能够更高质量的保存图片。

主要特点:支持的颜色丰富、占用空间略大、支持透明背景、不支持动态图。

使用场景:①想让图片有透明背景;②想更高质量的呈现图片;例如:公司logo图、重要配图等。

3.bmp格式

概述:扩展名为.bmp，不进行压缩的一种格式，在最大程度上保留图片更多的细节。

主要特点:支持的颜色丰富、保留的细节更多、占用空间极大、不支持透明背景、不支持动态图。

使用场景:对图片细节要求极高的场景，例如:一些大型游戏中的图片。(网页中很少使用)

4.gif格式

概述:扩展名为.gif，仅支持256种颜色，色彩呈现不是很完整。

主要特点:支持的颜色较少、支持简单透明背景、支持动态图。

使用场景:网页中的动态图片。

5.webp 格式

概述:扩展名为.webp，谷歌推出的一种格式，专门用来在网页中呈现图片。

主要特点:具备上述几种格式的优点，但兼容性不太好，一旦使用务必要解决兼容性问题。

使用场景:网页中的各种图片。

6.base64 格式

(1)本质:一串特殊的文本，要通过浏览器打开，传统看图应用通常无法打开。

(2)原理:把图片进行 base64 编码，形成一串文本。

(3)如何生成:靠一些工具或网站。

(4)如何使用:直接作为 img 标签的 src 属性的值即可，并且不受文件位置的影响。

(5)使用场景:一些较小的图片，或者需要和网页一起加载的图片。

二、超链接_跳转页面

1.相关代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>超链接_跳转页面</title>
</head>
<body>
<!--        新页签-->
    <a href="https://rank.kkj.cn/Computer77.shtml" target="_blank">快科技</a>
<!--        当前页签-->
    <a href="http://www.netbian.com/mei/" target="_self">去看美女</a>
<!--        也可以写行内标签-->
    <a href="./HTML排版标签.html">去排版标签</a>

</body>
</html>

2.显示结果

三、超链接_跳转文件

1.相关代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>超链接_跳转文件</title>
</head>
<body>
<!--        浏览器可以直接打开的文件-->
    <a href="./documents/640.png">干啥？</a>
    <a href="./documents/641.gif">写作业！</a>
    <a href="./documents/heiheihei.mp4">生日快乐！</a>
    <a href="./documents/comment.pdf">个人简历！</a>
<!--        浏览器不可以直接打开的文件-->
    <a href="./documents/cisptext.zip">啥东西？</a>
<!--        浏览器可以打开，但要强制出发下载-->
    <a href="./documents/heiheihei.mp4" download="好看">生日哈快乐！</a>
    <a href="./4.HTML_超链接_跳转锚点.html#atm" >看其他页面中的奥特曼锚点</a>

</body>
</html>

2.显示结果

四、超链接_跳转锚点

1.相关代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>超链接_跳转锚点</title>
</head>
<body>
    <a href="#htl">看灰太狼</a>
    <a href="#atm">看奥特曼</a>

    <p>我是一只羊，一只肥美的羊</p>
    <img src="./pictures/喜羊羊.jpg" alt="喜羊羊">

    <a name="htl"></a>
    <p>我是一只狼，一只很邪恶的狼</p>
    <img src="./pictures/灰太狼.jpg" alt="灰太狼">

    <p id="atm">我是一只奥特曼，一只很能打的奥特曼</p>
    <img src="./pictures/奥特曼.jpg" alt="奥特曼">

    <p>我是一只羊，一只很丑的怪兽</p>
    <img src="./pictures/大怪兽.jpg" alt="怪兽">

    <p>整体的介绍完毕了</p>
    <a href="#">回到顶部</a>
    <a href="">刷新页面</a>
    <a href="javascript:alert(666);">点我弹窗</a>

</body>
</html>