3-3.md

3-3 HTML5元素

頁首、頁尾 {#yuan-jian}

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

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

導覽列

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

<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 %}

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

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

<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 %}

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

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

<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="..."設定為目前的值

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