HTML5中图片的知识点与运用（标签，格式）

最新推荐文章于 2024-10-14 21:13:24 发布

Futuregeneratio

最新推荐文章于 2024-10-14 21:13:24 发布

阅读量312

点赞数 5

文章标签： html5 前端 html vscode ide 编辑器

本文链接：https://blog.csdn.net/Futuregeneratio/article/details/136405282

版权

本文介绍了H5中常见的图片格式（如JPEG、GIF、PNG、WebP和Base64），强调了在选择图片格式时的效果一致性原则，并提供了img标签的使用方法和示例，包括src、alt、width和height属性的讲解。

摘要由CSDN通过智能技术生成

哈喽啊，今天小编给大家带来了H5中图片图片标签，格式的知识点和实践！

格式：

面试题：你常用的图片格式有哪些？说一下它的主要特点？

和油漆是一个道理，不同的图片格式特性不一样，使用场合也有所不同。

图片的格式

JPEG(JPG)

- JPEG图片支持的颜色比较多，图片可以压缩，但是不支持透明

- 一般用来保存照片等颜色丰富的图片

GIF

- GIF支持的颜色少，只支持简单的透明，支持动态图

- 图片颜色单一或者是动态图时可以使用gif

PNG

- PNG支持的颜色多，并且支持复杂的透明，不支持动图

- 可以用来显示颜色复杂的透明的图片

专为网页而生的

webp

-谷歌新推出的专门用来表示网页的一种格式

-它具有其他图片格式的所有优点，而且文件格式还很小

-缺点：兼容性不好

base64

-讲图片使用base64编码，这样可以将图片转换为字符，通过字符形式来引入

-一般都是需要和网页一起加载的图片才会使用base64

图片的使用原则：

效果不一致，使用效果好的

效果一致，使用小的

-->

<!--

网页加载流程

第一次请求：加载网页本身，网页的结构，字符

第二次之后请求，加载外部资源，例如图片，外部css文件，js文件等-->

标签：

<!--

使用img标签来向网页中引入一个外部图片，

img这种元素属于替换元素，行内块标签（基于块和行内元素之间，具有两种元素的特点）

4个属性

src 指向图片的引入路径

绝对路径：完整的地址

相对路径：不完整的地址，./或者../

alt 对图片的文字描述，正常情况下，是不显示，当图片引入不成功的时候会显示

对seo推广有好处

width 设置图片的宽度

height 设置图片的高度

注意：一般情况下，我们不会同时设置宽度，和高度

只会设置其一，另外一个浏览器会自适应调整大小

-->

接下来是以上内容的实践：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>图片标签</title>
  </head>
  <body>
      <img src="../0228常用标签/hg.gif" alt="胡歌" height="300"/>
      <img src="../0228常用标签/hg.gif" alt="胡歌" height="300"/>




	</body>
</html>