HTML中的圖片 - 學習該如何開發 Web

HTML中的圖片
========

* Overview: Multimedia and embedding
* 次頁  (en-US)

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

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

如何將圖片放入網頁中?
-----------

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

**備註：** 在繼續之前，你應該閱讀有關 URL 和路徑的快速入門，以複習相對路徑和絕對路徑 URL。

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

```html
<img src="dinosaur.jpg" />
```

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

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

像這樣.

**備註：** 搜索引擎還會讀取圖片名稱，並將其納入 SEO 中。 因此你應該為圖片提供一個描述性的檔名。 例如 dinosaur.jpg 的命名方式會比 img835.png 更好。

你也可以用絕對路徑 URL 來嵌入圖片，例如

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

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

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

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

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

我們上面的程式碼將有以下結果：

![A basic image of a dinosaur, embedded in a browser, with "Images in HTML" written above it](/zh-TW/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML/basic-image.png)

**備註：** 和<video>之類的元素有時也稱為替換元素。 這是因為元素的內容和圖片大小是由外部（例如圖片或影音檔）所定義的，而不是由元素的內容定義。

**備註：** 你可以從在 Github 上找到本節完成的示例（參見開源碼。）

### 替代性文字

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

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

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

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

* 使用者視力不佳，正在使用螢幕閱讀器向他們朗讀網頁。 實際上，對於大多數使用者而言，擁有可用於描述圖像的替代文字是很有用的。
* 如上所述，文件或路徑名的拼寫可能不正確。
* 瀏覽器不支持圖像類型。 有些人仍然使用純文字瀏覽器，例如Lynx，它可顯示圖片的替代文字。
* 你可能希望提供文字供搜索引擎使用； 例如，搜索引擎可以將替代文字與搜索查詢匹配。
* 使用者已關閉圖像以減少數據傳輸量和干擾。 這在手機以及網路頻寬有限或成本昂貴的國家中尤其常見。

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

* **裝飾：** 你可以用 CSS 背景圖片 加入裝飾圖片，但如果必須使用 HTML，可以添加一個空的 `alt=""`。如果圖片不是內容的一部分，那麼就不應該讓螢幕閱讀器浪費時間去閱讀它。
* **內容：** 如果你的圖片提供了重要的資訊，請在簡短的`alt`文字中提供相同的資訊，甚至最好在所有人都能看到的主要文字中提供相同的資訊。請不要撰寫冗餘替代文字，試想如果所有段落都在主要內容中寫了兩次，對於用視力觀看的使用者有多煩人。如果圖像在正文中已充分敘述，請使用 `alt=""`。
* **連結：** 如果你在`<a>` (en-US) 標籤中放了圖片使其轉入連結，你仍應該提供明確的字詞。在这种情况下，你可以根據適合你的情況，将其写在相同的`<a>`元素内，或是写在图像的`alt` 属性内。
* **文字：** 請不要在圖片中寫字。如果你的主要目的是為標題加上下拉式陰影，你可以使用 CSS (en-US)更甚於在圖片中描繪文字。 但如果你無法避免這麼做，也請將文字敘述加在`alt` 属性内。

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

**備註：** For more information, see our guide to Text Alternatives (en-US).

### 寬與高

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:

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

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:

![The Images in HTML title, with dinosaur alt text, displayed inside a large box that results from width and height settings](/zh-TW/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML/alt-text-with-width-height.png)

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.

**備註：** If you do need to alter an image's size, you should use CSS instead.

### 圖片標題

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:

```html
<img
 src="images/dinosaur.jpg"
 alt="The head and torso of a dinosaur skeleton;
 it has a large head with long sharp teeth"
 width="400"
 height="341"
 title="A T-Rex on display in the Manchester University Museum" />
```

This gives us a tooltip on mouse hover, just like link titles:

![The dinosaur image, with a tooltip title on top of it that reads A T-Rex on display at the Manchester University Museum ](/zh-TW/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML/image-with-title.png)

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 `<img>` (en-US) 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.

We would also like you to:

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

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

<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();
};
```

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

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:

```html
<div class="figure">
  <img
 src="images/dinosaur.jpg"
 alt="The head and torso of a dinosaur skeleton;
 it has a large head with long sharp teeth"
 width="400"
 height="341" />

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

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 `<figure>` (en-US) and `<figcaption>` (en-US) 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:

```html
<figure>
  <img
 src="images/dinosaur.jpg"
 alt="The head and torso of a dinosaur skeleton;
 it has a large head with long sharp teeth"
 width="400"
 height="341" />

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

The `<figcaption>` (en-US) element tells browsers, and assistive technology that the caption describes the other content of the `<figure>` (en-US) element.

**備註：** From an accessibility viewpoint, captions and `alt` (en-US) text have distinct roles. Captions benefit even people who can see the image, whereas `alt` (en-US) text provides the same functionality as an absent image. Therefore, captions and `alt` text shouldn't just say the same thing, because they both appear when the image is gone. Try turning images off in your browser and see how it looks.

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

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

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:

1. Wrap it in a `<figure>` (en-US) element.
2. Copy the text out of the `title` attribute, remove the `title` attribute, and put the text inside a `<figcaption>` (en-US) element below the image.

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

<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();
};
```

CSS 背景圖片
--------

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

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

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

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

**備註：** 在我們的 CSS 主題中，你將學到更多關於 CSS 背景圖片的知識。

試試看!
----

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

總結
--

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

* Overview: Multimedia and embedding
* 次頁  (en-US)


測試你的技能：多媒體和嵌入 - 學習該如何開發 Web

測試你的技能：多媒體和嵌入
=============

這項技能測試的目的是評估你是否了解我們的視訊和音訊內容 (en-US)以及從物件到 iframe 的其他嵌入技術 (en-US)文章。

**備註：** 你可以在下面的交互式編輯器中嘗試解決方案，但是下載代碼並使用在線工具如 CodePen, jsFiddle, or Glitch 去完成測試。

如果你遇到困難，請向我們尋求幫助-請參閱 評估或進一步幫助 此頁面底部的部分。

多媒體和嵌入 1
--------

在此測試中，我們希望你將一個簡單的音檔嵌入到頁面上。你需要：

* 將音頻文件的路徑添加到適當的屬性，以將其嵌入頁面中。音檔名為`audio.mp3`，位於當前文件夾中的文件夾`media`中。
* 添加屬性讓瀏覽器顯示一些預設控制選項。
* 為不支持的音檔撥放的瀏覽器添加一些適當的備註。

嘗試更新下面的程式碼以完成測驗：

**備註：** 下載此測驗的程式碼在你自己的編輯器或線上編輯器中運行。

多媒體和嵌入 2
--------

在此測驗中，我們希望你標記一個稍微複雜一些的影片播放器，此外還具有多個來源、字幕和其他功能。你需要：

* 添加屬性以使瀏覽器顯示一些預設控制選項。
* 為不支持的影片撥放的瀏覽器添加一些適當的備註。
* 添加多個源，其中包含視頻文件的路徑。這些文件稱為 `video.mp4` 和 `video.webm`, 並且位於一個名為`media`的文件夾中。
* 讓瀏覽器提前知道影片來源的影片格式，以便可以提前選擇要下載的影片。
* 給予 `<video>` 寬度和高度等於固定大小（320 x 240 像素）。
* 使影片默認為靜音。
* 顯示包含在 `media` 資料夾, 在一個名為 `subtitles_en.vtt`, 播放視頻時，你必須將類型明確設置為字幕，並且字幕語言為英語。

嘗試更新下面的程式碼以完成測驗：

**備註：** 下載此測驗的程式碼在你自己的編輯器或線上編輯器中運行。

多媒體和嵌入 3
--------

對於此最終測驗，你需要執行兩個測驗：

* 將 PDF 嵌入頁面。PDF 檔名為 `mypdf.pdf`, 並存在 `media` 資料夾.
* 轉到 YouTube 或 Google Maps 這樣的共享網站，然後將影片或其他媒體項目嵌入頁面。

T 嘗試更新下面的程式碼以完成測驗：

**備註：** 下載此測驗的程式碼在你自己的編輯器或線上編輯器中運行。

評估或進一步幫助
--------

你可以在上面的 Interactive Editors 中練習這些示例。

如果你希望對自己的工作進行評估，或者遇到困難希望尋求幫助：

1. 將你的工作放入在線共享編輯器中，例如 CodePen, jsFiddle, 或 Glitch. 你可以自己編寫程式碼，也可以使用以上各節中連接到的初始文件。
2. 撰寫帖子，要求評估和/或幫助 MDN Discourse forum Learning category. 你的貼文應包括：
    * 描述性標題，例如「 HTML 圖像基礎知識 1 技能測試所需的評估」。
    * 你已經嘗試過的內容以及你希望我們做什麼的詳細信息，例如如果你陷入困境並需要幫助，或者需要評估。
    * 聯機共享編輯器中你要評估或需要幫助的示例的鏈接（如上面的步驟 1 中所述）。這是進入的好習慣-如果看不到他們的代碼，很難幫助有編碼問題的人。
    * 指向實際任務或評估頁面的鏈接，因此我們可以找到你需要幫助的問題。


HTML 入門 - 學習該如何開發 Web

HTML 入門
=======

* Overview: Introduction to HTML
* 次頁

本文將探討 HTML 最基本的部分。首先，我們將會定義元素（element）、屬性（attribute）以及其它你可能聽過的重要名詞，然後講解該如何使用它們。我們也會告訴你典型的 HTML 頁面以及其中的元素是如何構成的，以及解釋其他重要的基礎語言特性。在此過程中，我們會撰寫一些 HTML 來引發你的興趣！

|  |  |
| --- | --- |
| 需求： | 基礎電腦能力、已安裝需要的基本軟體、並知道如何操作檔案。 |
| 目標： | 對 HTML 產生初步認識、並練習如何撰寫 HTML 元素。 |

什麼是 HTML？
---------

