img标签（image）的简介：

当我们要想在网页向当前界面中引入一个外部图片，可以使用img 标签。（img标签是一个自结束标签，即：不是成对出现的）

图片类型：常见图片格式：bmp,jpg,png,tif,gif,pcx,tga,exif,fpx,svg,psd,cdr,pcd,dxf,ufo,eps,ai,raw等······

注意：能在网页中插入的图片格式类型有：jpg(jpeg)、gif、png、bmp等。像psd、ai等这些是不能被插入到网页中的。

HTML插入图片原理：插入图片的原理实际上是把图片上传到服务器，插入的是图片的引用地址。

img标签的属性：src、alt、title，以及其他属性。

src属性：

src 是必选属性，它是 source 的简称，用来指明图片的地址或者路径。src 支持多种图片格式，比如 jpg、png、gif 等。src 可以使用相对路径，也可以使用绝对路径（相对路径与绝对路径这里就不展开说了）。

alt属性：

alt 是可选属性，用来定义图片的文字描述信息。当由于某些原因（例如图片路径错误、网络连接失败）导致图片无法加载时，就会显示 alt 属性中的信息（它也可以在你搜索时，显示出相关alt值的图片（有点像关键字搜索的意思））。

title属性：

这个属性其实不止用于图片，任何元素都可以使用title属性。它的作用是：当用户把鼠标移动到元素上时，就会出现title的内容，起到对图片说明的作用，其实质就是对图片的一种备注或者注释通俗来讲，alt属性的实质是通过文字来代替图片的内容，而title属性的实质是对图片的描述或者注释

其他属性：width、height属性（这个用来设置图片的宽高）

imag代码演示（不展示效果）：

<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><img src="./1.jpg" alt="美女" ><img src="./2.jpg" alt="美女">
</body>
</html>

img这种元素属于替换元素（基于块和行内元素之间,具有两种元素的特点）（块元素和行内元素以后说）

属性：

src 属性指定的是外部图片的路径。（绝对路径于相对路径都可以看需求）（路径规划和超链接是一样的）

alt 图片的描述，这个描述默认情况下不会显示，有些浏览器在图片无法加载时显示，同时搜索引擎会根据alt中的内容来识别图片，如果不写alt属性图片不会被搜索引擎。

widht 图片的宽度（单位是像素）。

height 图片的高度。

注意：宽度和高度中如果只修改了一个，另一个则会等比例缩放，一般情况下，不建议修改图片大小，一般需要多大就剪多大。

图片的格式：

jpeg（jpg）：

-支持的颜色比较丰富，不支持透明效果，不支持动图。

-一般用来显示图片。

gif：

-支持的颜色比较少，支持简单透明，支持动图。

-颜色单一的图片、动图。

png：

-支持的颜色丰富秒支持复杂透明，不支持动图。

-颜色丰富，复杂透明的图片。（专为网页而生）

webp：

-这种格式是谷歌新推出的专门来用表示网页中的图片的一种格式。

-具备其他图片格式的所有优点，而且文件还特别的小。

base64：

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

-一般都是一些需要和网页一起加载的图片才会使用base64。（可以在网上直接转换base64）

简单来说就是：效果一样，用图片作用内存小的，效果不一样，用效果好的。

HTML中的图片标签相关推荐

小程序中image 图片标签的使用
小程序中image 图片标签的使用(注意这里和html的img的不同) 一. src 指定要加载的图片的路径图片存在默认的宽度和高度 320 * 240 原图大小是 200 * 100 二. mod ...
【HTML 教程系列第 17 篇】什么是 HTML 中的图片标签 img
这是[HTML 教程系列第 17 篇],如果觉得有用的话,欢迎关注专栏. 文章目录一:什么是图片标签 img 二:img 的属性 1:src 属性 2:alt 属性 3:title 属性 4:wid ...
HTML中的图片标签＜img＞
一:img标签--向网页中引入一个外部图片, img标签自结束标签 img这种元素属于替换元素(基于块和行内元素之间,具有两种元素的特点) 1:属性: src:设置一个外部图片的路径,路径规则跟超链接 ...
在vscode的html文件中写入图片标签显示“二进制文件”无法打开解决办法（自记录）
学习html过程中练习创建包含图文的新闻类网页,发现图片标签无效(新闻文字内容来源网络,侵删) vscode显示图片为二进制文件,不能打开的问题自己检查网页代码许久没有发现问题,在浏览器也没有找到与 ...
HTML中的图片标签，真的如你认为的那么简单吗？
今天讨论一个很有意思的话题: HTML 中的图片真的那么简单吗? HTML 中的图片 <img>:图像嵌入元素 MDN Web Docs 地址:https://developer.mozi ...
java正则表达式提取html中的图片标签img src=
需求:将网页分享给其他人,JShare的分享模板如下: 其中有标题(红色).内容(黄色).图片(绿色),但是接口中没有给图片的URL,而html格式的内容中有<img src="htt ...
在html语言中段落标签是,HTML的基本结构、段落标签、空格标签、标题标签、图片标签详解...
本次主要给大家介绍下HTML的基本结构.段落标签.空格标签.标题标签.图片标签的用法,用一种相对通俗一点的语言,容易懂的文字让大家快速掌握html.尽量不用或少用专业术语.以下所写的内容希望能帮助到大 ...
java提取word中的图片
一.项目中需要用到word的导入,word 里面的内容由图片,文本,公式等,步骤为:将文档另存为xml格式 1.提取图片,如下是word xml 中的图片标签,具体分析下内容,首先需要获取 w:dra ...
uniapp 对富文本中的图片预览及长按图片识别二维码/保存图片
uniapp 对富文本中的图片预览及长按图片识别二维码/保存图片富文本一定要使用uniapp提供的<rich-text>标签,不要使用 v-html 因为<rich-text> ...

HTML中的图片标签