recursal/MDN huggingface dataset:
<head>
======

HTML 中的 **`<head>`** 元素包含有關文件的機器可讀信息（後設資料），例如 標題、腳本、樣式表 (en-US)。

**備註：**`<head>` 主要保存用於機器處理的訊息，而不是人類可讀的訊息。對於人類可見的訊息，例如頂級標題和列出的作者，請參見 `<header>` (en-US) 元素。

屬性
--

這個元件屬性含有全域屬性 (en-US)。

範例
--


```html
<!doctype html>
<html lang="en-US">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width" />
    <title>Document title</title>
  </head>
</html>
```

技術摘要
----

|  |  |
| --- | --- |
| 內容類型 | 無 |
| 允許內容 | 
 如果文件是一個 `<iframe>` (en-US)
`srcdoc` (en-US) 文件，或者如果標題信息來自於更高級的協議（像是 HTML 電子郵件的主題行），則應包含零個或多個元素的後設資料內容。

否則，必須包含一個或多個元素的後設資料內容，其中確實包括一個 `<title>` 元素。 |
| 標籤省略 | 
 如果
 `<head>` 元素內的第一個內容是一個元素，則開起標籤可以省略。如果跟在
 `<head>` 元素後面的第一個內容不是空格字符或註釋，則關閉標籤可以省略。
  |
| 允許的父元素 | 作為 `<html>` (en-US) 元素的第一個子元素。 |
| 允許的 ARIA 角色 | 沒有允許的 `role` |
| DOM 介面 | `HTMLHeadElement` (en-US) |

規範
--

| Specification |
| --- |
| HTML Standard # the-head-element |

瀏覽器相容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

參見
--

* 可以使用在 `<head>` 中的元素：
    + `<title>`
    + `<base>` (en-US)
    + `<link>` (en-US)
    + `<style>` (en-US)
    + `<meta>` (en-US)
    + `<script>`
    + `<noscript>`
    + `<template>`
<marquee>：捲動元素（已過時）
===================

**已棄用:** 不推薦使用此功能。雖可能有一些瀏覽器仍然支援它，但也許已自相關的網頁標準中移除、正準備移除、或僅為了維持相容性而保留。避免使用此功能，盡可能更新現有程式；請參考頁面底部的相容性表格來下決定。請注意：本功能可能隨時停止運作。

HTML `<marquee>` 元素用作插入一段文字的捲動區域。你可以透過屬性，控制文字在到達邊緣後的應對動作。

|  |  |
| --- | --- |
| DOM 介面 | `HTMLMarqueeElement` (en-US) |

屬性
--

`behavior`

設定文字如何在 marquee 內捲動。可用值為 `scroll`、`slide`、`alternate`。若無指定，預設值為 `scroll`。

`bgcolor`

透過色彩名或十六進位值指定背景顏色。

`direction`

設定 marquee 內的捲動方向。可用值為 `left`、`right`、`up`、`down`。若無指定，預設值為 `left`。

`height`

設定像素或百分比高度。

`hspace`

設定橫向外邊（horizontal margin）

`loop`

設定 marquee 捲動的次數。若無指定，預設值為 -1，意思是的 marquee 將持續捲動。

`scrollamount`

以像素為單位，設定捲動的間隔量。預設值為 6。

`scrolldelay`

設定每次捲動時之間間隔的毫秒。預設值為 85。請注意，除非指定了 `truespeed`，否則小於 60 的數字會被忽略，並值使用 60。

`truespeed`

`scrolldelay` 預設上會忽略低於 60 的值。但如果有 `truespeed` 的話，就不會忽略此值。

`vspace`

以像素或百分比值設置垂直邊距。

`width`

設置以像素或百分比值為單位的寬度。

事件處理器
-----

`onbounce`

marquee 滾動到結尾時觸發。只能在 behavior 屬性設置為 `alternate` 時觸發。

`onfinish`

marquee 完成 loop 屬性的設定值時觸發。只能在 loop 屬性設為大於 0 的數字時觸發。

`onstart`

marquee 開始捲動時觸發。

方法
--

start()

開始 marquee 的捲動

stop()

停止 marquee 的捲動

示例
--


```html
<marquee>This text will scroll from right to left</marquee>

<marquee direction="up">This text will scroll from bottom to top</marquee>

<marquee
 direction="down"
 width="250"
 height="200"
 behavior="alternate"
 style="border:solid">
  <marquee behavior="alternate">This text will bounce</marquee>
</marquee>
```

規範
--

| Specification |
| --- |
| HTML Standard # the-marquee-element-2 |

瀏覽器相容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

參見
--

* `HTMLMarqueeElement` (en-US)
<picture>: The Picture element
==============================

**HTML `<picture>` 元素** 包含了零或零以上個 `<source>` (en-US) 元素以及一個 `<img>` (en-US) 元素，以為不同顯示器/裝置提供同張圖片的不同版本。

