这是我参与「第五届青训营 」笔记创作活动的第2天，之前都在实习，就没有发布笔记。 下面就和大家分享一下我学习前端以及HTML的第三份笔记吧
1.2 多媒体与嵌入
1.2.1 HTML图片
怎样将一幅图片放到网页上？
我们可以用<img> 元素来把图片放到网页上。它是一个空元素（它不需要包含文本内容或闭合标签），最少只需要一个 src （一般读作其全称 source） 来使其生效。src 属性包含了指向我们想要引入的图片的路径，可以是相对路径或绝对 URL，就像 <a> 元素的 href 属性一样。
举个例子来看，如果你有一幅文件名为 dinosaur.jpg 的图片，且它与你的 HTML 页面存放在相同路径下，那么你可以这样嵌入它：
<img src="dinosaur.jpg">
如果这张图片存储在和 HTML 页面同路径的 images 文件夹下（这也是 Google 推荐的做法，利于SEO/索引），那么你可以采用如下形式：
<img src="images/dinosaur.jpg">
以此类推。
备注： 搜索引擎也读取图像的文件名并把它们计入 SEO。因此你应该给你的图片取一个描述性的文件名：
dinosaur.jpg比img835.png要好。
你也可以像下面这样使用绝对路径：
<img src="https://www.example.com/images/dinosaur.jpg">
但是这种方式是不被推荐的，这样做只会使浏览器做更多的工作，例如重新通过 DNS 再去寻找 IP 地址。通常我们都会把图片和 HTML 放在同一个服务器上。
备注： 像
<img>和<video>这样的元素有时被称之为替换元素，因为这样的元素的内容和尺寸由外部资源（像是一个图片或视频文件）所定义，而不是元素自身
备选文本
下一个我们讨论的属性是 alt ，它的值应该是对图片的文字描述，用于在图片无法显示或不能被看到的情况。例如，上面的例子可以做如下改进：
<img src="images/dinosaur.jpg"alt="The head and torso of a dinosaur skeleton;
it has a large head with long sharp teeth">
那么，为什么我们需要备选文本呢？它可以派上用场的原因有很多：
- 用户有视力障碍，通过屏幕阅读器来浏览网页。事实上，给图片一个备选的描述文本对大多数用户都是很有用的。
- 就像上面所说的，你也许会把图片的路径或文件名拼错。
- 浏览器不支持该图片类型。某些用户仍在使用纯文本的浏览器，例如 Lynx，这些浏览器会把图片替换为描述文本。
- 你会想提供一些文字描述来给搜索引擎使用，例如搜索引擎可能会将图片的文字描述和查询条件进行匹配。
- 用户关闭的图片显示以减少数据的传输，这在手机上是十分普遍的，并且在一些国家带宽有限且昂贵。
你到底应该在 alt 里写点什么呢？这首先取决于为什么这张图片会在这儿，换句话说，如果这张图片没显示出来，会少了什么：
- 装饰： 如果图片只是用于装饰，而不是内容的一部分，可以写一个空的
alt=""。例如，屏幕阅读器不会浪费时间对用户读出不是核心需要的内容。实际上装饰性图片就不应该放在 HTML 文件里， CSS 背景图片才应该用于插入装饰图片，但如果这种情况无法避免，alt=""会是最佳处理方案。 - 内容： 如果你的图片提供了重要的信息，就要在
alt文本中简要的提供相同的信息，甚至更近一步，把这些信息写在主要的文本内容里，这样所有人都能看见。不要写冗余的备选文本（如果在主要文本中将所有的段落都重复两遍，对于没有失明的用户来说多烦啊！），如果在主要文本中已经对图片进行了充分的描述，写alt=""就好。 - 链接： 如果你把图片嵌套在
<a>标签里，来把图片变成链接，那你还必须提供无障碍的链接文本。在这种情况下，你可以写在同一个元素里，或者写在图片的alt属性里，随你喜欢。 - 文本： 你不应该将文本放到图像里。例如，如果你的主标题需要有阴影，你可以用 CSS来达到这个目的，而不是把文本放到图片里。如果真的必须这么做，那就把文本也放到
alt里。
本质上，关键在于在图片无法被看见时也提供一个可用的体验，这确保了所有人都不会错失一部分内容。尝试在浏览器中使图片不可见然后看看网页变成什么样了，你会很快意识到在图片无法显示时备选文本能帮上多大忙。
备注： 想知道更多，可以看我们的备选文本指南
宽度和高度
你可以用宽度和高度属性来指定你的图片的高度和宽度（你可以用多种方式找到你的图片的宽度和高度，例如在 Mac 上，你可以用 Cmd + I 来得到显示的图片文件的信息）回到我们的例子，你可以这样做：
<img src="images/dinosaur.jpg"
alt="一只恐龙头部和躯干的骨架，它有一个巨大的头，长着锋利的牙齿。"
width="400"
height="341">
在正常的情况下，这不会对显示产生很大的影响，但是如果图片没有显示（例如用户刚刚开始浏览网页，但是图片还没有加载完成），你会注意到浏览器会为要显示的图片留下一定的空间
这是一件好事情——这使得页面加载的更快速更流畅。
然而，你不应该使用 HTML 属性来改变图片的大小。如果你把尺寸设定的太大，最终图片看起来会模糊；如果太小，会在下载远远大于你需要的图片时浪费带宽。如果你没有保持正确的宽高比，图片可能看起来会扭曲。在把图片放到你的网站页面之前，你应该使用图形编辑器使图片的尺寸正确。
备注： 如果你需要改变图片的尺寸，你应该使用CSS而不是 HTML。
Image titles 图片标题
类似于超链接，你可以给图片增加title属性来提供需要更进一步的支持信息。在我们的例子中，可以这样做：
<img src="images/dinosaur.jpg"
alt="一只恐龙头部和躯干的骨架，它有一个巨大的头，长着锋利的牙齿。"
width="400"
height="341"
title="A T-Rex on display in the Manchester University Museum">
这会给我们一个鼠标悬停提示，看起来就像链接标题：
图片标题并不必须要包含有意义的信息，通常来说，将这样的支持信息放到主要文本中而不是附着于图片会更好。不过，在有些环境中这样做更有用，比如当没有空间显示提示时，也就是在图片栏中。
然而，这并不是推荐的——title 有很多易访问性问题，主要是基于这样一个事实，即屏幕阅读器的支持是不可预测的，大多数浏览器都不会显示它，除非您在鼠标悬停时（例如：title 无法访问键盘用户），如果你对更多的信息感兴趣，阅读The Trials and Tribulations of the Title Attribute by Scott O'Hara.
