1:HTML5<video>標籤使用範例

多媒體元素是這次 HTML5 新增的內容中最受矚目的，因為不需要安裝額外 個 HTML5 還在發展中，導致多媒體內容以及瀏覽器的格式支援有限。<canvas>

<video width="320" height="240" controls="controls">

<source src="movie.ogg" type="video/ogg">

<source src="movie.mp4" type="video/mp4">

Your browser does not support the video tag.

</video>

標籤則是用來定義圖形，透過 JavaScript 來控制整個圖像的繪製，是一個繪圖功 能很強大的標籤。

表 2-2 為 HTML5 影片播放所支援的格式以及各主流瀏覽器支援的情況[16]，

其中 MP4 格式也是目前許多市面上熱門的智慧型手機錄影的格式。MP4 格式在 瀏覽器的支援上也很良好，iOS 所用的 Safari、Android 所用的 Chrome 以及個人 電腦普遍使用的 IE 都有支援，因此本系統非常適合經常使用手機拍攝影片並上 傳的使用者。

表 2-2 HTML5 影片播放支援的格式

格式 IE Firefox Opera Chrome Safari

Ogg NO 3.5+ 10.5+ 5.0+ NO MP4 9.0+ NO NO 5.0+ 3.0+

WebM NO 4.0+ 10.6+ 6.0+ NO 2. 表單元素

HTML5 增加了三個新的表單元素，分別是<datalist>、<keygen>、<output>，

<datalist>定義了選項列表，與 <input >標籤配合使用後能夠定義 input 欄位可能 的值。<keygen>是提供一種驗證使用者的可靠方法。<keygen>標籤主要是一種

key-pair generator，當使用者提交表單的時候，會產生兩種 key，分別是 private key:

儲存於 client 端，public key:被傳送至 server 端，public key 可用於之後驗證使用 者的 client certificate。<output>標籤是用於不同類型的輸出，例如計算結果或者

是函式的輸出。

3. 標記元素

這類型的標籤主要是讓整個網頁的架構能夠更完整，對網頁設計人員來說，

可讀性也會更高。例如<article>呈現的是一個獨立的內容，可以是文章、評論等 等。<section>呈現的則是一個區塊，像是文章中的一個章節，<footer>則是呈現 頁腳，內容包含作者姓名、日期、相關訊息等等。

表 2-3 HTML5 新增標籤列表

標籤 說明

<article> 定義獨立的內容(例如外部文章、評論)

<aside> 定義其所處內容之外的內容， <aside>中內容應與所處內容相關

<audio> 定義及播放聲音檔

<canvas> 定義圖形，例如圖表和其他繪圖內容

<command> 定義命令按鈕，比如單選或是複選按鈕

<datalist> 定義選項列表 ，需與 input 搭配使用

<details> 用於描述文件或文件某個部分的細節

<embed> 定義嵌入的內容，例如附加元件

<figcaption> 定義 figure 元素的標題

<figure> 用於對元素進行組合

<footer> 定義 section 或 document 的頁腳，例如作者相關資料、聯絡方 式

<header> 定義文件的頁眉 ，也就是整個文件的標題

<hgroup> 用於組合網頁或 section 的標題

<keygen> 用於生成密鑰，利用 private key 及 public key 來驗證使用者

<mark> 用於標記特定文字、詞彙

<meter> 定義一個範圍內的度量衡

<nav> 定義網站內導航連接的部分

<output> 定義不同類型的輸出或運算結果

<progress> 定義任務執行中的進度

<rp> 定義不支持 ruby 元素之瀏覽器所需要顯示的內容

<rt> 定義字符(中文注音或其他語言發音)的解釋或發音

<ruby> 定義 ruby 注釋（中文注音或其他語言發音）

<section> 定義文件中的區塊或段

<source> 定義多媒體元素的檔案來源

<summary> 定義 details 元素的標題

<time> 定義日期及時間

<video> 定義及播放影片內容

2.6 JavaScript

標籤之撥放路徑及預覽圖。

console.log("a"); //這是正確的 console.log("b"); //這是正確的

console.logg("c"); //這不是正確的，並會到這裡時停下來 console.log("d"); //這是正確的

console.log("e"); //這是正確的 /*解決辦法*/

try{console.log("a");}catch(e){} //這是正確的 try{console.log("b");}catch(e){} //這是正確的

try{console.logg("c");}catch(e){} //這不是正確的，但不會停下來，而是跳過 try{console.log("d");}catch(e){} //這是正確的

try{console.log("e");}catch(e){} //這是正確的