瀏覽器將會考慮每個 `<source>` 元素，並且在其中選出最適當的選項。如果沒有找到最適當的選項——或是瀏覽器不支援 `<picture>` 元素——則 `<img>` 屬性的 URL 會被選擇。被選擇的圖片將會在 `<img>` 元素存在的位置顯示。

嘗試一下
----

為了決定載入哪一個 URL，user agent (en-US) 會檢視每一個 `<source>` 的 `srcset` (en-US)、`media` (en-US) 以及 `type` (en-US) 屬性，以選出最適合當前版面以及顯示裝置支援度的圖片。

`<img>` 有兩個作用：

1. 它描述了該圖片的尺寸等屬性以及呈現（presentation）。
2. 在所有列出的 `<source>` 都不能提供可用圖片的情況下的 fallback。

`<picture>` 的常見使用案例：

* **圖像方向（art direction）：** 根據不同的 `media` 狀況裁切或調整圖片（例如在較小的螢幕上，載入原本有複雜細節圖片的較簡單版本圖片）
* \*\*提供替代的圖片格式：\*\*以應對某些特定格式不被支援的情況
* \*\*節省頻寬並加速頁面載入速度：\*\*透過針對觀看者的裝置載入最適當的圖片做到這點

如果是要為高 DPI （Retina）螢幕提供圖片的高解析度版本時，可改在使用 `<img>` 上使用 `srcset` (en-US) 屬性。這會讓瀏覽器在 data-saving 模式選擇低解析度的版本，這樣你就不用特地指定 `media` 條件。

| Content categories | Flow content, phrasing content, embedded content |
| --- | --- |
| Permitted content | Zero or more `<source>` (en-US) elements, followed by one `<img>` (en-US) element, optionally intermixed with script-supporting elements. |
| Tag omission | None, both the starting and ending tag are mandatory. |
| Permitted parents | Any element that allows embedded content. |
| Implicit ARIA role | No corresponding role |
| Permitted ARIA roles | No `role` permitted |
| DOM interface | `HTMLPictureElement` (en-US) |

屬性
--

此元素只包含 global attributes (en-US).

用法筆記
----

你可以使用 `object-position` (en-US) 屬性來在元素的 frame 內調整圖片位置，也可以用 `object-fit` (en-US) 屬性控制圖片在 frame 內如何調整大小。

**備註：** 在子元素 `<img>` 上使用這些屬性，而不是 `<picture>` 元素.

範例
--

以下例子示範如何根據 `<source>` (en-US) 元素不同的屬性設定選擇 `<picture>` 中的不同圖片。

### media 屬性

`media` 屬性指定特定的媒體類型（跟 media query 很像），讓 user agent 可對每個 `<source>` (en-US) 元素作出判斷。

如果 `<source>` (en-US) 的指定媒體類型被判斷為 `false` ，則瀏覽器會跳過它，並繼續判斷 `<picture>` 中的下個元素。


```html
<picture>
  <source srcset="mdn-logo-wide.png" media="(min-width: 600px)" />
  <img src="mdn-logo-narrow.png" alt="MDN" />
</picture>
```

### srcset 屬性

`srcset` (en-US) 屬性用來提供根據大小區分的可能圖片清單。

它是由逗號分隔的圖片描述句清單組成的。每一個圖片描述句是由該圖片的 URL 以及以下描述組成（擇一）：

* 寬度，結尾為 `w` (例如 `300w`)；
 *或是*
* 像素密度，結尾為 `x` (例如 `2x`)，以為高 DPI 螢幕提供高解析度圖片


```html
<picture>
  <source srcset="logo-768.png 768w, logo-768-1.5x.png 1.5x" />
  <source srcset="logo-480.png, logo-480-2x.png 2x" />
  <img src="logo-320.png" alt="logo" />
</picture>
```

### type 屬性

`type` 屬性為 `<source>` (en-US) 元素中 `srcset` 屬性的資源 URL 指定 MIME type (en-US) 。如果 user agent 不支援該 type 的話，此 `<source>` (en-US) 元素會被略過。


```html
<picture>
  <source srcset="logo.webp" type="image/webp" />
  <img src="logo.png" alt="logo" />
</picture>
```

規格
--

| Specification |
| --- |
| HTML Standard # the-picture-element |

瀏覽器支援度
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

相關資源
----

* `<img>` (en-US) 元素
* `<source>` (en-US) 元素
* 在圖片的 frame 中調整其大小與位置： `object-position` (en-US) and `object-fit` (en-US)
* 圖片檔案類型與格式指南 (en-US)
<br>（斷行元素）
==========

**HTML `<br>` 元素**會產生文字的斷行（carriage-return、CR 或是確認鍵）。此元素主要用於斷行有所意義的時候，像是寫詩或寫住址。

