Images in HTML

怎樣將一幅圖片放到網(wǎng)頁上?

為了將一幅簡單的圖片展示到網(wǎng)頁上我們通常會使用 <img> 元素。它是一個空元素(不需要包含內(nèi)容也不需要閉合標(biāo)簽)最少只需要一個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">

以此類推。

當(dāng)然你也可以像下面這樣使用完整的絕對路徑:

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

但是這種方式是不被推薦的，這樣做只會使瀏覽器做更多的工作，例如重新通過 DNS 再去尋找 IP 地址。但是人們基本上總是把圖片和 HTML 放在同一個存放網(wǎng)站的服務(wù)器上。

我們上面的代碼會展示如下的結(jié)果頁面:

替代文本

我們將看到的下一個屬性是 alt - 它的值應(yīng)該是圖像的文本描述，用于不能看到/顯示圖像的情況。 例如，我們上面的代碼可以這樣修改:

<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.)

你應(yīng)該在 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.

關(guān)鍵是提供一個可用的體驗，即使圖像無法看到，用戶沒有丟失任何內(nèi)容。 請嘗試關(guān)閉瀏覽器中的圖片，看看效果如何。 你很快就會意識到，如果無法看到圖像，那么無用的替代文本，如"標(biāo)志"或"我最喜歡的地方"。

寬度和高度

您可以使用 width 和 height 屬性指定圖片的寬度和高度(您可以通過多種方式查找圖片的寬度和高度，例如 Mac可以使用Cmd + I獲取圖像文件的信息顯示。)回到我們的示例，我們可以這樣做:

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

這在正常情況下不會導(dǎo)致與顯示有太大差異，但是如果圖像沒有被顯示(例如，用戶剛剛導(dǎo)航到頁面，并且圖像還沒有加載)，你會注意到 瀏覽器留下一個空間讓圖像出現(xiàn)在:

;">

這是一件好事 - 它導(dǎo)致頁面加載更快更流暢。

然而，你不應(yīng)該使用HTML屬性來改變圖像的大小 - 如果你設(shè)置的大小太大，你會得到看起來顆粒/模糊的圖像; 太小，您將通過下載比您所需的更大的圖像浪費帶寬。 如果您無法保持正確的寬高比，圖片也可能會看起來失真 >。 您應(yīng)該使用圖片編輯器將圖片放置在您的網(wǎng)頁上之前將圖片放置在正確的大小。

圖片標(biāo)題

與鏈接一樣，您也可以添加 title 屬性添加到圖片，以在需要時提供進(jìn)一步的支持信息。 在我們的例子中，我們可以這樣做:

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

這給了我們一個工具提示，就像鏈接標(biāo)題:

圖像標(biāo)題不必以任何方式包含，通常最好在主要文章文本中包含這些支持信息，而不是附加到圖像。 它們在某些情況下很有用，例如在沒有字幕空間的圖片庫中。

主動學(xué)習(xí):嵌入圖像

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

是的，早些時候我們說，從來沒有熱鏈接到其他服務(wù)器上的圖像。 但這只是為了演示的目的 - 我們會讓你離開這一次。

我們也希望你:

• 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.

如果發(fā)生錯誤，您可以隨時使用重置按鈕重置。 如果您遇到問題，請按顯示解決方案按鈕查看答案。

<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);

使用數(shù)字和圖形標(biāo)題注釋圖像

說到字幕，有很多方法可以添加一個標(biāo)題，以配合您的圖像。 例如，沒有什么可以阻止你這樣做:

<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>

這是確定 - 它包含您需要的內(nèi)容，并且是很好的使用CSS的樣式。 但這里有一個問題 - 沒有什么語義將圖像鏈接到其標(biāo)題，這可能會導(dǎo)致屏幕閱讀器的問題，例如(當(dāng)你有50個圖像和字幕，哪個標(biāo)題與哪個圖像？)

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.

注意，圖形不必是圖像 - 圖形是內(nèi)容的獨立單位:

• 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

一個圖可以是幾個圖像，代碼片段，音頻或視頻，方程式，表格或其他。

主動學(xué)習(xí):創(chuàng)造一個數(shù)字

在這個主動學(xué)習(xí)部分，我們希望你從前面的主動學(xué)習(xí)部分獲取完成的代碼，并把它變成一個數(shù)字:

• 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.

如果發(fā)生錯誤，您可以隨時使用重置按鈕重置。 如果您遇到問題，請按顯示解決方案按鈕查看答案。

<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");
}

結(jié)果嵌入的圖像可以說比HTML圖像更容易定位和控制，所以為什么打擾HTML圖像？ 如上所述，CSS背景圖像只用于裝飾 - 如果你只是想添加一些漂亮的東西來增強(qiáng)視覺效果，這是很好的，但這樣的圖像根本沒有語義意義 - 他們不能有任何文本 等同物，對于屏幕閱讀器是不可見的等等。這是HTML圖像閃耀的地方。

因此，如果圖片在您的內(nèi)容方面有意義，您應(yīng)該使用HTML圖片。 如果圖像是純裝飾，您應(yīng)該使用CSS背景圖像。

概要

這就是現(xiàn)在 - 我們已經(jīng)詳細(xì)地覆蓋了圖片和字幕。 在下一篇文章中，我們將向上移動一個齒輪，看看如何使用HTML在網(wǎng)頁中嵌入視頻和音頻。