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的值。
演示代码
<!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的演示效果
区别二
在seo的层面上,爬虫抓取不到图片的内容,所以前端在img标签的时候为了增加seo的效果,需要加入alt属性来描述这张图片是什么内容或者关键词。
- 注解:SEO就是指按照搜索引擎的算法