嘗試一下
----

如上所示，`<br>` 元素會在需要斷行的時候出現。在 `<br>` 之後的文字會從文字區域的下一行出現。

**備註：** 不要用 `<br>` 建立段落間距：這種情況下要用 `<p>` (en-US) 把它們包起來，並使用 CSS `margin` (en-US) 屬性控制間距大小。

屬性
--

這個元件屬性含有全域屬性 (en-US)。

### 棄用屬性

`clear`

指示中斷後下一行的開始位置。

使用 CSS 樣式化
----------

`<br>` 元素有一個定義明確的用途：在文字區塊裡面建立斷行。因此它本身沒有尺寸或視覺輸出，基本上你做不了任何樣式化。

你可以給 `<br>` 元素設置 `margin` (en-US) 以增加文字之間的斷行大小，但這並不是正確的作法：你應該用 `line-height` (en-US) 屬性做這件事情。

示例
--


```html
Mozilla Foundation<br />
1981 Landings Drive<br />
Building K<br />
Mountain View, CA 94043-0801<br />
USA
```


以上 HTML 將顯示

無障礙議題
-----

使用 `<br>` 元素*分段*不只作法不佳，對於使用輔具的人來說，也會是有問題的。螢幕閱讀器會念出該元素，但 `<br>` 裡面的內容是念不出來的。對於使用螢幕閱讀器的人來說，這可能是困惑與沮喪的體驗。

請使用 `<p>` 元素搭配 CSS 屬性如 `margin` (en-US) 來控制間距大小。

技術摘要
----

| 內容類型 (en-US) | 流型內容 (en-US)、段落型內容 (en-US)。 |
| --- | --- |
| 允許內容 | 無，這是個空元素. |
| 標籤省略 | 絕對要有開啟標籤，也絕不能關閉標籤。在 XHTML 文件內，要把這個元素寫成 `<br />`. |
| 允許父元素 | 任何接受段落型內容 (en-US)的元素 |
| 允許的 ARIA roles | 所有 |
| DOM 介面 | `HTMLBRElement` (en-US) |

規範
--

| Specification |
| --- |
| HTML Standard # the-br-element |

瀏覽器相容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

參見
--

* `<address>` (en-US) 元素
* `<p>` (en-US) 元素
* `<wbr>` (en-US) 元素
<font>
======

**已棄用:** 不推薦使用此功能。雖可能有一些瀏覽器仍然支援它，但也許已自相關的網頁標準中移除、正準備移除、或僅為了維持相容性而保留。避免使用此功能，盡可能更新現有程式；請參考頁面底部的相容性表格來下決定。請注意：本功能可能隨時停止運作。

概要
--

*HTML Font 元素*（`<font>`）定義了該內容的字體大小、顏色與表現。

**備註：** 不要使用這個元素！儘管它在 HTML 3.2 規範化，但在 HTML 4.01，因為該元件只有裝飾用途的理由而遭棄用，接著在 HTML5 廢棄。從 HTML 4 開始，HTML 不能在 `<style>` (en-US) 元素，或各元素 **style** 屬性以外，表現任何樣式資訊。今後的網頁開發，樣式化要用 CSS。`<font>` 元素的行為，能透過 CSS 屬性實現，也更好控制。

屬性
--

如同其他 HTML 元素，這個元素支援全域屬性 (en-US)。

`color`

這個屬性可以藉由顏色名字或是十六進位的 #RRGGBB 格式，來配置文字的顏色。

`face`

這個屬性列出了一個或多個逗號分隔的字體名稱。 The document text in the default style is rendered in the first font face that the client's browser supports. 如果在用戶端的系統並沒有安裝這個字體，瀏覽器會在該系統使用預設的 proportional 或是 fixed-width 字體。

`size`

這個屬性藉由數字或相對值指定文字大小。數字是由最小的 `1` 到最大的 `7` 之間，且預設為 `3` 的數值表示。也可以用諸如 `+2` 或 `-3` 的相對值指定, which set it relative to the value of the `size` (en-US) attribute of the `<basefont>` (en-US) element, or relative to 3, the default value, if none does exist.

DOM 介面
------

這個元素 implements `HTMLFontElement` (en-US) 介面。

瀏覽器相容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
<frameset>
==========

**已棄用:** 不推薦使用此功能。雖可能有一些瀏覽器仍然支援它，但也許已自相關的網頁標準中移除、正準備移除、或僅為了維持相容性而保留。避免使用此功能，盡可能更新現有程式；請參考頁面底部的相容性表格來下決定。請注意：本功能可能隨時停止運作。

概要
--

`<frameset>` 是用以包含 `<frame>` (en-US) 元素的元素。

**備註：** 因為使用框架的推薦是 `<iframe>` (en-US)，這個元素一般不會在現在的網站出現。

