【图像标签】

---

1. 图像标签

1.1 图像标签 有哪些 ?

标签名	用于
①	定义 图像。图片地址src属性 ，替代文本 alt 属性（盲人了解图片信息的 唯一方式） 为必需属性。
②	定义 图像映射。
③	定义 图像地图 内部的 区域。

---

1.2 html5 中的 新图像标签 有哪些 ?

标签名	用于
①	定义 图形 (画布容器)。
②	补充说明内容的 标题或说明. 定义 元素的 标题。
③	定义 补充说明的 独立内容，以及它们的标题 (可选的)。
④	多个 可选图像. 为不同的 显示/设备 提供 不同的 图像版本。

---

1.3 ★ img: 在网页中 嵌入一个图片 （src，alt 必需）

• ⑴ 嵌入 图片: 如何 在网页中 嵌入一个图片 ?

  • 使用图片 标签
    • 元素 将图像 嵌入到文档中。
  • 文字 代码: 图片 标签 并不会在网页中 直接插入图像
    • 不是把图片 直接放在代码里,而是通过 ❶ 指明图片的位置 ,来链接图片,实际上 还是 ❷ 文字代码.

• ⑵ 占位 空间: 图片 标签 创建的是 什么 ?

  • (被引用) 图像 的占位空间。为什么要占位？
    • 页面布局 稳定:设置图像 占用的空间，以确保页面布局 在加载之前 是稳定的。

• ⑶ 必需 属性: 标签有 哪两个 必需的属性 ?

  • ① src图片地址 url 属性
    • src属性 是必需的，它包含 要嵌入的图像的 路径，指明了路径，才能在文档中嵌入一个图片。
  • ② alt图片替代文本 属性。
    • 为什么图片 要有替代文本？
      • 可访问性： alt属性 包含图像的文本描述，这不是强制的，但是对于可访问性 非常有用——屏幕阅读器 将这个描述 读给用户听，这样他们就知道 图像的含义，对于几千万的盲人，1亿多的视力障碍群体来说，是极好的关怀，不能缺少的。
      • 无法正常显示时的 提醒： 如果由于某种原因 无法加载图像，也会在页面上 显示alt文本:例如，网络错误、内容阻塞 或链接地址错误，用户禁用了图片等。
    • 所以,建议最好设置,作用很大。

• ⑷ 图像 加载错误的处理: onerror 事件处理程序

  • 如果在 加载 或呈现（渲染）图像时 发生错误，如何处理？
    • 可以设置onerror属性，即，在错误error事件上 设置了 onerror事件处理程序，则将调用该事件处理程序。
  • 哪些情况，可能导致 加载或渲染图像时 发生错误？
    • src 属性为空("")或 null。
    • src URL与用户 当前所在页面的 URL 相同。
    • 图像在某种程度上损坏了，阻止了它被加载。
    • 图像的元数据 以无法检索其尺寸的方式损坏，并且在元素的属性中 没有指定尺寸。
    • 图像的格式 不受用户代理的支持。

• ⑸ 正确 关闭: HTML 与 XHTML 之间的差异

  • 在 HTML 中， 标签 没有 结束标签。
  • 在 XHTML 中， 标签 必须被 正确地关闭。即，写成

• ⑹ 废弃 属性

  • 在 HTML 4.01 中，不推荐使用 img 元素的"align"、"border"、"hspace"以及 "vspace" 属性。
  • 在 XHTML 1.0 Strict DTD 中，不支持 image 图片元素的 "align"、"border"、"hspace" 以及 "vspace" 属性。
  • 基本上 都是关于样式的 属性,因为有 css 了,所以显得多余了.

• ⑺ 标签 和属性的 浏览器支持

  • 

---

1.3.1 img 图片 标签的 属性

图片 标签 必需的属性 有哪些 ?

属性名	属性值	用于
① alt	text	图片 替代文本. 规定图像的 替代文本。
② src	URL	图片地址. 规定显示 图像的 URL。

• 图片 标签 可选的属性 有哪些 ?

属性名	属性值	用于
① height	pixels , %	定义 图像的 高度。
② width	pixels , %	设置 图像的 宽度。 设置宽高的目的： 为图片 ❶ 预留空间，以免影响 ❷ 页面布局。（建议使用 ❸ CSS 的宽高属性设置）。
③ ismap	=ismap	布尔属性。将 图像定义为 服务器端 图像映射。前提：❶ 是 的后代。❷ 点击图片，会发送 图像坐标 (x,y) 到服务器，服务器根据坐标 给出处理。❸ a-href 属性 指定 服务器 处理页面。
④ usemap	#map-name , #map-id	将 图像定义为 客户端 图像映射。绑定 标签，把图片 分成多个 可点击区域。禁用的父标签a，button，可交互元素，会影响与 的交互。
⑤ crossorigin	anonymous,use-credentials	跨源请求. html5 新属性. ❶ 设置了该属性（无论什么值），就表示 以CORS 请求获取图像，都会发送 origin http header，指明 是谁在请求资源。❷ 属性值，具体区分 发送请求时，是否也发送凭证（一般为 cookie）。
⑥ decoding	sync,async,auto	图片 解码模式。（同步解码，异步解码，浏览器决定）
⑦ sizes	一个 或多个字符串(以逗号隔开的)	资源大小. html5 新属性.根据媒体条件 ❶ 选出图像预期宽度 。❷ 必须搭配 srcset 属性，因为 srcset 会根据选出的 预期宽度（匹配带有宽度w的描述符），再选中 ❸ 对应的图像（地址）。
⑧ srcset	一个 或多个字符串(以逗号分隔的)	多个图片的 地址(和可选的 宽度描述符w,像素密度 描述符x) . html5 新属性.
⑨ referrerpolicy	no-referrer,no-referrer-when-downgrade (default),origin,origin-when-cross-origin,same-origin,strict-origin,strict-origin-when-cross-origin,unsafe-url	表示在获取图片资源时， 如何发送 referrer 首部.（发不发，发什么）。请参考 框架标签 iframe 中的 referrerpolicy 属性。
⑩ loading	=eager,lazy	设置图片的加载方式（立即 or 延迟）。请参考 框架标签 iframe 中的 loading 属性。
⑪ fetchpriority	high，low，auto	（实验属性）设置 获取图像时 使用的相对优先级。
align	top , bottom , middle ,left , right	已废弃。规定 如何根据 周围的文本 来对齐图像。
border	pixels	已废弃。定义 图像边框。
hspace	pixels	已废弃。水平左右空白. 定义图像 左侧和右侧的空白。
vspace	pixels	已废弃。垂直上下空白. 定义图像 顶部和底部的空白。
longdesc	URL	已废弃。指向 包含对图像描述的 长描述文档 的 URL。对 alt 文本的补充.
name	text	已废弃。元素的名称。使用id属性 替代。

• 废弃属性: 对齐,边框,上下 左右空白,长描述, 名称 ( 样式类的属性,用 CSS 实现)

---

⑴ alt 属性: 图片 替代文本

• ⑴ 图片 标签的 alt 图片替代文本 属性

  • 图片 替代文本: 如果 无法显示图像，如何让 浏览器 显示 图片的替代文本，对缺失的图像 进行简介？让用户知道 丢失的图像是什么。
    • 使用 img-alt图片替代文本 属性
      • 虽说alt并非必需，不写也不报错，但现实使用中，却是一个 必需的属性。少了会造成很大的不便。
  • 替代文本 使用的情况: 假设 由于下列原因 用户无法查看图像，alt 图片替代文本 属性 可以为图像 提供 替代的信息：
    • ① 网速 太慢，一时半会没加载出来。
    • ② src 图片地址url 属性中的错误, 图像无效 或不支持的类型
    • ③ 浏览器 禁用图像,用户选择 不显示图像 (节省带宽，隐私原因)
    • ④ 用户使用的是 屏幕阅读器，看不了图像。
    • ⑤ 非视觉浏览器 (例如 视力受损人士 使用的浏览器)，也看不了图像。
  • 必要性: 为什么 每个图片 标签 都要使用alt 图片替代文本 属性
    • ① 图像无法显示: 这即使图像无法显示，用户还是可以看到 丢失了图片的信息。
    • ② 盲人: 对于看不见的残疾人来说，alt 图片替代文本 属性 ,是 了解图像内容 的 唯一方式，所以，千万不要忘记。
  • 图片 标签 的alt 图片替代文本 属性值
    • img-alt="text"
      • ① 长度: 是一个最多可以包含 1024 个字符 的字符串，其中包括 空格和标点。
      • ② 引号: 属性值 必须加引号 (正规写法,属性值 都要 加引号)
      • ③ 实体引用: 可以包含 特殊字符的 实体引用, 不允许包含 其他类别的标记，不允许有 任何 样式标签。
  • alt图片替代文本 属性的行为
    • ① 图片替代文本 不能作为提示文本: 当用户把鼠标移动到img元素上时，IE 会显示出 alt图片替代文本 属性的值。这种行为不正确。
    • ② 图片替代文本 的显示: 所有其他的浏览器 正在向规范靠拢，当图像无法显示时，才会显示出 替代文本。
  • 图片 提示文本: 如何为图像 创建 提示 ?(当鼠标移动到 图片上方时,出现文字提示)
    • 使用 img- title提示文本 属性。
    • 很多标签 都是使用title作为 提示文本。
    • title 属性不是 alt 属性的可接受替代。此外，避免在同一图像上声明的 title 属性中 重复 alt 属性的值。这样做 可能会导致一些屏幕阅读器 读出描述两次，造成混乱的体验。