HTML（Hypertext Markup Language）並不是一種程式語言，而是用來告訴瀏覽器該如何呈現網頁的**標記式語言**（markup language）。它可以很複雜也可以很陽春，端看網頁開發者如何構思。HTML 由一系列的元素（elements）組成，你將利用它們來圍住、包裹，或者說標記（mark up）網頁中的每個部分，使它們在外表或行為上呈現某種特定風貌。被標籤（tags (en-US)）包住的內容會變成超連結，或者斜體字，以及諸如此類的功能，舉例來說，請看下列內容：
```

My cat is very grumpy
```

如果我們想要讓這行字獨立出來，不讓它跟其他東西排在一起，我們可以用段落標籤（paragraph tag `<p>` (en-US)）讓它自成段落：

```html
<p>My cat is very grumpy</p>
```

**備註：** HTML 中的元素是不區分大小寫的。例如：一個 `<title>` 標籤可以寫成 `<title>`、`<TITLE>`、`<Title>`、`<TiTlE>` 之類的形式，都沒有問題。通常來說，為了保持一致性（consistency）、可讀性（readability），以及其他可能的原因，最好還是以小寫來撰寫標籤。

分析 HTML 元素
----------

讓我們更深入地探索段落中的元素：

![](/zh-TW/docs/Learn/HTML/Introduction_to_HTML/Getting_started/grumpy-cat-small.png)

元素中主要的內容有:

1. **起始標籤**（opening tag）：它包含了元素的名字（在這裡是 p），夾在一對打開和關閉尖括號之間。它指明元素從何開始生效——在上例中則代表段落的開始。
2. **結束標籤**（closing tag）：結束標籤和起始標籤長得差不多，只不過它在名字前面還多加了一條斜線（forward slash）。它表示元素結束的地方——在上例中表示該段落的結束。忘記加上結束標籤是初學者常犯的錯誤，這將導致奇怪的結果。
3. **內容**（content）：元素的內容。在上例中就是一段文字。
4. **元素**（element）：以上三者加起來就是元素。
### 不要光是看：創造你的第一個 HTML 元素

編輯下面輸入區域中的文字，嘗試用 `<em>` 和 `</em>` 標籤包裹住文字（把 `<em>` 放在文字前面來起始元素，把 `</em>` 放在後面來結束元素），這會使得文字變成斜體字。你可以在下面的輸出區域看到更新後的變化。

如果你不小心打錯了，你可以按下 *Reset* 鍵來重置。如果你卡關了，你可以點擊 *Show solution* 鍵來偷看答案。
```

<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="playable-code" style="min-height: 100px;width: 95%">
  This is my text.
</textarea>

<div class="controls">
  <input id="reset" type="button" value="Reset" />
  <input id="solution" type="button" value="Show solution" />
</div>
```

```
html {
  font-family: "Open Sans Light", Helvetica, Arial, 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 = "<em>This is my text.</em>";
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();
};
```

### 巢狀元素（Nesting element）

你可以把元素放進另一個元素裡面——這叫做**巢狀元素**（nesting element）。比如說，我們想要強調我們的貓咪**非常**兇，我們可以用 `<strong>` (en-US) 元素來包住「very」這個字，這樣就可以標註我們想要強調的字:

```html
<p>My cat is <strong>very</strong> grumpy.</p>
```

你必須確保你的元素正確地巢套：在上述範例中，我們先用了 `p` 元素，然後才用 `strong` 元素，因此我們必須先關閉 `strong` 元素，再關閉 `p` 元素。下面是錯誤示範：

```html
<p>My cat is <strong>very grumpy.</p></strong>
```

這些元素必須要正確地開啟與關閉，它們與其他元素的內外關係要相當明確。如果它們像上例這樣交互重疊，你的網頁瀏覽器將無法解讀，只能盡可能地猜測你的意思，因此你很有可能會得到一個不如預期的結果。所以，別這樣做！！

### 區塊級元素 vs. 行內元素（Block versus inline element）

在 HTML 中有兩種你應該要知道的重要元素類別——區塊級元素（block-level element）和行內元素（inline element）。

* 區塊級元素在頁面中組成一個可見區塊——它在頁面中單獨佔據一行，在它前後的內容都將以一個換行分隔。區塊級元素傾向於作為頁面上的結構化元素（structural element），舉凡段落、列表、導航選單（navigation menu）、頁尾（footer）等等皆是。區塊級元素不會巢套在行內元素中，但有可能會巢套其他區塊級元素中。
* 行內元素指的是放在區塊級元素之中的內容，這些元素只由文件內容的一小部分組成，而非由完整段落或群組式內容組成。一個行內元素不會在文件中產生新的一行，它們通常只會出現在一段文字中，舉例來說，`<a>` (en-US) 元素（超連結），或者強調元素如 `<em>` (en-US) 和 `<strong>` (en-US)。

以下面這個例子來說：

```html
<em>first</em><em>second</em><em>third</em>

<p>fourth</p>
<p>fifth</p>
<p>sixth</p>
```

`<em>` (en-US) 是一個行內元素，所以你可以看到下面的例子中，前三個元素互相緊鄰在同一行，兩兩中間並無任何空白。另一方面，`<p>` (en-US) 是一個區塊級元素，所以每個元素都自成一行，並且上下都有一些空間（這些空間是由於瀏覽器套用預設的CSS styling到這些段落上的緣故）。

**備註：** HTML5 重新定義了元素類別：請見 Element content categories。新的定義比先前所定義的更為準確且少歧義性，因此它們也同時比 block 和 inline 還來得複雜，所以我們選擇在這裡繼續使用這個觀念。

**備註：** 在本主題所使用的區塊級（block）與行內級（inline）這兩個名詞，不應與 CSS 的 box 種類混淆。它們在預設時是很像的，但改變 CSS 的顯示型態（display type）並不會改變元素的類別，也不會影響該元素能包含或被包含的元素類別。HTML5 之所以會重新定義元素類別，部分也是基於此一原因。

**備註：** 你可以查看區塊級元素與行內級元素分別有哪些元素——請見區塊級元素和行內級元素 (en-US)。

### 空元素

不是所有元素都符合起始標籤、內容、結束標籤的格式。有些元素只有一個標籤，這些標籤通常用來在文件中插入/嵌入物件。例如 `<img>` (en-US) 元素便是用來在當前位置嵌入圖片檔：

```html
<img
 src="https://raw.githubusercontent.com/mdn/beginner-html-site/gh-pages/images/firefox-icon.png" />
```

這將會產生下面的結果:

**備註：** 空元素（empty element）有時也被稱作 *void element*。

屬性（Attribute）
-------------

你也可以在元素中加入屬性，像是：

![
My cat is very grumpy
](/zh-TW/docs/Learn/HTML/Introduction_to_HTML/Getting_started/grumpy-cat-attribute-small.png)

屬性有著關於元素的額外資訊，但你並不會想要顯示它們。在這個例子中 `class` 屬性讓你能夠賦予一個元素辨別名稱，稍後就能用這個名稱來指定元素的樣式及其他的東西。

一個屬性應該要有：

1. 一個空白，用來隔開屬性和元素名稱（或者前一個屬性，如果該元素已經有一個以上的屬性的話）。
2. 屬性名稱以及一個接在其後的等號。
3. 屬性值以及一對包著它的引號。
### 主動學習：在元素中加入屬性

我們再舉另外一個元素的例子 `<a>` (en-US) 代表 anchor（錨），而這個元素會讓被它包裹住的內容變成一個超連結。它可以和很多種屬性搭配，以下僅列出幾種：

`href`

這個屬性的值為你想要連到的網址，當連結被點擊時，瀏覽器就會導向到該網站。例如: `href="https://www.mozilla.org/"`。

`title`

`title` 屬性用來附加有關連結的其他資訊，像是連結到的網站名稱。例如: `title="The Mozilla homepage"` 。當游標移動到連結上時，就會以提示的方式顯示。

`target`

`target` 屬性用來指定要在哪裡打開網頁。例如：`target="_blank"` 會開啟新分頁。如果你想要在目前的分頁開啟網站，只要忽略這個屬性即可。

請編輯下面輸入區的文字，使它變成一個通往你最喜歡的網站的連結。

1. 首先，加入`<a>` 元素。
2. 再來，加入 `href` 屬性以及 `title` 屬性。
3. 最後，將 `target` 屬性設定為在新分頁中開啟。

你將會在底下的輸出區域裡面即時地看到你改動產生的變化。當你完成後，你應該會看到一個連結；當你滑過時，連結將顯示 `title` 屬性的內容；當你點擊連結時，將會導向到 `href` 元素中的網址。切記，你需要以空白隔開元素名字以及每一個屬性。

如果你不小心打錯了，你可以按下 *Reset* 鍵重置。如果你卡關了，可以點擊 *Show solution* 鍵來偷看答案。
```

<h2>Input</h2>
<textarea id="code" class="input">
<p>A link to my favourite website.</p></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: 2em;
  padding: 10px;
  border: 1px solid #0095dd;
}

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 =
    '<p>A link to my <a href="https://www.mozilla.org/" title="The Mozilla homepage" target="\_blank">favourite website</a>.</p>';
  drawOutput();
});

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

### 布林屬性（Boolean attributes）

你有時會看到一些沒有值的屬性，這完全是可行的。它們叫做布林屬性，他們只能附帶一個值，而這個值一般來說會和屬性的名字一樣。以 `disabled` (en-US) 屬性來說，你可以把它指派為 input 元素的屬性，使得輸入文字的框框變得不能輸入文字。

```html
<input type="text" disabled="disabled" />
```

你可以把它寫得更簡短（在下面的例子中，我們也寫出了沒有 disabled 屬性的 input 元素供你參考，讓你更了解兩者的差別）：

```html
<input type="text" disabled />

