# HTML5 - 歷史、表單、影音

### 前言

為什麼要了解 H5？

我們的確不需要知道以前的語言歷史也能學會新的語言，但是了解 H5 的發展過程對於理解現在網頁的設計有很大的幫助。

### 歷史

1998 W3C 決定不再發展 HTML，停滯於 4.0.1 版本、宣告 XHTML 規格（XML版的HTML，遵循 XML 規則）。我們以前常說的 HTML 指的是 HTML 4.0.1

但有群人認為 XML 並不是美好的未來，因此私下開始發展規格，這個團隊後來成為了我們比較熟知的 WHATWG

2004 網頁超文字應用技術工作小組（WHATWG）開始開發HTML

2006 W3C 認為有必要讓 HTML 死灰復燃（眼見於 XML 的失敗，太過嚴格無法相容當時的情況）

2007 W3C 成立新的 HTML 小組

2008 WHATWG 與 W3C 共同提出 HTML5

2009 W3C 停止發展 XHTML 2.0，將資源投入 H5

2011 Google 宣佈自 8 月起旗下的雲端服務 Gmail, Google Calendar, Google Talk, Google Docs…將全面採用 HTML 5 技術。

2014 完成 HTML5 標準化。

弔詭的在於，W3C 的 HTML 小組決議要用 WHATWG 的 Web Applications 規格作為新的 HTML 基礎，造成 H5 是由 W3C 跟 WHATWG 同時發展

:::success
本篇的內容的以 WHATWG 為主
:::

:::info
兩方發展比較

W3C：H5 的規範工作，單一明確的標準。

WHATWG：H5 視為一個「活動標準」（Living Standard）。活動標準的概念是從未完成但永遠保持更新與改進，可以加新特性，但功能點不會被刪除。
:::

### HTML5 理念

- 明確指出目前瀏覽器可互動行為
- 首次定義出錯誤處理 → 即使 code 錯誤仍能辨別
- 更簡易的網頁應用程式編寫語言 → 與 JS 配合達到更多的功能

### HTML5 細項

主要結構

**1. 語意標籤**

根據搜尋引擎挖出的網頁結構列出最常用的 class 名稱和 id，直接變成 HTML5 的 tag

class → footer menu style1 msonormal text content title style header copyright

id → footer content header logo container main table1 menu layer1 autonumber1

\<header> 將「介紹性或導覽相關的內容」元素群組起來、可以不只一個


<time> 24小時制的時間或者萬年曆的日期

**2. [全域屬性](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes)**

H5 新增了全域屬性的概念，可以加進任何 tag，但可能沒作用罷了

最熟悉的例子：class、id
以及像是 data-*
方便 js 取得對應的 HTML 資訊

<li class='list' data-color='orange'>Orange pants</li> 
<li class='list' data-color='green'>Green pants</li> 

var listItem = document.getElementByClassName('list')[n].dataset.color

draggable (布林值)

決定內容能不能被拖曳，搭配 drag-and-drop API

<div draggable=true>Drag me!</div>

**3. 表單輸入**
- type

<input type="email">
檢查其mail格式是否正確 但不驗證是否存在


若沒帶上 required 仍可以送出空白的資料
帶上 multiple 可用逗號分隔開多個email

<input type="url">
檢查其網址格式是否正確


<input type="range">
滑桿
可以用 .value 來取得滑桿數值 0-100

<input type="number">
瀏覽器會提供上下箭頭選取數字 也可以鍵盤輸入
<input type="number" step="5">
可以用 step 操控每次上下的點選是加減多少

<input type="month">
月份

<input type="week">
當年第幾週

<input type="search">
搜尋欄，比text多清空鍵

<input type="color">
色盤

<input type="tel">
電話號碼，雖然並不會驗證號碼格式，畢竟每個國家格式不一
但他會告知移動端瀏覽器開啟號碼鍵盤，所以很 user friendly


- pattern 驗證

