【图像标签】

Hey_Coder

已于 2022-05-24 22:09:36 修改

阅读量3.3k

点赞数 3

分类专栏：【HTML】文章标签：图像标签 img标签 figure标签 canvas标签

于 2019-05-24 08:51:19 首次发布

本文链接：https://blog.csdn.net/VickyTsai/article/details/89840434

版权

【HTML】专栏收录该内容

26 篇文章 10 订阅

订阅专栏

图像标签目录

1. 图像标签
结束语

1. 图像标签

1.1 图像标签有哪些 ?

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

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

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

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

⑴ 嵌入图片: 如何在网页中嵌入一个图片 ?
- 使用<img>图片标签
  - 元素将图像嵌入到文档中。
- 文字代码: <img> 图片标签并不会在网页中直接插入图像
  - 不是把图片直接放在代码里,而是通过 ❶ 指明图片的位置 ,来链接图片,实际上还是 ❷ 文字代码.
⑵ 占位空间: <img>图片标签创建的是什么 ?
- (被引用) 图像的占位空间。为什么要占位？
  - 页面布局稳定:设置图像占用的空间，以确保页面布局在加载之前是稳定的。
⑶ 必需属性: <img> 标签有哪两个必需的属性 ?
- ① src图片地址 url 属性
  - src属性是必需的，它包含要嵌入的图像的路径，指明了路径，才能在文档中嵌入一个图片。
- ② alt图片替代文本属性。
  - 为什么图片要有替代文本？
    - 可访问性： alt属性包含图像的文本描述，这不是强制的，但是对于可访问性非常有用——屏幕阅读器将这个描述读给用户听，这样他们就知道图像的含义，对于几千万的盲人，1亿多的视力障碍群体来说，是极好的关怀，不能缺少的。
    - 无法正常显示时的提醒：如果由于某种原因无法加载图像，也会在页面上显示alt文本:例如，网络错误、内容阻塞或链接地址错误，用户禁用了图片等。
  - 所以,建议最好设置,作用很大。
⑷ 图像加载错误的处理: onerror 事件处理程序
- 如果在加载或呈现（渲染）图像时发生错误，如何处理？
  - 可以设置onerror属性，即，在错误error事件上设置了 onerror事件处理程序，则将调用该事件处理程序。
- 哪些情况，可能导致加载或渲染图像时发生错误？
  - src 属性为空("")或 null。
  - src URL与用户当前所在页面的 URL 相同。
  - 图像在某种程度上损坏了，阻止了它被加载。
  - 图像的元数据以无法检索其尺寸的方式损坏，并且在元素的属性中没有指定尺寸。
  - 图像的格式不受用户代理的支持。
⑸ 正确关闭: HTML 与 XHTML 之间的差异
- 在 HTML 中，<img> 标签没有结束标签。
- 在 XHTML 中，<img> 标签必须被正确地关闭。即，写成 <img />
⑹ 废弃属性
- 在 HTML 4.01 中，不推荐使用 img 元素的"align"、"border"、"hspace"以及 "vspace" 属性。
- 在 XHTML 1.0 Strict DTD 中，不支持 image 图片元素的 "align"、"border"、"hspace" 以及 "vspace" 属性。
- 基本上都是关于样式的属性,因为有 css 了,所以显得多余了.
⑺ <img> 标签和属性的浏览器支持

1.3.1 img 图片标签的属性

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

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

<img>图片标签可选的属性有哪些 ?

