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

麟-小白

已于 2023-05-14 10:48:56 修改

阅读量593

点赞数 2

分类专栏： HTML基础精讲文章标签： html 前端软件工程开发语言 html5

于 2023-03-26 18:36:54 首次发布

本文链接：https://blog.csdn.net/qq_34025246/article/details/129782301

版权

HTML基础精讲专栏收录该内容

6 篇文章 0 订阅

订阅专栏

写在前面

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

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

【往期回顾】

【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 跳转到页面

<a href="https://www.jd.com/" target="_blank">去京东</a>

<a href="./10_HTML排版标签.html" target="_self">去看排版标签</a>
注意点：

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

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

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

2.3 跳转到文件

<a href="./resource/自拍.jpg">看自拍</a>
<a href="./resource/小电影.mp4">看小电影</a>
<a href="./resource/小姐姐.gif">看小姐姐</a>
<a href="./resource/如何一夜暴富.pdf">点我一夜暴富</a>

<a href="./resource/内部资源.zip">内部资源</a>

<a href="./resource/小电影.mp4" download="电影片段.mp4">下载电影</a>
注意1：若浏览器无法打开文件，则会引导用户下载。

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

2.4 跳转到锚点

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

具体使用方式：

第一步：设置锚点

<a name="test1"></a>

<h2 id="test2">我是一个位置</h2>
注意点：

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

2. name 和 id 都是区分大小写的，且 id 最好别是数字开头。
第二步：跳转锚点

<a href="#test1">去test1锚点</a>

<a href="#">回到顶部</a>

<a href="demo.html#test1">去demo.html页面的test1锚点</a>

<a href="">刷新本页面</a>

<a href="javascript:alert(1);">点我弹窗</a>
2.5 唤起指定应用

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

<a href="tel:10010">电话联系</a>

<a href="mailto:10010@qq.com">邮件联系</a>

<a href="sms:10086">短信联系</a>