【HTML系列】第三章 · 图片标签和超链接

写在前面

---

        Hello大家好， 我是【麟-小白】，一位软件工程专业的学生，喜好计算机知识。希望大家能够一起学习进步呀！本人是一名在读大学生，专业水平有限，如发现错误或不足之处，请多多指正！谢谢大家！！！

        如果小哥哥小姐姐们对我的文章感兴趣，请不要吝啬你们的小手，多多点赞加关注呀！❤❤❤ 爱你们！！！

---

目录

写在前面

1. 图片标签

1.1 基本使用

1.2 路径的分类

1.3 常见图片格式

 2. 超链接

2.1 作用

2.2 跳转到页面

2.3 跳转到文件

2.4 跳转到锚点

2.5 唤起指定应用

结语

---

【往期回顾】

【HTML系列】第二章 · HTML基础

【HTML系列】第一章 · HTML入门

【HTML系列】前章 · HTML前序知识

---

【其他系列】

【Java基础系列】（已更新完）

---

1. 图片标签

---

1.1 基本使用

总结：

• 像素（ px ）是一种单位，学到 CSS 时，我们会详细讲解。
• 尽量不同时修改图片的宽和高，可能会造成比例失调。
• 暂且认为 img 是行内元素（学到 CSS 时，会认识一个新的元素分类，目前咱们只知道：块、行内）。

alt 属性的作用：

• 搜索引擎通过 alt 属性，得知图片的内容。—— 最主要的作用。
• 当图片无法展示时候，有些浏览器会呈现 alt 属性的值。
• 盲人阅读器会朗读 alt 属性的值。

---

1.2 路径的分类

• 相对路径：以当前位置作为参考点，去建立路径。

• 注意点：
  • 相对路径中的 ./ 可以省略不写。
  • 相对路径依赖的是当前位置，后期若调整了文件位置，那么文件中的路径也要修改。

• 绝对路径：以根位置作为参考点，去建立路径。
  • 本地绝对路径： E:/a/b/c/奥特曼.jpg 。（很少使用）
  • 网络绝对路径： http://www.atguigu.com/images/index_new/logo.png 。

• 注意点：
  • 使用本地绝对路径，一旦更换设备，路径处理起来比较麻烦，所以很少使用。
  • 使用网络绝对路径，确实方便，但要注意：若服务器开启了防盗链，会造成图片引入失败。

---

1.3 常见图片格式

jpg 格式：

• 概述：扩展名为 .jpg 或 .jpeg ，是一种有损的压缩格式（把肉眼不容易观察出来的细节丢弃了）。
• 主要特点：支持的颜色丰富、占用空间较小、不支持透明背景、不支持动态图。使用场景：对图片细节没有极高要求的场景，例如：网站的产品宣传图等 。—— 该格式网页中很常见。

png 格式：

• 概述：扩展名为 .png ，是一种无损的压缩格式，能够更高质量的保存图片。
• 主要特点：支持的颜色丰富、占用空间略大、支持透明背景、不支持动态图。使用场景：①想让图片有透明背景；②想更高质量的呈现图片；例如 ：公司logo图、重要配图等。

bmp 格式：

• 概述：扩展名为 .bmp ，不进行压缩的一种格式，在最大程度上保留图片更多的细节。
• 主要特点：支持的颜色丰富、保留的细节更多、占用空间极大、不支持透明背景、不支持动态图。
• 使用场景：对图片细节要求极高的场景，例如：一些大型游戏中的图片 。（网页中很少使用）

gif 格式：

• 概述：扩展名为 .gif ，仅支持256种颜色，色彩呈现不是很完整。
• 主要特点：支持的颜色较少、支持简单透明背景、支持动态图。
• 使用场景：网页中的动态图片。

webp 格式：

• 概述：扩展名为 .webp ，谷歌推出的一种格式，专门用来在网页中呈现图片。
• 主要特点：具备上述几种格式的优点，但兼容性不太好，一旦使用务必要解决兼容性问题。
• 使用场景：网页中的各种图片。

base64 格式

• 本质：一串特殊的文本，要通过浏览器打开，传统看图应用通常无法打开。
• 原理：把图片进行 base64 编码，形成一串文本。
• 如何生成：靠一些工具或网站。
• 如何使用：直接作为 img 标签的 src 属性的值即可，并且不受文件位置的影响。
• 使用场景：一些较小的图片，或者需要和网页一起加载的图片。

图片的格式非常多，上面这些，只是一些常见的、我们前端人员常接触到的。

---

 2. 超链接

---

2.1 作用

• 主要作用：从当前页面进行跳转。
• 可以实现：①跳转到指定页面、②跳转到指定文件（也可触发下载）、③跳转到锚点位置、④唤起指定应用。

---

2.2 跳转到页面

去京东

去看排版标签

注意点：

1. 代码中的多个空格、多个回车，都会被浏览器解析成一个空格！

2. 虽然 a 是行内元素，但 a 元素可以包裹除它自身外的任何元素！

想展示多个回车或空格，怎么办呢？ —— 后面会讲。

---

2.3 跳转到文件

看自拍
看小电影
看小姐姐
点我一夜暴富

内部资源

下载电影

注意1：若浏览器无法打开文件，则会引导用户下载。

注意2：若想强制触发下载，请使用 download 属性，属性值即为下载文件的名称。

---

2.4 跳转到锚点

什么是锚点？ —— 网页中的一个标记点。

具体使用方式：

第一步：设置锚点

我是一个位置

注意点：

1. 具有 href 属性的 a 标签是 超链接 ，具有 name 属性的 a 标签是 锚点 。

2. name 和 id 都是区分大小写的，且 id 最好别是数字开头。

第二步：跳转锚点

去test1锚点

回到顶部

去demo.html页面的test1锚点

刷新本页面

点我弹窗

---

2.5 唤起指定应用

通过 a 标签，可以唤起设备应用程序。

电话联系

邮件联系

短信联系

---

结语

---

本人会持续更新文章的哦！希望大家一键三连，你们的鼓励就是作者不断更新的动力