屬性
--

如同其他 HTML 元素，這個元素支持全域屬性。

`cols`

這個屬性指定了橫向框架的數量和尺寸。

`rows`

這個屬性指定了直向框架的數量和尺寸。

範例
--


```html
<frameset cols="50%,50%">
  <frame src="https://developer.mozilla.org/en/HTML/Element/frameset" />
  <frame src="https://developer.mozilla.org/en/HTML/Element/frame" />
</frameset>
```

參見
--

* `<frame>` (en-US)
* `<iframe>` (en-US)
<hr>
====

**HTML** 的\*\* `<hr>` 元素\*\*代表在段落層級的焦點轉換（如故事中的場景轉換或某個小節裡的主題移轉）。在之前的 HTML 版本，它代表著一條水平標線。在視覺瀏覽器裡，它現在可能還是以水平標線的型式呈現；但它已經被重新定義為一個語義上的用詞，而不是呈現上的。

| 內容類型 (en-US) | 流內容 (en-US). |
| --- | --- |
| Permitted content | 否。這是個 empty element. |
| 標籤省略 | 一定要有起始標籤、同時絕不能有結束標籤 |
| Permitted parent elements | 任何允許流內容 (en-US)的元素。 |
| DOM interface | `HTMLHRElement` (en-US) |

屬性
--

這個元素支持全域屬性 (en-US)。

`align` 
已棄用

設罝頁面上標線的對齊方式。如果沒有指定，預設值是：`left。`

`color` 
非標準

用色彩名或 16 進位值設罝標線的顏色。

`noshade` 
已棄用

設置這個標線沒有陰影。

`size` 
已棄用

設置標線的高度，單位是 px。.

`width` 
已棄用

設置標線的長度，單位是 px；或者也可以用頁面寛度的百分比 (%)表示。

範例
--


```html
<p>
  This is the first paragraph of text. This is the first paragraph of text. This
  is the first paragraph of text. This is the first paragraph of text.
</p>

<hr />

<p>
  This is second paragraph of text. This is second paragraph of text. This is
  second paragraph of text. This is second paragraph of text.
</p>
```


上面的 HTML 會輸出：

This is the first paragraph of text. This is the first paragraph of text. This is the first paragraph of text. This is the first paragraph of text.

---

This is second paragraph of text. This is second paragraph of text. This is second paragraph of text. This is second paragraph of text.

規範
--

| Specification |
| --- |
| HTML Standard # the-hr-element |

瀏覽器相容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

參照 （see also)
-------------

* `<p>` (en-US)
<time>
======

**HTML `<time>` element** 用以表示時間，可以是 24 小時制時間或以公曆紀年的日期（日期可以添加時間和時區的資訊）

此 element 旨在以機器可讀的格式顯示時間。這能幫助使用者代理調度使用者的日期。

**備註：** 此 element 不適合用在「不確定正確時間」和「時間為西元前（日期的計算會出現錯誤）」的情況。


| 內容分類 | Flow content, phrasing content (en-US), palpable content. |
| --- | --- |
| 允許之內容 | Phrasing content (en-US). |
| 省略標籤 | 不可。起始標籤和結束標籤是強制必要的 |
| 可接受的副 elements | 任何接受 phrasing content 的 element。 |
| DOM interface | `HTMLTimeElement` (en-US) |

Attributes
----------

和其他 HTML elements 一樣，接受所有 global attributes (en-US)。

`datetime`

此 attribute 用以表示日期或時間，其格式必須是有效的日期/時間格式。若其值不正確，則 element 就不會有關連的 time stamp.

示例
--

### Simple example

#### HTML


```html
<p>The concert starts at <time>20:00</time>.</p>
```


#### Output

### `datetime` example

#### HTML


```html
<p>
  The concert took place on <time datetime="2001-05-15T19:00">May 15</time>.
</p>
```


#### Output

規格
--

| Specification |
| --- |
| HTML Standard # the-time-element |

瀏覽器支援度
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

延伸閱讀
----

* The `<data>` (en-US) element, allowing to signal other kind of values.
<template>
==========

**HTML `<template>` 元素**是用作保存用戶端內容的機制。該內容在頁面載入時不受渲染，但可以在運行時使用 JavaScript 實例化。

你可以把 template 想成文件裡面，被儲存以待稍後使用的內容片段。在頁面載入時，解析器雖然會處理 `<template>` 元件的內容，但元素本身並不會被渲染。

| 內容類型 | 元內容、流內容、phrasing content、支援腳本的元素 |
| --- | --- |
| 允許內容 | 沒有限制 |
| 標籤省略 | None, both the starting and ending tag are mandatory. |
| 允許的父元素 | `<body>` (en-US), `<frameset>`, `<head>`, `<dl>` (en-US) and `<colgroup>` (en-US) without a `span` attribute |
| 允許的 ARIA roles | 無 |
| DOM 介面 | `HTMLTemplateElement` (en-US) |

