H5其實就是H4的一個增強版本，我們在利用H5進行網頁的構造會更簡便，標籤語義更簡潔明瞭。首先，我們要理解HTML4，它是HTML的標記+css2+JavaScript的一些基本應用，簡言之，就是API+語法；而H5無非就是在原先的基礎上面提供了一些新的功能。
1、H5的語義標籤
1）:html 的定義 ，它的一個文檔聲明 <!DOCTYPE html>
語法跟html4 差不多，w3c 提供了一個網站可以用來檢測html 的語法.
https://validator.w3.org/
2）html 的語義標籤，多了很多新的語義標籤. 這些標籤用起來跟div 和span 差不多。
複製代碼
1 <nav> 表示導航
2 <header> 表示頁眉
3 <footer> 表示頁腳
4 <section> 表示區塊
5 <article> 表示文章 如文章、評論、帖子、博客
6 <aside> 表示側邊欄 如文章的側欄
7 <figure> 表示媒介內容分組 與 ul > li 做個比較
8 <!--以上是常用到的-->
9 <mark> 表示標記 (帶用“UI”，不怎麼用)
10 <progress> 表示進度 (帶用“UI”，不怎麼用)
11 <time> 表示日期
12 <hgroup> 標題列表 (據說已廢棄)
13 <details>
14 <bdi>
15 <command>
16 <summary>
17 <rp>
18 <rt>
19 <ruby>
20 <!--儘量避免全局使用header、footer、aside等語義標籤。-->
複製代碼
3）兼容處理
①在不支持HTML5新標籤的瀏覽器裏，會將這些新的標籤解析成行內元素（inline）對待，將其轉換成塊元素（block）即可；
②在IE9版本以下，並不能正常解析這些新標籤，但是可以識別通過document.creatElement('tagName')創建的自定義標籤
③實際開發中，我們採用的是通過檢測IE瀏覽器的版本來加載三方的一個JS庫來解決兼容問題。
<!-- [if lte IE 8]>
<script src="./js/html5shiv.min.js"></script>
<![endif]-->
【注意】<footer></footer> 這個是html5 裏面的標記，相當於div，只不過有語義；然後放在ie6 裏面，它會把這個footer 這個不認識的標記當做行內元素來處理；所以我們就需要屏蔽兼容性，這個時候我們就需要導入一個js 庫。
html5shiv.min.js
2、表單
——form 是用來聲明表單. input 是用來表示表單項，type 是用來控制表單項的類型.（html5 在表單上面進行一些增強）
1）輸入類型（表單類型、表單元素、表單屬性、表單事件）
複製代碼
1 <input type="text" />
2 email 輸入email格式
3 tel 手機號碼
4 url 只能輸入url格式
5 number 只能輸入數字
6 search 搜索框
7 range 範圍
8 color 拾色器
9 time 時間
10 date 日期 不是絕對的
11 datetime 時間日期
12 month 月份
13 week 星期
複製代碼
部分類型是針對移動設備生效的，且具有一定的兼容性，在實際應用當中可選擇性的使用
2）新增了一些標籤
① 數據列表： <datalist></datalist>
②用來做安全的表單提交數據傳輸的安全：<keygen></keygen>
③用來做度量： <meter></meter>
④想表單裏面輸出，沒什麼作用：<outputer><outputer>
3）新增了一些屬性:
複製代碼
1 placeholder 佔位符
2 autofocus 獲取焦點
3 multiple 文件上傳多選或多個郵箱地址
4 autocomplete 自動完成，用於表單元素，也可用於表單自身
5 form 指定表單項屬於哪個form，處理複雜表單時會需要
6 novalidate 關閉驗證，可用於<form>標籤
7 required 驗證條件，必填項
8 pattern 正則表達式 驗證表單
9 手機號:<input type="tel" name="tel" required="required" pattern="^(\+86)?1[3,5,8](\d{9})$">
複製代碼
【PS】我們用新增的這些屬性，可以來完成我們之前要使用js 才能實現的效果.
4）表單裏面的事件
①監聽文本框的數據的輸入： oninput 事件
②當驗證不通過的時候觸發： oninvalid
③進度這個標記，我們使用 progress
3、多媒體
1）早之前我們做網頁播放器
①我們是通過js 去調用windows 裏面自帶的一個播放器 media player 操作系統捆綁的
②adobe 的這樣的一個flash ，基本上面每個用戶電腦上面都會安裝.
③後期我們出現了一個東西，每個電腦上面都可以裝一個快播，js 調用快播.
【javascript 裏面的內容】 javascript 分爲三部分：
①ECMAScript
(定義了js 的語法，變量，語句)
②BOM 瀏覽器對象模型
(我們可以通過瀏覽器的自帶的一些對象，可以調出瀏覽器的功能.)
③Dom 文檔對象模型
我首先有一個html 文件，我通過瀏覽器去打開這個html 文件；瀏覽器會去解析這個html 文件，把這個文件解析之後放在一個document 對象裏面； 我以後要操作html 裏面的內容，我就直接操作document 就可以
1 //(操作dom 就是熟練dom 的api)
2 // (操作dom 的前期，要操作dom 必須先得到dom)
3 document.getElementById("");
4 document.getElementsByTagName("");
2） html5 可以提供一些標籤來完成播放.
我們做這種音頻文件，以及視頻文件，最麻煩地方就是解碼【音頻文件，以及視頻文件，都有格式，各種各樣的格式】
1:假設你網站的視頻資源是自己產生的
2:假設網站的資源是用戶上傳上去的，我們需要在用戶上傳的時候對這個資源進行轉碼.
【H5中】這個h5 在這個的基礎上面進行了擴展，提供了一些更加強大的方法.
複製代碼
//根據class 的值去獲取
document.getElementByClassName("")
// 這個裏面支持css 裏面的選擇器
//這裏返回的是第一個元素..
document.querySelector(".username")
//獲取的所有的,返回的是一個集合.
document.querySelectorAll(".username>li");
複製代碼
【表單的總結】我現在有一個表單，定義屬性，什麼時候id ，什麼是時候使用name，什麼時候使用class
① 我爲一個元素加id 的目的，爲了js 方便去獲取這個元素
②name ：如果我要跟服務器進行交互，服務器到時候要獲取客戶端表單提交的數據.它是根據name 的值去獲取
<input type="text" name="username" value="zhangsan">
// username=zhangsan
③class 一般，如果我要通過樣式去批量控制元素，我就爲元素添加class 屬性.
我們以後做案例：第一步，我要把頁面的基本佈局畫好（html,css）
第二步：分析功能，根據功能找到對應的事件
第三步：事件出來了，方法就出來了
【ps】我看要完成什麼功能，一般情況下我們都是操作dom； 獲取dom，操作dom （api 操作.）；即使調試,一個案例，都是調出來的
【小結】 html5 概念：就是在html4 上面的一個增強版本。在 標籤，css，js 上面的一個增強。
標籤：出現了一些新的比較具有顛覆性的標記.
1:html5 的聲明
2:語義標籤(大家當做div ，或者span 來理解就可以.)
3:兼容性處理，需要導入一個js 庫.
4:表單，我們傳統的表單，難以完成比較複雜的頁面應用
4.1：新增了一些類型 type=""
4.2: 新增了一些標籤 datalist
4.3: 新增了屬性 (文檔)
4.4：事件 oninput
小案例：學生檔案，案例.
多媒體處理:
audio 針對mp3 音頻
video 針對視頻的
解碼；做客戶端不用處理.
dom 的處理
新增了一些api ，來讓我們去獲取頁面上面的內容.
document.getElementByTagName
document.querySelector();
document.querySelectorAll();
新增了屬性操作:
document.getElementById("").classList.add();
document.getElementById("").classList.remove();
document.getElementById("").classList.toggle();
document.getElementById("").classList.contains();
自定義屬性：
我可以爲元素自定義屬性 我們是在元素上面加 data-itcast-name="";
遵守駝峯命名法則
tabs 選項卡切換.(就是屬性api )
4、CSS3 與 JS 的區別
1）css:出現了css3，支持3d 效果.
js:定位（直接在網站裏面可以嵌入地圖.），重力感應
2）css3 肯定可以使頁面的顯示更加的豐富效果
javascript 新增了一些api，定位（百度地圖），重力感應 js 的一些對象
H5前端培訓網站：http://www.zhihaijiangku.com
1、H5的語義標籤
1）:html 的定義 ，它的一個文檔聲明 <!DOCTYPE html>
語法跟html4 差不多，w3c 提供了一個網站可以用來檢測html 的語法.
https://validator.w3.org/
2）html 的語義標籤，多了很多新的語義標籤. 這些標籤用起來跟div 和span 差不多。
複製代碼
1 <nav> 表示導航
2 <header> 表示頁眉
3 <footer> 表示頁腳
4 <section> 表示區塊
5 <article> 表示文章 如文章、評論、帖子、博客
6 <aside> 表示側邊欄 如文章的側欄
7 <figure> 表示媒介內容分組 與 ul > li 做個比較
8 <!--以上是常用到的-->
9 <mark> 表示標記 (帶用“UI”，不怎麼用)
10 <progress> 表示進度 (帶用“UI”，不怎麼用)
11 <time> 表示日期
12 <hgroup> 標題列表 (據說已廢棄)
13 <details>
14 <bdi>
15 <command>
16 <summary>
17 <rp>
18 <rt>
19 <ruby>
20 <!--儘量避免全局使用header、footer、aside等語義標籤。-->
複製代碼
3）兼容處理
①在不支持HTML5新標籤的瀏覽器裏，會將這些新的標籤解析成行內元素（inline）對待，將其轉換成塊元素（block）即可；
②在IE9版本以下，並不能正常解析這些新標籤，但是可以識別通過document.creatElement('tagName')創建的自定義標籤
③實際開發中，我們採用的是通過檢測IE瀏覽器的版本來加載三方的一個JS庫來解決兼容問題。
<!-- [if lte IE 8]>
<script src="./js/html5shiv.min.js"></script>
<![endif]-->
【注意】<footer></footer> 這個是html5 裏面的標記，相當於div，只不過有語義；然後放在ie6 裏面，它會把這個footer 這個不認識的標記當做行內元素來處理；所以我們就需要屏蔽兼容性，這個時候我們就需要導入一個js 庫。
html5shiv.min.js
2、表單
——form 是用來聲明表單. input 是用來表示表單項，type 是用來控制表單項的類型.（html5 在表單上面進行一些增強）
1）輸入類型（表單類型、表單元素、表單屬性、表單事件）
複製代碼
1 <input type="text" />
2 email 輸入email格式
3 tel 手機號碼
4 url 只能輸入url格式
5 number 只能輸入數字
6 search 搜索框
7 range 範圍
8 color 拾色器
9 time 時間
10 date 日期 不是絕對的
11 datetime 時間日期
12 month 月份
13 week 星期
複製代碼
部分類型是針對移動設備生效的，且具有一定的兼容性，在實際應用當中可選擇性的使用
2）新增了一些標籤
① 數據列表： <datalist></datalist>
②用來做安全的表單提交數據傳輸的安全：<keygen></keygen>
③用來做度量： <meter></meter>
④想表單裏面輸出，沒什麼作用：<outputer><outputer>
3）新增了一些屬性:
複製代碼
1 placeholder 佔位符
2 autofocus 獲取焦點
3 multiple 文件上傳多選或多個郵箱地址
4 autocomplete 自動完成，用於表單元素，也可用於表單自身
5 form 指定表單項屬於哪個form，處理複雜表單時會需要
6 novalidate 關閉驗證，可用於<form>標籤
7 required 驗證條件，必填項
8 pattern 正則表達式 驗證表單
9 手機號:<input type="tel" name="tel" required="required" pattern="^(\+86)?1[3,5,8](\d{9})$">
複製代碼
【PS】我們用新增的這些屬性，可以來完成我們之前要使用js 才能實現的效果.
4）表單裏面的事件
①監聽文本框的數據的輸入： oninput 事件
②當驗證不通過的時候觸發： oninvalid
③進度這個標記，我們使用 progress
3、多媒體
1）早之前我們做網頁播放器
①我們是通過js 去調用windows 裏面自帶的一個播放器 media player 操作系統捆綁的
②adobe 的這樣的一個flash ，基本上面每個用戶電腦上面都會安裝.
③後期我們出現了一個東西，每個電腦上面都可以裝一個快播，js 調用快播.
【javascript 裏面的內容】 javascript 分爲三部分：
①ECMAScript
(定義了js 的語法，變量，語句)
②BOM 瀏覽器對象模型
(我們可以通過瀏覽器的自帶的一些對象，可以調出瀏覽器的功能.)
③Dom 文檔對象模型
我首先有一個html 文件，我通過瀏覽器去打開這個html 文件；瀏覽器會去解析這個html 文件，把這個文件解析之後放在一個document 對象裏面； 我以後要操作html 裏面的內容，我就直接操作document 就可以
1 //(操作dom 就是熟練dom 的api)
2 // (操作dom 的前期，要操作dom 必須先得到dom)
3 document.getElementById("");
4 document.getElementsByTagName("");
2） html5 可以提供一些標籤來完成播放.
我們做這種音頻文件，以及視頻文件，最麻煩地方就是解碼【音頻文件，以及視頻文件，都有格式，各種各樣的格式】
1:假設你網站的視頻資源是自己產生的
2:假設網站的資源是用戶上傳上去的，我們需要在用戶上傳的時候對這個資源進行轉碼.
【H5中】這個h5 在這個的基礎上面進行了擴展，提供了一些更加強大的方法.
複製代碼
//根據class 的值去獲取
document.getElementByClassName("")
// 這個裏面支持css 裏面的選擇器
//這裏返回的是第一個元素..
document.querySelector(".username")
//獲取的所有的,返回的是一個集合.
document.querySelectorAll(".username>li");
複製代碼
【表單的總結】我現在有一個表單，定義屬性，什麼時候id ，什麼是時候使用name，什麼時候使用class
① 我爲一個元素加id 的目的，爲了js 方便去獲取這個元素
②name ：如果我要跟服務器進行交互，服務器到時候要獲取客戶端表單提交的數據.它是根據name 的值去獲取
<input type="text" name="username" value="zhangsan">
// username=zhangsan
③class 一般，如果我要通過樣式去批量控制元素，我就爲元素添加class 屬性.
我們以後做案例：第一步，我要把頁面的基本佈局畫好（html,css）
第二步：分析功能，根據功能找到對應的事件
第三步：事件出來了，方法就出來了
【ps】我看要完成什麼功能，一般情況下我們都是操作dom； 獲取dom，操作dom （api 操作.）；即使調試,一個案例，都是調出來的
【小結】 html5 概念：就是在html4 上面的一個增強版本。在 標籤，css，js 上面的一個增強。
標籤：出現了一些新的比較具有顛覆性的標記.
1:html5 的聲明
2:語義標籤(大家當做div ，或者span 來理解就可以.)
3:兼容性處理，需要導入一個js 庫.
4:表單，我們傳統的表單，難以完成比較複雜的頁面應用
4.1：新增了一些類型 type=""
4.2: 新增了一些標籤 datalist
4.3: 新增了屬性 (文檔)
4.4：事件 oninput
小案例：學生檔案，案例.
多媒體處理:
audio 針對mp3 音頻
video 針對視頻的
解碼；做客戶端不用處理.
dom 的處理
新增了一些api ，來讓我們去獲取頁面上面的內容.
document.getElementByTagName
document.querySelector();
document.querySelectorAll();
新增了屬性操作:
document.getElementById("").classList.add();
document.getElementById("").classList.remove();
document.getElementById("").classList.toggle();
document.getElementById("").classList.contains();
自定義屬性：
我可以爲元素自定義屬性 我們是在元素上面加 data-itcast-name="";
遵守駝峯命名法則
tabs 選項卡切換.(就是屬性api )
4、CSS3 與 JS 的區別
1）css:出現了css3，支持3d 效果.
js:定位（直接在網站裏面可以嵌入地圖.），重力感應
2）css3 肯定可以使頁面的顯示更加的豐富效果
javascript 新增了一些api，定位（百度地圖），重力感應 js 的一些對象
H5前端培訓網站：http://www.zhihaijiangku.com