<input type="text" />
```

結果 :

### 忘記加屬性值的引號

當你看遍全世界的網頁，你就會發現各種千奇百怪的標記風格（markup style），包括沒加引號的屬性值。這在某些情況是被允許的，但在其他情況下則會使屬性結果不如預期。沿用我們之前的例子，我們先只用 `href` 屬性，如下：

```html
<a href=https://www.mozilla.org/>favourite website</a>
```

看起來沒甚麼問題，但是，一旦我們加上 `title` 屬性時，就會造成錯誤的結果：

```html
<a href=https://www.mozilla.org/ title=The Mozilla homepage>favourite website</a>
```

此時瀏覽器會誤解你的標記，認為 `title` 屬性其實是三個屬性：一個值為 "The" 的標題屬性，以及兩個布林屬性 `Mozilla` 和 `homepage`。這絕對不是你想要的結果，而且會導致錯誤或者意想不到的行為。你可以看看下面的示範，把你的游標移到連結上，看看會出現什麼提示！

我們建議不管怎樣都要加屬性引號，避免這些錯誤，同時增加原始碼的可讀性。

### 要用單引號還是雙引號？（Single or double quote?）

在這個章節中，你會發現所有的屬性都是使用雙引號，而你可能會發現其他人的 HTML 中使用的是單引號。這純粹是個人風格，你可以依照你個人的喜好去使用它們。下面兩行的意思是相同的：

```html
<a href="http://www.example.com">A link to my example.</a>

<a href="http://www.example.com">A link to my example.</a>
```

但是，你應該確認你沒有混著使用它們。下面這行則會造成錯誤！

```html
<a href="http://www.example.com'>A link to my example.</a>
```

如果你在你的 HTML 中使用其中一種引號，你就可以包裹另外一種引號：

```html
<a href="http://www.example.com" title="Isn't this fun?"
 >A link to my example.</a
>
```

不過，如果你想要包裹相同種類的引號，你就必須要用到 HTML entities。例如，以下範例是錯的：

```html
 <a href='http://www.example.com' title='Isn't this fun?'>A link to my example.</a>
```

你應該要這樣寫：

```html
<a href="http://www.example.com" title="Isn't this fun?"
 >A link to my example.</a
>
```

解析 HTML 文件
----------

以上講述了 HTML 中個別元素的基礎知識，但是單獨使用它們，並沒有多大用處。所以現在就讓我們來看看如何將這些元素組成一個 HTML 網頁吧：

```html
<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>My test page</title>
  </head>
  <body>
    <p>This is my page</p>
  </body>
</html>
```

這裡有：

1. `<!DOCTYPE html>`：文件類型（doctype）。 在很久很久以前，當 HTML 還年輕的時候（大約西元 1991 年），文件類型是要作為一系列規範的連結，HTML 網頁必須要遵守這些規範才會被當作是好的 HTML，比如說具備自動錯誤檢查和其他有用的東西等。在那個時候，它們看起來像這樣：

```html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
```

不過，現在已經沒有人在乎它們了，它們只是個歷史痕跡，需要形式上地被引入，以確保一切正常。`<!DOCTYPE html>` 是字數最短的有效 doctype。你只需要知道這些就夠了。
2. `<html></html>`：`<html>` (en-US) 元素。該元素包裹住頁面的所有內容，有時也被稱作根元素（root element）。
3. `<head></head>`：`<head>` 元素。這個元素放著你想含括的所有重要資訊，這些資訊不會呈現在網頁瀏覽者眼前。這些東西包括，顯示於搜尋結果的關鍵字、頁面說明、CSS 等等。你將會在這個系列的下個章節中學到更多有關這部分的知識。
4. `<meta charset="utf-8">`：這個元素指定你的文件使用 UTF-8 為字元編碼，這種編碼含有這世上大部分語言的字元，理論上可以處理所有你想放文字內容，因此建議大家都要使用這種編碼，它能幫你免去許多煩惱。
5. `<title></title>`：`<title>` 元素。這是用來設定網頁名稱的，它會顯示在分頁標籤上，當你將該網頁加入書籤或加入最愛時，則是用來形容這個網站。
6. `<body></body>`：`<body>` (en-US) 元素含括了*所有*你想要給網頁瀏覽者看到的內容，不管是文字、圖片、遊戲、可以播放的音樂或其他東西。
### 主動學習：在 HTML 文檔中加入一些特徵

如果你想試試看在你的電腦上寫一些 HTML，你可以：

1. 複製上面的 HTML 範例。
2. 在你的文字編輯器中建立一個新檔案。
3. 將剛複製的 HTML 範例貼到新開的檔案裡。
4. 將檔案儲存為 `index.html`。

**備註：** 你也能在這找到 HTML 範例：MDN Learning Area Github repo。

接著你就可以用網頁瀏覽器開啟你的檔案，看看這些原始碼會被渲染（rendered）的樣子，然後編輯原始碼並重新整理瀏覽器，再看看會變成怎樣。目前你的網頁會長這樣：

![A simple HTML page that says This is my page](/zh-TW/docs/Learn/HTML/Introduction_to_HTML/Getting_started/template-screenshot.png)在這個練習中，你可以在自己的電腦中撰寫原始碼，就像上面寫的一樣，或者你可以在底下的範例視窗中進行編輯（該視窗僅表示 `<body>` (en-US) 元素的內容）我們希望你依照以下的步驟逐步前行：

* 在 `<body>` (en-US) 之後，加入這個文件的主要標題。這應該由一個 `<h1>` 以及一個 `</h1>` 包著。
* 撰寫段落的內容，這些內容可以是一些你感興趣的事物。
* 讓其中重要的字詞以粗體顯示，讓它們更加搶眼，你可以用一個 `<strong>` 以及一個 `</strong>` 包著它們來達成這件事情。
* 加入一個連結到你的文章段落中，像前面所講過的那樣。
* 在這段文字的下面加入一張圖片，像前面所說的那樣。如果你可以使用不同的圖片（你電腦裡的或網路上的都可以），你就能獲得加分！！

如果你不小心打錯了，你可以用 *Reset* 鍵重置。如果你卡關了，可以點擊 *Show solution* 鍵來偷看答案。
```

<h2>Input</h2>
<textarea id="code" class="input"><p>This is my page</p></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;
}

img {
  max-width: 100%;
}

.output {
  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 =
    '<p>I really enjoy <strong>playing the drums</strong>. One of my favourite drummers is Neal Peart, who\
 plays in the band <a href="https://en.wikipedia.org/wiki/Rush\_%28band%29" title="Rush Wikipedia article">Rush</a>.\
 My favourite Rush album is currently <a href="http://www.deezer.com/album/942295">Moving Pictures</a>.</p>\
<img src="http://www.cygnus-x1.net/links/rush/images/albums/sectors/sector2-movingpictures-cover-s.jpg">';
  drawOutput();
});

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

### HTML 中的空格（Whitespace）

在上面的範例中，你可能會發現原始碼中有許多空格，其實這是完全不需要的，下面兩段原始碼會有相同的結果：

```html
<p>Dogs are silly.</p>

<p>Dogs are silly.</p>
```

不管你用多少空格（whitespace，包括空白字元與換行字元），HTML 的語法分析器都只會留下一個空格。所以說，為什麼要用這麼多空格呢？答案是為了增加可讀性——適當的排版會讓人更明白你的原始碼，所以千萬不要把你的原始碼擠成一團，讓它們變得雜亂無章。在我們的 HTML 中，我們將每個巢狀的元素都以兩個空格縮排。原始碼的排版風格（如要用多少空格進行縮排），可依照個人喜好使用，但你的排版方式應該要一致。

實體參照（Entity reference）：引用 HTML 中的特殊字元
-------------------------------------

在 HTML 中， `<` 、 `>` 、 `"` 、 `'` 和 `&` 是特殊字元，它們是 HTML 語法的一部份。那麼，要如何使用這些特殊字元呢？比方說，你如果想要用 `&`（ampersand）或小於符號 `<`（less than sign）時，要如何避免它們被瀏覽器當成原始碼呢？

這時候我們就需要用到字元參照（character references），它們是用來表示特殊字元的編碼，專門用在這種情形上。每個字元參照都是以 `&`（ampersand）起頭，以分號 `;`（semi-colon）做結。

| 字元 | 相應的字元引用 |
| --- | --- |
| < | < |
| > | > |
| " | " |
| ' | ' |
| & | & |

如果你英文不錯的話，應該不難發現字元參照其實就是這些字元的英文縮寫，也就是說，「<」為 less than （小於）；「>」為 great than（大於）；「"」為 quotation（引號）；「'」為 apostrophe （單引號）；「&」為 ampersand（和號）。你可以透過下面的維基連結來查看 HTML 的字元實體參照。在下面的範例中，你可以看到兩段敘述網頁技術的段落：

```html
<p>In HTML, you define a paragraph using the</p>
<p>element.</p>

<p>In HTML, you define a paragraph using the <p> element.</p>
```

看到下面的輸出結果，你會發現第一個段落是錯誤的，因為瀏覽器認為第二個 `<p>` 是要開啟新段落。而第二個段落就沒問題，因為我們將 `<` 及 `>` 換成了字元參照。

**備註：** 你可以在維基百科中找到完整的 HTML 字元實體參照的對照表：List of XML and HTML character entity references。請記得只要你的 HTML 的字元編碼設定為 UTF-8，你就不需要使用其他字元的實體參照，因為現今的瀏覽器都能應付。

HTML 註解
-------

HTML 就像大部分的程式語言，提供了一種能讓我們可以在原始碼中加入註解的方式——註解是會被瀏覽器忽略，並且不會被使用者看到的，它們存在的目的是要讓你得以在原始碼中說明你的原始碼是如何運作的、每段原始碼的作用等等。當你已經六個月沒有察看某個網頁的原始碼，而你完全想不起來你做了什麼的時候、或是當你把你的原始碼交給別人一同協作時，註解將會是你的好朋友！

試著將你 HTML 檔案中的一部份內容變成註解，你需要將內容包裹在特殊的符號 `<!--` 和 `-->` 之中，例如：

```html
<p>I'm not inside a comment</p>

<!-- <p>I am!</p> -->
```

如你所見，在下方的範例中，第一個段落出現在輸出結果中，但第二個段落並沒有出現。

