最初的網頁最初的發展階段，只是文字。而只有文字想當然爾令網頁讀起來十分的枯燥乏味。然而幸運的是沒有多久，將圖片（以及其他更有趣的內容類型）嵌入網頁的功能就誕生了。在多媒體嵌入網頁的學習中，從<img>元素開始是相對適當，因為該元素用於在網頁中嵌入簡單的圖像。在本文中，我們將研究如何深入使用它，包括在網頁中嵌入簡單圖像的基礎知識，使用<figure>增加標題說明以做註釋，以及詳細說明它與CSS背景圖片的關係。

如何將圖片放入網頁中?

為了在網頁上放置一個簡單的圖像，我們使用<img>元素。這是一個空元素（意味著它沒有文本內容或結束標記），並需要至少一個屬性（src）（有時稱為其完整標題，source）才有用。 src屬性包含指向要嵌入頁面的圖像的路徑，該路徑可以是相對路徑或絕對路徑URL，與<a>元素中的href屬性相同。

舉例來說, 如果您的圖片名為 dinosaur.jpg 且與HTML檔案位於同一資料夾中，可以這樣嵌入圖片：

如果圖片位於名為images的資料夾中，且該目錄與HTML頁面位於同一資料夾（Google建議這樣的編排，以利於SEO /索引目的），則應將其嵌入如下：

但這麼做是沒有意義的，因為它只會使瀏覽器執行更多工作，瀏覽器需重複執行從DNS服務器中搜尋IP地址等等工作。您應將網站上的圖片與HTML存放在同一個伺服器上。

課成需求:	基本的電腦操作, 安裝軟體的能力, 處理檔案的基本能力, 熟悉最基本的HTML的（如HTML入門中所述）
學習目標:	了解如何在HTML中嵌入簡單的圖片，為它們加上標題註釋，以及HTML圖片與CSS背景圖片之間的關係。

注意: 大多數圖像均受版權保護。請勿在你的網站上隨意顯示圖片，除非：

你是圖片的擁有者.
您已收到圖片所有者的白紙黑字認可。
您有充分的證據證明該圖片實際上是大家皆能使用。

侵犯版權是違法及不道德的。此外，切勿將src屬性指向您未被授權的他人網站上的圖便。這稱為“熱連結”。再次重申，竊取某人的頻寬是違法的，且這會減慢您網站的速度。此外當別人變更、移除或換上令人尷尬的內容時你將無法做出改變。

替代性文字

我們下一個要看的屬性是alt。它的功能算是圖片的文字描述，應用於因網路連接速度慢而無法看到/顯示圖片或需要長時間來跑圖等等情況。例如，上面的程式碼我們可以像這樣修改：

測試替代文字最簡單方法是故意拼錯檔名。例如，如果我們的圖片名稱為dinosooooor.jpg，則瀏覽器將不會顯示該圖片，而是顯示alt文本： The Images in HTML title, but this time the dinosaur image is not displayed, and alt text is in its place.

The Images in HTML title, but this time the dinosaur image is not displayed, and alt text is in its place.

那麼，為什麼您會看到或需要替代文字？它可以派上用場的原因有很多：

您應該在alt屬性中確切寫些什麼？這取決於圖片為何而出現；也就是說，如果圖片不顯示，您將損失什麼：

本質上，關鍵是即使在看不見圖片的情況下也能提供相同的體驗。這樣可以確保所有使用者都不會丟失任何內容。嘗試在瀏覽器中關閉圖像，然後查看外觀。您很快就會意識到，如果看不到圖片，替代文字會很有幫助。

寬與高

You can use the width and height attributes to specify the width and height of your image. You can find your image's width and height in a number of ways. For example on the Mac you can use Cmd + I to get the info display up for the image file. Returning to our example, we could do this:

This doesn't result in much difference to the display, under normal circumstances. But if the image isn't being displayed, for example, the user has just navigated to the page, and the image hasn't yet loaded, you'll notice the browser is leaving a space for the image to appear in:

This is a good thing to do, resulting in the page loading quicker and more smoothly.

However, you shouldn't alter the size of your images using HTML attributes. If you set the image size too big, you'll end up with images that look grainy, fuzzy, or too small, and wasting bandwidth downloading an image that is not fitting the user's needs. The image may also end up looking distorted, if you don't maintain the correct aspect ratio. You should use an image editor to put your image at the correct size before putting it on your webpage.

圖片標題

As with links, you can also add title attributes to images, to provide further supporting information if needed. In our example, we could do this:

