1.img的title和alt的区别

<img>

标签定义及使用说明：

• <img> 标签定义 HTML 页面中的图像。
• <img> 标签有两个必需的属性：src 和 alt。
• 注释：从技术上讲，图像并不会插入 HTML 页面中，而是链接到 HTML 页面上。<img> 标签的作用是为被引用的图像创建占位符。

属性

• align：
  • 属性规定了图像相对于周围元素的对齐方式。
  • 元素是内联元素（不会在页面上插入新行），这意味着文本和其他元素可以围绕在其周围。所以，align 属性可以帮助我们规定图像相对于周围元素的对齐方式。
  • 语法:
  • <img align="left|right|middle|top|bottom">
  • 属性值：
    • left：把图像对齐到左边。
    • right：把图像对齐到右边
    • middle：把图像与中央对齐。
    • top：把图像与顶部对齐
    • bottom：把图像与底部对齐。
  • HTML5 不支持。HTML 4.01 已废弃 。
• alt：
  • alt 属性是一个必需的属性，它规定在图像无法显示时的替代文本。
  • 假设由于一些原因（比如网速太慢、src 属性中的错误、浏览器禁用图像、用户使用的是屏幕阅读器）用户无法查看图像，alt 属性可以为图像提供替代的信息。
  • 如果需要为图像创建工具提示，请使用 title 属性！
  • 语法：<img alt="text">
  • 属性值：
    • text：规定图像的替代文本。
    • alt 文本的使用原则：
      • 如果图像包含信息，使用 alt 描述图像
      • 如果图像在 <a> 元素中，使用 alt 描述目标链接
      • 如果图像仅供装饰，请使用 alt=""
• border：
  • HTML5 不支持 <img> border 属性。请使用 CSS 代替。
  • 在 HTML 4.01 中，<img> 的 border属性已废弃。
  • border 属性规定图像周围的边框的宽度。
  • 注意：默认地，图像是没有边框的（除非图像在 <a> 元素内部）。
  • 语法：<img border="pixels">
  • 属性值：
    • pixels：边框的宽度，以像素计。
• crossorigin
  • 设置图像的跨域属性。
  • 属性值：
    • anonymous
    • use-credentials
• height
  • height 属性规定图像的高度，以像素计。
  • 提示：如果设置了这些属性，就可以在页面加载时为图像预留空间。如果没有这些属性，浏览器就无法了解图像的尺寸，也就无法为图像保留合适的空间，因此当图像加载时，页面的布局就会发生变化。
  • 提示：请不要通过 height 和 width 属性来缩放图像。如果通过 height 和 width 属性来缩小图像，那么用户就必须下载大容量的图像（即使图像在页面上看上去很小）。正确的做法是，在网页上使用图像之前，应该通过软件把图像处理为合适的尺寸。
  • 语法：<img height="pixels">
  • 属性值：
    • pixels：以像素为单位的高度（比如 height=“100”）。
• hspace
  • HTML5 不支持 <img> hspace 属性。请使用 CSS 代替。
  • 在 HTML 4.01 中，<img> 的 hspace 属性 已废弃。
  • hspace 属性规定图像左侧和右侧的空白。
  • 语法：<img hspace="pixels">
  • 属性值：
    • pixels：图像左侧和右侧的空白，以像素计。
• ismap
  • ismap 属性是一个布尔属性。
  • ismap 属性将图像定义为服务器端图像映射（图像映射指的是带有可点击区域的图像）。
  • 当点击一个服务器端图像映射时，点击坐标会以 URL 查询字符串的形式发送到服务器。
  • 注意：只有当 <img> 元素属于带有有效 href 属性的 <a> 元素的后代时，才允许使用 ismap 属性。
  • 语法：<img ismap>
• longdesc
  • HTML5 不支持 longdesc 属性。
  • longdesc 属性规定包含图像的长描述的页面的 URL。
  • 提示：由于浏览器对 longdesc 属性的支持性非常差，没有必要使用该属性。如需为某个图像提供长描述（如果有必要的话），只要简单地创建一个指向描述页面的链接即可（该链接对任何人都是可见的）。
  • 语法：<img longdesc="URL">
  • 属性值：
    • URL：指向图像描述页面的 URL。
    • 可能的值：
      • 绝对 URL - 指向另一个网站（比如 longdesc=“http://www.example.com/description.txt”）
      • 相对 URL - 指向网站内的一个文件（比如 longdesc=“description.txt”）
• src
  • src 标签的 src 属性是必需的。它规定图像的 URL。
  • 注意：当一个网页加载时，浏览器从 Web 服务器上获取图像，并把它插入到页面中。因此，确保图像与相关的网页在同一点，否则访问者可能会得到一个损坏的链接图标。如果浏览器找不到图像时，会显示损坏的链接图标。
  • 语法：<img src="URL">
  • 属性值：
    • URL：图像的 URL。
      • 可能的值：
        • 绝对 URL - 指向另一个网站（比如 src=“http://www.example.com/image.gif”）
        • 相对 URL - 指向网站内的一个文件（比如 src=“image.gif”）
• usemap
  • usemap 属性将图像定义为客户端图像映射（图像映射指的是带有可点击区域的图像）
  • usemap 属性与 <map> 元素的 name 或 id 属性相关联，以建立 <img> 与 <map> 之间的关系。
  • 注意：只有当 <img> 元素不属于 <a> 或 <button> 元素的后代时，才允许使用 usemap 属性。
  • 语法：<img usemap="#mapname">
  • 属性值：
    • #mapname：一个 hash 字符 ("#") 加上要使用的 <map> 元素的 name 或 id。
• vspace
  • HTML5 不支持 <img> vspace 属性。请使用 CSS 代替。
  • 在 HTML 4.01 中，<img> 的 vspace 属性 已废弃
  • vspace 属性规定图像顶部和底部的空白。
  • 语法：<img vspace="pixels">
  • 属性值：
    • pixels：图像顶部和底部的空白，以像素计。
• width
  • width 属性规定图像的宽度，以像素计。
  • 语法:<img width="pixels">
  • 属性值：
    • pixels：以像素为单位的宽度（比如 width=“100”）
• 支持全局属性（详见面试题目收集-2.全局属性）

<img> 的 title 和 alt 属性的区别

什么是alt属性？

• alt属性，是的特有属性，是图片内容的等价描述，用于图片无法加载时显示或读屏器阅读图片（帮助盲人了解图片内容）。可提图片高可访问性，除了纯装饰图片外都必须设置有意义的值，搜索引擎会重点分析。
• 作用是当无法显示文档中的图片是，可以为浏览者提供文字说明，是用来替代图片的，而不是提供额外说明文字的

什么是title属性？

• title属性是global attribute之一，作用是提供建议性的信息，通常是鼠标滑动到元素上是显示。
• title属性可以用在除了base，basefont，head，html，meta，param，script和title之外的所有标签。
• title属性可以为链接添加描述性文字，来更加清楚的表达链接的目的。

两者的区别？

• 替换文字（alt text）并不是用来做提示（tool tip），或者更加确切的说，它并不是为图片提供额外说明信息的。相反地，title属性才应该用来为元素提供额外说明信息。