總結
--

恭喜你看完了這個章節，我們你能享受這個學習基礎 HTML 的旅程！目前，你應該已經了解 HTML 長什麼樣子、它最基本的運作方式，並且能夠寫出一些元素和屬性。基礎 HTML 大致上就到這裡結束，在單元接下來的章節中，我們將會更深入探討本章節學到的內容並介紹更多 HTML 的觀念。千萬別轉台！

**備註：** 目前，在你要開始學更多有關 HTML 的知識時，你可能也想要探索基礎的 CSS（Cascading Style Sheet）。CSS 是一種用來為你的網頁增添花樣的語言，例如改變字型、顏色，或改變頁面的布局。你很快就會發現，同時使用 HTML 和 CSS 會帶來很棒的效果。

參見
--

* 用 CSS 為 HTML 元素修改顏色 (en-US)
* Overview: Introduction to HTML
* 次頁


Document and website structure - 學習該如何開發 Web

Document and website structure
==============================

* 前頁  (en-US)
* Overview: Introduction to HTML
* 次頁  (en-US)

HTML 不僅能夠定義網頁的單獨部分（例如「段落」或「圖片」），還可以使用區塊級元素（例如「標題欄」、「導覽選單」、「主內容列」）來定義網站中的複合區域。本文將探討如何規劃基本的網站結構，並根據規劃的結構來編寫 HTML。

|  |  |
| --- | --- |
| 預備知識: |
 Basic HTML familiarity, as covered in
 Getting started with HTML. HTML text formatting, as covered in
 HTML text fundamentals. How hyperlinks work, as covered in
 Creating hyperlinks.
  |
| 學習目標: | 學習使用語義標籤來建立文本，建置簡單的網站結構。 |

文本的基本組成
-------

網頁有各式各樣的外觀，但是除了全螢幕影片、遊戲或藝術作品頁面外，都傾向於使用類似的標準元件:

頁首:

通常橫跨於整個頁面頂部有一個大標題。這是網站的主要資訊，通常存在於所有網頁。

導覽列:

指向網站各個主要區段的超連結。通常用選單按鈕、連結或頁簽來表示。類似於頁首，導航列通常應在所有網頁之間保持一致，否則會讓用戶感到疑惑，甚至無所適從。許多 web 設計人員認為導航列是頁首的一部分，而不是獨立的元件，但這並非絕對；還有人認為，兩者獨立可以提供更好的無障礙訪問特性，因為螢幕可以更清晰地分辨二者。

主要內容:

中心的大部分區域是當前網頁大多數的獨有內容，例如影片、文章、地圖、新聞等。這些內容是網站的一部分，且會因頁面而異。

側邊攔:

一些外圍資訊、連結、引用、廣告等。通常與主內容相關（例如一個新聞頁面上，側邊欄可能包含作者資訊或相關文章連結）。

頁尾:

橫跨頁面底部的狹長區域。和頁首一樣，頁尾是放置共用資訊（比如版權聲明或聯繫方式）的，一般使用較小字體，且通常為次要內容。還可以通過提供快速訪問連結來進行SEO 。

一個「典型的網站」可能會這樣佈局:

![a simple website structure example featuring a main heading, navigation menu, main content, side bar, and footer.](/zh-TW/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure/sample-website.png)

用於構造內容的 HTML
------------

上面顯示的簡單範例並不美觀，但對於說明典型的網站佈局範例來說是非常好的。 有些網站上有更多欄，有些則複雜得多，但是你知道了。 使用正確的 CSS，你幾乎可以使用任何元素來包裹不同的部分，並使其看起來像你想要的樣子，但是如前所述，我們需要遵守語義並將正確的元素用於正確的運行。

這是因為視覺效果並不能說明整個故事。 We use color and font size to draw sighted users' attention to the most useful parts of the content, like the navigation menu and related links, but what about visually impaired people for example, who might not find concepts like "pink" and "large font" very useful?

**備註：** Colorblind people represent around 4% of the world population or, to put it another way, approximately 1 in every 12 men and 1 in every 200 women are colorblind. Blind and visually impaired people represent roughly 4-5% of the world population (in 2012 there were 285 million such people in the world, while the total population was around 7 billion).

In your HTML code, you can mark up sections of content based on their *functionality* — you can use elements that represent the sections of content described above unambiguously, and assistive technologies like screenreaders can recognise those elements and help with tasks like "find the main navigation", or "find the main content." As we mentioned earlier in the course, there are a number of consequences of not using the right element structure and semantics for the right job.

To implement such semantic mark up, HTML provides dedicated tags that you can use to represent such sections, for example:

* **header:** `<header>` (en-US).
* **navigation bar:** `<nav>`.
* **main content:** `<main>` (en-US), with various content subsections represented by `<article>` (en-US), `<section>` (en-US), and `<div>` elements.
* **sidebar:** `<aside>` (en-US); often placed inside `<main>` (en-US).
* **footer:** `<footer>` (en-US).
### Active learning: exploring the code for our example

Our example seen above is represented by the following code (you can also find the example in our GitHub repository). We'd like you to look at the example above, and then look over the listing below to see what parts make up what section of the visual.

```html
<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />

    <title>My page title</title>
    <link
 href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300|Sonsie+One"
 rel="stylesheet"
 type="text/css" />
    <link rel="stylesheet" href="style.css" />

    <!-- the below three lines are a fix to get HTML5 semantic elements working in old versions of Internet Explorer-->
    <!--[if lt IE 9]>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.js"></script>
 <![endif]-->
  </head>

  <body>
    <!-- Here is our main header that is used across all the pages of our website -->

    <header>
      <h1>Header</h1>
    </header>

    <nav>
      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">Our team</a></li>
        <li><a href="#">Projects</a></li>
        <li><a href="#">Contact</a></li>
      </ul>

      <!-- A Search form is another commmon non-linear way to navigate through a website. -->

      <form>
        <input type="search" name="q" placeholder="Search query" />
        <input type="submit" value="Go!" />
      </form>
    </nav>

    <!-- Here is our page's main content -->
    <main>
      <!-- It contains an article -->
      <article>
        <h2>Article heading</h2>

        <p>
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Donec a diam
          lectus. Set sit amet ipsum mauris. Maecenas congue ligula as quam
          viverra nec consectetur ant hendrerit. Donec et mollis dolor. Praesent
          et diam eget libero egestas mattis sit amet vitae augue. Nam tincidunt
          congue enim, ut porta lorem lacinia consectetur.
        </p>

        <h3>Subsection</h3>

        <p>
          Donec ut librero sed accu vehicula ultricies a non tortor. Lorem ipsum
          dolor sit amet, consectetur adipisicing elit. Aenean ut gravida lorem.
          Ut turpis felis, pulvinar a semper sed, adipiscing id dolor.
        </p>

        <p>
          Pelientesque auctor nisi id magna consequat sagittis. Curabitur
          dapibus, enim sit amet elit pharetra tincidunt feugiat nist imperdiet.
          Ut convallis libero in urna ultrices accumsan. Donec sed odio eros.
        </p>

        <h3>Another subsection</h3>

        <p>
          Donec viverra mi quis quam pulvinar at malesuada arcu rhoncus. Cum
          soclis natoque penatibus et manis dis parturient montes, nascetur
          ridiculus mus. In rutrum accumsan ultricies. Mauris vitae nisi at sem
          facilisis semper ac in est.
        </p>

        <p>
          Vivamus fermentum semper porta. Nunc diam velit, adipscing ut
          tristique vitae sagittis vel odio. Maecenas convallis ullamcorper
          ultricied. Curabitur ornare, ligula semper consectetur sagittis, nisi
          diam iaculis velit, is fringille sem nunc vet mi.
        </p>
      </article>

      <!-- the aside content can also be nested within the main content -->
      <aside>
        <h2>Related</h2>

        <ul>
          <li><a href="#">Oh I do like to be beside the seaside</a></li>
          <li><a href="#">Oh I do like to be beside the sea</a></li>
          <li><a href="#">Although in the North of England</a></li>
          <li><a href="#">It never stops raining</a></li>
          <li><a href="#">Oh well...</a></li>
        </ul>
      </aside>
    </main>

    <!-- And here is our main footer that is used across all the pages of our website -->

    <footer>
      <p>©Copyright 2050 by nobody. All rights reversed.</p>
    </footer>
  </body>
</html>
```

Take some time to look over the code and understand it — the comments inside the code should also help you to understand it. We aren't asking you to do much else in this article, because the key to understanding document layout is writing a sound HTML structure, and then laying it out with CSS. We'll wait for this until you start to study CSS layout as part of the CSS topic.

HTML layout elements in more detail
-----------------------------------

It's good to understand the overall meaning of all the HTML sectioning elements in detail — this is something you'll work on gradually as you start to get more experience with web development. You can find a lot of detail by reading our HTML element reference (en-US). For now, these are the main definitions that you should try to understand:

* `<main>` (en-US) is for content *unique to this page.* Use `<main>` only *once* per page, and put it directly inside `<body>` (en-US). Ideally this shouldn't be nested within other elements.
* `<article>` (en-US) encloses a block of related content that makes sense on its own without the rest of the page (e.g., a single blog post).
* `<section>` (en-US) is similar to `<article>`, but it is more for grouping together a single part of the page that constitutes one single piece of functionality (e.g., a mini map, or a set of article headlines and summaries). It's considered best practice to begin each section with a heading (en-US); also note that you can break `<article>`s up into different `<section>`s, or `<section>`s up into different `<article>`s, depending on the context.
* `<aside>` (en-US) contains content that is not directly related to the main content but can provide additional information indirectly related to it (glossary entries, author biography, related links, etc.).
* `<header>` (en-US) represents a group of introductory content. If it is a child of `<body>` (en-US) it defines the global header of a webpage, but if it's a child of an `<article>` (en-US) or `<section>` (en-US) it defines a specific header for that section (try not to confuse this with titles and headings).
* `<nav>` contains the main navigation functionality for the page. Secondary links, etc., would not go in the navigation.
* `<footer>` (en-US) represents a group of end content for a page.
### Non-semantic wrappers

