前端学习回顾-11

HTML 中的图片

将一副图片放在网页上

如果想要将一副名为 dinosaur.jpg 的图片嵌入在 HTML 页面中，且其与 HTML 页面存放在相同路径下，可以写下如下代码：

<img src="dinosaur.jpg">

如果 dinosaur.jpg 存储在与 HTML 页面同路径的 images 文件夹下（这也是 Google 推荐的做法，利于 SEO/索引），那么可以写下如下代码：

<img src="images/dinosaur.jpg">

注：搜索引擎亦会读取图像的文件名，并将其文件名也计入SEO，因此图片拥有一个描述性的文件名：dinosaur.jpg 比单纯的 img835.jpg 要好。

当然你可以使用图像的绝对路径，例如：

<img src="https://www.example.com/images/dinosaur.jpg">

但是并不推荐这种用法，当图片与 HTML 文件在同一服务器上时（通常开发者都会如此做），这种做法会使浏览器做更多的工作，例如重新通过 DNS 去寻找本服务器 IP 地址，显示降低效率。

注：<img> 和 <video> 以及相似元素有时被称为替换元素，因为这些元素的内容和尺寸由外部资源（如图片或视频文件）定义，而不是元素自身。

图片使用注意事项

我们所能找到的绝大多数图片可能都有版权，所以不建议在网页中随便嵌入一张图片，当然以下情况你可以尽情嵌入：
（1）你是图片版权所有者。
（2）你拥有图片版权所有者明确的、书面的使用授权。
（3）你有充分的证据证明这张图片是公共领域内的。

注：侵犯版权行为是不道德的违法行为。因此，在得到授权之前永远不要将你的 src（可读作其全称：source）属性指向其他任何网站上的图片，这种行为被称作“盗链（hotlinking）”。同样，盗取他人的带宽亦是违法行为，而且这会降低你页面的加载速度，且图片可能会在不受控制的情况下被移走或是被其他东西替换掉（比如“熊猫烧香”图片）。

备选文本（Alternative text）

在 <img> 元素中使用 alt 属性表示备选文本，其对应的属性值应该是对图片的文字描述，当图片无法显示或不能被看到时其会自动显示。代码示例：

<img src="images/dinosaur.jpg"
     alt="The head and torso of a dinosaur skeleton;
          it has a large head with long sharp teeth">

alt 属性（即备选文本）的使用原因：
（1）对于借助屏幕阅读器的视力障碍用户，可以通过屏幕阅读器读出的备选文本了解图片相关信息。
（2）开发者可能会将图片的文件名或者路径拼写错误，致使图片不能正常显示，此时用户可以通过备选文本了解图片相关信息。
（3）浏览器不支持 HTML 中所嵌入的图片类型，或者只支持纯文本的浏览器，此时图片亦不能正常显示。
（4）搜索引擎可能会将图片的文字描述与查询条件进行匹配。
（5）当用户出于某种原因关闭了浏览器的图片显示时，图片亦不能正常显示。

alt 属性的属性值书写推荐（首先取决于该图片嵌入在此处的原因）：
（1）装饰：该图片只是用于页面装饰，并不属于页面内容的一部分，此时可以写一个空值，即 alt=“”。（此方法应用于无法避免的情况下，一般推荐使用 CSS background images 在页面中嵌入装饰图片。）
（2）内容：该图片提供了重要的信息，此时需要在 alt 属性值中提供简要的相同信息。或者直接将信息写在与图片一起使用的 <p>元素中，由于其他元素已经对图片进行了充分的描述，此时书写 alt=""。
（3）链接：该图片嵌套在 <a> 元素中，此时必须提供无障碍的链接文本，此情况下，图片描述可以写在同一 <a> 元素中，或者写在图片的 alt 属性中。
（4）文本：该图像内容为样式文本（更推荐使用 CSS 达到此目的，而不是用图片表述样式文本），此时文本内容也应作为 alt 属性值。

宽度（Width）和高度（Height）

可以使用 <img> 元素的 width 和 height 属性指定图片的宽度和高度。代码示例：

