> For the complete documentation index, see [llms.txt](https://htmltutorial.linwebs.tw/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://htmltutorial.linwebs.tw/3/3-3.md).

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