• alt图片替代文本 属性的 使用：

  • 如果 图像 包含信息
    • 使用 alt 描述图像。alt 属性的值 应该清楚而简明地描述 图像的内容。它不应该描述图像本身 或 图像的文件名。
    • 错误写法：
    • 正确写法：
      • （盲人看到这个信息，立刻就知道图像里是什么内容，这才是有效信息）
  • 如果 图像在 a 元素中
    • 使用 alt 描述 目标链接
  • 如果 图像 仅供装饰 (不是关键 部分,不那么重要)
    • 使用 alt=""
      • 不是 关键内容: 将此属性 设置为 空字符串(alt="")表示 此图像不是内容的关键部分(它是修饰或跟踪像素)
      • 非可视浏览器 可能会在呈现时 忽略它。
      • 如果alt为空，图像显示失败，视觉浏览器 也会隐藏 损坏的图像图标。
  • 完全省略alt: 表示 图像是 内容的 关键部分，没有 替代文本 可用。
  • 当将图像复制并 ❶ 粘贴到文本 或将链接的图像 ❷ 保存到书签时，使用的信息，是哪个属性设置的？
    • 也是 替代文本 alt属性设置的，严格来说，这两种情况，也是看不到图片的情况，所以 由alt提供了 图像的替代文本，加以说明。

---

• 示例1: 带有img-alt图片替代文本 的图片

<img src="http://www.w3school.com.cn/i/eg_tulip.jpg"  alt="上海鲜花港 - 郁金香" />

• 测试
  • IE 11.0 和360 ,谷歌浏览器中测试,鼠标移动到 图片上 都不会再出现 提示文本 的行为
    • (alt 是图片无法正常显示时,显示的,不是做 提示文本使用的)
• 如果 img-src资源 url 出错,则不能显示图片,就会显示 alt图片替代文本
  
  
  
• 测试
  • 当无法显示图片时,显示alt图片替代文本
  • 替代文本 显示: 不同浏览器中 显示的样式,略有不同

---

• ❤ 图像替代文本 alt 属性 和 title 属性的区别

  • ① alt,图像替代文本,只在图像不能正常显示的时候,才显示。
  • ② title是作为提示文本,只要 鼠标悬停在图片上,就会进行提示。
    • 这个功能,在很多标签中,也会体现,因为 title是 全局属性,适用于很多标签 。

---

⑵ height +width 属性: 高度和宽度 (预留空间)

• ⑵ 图片 标签的 height高度 和 width宽度 属性

  • 图片 高度和宽度: 如何设置 图像的宽和高 ?

    • ❶ 使用 img-height/width高度和宽度 属性
    • ❷ 使用 CSS 中的 height/width宽高属性（推荐，样式化的信息，建议在 CSS 中设置）

  • 图片插入网页时，默认以什么尺寸？

    • 默认以 图片的原始大小 插入网页。

  • 设置宽高的 必要性: 为什么要 为图片指定 宽度和高度 ?

    • ❶ 预留空间: 设置了宽高,就可以在 页面加载时 为图像 预留空间,页面布局不变化。
      • 预留空间的大小 跟图片是否加载成功 有关系吗？
        • 没关系。不管图片有没有加载成功，只要设置了宽高，都会 预留空间。
    • ❷ 布局 变化: 没有设置宽高,会怎样 ?
      • 无法预留空间。
      • 页面布局变化: 当图像加载时，页面的布局 就会 发生变化。因为，只有加载完时，才知道这个图片占据多大的空间，无法提前知道大小。

  • 不能用宽高 缩小图片: 为什么 不可以使用 img-height/width高度和宽度 属性 来缩小图片 ?

    • ❶ 下载 占容量: 如果通过宽高属性 来缩小图像 ,用户依然要下载 大容量的图像（即使图像 在页面上看上去很小）。
    • ❷ 合适的 尺寸: 应该怎样 正确缩放图片 ?
      • 改图像:在网页上使用图像之前,用软件把 图像处理为合适的尺寸。
• img-height/width宽高 属性的属性值
  • 像素 (和百分比): img-height/width="number px/%"
    • pixels 以像素px为单位 的高度或宽度值。
    • percent % 以包含元素的百分比计% 的高度 或宽度值。
    • 注: 图片 高度和宽度的 单位
      • 注意：html 5 中,以像素 为单位时。似乎必须是 没有单位的 整数，但实际测试中，带px单位，也并没有报错，能正确显示。
        • width="100"’和width="100px"是等同的。因为 默认的单位，就是像素 px。
          • 所以，看到宽高没有单位时，代表单位是什么？
            • 像素px。
      • 在 HTML 4 中可以是 像素, 也可以是百分比。
• 缩放 特性: img-height/width宽高,可以缩放图片
  • 只改变显示: 如果通过 宽高属性，改变了图像的 显示时的宽高，那么图像原大小 改变了吗？
    • 原文件没变。图片文件,还是那个文件,那个大小，文件本身 没有任何变化,只可以通过宽高 改变 在浏览器中 显示出来的样子。
      • 所以，一般 不缩小图片,而是通过宽高 来放大图片。因为看得是缩小的，加载时 下载的还是大文件，不划算。
• 只变单个：会 保持宽高比（等比例缩放）:
  • 如果宽度和高度，只提供了其中一个的 指定的尺寸，另一个怎么处理？
    • 如，只提供了一个 百分比形式的 width 宽度值,没有设置 height 高度值，
    • 保持 原来的宽高比 (图片不扭曲): 图片的缩放，浏览器都将 保持图像原来的宽高比例,图像也 就不会发生扭曲.
    • 实际操作:只设置一个. 一般只设置 宽度,或者高度中的 一个值,这样图片就可以 等比例的进行缩放.
  • img-src/width

---

• 示例1: 如果只设置了宽度或高度，会保持 图片原本的宽高比吗？
  • 会。如，放大一个，另一个也会 按原来的宽高比例 放大。

<img src="/i/ct_1px.gif" width="20%" />

• 输出
  • 原图像是 宽高 1:1,1px*1px 的图片
  • 只设置了 宽度百分比,高度 也随着原来的比例 变化了,放大的图片 还是原来的宽高比。

---

• 示例2: 如何改变图像的宽高比？
  • 宽高分别设置值。
  • 如，把原图像是 宽高 1:1,1px*1px 的图片,放大为 宽 20%,高 30px 的横条。

<img src="/i/ct_1px.gif" width="20%" height="30px" />

• 输出
  • 改变了图片原来的 宽高比例,由正方形,变成了一个 长方形的区域

---

• 图像使用技巧
  • 放大 和 图像填充: 宽高属性
    • ❶ 放大: 放大尺寸,不要 缩小尺寸
      • 尽量 不要缩小,因为 原来的大图, 还是会占用更多的 加载时间和带宽。
    • ❷ 填充: 以最小的图像 填充的方式，在文档中 放置 一个彩色的横条
      • 不需要创建一个 具有完整尺寸的图像。
      • 相反，只要创建一个 宽度和高度都为 1 个像素的图像即可
        • 然后使用 height 和 width宽高 属性把它 扩展到更大的尺寸。
• 示例3： 如何实现 以最小的图像，在文档中 放置 一个彩色的横条？

<img src="http://www.w3school.com.cn/i/ct_1px.gif" width="200px" height="30px" />

• 测试

  • 原来的小图片,通过 宽高 属性 被放大了,填充了整个 需要填充的区域

• 示例4：如何让图片的大小, 随窗口 一起缩放？

  • 百分比 值: 使用 百分比值 。
    • 浏览器 会按照 与浏览器显示窗口 的一定比例 来 缩放图像。
    • 窗口的大小 改变时，图像的大小会 随之改变。
  • 如果是像素值，会跟随浏览器窗口一起放大缩小吗？
    • 不会，一行放不下时，还可能被挤到下一行。

<img src="http://www.w3school.com.cn/i/eg_mouse.jpg" width="100" height="100">
<br />
<img src="http://www.w3school.com.cn/i/eg_mouse.jpg" width="20%" >

• 测试
  • ❶ 像素值 (图片大小 不变): 第一张图片,宽度和高度,设置的 都是像素值
    • 整个图片,不随窗口的放大缩小 而改变,是固定值.
  • ❷ 百分比 (图片大小,随窗口大小 变化): 第二个图片,只设置了 宽度的百分比,高度没有设置
    • 整个图片 按照原来的比例 显示,没有扭曲
    • 整个图片,随着窗口的放大缩小,跟着放大缩小,并且没有扭曲,还是原来的比例

---

⑶ ismap 属性: 服务器 映射图片 (布尔属性，图像坐标, img 是 a 后代)