<img src="images/dinosaur.jpg"
     alt="一只恐龙头部和躯干的骨架，它有一个巨大的头，长着锋利的牙齿。"
     width="400"
     height="341">

在图片正常加载情况下，这并不会对显示产生很大印象。但是如果图片没有正常显示，此时你会注意到浏览器为要显示的图片留下一定的空间：

但是，本着实践是检验真理的唯一标准，笔者使用win10系统的 chrome、edge、firefox 三款浏览器进行了上述实验，结果出人意料（截图采用firefox实验结果）：

然后，当笔者拜托朋友使用苹果系统的 Safari 和 chrome 浏览器进行上述实验时，
safari 浏览器结果为：

chrome浏览器结果;

**经过笔者的不懈努力，原因没有找到。**知道原因的大佬拜托踢我一下哈，拜托拜托~

Image title 图片标题

类似于 <a> 元素，亦可以给 <img> 元素添加 title 属性以提供需要更近一步的支持信息。
图片标题并不必须需要包含有意义的信息，建议将支持信息使用主要文本表示。
并不推荐使用图片标题表示支持信息，因为 title 有很多可访问性问题，基于屏幕阅读器的支持是不可预测的。大多数浏览器不会自动显示图片标题，除非鼠标悬停于图片之上（对键盘用户不友好）。
代码示例：

<img src="images/dinosaur.jpg"
     alt="一只恐龙头部和躯干的骨架，它有一个巨大的头，长着锋利的牙齿。"
     width="400"
     height="341"
     title="A T-Rex on display in the Manchester University Museum">

为图片添加说明文字

有多种方法可以为图片添加说明文字，笔者举例两种。

注：以无障碍的角度来看，alt 属性与说明文字扮演者不同的角色。当图片正常显示时，说明文字辅助用户获取图片信息，当图片无法显示时，alt 文字代替图片给予用户信息。因此，不建议 alt 文字与说明文字的内容一样。

使用 p 元素添加说明文字

在 <p> 元素中包含说明文字，此时虽方便使用 CSS，但是 <img> 和 <p> 元素并没有语义上的联系，会给屏幕阅读器用户造成问题。代码示例：

<div class="figure">
  <img src="/images/dinosaur_small.jpg"
     alt="一只恐龙头部和躯干的骨架，它有一个巨大的头，长着锋利的牙齿。"
     width="400"
     height="341">
  <p>曼彻斯特大学博物馆展出的一只霸王龙的化石</p>
</div>

使用 figure 以及 figcaption 元素添加说明文字

HTML5 新增 <figure> 和 <figcaption> 元素，可以为图片提供一个语义容器，在标题与图片之间建议清晰的关联。代码示例：

<figure>
  <img src="https://raw.githubusercontent.com/mdn/learning-area/master/html/multimedia-and-embedding/images-in-html/dinosaur_small.jpg"
     alt="一只恐龙头部和躯干的骨架，它有一个巨大的头，长着锋利的牙齿。"
     width="400"
     height="341">
  <figcaption>曼彻斯特大学博物馆展出的一只霸王龙的化石</figcaption>
</figure>

注：<figure> 元素时一个独立内容单元：

• 用简洁、易懂的方式表达意图。
• 可以置于页面线性流的某处。
• 为主要内容提供重要的补充信息。
  <figure> 可以是 一张或多张图片、一段代码、音视频、方程、表格或其它东西。

其他方式添加背景图片

通过 CSS 和 JavaScript 亦可以将图片嵌入到页面中，这些做法相对于借助 HTML 元素嵌入图片的做法，可以更好地控制图片和设置图片的位置，但这样嵌入的图片完全没有语义上的意义，不能有任何备选文本，亦不能被屏幕阅读器识别。相对的，上述方法的弊端使用 HTML 元素嵌入图片就可以完全避免了。
综上所述：

• 通过 CSS 和 JavaScript 方法为页面添加图片：可以更好的控制图片和设置图片的位置，建议使用使用这些方法设置背景图片。
• 通过 HTML 的 <img> 元素为页面添加图片：图片可以含有语义、图片可以有备选文本、可以被屏幕阅读器识别。