Sometimes you'll come across a situation where you can't find an ideal semantic element to group some items together or wrap some content. Sometimes you might want to just group a set of elements together to affect them all as a single entity with some CSS or JavaScript. For cases like these, HTML provides the `<div>` and `<span>` (en-US) elements. You should use these preferably with a suitable `class` (en-US) attribute, to provide some kind of label for them so they can be easily targeted.

`<span>` (en-US) is an inline non-semantic element, which you should only use if you can't think of a better semantic text element to wrap your content, or don't want to add any specific meaning. For example:

```html
<p>
  The King walked drunkenly back to his room at 01:00, the beer doing nothing to
  aid him as he staggered through the door
  <span class="editor-note"
 >[Editor's note: At this point in the play, the lights should be down
    low]</span
 >.
</p>
```

In this case, the editor's note is supposed to merely provide extra direction for the director of the play; it is not supposed to have extra semantic meaning. For sighted users, CSS would perhaps be used to distance the note slightly from the main text.

`<div>` is a block level non-semantic element, which you should only use if you can't think of a better semantic block element to use, or don't want to add any specific meaning. For example, imagine a shopping cart widget that you could choose to pull up at any point during your time on an e-commerce site:

```html
<div class="shopping-cart">
  <h2>Shopping cart</h2>
  <ul>
    <li>
      <p>
        <a href=""><strong>Silver earrings</strong></a
 >: $99.95.
      </p>
      <img src="../products/3333-0985/thumb.png" alt="Silver earrings" />
    </li>
    <li>...</li>
  </ul>
  <p>Total cost: $237.89</p>
</div>
```

This isn't really an `<aside>`, as it doesn't necessarily relate to the main content of the page (you want it viewable from anywhere). It doesn't even particularly warrant using a `<section>`, as it isn't part of the main content of the page. So a `<div>` is fine in this case. We've included a heading as a signpost to aid screenreader users in finding it.

**警告：** Divs are so convenient to use that it's easy to use them too much. As they carry no semantic value, they just clutter your HTML code. Take care to use them only when there is no better semantic solution and try to reduce their usage to the minimum otherwise you'll have a hard time updating and maintaining your documents.

### Line breaks and horizontal rules

Two elements that you'll use occasionally and will want to know about are `<br>` and `<hr>`:

####
: the line break element

`<br>` creates a line break in a paragraph; it is the only way to force a rigid structure in a situation where you want a series of fixed short lines, such as in a postal address or a poem. For example:

```html
<p>
  There once was a man named O'Dell<br />
  Who loved to write HTML<br />
  But his structure was bad, his semantics were sad<br />
  and his markup didn't read very well.
</p>
```

Without the `<br>` elements, the paragraph would just be rendered in one long line (as we said earlier in the course, HTML ignores most whitespace); with `<br>` elements in the code, the markup renders like this:

####
: the thematic break element

`<hr>` elements create a horizontal rule in the document that denotes a thematic change in the text (such as a change in topic or scene). Visually it just looks like a horizontal line. As an example:

```html
<p>
  Ron was backed into a corner by the marauding netherbeasts. Scared, but
  determined to protect his friends, he raised his wand and prepared to do
  battle, hoping that his distress call had made it through.
</p>
<hr />
<p>
  Meanwhile, Harry was sitting at home, staring at his royalty statement and
  pondering when the next spin off series would come out, when an enchanted
  distress letter flew through his window and landed in his lap. He read it
  hazily and sighed; "better get back to work then", he mused.
</p>
```

Would render like this:

Planning a simple website
-------------------------

Once you've planned out the structure of a simple webpage, the next logical step is to try to work out what content you want to put on a whole website, what pages you need, and how they should be arranged and link to one another for the best possible user experience. This is called Information architecture (en-US). In a large, complex website, a lot of planning can go into this process, but for a simple website of a few pages, this can be fairly simple, and fun!

1. Bear in mind that you'll have a few elements common to most (if not all) pages — such as the navigation menu, and the footer content. If your site is for a business, for example, it's a good idea to have your contact information available in the footer on each page. Note down what you want to have common to every page.
 ![the common features of the travel site to go on every page: title and logo, contact, copyright, terms and conditions, language chooser, accessibility policy](/zh-TW/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure/common-features.png)
2. Next, draw a rough sketch of what you might want the structure of each page to look like (it might look like our simple website above). Note what each block is going to be.
 ![A simple diagram of a sample site structure, with a header, main content area, two optional sidebars, and footer](/zh-TW/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure/site-structure.png)
3. Now, brainstorm all the other (not common to every page) content you want to have on your website — write a big list down.
 ![A long list of all the features that we could put on our travel site, from searching, to special offers and country-specific info](/zh-TW/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure/feature-list.png)
4. Next, try to sort all these content items into groups, to give you an idea of what parts might live together on different pages. This is very similar to a technique called Card sorting (en-US).
 ![The items that should appear on a holiday site sorted into 5 categories: Search, Specials, Country-specific info, Search results, and Buy things](/zh-TW/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure/card-sorting.png)
5. Now try to sketch a rough sitemap — have a bubble for each page on your site, and draw lines to show the typical workflow between pages. The homepage will probably be in the center, and link to most if not all of the others; most of the pages in a small site should be available from the main navigation, although there are exceptions. You might also want to include notes about how things might be presented.
 ![A map of the site showing the homepage, country page, search results, specials page, checkout, and buy page](/zh-TW/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure/site-map.png)
### Active learning: create your own sitemap

Try carrying out the above exercise for a website of your own creation. What would you like to make a site about?

**備註：** Save your work somewhere; you might need it later on.

Test your skills!
-----------------

You've reached the end of this article, but can you remember the most important information? You can find a detailed assessment that tests these skills at the end of the module; see Structuring a page of content (en-US). We'd advise going through the next article in the series first and not just skipping to it though!

Summary
-------

At this point you should have a better idea about how to structure a web page/site. In the last article of this module, we'll study how to debug HTML.

See also
--------

* Using HTML sections and outlines (en-US): Advanced guide to HTML5 semantic elements and the HTML5 outline algorithm.
* 前頁  (en-US)
* Overview: Introduction to HTML
* 次頁  (en-US)


What’s in the head? Metadata in HTML - 學習該如何開發 Web

What’s in the head? Metadata in HTML
====================================

* 前頁
* Overview: Introduction to HTML
* 次頁

HTML 文件的 head 是網頁在加載完畢之後，不會顯示在瀏覽器上的部分。其中包含一些資訊，如頁面的標題(`<title>`)、CSS 的連結 (當你想利用 CSS 來妝點你的頁面 HTML 時，你會用到它們)、網頁圖示(favicon)的連結，以及 metadata (裡頭承載了有關於該 HTML 的資料，如作者、描述該文件的關鍵詞等)。在這一章節裡，我們會討論以上的內容，甚至更多，藉此替你打下標記網頁的根基。

|  |  |
| --- | --- |
| 需求： |
 對 HTML 的基礎認識，內容我們已在
 HTML 入門中提及。
  |
| 目標： |
 學習 HTML 的 head，了解它的目的、它能包含什麼重要東西，以及它對 HTML
 文件產生的影響。
  |

什麼是 HTML head?
--------------

讓我們再看一次之前所看過的 HTML 文件：

```html
<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>My test page</title>
  </head>
  <body>
    <p>This is my page</p>
  </body>
</html>
```

HTML 的 head 就是 `<head>` 元素裡面的內容 — 跟 `<body>` (en-US) 元素中的內容不同（當網頁被載入瀏覽器中時，會呈現在頁面上），head 裡的內容不會顯示在頁面上，它的任務是要容納文件的 metadata (en-US)。在上例中，head 只有這樣：

```html
<head>
  <meta charset="utf-8" />
  <title>My test page</title>
</head>
```

假如換作是較大型的網頁，head 裡面可能就會有非常多東西了。現在你可以先到幾個你常去的網站，並利用開發者工具 (en-US)來檢視它們的 head。我們在這裡並不打算要向你展示所有能放在 head 中的東西，而是教你使用一些常用的元素，讓你熟悉熟悉它們。總而言之，讓我們開始吧！

加入標題(title)
-----------

我們已經看到活生生的 `<title>` 元素了 — 這東西就是用來為文件加上標題的。你可能會把它跟 `<h1>` (en-US) 搞混，`<h1>` (en-US) 是用來為網頁主體加上標題的元素，有時也被叫做頁面標題 (page title)，雖然聽起來功能很像，但他們是不同的東西！

* `<h1>` (en-US) 元素在被載入瀏覽器時顯示在頁面上 — 通常它應該只會出現一次，用來為頁面內容加上標題 (如故事和新聞的標題，或是其他合適的用法)。
* `<title>` 元素是用來代表 HTML 文件標題的 metadata (即非文件內容)。
### 不要光是看：檢視一個簡單的範例

1. 在開始這次主動學習之前，請你先到我們的 GitHub repo 中下載一份 title-example.html page。要做到這件事情，你可以：
    1. 用你的文字編輯器開一個新檔案，並將原始碼複製到裡面，然後再儲存在一個合適的地方。
    2. 按下網頁上的 Raw 按鈕，它就會將原始碼以純文字的形式顯示在你瀏覽器的新分頁上。接著點按右鍵，將檔案儲存在你喜歡的地方。
2. 現在在你的瀏覽器中開啟檔案，你看到的東西應該會長這樣：

 ![A simple web page with the title set to 'title' element, and the 'h1' set to 'h1' element.](/zh-TW/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML/title-example.png)這樣子你應該可以很清楚地看到哪裡是 `<h1>`，而哪裡是 `<title>` 了！
3. 試著開啟文字編輯器，修改兩元素的內容，儲存後再重整網頁，看看有什麼不同。