• ⑶ 图片 标签的 ismap 服务器 映射图片 属性

  • 服务器 映射图片: 将图像定义为 服务器端 图像映射。

    • 布尔 属性：仅使用 属性名ismap，或 属性名与值相等 ismap="ismap"。
      • 指示 图像是 server-side map服务器端 映射的 一部分。
    • 发送 图像坐标: 如果设置了该属性，则将 用户单击的 图像的坐标 发送到服务器。
    • 显示 图片坐标: 不单击,只把鼠标 放在图片上,左下角状态栏 也会显示图片坐标
      • 的图形坐标: Firefox 中测试有效,可以用来测试 图片的热点坐标 (的图形 可点击坐标)

  • 映射图片: 映射图片 是什么意思 ?

    • 可点击 图像: 带有 可点击区域 的图像。

  • 发送 图像坐标: 当点击 一个服务器端 图像映射时, 点击到的 图片坐标, 会以 URL 查询字符串 的形式 发送到服务器。

    • 当用户在 ismap 图像上 单击了某处时
      • 相对 左上角的 (x,y)坐标: 浏览器会自动把 鼠标的 x、y 位置（相对于 图像的左上角）发送到 服务器端。
      • 服务器端软件,可以根据这些坐标 来做出响应。
    • 总结: img-ismap 服务器 映射图片 = 可点击 = 发送 图片坐标 = 结合 超链接 标签

  • ☆ 使用前提

    • , 作为的子元素: 只有当 图片, 属于 ( 带有 有效 href 属性的) 元素的后代时，才允许 ismap 属性。
      • a > img ,才使用 img-ismap属性
      • 用来: href 属性 指定 服务器 处理页面,有这个页面,图片的坐标 才知道该发到哪里去.

  • 不可简写: HTML 与 XHTML 之间的差异

    • 在 XHTML 中，禁止 属性简写，并且必须把 ismap 属性定义为
    • img-ismap="ismap"

  • 指定 服务器 处理页面: 服务器 处理页面 怎么指定 ?

    • 写在 超链接 元素的 href 引用地址 属性 中
    • 可以 根据这些坐标 来做出响应。

<a href="http://www.w3school.com.cn/example/html/form_action.asp">
	<img src="http://www.w3school.com.cn/i/eg_tulip.jpg" ismap />
a>

<p>点击这幅图像，点击坐标会以 URL 查询字符串发送到服务器。p>

• 测试
  • 发送坐标,相对于左上角的位置:
    • 所以 左上角 坐标值最小,右下角 坐标值最大
    • 图片标记 1,2 位置,坐标 是 (5,5) (5,260)
    • 3,4位置,坐标是 (391,3) (391,260)

---

⑷ usemap 属性: 客户端 映射图片( 绑定 map 标签，分成多个可点击区域)

• ⑷ 图片 标签的 usemap客户端 映射图片 属性

  • 客户端 映射图片:

  • 如何将图片 定义为 客户端 映射图片，即 如何将图片 分成多个 可点击的区域？

    • 绑定 图片映射 标签。
      • 如何绑定 图片映射？
        • 使用 usemap 绑定 map 属性
    • 元素中的 usemap 属性值 设为什么?
      • map- id 或 map-name名称 属性值（不同浏览器，绑定属性不同）
        • 如果map标签的id，name 只设置一个，设置哪个 用于关联？
          • 设置name属性，在浏览器中 兼容性更强。
            • #map-id，谷歌中，不能实现关联，IE11和火狐中可以。
            • #map-name，IE11，谷歌和火狐中，都可以实现关联。
        • 两属性 同时添加 相同值:
          • 所以,建议向 图片映射 ❶ 同时添加 id 和 name名称属性，且 ❷ 两属性的值，最好相同。
      • 如何建立 图片 映射的？
        • img-usemap 属性与 的 name或 id 属性 相关联，以建立 图片 与 图片映射 之间的关系。

  • img-usemap 属性值

    • img-usemap="#map-name | # map-id"
      • #开头,加上 要使用的 图片映射 标签的 name 名称或 id 属性值
• 父元素 限制
  • 如果元素 位于 或元素内，则不能使用 此属性。
  • img 不能是 交互元素 的子元素: 图片 不能是链接 或者按钮的 子元素，为什么？
    • 这两个元素是 可点击的,有交互行为，就会影响 对关联元素 的点击响应。

---

• 示例: 将一张图片 划分出 3 个区域，当用户单击 某一个区域时，会打开一个链接.
• 嵌套关系
  • , src alt border usemap
  • name= id (相同 属性值: 为了浏览器兼容性,这两个属性值 最好设置为相同的)
    • , shape coords href target alt
  • 关联关系
    • map-name=map-id
    • img-usemap="#map-name"="#map-id"

<p>请点击图像上的星球，把它们放大。p>

<img src="http://www.w3school.com.cn/i/eg_planets.jpg"  usemap="#planetmap"
alt="Planets" />

<map name="planetmap" id="planetmap">

	<area shape="circle" coords="180,139,14" href="http://www.w3school.com.cn/example/html/venus.html" target ="_blank" alt="Venus" />
	
	<area shape="circle" coords="129,161,10" href ="http://www.w3school.com.cn/example/html/mercur.html" target ="_blank" alt="Mercury" />
	
	<area shape="rect" coords="0,0,110,260" href ="http://www.w3school.com.cn/example/html/sun.html" target ="_blank" alt="Sun" />

map>

• 测试
  • 点击 划分出的 1个矩形和2个圆形的位置,都会在新窗口 打开一个文档,里面是 三个星球 放大后的图片。

---

• img-ismap 和 img-usemap , 服务器端 和客户端 映射图片 的应用差异
  • 地图: 应用 img-ismap 和 img-usemap 属性的一个示例
    • 例如，在浏览一家全国范围的大公司的 网页时，用户可能会 在地图上 单击他们所居住的城市，以获得附近地区 零售店的 地址和电话号码等。
  • usemap 客户端 处理图像映射的 好处:
    • ❶ 无服务器要求: 客户端 不要求有 服务器或特殊的服务器软件。
    • ❷ 离线使用: 与 ismap 机制不同，它可以用在 非 web （无网络）环境中，例如在 本地的文件 或者 CD-ROM 中使用。

---

⑸ crossorigin 属性: 跨源请求 CORS (有无凭证)

• ⑸ 图片 标签的 crossorigin 跨源请求 属性

  • ① 图片标签 为什么要有 crossorigin 这个属性？

    • 图片，网页 不同源时 跨源请求： 假如 图片和网页 属于不同的网站，网页加载图片就会导致 跨源请求，对方服务器可能要求 跨源认证。
    • 那么，我们如何 告诉浏览器，是否以 跨源请求（CORS） 来获取图片呢？
      • 使用 crossorigin 属性 用来告诉浏览器，是否以跨源的形式 下载图片，跨源请求时 是否发凭证。默认是：不以跨源的形式发请求。
      • 什么是源网址 origin？
        • 由 协议，主机（域名），端口（有默认值，常省略），三者构成一个 源网址。如 https://html.spec.whatwg.org/（此处端口用默认值，省略）
          • https 协议默认的端口号是：443；
          • http 协议默认端口号是：80。
      • 什么是同源？什么是跨源？
        • 同源：协议，主机（域名），端口（有默认值，常省略），三者完全一致。
        • 跨源：协议，主机（域名），端口（有默认值，常省略），三者有一个不同，就是跨源。
          • 比如，只是协议从 https 变成了 http，即便只是少了一个s，也是不同的协议，就是跨源。
      • 什么是 跨源请求 CORS ？
        • 跨源 资源共享 CORS: (Cross-Origin Resource Sharing) 跨源 资源共享
          • ❶ 跨源访问的 请求响应: CORS(跨源 资源共享) 是一个系统，由 传输 HTTP header 组成，它决定浏览器 是否阻止 （前端 JavaScript代码 访问跨源请求的） 响应。
          • ❷ same-origin security policy同源安全策略 禁止 跨源访问资源。但是CORS 允许web服务器 选择允许 跨源访问它们的资源。
          • 更多详细介绍

  • ② CORS请求 和 画布的污染与否：

    • 从 CORS 请求返回的 （通过 CORS 启用的图像 ）的图像数据，在元素中使用，会被标记为 污染（tainted）吗？
      • 不会被标记为“污染”。为什么？
        • 经过了 跨源资源共享（CORS） 的批准。
      • 什么是污染？
        • 未经 跨源资源共享 （CORS） 批准的 从其他来源加载的数据，画布会判定为 “被污染”。
        • 而当 图像数据 经过 CORS 批准，就不会被判定为污染。

• ③ 如果图片 没有 指定 crossorigin 属性，会发送 跨源资源共享 （CORS） 请求吗？

  • 不会。会 发送一个非cors请求(没有 Origin 请求头)。

  • 什么是 Origin 请求头（request header）？

    • 指明 发出请求的来源的 源网址（协议，主机，端口 ）。即，指明 是谁在要资源。
    • Origin request header 的 语法
      • 不提供发出请求的 源网址：Origin: null
      • 默认端口号被省略：Origin: ://
      • 完整的源网址：Origin: ://:

  • 如果图片 没有 指定 crossorigin 属性，发送了 非 cors 请求后，浏览器会怎么处理这个图片？

    • 浏览器将图像标记为 ❶ 受污染的，并限制对其图像数据的访问，❷ 防止在元素中 使用它。