属性名	属性值	用于
① `height`	pixels , %	定义图像的高度。
② `width`	pixels , %	设置图像的宽度。设置宽高的目的：为图片 ❶ 预留空间，以免影响 ❷ 页面布局。（建议使用 ❸ CSS 的宽高属性设置）。
③ `ismap`	=`ismap`	布尔属性。将图像定义为服务器端图像映射。前提：❶ `<img>` 是 `<a>` 的后代。❷ 点击图片，会发送图像坐标 `(x,y)` 到服务器，服务器根据坐标给出处理。❸ a-`href` 属性指定服务器处理页面。
④ `usemap`	`#map-name , #map-id`	将图像定义为客户端图像映射。绑定 `<map>` 标签，把图片分成多个可点击区域。禁用的父标签`a，button`，可交互元素，会影响与 `<map>`的交互。
⑤ `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 属性: 图片替代文本

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

⑵ <img>图片标签的 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 后代)

⑶ <img>图片标签的 ismap 服务器映射图片属性
- 服务器映射图片: 将图像定义为服务器端图像映射。
  - 布尔属性：仅使用属性名ismap，或属性名与值相等 ismap="ismap"。
    - 指示图像是 server-side map服务器端映射的一部分。
  - 发送图像坐标: 如果设置了该属性，则将用户单击的图像的坐标发送到服务器。
  - 显示图片坐标: 不单击,只把鼠标放在图片上,左下角状态栏也会显示图片坐标
    - <area>的图形坐标: Firefox 中测试有效,可以用来测试图片的热点坐标 (<area>的图形可点击坐标)
- 映射图片: 映射图片是什么意思 ?
  - 可点击图像: 带有可点击区域的图像。
- 发送图像坐标: 当点击一个服务器端图像映射时, 点击到的图片坐标, 会以 URL 查询字符串 的形式发送到服务器。
  - 当用户在 ismap 图像上单击了某处时
    - 相对左上角的 (x,y)坐标: 浏览器会自动把鼠标的 x、y 位置（相对于图像的左上角）发送到服务器端。
    - 服务器端软件,可以根据这些坐标来做出响应。
  - 总结: img-ismap 服务器映射图片 = 可点击 = 发送图片坐标 = 结合 <a> 超链接标签
- ☆ 使用前提
  - <img>, 作为<a>的子元素: 只有当 <img> 图片, 属于 ( 带有 有效 href 属性的) <a> 元素的后代时，才允许 ismap 属性。
    - a > img ,才使用 img-ismap属性
    - <a> 用来: href 属性指定 服务器处理页面,有这个页面,图片的坐标才知道该发到哪里去.
- 不可简写: HTML 与 XHTML 之间的差异
  - 在 XHTML 中，禁止属性简写，并且必须把 ismap 属性定义为
  - img-ismap="ismap"
- 指定服务器处理页面: 服务器处理页面怎么指定 ?
  - 写在 <a> 超链接元素的 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 标签，分成多个可点击区域)

⑷ <img>图片标签的 usemap客户端映射图片属性
- 客户端映射图片:
- 如何将图片定义为客户端映射图片，即如何将图片分成多个可点击的区域？
  - 绑定图片映射<map> 标签。
    - 如何绑定图片映射<map>？
      - 使用 usemap 绑定 map 属性
  - <img> 元素中的 usemap 属性值设为什么?
    - map- id 或 map-name名称属性值（不同浏览器，绑定属性不同）
      - 如果map标签的id，name 只设置一个，设置哪个用于关联？
        设置name属性，在浏览器中兼容性更强。
        #map-id，谷歌中，不能实现关联，IE11和火狐中可以。
        #map-name，IE11，谷歌和火狐中，都可以实现关联。
      - 两属性同时添加相同值:
        所以,建议向 <map>图片映射 ❶ 同时添加 id 和 name名称属性，且 ❷ 两属性的值，最好相同。
    - 如何建立 图片映射的？
      - img-usemap 属性与 <map> 的 name或 id 属性相关联，以建立 <img>图片与 <map> 图片映射之间的关系。
- img-usemap 属性值
  - img-usemap="#map-name | # map-id"
    - #开头,加上要使用的 <map> 图片映射标签的 name 名称或 id 属性值
父元素限制
- 如果<img>元素位于 <a>或<button>元素内，则不能使用此属性。
- img 不能是交互元素的子元素: 图片不能是链接或者按钮的子元素，为什么？
  - 这两个元素是可点击的,有交互行为，就会影响对关联元素 <map>的点击响应。

示例: 将一张图片划分出 3 个区域，当用户单击某一个区域时，会打开一个链接.
嵌套关系
- <img> , src alt border usemap
- <map> name= id (相同属性值: 为了浏览器兼容性,这两个属性值最好设置为相同的)
  - <area> , 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 (有无凭证)

⑸ <img>图片标签的 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 启用的图像）的图像数据，在<canvas>元素中使用，会被标记为污染（tainted）吗？
    - 不会被标记为“污染”。为什么？
      - 经过了跨源资源共享（CORS）的批准。
    - 什么是污染？
      - 未经跨源资源共享（CORS）批准的从其他来源加载的数据，画布会判定为 “被污染”。
      - 而当图像数据经过 CORS 批准，就不会被判定为污染。
③ 如果图片 <img> 没有指定 crossorigin 属性，会发送跨源资源共享（CORS）请求吗？
- 不会。会发送一个非cors请求(没有 Origin 请求头)。
- 什么是 Origin 请求头（request header）？
  - 指明发出请求的来源的源网址（协议，主机，端口）。即，指明是谁在要资源。
  - Origin request header 的语法
    - 不提供发出请求的源网址：Origin: null
    - 默认端口号被省略：Origin: <scheme>://<hostname>
    - 完整的源网址：Origin: <scheme>://<hostname>:<port>
- 如果图片 <img> 没有指定 crossorigin 属性，发送了非 cors 请求后，浏览器会怎么处理这个图片？
  - 浏览器将图像标记为 ❶ 受污染的，并限制对其图像数据的访问，❷ 防止在<canvas>元素中使用它。
④ 如果图片 <img> 指定 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 头部信息，不告诉服务器是谁在请求资源。
  - 用以防止资源在<canvas>中不受污染的使用。对资源也算是种保护。
⑦ “有无凭证的属性值，无效值” 和未设置属性的区别
- ① 设置属性：无效值=无凭证跨源请求，无论有无凭证，设置了crossorigin属性，发送的就是跨源资源共享 ❶ cors 请求。都会 ❷ 发送 origin http header，指明是谁在请求资源。
- ② 未设置属性：发送的就是 ❶ 非 cors 请求，❷ 不会发送 origin http header，不指明是谁在请求资源。

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

⑹ <img>图片标签的 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 中如何实现 “响应式图像”？
- 要点：根据不同的设备，显示不同的图像；
- 通过 <img> 标签的 sizes 属性和 srcset 属性。
  - 第一步，sizes属性根据对设备的筛查匹配，选出预期的宽度（不一定是展示时的实际宽度）；
  - 第二步，srcset属性根据预期的宽度，选出合适的图像（图像地址），这是真实展示出的图像。
    - 实际显示尺寸：可能是图像本身的尺寸，也可能是被其他方式指定的尺寸；
  - 综上：根据不同的设备，显示不同的图像，需要以上两步都完成，才能成功。

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

⑺ <img>图片标签的 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）

⑻ <img>图片标签的 srcset 多选图像地址
srcset 属性值: 一个或多个 字符串 （以逗号 ,分隔字符串，和sizes属性中一样）
- 多个图像的地址:
  - 表明一系列用户代理可能使用的图像。
属性值字符串组成: 每一个字符串由以下组成：图像地址+空格+描述符(可选w
,x)
- ① 图像地址: 一个图像的 URL。
- ② 宽度描述符 / 像素密度描述符: 可选的，空格后跟以下的其一：
  - ❶ 宽度描述符:
    - 一个宽度描述符，这是一个 正整数，后面紧跟 ‘w’ 符号。(w: width,宽度)
    - 换算值: 有效的像素密度 = srcset宽度/ sizes 预期宽度
      - 该整数宽度除以sizes属性给出的预期宽度来计算得到有效的像素密度，即换算成和 x描述符等价的值。
  - ❷ 像素密度描述符 :
    - 一个像素密度描述符，这是一个 正浮点数，后面紧跟 ‘x’ 符号。
  - ❸ 未设置默认1x: 如果没有指定描述符，那它会被指定为默认的 1x。
  - △ 使用说明:
    - 描述符不要混合使用: 在同一个的 srcset 属性中混合使用宽度描述符和像素密度描述符时，会导致该值无效。
    - 描述符不要重复: 重复的描述符（比如，在同一个srcset两个源都是 ‘2x’）也是无效的。
src 图片地址属性和srcset 多个图片地址属性的使用
- src是图像的地址 URL，这个属性对 <img> 元素来说是必需的。
- 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 样式化

⑴ 可替换元素: <img>图片标签是个可替换元素,默认 display="inline"
- 外部对象: 在 CSS 中，可替换元素（replaced element）的展现效果不是由 CSS 来控制的。
- 独立的外观渲染: 这些元素是一种外部对象，它们外观的渲染，是独立于 CSS 的。
- 不影响内容: CSS 可以影响可替换元素的位置，但不会影响到可替换元素自身的内容。
⑵ <img> 默认尺寸: 但是它的默认尺寸是由嵌入图像的固有值定义的，就像它是内联块inline-block(其实默认值不是)一样。
⑶ 搭配 css 属性:
- ① 可以在图像上设置边框/边框半径、内边距/外边距、宽度、高度等属性。
  - border/border-radius, padding/margin, width, height
- ② 框内定位图片: 可以使用 object-position属性在元素的框内定位图像
- ③ 调整框内图像大小: 使用object-fit属性调整框内图像的大小(例如，图像是否应该适应框或填充框，甚至需要裁剪)。
⑷ 图片没有基线: <img>图片没有基线 baseline
- 文本基线: 因此当图像在具有垂直对齐:基线 vertical-align: baseline的内联格式内容中使用时，图像的底部 将放置在文本基线上。
⑸ 图像的固定尺寸:
- 根据其类型，图像可能具有固有的宽度和高度 ( intrinsic width and height)。
- 然而，对于某些图像类型，没有必要使用固有尺寸。
  - 例如，如果根元素<SVG>元素没有设置宽度或高度，那么 SVG 图像就没有固尺寸。

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

⑴ 可选的图片<picture> 元素允许在不同的设备上显示不同的图片，一般用于响应式。
- HTML5 引入了 <picture> 可选择的图片元素，该元素可以让图片资源的调整更加灵活。
⑵ 搭配标签: <picture> 元素的子元素, 0 或多个<source>元素和一个<img>元素
- ① 优先选择的图片: 每个<source>元素匹配不同的设备并引用不同的图像源 (不同的图片),浏览器会优先选择最匹配的子 <source> 元素中的图片.
  - 用户代理检查每个 <source> 的srcset、media和 type 属性，来选择最匹配页面当前布局、显示设备特征等的兼容图像。
  - 显示位置: 所选图像呈现在<img>元素占据的空间中。用<img>预留空间的.
- ② 最后备选图片: 如果 <source>中都没有匹配的，就选择 <img> 元素提供的图片。
⑶ <img> 元素的位置: 是放在最后一个 <source> 元素之后，上面的 <source>中的条件都不支持时, 则显示 <img> 元素的的图片。(相当于最后的备选项)
⑷ <picture>的浏览器支持
- 数字表示支持该元素的第一个浏览器版本号。
⑸ 调整图片位置和大小
- 调整图片位置: 可以使用 object-position 属性调整 (元素框架内) 图像的位置
- 调整图片大小: 用 object-fit 属性控制图片如何调整大小来适应框架。
- 注意: 在子元素<img> 上使用这些属性，不是 <picture> 元素。因为是<img>在决定图片的大小和位置,用<img>预留空间的.

示例1: 根据屏幕匹配的不同尺寸显示不同图片，如果没有匹配到或浏览器不支持 <picture 标签则使用 <img> 元素：
嵌套关系
- 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 属性提供一个媒体条件 ,给用户代理作为选择 <source> 中图片的依据
- ❷ 不匹配就跳过: 如果这个媒体条件匹配结果为 false，那么这个 <source> 元素会被跳过。
⑵ 图片类型: type 属性
- ❶ 指定图片类型: type 属性为 <source> 元素中的图片 (srcset 属性指向的资源 )指定一个 MIME 类型。
- ❷ 不支持就跳过: 如果用户代理不支持指定的图片类型，那么这个 <source> 元素会被跳过。

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

⑴ 图像映射: 如何定义一个客户端图像映射 ?
- 使用 <map>图片映射标签
- 可点击图像: 与 <area> 标签一起使用, 来定义一个图像映射 (一个可点击的链接区域).
- 图像映射（image-map）是什么意思 ?
  - 带有 可点击区域 的一张图片
  - 映射:可点击
⑵ 搭配标签: 用什么表示 ( 图片映射中) 可点击区域的区域 ?
- <area> 标签: 使用 <map>的子元素, <area>图片映射区域标签
⑶ 绑定图片: <img>图片标签中的 usemap客户端映射图片属性的属性值是什么 ?
- 关联关系: img-usemap="#map-id" = "#map-name" （取决于浏览器,所以 id,name属性值要相同）
  - ① 两属性值相同: 因为浏览器差异,必须同时向 <map> 添加 id 和 name 属性,且两个属性值要相同.map-name=map-id
  - ② 名称name的属性值也必须唯一: name属性不准与同文档中其他<map>元素的name值相同 (因为要绑定到<img>,只能指明一个,必须唯一)
⑷ <map>图片映射标签的必需的属性有哪些 ?

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

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

⑴ 可点击区域: 如何表示图像映射中的可点击区域的区域 ?
- 使用 <area>图片映射区域标签
  - （注：图像映射 = 带有 (可点击区域) 的图像）
  - ① 可点击区域: 在图片上定义一个热点区域 (hot-spot region)
  - ② 能跳转: 可以关联一个超链接。
  - ③ <map>的子元素: <area>元素仅在<map>元素内部使用。
⑵ 标签位置: <area>图片映射区域标签一般放在什么位置 ?
- <map>的子元素: 总是嵌套在 <map>图片映射标签中。
⑶ 正确关闭: <area>图片映射区域标签,HTML 与 XHTML 之间的差异
- 在 HTML 中，<area> 没有结束标签。
- 在 XHTML 中，<area> 图片映射区域标签必须正确地关闭。

1.6.1 area 图片映射区域的属性

<area>图片映射区域标签的 必需的属性

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

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

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

<area>图片映射区域标签的 可选的属性

属性名	属性值	用于
~~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 . 搭配用于下载的超链接. 如果存在此属性，则表示作者打算将超链接用于下载资源。(平时搭配 `<a>` 标签).
⑦ shape	=default , rectangle , circle , polygon	区域形状. 定义区域的形状。
⑧ ping	一个或者多个url	跟踪地址. 包含一个以空格分隔的 url列表，当跟随超链接时，浏览器(在后台)将发送带有body `PING`的 `POST`请求。通常用于跟踪。
⑨ rel	链接类型值	指明链接关系.HTML5.对于包含`href`属性的锚，此属性指定目标对象与链接对象的关系。该值是链接类型值的空格分隔列表。使用条件: 仅当`href`属性存在时才使用此属性。
⑩ media	媒体类型	指明链接资源的媒体类型，例：`print and screen`。如果此属性省略，默认全部。使用条件: 仅在`href`属性存在情况下使用。(没有这个属性,就没有链接资源,也不用指明它的媒体类型了)

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

⑵ <area>图片映射区域标签的 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” 是图像左上角的坐标。

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

示例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: 利用<a>标签和ismap属性 (服务器端图片映射的坐标值),在浏览器中测值

<a href="#">
	<img src="src="https://interactive-examples.mdn.mozilla.net/media/examples/mdn-info.png" ismap="ismap" />
</a>

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

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

⑶ <area>区域标签的 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 属性)

⑷ <area>图片映射区域标签的 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>标签的位置
    - 默认全部区域放最后: 由于 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 属性)

⑸ <area>图片映射区域标签的 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> 图形画布标签涉及的内容比较多,额外写了一个博客.
- 点击查看 canvas 图形画布标签 (使用详解)

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

独立内容: 如何规定独立的流内容（图像、图表、照片、代码等等） ?
- 补充说明的内容: 使用 <figure> 独立内容标签,用来补充说明主体内容的.
- 自包含内容: 元素表示自包含的内容.
  - ① (可选的)标题: 可能带有一个可选的标题，该标题是使用(<figcaption>)元素指定的。
    - 位置第一或最后: <figcaption> 作为 <figure> 第一个子元素或最后一个子元素。
    - 第一个: 找到的第一个<figcaption>元素表示为标题。
  - ② 独立的引用单元: 作为一个独立的引用单元.
    - ❶ 位置独立于主体: 当它属于主内容流（main flow）时，它的位置独立于主体。
    - ❷ 删除不影响主体: 这个标签经常是在主文中 (引用的) 图片，插图，表格，代码段 等等，当这部分转移到附录中或者页面其他位置时不会影响到主体。
      - <figure>元素的内容大纲被排除在文档的主大纲之外。
  - ③ △ 补充说明: <figure> 元素的内容应该与主内容相关, 补充说明的作用.因为是补充说明,所以删掉也不影响文档主要的内容.
浏览器支持

<img> 和被放在 <figure>中的<img>的区别
- 放在 <figure>中的图片是用来补充说明的,不是主体内容的一部分,重要性会减弱些.

示例1: 独立显示主文中引用的一张图片
嵌套关系
- <figure>
  - <img>
  - <figcaption>

<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）?
  - 使用<figcaption> 独立内容标题说明标签
    - 对父元素<figure> 元素里的其他数据的说明/标题
  - (补充说明内容的) 标题或说明
    - Figure Caption
  - 可选的
    - 标签是可选的,如果没有该元素，父元素会没有说明/标题。
浏览器支持
- Internet Explorer 8 以及更早的版本不支持 <figcaption> 标签。

示例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
- 版权声明：本文为博主原创文章，转载请附上博文链接！

Hey_Coder

关注

3
点赞
踩
10

收藏

觉得还不错? 一键收藏
0
评论
【图像标签】

1. 图像标签1.1 图像标签有哪些 ?1.2 html5 中的新图像标签有哪些 ?1.3 ★ img: 在网页中嵌入一个图片（src，alt 必需）1.3.1 img 图片标签的属性⑴ alt 属性: 图片替代文本❤ 图像替代文本 alt 属性和 title 属性的区别⑵ height +width 属性: 高度和宽度 (预留空间)⑶ ismap 属性: 服务器映射图片 (布尔属性，图像坐标, img 是 a 后代)⑷ usemap 属性: 客户端映射图片( 绑定
复制链接

扫一扫