初識 HTML5（一）

　　H5其實就是H4的一個增強版本，我們在利用H5進行網頁的構造會更簡便，標簽語義更簡潔明瞭。首先，我們要理解HTML4，它是HTML的標記+css2+JavaScript的一些基本應用，簡言之，就是API+語法；而H5無非就是在原先的基礎上面提供了一些新的功能。

 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）相容處理

<!-- [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:假設網站的資源是用戶上傳上去的，我們需要在用戶上傳的時候對這個資源進行轉碼.

//根據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 的一些對象