屬性
--

本元素只允許全域屬性 (en-US)。

示例
--

我們先從 HTML 部分開始。


```html
<table id="producttable">
  <thead>
    <tr>
      <td>UPC_Code</td>
      <td>Product_Name</td>
    </tr>
  </thead>
  <tbody>
    <!-- 在這裡可以選擇性地包括既有資料 -->
  </tbody>
</table>

<template id="productrow">
  <tr>
    <td class="record"></td>
    <td></td>
  </tr>
</template>
```


首先，我們有個稍後將透過 JavaScript 插入的表格。接著，我們把重點轉移到描述 HTML 內容模板結構的 template：它意味著一個表格的行。

現在表格已經建立、也定義了模板，所以我們將以 template 為基礎，用 JavaScript 把每個產生出來的行加到表格內。


```js
// 透過檢查 HTML template 元素屬性的存在與否，以測試瀏覽器是否支援它
if ("content" in document.createElement("template")) {
  // 使用現有 HTML tbody、行以及模板，來實例化表格
  var t = document.querySelector("#productrow"),
    td = t.content.querySelectorAll("td");
  td[0].textContent = "1235646565";
  td[1].textContent = "Stuff";

  // 複製新的行並將其插至表格
  var tb = document.querySelector("tbody");
  var clone = document.importNode(t.content, true);
  tb.appendChild(clone);

  // 複製新的行
  td[0].textContent = "0384928528";
  td[1].textContent = "Acme Kidney Beans";

  // 複製新的行並將其插至表格
  var clone2 = document.importNode(t.content, true);
  tb.appendChild(clone2);
} else {
  // 因為 HTML template 不被支援，所以要用其他方法在表格增加新行
}
```


結果會變成原生的 HTML 表格，它透過 JavaScript 產生了兩個新行：
```

table {
  background: #000;
}
table td {
  background: #fff;
}
```

規範
--

| Specification |
| --- |
| HTML Standard # the-template-element |

瀏覽器相容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

參閱
--

* Web component：`<slot>` (en-US)（還有過往的`<shadow>`）
<noscript>
==========

HTML **`<noscript>`** 元素定義了一個 HTML 區塊，如果網頁上的腳本類型不支援或瀏覽器當前已關閉腳本，則將插入該區塊。

|  |  |
| --- | --- |
| 內容類型 | 後設資料內容,
 流內容,
 段落型內容。
  |
| 允許內容 | 
 當腳本被禁用時，並且該元素是
 `<head>` 元素的子元素時：可以包括零個或多個
 `<link>` (en-US) 元素、零個或多個
 `<style>` (en-US) 元素，以及零個或多個
 `<meta>` (en-US) 元素，它們的順序可以是任意的。當腳本被禁用時，並且該元素不是
 `<head>` 元素的後代時：可以包括任何
 透明內容，但不得包含 `<noscript>` 元素在其後代中。否則：可以包括流內容或段落型內
  |
| 標籤省略 | None, both the starting and ending tag are mandatory. |
| 允許的父元素 | 如果不存在祖元素 `<noscript>`，或者在 `<head>` 元素中（但僅適用於 HTML 文件），同樣如果不存在 `<noscript>` 祖元素，則接受任何段落型內容的元素。 |
| 隱含的 ARIA 角色 | 沒有對應的角色 |
| 允許的 ARIA 角色 | 沒有允許的 `role` |
| DOM 介面 | `HTMLElement` (en-US) |

屬性
--

這個元素屬性含有全域屬性 (en-US)。

範例
--


```html
<noscript>
  <!-- anchor linking to external file -->
  <a href="https://www.mozilla.org/">External Link</a>
</noscript>
<p>Rocks!</p>
```

### 腳本成功執行的結果

Rocks!

### 腳本執行失敗的成果

External Link

Rocks!

規範
--

| Specification |
| --- |
| HTML Standard # the-noscript-element |

瀏覽器相容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
<title>
=======

HTML **`<title>`** 元素定義了顯示在瀏覽器標題欄或頁面標籤上的文件標題。它僅包含文本，元素內的標籤會被忽略。


```html
<title>Grandma's Heavy Metal Festival Journal</title>
```


|  |  |
| --- | --- |
| 內容類型 | 後設資料內容。 |
| 允許內容 | 不包含元素間whitespace (en-US)的文字。 |
| 標籤省略 | 開起標籤和關閉標籤都是必需的。請注意，如果省略 `</title>` 標籤，瀏覽器將忽略頁面的其餘內容。 |
| 允許的父元素 | 不包含其他 `<title>` 元素的 `<head>` 元素。 |
| 隱含的 ARIA 角色 | 沒有對應的角色 |
| 允許的 ARIA 角色 | 沒有允許的 `role` |
| DOM 介面 | `HTMLTitleElement` (en-US) |

