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

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

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就是指按照搜索引擎的算法
相关文章
|
6月前
|
搜索推荐
img标签上title与alt属性的区别是什么?
img标签上title与alt属性的区别是什么?
140 0
|
编解码
HTML 里 img 元素的 src 和 srcset 属性有何区别?
HTML 里 img 元素的 src 和 srcset 属性有何区别?
|
24天前
|
前端开发
【HTML】img标签和超链接标签
【HTML】img标签和超链接标签
35 2
|
25天前
|
搜索推荐
<img>标签上的 title 属性与alt 属性的区别
<img>标签上的 title 属性与alt 属性的区别
89 0
|
4月前
|
XML 数据采集 机器学习/深度学习
使用 XPath 定位 HTML 中的 img 标签
使用 XPath 定位 HTML 中的 img 标签
|
前端开发
前端第二课,HTML,alt,title,width/heigh,border,<a>超链接,target,tr,td,th
前端第二课,HTML,alt,title,width/heigh,border,<a>超链接,target,tr,td,th
|
6月前
|
搜索推荐 前端开发 UED
元素的alt和title属性相关细节知识
元素的alt和title属性相关细节知识
|
前端开发 JavaScript 搜索推荐
img标签的alt和title有什么不同?媒体查询是什么?原型链和继承的六种实现方式
当图片加载不出来的时候,就会在图片未显示的地方出现一段 alt 设置的属性内容。
05 - 超链接 a 标签+ 图片标签img
05 - 超链接 a 标签+ 图片标签img
155 0
|
编解码 前端开发 JavaScript
img标签中的srcset属性有什么用?
img元素的srcset属性用于浏览器根据宽、高和像素密度来加载相应的图片资源。 也就是说,我们不需要使用JavaScript也可以实现分辨率自适应。
382 0