Images in HTML

怎样将一幅图片放到网页上?

为了将一幅简单的图片展示到网页上我们通常会使用 <img> 元素。它是一个空元素(不需要包含内容也不需要闭合标签)最少只需要一个src (pronounced sarc, sometimes spoken as its full title, source)来使其生效。src 属性包含了指向我们想要引入的图片的路径，可以是相对路径或绝对路径，就像 <a> 元素中的 href 属性一样 (你可以阅读 A quick primer on URLs and paths 来唤醒一下你的记忆.)

举个例子来看，如果你有一幅文件名为 dinosaur.jpg 的图片并且存放在和你的 HTML  页面相同路径下，那么你可以像下面这样来将图片放到页面上展示:

<img src="dinosaur.jpg">

如果这张图片存储在和 HTML 页面同路径 image 文件夹的子路径下 (which is what Google recommends for SEO/indexing purposes), 那么你可以采用如下形式:

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

以此类推。

当然你也可以像下面这样使用完整的绝对路径:

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

但是这种方式是不被推荐的，这样做只会使浏览器做更多的工作，例如重新通过 DNS 再去寻找 IP 地址。但是人们基本上总是把图片和 HTML 放在同一个存放网站的服务器上。

我们上面的代码会展示如下的结果页面:

替代文本

我们将看到的下一个属性是 alt - 它的值应该是图像的文本描述，用于不能看到/显示图像的情况。 例如，我们上面的代码可以这样修改:

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

测试 alt 文字的最简单方法是拼写您的文件名。 例如，如果我们的图像名称拼写为 dinosooooor.jpg ，浏览器将不会显示图像 - 它会显示替代文本。

那么，你为什么会看到或需要替代文本？ 它可以派上用场在许多情况下:

• The user is visually impaired, and using a screen reader to read the web out to them — in such a case, having alt text available to describe images is very useful indeed!
• As described above, you might have spelt the file or path name wrong.
• The browser doesn't support the image type. Some people still use text-only browsers, such as Lynx, which will display the alt text of any images.
• You want to provide some text for search engines to make use of — search engines can match alt text with search queries, for example.
• Users have turned off images to reduce data transfer and distractions (especially common on mobile phones, in countries where bandwidth is limited and expensive.)

你应该在 alt 属性中写什么？ 这取决于为什么图片在第一位置(换句话说，如果图片没有显示你会失去):

• Decoration. If the image is just decoration and isn't part of the content, add a blank alt="" so that, for example, a screen reader doesn't waste time reading out content that is no use to the user. Decorative images don't really don't belong in your HTML anyway — CSS background images should be used for inserting decoration — but if it is unavoidable, alt="" is the best way to go.
• Content. If your image provides significant information, provide the same information in a brief alt text, or better yet, in the main text that everybody can see. Don't write redundant alt text (how annoying would it be for a sighted user if all the paragraphs were written twice in the main content?) If the image is described adequately by the main text body, you can just use alt="".
• Link. If you put an image inside <a> tags to turn an image into a link, you still must provide accessible link text — in such cases you may either write it inside the same <a> element or inside the image's alt attribute if that works better.
• Text. You should not put your text into images (if your main heading needs a drop shadow, for example, use CSS for that rather than putting the text into an image.) If you really can't avoid doing this, however, you should supply the text inside the alt attribute.

关键是提供一个可用的体验，即使图像无法看到，用户没有丢失任何内容。 请尝试关闭浏览器中的图片，看看效果如何。 你很快就会意识到，如果无法看到图像，那么无用的替代文本，如"标志"或"我最喜欢的地方"。

宽度和高度

您可以使用 width 和 height 属性指定图片的宽度和高度(您可以通过多种方式查找图片的宽度和高度，例如 Mac可以使用Cmd + I获取图像文件的信息显示。)回到我们的示例，我们可以这样做:

<img src="images/dinosaur.jpg"
     
     width="400"
     height="341">

这在正常情况下不会导致与显示有太大差异，但是如果图像没有被显示(例如，用户刚刚导航到页面，并且图像还没有加载)，你会注意到 浏览器留下一个空间让图像出现在:

;">

这是一件好事 - 它导致页面加载更快更流畅。

然而，你不应该使用HTML属性来改变图像的大小 - 如果你设置的大小太大，你会得到看起来颗粒/模糊的图像; 太小，您将通过下载比您所需的更大的图像浪费带宽。 如果您无法保持正确的宽高比，图片也可能会看起来失真 >。 您应该使用图片编辑器将图片放置在您的网页上之前将图片放置在正确的大小。

图片标题

与链接一样，您也可以添加 title 属性添加到图片，以在需要时提供进一步的支持信息。 在我们的例子中，我们可以这样做:

<img src="images/dinosaur.jpg"
     
     width="400"
     height="341"
     title="A T-Rex on display in the Manchester University Museum">

这给了我们一个工具提示，就像链接标题:

图像标题不必以任何方式包含，通常最好在主要文章文本中包含这些支持信息，而不是附加到图像。 它们在某些情况下很有用，例如在没有字幕空间的图片库中。

主动学习:嵌入图像

Ok, your turn! In this active learning section we'd like you to play with a simple embedding exercise. You are provided with a basic <img> tag; we'd like you to embed the image located at the following URL:

https://raw.githubusercontent.com/mdn/learning-area/master/html/multimedia-and-embedding/images-in-html/dinosaur_small.jpg

是的，早些时候我们说，从来没有热链接到其他服务器上的图像。 但这只是为了演示的目的 - 我们会让你离开这一次。

我们也希望你:

• Add some alt text and check that it works by misspelling the image URL.
• Set the image's correct width and height (hint; it is 200px wide and 171px high), then experiment with other values to see what the effect is.
• Set a title on the image.