屬性
--

這個元件屬性含有全域屬性 (en-US)。

使用筆記
----

`<title>` 元素始終用於網頁的 `<head>` 區塊中。

### 網頁標題與 SEO

網頁標題的內容對搜索引擎優化（SEO）可能會有重要的影響。一般來說，長而具描述性的標題比簡短或通用的標題效果更好。標題的內容是搜索引擎算法用來決定在搜索結果中列出網頁的順序的元素之一。此外，標題是吸引讀者注意力的第一個「鉤子」，用來吸引他們瀏覽搜索結果頁面。

以下是一些撰寫好的標題的指南和建議：

* 避免使用單個詞或兩個詞的標題。使用一個具有描述性的短語，或者在詞彙表或參考頁面中使用詞語和定義的配對。
* 搜索引擎通常會顯示頁面標題的前55-60個字符。超出這個範圍的文本可能會被截斷，因此盡量不要使用超過這個長度的標題。如果必須使用較長的標題，請確保重要的部分位於前面，並且不要讓關鍵內容出現在可能被截斷的部分。
* 不要使用「關鍵詞堆疊」。如果標題只是一個詞語列表，算法通常會導致網頁在搜索結果中的排名下降。
* 盡量確保標題在網站內是獨一無二的。重複或幾乎重複的標題可能導致不準確的搜索結果。
範例
--


```html
<title>Awesome interesting stuff</title>
```


這個範例建立了一個網頁，其標題（顯示在視窗頂部或視窗標籤中）為「Awesome interesting stuff」。

無障礙議題
-----

提供準確且簡潔的標題來描述網頁的用途非常重要。

對於輔助技術使用者來說，一種常見的導航技巧是閱讀網頁標題，然後推測網頁包含的內容。這是因為進入網頁以確定其內容可能是一個耗時且可能令人困惑的過程。網站的每個頁面標題都應該是獨一無二的，最好首先顯示頁面的主要目的，然後是網站的名稱。遵循這種模式將有助於確保螢幕閱讀器首先宣佈網頁的主要目的。這比讓使用者在訪問同一個網站的每個頁面時先聽到網站名稱然後才是獨特的頁面標題，提供了更好的使用體驗。

### 範例


```html
<title>Menu - Blue House Chinese Food - FoodYum: Online takeout today!</title>
```


如果表單提交包含錯誤並且提交導致當前頁面重新呈現，則可以使用標題來幫助用戶了解其提交中的任何錯誤。例如，更新頁面`title`的值以反映重要的頁面狀態變化（像是表單驗證問題）。


```html
<title>
  2 errors - Your order - Sea Food Store - Food: Online takeout today!
</title>
```


**備註：** 目前，動態更新頁面標題不會被螢幕閱讀器自動宣佈。如果要更新頁面標題以反映頁面狀態的重大變化，則可能需要使用 ARIA Live Region (en-US)。

* MDN Understanding WCAG, Guideline 2.4 explanations (en-US)
* Understanding Success Criterion 2.4.2 | W3C Understanding WCAG 2.1
規範
--

| Specification |
| --- |
| HTML Standard # the-title-element |

瀏覽器相容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

參見
--

* SVG `<title>` (en-US) 元素
<canvas>
========

這個 **HTML `<canvas>` 元素** 可以被使用於對腳本程式(JaveScript) 繪圖 .舉例來說, 它能用來畫圖,組合照片,甚至作動畫. 你也許(應該) 在<canvas>區段內提供替代方案的內容 .這內容將能被一些不支援<canvas>以及無法使用 Javescript 功能的瀏覽器所渲染 .

更多文章關於 canvas, 請參考 canvas 主題

| Content 分類 (en-US) | 流程式 content (en-US), 段落式 content (en-US), 強調式 content (en-US), 可見式 content. |
| --- | --- |
| 被允許通過的內容 | 除了子元素不是 <a>的元素、 <button>的元素、<input>的元素屬性是`checkbox`, `radio`, 或 `button` 之外且是透明內容模型但不是互動式 content (en-US) |
| Tag 省略 | 不能省略標籤<canvas> |
| 被允許通過的父親元素 | 任何強調式 content (en-US)的元素皆可通過 |
| DOM 介面 | HTMLCanvasElement |

屬性
--

這個元素的屬性包含全域屬性

`height`

在 CSS 中以 pixels 表示 座標的空間**高度**（預設是 150）

`moz-opaque` 
非標準

讓 canvas 知道這個因素是否為半透明的。如果 canvas 知道不是半透明，則提高繪畫的效能

`width`

在 CSS 中以 pixels 表示 座標的空間**寬度**（預設是 300）

描述
--

