【HTML】input标签中alt属性和title属性的比较
经常用到这两个属性,但是一直没有总结他们的区别。现在我对他们两个的用法做一下总结:
相同点:他们都会飘出一个小浮层,显示文本内容。
不同点:
1.alt只能是元素的属性,而title即可以是元素的属性也可以是标签,例如:<title>标题</title>。
2.alt属性则是用来指定替换文字,只能用在img、area和input元素中(包括applet元素),用于网页中图片无法正常显示时给用户提供文字说明使其了解图像信息。注意,alt是替代图像作用而不是提供额外说明文字的。根据一些SEO人士的说法,使用alt属性还具有搜索引擎优化效果,因为搜素引擎是无法直接读取图像的信息的,alt可以为其提供文字信息所以对搜索引擎比较友好。
<form action = "targetpage.jsp">
<input type = "text" name = "alt">
<input type = "image" src = "picture.jpg" alt = "点击跳转" width = "50" height = "50">
</form>
而title可以用在任何元素上,把鼠标移动到元素上面,就会显示title的内容,以达到补充说明或者提示的效果。
but,通常人们容易搞错的是title和alt这两个属性同时用于img标签的时候。在旧版本的IE浏览器中,鼠标经过图像时显示的提示文字是alt的内容,而忽略了title属性,这个曾经误导了很多人。因此,如果想在IE中显示title的内容,要么title属性和alt一致,要么alt内容为空(“”,空格也不能有)。不过,在新版的IE(IE8及以上)中,已不会出现这种情况了。
另外,当a标签内嵌套img标签时,起作用的是img的title属性。
【HTML】input标签中alt属性和title属性的比较的更多相关文章
- img标签中alt属性与title属性在seo的作用-摘自网友
img标签中alt属性与title属性作用,也许大家比较迷惑,现在给大家举例说明.alt属性是图片的替换文字.title属性规定元素的额外信息,有视觉效果. 目录 alt属性 title属性 ie和f ...
- img标签中alt属性与title属性
alt属性 1.alt属性是考虑到不支持图像显示或者图像显示被关闭的浏览器的用户,以及视觉障碍的用户和使用屏幕阅读器的用户.当图片不显示的时候,图片的替换文字.2.alt属性值得长度必须少于100个英 ...
- HTML的img标签:alt属性和title属性
当浏览器卖主扭曲了标准并且自顾自的不按规则去做一些事,他们可能会造成一些问题,或者至少产生了混淆.例子之一就是一些浏览器处理alt属性(一般会被错误的称作alt标签)的方式,比如拥有大量用户的Wind ...
- Html标签中Alt和Title都是提示性语言标签
在Html标签中Alt和Title都是提示性语言标签,在我们浏览一些网页时,鼠标停留在一张图片或文字链接上时,在鼠标的右下角出现一个提示信息框,对目标进行一定的注释说明,这就是它们的作用. 其中 ...
- HTML语言中img标签的alt属性和title属性的作用与区别
alt属性是在你的图片因为某种原因不能加载时在页面显示的提示信息,它会直接输出在原本加载图片的地方,而title属性是在你鼠标悬停在该图片上时显示一个小提示,鼠标离开就没有了,有点类似jQuery的h ...
- 控制input标签中只能输入数字以及小数点后两位
js 代码如下: /* 控制input标签中只能输入数字 和小数点后两位 */ function checkNum(obj) { //检查是否是非数字值 if (isNaN(obj.value)) { ...
- 关于django中input标签中file类型以及开路由
0825自我总结 关于django中input标签中file类型 1.input提交图片实时展示 <img src="/static/img/default.png" wid ...
- HTML中input标签的alt属性和title属性的比较
经常用到这两个属性,但是一直没有总结他们的区别.现在我对他们两个的用法做一下总结: 相同点:他们都会飘出一个小浮层,显示文本内容. 不同点: 1.alt只能是元素的属性,而title即可以是元素的属性 ...
- img标签中alt和title属性的正确使用
在的img标签有两个属性分别为alt和title,对于很多初学者而言对这两个属性的正确使用都还抱有迷惑,当然这其中一部分原因也是ie浏览器所导致的.正确的使用这两个属性除了可以提高图片的搜索能力外,在 ...
随机推荐
- Apache+wsgi+flask部署
flask自带的web server是开发用途,并不适用与发布,需要借助专业的web服务器. 配置的坑无数,Apache部署,403禁止,莫名其妙无法访问,500内部错误把我搞得崩溃了. 重点参考: ...
- ESXI 6.5 从载到安装
下载ESXI 访问官网 https://www.vmware.com 到download,选择vsphere 下载esxi https://my.vmware.com/en/group/vmware/ ...
- FastDFS_v4.06+nginx-1.4.2配置详解
径不带group名(storage只有一个group的情况),如/M00/00/00/xxx: location /M00 { ngx_fastdfs_module; ...
- vsphere产品下载列表
https://my.vmware.com/cn/web/vmware/info/slug/datacenter_cloud_infrastructure/vmware_vsphere_with_op ...
- 从#!/bin/bash中想到的...
罪过罪过,开发了N年的SHELL,竟然第一次思考#!/bin/bash是啥意思?真是怀疑以前的的代码是咋开发出来的- 如果要解释#!/bin/bash是啥意思?为啥每个SHELL脚本第一行都写它哪?首 ...
- vuejs组件交互 - 03 - vuex状态管理实现组件交互
组件交互模式的使用场景 简单应用直接使用props down,event up的模式就可以了 小型应用使用事件中心模式即可 中大型应用使用vuex的状态管理模式 vuex 包含要管理的应用数据和更新数 ...
- Cocos开发小游戏如何实现微信排行榜
当游戏开发进入尾声,要引入微信数据的时候,需要了解和微信相关的接口了. 关系数据链 开放数据域 相关接口如下: wx.getFriendCloudStorage() 获取当前用户也玩该小游戏的好友的用 ...
- https 简介学习
https://program-think.blogspot.com/2014/11/https-ssl-tls-1.html https://program-think.blogspot.com/2 ...
- MySQL:Unsafe statement written to the binary log using statement format since BINLOG_FORMAT = STATEMENT. INSERT...
1:错误日志大量错误 150602 14:40:02 [Warning] Unsafe statement written to the binary log using statement form ...
- Linux内存管理(转)
一.内核空间 1.1 页 页(page)是内核的内存管理基本单位. ==> linux/mm_types.h struct page { page_flags_t flags; 页标志符 ato ...