图片的title和alt属性区别

图片的title和alt属性是初学者容易混淆的。125网页设计给大家介绍下title和alt属性的用法及区别

图片的title和alt属性是初学者容易混淆的。中国网页设计给大家介绍下title和alt属性的用法及区别

一、图片的alt属性

1、alt属性是考虑到不支持图像显示或者图像显示被关闭的浏览器的用户,当图片不显示的时候,图片的替换文字。

2、alt属性值得长度必须少于100个英文字符

3、没有特别意义的图片,可以写alt=””

4、alt属性是搜索引擎判断图片与文字是否相关的重要依据,alt属性添加到img主要的目的才是为了SEO

二、img标签title属性

1、title属性并不是必须的。

2、title属性规定元素的额外信息,有视觉效果,当鼠标放到文字或是图片上时有文字显示。

3、title属性更多倾向于用户体验的考虑。

title和alt用法:

   <p Title="给链接文字提示">文字</p>

   <a href="#" Title="给链接文字提示">文字</a>

   <img src="图片.gif" alt="给图片提示">

 

title和alt的区别

alt属性还具有搜索引擎优化效果,因为搜素引擎是无法直接读取图像的信息的,alt可以为其提供文字信息所以对搜索引擎比较友好。

而title可以用在任何元素上,把鼠标移动到元素上面,就会显示title的内容,以达到补充说明或者提示的效果。

在<image>标签中,alt属性的性质是通过文字代替图片内容,而title属性的性质是关于图片的注释语言。

125jz网原创文章。发布者:江山如画,转载请注明出处:http://www.125jz.com/5098.html

(0)
江山如画的头像江山如画管理团队
上一篇 2020年2月23日 上午10:53
下一篇 2020年2月23日 上午11:22

99%的人还看了以下文章

  • 实现网页全屏和退出全屏JS代码,多浏览器兼容

    实现网页全屏和退出全屏JS代码,兼容主流浏览器如:谷歌、火狐、360等。   <!DOCTYPE html> <html> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <t…

    2019年2月15日
    4.9K0
  • 22个HTML5的初级技巧

    本文总结了22个HTML5的初级技巧,希望能对你进一步学习好HTML5会有所帮助。

    2018年3月18日
    3.0K0
  • 第6课:学习更多HTML元素

    到现在,你有没有独立完成过一个网页?你可以的,看看下面的例子: <html> <head><title>125建站网|www.125jz.com</title></head> <body> <h1>一级标题</h1><p>一些文字。。。</p&g…

    2018年1月20日
    9.7K0
  • 纯CSS制作红色网站二级下拉导航菜单

    纯CSS制作红色网站二级下拉导航菜单,代码非常简洁,适合修改后使用,入门就能掌握。 二级下拉导航菜单HTML代码: <nav> <ul> <li><a href=”#”>首页</a></li> <li><a href=”#”>电影</a> <ul…

    2019年4月17日
    13.7K0
  • js实现两个页面表单传值并接收

    网页制作时,需要两个页面之间传值,通过JS就可轻松实现。 js 实现两个页面表单传值并接收源码 A页面: <input type=”text” id=”txt”> <input type=”button” value=”测试” onclick=”test()”/> <SCRIPT LANGUAGE=”JavaScript”&gt…

    2019年7月10日
    5.1K0
  • css布局基础:定位练习1

    主要知识点: 1、5种常用定位:静态定位/相对定位/绝对定位/固定定位/吸附定位(磁铁定位) position:static/relative/absolute/fixed/sticky。 2、除静态定位外,都可以用left/top/bottom/right/z-index属性进行移动。 效果图: 效果说明:故宫文字段落设置背景色黑色透明,覆盖在图片底部。 …

    2020年4月4日
    7.2K0

发表回复

登录后才能评论