### 需要 `</canvas>` 結尾

與<img>不同之處,`<canvas>`需要`</canvas>` 結尾

### canvas 的大小設置

canvas 的大小設置可透過樣式表（stylesheet）被改變。可經由樣式修改圖像的縮放大小。

若呈現的效果圖似乎是扭曲變形的，可試著先修改`<canvas>`標籤中的`width`和`height`的屬性，而**不建議**使用 css 去控制。

範例
--

將下面這條範例加到你的 HTML 文件。如果你的瀏覽器並不支援 canvas 或不能讀取 canvas 時，則會回報 canvas 中的訊息。若想知道更多有用的回應訊息或替代 DOM 的註文，可以參考更多相似的註文。


```html
<canvas id="canvas" width="300" height="300">
  抱歉，你的瀏覽器並不支援 canvas 元素</canvas
>
```


如果你的 canvas 沒有使用透明度，可在<canvas>標籤設立`moz-opaque`屬性，提升它的繪圖效果。`moz-opaque` 尚未標準化，所以只適用在 Mozilla 的 效能引擎。


```html
<canvas id="mycanvas" moz-opaque></canvas>
```

規範
--

| Specification |
| --- |
| HTML Standard # the-canvas-element |

瀏覽器相容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

延伸閱讀
----

* MDN canvas portal
* Canvas tutorial
* Canvas cheat sheet
* Canvas-related demos
* Canvas introduction by Apple
<nav>
=====

**HTML <nav> 元素**代表一個網頁中提供導航欄連結的區域，不管是當前網頁或者其他網頁，還是這個連結最終抵達的只是當前網頁的某個區塊，或者會抵達其他網頁，常見的導航欄範例有菜單、內容的表單，以及頁面本身。

| Content categories (en-US) | 流內容 (en-US)、sectioning content (en-US)、palpable content. |
| --- | --- |
| 允許內容 | 流內容 (en-US)。 |
| 省略標籤 | None, both the starting and ending tag are mandatory. |
| Permitted parents | Any element that accepts flow content (en-US). |
| Permitted ARIA roles | None |
| DOM interface | `HTMLElement` (en-US) |

屬性
--

此元素只有全域屬性 (en-US)。

使用筆記
----

* 不是所有的文件連結都需要在 `<nav>` 元素裡面，它僅適用於主要的導航鏈接塊。一般來說 `<footer>` (en-US) 元素常常有一個不需要在 `<nav>` 元素裡面的的鏈接列表。
* 文件可以有很多個 `<nav>` 元素。例如說，一個用做網站導覽、另一個用做頁內導覽。
* 面向身障用戶的螢幕閱讀器的用戶代理（User agent），可以決定要不要在初始渲染時省略這個元素的內容。
範例
--

在這個範例，`<nav>` 區塊用於包含連結的無序清單 (`<ul>` (en-US))。透過合適的 CSS，它能夠顯示為 sidebar、導覽列、以及下拉式選單。


```html
<nav class="menu">
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>
```

規範
--

| Specification |
| --- |
| HTML Standard # the-nav-element |

瀏覽器相容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

參見
--

* Other section-related elements: `<body>` (en-US), `<article>` (en-US), `<section>` (en-US), `<aside>` (en-US), `<h1>` (en-US), `<h2>` (en-US), `<h3>` (en-US), `<h4>` (en-US), `<h5>` (en-US), `<h6>` (en-US), `<hgroup>` (en-US), `<header>` (en-US), `<footer>` (en-US), `<address>` (en-US);
* Sections and outlines of an HTML5 document.
<div>
=====

**HTML `<div>` 元素**（或是 *HTML 文件區塊元素*）是本質上不特別代表任何東西的通用内容流容器。它可以成為樣式化用途（使用 **class** 或 **id** 屬性）、或是共享如 **lang** 同一個屬性的元素集合。它應該在沒有其他適合的語義元素（例如`<article>` (en-US) 或 `<nav>` ）可用時才用。

| 內容類型 | 流內容、捫及內容。 |
| --- | --- |
| 允許內容 | 流內容 |
| Tag 省略 | None, both the starting and ending tag are mandatory. |
| 允許父元素 | 任何允許內容流的元素。 |
| DOM 介面 | `HTMLDivElement` (en-US) |

屬性
--

這個元素包含全域屬性 (en-US)。

**align** 元素已過時，不要使用它。

範例
--


```html
<div>
  <p>這裡可以是任何內容，例如 &lt;p&gt;、&lt;table&gt;。你說了算！</p>
</div>
```

### 結果

這裡可以是任何內容，例如 <p>、<table>。你說了算！

規範
--

| Specification |
| --- |
| HTML Standard # the-div-element |

瀏覽器相容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

詳閱
--