如果发生错误，您可以随时使用重置按钮重置。 如果您遇到问题，请按显示解决方案按钮查看答案。

<h2>Input</h2>
<textarea id="code" class="input">
<img></textarea>
<h2>Output</h2>
<div class="output"></div>
<div class="controls">
  <input id="reset" type="button" value="Reset" />
  <input id="solution" type="button" value="Show solution" />
</div>

body {
  font-family: 'Open Sans Light',Helvetica,Arial,sans-serif;
}

.input, .output {
  width: 90%;
  height: 10em;
  padding: 10px;
  border: 1px solid #0095dd;
  overflow: auto;
}

button {
  padding: 10px 10px 10px 0;
}

var textarea = document.getElementById("code");
var reset = document.getElementById("reset");
var code = textarea.value;
var output = document.querySelector(".output");
var solution = document.getElementById("solution");

function drawOutput() {
  output.innerHTML = textarea.value;
}

reset.addEventListener("click", function() {
  textarea.value = code;
  drawOutput();
});

solution.addEventListener("click", function() {
textarea.value = '<img src="https://raw.githubusercontent.com/mdn/learning-area/master/html/multimedia-and-embedding/images-in-html/dinosaur_small.jpg" rel="external nofollow"  rel="external nofollow" \n     \n     width="200"\n     height="171"\n     title="A T-Rex on display in the Manchester University Museum">';
  drawOutput();
});

textarea.addEventListener("input", drawOutput);
window.addEventListener("load", drawOutput);

使用数字和图形标题注释图像

说到字幕，有很多方法可以添加一个标题，以配合您的图像。 例如，没有什么可以阻止你这样做:

<div class="figure">
  <img src="images/dinosaur.jpg"
       
       width="400"
       height="341">

  <p>A T-Rex on display in the Manchester University Museum.</p>
</div>

这是确定 - 它包含您需要的内容，并且是很好的使用CSS的样式。 但这里有一个问题 - 没有什么语义将图像链接到其标题，这可能会导致屏幕阅读器的问题，例如(当你有50个图像和字幕，哪个标题与哪个图像？)

A better solution is to use the HTML5 <figure> and <figcaption> elements, which are created for exactly this purpose — to provide a semantic container for figures that clearly links the figure to the caption. Our above example could be rewritten like this:

<figure>
  <img src="images/dinosaur.jpg"
       
       width="400"
       height="341">

  <figcaption>A T-Rex on display in the Manchester University Museum.</figcaption>
</figure>

The <figcaption> element tells browsers and assistive technology that the caption describes the other content of the <figure> element.

注意，图形不必是图像 - 图形是内容的独立单位:

• Expresses your meaning in a compact, easy-to-grasp way
• Could go in several places in the page's linear flow
• Provides essential information supporting the main text

一个图可以是几个图像，代码片段，音频或视频，方程式，表格或其他。

主动学习:创造一个数字

在这个主动学习部分，我们希望你从前面的主动学习部分获取完成的代码，并把它变成一个数字:

• Wrap it in a <figure> element.
• Copy the text out of the title attribute, remove the title attribute, then put the text inside a <figcaption> element below the image.

如果发生错误，您可以随时使用重置按钮重置。 如果您遇到问题，请按显示解决方案按钮查看答案。

<h2>Input</h2>
<textarea id="code" class="input">
</textarea>
<h2>Output</h2>
<div class="output"></div>
<div class="controls">
  <input id="reset" type="button" value="Reset" />
  <input id="solution" type="button" value="Show solution" />
</div>

body {
  font-family: 'Open Sans Light',Helvetica,Arial,sans-serif;
}

.input, .output {
  width: 90%;
  height: 10em;
  padding: 10px;
  border: 1px solid #0095dd;
  overflow: auto;
}

button {
  padding: 10px 10px 10px 0;
}

var textarea = document.getElementById("code");
var reset = document.getElementById("reset");
var code = textarea.value;
var output = document.querySelector(".output");
var solution = document.getElementById("solution");

function drawOutput() {
  output.innerHTML = textarea.value;
}

reset.addEventListener("click", function() {
  textarea.value = code;
  drawOutput();
});

solution.addEventListener("click", function() {
textarea.value = '<figure>\n  <img src="https://raw.githubusercontent.com/mdn/learning-area/master/html/multimedia-and-embedding/images-in-html/dinosaur_small.jpg" rel="external nofollow"  rel="external nofollow" \n       \n       width="200"\n       height="171">\n  <figcaption>A T-Rex on display in the Manchester University Museum</figcaption>\n</figure>';
  drawOutput();
});

textarea.addEventListener("input", drawOutput);
window.addEventListener("load", drawOutput);

CSS背景图片

You can also use CSS to embed images into webpages (and JavaScript, but that's another story entirely.) The CSS background-image property — and the other background-* properties — are used to control background image placement. For example, to place a background image on every paragraph on a page you could do this:

p {
  background-image: url("images/dinosaur.jpg");
}

结果嵌入的图像可以说比HTML图像更容易定位和控制，所以为什么打扰HTML图像？ 如上所述，CSS背景图像只用于装饰 - 如果你只是想添加一些漂亮的东西来增强视觉效果，这是很好的，但这样的图像根本没有语义意义 - 他们不能有任何文本 等同物，对于屏幕阅读器是不可见的等等。这是HTML图像闪耀的地方。

因此，如果图片在您的内容方面有意义，您应该使用HTML图片。 如果图像是纯装饰，您应该使用CSS背景图像。

概要

这就是现在 - 我们已经详细地覆盖了图片和字幕。 在下一篇文章中，我们将向上移动一个齿轮，看看如何使用HTML在网页中嵌入视频和音频。