• ④ 如果图片 指定 crossorigin 属性，会如何发送请求？

  • 如果指定了 crossorigin 属性，则发送一个 CORS 请求 (带有 Origin 请求头);即，会指明 是谁在请求资源。
  • 但是 如果服务器不允许（我们发送的 Origin 请求头中指明的源网址） 跨源访问图像数据，浏览器怎么处理？
    • 浏览器 会阻止图像加载，并记录一个 CORS 错误到 devtools 控制台。
  • 什么情况下，服务器会不允许跨源访问？
    • ❶ 不发送任何 Access-Control-Allow-Origin 响应头（response header）
    • ❷ 在它所发送的任何 Access-Control-Allow-Origin 响应头中 不包括 某个网站的源网址（就是没被允许）

• ⑤ 浏览器支持

  • 

• ⑥ crossorigin 属性值: crossorigin="anonymous |use-credentials "

  • 1° 无凭证 跨源请求: anonymous
    • 美 /əˈnɑːnɪməs/ ,匿名的
    • 执行 一个 跨源资源共享 CORS 请求（比如，发了 源网址 Origin: HTTP header）。但是 没有发送凭证。
      • 什么是 跨源请求 可能需要的凭证？
        • 一般是 cookie， X.509 证书， HTTP 授权请求头
    • 发送我们发送了 CORS 请求，但服务器没允许怎么办？
      • 图像 污染+使用 受限制: 如果服务器 对网站进行允许（没有设置 Access-Control-Allow-Origin HTTP头部），图像会被污染 , 而且它的使用 也会被限制。
  • 2° 有凭证 跨源请求: use-credentials
    • 美 /krəˈdenʃlz/，凭证
    • 执行一个 跨源请求（比如，有 Origin: HTTP header），同时 发送凭证。.
      • 比如，有 cookie, 证书 a certificate, 有 HTTP 基本的授权认证。
    • 有凭证，跨源请求就一定成功吗？
      • 不一定成功。如果服务器不选择 与发请求的站点 共享凭据( 通过发回 access - control - allow - credentials: true 响应头)，则浏览器 仍将该图像标记为 受污染的，并限制对其图像数据的访问。
  • 3° 无效值 = 无凭证跨源请求: 如果是 无效值，默认使用anonymous无凭证跨源请求 属性值。
  • 未设置 属性: 如果属性不存在，则在 非CORS请求的情况下 获取资源.
    • 当用户 并未显式使用 本属性时，默认不使用 CORS 发起请求,默认不跨源 访问.
      • 不会 向服务器 发送 OriginHTTP 头部信息，不告诉服务器 是谁在请求资源。
    • 用以防止 资源在中 不受污染的使用。对资源 也算是种保护。

• ⑦ “有无凭证的属性值，无效值” 和 未设置属性的区别

  • ① 设置属性： 无效值=无凭证跨源请求，无论有无凭证，设置了crossorigin属性，发送的就是 跨源资源共享 ❶ cors 请求。都会 ❷ 发送 origin http header，指明 是谁在请求资源。
  • ② 未设置属性：发送的 就是 ❶ 非 cors 请求，❷ 不会发送 origin http header，不指明 是谁在请求资源。

---

⑹ decoding 属性: 图像 解码模式 (同步 异步)

• ⑹ 图片 标签的 decoding 图像 解码模式 属性
  • 解码模式 提示: 如何向浏览器提供 图像解码模式 提示？
    • 使用 decoding 属性
• decoding 属性值 : decoding="sync | async | auto"
  • ① 同步 解码: sync，美 /sɪŋk/
    • 同步解码 图像。
  • ② 异步 解码: async，美 /əˈsɪŋk/
    • 异步解码 图像，以减少 呈现其他内容时的延迟。
  • ③ 默认值:浏览器 自动决定: auto
    • 不优先选择 解码模式。浏览器决定 什么对用户 是最好的。
• 浏览器支持
  • 

---

❤ 响应式图像

• 什么是响应式 web 设计？
  • 做出的网站，在各种不同尺寸的设备上，都能有 与之匹配的合适的显示效果，叫做“响应式 web 设计”（responsive web design）。
• 什么是 响应式图像？
  • 在各种不同尺寸的设备上，图像的显示 都能比较合适，叫做（responsive image）。
• 通过哪些方法 可以实现“响应式”？
  • js，css，html 都有对应的设计方法；
• 在 html 中 如何实现 “响应式图像”？
  • 要点：根据不同的设备，显示不同的图像；
  • 通过 标签的 sizes 属性 和 srcset 属性。
    • 第一步，sizes属性 根据对设备的筛查匹配，选出 预期的宽度（不一定是展示时的实际宽度）；
    • 第二步，srcset属性 根据 预期的宽度，选出合适的图像（图像地址），这是真实展示出的图像。
      • 实际显示尺寸：可能是图像本身的尺寸，也可能是 被其他方式 指定的尺寸；
    • 综上： 根据不同的设备，显示不同的图像，需要以上两步都完成，才能成功。

---

⑺ sizes 属性:根据条件 选出图像预期宽度 （必须搭配 srcset 属性）

• ⑺ 图片 标签的 sizes 图像宽度 大小

  • sizes 属性值: 字符串（列表）；一个属性值 可以有多少个字符串？

    • 一个 或多个。字符串之间 用什么分隔？
      • 以 逗号, 分隔字符串。（字符串之间）
    • ① 每一个 字符串包括：= ❶ （ 媒体条件） ❷ 宽度值 = 满足条件时的 图片的 尺寸值；
      • 媒体条件和宽度值之间，用什么分隔？
        • 空格 分隔。（字符串内部）
      • 每个媒体条件 必须用 括号()括起来；
      • 最后一个字符串：必须有，且不能有媒体条件，只能有一个宽度值，为什么？
        • 因为是 在不满足前面所有条件时 应用的。
        • 如： sizes="(min-width: 600px) 200px, 50vw"
          • 当匹配了 媒体条件 min-width: 600px 时，即最小宽度大于 600px时，图像将 宽 200px，否则 宽 50vw（视图宽度的50%）。
        • (max-height: 500px) 1000px
          • 如果视口不高于 500px，预期宽度为 1000px。
      • 1 ° 媒体条件 描述的是 谁的属性？
        • 描述的是 视口的属性，而不是 图像的属性。
          • 描述 用户代理、输出设备 或环境的 特定特性。
        • 针对 特定设备: 即，根据不同的设备尺寸，设定图像 不同的尺寸。
        • 媒体条件的作用： 测试它们的 存在或值，并且完全是 可选的。
      • 2° 宽度值: 图像的 预期宽度。
        • 预期 宽度:前面有媒体条件时，需要 满足媒体条件 ,才会 被用来 指定图像的 预期宽度。

  • ② 选择 图像(地址):

    • 搭配 属性: 当srcset使用 ‘w’ 宽度描述符时，用户代理 根据 当前图像大小 来选择srcset中 合适的一个 图像URL。
      • 根据 宽度值,选择 多个图像中的某个图像（地址）；

  • ③ 使用 条件:

    • 必须搭配 srcset 属性, 如果 没有设置srcset属性，或者 没值，那么sizes属性 也将不起作用。为什么？
    • 第一步，sizes属性 根据对设备的筛查匹配，选出 预期的宽度大小（不一定是展示时的实际大小）；
    • 第二步，srcset属性 根据 预期的宽度大小，选出合适的图像（图像地址），这是真实展示出的图像。
      • 尺寸可能是图像本身的尺寸，也可能是 被其他方式 指定的尺寸；
    • 综上： 根据不同的设备，显示不同的图像，需要以上两步都完成，才能成功。

---

⑻ srcset 属性: 多个 图片地址（宽度描述符 w，像素密度描述符 x）

• ⑻ 图片 标签的 srcset 多选 图像 地址
• srcset 属性值: 一个或多个 字符串 （以 逗号 ,分隔字符串，和sizes属性中一样）
  • 多个图像 的地址:
    • 表明 一系列 用户代理 可能使用的 图像。
• 属性值 字符串 组成: 每一个字符串 由以下组成：图像地址+空格+描述符(可选w
  ,x)
  • ① 图像地址: 一个图像的 URL。
  • ② 宽度 描述符 / 像素密度 描述符: 可选的，空格后 跟以下的其一：
    • ❶ 宽度 描述符:
      • 一个宽度描述符，这是一个 正整数，后面紧跟 ‘w’ 符号。(w: width,宽度)
      • 换算值: 有效的像素密度 = srcset宽度/ sizes 预期宽度
        • 该整数宽度 除以sizes属性给出的 预期宽度 来计算得到 有效的像素密度，即换算成 和 x描述符 等价的值。
    • ❷ 像素密度 描述符 :
      • 一个像素密度描述符，这是一个 正浮点数，后面 紧跟 ‘x’ 符号。
    • ❸ 未设置 默认1x: 如果没有 指定 描述符，那它会被指定为 默认的 1x。
    • △ 使用说明:
      • 描述符 不要 混合使用: 在同一个的 srcset 属性中 混合使用 宽度描述符 和像素密度描述符时，会导致 该值无效。
      • 描述符 不要重复: 重复的描述符（比如，在同一个srcset两个源 都是 ‘2x’）也是 无效的。