* 語義化的切片元素：`<section>` (en-US), `<article>` (en-US), `<nav>`, `<header>` (en-US), `<footer>` (en-US)
* 針對段落式內容樣式化的 `<span>` (en-US) 元素
<blockquote>
============

摘要
--

**HTML `<blockquote>` 元素**（*HTML 區塊引言元素*）定義一段文字屬於引用。通常，這元素會透過縮排來呈現（要知道如何改變，請參考備註）。引言的 URL 來源可透過 **cite** 屬性賦予，而來源的文本形式可以使用 `<cite>` (en-US) 元素。

| 內容類別 (en-US) | 流內容 (en-US)、sectioning root、捫及內容。 |
| --- | --- |
| 允許內容 | 內容流 (en-US). |
| Tag 省略 | None, both the starting and ending tag are mandatory. |
| 允許父元素 | 任何允許內容流 (en-US)的元素 |
| DOM 介面 | `HTMLQuoteElement` (en-US) |

屬性
--

這個屬性包含全局屬性 (en-US)。

`cite`

一個指向被引用的原始文件或訊息的 URL 。這個屬性預期要指引到解釋內容的資訊，或是引言的援引。

範例
--


```html
<blockquote cite="http://developer.mozilla.org">
  <p>這是取自於 Mozilla Developer Center 的引言。</p>
</blockquote>
```


以上的 HTML 原始碼會輸出：

規範
--

| Specification |
| --- |
| HTML Standard # the-blockquote-element |

瀏覽器相容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

備註
--

要改變`<blockquote>`的縮進，請使用 CSS 的 `margin` (en-US) 屬性。

針對短篇引文請使用 `<q>` 元素。

延伸閱讀
----

* `<q>` 元素：用以表示單行的引用內容。
* `<cite>` (en-US) 元素：用以表示引用來源。
<q>
===

*HTML 引文元素* (**<q>**) 指示一段元素內的文字，屬於行內引文。這個元素適用於不須換行的短引文，針對長引文，請使用 `<blockquote>` 元素。

| 內容類別 (en-US) | 流內容 (en-US)、段落式內容 (en-US)、捫及內容。 |
| --- | --- |
| 允許內容 | 段落式內容 (en-US) |
| 標籤省略 | None, both the starting and ending tag are mandatory. |
| 允許父元素 | 任何允許段落式內容 (en-US)的元素 |
| DOM 介面 | `HTMLQuoteElement` (en-US) |

**備註：** 多數現代標準瀏覽器，如 Mozilla Firefox, Opera, Safari 會在 `<q>` 元素周圍添加引號；但有些瀏覽器（如 Internet Explorer）可能不會針對引用添加任何樣式，不過這些都可以透過樣式規則套用。

屬性
--

這個元素包含 全域屬性 (en-US)。

`cite`

這個屬性值為可以指定引用文件、或信息來源的 URL。這個屬性預期導向信息說明的上下文、或是引文參照。

範例
--

### HTML 內容


```html
<p>
  每當阿尼掛掉的時候，屎蛋會說：
  <q
 cite="https://zh.wikipedia.org/zh-tw/%E8%82%AF%E5%B0%BC%C2%B7%E9%BA%A6%E5%85%8B%E5%BA%B7%E7%B1%B3%E5%85%8B">
    我的天啊！阿尼他被掛掉了！ </q
 >.
</p>
```

規範
--

| Specification |
| --- |
| HTML Standard # the-q-element |

瀏覽器相容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

參閱
--

* 針對長引文的 `<blockquote>` 元素
* 針對引用來源的 `<cite>` (en-US) 元素
<code>
======

*HTML Code 元素*（**<code>**）表現出電腦程式碼的片段。通常，它會由瀏覽器預設的 monospace 字體顯示出來。

| 內容分類 (en-US) | 流內容 (en-US)、段落式内容 (en-US)、捫及內容 |
| --- | --- |
| 允許內容 | 段落式内容 (en-US). |
| 標籤省略 | None, both the starting and ending tag are mandatory. |
| 允許父元素 | 任何允許段落式内容 (en-US)的元素。 |
| DOM 介面 | `HTMLElement` (en-US)。Gecko 1.9.2 (Firefox 4) 以前，Firefox 針對這個元素使用 `HTMLSpanElement` (en-US) 介面實做。 |

屬性
--

這個元素只支援全域屬性 (en-US)。

例子
--


```html
<p>Regular text. <code>This is code.</code> Regular text.</p>
```

### 結果

Regular text. `This is code.` Regular text.

註記
--

CSS 的 `code` 選擇器設定可以透過蓋過瀏覽器預設，而用戶個人設定可以蓋過 CSS 設定。

規範
--

| Specification |
| --- |
| HTML Standard # the-code-element |

瀏覽器相容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* `<samp>` (en-US)
* `<kbd>` (en-US)
* `<command>` (deprecated)
* `<var>` (en-US)