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就是指按照搜索引擎的算法
相关文章
|
7月前
|
Java 程序员 数据处理
课时19:Java运算符(位运算符)
课时19介绍Java中的位运算符,涵盖进制转换、位与、位或及移位操作。重点讲解了二进制与其他进制的转换方法,通过具体范例演示了位与和位或运算的过程,并展示了八进制和十六进制的处理方式。此外,还解释了逻辑运算符(&&、||)与位运算符(&、|)的区别及其应用场景,特别是位运算在加密中的应用。
159 5
|
监控 供应链 数据挖掘
ERP系统中的成本控制与降低成本策略解析
【7月更文挑战第25天】 ERP系统中的成本控制与降低成本策略解析
1123 3
|
机器学习/深度学习 Serverless
RAG中的3个高级检索技巧
RAG系统检索的文档可能并不总是与用户的查询保持一致,这是一个常见的现象。当文档可能缺乏查询的完整答案或者包含冗余信息或包含不相关的细节,或者文档的顺序可能与用户的意图不一致时,就会经常出现这种情况。
476 2
|
Python
Python 中如何循环某一特定列的所有行数据
Python 中如何循环某一特定列的所有行数据
166 2
|
域名解析 Kubernetes JavaScript
如何开发一个完整的Helm charts应用实例(1)
如何开发一个完整的Helm charts应用实例(1)
如何开发一个完整的Helm charts应用实例(1)
|
网络安全 PHP 数据安全/隐私保护
云主机搭建WordPress
本文介绍了云主机的优点,以及如何快速注册云主机账户,然后介绍了如何使用CyberPanel来创建云主机并启动WordPress网站。第一步:访问官网注册账号,然后激活账号,绑定结算方式。第二步:使用CyberPanel搭建WordPress,首先是启动CyberPanel应用,接着选择云主机规格后启动创建。第三步:连接CyberPanel控制面板,创建WordPress网站…
265 1
云主机搭建WordPress
|
存储 算法
数据结构和算法——散列表的性能分析(开放地址法的查找性能、期望探测次数与装填因子的关系、分离链接法的查找性能)
数据结构和算法——散列表的性能分析(开放地址法的查找性能、期望探测次数与装填因子的关系、分离链接法的查找性能)
354 0
|
Oracle Java 关系型数据库
Java----CentOS7系统安装jdk1.8
Java----CentOS7系统安装jdk1.8
2359 0
|
JavaScript
element-ui的popover弹出框点击取消
element-ui的popover弹出框点击取消
357 1