• src 图片地址 属性 和srcset 多个图片地址 属性的使用
  • src是 图像的地址 URL，这个属性对 元素来说 是必需的。
  • src = 候选 图像: 在支持 srcset 的浏览器中，src 被当做 拥有 一个像素密度 的描述符1x 的 候选图像处理, 除非一个图像 拥有这个像素密度描述符 已经被在 srcset或者 srcset 包含 ‘w’ 描述符中定义了。
• 多个图像 地址的 意义
  • 用户 可调整选择: 用户代理 可以自行选择 任何可用的图像（地址）。这为他们提供了 很大的余地，可以根据 用户偏好或 带宽条件 来调整选择。

---

• 知识拓展: 用户代理
• 用户代理:

  • ① = 计算机程序:

    • ❶ 浏览器: 是代表一个人的 计算机程序，例如，一个在 Web 上的 浏览器。
    • 除了浏览器之外，用户代理可以是 ❷ 抓取网页的机器人、❸ 下载管理器 或 可以访问 Web的 ❹ 其他应用程序。

  • ② 用户代理 字符串: 随着向服务器 发送的每个请求， 浏览器 包含一个可 表明身份的 User-Agent HTTP 的协议头，叫作 用户代理（UA，User Agent）字符串。

    • 标识 浏览器: 此字符串 通常 标识浏览器、及其版本号 及其主机操作系统。

  • ③ 用户代理 欺骗: 垃圾邮件 机器人、下载管理器 和一些浏览器 通常会发送一个 假 UA字符串 来宣称自己是 不同的客户端。这被称为 用户代理欺骗。

  • ④ 字符串 获取: 用户代理的字符串 可以被 JavaScript 在客户端中 使用 navigator.userAgent 获取。

    • 典型的 用户代理字符串 如下所示： "Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:35.0) Gecko/20100101 Firefox/35.0".

---

• 示例1: 使用 srcset 属性
  • 候选项: 在支持 srcset 的 用户代理中，src 属性是 一个像素密度1x 候选项。

<img src="mdn-logo-sm.png" alt="MDN" srcset="mdn-logo-HD.png 2x">

---

• 示例2: 使用 srcset 和 sizes 属性
  • 在支持 srcset 的用户代理中，当使用 ‘w’ 描述符时，src 属性会 被忽略。
  • 当匹配了 媒体条件 min-width: 600px 时，图像将 宽 200px，否则 宽 50vw（视图宽度的50%）。
  • 如果 设备的最小宽度是600px，或宽度大于600px（也满足大于等于最小宽度） ，sizes选出的预期宽度就为200px，那么srcset中 就会选择第一个图像，因为是200w，刚好对应上。

<img src="clock-demo-thumb-200.png" 
     alt="Clock" 
     srcset="clock-demo-thumb-200.png 200w, 
             clock-demo-thumb-400.png 400w" 
     sizes="(min-width: 600px) 200px, 50vw">

---

• 示例3：如何指定多张图像，以适应 不同像素密度的屏幕？
  • 使用 srcset 属性的 像素密度描述符x；
  • 图像地址url 后面的像素密度描述符，格式：像素密度倍数 + x。
  • 1x表示单倍像素密度，可以省略。
    • 所以，如果看到图像地址后面 没有描述符，意味着 描述符就是？ 1x；

<img srcset="stars-200w.jpg,
             stars-400w.jpg 1.5x,
             stars-600w.jpg 2x"
     src="stars-200w.jpg">

• 浏览器根据 当前设备的像素密度，选择需要加载的图像。
  • srcset 属性 给了3个图像地址，可以匹配三种 不同的像素密度。
• 如果srcset属性都不满足条件，怎么办？
  • 加载 src 属性 指定的图像。

---

1.3.2 支持的 图像格式

