img标签中的title和alt属性有什么区别

短命女 2024-03-26 13:51 89阅读 0赞

## img标签中的title和alt属性有什么区别 ##

简介：这里讲解html面试中常常被问到的一个面试题，img标签中title和alt属性的区别。

### 区别 ###

#### 区别一 ####

titile：鼠标移入到图片，然后就会显示出来值。  
alt:图片无法加载的时候，显示出来的值。

演示代码：

<body>
    	<img src="https://p0.ssl.img.360kuai.com/t01a7401fae788d3ee4.jpg?size=1024x1776" 		title="鬼刀">
    </body>

这里红色框中包含的值，就是title的值。![在这里插入图片描述][9d3d080a93ca4ad48781e88fbe78056a.png]

**演示代码**

`<!`DOCTYPE html`>`  
`<`html lang=“en”`>`  
`<`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 alt=“这是alt”`>`  
`<`/body`>`  
`<`script`>`  
`<`/script`>`  
`<`/html`>`

这里是alt的演示效果  
![在这里插入图片描述][72b64303fd65438d82fd5d297986867c.png]

#### 区别二 ####

在seo的层面上，爬虫抓取不到图片的内容，所以前端在img标签的时候为了增加seo的效果，需要加入alt属性来描述这张图片是什么内容或者关键词。

*  注解：SEO就是指按照搜索引擎的算法

[9d3d080a93ca4ad48781e88fbe78056a.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/0b488274d3d14adc8e01bcbbe1131501.png
[72b64303fd65438d82fd5d297986867c.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/bf3c5ad606864ef888236516ca5fad6f.png

发表评论取消回复

表情：

评论列表（有 0 条评论，89人围观）

还没有评论，来说两句吧...

相关阅读

相关 img标签中的title和alt属性有什么区别

img标签中的title和alt属性有什么区别简介：这里讲解html面试中常常被问到的一个面试题，img标签中title和alt属性的区别。区别区别一

短命女/ 2024年03月26日 13:51/ 0 赞/ 90 阅读

相关 HTML中元素和标签有什么区别？

聚沙成塔·每天进步一点点 ⭐ 专栏简介 ⭐ 标签（Tag） ⭐元素（Element） ⭐ 写在最后 --------------------

朱雀/ 2023年10月14日 12:56/ 0 赞/ 43 阅读

相关 img的alt与title有何异同？ strong与em的异同？

a:alt(alt text):为不能显示图像、窗体或applets的用户代理（UA），alt属性用来指定替换文字。替换文字的语言由lang属性指定。(在IE浏览器下会在没有t

叁歲伎倆/ 2023年10月03日 11:13/ 0 赞/ 6 阅读

相关 html语言中img标签代表,HTML IMG标签的属性是有哪些？了解IMG标签的用法

HTML IMG标签的属性是有哪些？IMG的用法了解一下？本篇文章为大家全面的讲解了HTML img标签属性的全部。希望大家都熟悉HTML，都熟悉img标签。在 HTML

╰+哭是因爲堅強的太久メ/ 2022年10月06日 00:49/ 0 赞/ 8 阅读

相关 HTML中img标签及相关属性

img标签及其相关属性，借用书中的一张图片即可说明一切。 ![这里写图片描述][20160516223949805] [20160516223949805]: /ima

浅浅的花香味﹌/ 2022年07月24日 07:13/ 0 赞/ 353 阅读

相关 html中alt和title属性的用法和区别

1. title: 为元素提供额外说明信息例如，给超链接标签a添加了title属性，把鼠标移动到该链接上面是，就会显示title的内容，以达到补充说明或者提示的效果。

╰半夏微凉°/ 2022年06月09日 11:38/ 0 赞/ 316 阅读

相关 title与alt的区别

title与alt的区别：对alt的说明： 1、alt是html的属性 2、alt属性用于元素img input textarea ，用于网页中图片无法正常显示

太过爱你忘了你带给我的痛/ 2022年06月07日 05:21/ 0 赞/ 178 阅读

相关 Alt属性和Title属性

原文：[http://www.456bereastreet.com/archive/200412/the\_alt\_and\_title\_attributes/][h

红太狼/ 2021年11月11日 23:16/ 0 赞/ 487 阅读

相关 html input标签 alt和title 比较

经常用到这两个属性，但是一直没有总结他们的区别。现在我对他们两个的用法做一下总结：相同点：他们都会飘出一个小浮层，显示文本内容。不同点： 1.alt只能是元素的属性，

忘是亡心i/ 2021年07月29日 02:11/ 0 赞/ 420 阅读

相关 img标签中alt属性的作用是什么

标签的 alt 属性指定了替代文本，用于在图像无法显示或者用户禁用图像显示时，代替图像显示在浏览器中的内容。

小灰灰/ 2020年05月14日 09:49/ 0 赞/ 996 阅读