web 基礎（二） HTML5
web 基礎（二） HTML5
一、HTML5
HTML5 是最新的 HTML 標準。是專門為承載豐富的 web 內容而設計的，並且無需額外外掛。它擁有新的語義、圖形以及多媒體元素。並提供的新元素和新的 API 簡化了 web 應用程式的搭建，是跨平臺的，被設計為在不同型別的硬體（PC、平板、手機、電視機等等）之上執行。
總而言之，HTML5 屬於上一代HTML的新迭代語言，設計HTML5最主要的目的是為了在移動裝置上支援多媒體！
HTML5 的檔案規範：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"><title>Title of the document</title>
</head>
<body>
Content of the document......
</body>
</html>
相比 HTML4 及以下版本，HTML5 的檔案型別（DOCTYPE）宣告非常簡單，HTML5 中預設的字元編碼是 UTF-8。
二、HTML5 新特性
- 新的語義元素。比如 <header>, <footer>, <article>, and <section>。
- 新的表單控制元件。比如數字、日期、時間、日曆和滑塊。
- 強大的影象支援（藉由 <canvas> 和 <svg>）。
- 強大的多媒體支援（藉由 <video> 和 <audio>）。
- 強大的新 API。比如用本地儲存取代 cookie。
三、瀏覽器對 HTML5 的支援
目前，所有現代瀏覽器都支援 HTML5。此外，所有瀏覽器，不論新舊，都會自動把未識別元素當做行內元素來處理。正因如此，可以用下面三種方式來幫助老式瀏覽器處理“未知的“ HTML 元素，以實現瀏覽器對 HTML5 的支援：
1、把 HTML5 元素定義為塊級元素
HTML5 定義了八個新的語義HTML 元素。所有都是塊級元素。可以把 CSSdisplay屬性設定為block，以確保老式瀏覽器中正確的行為，如下所示：
header, section, footer, aside, nav, main, article, figure {
display: block;
}
2、向 HTML 檔案中新增新元素
可以通過瀏覽器 trick 向 HTML 新增任何新元素，如下示例是向 HTML 添加了一個名為<my>的新元素，併為其定義 display 樣式為block：
<!DOCTYPE html>
<html> <head>
<title>an HTML Element</title>
<script>document.createElement("my")</script>
<style>
myHero {
display: block;
}
</style>
</head>
<body>
<my>My First Hero</my>
</body>
</html>
注意：已新增的 JavaScript 語句document.createElement("my")，僅適用於 IE核心的瀏覽器。
上述兩種方案可用於所有新的 HTML5 元素，但是對於Internet Explorer 8 以及更早的版本，不允許對未知元素新增樣式。此時需要用到下面的Shiv 解決方案。
3、完整的 Shiv 解決方案
在 Internet Explorer 8 以及更早的版本，不允許對未知元素新增樣式。幸運的是，Sjoerd Visscher 創造了 "HTML5 Enabling JavaScript","the shiv"的外掛：html5shiv.min.js，在HTML5 檔案中引用此檔案，可以實現對HTML5 的支援，如下示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<!--[if lte IE 9]>
<script type="text/javascript" src="js/html5shiv.min.js"></script>
<![endif]-->
</head>
<body>
<header>頭部</header>
</body>
</html>
注意：以上程式碼是一段註釋，但是 IE9 的早期版本會讀取它（並理解它）。引用 JS 外掛程式碼的連結必須位於 <head> 元素中，因為 Internet Explorer 需要在讀取之前認識所有新元素。
由於第三種方案可以解決大部分相容性問題，所以推薦使用第三種Shiv 解決方案。
四、HTML5 中新元素及屬性
這邊列出了常用的元素和相關屬性，詳細的可以訪問各個章節：HTML5 教程。
（一）、新元素
|
標籤 |
描述 |
|
|
<canvas>新元素 |
<canvas> |
標籤定義圖形，比如圖表和其他影象，該標籤基於JS的繪畫API |
|
新多媒體元素 |
<audio> |
定義音訊內容 |
|
<video> |
定義視訊(video或者movie) |
|
|
<source> |
定義多媒體資源<video>和<audio> |
|
|
<embed> |
定義嵌入的內容，比如外掛 |
|
|
<track> |
為諸如<video>和<audio>元素之類的媒介規定外部文字軌道 |
|
|
新表單元素 |
<datalist> |
定義選項列表。與input元素配合使用，來定義input可能的值。 |
|
<keygen> |
規定用於表單的金鑰對生成欄位。 |
|
|
<output> |
定義不同型別的輸出，比如指令碼的輸出。 |
|
|
新的語義和結構元素 |
<aside> |
定義頁面的側邊欄內容 |
|
<dialog> |
定義對話方塊，比如提示框 |
|
|
<figure> |
規定獨立的流內容（影象圖表照片程式碼等） |
|
|
<figcaption> |
定義<figure>元素的標題 |
|
|
<footer> |
定義section或decument的頁尾 |
|
|
<header> |
定義檔案的頭部區域 |
|
|
<nav> |
定義執行中的進度 |
|
|
<section> |
定義檔案中的節 |
|
|
<time> |
定義日期或時間 |
（二）、新表單屬性
1、智慧表單控制元件
<input type="email">
type可選以下型別：
email: 輸入合法的郵箱地址
url： 輸入合法的網址
number： 只能輸入數字
range： 滑塊
color： 拾色器
date： 顯示日期
month： 顯示月份
week ： 顯示第幾周
time： 顯示時間
五、HTML5 示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表單屬性示例</title>
</head>
<body>
<form action="test.action" method="get" autocomplete="off" novalidate>
郵箱地址:
<input type="email" name="">
<input type="submit" name="">
</form>
</body>
</html>