• ⑴ 正确使用图像
  • Web 上的两种主要 图像格式 是什么 ?
    • GIF 和 JPEG['dʒei,peg]
  • GIF 格式:
    • GIF格式 是什么意思 ?
      • 图像交换 格式 = （Graphics Interchange Format，GIF）
    • ① GIF特性
      • ❶ 减小大小+更快传输 : 它采用了一种 特殊的压缩 技术，可以 显著减小 图像文件的 大小，从而得以在网络上 更快地进行 传输。
      • ❷ 无损压缩+ 数据不变: GIF 压缩是 “无损”压缩
        • gif 图像中原来的 数据
          • 不会发生改变或丢失，所以解压缩 并解码后的图像 与原来的图像 完全一样。
      • ❸ 动画效果: GIF 图像还非常 容易实现 动画效果。
      • 总结: gif 图片交换格式 = 文件小+传输快+无损压缩+动画效果
    • ② 有两个 GIF 版本：
      • 原始的 GIF87 和 GIF89a
        • GIF89a : 支持很多新特性，包括
          • 透明背景、交叉存储 和动画等，这些特性在 Web 创作者中的使用 十分普及
    • ③ gif 颜色数目: gif 图片,每个图像最多可以有 多少种颜色 ?
      • 256 种颜色
    • ④ gif 使用范围: GIF 可以用来创建 那种类型的图片?
      • 图标 和 颜色不多的图像
• ⑵ 浏览器支持 不同的图像格式: HTML标准 没有列出 要支持的 图像格式，因此每个用户代理 都支持不同的格式。
  • 更多详细内容: web 浏览器 支持的 图像格式指南

缩写	文件格式	MIME类型	文件扩展名	支持的浏览器
① APNG	Animated Portable Network Graphics (动态便携式 网络图形)	image/apng	.apng	Chrome, Edge, Firefox, Opera, Safari
② BMP	Bitmap file (位图文件)	image/bmp	.bmp	Chrome, Edge, Firefox, Internet Explorer, Opera, Safari
③ GIF	Graphics Interchange Format (图形 交换格式)	mage/gif	.gif	Chrome, Edge, Firefox, Internet Explorer, Opera, Safari
④ ICO	Microsoft Icon (微软的图标)	image/x-icon	.ico, .cur	Chrome, Edge, Firefox, Internet Explorer, Opera, Safari
⑤ JPEG	Joint Photographic Expert Group image (联合图象专家组 图像)	image/jpeg	.jpg, .jpeg, .jfif, .pjpeg, .pjp	Chrome, Edge, Firefox, Internet Explorer, Opera, Safari
⑥ PNG	Portable Network Graphics (便携式 网络图像格式)	image/png	.png	Chrome, Edge, Firefox, Internet Explorer, Opera, Safari
⑦ SVG	Scalable Vector Graphics(可伸缩矢量图形)	image/svg+xml	.svg	Chrome, Edge, Firefox, Internet Explorer, Opera, Safari
⑧ TIFF	Tagged Image File Format (标记图像文件格式)	image/tiff	.tif, .tiff	None built-in; add-ons required
⑨ WebP	Web Picture format (网络 图片格式)	image/webp	.webp	Chrome, Edge, Firefox, Opera

---

1.3.3 img 图片的 css 样式化

• ⑴ 可替换元素: 图片 标签 是个 可替换元素,默认 display="inline"

  • 外部 对象: 在 CSS 中，可替换元素（replaced element）的展现效果 不是由 CSS 来控制的。
  • 独立的 外观渲染: 这些元素是一种 外部对象，它们外观的渲染，是独立于 CSS 的。
  • 不影响 内容: CSS 可以 影响 可替换元素的 位置，但不会影响到 可替换元素 自身的内容。

• ⑵ 默认 尺寸: 但是它的默认尺寸 是由嵌入图像的固有值 定义的，就像它是内联块inline-block(其实 默认值不是)一样。

• ⑶ 搭配 css 属性:

  • ① 可以在图像上 设置 边框/边框半径、内边距/外边距、宽度、高度等 属性。
    • border/border-radius, padding/margin, width, height
  • ② 框内 定位图片: 可以使用 object-position属性 在元素的 框内定位图像
  • ③ 调整 框内 图像大小: 使用object-fit属性 调整框内 图像的大小(例如，图像是否应该 适应框或填充框，甚至需要裁剪)。

• ⑷ 图片 没有基线: 图片 没有基线 baseline

  • 文本 基线: 因此当 图像在 具有 垂直对齐:基线 vertical-align: baseline的内联格式内容中 使用时，图像的底部 将放置在 文本基线上。

• ⑸ 图像的 固定尺寸:

  • 根据其类型，图像 可能具有 固有的宽度和高度 ( intrinsic width and height)。
  • 然而，对于某些 图像类型，没有必要使用 固有尺寸。
    • 例如，如果根元素元素 没有设置 宽度或高度，那么 SVG 图像就没有 固尺寸。

---

1.4 ★ picture (为不同的设备) 提供 可选的图片(搭配 source,img 标签)

• ⑴ 可选的 图片 元素允许 在不同的设备上 显示不同的图片，一般用于 响应式。

  • HTML5 引入了 可选择的图片 元素，该元素 可以让 图片资源的调整 更加灵活。

• ⑵ 搭配 标签: 元素的子元素, 0 或多个元素 和一个元素

  • ① 优先 选择的图片: 每个元素匹配不同的设备 并引用不同的图像源 (不同的图片),浏览器会 优先选择 最匹配的子 元素中的图片.
    • 用户代理 检查每个 的srcset、media和 type 属性，来选择 最匹配页面当前布局、显示设备特征等的 兼容图像。
    • 显示位置: 所选图像 呈现在元素 占据的空间中。用预留空间的.
  • ② 最后 备选图片: 如果 中 都没有匹配的，就选择 元素提供的 图片。

• ⑶ 元素的位置: 是放在 最后一个 元素 之后，上面的 中的条件 都不支持时, 则显示 元素的的图片。(相当于 最后的备选项)

• ⑷ 的浏览器支持

  • 数字表示 支持该元素的 第一个浏览器 版本号。

• ⑸ 调整 图片位置和大小

  • 调整 图片位置: 可以使用 object-position 属性 调整 (元素框架内) 图像的位置
  • 调整 图片大小: 用 object-fit 属性 控制图片 如何调整大小 来适应框架。
  • 注意: 在子 元素 上使用 这些属性，不是 元素。因为是在决定 图片的大小和位置,用预留空间的.

---

• 示例1: 根据 屏幕匹配的不同尺寸 显示不同图片，如果没有匹配到 或浏览器不支持 标签 则使用 元素：
• 嵌套 关系
  • picture > source
  • picture > img

<picture>
  <source media="(min-width: 650px)" srcset="https://static.runoob.com/images/mix/html-css-js.png">
  <source media="(min-width: 465px)" srcset="https://static.runoob.com/images/mix/htmlbig.png">
  <img src="https://static.runoob.com/images/mix/img_avatar.png"  style="width:auto;">
picture>

• 输出

  • 图片 随窗口尺寸 变换: 点击 窗口的 最大化和还原按钮,图片会因为 窗口尺寸变化,而变成 不同的图片

  • 

  • 

• ⑴ 媒体 条件: media 属性
  • ❶ 媒体 条件: media 属性 提供一个媒体条件 ,给用户代理 作为选择 中图片 的依据
  • ❷ 不匹配 就跳过: 如果这个媒体条件 匹配结果为 false，那么这个 元素会被 跳过。
• ⑵ 图片 类型: type 属性
  • ❶ 指定 图片类型: type 属性 为 元素中的图片 (srcset 属性指向的资源 )指定一个 MIME 类型。
  • ❷ 不支持 就跳过: 如果用户代理 不支持 指定的图片类型，那么这个 元素会被跳过。

---

1.5 ★ map: 一个 带有可点击区域的 图片 (搭配 area 标签)

• ⑴ 图像 映射: 如何定义一个 客户端 图像映射 ?

  • 使用 图片映射 标签
  • 可点击 图像: 与 标签 一起使用, 来定义 一个图像映射 (一个可点击的链接区域).
  • 图像映射（image-map）是什么意思 ?
    • 带有 可点击区域 的 一张图片
    • 映射:可点击

• ⑵ 搭配 标签: 用什么表示 ( 图片映射中) 可点击区域 的 区域 ?

  • 标签: 使用 的子元素, 图片映射区域 标签

• ⑶ 绑定 图片: 图片 标签中的 usemap客户端 映射图片 属性的属性值 是什么 ?

  • 关联 关系: img-usemap="#map-id" = "#map-name" （取决于浏览器,所以 id,name属性值 要相同）
    • ① 两属性值 相同: 因为浏览器差异,必须 同时 向 添加 id 和 name 属性,且两个属性值要相同.map-name=map-id
    • ② 名称name的属性值 也必须唯一: name属性 不准与同文档中 其他元素的name值相同 (因为要绑定到,只能指明一个,必须唯一)

• ⑷ 图片映射 标签 的必需的属性 有哪些 ?

属性名	属性值	用于
① id	= unique_name	为 map 图片映射 标签定义 唯一的名称
②name	=text	为 map 图片映射 标签规定的 名称

---

1.6 ★ area: 图像映射中的 (可点击的) 区域 (搭配 map 标签)

• ⑴ 可点击 区域: 如何表示 图像映射中的 可点击区域的 区域 ?

  • 使用 图片映射 区域 标签
    • （注：图像映射 = 带有 (可点击区域) 的图像）
    • ① 可点击 区域: 在图片上 定义一个 热点区域 (hot-spot region)
    • ② 能跳转: 可以 关联一个 超链接。
    • ③ 的子元素: 元素 仅在元素内部 使用。

• ⑵ 标签 位置: 图片映射 区域 标签 一般放在什么位置 ?

  • 的子元素: 总是 嵌套在 图片映射 标签 中。

• ⑶ 正确 关闭: 图片映射 区域 标签,HTML 与 XHTML 之间的差异

  • 在 HTML 中， 没有 结束标签。
  • 在 XHTML 中， 图片映射区域 标签 必须正确地关闭。

---

1.6.1 area 图片映射区域 的 属性

• 图片映射 区域 标签的 必需的属性

属性名	属性值	用于
alt	=text	定义此区域的 替换文本。

---

⑴ alt 属性: 区域图像 替代文本 (搭配 href 属性)

• ⑴ 图片映射 区域 标签的的alt区域替换文本 属性
  • 区域图像 替换文本: area-alt 区域替换文本的属性值
    • area-alt="text""
    • 在不显示图像的 浏览器上 显示的文本字符串。
  • 必需性
    • ❶ 必需的: 在 HTML4中，这个属性 是必需的，但可能是 空字符串("")。
      • 空字符串,代表缺失的 图片 不是要紧的信息.
    • ❷ 可跳转时 才必须: 在HTML5中，只有在 使用href属性时 才需要此属性。
      • 一般 点击时 有可跳转的对象时,就不能轻易缺失了,需要图像替代文本.

---

• 图片映射 区域 标签的 可选的属性

属性名	属性值	用于
name	string	已废弃. 为可单击区域 定义一个 名称，以便可以 由较旧的浏览器 编写脚本。HTML 4可用，自Gecko 5.0以来 就过时了.
① coords	=坐标值	定义 可点击区域（对鼠标敏感的区域）的 坐标。
② href	=URL	跳转地址. 定义此区域的 (超链接) 跳转目标 地址 URL。 在HTML4中，这个属性 或者nohref属性 必须指定 在 元素中。在HTML5中，这个 跳转地址href属性 可以省略;如果忽略，则area元素不代表 超链接。
③ nohref	=nohref	已废弃. 从图像映射 不可点击跳转 的区域。指示 关联区域 不存在超链接。该属性或href属性 必须出现在 元素中。 HTML 4可用，自Gecko 5.0以来 就过时了.直接 省略href属性就足够了。
④ hreflang	语言代码	链接资源 语言. HTML5 . 指示 链接资源的语言。允许的值 由BCP47决定。使用条件+搭配属性: 仅当href属性 存在时 才使用此属性。
⑤ target	=_blank , _parent , _self , _top	跳转页面 打开位置. 规定在 何处打开 href 属性指定的 目标 URL。
⑥ download	资源 地址url	资源 下载地址.HTML5 . 搭配 用于下载的超链接. 如果 存在此属性，则表示 作者打算 将超链接 用于下载资源。(平时搭配 标签).
⑦ shape	=default , rectangle , circle , polygon	区域 形状. 定义区域的 形状。
⑧ ping	一个或者 多个url	跟踪 地址. 包含一个 以空格分隔的 url列表，当跟随 超链接时，浏览器(在后台)将发送带有body PING的 POST请求。通常用于 跟踪。
⑨ rel	链接类型值	指明 链接关系.HTML5.对于包含href属性的锚，此属性 指定 目标对象 与链接对象的 关系。该值 是链接类型值的 空格 分隔列表。使用 条件: 仅当href属性 存在时 才使用此属性。
⑩ media	媒体类型	指明 链接资源的 媒体类型，例：print and screen。如果此属性 省略，默认 全部。使用条件: 仅在href属性存在情况下使用。(没有这个属性,就没有链接资源,也不用 指明它的媒体类型了)

---

⑵ coords 属性: 图形 坐标 (搭配 shape 属性)

• ⑵ 图片映射 区域 标签的 coords坐标 属性

  • 图形 坐标: 如何规定 可点击区域的坐标 ?
    • 使用 area-coords区域坐标 属性
      • coordinates [kəu’ɔ:dineits] n. [数] 坐标
      • 一组值: 指定 热点区域坐标的 一组值。
        • ❶ 值的数量 和意义: 取决于 为shape属性 指定的值 (取决于 图形 形状)
        • ❷ 属性值 单位
          • 在HTML4中，如果添加了 百分号(%)，则值为 像素数 或百分比;
          • 在HTML5中，值是 CSS像素的 数量。
  • 搭配属性: 坐标的 数字和含义 取决于什么 ?

    • ❶ 形状: area-shape区域形状 属性中, 决定的 图形的形状

    • ❷ 左上角 坐标: 图像 左上角 的坐标是 "0,0"。(这个相当于 原点)

  • 区域图形的 形状: 可以将 客户端图像映射 中的可点击区域 定义为
    • 矩形、圆形 或多边形 等。

• area-coords图形坐标 的属性值

形状	属性值	用于
① 矩形	x1,y1,x2,y2	shape= "rect,rectangle"，则该值规定 矩形 左上角 和右下角顶点 的 坐标。(对角线 两个顶点坐标)
② 圆形	x,y,radius	shape ="circ,circle"，则该值规定 圆心的坐标和半径。
③ 多边形	x1,y1,x2,y2,…,xn,yn	shape ="poly,polygon"，则该值规定 多边形各边的坐标。如果第一个坐标 和最后一个 坐标不一致，那么为了 关闭多边形，浏览器必须添加 最后一对坐标。

• area-coords区域坐标 属性和 area-shape区域形状 属性的搭配

  • ① 圆形：
    • 圆心坐标 和半径 : shape="circle"，coords="x,y,r"
      • x ,y : 圆心的位置（"0,0". 是图像 左上角的坐标）
      • r: 圆形 半径 (以 像素 为单位)

  ---

  • ② 多边形：
    • 顶点 坐标: shape="polygon"，coords="x1,y1,x2,y2,x3,y3,..."
      • 每一对"x,y"坐标 = 多边形的 一个顶点
      • （"0,0" 是 图像左上角的 坐标）。
    • 三个 顶点坐标: 定义三角形 至少需要几组坐标 ?
      • 三个顶点 = 三组坐标；(理论上,还应该 有一组坐标,和第一个左边一样,用来 封闭图形)
      • 总结: 几条边 = 几个顶点 = 几组坐标
    • 多边形 自动封闭: 多边形会 自动封闭，因此在列表的结尾
      • 不需要 重复第一个坐标 来闭合整个区域。

  ---

  • ③ 矩形：
    • 矩形 左上角 和右下角 顶点的 坐标 (角和对角的 顶点坐标)
    • 左上右下 两个顶点坐标:shape="rectangle"，coords="x1,y1,x2,y2"
      • “0,0” 是图像左上角的坐标。

---

• 区域重叠 问题
  • 谁在前 就用谁: 如果某个 图片映射 区域 标签定义的区域 和其他区域发生了 重叠
    • 会优先采用 最先出现的 区域 标签。
• 可点击区域 超出 图像边界:
  • 如果 区域 标签定义的区域,超出了 图像边界,浏览器 会怎样处理 ?
    • 忽略. 浏览器会忽略 超过图像 边界范围之外的坐标。

---

• 示例1: 在一张图片上,划分出 3 个 可点击的区域,点击的时候,会跳转到 3个页面

<p>请点击图像上的星球，把它们放大。p>

<img src="http://www.w3school.com.cn/i/eg_planets.jpg" border="0" usemap="#planetmap"
alt="Planets" />

<map name="planetmap" id="planetmap">

	<area shape="circle" coords="180,139,14" href="http://www.w3school.com.cn/example/html/venus.html" target ="_blank" alt="Venus" />
	
	<area shape="circle" coords="129,161,10" href ="http://www.w3school.com.cn/example/html/mercur.html" target ="_blank" alt="Mercury" />
	
	<area shape="rect" coords="0,0,110,260" href ="http://www.w3school.com.cn/example/html/sun.html" target ="_blank" alt="Sun" />

map>

• 输出
  • 可点击 区域: 在图片上 添加 3 个可点击区域, 1 个矩形,2个圆形
    • 可点击区域,点击的时候,会出现 蓝色的边框
  • 跳转 文档: 跳转到的文档,定义在 area-href引用 url 属性中
  • 跳转页面 打开位置:
    • 指定 打开位置: 设置 area-target目标位置 属性.
    • 默认 本窗口: 不设置target的话, 默认 在本窗口中 打开.

---

• 知识拓展
  • 获取 区域形状的 坐标值
  • 当形状比较复杂时,怎么获得 多边形的 坐标值?
  • 方法1: 利用标签和ismap属性 (服务器端 图片映射的坐标值),在浏览器中 测值

<a href="#">
	
a>

• 使用说明:
  • ❶ 搭配属性 ismap: ismap="ismap"，设置这个 服务器端图片映射 属性后，把光标移到图片上 任意位置，网页的左下角状态栏 会显示 当前坐标值.
  • ❷ 要做的子元素,放在元素里面.
  • 测试: 在Firefox 浏览器中有效.
    • 
    • 方法2: Dreamwever 软件中的 热点生成工具

---

⑶ (已废弃) nohref 属性: 无 可点击的 跳转链接

• ⑶ 区域 标签的 nohref 无引用url 属性
  • 无跳转 链接: 规定该区域 没有相关的链接。
    • 和不设置 href属性 一样的效果,因为很多余,所以 已经废弃.
  • 属性值
    • 布尔属性. area-nohref="nohref"
  • 带有 可点击区域和 nohref 无引用url 属性的图像映射

<img src="http://www.w3school.com.cn/i/eg_planets.jpg" border="0" usemap="#planetmap"
alt="Planets" />

<map name="planetmap" id="planetmap">
	<area shape="rect" coords="0,0,110,260" href ="http://www.w3school.com.cn/example/html/sun.html"  alt="Sun" />
	<area shape="circle" coords="129,161,10" href ="http://www.w3school.com.cn/example/html/mercur.html"  alt="Mercury" />
	<area shape="circle" coords="180,139,14" href="http://www.w3school.com.cn/example/html/venus.html"  alt="Venus" />
		
map>

• 测试
  • 最右边的星球,没有设置 area-href引用url 属性,还设置了 nohref无引用url 属性
    • 点击了没反应,也不会跳转页面
  • area 不设置 areatarget目标位置属性,默认在本窗口 中的打开链接文档

---

⑷ shape 属性: 区域图形 形状 (搭配 coords 属性)

• ⑷ 图片映射 区域 标签的 shape区域形状 属性

  • 区域 形状: 如何定义 图像映射中 可点击区域的形状 ?
    • 使用 area-shape区域形状 属性
  • area-shape区域形状 属性值
    • 简写: 取 前4个字母
    • 使用简写 和全称,都可以识别
      • ① 写法1: area-shape= "default | circ | rect | poly"
      • ② 写法2: area-shape= "default circle | rectangle | polygon"
      • ❶ 全部区域
        • default
      • ❷ 圆形
        • circ 或 circle
      • ❸ 矩形
        • rect 或 rectangle ['rɛktæŋɡl]
      • ❹ 多边形
        • poly 或 polygon ['pɑlɪɡɑn]
    • 属性值 简写: 对于矩形，Netscape 4 不能识别 “rectangle”，却能识别 简写"rect"。
      • 所以建议使用: area-shape的简写属性值,4个字母的,不要全写。

---

• 如果 没有使用 area-shape区域形状 属性,浏览器会怎样处理 ?
  • 情况1: 使用默认值 覆盖 整个图片: 浏览器 假设使用 区域形状的默认值 default = 覆盖 整个图像 .
  • 情况2: 默认使用 矩形: 浏览器 默认使用 shape形状是 矩形区域，并期望能找到 4 个 coords 坐标值。
  • ① 不能识别 形状默认值的浏览器 (area-shape="default") ,会默认匹配 矩形形状
    • 没有设置shape区域形状的话,能否 自动匹配形状 取决是不是 矩形的坐标.
      • 非矩形坐标 不能自动匹配 形状:
        • 没有设置shape形状的,设置了圆心和半径 = 点击没反应 = 忽略整个区域
      • 矩形坐标,自动匹配 矩形形状:
        • 没有设置shape形状的, 设置了 矩形的4个坐标值 = 浏览器会找到矩形坐标 自动 把形状设定为矩形 = 点击有反应 = 能跳转
  • ② 能识别 default默认值的浏览器: 默认整个区域:
    • 可以识别 area- shape区域形状 属性 default 默认值的浏览器
      • 可以提供一个 包括全部热点的区域，其他区域不包含的 范围之外 也可以单击.
    • 没有设置 area-shape属性,或 设置为 shape="default",会默认全部区域
      • 默认全部区域的标签的位置
      • 默认全部区域 放最后: 由于 area 出现重叠区域 是采用“ 谁在前 就用谁”的顺序
        • 所以必须将 默认区域 放置在 后面。否则，默认区域 会 覆盖 其他的图像映射中出现的 所有区域。
• 黄金搭档 属性: 综上,根据需要,一定要 设置shape属性,和坐标coords组成黄金搭档,不设置 就太多麻烦了.

---

• 示例1:

<img src="http://www.w3school.com.cn/i/eg_planets.jpg" border="0" usemap="#planetmap"
alt="Planets" />

<map name="planetmap" id="planetmap">
	<area  coords="0,0,110,260" href ="http://www.w3school.com.cn/example/html/sun.html"  alt="Sun" />
	<area  coords="129,161,10" href ="http://www.w3school.com.cn/example/html/mercur.html"  alt="Mercury" />
	<area shape="circle" coords="180,139,14" href="http://www.w3school.com.cn/example/html/venus.html"  alt="Venus" />		
map>

• 测试
  • 360和谷歌 IE ,火狐 浏览器中 (都是 不设置 shape形状,默认匹配矩形的,没有默认匹配 default值,匹配 整个区域的,哪个浏览器 不设置shape,默认匹配整个区域的 ?)
    • 第1个区域的矩形,去掉shape形状属性,不设置形状
      • 点击 还能识别成矩形 形状,能正常跳转
    • 第2个区域的圆形,去掉shape形状属性,不设置形状
      • 点击 没有反应,不能正常跳转

---

• 示例2: 把第2个区域的圆形,设置一个 area-shape="default",并且放在 第1个区域 矩形 区域 area 标签的后面

<img src="http://www.w3school.com.cn/i/eg_planets.jpg" border="0" usemap="#planetmap"
alt="Planets" />

<map name="planetmap" id="planetmap">

	<area  coords="0,0,110,260" href ="http://www.w3school.com.cn/example/html/sun.html"  alt="Sun" />
	<area  shape="default" coords="129,161,10" href ="http://www.w3school.com.cn/example/html/mercur.html"  alt="Mercury" />
	<area shape="circle" coords="180,139,14" href="http://www.w3school.com.cn/example/html/venus.html"  alt="Venus" />
		
map>

• 测试
  • 360 和谷歌 浏览器中
    • 点击 第1个定义的矩形区域,跳转到矩形区域 对应页面
    • 点击最右面 第3个定义的星球区域,也跳转到了 对应的页面
      • (并没有因为 第2个定义的默认整个区域 标签的位置 在它的前面 受影响,为什么没有采用"谁在前 就用谁的顺序")
    • 点击 第1和第3定义的区域 之外的位置,跳转出现的都是 定义为shape="default"的 区域 对应的页面
    • 经测试,把定义为shape="default"的 区域,放在第1个,最前面 最先定义的位置,也不会覆盖其他两个区域.
  • IE 11.0 浏览器中
    • 使用shape="default",点击 第1和第3定义的区域 之外的位置没反应,也就是说 IE 不支持这个属性值

---

⑸ target 属性: 链接 打开位置 (搭配 href 属性)

• ⑸ 图片映射 区域 标签的 target 目标位置 属性
  • 打开位置:
    • 指定在 何处打开 href引用资源地址 属性指定的 链接文档
  • area-target链接 打开位置 属性值
    • area-target="_self | _blank | _ parent | _top | frame-name"
      • ❶ 相同窗口 ,默认 同一窗口 打开 链接文档.
      • ❷ 新窗口
      • ❸ 整个窗口
      • ❹ 父 框架
      • ❺ 指定 框架
• 属性值 区别
  • ❶ 在HTML4中，是 框架的 名称 或关键字。
  • ❷ 在HTML5中，它是 浏览器内容 (browsing context) (例如 标签、窗口 或 内联框架)的 名称 或关键字。

属性值	用于
① _self	默认。在 相同的框架 (同一个窗口)中打开被链接文档。
② _blank	在 新窗口 中打开被链接文档。
③ _parent	在 父框架集 中打开被链接文档。
④ _top	在 整个窗口中 打开被链接文档。
⑤ frame-name	在 指定的框架中 打开被链接文档。

---

1.7 ★ canvas: 一个 图形的画布

• 因为 图形画布标签 涉及的内容比较多,额外写了一个博客.
  • 点击查看 canvas 图形画布标签 (使用详解)

---

1.8 ★ figure: 表示 (补充说明的) 独立内容 (搭配 figcaption)

• 独立 内容: 如何规定 独立的流内容（图像、图表、照片、代码等等） ?
  • 补充说明的 内容: 使用

    独立内容 标签,用来 补充说明主体内容的.

  • 自包含 内容: 元素表示 自包含的内容.
    • ① (可选的)标题: 可能 带有一个可选的标题，该标题 是使用(
      )元素 指定的。

      • 位置 第一或最后:
        作为

        第一个子元素 或最后一个子元素。

      • 第一个: 找到的第一个
        元素 表示为 标题。
    • ② 独立的 引用单元: 作为一个 独立的 引用单元.
      • ❶ 位置 独立于主体: 当它属于 主内容流（main flow）时，它的位置 独立于主体。
      • ❷ 删除 不影响 主体: 这个标签 经常是在主文中 (引用的) 图片，插图，表格，代码段 等等，当这部分 转移到 附录中 或者 页面其他位置时 不会影响到主体。

        • 元素的内容大纲 被排除在 文档的主大纲之外。

    • ③ △ 补充说明:

      元素的内容 应该与 主内容相关, 补充说明的作用.因为是补充说明,所以删掉也不影响 文档主要的内容.

• 浏览器支持
  • 

---

• 和被放在

  中的的区别

  • 放在

    中的图片 是用来 补充说明的,不是主体内容的 一部分,重要性会 减弱些.

---

• 示例1: 独立显示 主文中 引用的一张图片
• 嵌套关系

<figure>
    <img src="https://mdn.mozillademos.org/files/1456/Canvas_sun.png"
         alt="Solar system and sun">
    <figcaption>太阳系背景和太阳figcaption>
figure>

• 默认样式,没有添加 css

---

• 示例2: 补充说明 用的 一段代码.
• 嵌套关系
  • figure > pre
  • figure > figcaption

<figure>
  <figcaption>用<code>navigator</code> 获取浏览器的详细信息: </figcaption>
  <pre>
	  function NavigatorExample() {
		  var txt;
		  txt = "Browser CodeName: " + navigator.appCodeName + "; ";
		  txt+= "Browser Name: " + navigator.appName + "; ";
		  txt+= "Browser Version: " + navigator.appVersion  + "; ";
		  txt+= "Cookies Enabled: " + navigator.cookieEnabled  + "; ";
		  txt+= "Platform: " + navigator.platform  + "; ";
		  txt+= "User-agent header: " + navigator.userAgent  + "; ";
		  console.log("NavigatorExample", txt);
	}
  </pre>
</figure>

• 输出
  • 

---

• 示例3: 补充说明用的 一段引用语
• 嵌套关系
  • figure > blockquote
  • figure > figcaption > cite

    <figure>
        <figcaption>
           (计算机科学家) <cite>Edsger Dijkstra:cite>
        figcaption>
        <blockquote>如果调试是 消除软件 bug 的过程，那么编程 一定是将它们 放入的过程。blockquote>
    figure>

• 输出
  • 
  • 块引用 会自动缩进

---

• 示例4: 补充说明用的 一段诗歌
• 嵌套关系
  • figure > p
  • figure > figcaption > cite

    <figure>
        <p style="white-space:pre">

    李白乘舟将欲行，
    忽闻岸上踏歌声。
    桃花潭水深千尺，
    不及汪伦送我情。
        p>
        <figcaption>
            <cite>《赠汪伦》cite>,李白.
        figcaption>
    figure>

• 输出
  • 
  • 保留 空白和换行: white-space:pre

---

1.9 ★ figcaption: (补充说明的)独立内容的 说明/标题 (搭配 figure 标签)

• 用于

  • 标题 / 说明: 如何定义 figure (补充说明的) 独立内容的 说明/标题（caption）?
    • 使用
      独立内容 标题说明 标签

      • 对 父元素

        元素里的 其他数据的 说明/标题

    • (补充说明内容的) 标题或说明
      • Figure Caption
    • 可选的
      • 标签是可选的,如果没有 该元素，父元素 会没有 说明/标题。

• 浏览器支持

  • Internet Explorer 8 以及更早的版本 不支持
    标签。
  • 

---

• 示例1: 对正文的 补充说明的图片,并为这个说明图片 定义一个标题

DOCTYPE HTML>
<html>
	<body>
	
		<p>上海卢浦大桥是当今世界第一钢结构拱桥，是世界上跨度最大的拱形桥。它也是世界上首座完全采用焊接工艺连接的大型拱桥（除合拢接口采用栓接外），现场焊接焊缝总长度达4万多米，接近上海市内环高架路的总长度。卢浦大桥像澳大利亚悉尼的海湾大桥一样具有旅游观光的功能。p>
		
		<figure>
		   <figcaption>黄浦江上的的卢浦大桥figcaption>
		   <p>拍摄者：W3School 项目组，拍摄时间：2010 年 10 月p>
		   <img src="http://www.w3school.com.cn/i/shanghai_lupu_bridge.jpg" width="350" height="234" />
		figure>
	
	body>
html>

• 主文中提及的大桥 的图片,作为 补充说明的 独立内容,单独表示一下
  • 是对主文 补充说明的作用,去掉,也不影响 主体内容

---

结束语

• 捐助: 喜欢这篇文章吗? 持续更新中,捐助此文,向团团 表示鼓励和支持吧~❤
  
• 捐助二维码:
  

---

• 参考文档
  • W3School 教程
  • MDN HTML 教程
• 感谢：♥♥♥ 如果这篇文章 对您有帮助的话，可以点赞、评论、关注，鼓励下作者哦，感谢阅读 ~

---

• 转载 请注明出处 ,Thanks♪(･ω･)ﾉ
  • 作者：Hey_Coder
  • 来源：CSDN
  • 原文：https://blog.csdn.net/VickyTsai/article/details/89840434
  • 版权声明：本文为博主原创文章，转载请附上博文链接！