# 3-3 HTML5元素

#### 頁首、頁尾 <a href="#yuan-jian" id="yuan-jian"></a>

> 使用`<header>`來當作頁首，`<footer>`來當作頁尾

```markup
<header>
    頁首
</header>
…
<footer>
    頁尾
</footer>
```

#### 導覽列

> 使用`<nav>`來當作導覽列，內部放置網頁選單

```markup
<nav>
    <ul>
        <li><a href="https://linwebs.tw/">Linwebs | 林林.台灣</a></li>
        <li><a href="https://htmltutorial.linwebs.tw">HTML 網頁教學</a></li>
    </ul>
</nav>
```

#### 音訊

> 使用`<audio>`來音訊播放器，先前未使用HTML5時，播放聲音及影片皆須使用外掛程式播放，多為使用Flash播放器，由於使用者端需安裝對應軟體才可播放，降低許多使用者瀏覽的意願，HTML5內件音訊及影片播放功能，可免安裝外掛程式，直接由瀏覽器播放，各瀏覽器支援的音訊、影片檔案相容格式不盡相同，播放器頁面也不進相同，可參考下方表格，src指定檔案路徑，controls為顯示播放器選項

{% hint style="info" %}
若瀏覽器不支援 HTML5播放器就會顯示`<audio>`標籤中的文字
{% endhint %}

```markup
<audio src="linwebs.wav" controls>
    您的瀏覽器不支援此HTML5播放器
</audio>
```

若格式不支援，會切換為另一種格式，autoplay為自動播放，loop為重複播放

```markup
<audio controls autoplay loop>
    <source src="linwebs.wav" type="audio/wav">
    <source src="linwebs.ogg" type="audio/ogg">
    <source src="linwebs.mp3" type="audio/mpeg">
</audio>
```

HTML5音訊各瀏覽器版本支援度

|         | chrome | IE  | FireFox | Safari | Opera |
| ------- | ------ | --- | ------- | ------ | ----- |
| Support | 4.0    | 9.0 | 3.5     | 4.0    | 10.5  |
| MP3     | ✓      | ✓   | ✓       | ✓      | ✓     |
| Wav     | ✓      | ✕   | ✓       | ✓      | ✓     |
| Ogg     | ✓      | ✓   | ✓       | ✕      | ✓     |

#### 影片

> 使用方法與`<audio>`方式相似，可使用`width="..."`指定高度 、`height="..."`指定高度，可使百分比%或像素px為單位

{% hint style="info" %}
若瀏覽器不支援 HTML5播放器就會顯示`<video>`標籤中的文字
{% endhint %}

```markup
<video src="linwebs.mp4" width="320" height="240" controls>
    您的瀏覽器不支援此HTML5播放器
</video>
```

若格式不支援，會自動切換為另一種格式

```markup
<video width="320" height="240" controls>
    <source src="linwebs.webm" type="audio/webm">
    <source src="linwebs.ogg" type="audio/ogg">
    <source src="linwebs.mp4" type="audio/mpeg">
</video>
```

HTML5音訊各瀏覽器版本支援度

|         | chrome | IE  | FireFox | Safari | Opera   |
| ------- | ------ | --- | ------- | ------ | ------- |
| Support | 4.0    | 9.0 | 3.5     | 4.0    | 10.5    |
| MP4     | ✓      | ✓   | ✓       | ✓      | ✓(V.25) |
| WebM    | ✓      | ✕   | ✓       | ✕      | ✓       |
| Ogg     | ✓      | ✕   | ✓       | ✕      | ✓       |

#### 進度條

> 使用`<progress>`來製作進度條，常用於載入畫面，使用`max="..."`設定最大值，`value="..."`設定為目前的值

```markup
<progress max="100" value="60"> </progress>
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://htmltutorial.linwebs.tw/3/3-3.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.