`

HTML alt属性和title属性

阅读更多

 

替换文字(alt text)并不是用来做提示(tool tip),或者更加确切的说,它并不是为图片提供额外说明信息的。相反地,title属性才应该用来为元素提供额外说明信息。这些信息在大部分图像浏览器里显示为提示(tool tip),虽然制造商可以任意采取其他方式渲染title属性的文字。

Alt属性
 为不能显示图像、窗体或applets的用户代理(UA),alt属性用来指定替换文字。替换文字的语言由lang属性指定。
Alt属性(注意是“属性”而不是“标签”)包括替换说明,对于图像和图像热点是必须的。它只能用在img、area和input元素中(包括applet元素)。对于input元素,alt属性意在用来替换提交按钮的图片。比如:<input type="image" src="image.gif" alt="Submit" />.
使用alt属性是为了给那些不能看到你文档中图像的浏览者提供文字说明。这包括那些使用本来就不支持图像显示或者图像显示被关闭的浏览器的用户,视觉障碍的用户和使用屏幕阅读器的用户。替换文字是用来替代图像而不是提供额外说明文字的。
   
 说白了,比如 img alt是图片不存在时.显示的图片框里面的内容(你可以尝试给图片的src指定个不存在的图片),就可以看到alt效果了.

     title 属性 

 

 

title属性可以用在除了base,basefont,head,html,meta,param,script和title之外的所有标签。但是并不是必须的。可能这正是为什么很多人不明白何时使用它。

使用title属性提供非本质的额外信息。大部分的可视化浏览器在鼠标悬浮在特定元素上时显示title文字为提示信息(tool tip),然而这又由制造商来决定如何渲染title文字。一些浏览器会将title文字显示在状态栏里。比如早期版本的Safari浏览器。

title属性有一个很好的用途,即为链接添加描述性文字,特别是当连接本身并不是十分清楚的表达了链接的目的。这样就使得访问者知道那些链接将会带他们到什么地方,他们就不会加载一个可能完全不感兴趣的页面。另外一个潜在的应用就是为图像提供额外的说明信息,比如日期或者其他非本质的信息。

title属性值可以比alt属性值设置的更长。不过要注意的是,有些浏览器会截断过长的文字(比如工具提示或其他)。比如Mozilla核心的浏览器只能显示最先的60个字符。这被认为是一个Mozilla bug,这是你要注意的。
分享到:
评论

相关推荐

    HTML教程:title属性与alt属性

    XHTML是CSS布局的基础,webjx.com一直强调XHTML知识的学习,重视语义和文档的...title 和alt 属性,给我最直观的感受就是,可以提高文档的适应性,并合理提高关键词密度。在XHTML标准里,图片的alt 属性是必须的。 XHTM

    HTMLimg标签的alt属性和title属性使用介绍

    例子之一就是一些浏览器处理alt属性(一般会被错误的称作alt标签)的方式,比如拥有大量用户的Windows的IE浏览器。 替换文字(alt text)并不是用来做提示(tool tip),或者更加确切的说,它并不是为图片提供额外...

    i18next html 国际化

    [title]title属性的字符串名称”可以同时给元素添加alt属性和title属性; 5、data-i18n-html属性类似于html()方法,可以识别语言文件中含有html标签的字符串; 6、通过存取cookie使得刷新页面不改变当前页面语言;

    正确使用HTML title属性的一些建议

    很多新手朋友么对title与alt两个属性有所混淆,往往用title属性代替img元素的alt属性或作为图片的标题等等,这些行为都是被禁止的,不明白的朋友可以参考下本

    ALT-标题「Alt-Titler」-crx插件

    填充空白图片TITLE属性与ALT属性中的内容(如果找到)。 当您在图像上设置了ALT属性但未设置TITLE属性的页面上时,将鼠标悬停在图像上时将看不到工具提示文本。 Alt-Titler通过将ALT属性内容复制到TITLE属性(如果...

    零基础学HTML CSS源代码

    padding基本语法和用法.html 复合属性padding基本语法和用法。 padding-bottom用法.html 属性padding-bottom用法。 padding-left用法.html 属性padding-left用法。 padding-right用法.html 属性...

    HTML开发王

    8.2.3 图片的说明(alt属性、longdesc属性) 8.2.4 图片的边框(border属性) 8.2.5 图片的占位符 8.2.6 图片和文字的对齐(align属性) 8.2.7 图片的水平间距和垂直间距(hspace属性和vspace属性) 8.3 为图片建立超链接...

    PHP爬虫实例-4K壁纸爬取测试

    只要爬取.clearfix li&gt;a&gt;img元素里面的src属性和alt属性即可获得图片url和图片标题,实现代码如下 // 采集规则 $rules = [ // 表示 获取类型为.clearfix li a img 元素的 alt属性值 "title"=&gt;[".clearfix li a ...

    JavaScript Title、alt提示(Tips)实现源码解读

    我们知道给某些HTML标签加上title属性后,这个标签对象在浏览的时候,鼠标移上去就会有一个小提示框出来,并显示title定义的内容。

    HTML+css知识总结(建议收藏)

    属性有title显示内容,height与width宽高,alt无法显示显示备注,border图片边框宽度。 链接标签:a标签后必跟herf=“x”,其中x可以引用外部的链接或者内部链接,内部链接可以分为绝对路径与相对路径。上级路径...

    从入门到精通HTML5——PDF——网盘链接

     12.3 新增的属性和废除的属性 234  12.3.1 新增的属性 234  12.3.2 废除的属性 236  12.4 全局属性 237  12.4.1 contentEditable属性 237  12.4.2 designMode属性 238  12.4.3 hidden属性 239  12.4.4 ...

    CSS 控制字符宽度省略号效果 兼容浏览器

    兼容浏览器的CSS控制字符宽度省略号效果,是... 看下面的HTML代码: &lt;ul&gt; &lt;li&gt;&lt;a&gt;使用CSS最佳习惯 &lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a&gt;说说XHTML中的alt属性和title属性 &lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a&gt;IE中伪类:hover的使用及BUG &lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;

    解读html5关于html5的应用与认识

    HTML 5 特性 ...注意:没有一个 div 标签,id 或 class 属性被使用到 — 简洁、小巧和更语义化的标记 (View Demo)。你仍可以用 HTML5 Validator 或 W3C Markup Validation Service 来检测你的 HTML5 文档。

    前端css+html+布局笔记

    详尽的前端笔记,包含html和css部分,由xmind8做的笔记。css部分:编写的位置 1.内联样式 将样式编写到标签的style属性中 ;"&gt; 这种样式只会对当前标签起作用,不能对样式进行复用,不方便后期维护,不推荐使用...

    js提示信息jtip封装代码,可以是图片或文章

    至于这个功能有什么好处呢,你听我慢慢道来,首先title或alt属性所带来的提示太过于简单,样式也无法修改,而且鼠标要移到元素上等待1至3秒钟才会显示出来,内容也只有简单的文字,无法加入html内容。所以呢,综上所...

    jQuery操作attr、prop、val()/text()/html()、class属性

    $('img').attr('alt','不错哦');  获取属性 // 传需要获取的属性名称,返回对应的属性值 // $obj.attr(name) // 用法举例 var oTitle = $('img').attr('title'); alert&#40;oTitle&#41;;  移除属性 // 参数:...

    面试宝典面试宝典面试宝典面试宝典面试宝典面试宝典面试宝典

    1、前端需要注意哪些SEO - 合理的`title`、`description`、`keywords...### 2、``的`title`和`alt`有什么区别 - 通常当⿏标滑动到元素上的时候显示 - `alt`是``的特有属性,是图⽚内容的等价描述,⽤于图⽚⽆法加载时显

Global site tag (gtag.js) - Google Analytics