以前我們必須用 js 才能驗證 input 的資料，但 H5 你可以直接在 <input> 內加上 tag 屬性來達成這件事，前面提到的type自行驗證也是透過這個方式。
在 pattern 的值必須使用正規表達式才有效果

<input type="text" pattern="[0-9]{3}" required>
不符合的情況下，使用 form 的送出表單就會無法送出


- mix max 決定數值範圍
除了一般數字，日期也可以鎖定

- 使用 <output> 拿數值

<form oninput="result.value=tap.value" >
	<input type='range'  min='1' max='10' name='tap'>
  <output name='result'></output>
<!--   <input type="submit"> -->
</form>

// CSS
input[type=range]::before{
  content:attr(min);
}

input[type=range]::after{
  content:attr(max);
}

input[type=range]{
  color:red;
  width:500px;
  font-size:2em;
}

output{
  width:30px;
}

東補充：上傳檔案功能 可以用 accept 屬性協助判斷檔案格式
https://www.w3schools.com/tags/att_input_accept.asp
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file

**4. 多媒體**

小時候，網上的多媒體僅限於 gif、MIDI格式的音樂，但隨著網路演進，越來越多 media 格式出現，不同規格的播放器雨後春筍冒頭，直到 2005 ADOBE FLASH 勝出（強大的外掛、被當時的 youtube 選為播放規格），但 FLASH 現在是時代的眼淚惹。
:::success
H5 提供了影、音多規格的內建 API
:::

早期若要在網頁中放入影片，code 落落長，用 [<object>](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/object) 、不合法的 <embed> 再加上 Flash Player 或 ActiveX control 外掛程式才能達成。

這邊放個範例感受痛苦

<object width="500" height="360">
  <param name="autoplay" value="true">
	<param name="allowFullScreen" value="true">
	<param name="allowscriptaccess" value="always">
	<embed width="500" height="360" src="...." type="application/x-shockwave-flash" allowscriptaccess="always" allowFullScreen="true">
</object>

瀏覽器是將影片轉交給第三方外掛來播放，你得確保使用者懂得更新外掛以及沒有額外的哩哩叩叩的問題\^.^

H5 旨在讓影片及音頻成為網頁的正式成員，不再需要轉接給 <object>、<embed>。

** 小補充：<embed> 在 H5 中成為標準規格的tag，可以嵌入一些檔案類型，像是 PDF、SWF

但如果你是想嵌入圖片，你應該是使用 [\<img>](https://www.fooish.com/html/image-img-tag.html)
如果你是想嵌入 HTML 網頁，你應該是使用 [\<iframe>](https://www.fooish.com/html/iframe-tag.html)
如果你是想嵌入音源或影片，你應該是使用 [\<audio>](https://www.fooish.com/html/audio-tag.html) 或 [\<video>](https://www.fooish.com/html/video-tag.html)

**最後稍微看一下 [video](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/video) 可以做什麼事情**

大家要玩的話可以用我專案的影片連結，只要我的firebase還沒開始收錢他應該都會在...

<video 
		autoplay // 自動播放 優先度大於preload
		controls // 前台展示播放控制器 使用者可以用一些播放器的功能
		preload="auto" // 預載建立緩衝
		loop // 循環播放
		poster='..' // 預設畫面 沒設定就是停格第一幀
		src="https://firebasestorage.googleapis.com/v0/b/myti-171bb.appspot.com/o/background%2Fti10_main.mp4?alt=media&amp;token=c2ebd13d-ae66-47ed-a7b2-952f28033756" 
>
	<track kind="captions">
</video>

H5 除了提供 \<video>、\<audio>，更重要的是提供[媒體API](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Video_and_audio_APIs)
可以藉由這些 API 做出自己想要的播放器效果，替代比較陽春的瀏覽器樣式

東補充：手機版瀏覽 video 要包 source 才會動
https://developer.apple.com/forums/thread/129377