`<title>` 元素中的內容也被用在其他地方。舉個例子，如果你想要收藏這個網頁，(在 Firefox 上是 *書籤 > 將本頁加入書籤* 或按下 URL 列的星星符號)，你就會看到 `<title>` 的內容被設為建議的書籤名稱。

![A webpage being bookmarked in firefox; the bookmark name has been automatically filled in with the contents of the 'title' element](/zh-TW/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML/bookmark-example.png)

接下來你就會看到，`<title>` 的內容也會被用在搜尋當中。

Metadata: <meta> 元素
-------------------

Metadata is data that describes data, and HTML has an "official" way of adding metadata to a document — the `<meta>` (en-US) element. Of course, the other stuff we are talking about in this article could also be thought of as metadata too. There are a lot of different types of `<meta>` element that can be included in your page's <head>, but we won't try to explain them all at this stage, as it would just get too confusing. Instead, we'll explain a few things that you might commonly see, just to give you an idea.

### 指定文件字元編碼

In the example we saw above, this line was included:

```html
<meta charset="utf-8" />
```

This element simply specifies the document's character encoding — the character set that the document is permitted to use. `utf-8` is a universal character set that includes pretty much any character from any human language. This means that your web page will be able to handle displaying any language; it's therefore a good idea to set this on every web page you create! For example, your page could handle English and Japanese just fine:

![a web page containing English and Japanese characters, with the character encoding set to universal, or utf-8. Both languages display fine,](/zh-TW/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML/correct-encoding.png)If you set your character encoding to `ISO-8859-1`, for example (the character set for the Latin alphabet), your page rendering would be all messed up:

![a web page containing English and Japanese characters, with the character encoding set to latin. The Japanese characters don't display correctly](/zh-TW/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML/bad-encoding.png)

### Active learning: Experiment with character encoding

To try this out, revisit the simple HTML template you obtained in the previous section on `<title>` (the title-example.html page), try changing the meta charset value to `ISO-8859-1`, and add the Japanese to your page. This is the code we used:

```html
<p>Japanese example: ご飯が熱い。</p>
```

### 加入作者(author)和描述(description)

Many `<meta>` elements include `name` and `content` attributes:

* `name` specifies the type of meta element it is; what type of information it contains.
* `content` specifies the actual meta content.

Two such meta elements that are useful to include on your page define the author of the page, and provide a concise description of the page. Let's look at an example:

```html
<meta name="author" content="Chris Mills" />
<meta
 name="description"
 content="The MDN Learning Area aims to provide
complete beginners to the Web with all they need to know to get
started with developing web sites and applications." />
```

Specifying an author is useful in a few ways: it is useful to be able to work out who wrote the page, if you want to contact them with questions about the content. Some content management systems have facilities to automatically extract page author information and make it available for such purposes.

Specifying a description that includes keywords relating to the content of your page is useful as it has the potential to make your page appear higher in relevant searches performed in search engines (such activities are termed Search Engine Optimization, or SEO.)

### Active learning: The description's use in search engines

The description is also used on search engine result pages. Let's go through an exercise to explore this

1. Go to the front page of The Mozilla Developer Network.
2. View the page's source (Right/
 `Ctrl`
 + click on the page, choose *View Page Source* from the context menu.)
3. Find the description meta tag. It will look like this:

```html
<meta
 name="description"
 content="The Mozilla Developer Network (MDN) provides
information about Open Web technologies including HTML, CSS, and APIs for both
Web sites and HTML5 Apps. It also documents Mozilla products, like Firefox OS." />
```

4. Now search for "Mozilla Developer Network" in your favorite search engine (We used Yahoo.) You'll notice the description `<meta>` and `<title>` element content used in the search result — definitely worth having!

 ![A Yahoo search result for "Mozilla Developer Network"](/zh-TW/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML/mdn-search-result.png)

**備註：** In Google, you will see some relevant subpages of MDN listed below the main MDN homepage link — these are called sitelinks, and are configurable in Google's webmaster tools — a way to make your site's search results better in the Google search engine.

**備註：** Many `<meta>` features just aren't used any more. For example, the keyword `<meta>` element (`<meta name="keywords" content="fill, in, your, keywords, here">`) — which is supposed to provide keywords for search engines to determine relevance of that page for different search terms — is ignored by search engines, because spammers were just filling the keyword list with hundreds of keywords, biasing results.

### 其他種類的 metadata

As you travel around the web, you'll find other types of metadata, too. A lot of the features you'll see on websites are proprietary creations, designed to provide certain sites (such as social networking sites) with specific pieces of information they can use.

For example, Open Graph Data is a metadata protocol that Facebook invented to provide richer metadata for websites. In the MDN sourcecode, you'll find this:

```html
<meta
 property="og:image"
 content="https://developer.mozilla.org/mdn-social-share.png" />
<meta
 property="og:description"
 content="The Mozilla Developer Network (MDN) provides
information about Open Web technologies including HTML, CSS, and APIs for both Web sites
and HTML5 Apps. It also documents Mozilla products, like Firefox OS." />
<meta property="og:title" content="Mozilla Developer Network" />
```

One effect of this is that when you link to MDN on facebook, the link appears along with an image and description: a richer experience for users.

![Open graph protocol data from the MDN homepage as displayed on facebook, showing an image, title, and description.](/zh-TW/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML/facebook-output.png)Twitter also has its own similar proprietary metadata, which has a similar effect when the site's URL is displayed on twitter.com. For example:

```html
<meta name="twitter:title" content="Mozilla Developer Network" />
```

加入屬於自己的網頁 icon
--------------

To further enrich your site design, you can add references to custom icons in your metadata, and these will be displayed in certain contexts.

The humble favicon, which has been around for many years, was the first icon of this type, a 16 x 16 pixel icon used in multiple places. You'll see favicons displayed in the browser tab containing each open page, and next to bookmarked pages in the bookmarks panel.

A favicon can be added to your page by:

1. Saving it in the same directory as the site's index page, saved in `.ico` format (most browsers will support favicons in more common formats like `.gif` or `.png`, but using the ICO format will ensure it works as far back as Internet Explorer 6.)
2. Adding the following line into your HTML `<head>` to reference it:

```html
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
```

Here is an example of a favicon in a bookmarks panel:

![The Firefox bookmarks panel, showing a bookmarked example with a favicon displayed next to it.](/zh-TW/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML/bookmark-favicon.png)

There are lots of other icon types to consider these days as well. For example, you'll find this in the source code of the MDN homepage:

```html
<!-- third-generation iPad with high-resolution Retina display: -->
<link
 rel="apple-touch-icon-precomposed"
 sizes="144x144"
 href="https://developer.mozilla.org/static/img/favicon144.png" />
<!-- iPhone with high-resolution Retina display: -->
<link
 rel="apple-touch-icon-precomposed"
 sizes="114x114"
 href="https://developer.mozilla.org/static/img/favicon114.png" />
<!-- first- and second-generation iPad: -->
<link
 rel="apple-touch-icon-precomposed"
 sizes="72x72"
 href="https://developer.mozilla.org/static/img/favicon72.png" />
<!-- non-Retina iPhone, iPod Touch, and Android 2.1+ devices: -->
<link
 rel="apple-touch-icon-precomposed"
 href="https://developer.mozilla.org/static/img/favicon57.png" />
<!-- basic favicon -->
<link
 rel="shortcut icon"
 href="https://developer.mozilla.org/static/img/favicon32.png" />
```

The comments explain what each icon is used for — these elements cover things like providing a nice high resolution icon to use when the website is saved to an iPad's home screen.

Don't worry too much about implementing all these types of icon right now — this is a fairly advanced feature, and you won't be expected to have knowledge of this to progress through the course. The main purpose here is to let you know what such things are, in case you come across them while browsing other websites' source code.

在 HTML 中加入 CSS 和 JavaScript
---------------------------

Just about all websites you'll use in the modern day will employ CSS to make them look cool, and JavaScript to power interactive functionality, such as video players, maps, games, and more. These are most commonly applied to a web page using the `<link>` (en-US) element and the `<script>` element, respectively.

* The `<link>` (en-US) element always goes inside the head of your document. This takes two attributes, rel="stylesheet", which indicates that it is the document's stylesheet, and href, which contains the path to the stylesheet file:

```html
<link rel="stylesheet" href="my-css-file.css" />
```

