【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 基本使用

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

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

alt 属性的作用:

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

1.2 路径的分类

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

【HTML系列】第三章 · 图片标签和超链接_第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 作用

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

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


2.2 跳转到页面


去京东

去看排版标签
注意点:
1. 代码中的多个空格多个回车,都会被浏览器解析成一个空格!
2. 虽然 a 是行内元素,但 a 元素可以包裹除它自身外的任何元素!
想展示多个回车或空格,怎么办呢? —— 后面会讲。

2.3 跳转到文件


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

内部资源

下载电影
注意1:若浏览器无法打开文件,则会引导用户下载。
注意2:若想强制触发下载,请使用 download 属性,属性值即为下载文件的名称。

2.4 跳转到锚点

什么是锚点? —— 网页中的一个标记点。
具体使用方式:
第一步:设置锚点



我是一个位置

注意点:
1. 具有 href 属性的 a 标签是 超链接 ,具有 name 属性的 a 标签是 锚点
2. name id 都是区分大小写的,且 id 最好别是数字开头。

2.5 唤起指定应用

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


电话联系

邮件联系

短信联系


结语


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

你可能感兴趣的:(HTML基础精讲,html,前端,软件工程,开发语言,html5)