在图像标签img中，除了常用的宽度width和高度height属性之外，还有两个比较重要并且也会用到的属性，就是alt和title，这都是用来显示图片内容的具体信息的，但是这两个属性也有不同的地方。alt 用来给图片来提示的，title用来给链接文字或普通文字提示的。

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>图片的alt和title属性</title>

 </head>

     <body>

        <img src="song.jpg" width="100px" height="100px" alt="月亮"/>

     <!--alt指的是当图片名字不正确或者当图片的路径有错误时，在本来显示图片的位置里显示出alt的内容，以方便自己或者用户识别该图片是干什么的-->

         <img src="song.jpg" width="100px" height="100px" title="月亮"/>

     <!--title指的是当图片名字不正确或者当图片的路径有错误时，在本来显示图片的位置里也会显示出alt的内容，并且当图片名字、路径都正确时，当鼠标移到图片的区域范围内，也会显示出title的信息-->

     </body>

 </html>

　　在标签中经常会用到alt标签，这对于seo的优化是有一定的帮助。

img中alt和title属性的区别的更多相关文章

  1. img标签中alt和title属性的正确使用

    在的img标签有两个属性分别为alt和title,对于很多初学者而言对这两个属性的正确使用都还抱有迷惑,当然这其中一部分原因也是ie浏览器所导致的.正确的使用这两个属性除了可以提高图片的搜索能力外,在 ...

  2. CSS中alt和title属性的正确使用

    1.在<img>标签中的使用 alt:全称为alttext,实质是当图片无法正确显示时用于替换(在IE下同时起到了title的作用,即鼠标滑过时文字提示): title:鼠标经过时文字提示 ...

  3. img图片标签alt和title属性的区别

    alt 用于图片没显示图片显示区域显示说明文字title 表示鼠标图片停留显示悬浮框其显示文字

  4. input中id和name属性的区别。

    input中id和name属性的区别. 做网站很久了,但到现在还没有搞明白input中name和id的区别,最近学习jquery,又遇到这个问题,就在网上搜集资料.看到这篇,就整理出来,以备后用. 可 ...

  5. Html标签中Alt和Title都是提示性语言标签

    在Html标签中Alt和Title都是提示性语言标签,在我们浏览一些网页时,鼠标停留在一张图片或文字链接上时,在鼠标的右下角出现一个提示信息框,对目标进行一定的注释说明,这就是它们的作用.    其中 ...

  6. C#中的字段与属性的区别及属性的作用

    C#中的字段与属性的区别及属性的作用 先上代码 public class Employee { //字段 private string name; //属性 public string Name { ...

  7. alt和title的用法区别

    经常用到这两个属性,但是一直没有总结他们的区别.现在我对他们两个的用法做一下总结: 相同点:他们都会飘出一个小浮层,显示文本内容. 不同点: 1.alt只能是元素的属性,而title即可以是元素的属性 ...

  8. form标签中id和name属性的区别

    HTML元素的ID和Name属性的区别 一直认为ID和NAME是一样的,两个又可以一起出现,甚是疑惑. 今天BAIDU了一下,才发现里面大有文章.发出来研究研究: 最classical的答案:ID就像 ...

  9. html中 alt 和 title 的区别

    alt 用来给图片来提示的(图片载入失败时以文本形式提示). Title用来给链接文字或普通文字提示的(在鼠标放上去的时候就会提示).

随机推荐

  1. 集合类 collection接口 ArrayList

    数组: 存储同一种数据类型的集合容器.数组的特点:1. 只能存储同一种数据类型的数据.2. 一旦初始化,长度固定. 3. 数组中的元素与元素之间的内存地址是连续的. : Object类型的数组可以存储 ...

  2. redis 锁的案例

    1: redis 锁 作为一种术装饰器使用 基本逻辑: 1:声明一个redislock类  定义生成锁和释放锁两个方法 2:生成锁使用了一个默认值 setnx ; 如果当前时间大于 第一次锁的生成时间 ...

  3. jdbc调用存储过程获取多个结果集

    jdbc调用存储过程获取多个结果集 2017年07月26日 21:20:22 Kenny-Liu 阅读数:1486 版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.cs ...

  4. react ui 参考网站

    react.semantic-ui.com react官方中文网址 https://zh-hans.reactjs.org/ es6标准入门 nodejs官网文档 nodejs.org https:/ ...

  5. 013-centos7 常用命令--查看当前用户的4种方法

    一.概述 4种查看系统用户信息(通过编号(ID))的方法. 1.1. 使用w命令查看登录用户正在使用的进程信息 w命令用于显示已经登录系统的用户的名称,以及他们正在做的事.该命令所使用的信息来源于/v ...

  6. Freemarke

    本文介绍了freemarker的集成.FTL指令.内建函数.运算符等常用操作. 1.为什么要使用网页静态化技术 网页静态化解决方案在实际开发中运用比较多,例如新闻网站,门户网站中的新闻频道或者是文章类 ...

  7. matlab-数组取值

    一起来学matlab-数组取值 觉得有用的话,欢迎一起讨论相互学习~Follow Me MATLAB中的字符串符号 :冒号 s1=['I am sad';'you are ';'interest'] ...

  8. 关于LPC MUD的关键字及其它重要术语

    关于LPMUD的关键字及其它重要术语 前面的内容中对LPC语言和 lpmud 做了介绍,也完成了学习开发的准备工作,为了更好的学习,这里先对基本术语做一个说明. 关键字(Keywords):LPC语言 ...

  9. keepalived双主虚拟路由配置

    我使用了两台虚拟机做测试 系统centos7.3 主机A:172.16.1.123 主机B:172.16.1.124 其实和普通配置keepalived差不多,就是复制多了一个vrrp_instanc ...

  10. [LeetCode] 45. Jump Game II 跳跃游戏 II

    Given an array of non-negative integers, you are initially positioned at the first index of the arra ...