* The `<script>` element does not have to go in the head; in fact, often it is better to put it at the bottom of the document body (just before the closing `</body>` tag), to make sure that all the HTML content has been read by the browser before it tries to apply JavaScript to it (if JavaScript tries to access an element that doesn't yet exist, the browser will throw an error.)

```html
<script src="my-js-file.js"></script>
```

**Note**: The `<script>` element may look like an empty element, but it's not, and so needs a closing tag. Instead of pointing to an external script file, you can also choose to put your script inside the `<script>` element.
### Active learning: applying CSS and JavaScript to a page

1. To start this active learning, grab a copy of our meta-example.html, script.js and style.css files, and save them on your local computer in the same directory. Make sure they are saved with the correct names and file extensions.
2. Open the HTML file in both your browser, and your text editor.
3. By following the information given above, add `<link>` (en-US) and `<script>` elements to your HTML, so that your CSS and JavaScript are applied to your HTML.

If done correctly, when you save your HTML and refresh your browser you'll see that things have changed:

![Example showing a page with CSS and JavaScript applied to it. The CSS has made the page go green, whereas the JavaScript has added a dynamic list to the page.](/zh-TW/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML/js-and-css.png)

* The JavaScript has added an empty list to the page. Now when you click anywhere on the list, a dialog box will pop up asking you to enter some text for a new list item. when you press the OK button, a new list item will be added to the list containing the text. When you click on an existing list item, a dialog box will pop up allowing you to change the item's text.
* The CSS has caused the background to go green, and the text to become bigger. It has also styled some of the content that the JavaScript has added to the page (the red bar with the black border is the styling the CSS has added to the JS-generated list.)

**備註：** If you get stuck in this exercise and can't get the CSS/JS to apply, try checking out our css-and-js.html example page.

預設文件語言
------

Finally, it's worth mentioning that you can (and really should) set the language of your page. This can be done by adding the lang attribute (en-US) to the opening HTML tag (as seen in the meta-example.html and shown below.)

```html
<html lang="en-US">
  …
</html>
```

This is useful in many ways. Your HTML document will be indexed more effectively by search engines if its language is set (allowing it to appear correctly in language-specific results, for example), and it is useful to people with visual impairments using screen readers (for example, the word "six" exists in both French and English, but is pronounced differently.)

You can also set subsections of your document to be recognised as different languages. For example, we could set our Japanese language section to be recognised as Japanese, like so:

```html
<p>Japanese example: <span lang="jp">ご飯が熱い。</span>.</p>
```

These codes are defined by the ISO 639-1 standard. You can find more about them in Language tags in HTML and XML.

總結
--

That marks the end of our quickfire tour of the HTML head — there's a lot more you can do in here, but an exhaustive tour would be boring and confusing at this stage, and we just wanted to give you an idea of the most common things you'll find in there for now! In the next article we'll be looking at HTML text fundamentals.

* 前頁
* Overview: Introduction to HTML
* 次頁


Creating hyperlinks - 學習該如何開發 Web

Creating hyperlinks
===================

* 前頁
* Overview: Introduction to HTML
* 次頁  (en-US)

超連結(Hyperlinks)真的超級重要 — 它造就了我們現今所熟知的網路。這篇文章將會介紹超連結的使用語法，並且探討建立它們的最佳實踐方法。

|  |  |
| --- | --- |
| 需求： |
 我們在
 HTML 入門
 中介紹過的 HTML 基礎，以及在
 HTML 的文字基礎知識
 中介紹過的文字格式化技巧。
  |
| 目標： | 學習如何有效地使用超連結，並利用它們來連結多個檔案。 |

什麼是超連結？
-------

超連結可說是網路中最令人振奮的革新技術。當然啦，早在網路技術萌芽之初，它們就已經在那了，它們正是網路之所以被稱為「網路」的最大原因 — 它讓我們的文件能任意地與其他文件(或者資源)相互連結（或是連結文件中的特定部份），讓我們能透過一個簡單的網路位址來經營我們的網路應用（相較之下，本機應用(native apps)就必須要安裝在主機上才能使用）。幾乎所有的網路內容都能被轉換成一個連結，讓網路瀏覽器在這些連結被點擊或觸發之後，跳轉到該網路位址(URL)上。

**備註：** URL 能夠指向 HTML 檔案、純文字檔案、圖片、文字文件、影音檔案等等可存在網路上的東西。如果網路瀏覽器不知道如何顯示或者處理該檔案的話，它會問你想要開啟這個檔案（將檔案交由本機應用來處理）還是要下載該檔案（意即你可以待會兒再處理）。

以 BBC 的主頁為例，裡面就包含了非常多的連結，各自連到不同新聞、網站的其它地方(導覽功能)，或者登入/註冊頁面等等。

![frontpage of bbc.co.uk, showing many news items, and navigation menu functionality](/zh-TW/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks/updated-bbc-website.png)

解析連結
----

一個基本的連結由 `<a>` (en-US) 元素包裹一段文字而成(當然也不一定要是文字，見下方的區塊級連結)，同時，你需要將網路位址填入 `href` (en-US) 屬性中，這個屬性有時也被叫做**超文字參考(Hypertext Reference)**或**目標(target)**。

```html
<p>
  I'm creating a link to
  <a href="https://www.mozilla.org/en-US/">the Mozilla homepage</a>.
</p>
```

這會產生以下結果：

I'm creating a link to the Mozilla homepage.

### 利用 title 屬性來添加額外資訊

另外一個你可能會想在連結中附加的屬性是 `title`，它的目的是攜帶一個補充訊息到連結上，好比說目標網頁有什麼樣的資訊，或者是一些警告訊息，範例如下：

```html
<p>
  I'm creating a link to
  <a
 href="https://www.mozilla.org/en-US/"
 title="The best place to find more information about Mozilla's
 mission and how to contribute"
 >the Mozilla homepage</a
 >.
</p>
```

這將會產生以下結果（當游標移到連結上方時，標題會以提示的形式出現）：

I'm creating a link to the Mozilla homepage.

**備註：** 連結標題只有在游標停在連結上方時才會出現，也就是說那些只依賴鍵盤來瀏覽網頁的人將會很難看到這個訊息，因此，如果說標題資訊對網頁易用性(usability)有著重大影響的話，你應該把它放在大家都看得到的地方，比方說放在一般的文字元素裡。

### 不要只用看的：建立你自己的範例連結

主動學習時間！我們想要你用自己的文字編輯器來撰寫一個 HTML 文件(你可以修改我們的入門範本，那應該就很夠用了)。

* 試著在 HTML 的主體(body)中，加入一個以上的段落或者其他你學過的內容元素。
* 將一些內容轉換成連結。
* 增加標題屬性到連結中。
### 區塊級連結(Block-level links)

就像先前所提到的，你可以將任何內容轉換成連結，就算是區塊級元素也沒問題！如果你有一張圖片要轉換成連結，你可以把圖片元素放在 `<a>` 標籤裡，像這樣：

```html
<a href="https://www.mozilla.org/en-US/">
  <img
 src="mozilla-image.png"
 alt="mozilla logo that links to the mozilla homepage" />
</a>
```

**備註：** 在往後的教學中，你還會學到更多的圖片使用技法。

快速理解 URL 和路徑
------------

在完全搞懂連結標的(link target)之前，你必須要先瞭解什麼是 URL 和檔案路徑，而這個小節就是要帶你來看這些東西。

URL 全名為 Uniform Resource Locator (一致資源定位器，俗稱網址)，是一條用來指出某樣東西在網路上的位址的字串。比如說 Mozilla 的英文主頁就是位在 `https://www.mozilla.org/en-US/`。

URL 利用路徑來找到檔案，而路徑會指出你所感興趣的檔案位於檔案系統上的什麼地方。現在讓我們來看個簡單的目錄結構範例(請見我們的建立超連結目錄)。

![A simple directory structure. The parent directory is called creating-hyperlinks and contains two files called index.html and contacts.html, and two directories called projects and pdfs, which contain an index.html and a project-brief.pdf file, respectively](/zh-TW/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks/simple-directory.png)

`creating-hyperlinks` 是這個目錄結構的**根目錄(root)**，當你在本地端撰寫網站時，你會將整個網站都放在這樣的資料夾中。在我們的根目錄裡有 `index.html` 和 `contacts.html` 兩個檔案，在現實的情況中，`index.html` 會是我們的首頁或者登陸頁面(landing page，網站或它的某部份的進入點)。

我們的根目錄中有兩個子目錄 — `pdfs` 和 `projects`，它們各自都有一個檔案在裡頭，分別是 `project-brief.pdf` 和 `index.html`。請記得，你可以很愉快地在一個專案中擁有兩個 `index.html`，只要它們處在檔案系統上的不同位址。很多網站都會這麼做，第二個 `index.html` 可能會拿來當作是與專案有關資訊的主登陸頁面。

* \*\*在相同目錄裡：\*\*如果你要連結的兩個檔案處在同一個的目錄下，你只需要寫指向的檔案名稱就行了。比方說，如果你想在 `index.html` (最上層的那個) 中加入一個通往 `contacts.html` 的超連結，你要用的 URL 就是 `contacts.html`：

```html
<p>
  Want to contact a specific staff member? Find details on our
  <a href="contacts.html">contacts page</a>.
</p>
```

* **往下到子目錄中**：如果你想要在 `index.html` (還是最上層的那個) 中加入一個指向 `projects/index.html` 的超連結，在指出你要的檔案之前，你需要先往下進到 `projects` 目錄裡。要做到這件事，你可以先指出目錄名稱，然後加上一個 /，最後再加上檔案名稱。因此你要寫的 URL 會是 `projects/index.html`：

```html
<p>Visit my <a href="projects/index.html">project homepage</a>.</p>
```

* **往上到父目錄中**：如果你想要在 `projects/index.html` 中加入一個指向 `pdfs/project-brief.pdf` 的超連結，你需要先往上進到 `pdf` 目錄裡。而「往上移動一個目錄」可以用 `..` 來表示，因此你要寫的 URL 會是 `../pdfs/project-brief.pdf`：

```html
<p>A link to my <a href="../pdfs/project-brief.pdf">project brief</a>.</p>
```

**備註：** 你可以將多個這種語法組成一個較為複雜的 URL，例如：`../../../complex/path/to/my/file.html`。

### 文件片段 (Document fragments)

並不是每次都只能連到文件的頂端，你也可以連到 HTML 文件中的某個部分，而這個部分叫做**文件片段(document fragment)**。要做到這件事，你得先為你要連的元素設定 `id` (en-US) 屬性，通常你可以把連結設在標題(heading)上，像是下面這樣：

```html
<h2 id="Mailing\_address">Mailing address</h2>
```

要連到特定的 `id`，你得在你的 URL 的後面加上一個 # 號，像這樣：

```html
<p>
  Want to write us a letter? Use our
  <a href="contacts.html#Mailing\_address">mailing address</a>.
</p>
```

你甚至可以利用文件片段來連到*同個文件的其他部分*：

```html
<p>
  The <a href="#Mailing\_address">company mailing address</a> can be found at the
  bottom of this page.
</p>
```

### 絕對 URL vs. 相對 URL

你會在網路上看到兩個名詞，**絕對 URL(absolute URL)**和**相對 URL(relative URL):**

**絕對 URL**：指向網路上的絕對位址，裡頭包含協定(protocol)和網域名稱(domain name)。舉個例子，假設一個 web server 的根目錄有一個 `projects` 目錄，裡面放著一個 `index.html`，該網站的網域為 `http://www.example.com`，則網頁可以透過網址 `http://www.example.com/projects/index.html` 來取得 (或寫成 `http://www.example.com/projects/` 也行，因為大多的 web server 都能在 URL 沒有明確指出時，自動找尋如 `index.html` 之類的登陸頁面)。

絕對 URL 無論在什麼地方使用，它都會代表同一個位址。

**相對 URL**：指向一個檔案的相對位址，這跟我們在先前看到的非常類似。舉例來說，如果我們想要從 `http://www.example.com/projects/index.html` 連到同一目錄下的 PDF 檔，URL 就只要檔名就好 — 像是 `project-brief.pdf` — 不需要其它的資訊。如果那個 PDF 放在 `projects` 中叫做 `pdfs` 的子目錄裡，其相對連結就是 `pdfs/project-brief.pdf` (等效的絕對 URL 為 `http://www.example.com/projects/pdfs/project-brief.pdf`)。

相對 URL 指向的位址會受到檔案所在的真正位址影響 — 舉例來說，如果我們將 `index.html` 移出 `projects`，並放在網站的根目錄中 (也就是在最上層中)，裡頭指向 `pdfs/project-brief.pdf` 的相對 URL 連結會指到 `http://www.example.com/pdfs/project-brief.pdf`，而非 `http://www.example.com/projects/pdfs/project-brief.pdf`。

當然，`project-brief.pdf` 和 `pdfs` 的位置不會因為你移動 `index.html` 就改變 — 這會使得你的連結指到錯誤的地方，你一定得非常小心！

連結的最佳實踐
-------

撰寫連結時有幾個最佳實踐方法，現在讓我們來看看吧。

### 使用明確的字詞

要在你的網頁上加入連結非常簡單，但這還不夠，我們必須確保連結能夠被所有讀者取用到，無論他們的背景或者使用的工具為何。比如說：

* 螢幕閱讀器的使用者會在頁面上的連結間跳來跳去，並且閱讀連結時不看上下文。
* 搜尋引擎使用連結上的文字來為目標建立索引，因此你可以將關鍵字包含在你的連結文字中，藉此有效地說明連結的對象。
* 以視覺進行閱讀的讀者對於內文往往匆匆一瞥，他們將注目在明顯的頁面特徵，像是連結，因此具有敘述性的連結文字將對他們有所助益。

我們來看幾個例子：

**好的**連結文字：下載 Firefox

```html
<p><a href="https://firefox.com/">下載 Firefox</a></p>
```

**不好的**連結文字：點這裡來下載 Firefox

```html
<p><a href="https://firefox.com/">點這裡</a>來下載 Firefox</p>
```

其它小訣竅：

* 千萬別把 URL 當作連結文字 — URL 看起來醜斃了，更別提當螢幕閱讀器將它逐字唸出時會有多糟。
* 千萬別用「連結(link)」或「連至(link to)」— 那只是廢話罷了。螢幕閱讀器會直接告訴使用者哪邊有連結；而具有視力的讀者可以直接看出連結，因為連結通常使用不同的顏色，並且設有底線 (一般不會打破這項慣例，因為大家都已經習以為常了)，所以也不用多提。
* 讓你的連結越短越好 — 太長的連結會使螢幕閱讀器的使用者蒙受其害，因為他們必須從頭聽到尾。
* 盡量讓連結的文字不一樣，太多重複的連結文字會帶給螢幕閱讀器的使用者麻煩，因為他們可能會從一個連結表中選擇連結，因此若有許多重複的「點這裡」會讓他們相當困惑。
### 盡可能使用相對連結

經過之前的說明，你可能會覺得無論如何都應該採用絕對連結，畢竟它們不會像相對連結一樣，因為頁面被搬移而失效。然而，對於相同網站內的連結，你應該盡量使用相對連結 (連到別的網站的連結必須使用絕對連結)，原因如下：

* 首先，由於相對 URL 通常比絕對 URL 來得短，因此使用它可以增進原始碼的可讀性。
* 第二，使用相對 URL 比較有效率。當你使用絕對 URL 時，瀏覽器會先查看 server 在域名系統(DNS，詳情請見網路是如何運作的) 上的真實位址，並再從那個位址開始尋找請求的檔案；如果我們使用相對 URL，瀏覽器就可以直接從那個 server 開始搜尋。因此，如果你在可以使用相對 URL 時而去使用絕對 URL，就會迫使你的瀏覽器不斷地進行額外的工作，進而降低效能。
### 要連到非 HTML 的資源時請先聲明

當連結連至一個需要下載的資源 (像是 PDF 或 Word 文件) 或是串流 (如影音串流) 或是其他有潛在未知影響的東西 (開啟彈出式視窗或者載入 Flash movie) 時，你應該要加上一些文字來預示，以下就是幾個非常惱人的情境：

* 假設你正處於低頻寬的連線，點擊連結之後，卻開始下載好幾 MB 的東西。
* 假設你沒有安裝 Flash player，點擊連結之後，卻進到一個需要 Flash 的頁面。

讓我們來看一些可以改善這些情況的方法：

```html
<p>
  <a href="http://www.example.com/large-report.pdf">
    下載銷售報告(PDF, 10MB)
  </a>
</p>

<p>
  <a href="http://www.example.com/video-stream/" target="\_blank">
    觀看影片(將在新分頁開啟串流，HD 畫質)
  </a>
</p>

<p><a href="http://www.example.com/car-game">遊玩賽車遊戲(需要 Flash) </a></p>
```

### 當連結會觸發下載時，使用下載屬性

當你連結一個需要下載的資源時，你可以使用 `download` 屬性來提供一個預設的儲存檔名。以下範例是最新版的 Windows 版 Firefox 的下載連結：

```html
<a
 href="https://download.mozilla.org/?product=firefox-latest-ssl&os=win64&lang=en-US"
 download="firefox-latest-64bit-installer.exe">
  下載Windows上的最新版Firefox (64-bit) (English, US)
</a>
```

不要只用看的：建立一個導覽選單
---------------

在這次練習中，我們想要你利用導覽列來將許多網頁連結在一起，創造出一個具有多個頁面的網站。這是一個很常見的網站建造方式 — 每一個網頁都使用同樣的網頁結構，其中包含相同的導覽選單，這樣子一來，當連結被點擊時，會讓人以為還留在原地，但內容卻倏忽更迭。

你需要先在一個目錄中建立下面這四個網頁的複本 (你可以在 navigation-menu-start 目錄下找到完整的清單)：

* index.html
* projects.html
* pictures.html
* social.html

接著，你可以這麼做：

1. 在指定的地方添加一個無序列表，裡面放著可以連到的網頁名稱。因為導覽選單其實就是一個連結的列表，所以這麼做在語義上沒什麼問題。
2. 把每一個網頁名稱變成超連結。
3. 把導覽選單複製到每一個頁面上。
4. 把每個網頁中，連到自己的連結移除，因為這種連結毫無意義且令人困惑，此外，無連結的文字可以用來提示使用者的所在位置。

完成後的範例應該會長這樣：

![An example of a simple HTML navigation menu, with home, pictures, projects, and social menu items](/zh-TW/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks/navigation-example.png)

**備註：** 如果你卡住了，或者不確定有沒有做對，你可以到 navigation-menu-marked-up 目錄來偷瞄答案。

E-mail 連結
---------

你可以建立一個連結或按鈕，使得它被點擊之後，開啟一個正在撰寫中的電子郵件訊息。這可以透過 `<a>` (en-US) 元素和 `mailto:` URL scheme 來達成。

多數情況 `mailto:` 會填入收信人的電子郵件地址。例如：

```html
<a href="mailto:nowhere@mozilla.org">Send email to nowhere</a>
```

它的結果會像是這樣：Send email to nowhere。

事實上，電子郵件地址是選填的。如果你將它留空 (也就是說，你的 `href` (en-US) 只寫了 "mailto:")，使用者的 mail client 會開啟一個寄信視窗，其中並沒有指定收信人，這在使用「分享」連結時非常有用，使用者可以自行決定要寄給誰。

### 指定細節

除了電子郵件地址之外，你還可以提供其他資訊，事實上，任何標準的郵件標頭欄位都能被加到 `mailto` URL 中，常見的有主旨(subject)、副本(cc)以及主體(body) (這個雖然不是真的標頭欄位，但能讓你放一條簡短的訊息在新郵件的主體中)。每個欄位與它的值被定義成一組查詢項(query term)。

下面是一個包含 cc、bcc(密件副本)、subject 和 body 的範例：

```html
<a
 href="mailto:nowhere@mozilla.org?cc=name2@rapidtables.com&bcc=name3@rapidtables.com&subject=The%20subject%20of%20the%20email&body=The%20body%20of%20the%20email">
  Send mail with cc, bcc, subject and body
</a>
```

**備註：** 每一個欄位的值必須以 URL 編碼，也就是將空白及不可印字元(不可見的字元如縮排(tabs)、回車(carriage return)、換頁(page breaks)等等)轉換成百分號編碼。也請注意這裡使用問號(`?`)來分隔主要 URL 和其他欄位；以 & 來分隔 `mailto:` URL 中的不同的欄位，這是標準的 URL 查詢記號(query notation)。你可以閱讀 GET 方法 (en-US)來得知有那些常用的查詢記號。

以下是 `mailto` URL 的其他例子：

* mailto:
* mailto:nowhere@mozilla.org
* mailto:nowhere@mozilla.org,nobody@mozilla.org
* mailto:nowhere@mozilla.org?cc=nobody@mozilla.org
* mailto:nowhere@mozilla.org?cc=nobody@mozilla.org&subject=This%20is%20the%20subject
小試身手！
-----

你已經讀完這個章節囉，但你有掌握箇中的重點嗎？你可以在繼續閱讀後面的章節之前，先進行一些測驗 — 請前往小試身手：超連結。 (en-US)

總結
--

總而言之，以上就是超連結的介紹了！ 稍後你在後續的課程中學到如何位連結增添樣式時，還會再碰到它們。HTML 的下一章，我們將繼續討論文字語義(text semantics)，並看一些進階／不常見的特性，相信你會獲益良多的 — 下一站是：進階文字格式化技巧！

* 前頁
* Overview: Introduction to HTML
* 次頁  (en-US)