However, this does not come recommended — title has a number of accessibility problems, mainly based around the fact that screen reader support is very unpredictable and most browsers won't show it unless you are hovering with a mouse (so e.g. no access to keyboard users). If you are interested in more information about this, read The Trials and Tribulations of the Title Attribute by Scott O'Hara.

It is better to include such supporting information in the main article text, rather than attached to the image.

實戰練習：嵌入圖片

It is now your turn to play! This active learning section will have you up and running with a simple embedding exercise. You are provided with a basic {{htmlelement("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

Earlier we said to never hotlink to images on other servers, but this is just for learning purposes, so we'll let you off this one time.

If you make a mistake, you can always reset it using the Reset button. If you get really stuck, press the Show solution button to see an answer:

Playable code

<h2>Live output</h2>

<div class="output" style="min-height: 50px;">
</div>

<h2>Editable code</h2>
<p class="a11y-label">Press Esc to move focus away from the code area (Tab inserts a tab character).</p>

<textarea id="code" class="input" style="min-height: 100px; width: 95%">
<img>
</textarea>

<div class="playable-buttons">
  <input id="reset" type="button" value="Reset">
  <input id="solution" type="button" value="Show solution">
</div>

html {
  font-family: sans-serif;
}

h2 {
  font-size: 16px;
}

.a11y-label {
  margin: 0;
  text-align: right;
  font-size: 0.7rem;
  width: 98%;
}

body {
  margin: 10px;
  background: #f5f9fa;
}

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

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

reset.addEventListener('click', function() {
  textarea.value = code;
  userEntry = textarea.value;
  solutionEntry = htmlSolution;
  solution.value = 'Show solution';
  updateCode();
});

solution.addEventListener('click', function() {
  if(solution.value === 'Show solution') {
    textarea.value = solutionEntry;
    solution.value = 'Hide solution';
  } else {
    textarea.value = userEntry;
    solution.value = 'Show solution';
  }
  updateCode();
});

var htmlSolution = '<img src="https://raw.githubusercontent.com/mdn/learning-area/master/html/multimedia-and-embedding/images-in-html/dinosaur_small.jpg"\n alt="The head and torso of a dinosaur skeleton; it has a large head with long sharp teeth"\n width="200"\n height="171"\n title="A T-Rex on display in the Manchester University Museum">';
var solutionEntry = htmlSolution;

textarea.addEventListener('input', updateCode);
window.addEventListener('load', updateCode);

// stop tab key tabbing out of textarea and
// make it write a tab at the caret position instead

textarea.onkeydown = function(e){
  if (e.keyCode === 9) {
    e.preventDefault();
    insertAtCaret('\t');
  }

  if (e.keyCode === 27) {
    textarea.blur();
  }
};

function insertAtCaret(text) {
  var scrollPos = textarea.scrollTop;
  var caretPos = textarea.selectionStart;

  var front = (textarea.value).substring(0, caretPos);
  var back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length);
  textarea.value = front + text + back;
  caretPos = caretPos + text.length;
  textarea.selectionStart = caretPos;
  textarea.selectionEnd = caretPos;
  textarea.focus();
  textarea.scrollTop = scrollPos;
}

// Update the saved userCode every time the user updates the text area code

textarea.onkeyup = function(){
  // We only want to save the state when the user code is being shown,
  // not the solution, so that solution is not saved over the user code
  if(solution.value === 'Show solution') {
    userEntry = textarea.value;
  } else {
    solutionEntry = textarea.value;
  }

  updateCode();
};

{{ EmbedLiveSample('Playable_code', 700, 350, "", "", "hide-codepen-jsfiddle") }}

用圖文和圖文標註說明圖像

Speaking of captions, there are a number of ways that you could add a caption to go with your image. For example, there would be nothing to stop you from doing this:

This is ok. It contains the content you need, and is nicely stylable using CSS. But there is a problem here: there is nothing that semantically links the image to its caption, which can cause problems for screen readers. For example, when you have 50 images and captions, which caption goes with which image?

A better solution, is to use the HTML5 {{htmlelement("figure")}} and {{htmlelement("figcaption")}} elements. These are created for exactly this purpose: to provide a semantic container for figures, and to clearly link the figure to the caption. Our above example could be rewritten like this:

The {{htmlelement("figcaption")}} element tells browsers, and assistive technology that the caption describes the other content of the {{htmlelement("figure")}} element.

A figure doesn't have to be an image. It is an independent unit of content that:

A figure could be several images, a code snippet, audio, video, equations, a table, or something else.

實戰練習：建立圖文標註

In this active learning section, we'd like you to take the finished code from the previous active learning section, and turn it into a figure:

If you make a mistake, you can always reset it using the Reset button. If you get really stuck, press the Show solution button to see an answer:

Playable code 2

<h2>Live output</h2>

<div class="output" style="min-height: 50px;">
</div>

<h2>Editable code</h2>
<p class="a11y-label">Press Esc to move focus away from the code area (Tab inserts a tab character).</p>

<textarea id="code" class="input" style="min-height: 100px; width: 95%">
</textarea>

<div class="playable-buttons">
  <input id="reset" type="button" value="Reset">
  <input id="solution" type="button" value="Show solution">
</div>

html {
  font-family: sans-serif;
}

h2 {
  font-size: 16px;
}

.a11y-label {
  margin: 0;
  text-align: right;
  font-size: 0.7rem;
  width: 98%;
}

body {
  margin: 10px;
  background: #f5f9fa;
}

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

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

reset.addEventListener('click', function() {
  textarea.value = code;
  userEntry = textarea.value;
  solutionEntry = htmlSolution;
  solution.value = 'Show solution';
  updateCode();
});

solution.addEventListener('click', function() {
  if(solution.value === 'Show solution') {
    textarea.value = solutionEntry;
    solution.value = 'Hide solution';
  } else {
    textarea.value = userEntry;
    solution.value = 'Show solution';
  }
  updateCode();
});

var htmlSolution = '<figure>\n <img src="https://raw.githubusercontent.com/mdn/learning-area/master/html/multimedia-and-embedding/images-in-html/dinosaur_small.jpg"\n alt="The head and torso of a dinosaur skeleton; it has a large head with long sharp teeth"\n width="200"\n height="171">\n <figcaption>A T-Rex on display in the Manchester University Museum</figcaption>\n</figure>';
var solutionEntry = htmlSolution;

textarea.addEventListener('input', updateCode);
window.addEventListener('load', updateCode);

// stop tab key tabbing out of textarea and
// make it write a tab at the caret position instead

textarea.onkeydown = function(e){
  if (e.keyCode === 9) {
    e.preventDefault();
    insertAtCaret('\t');
  }

  if (e.keyCode === 27) {
    textarea.blur();
  }
};

function insertAtCaret(text) {
  var scrollPos = textarea.scrollTop;
  var caretPos = textarea.selectionStart;

  var front = (textarea.value).substring(0, caretPos);
  var back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length);
  textarea.value = front + text + back;
  caretPos = caretPos + text.length;
  textarea.selectionStart = caretPos;
  textarea.selectionEnd = caretPos;
  textarea.focus();
  textarea.scrollTop = scrollPos;
}

// Update the saved userCode every time the user updates the text area code

textarea.onkeyup = function(){
  // We only want to save the state when the user code is being shown,
  // not the solution, so that solution is not saved over the user code
  if(solution.value === 'Show solution') {
    userEntry = textarea.value;
  } else {
    solutionEntry = textarea.value;
  }

  updateCode();
};

{{ EmbedLiveSample('Playable_code_2', 700, 350, "", "", "hide-codepen-jsfiddle") }}

CSS 背景圖片

您還可以使用CSS將圖像嵌入網頁（JavaScript也可以，但這完全是另一回事了）。 CSSbackground-image屬性和其他background- *屬性用於控制背景圖片的放置。例如要將背景圖片放置在頁面的每個段落上，可以執行以下操作：

這種嵌入圖片的方式比HTML圖像更容易定位和控制。那麼，為什麼還要用HTML嵌入圖片呢？如上所述，CSS背景圖像僅用於裝飾。如果您只是想在頁面上添加一些漂亮的東西以增強視覺效果，那很好。但是，此類圖像根本沒有語義。它們與文字不同，對於螢幕閱讀器是不可見的，依此類推。這裡需要的是HTML圖片！

總結來說，如果圖片在內容上具有含義，則應使用HTML圖像。如果圖像純粹是裝飾性的，則應使用CSS背景圖片。

試試看!

您已經來到了本文的末端，但是您還記得最重要的內容嗎？在繼續往下之前，這裡有些測驗讓您驗證看看您是否都學會了 — 測驗：HTML圖像。

總結

目前就是這樣啦。我們已經詳細介紹了圖片和標題說明。在下一篇文章中我們將進一步介紹，如何使用HTML將視頻和音頻嵌入在網頁中。

{{NextMenu("Learn/HTML/Multimedia_and_embedding/Video_and_audio_content", "Learn/HTML/Multimedia_and_embedding")}}