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

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

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

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

区别

区别一

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

演示代码：

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

这里红色框中包含的值，就是title的值。在这里插入图片描述

演示代码

<!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`

</head>
<body>
<img alt=“这是alt”>
</body>
<script>
</script>
</html>

这里是alt的演示效果
在这里插入图片描述

区别二

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

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

发表评论

表情：
评论列表 （有 0 条评论，151人围观）

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

相关阅读

    相关 HTML--img标签中的属性

    src属性：图像的地址URL alt属性：图像的文字说明 width属性：定义图像的宽度（注意：指定一个宽度，高度会随指定的宽度相应等比放大或缩小）利用width属性实

    红太狼红太狼/ 0 赞/ 74 阅读

    相关 html input标签 alt和title 比较

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

    忘是亡心i忘是亡心i/ 0 赞/ 496 阅读