HTML5 學習總結（一）——HTML5概要與新增標籤

1、HTML5概要

1.0、寫在最前面

1.0.0、開發工具

全棧：SSM（後臺）+前端

後臺：IntelliJ IDEA（http://idea.lanyus.com/）、MySQL（Oracle）、MongoDB

前臺：HBuilder（https://www.dcloud.io/）、Sublime Text、WebStorm

node.js

 

1.0.一、行業前景

https://www.lagou.com/

http://www.51job.com/

1.0.二、課程中用到的開發工具

HBuilder、IntelliJ IDEA、MySQL、NodeJS、Spring MVC、PHP、Photoshop

HBuilder：www.dcloud.com，其它（webstorm,sublime...）

MySQL：http://www.cnblogs.com/best/p/6517755.html

NodeJS：https://nodejs.org/

1.一、爲何須要HTML5

HTML4陳舊不能知足日益發展的互聯網須要，特別是移動互聯網。爲了加強瀏覽器功能Flash被普遍使用，但安全與穩定堪憂，不適合在移動端使用（耗電、觸摸、不開放）。

HTML5加強了瀏覽器的原生功能，符合HTML5規範的瀏覽器功能將更增強大，減小了Web應用對插件的依賴，讓用戶體驗更好，讓開發更加方便，另外W3C從推出HTML4.0到5.0之間共經歷了17年，HTML的變化很小，這並不符合一個好產品的演進規則。

1.二、什麼是HTML5

HTML5指的是包括HTML、CSS和JavaScript在內的一套技術組合。它但願可以減小網頁瀏覽器對於須要插件的豐富性網絡應用服務（Plug-in-Based Rich Internet Application，RIA），例如：AdobeFlash、Microsoft Silverlight與Oracle JavaFX的需求，而且提供更多能有效增強網絡應用的標準集。HTML5是HTML最新版本，2014年10月由萬維網聯盟（W3C）完成標準制定。目標是替換1999年所制定的HTML 4.01和XHTML 1.0標準，以期能在互聯網應用迅速發展的時候，使網絡標準達到匹配當代的網絡需求。

1.三、HTML5現狀及瀏覽器支持

大部分主流瀏覽器已經支持HTML5，可是各個瀏覽器支持的方式以及語法有所差別性。支持Html5的瀏覽器包括Firefox（火狐瀏覽器），IE9
及其更高版本，Chrome（谷歌瀏覽器），Safari，Opera等現代瀏覽器。

支持得分：

若是想了解更多請看本文的兼容性那一節的內容。

PC端（總分555分）：

平板（總分555分）：

移動（總分555分）：

1.四、HTML5特性

HTML5 八個特性類別對應的8個Logo
語義化、離線&存儲、設備訪問、通訊
多媒體、圖形和特效、性能和集成、呈現（CSS3）

1.4.1. 語義特性（Class：Semantic）

HTML5賦予網頁更好的意義和結構。更加豐富的標籤將隨着對RDFa的。

1.4.2. 本地存儲特性（Class: OFFLINE & STORAGE）

HTML5 APP Cache、本地存儲功能、IndexedDB、FileAPI

1.4.3. 設備訪問特性 (Class: DEVICE ACCESS)

爲移動開發而生。重力感應、全球地理定位、麥克風、攝像頭

1.4.4. 鏈接特性（Class: CONNECTIVITY）

WebSocket、Server-Sent Events實現雙向鏈接，消息推送

1.4.5. 網頁多媒體特性( Class: MULTIMEDIA）

支持網頁端的Audio、Video等多媒體功能。

1.4.6. 三維、圖形及特效特性（Class: 3D, Graphics & Effects）

這一招將Flash戰勝，圖形加強，SVG，Canvas，WebGL，2D/3D遊戲和頁面視覺特效。

1.4.7. 性能與集成特性（Class: Performance & Integration）

沒有用戶會永遠等待你的Loading，HTML5增長WebWorker、XMLHttpRequest2

1.4.8.呈現（CSS3/styling)

除了DOM接口，HTML5增長了更多樣化的應用程序接口（API）：

HTML5Canvas API：有關動態產出與渲染圖形、圖表、圖像和動畫的API
HTML5音頻與視頻：HTML5裏新增的元素，它們爲開發者提供了一套通用的、集成的、腳本式的處理音頻與視頻的API，而無需安裝任何插件
離線存儲數據庫（離線網絡應用程序）
編輯
拖放
跨文檔通訊
通訊／網絡
Communication APIs：構建實時和跨源（cross-origin）通訊的兩大基礎： 跨文檔通訊（Cross Document Messaging）與XMLHttpRequest Level 2。
瀏覽歷史管理
MIME和協議進程時表頭登記
微數據
網頁存儲
以上技術儘管是WHATWG HTML說明文檔的內容，但並無所有包括在W3C HTML5的說明文檔裏。一些相關的技術，像下面所列的，並無包括在這2份文檔中的任何一份中。W3C給這些技術單獨出版了說明文檔。
Geolocation API：用戶可共享地理位置，並在Web應用的協助下享用位置感知服務（location-aware services）
索引數據庫API（Indexed Database API，之前爲WebSimpleDB）
文件API：處理文件上傳和操縱文件
目錄和文件系統：這個API是爲了知足客戶端在沒有好的數據庫支持狀況下存儲要求
文件寫入：從網絡應用程序向文件裏寫內容
一個廣泛的誤解是HTML5可以在網頁中提供動畫效果，這是不對的，動畫效果是須要配合JavaScript和CSS。然而靜態HTML5配合CSS能夠表示出覆雜的排版結構並且原生支持與視頻的混合與控制（控制通常由JavaScript運行），所以簡單能夠把HTML5單位時間的狀態理解爲動畫的關鍵幀。

1.五、HTML5優勢與缺點

1.5.一、優勢

一、網絡標準統1、HTML5自己是由W3C推薦出來的。
二、多設備、跨平臺
三、即時更新。
四、提升可用性和改進用戶的友好體驗；
五、有幾個新的標籤，這將有助於開發人員定義重要的內容；
六、能夠給站點帶來更多的多媒體元素(視頻和音頻)；
七、能夠很好的替代Flash和Silverlight；
八、涉及到網站的抓取和索引的時候，對於SEO很友好；
九、被大量應用於移動應用程序和遊戲。

1.5.二、缺點

a)、安全：像以前Firefox4的web socket和透明代理的實現存在嚴重的安全問題，同時web storage、web socket 這樣的功能很容易被黑客利用，來盜取用戶的信息和資料。
b)、完善性：許多特性各瀏覽器的支持程度也不同。
c)、技術門檻：HTML5簡化開發者工做的同時表明了有許多新的屬性和API須要開發者學習，像web worker、web socket、web storage 等新特性，後臺甚至瀏覽器原理的知識，機遇的同時也是巨大的挑戰
d)、性能：某些平臺上的引擎問題致使HTML5性能低下。
e)、瀏覽器兼容性：最大缺點，IE9如下瀏覽器幾乎全軍覆沒。

1.六、HTML5效果展現

 HTML5對於以前版原本說，並不是簡單的版本升級，而是一次全面的框架和性能的提高與優化；這表如今：語法更簡單、新增了大量的語義性標籤、強大的canvas元素代替flash、豐富的API接口使用極大方便了開發者與瀏覽器的交互。其中，關鍵提高在於：基於HTML5強大的新增長框架，如手機端設備與頁面進行交互，如重力感應、地理定位、離線操做等， 在主流移動端平臺，能夠很輕鬆地自定義性能強大的webapp，包括遊戲、動畫和企業級的應用開發。

CSS3繪製《辛普森一家》

HTML5開發的遊戲

1.七、HTML5學習與開發工具

1.7.一、基礎要求

HTML+CSS+JavaScript與任何一種Web服務器後臺技術如（Java,dotNET,PHP)

1.7.二、開發工具

主流瀏覽器，如Chrome瀏覽器、Firefox瀏覽器、Safari瀏覽器、IE9+瀏覽器、IETester等

HTML5對開發工具並無限制，任意的文本編輯器均可以如：webstorm/notepad++ + zendcode /textMate + zendcode / sublime 2，Visual Studio2013+，Visual Studio Code，HBuilder等

若是習慣了eclipse的朋友可使用HBuilder，eclipse實在不適合用於寫前端腳本（4千萬美刀的東西...），

HBuilder是DCloud（數字天堂）推出的一款支持HTML5的Web開發IDE。它基於Eclipse，因此順其天然地兼容了Eclipse的插件。
快，是HBuilder的最大優點，經過完整的語法提示和代碼輸入法、代碼塊等，大幅提高HTML、js、css的開發效率。官網：http://www.dcloud.io/

1.八、HTML5語法規則與文檔聲明

1.8.一、語法規則

a)、標籤要小寫
屬性值不加" "或 ' '
b)、能夠省略某些標籤
HTML body head tbody
c)、能夠省略某些結束標籤
tr td li
d)、單標籤不用加結束標籤
img input
e)、廢除的標籤，看第二點
font center big

HTML 結構
CSS 表現
JavaScript 行爲

1.8.二、文檔聲明

<!DOCTYPE> 聲明必須位於 HTML5 文檔中的第一行，也就是位於 <HTML> 標籤以前。該標籤告知瀏覽器文檔所使用的 HTML 規範。
doctype 聲明不屬於 HTML 標籤，它是一條指令，告訴瀏覽器編寫頁面所用的標記的版本。
在全部 HTML 文檔中規定 doctype 是很是重要的，這樣瀏覽器就能瞭解預期的文檔類型。
HTML 4.01 中的 doctype 須要對 DTD 進行引用，由於 HTML 4.01 基於 SGML。而 HTML 5 不基於 SGML，所以不須要對 DTD 進行引用。

1.8.二、文檔聲明

2、廢棄的標籤

如下的 HTML 4.01 元素在HTML5中已經被刪除，雖然瀏覽器爲了兼容性考慮都還支持這些標籤，但建議使用新的替代標籤，矛盾的是老瀏覽器對新標籤的支持度又不夠，視項目的受衆對象而定了。

2.一、能用CSS代替的元素 

這些元素包含basefont、big、center、font、s、strike、tt、u。這些元素純粹是爲頁面展現用的，表現的內容應該由CSS完成。

2.二、frame框架

這些元素包含frameset、frame、noframes。HTML5中不支持frame框架，只支持iframe框架，或者用服務器方建立的由多個頁面組成的符合頁面的形式，刪除以上這三個標籤。

2.三、只有部分瀏覽器支持的元素

這些元素包含applet、bgsound、blink、marquee等標籤。

2.四、其餘被廢除的元素

廢除rb，使用ruby替代
廢除acronym使用abbr替代
廢除dir使用ul替代
廢除isindex使用form與input相結合的方式替代
廢除listing使用pre替代
廢除xmp使用code替代
廢除nextid使用guids
廢除plaintex使用「text/plian」（無格式正文）MIME類型替代

3、新增的標籤

3.一、新增的結構標籤

在HTML4.01中div被普遍用於各類佈局環境在，沒有明確的定義，HTML5爲了SEO將div語義化了，新增長結構標籤以下：

a)、section元素
表示頁面中的一個內容區塊,好比章節、頁眉、頁腳或頁面的其餘部分。能夠和h一、 h2……等元素結合起來使用，表示文檔結構。例：HTML5中<section>……</section>;HTML4中<div> ……</div>。

b)、article元素
表示頁面中一塊與上下文不相關的獨立內容。好比一篇文章。

c)、aside元素
表示article元素內容以外的、與article元素內容相關的輔助信息。

d)、header元素
表示頁面中一個內容區塊或真個頁面的標題。

e)、hgroup元素
表示對真個頁面或頁面中的一個內容區塊的標題進行組合。

f)、footer元素
表示整個頁面或頁面中一個內容區塊的腳註。通常來講，他會包含創做者的姓名、創做日期以及創做者的聯繫信息。

g)、nav元素
表示頁面中導航連接的部分。

h)、figure元素
表示一段獨立的流內容，通常表示文檔主體流內容中的一個獨立單元。使用figcaption元素爲figure元素組添加標題。例如：
<figure>
<figcaption>PRC</figcaption>
<p>The People's Republic of China was born in 1949</p>
</figure>
HTML4中常寫做
<dl>
<h1>prc</h1>
<p>The People's Republic of China was born in 1949</p>
</dl>

HTML 結構

CSS 表現

JavaScript 行爲

示例：

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>京東創始人劉強東一元年薪背後的O2O棋局</title>
        <style type="text/css">
            * {
                margin: 0;        /*全部元素的外邊距爲零*/
                padding: 0;
                font-family: "microsoft yahei";
            }
            
            ul li {
                list-style: none;
            }
            
            #container {
                width: 900px;
                margin: 0 auto;
            }
            
            header {
                height: 80px;
                line-height: 80px;
                background: dodgerblue;
                color: #fff;
                padding: 0 20px;
            }
            
            header h1 {
                font-size: 30px;
                font-weight: normal;
            }
            
            #main {
                font-size: 14px;
            }
            
            #main article {
                float: left;
                width: 70%;
                margin-right: 3%;
            }
            #main article hgroup{
                height: 70px;
            }
            #main article p{
                line-height: 22px;
                margin-bottom: 5px;
                text-indent: 26px;
            }
            
            #main aside {
                float: left;
                width: 27%;
            }
            #main aside li{
                height: 26px;
                line-height: 26px;
                overflow: hidden;
            }
            #main aside li a{
                text-decoration: none;
                border-bottom: 1px dashed #ccc;
            }
            #main aside li a:hover{
                background:orangered;
                color:white;
            }
            footer{
                clear: both;
                height:70px ;
                line-height: 70px;
                background: #FF4500;
                color: #fff;
                text-align: center;
            }
            footer nav li{
                display: inline-block;
                margin-right: 8px;
            }
        </style>
    </head>

    <body>
        <div id="container">
            <header>
                <h1>中國電子商務研究中心</h1>
            </header>
            <section id="main">
                <article>
                    <hgroup>
                        <h2>京東創始人劉強東一元年薪背後的O2O棋局</h2>
                        <h3>2015年10月06日14:50  中國電子商務研究中心</h3>
                    </hgroup>
                    <section>
                        <p>
                            京東董事會今年5月份批准了針對公司董事長兼CEO劉強東的一項爲期10年的薪酬計劃。計劃規定，10年內，劉強東每一年只能領到1元現金形式底薪和零元現金形式獎金。難道劉強東就所以連杯奶茶也買不起了嗎?這麼想就太天真了。根據京東的股權激勵計劃，劉強東被授予涉及2600萬股京東A級普通股的購買權，涉及股票規模約佔京東總股本的0.9%，只有當每股ADS達到或超過33.4美圓(至關於京東股價不低於16.7美圓)時，劉強東才能將這部分股權進行套現。</p>
                        <p>
                            按每股16.7美圓計算，劉強東得到的這部分股權將價值4.34億美圓，至關於27.8億人民幣。在這10年內，公司不得再向劉強東授予額外股權。其實「一元年薪」不只並不是劉強東獨創，甚至已經成爲企業面臨危機時的一種常見路數。諸多企業都採起過「一元年薪」，好比三一重工。2008年經濟危機時，三一重工[微博]全體董事降薪90%，並接受高管自願降薪申請，三一重工[微博]董事長梁穩根甚至主動申請將本身的年薪降至一元。
                        </p>
                        <p>對於目前並無表現得很困難的京東來講，中國電子商務協會研究中心專家委員唐興通認爲，「一元年薪」只是對於團隊管理上的一種姿態而，並無什麼特別實際的用處。而上述股權激勵計劃更多的是爲了穩定投資者的信心穩定投資者信心或許是爲了緩解其在最新一期財務報告中持續虧損所帶來的負面影響8月7日，京東發佈了2015年第二季度財報。據財報顯示，雖然京東第二季度交易總額爲1145億元，同比增加82%，淨收入則達到459億元，同比增加61%。</p>
                        <p>
                            儘管京東業績增加強勁，但其彷佛尚未找到有效的盈利模式。在去年第二季度淨虧損5.825億元的京東，今年該季度依然淨虧損5.104億元，淨利潤率爲-1.1%。該公司在2015年第二季度非美國通用會計準則下淨虧損爲1570萬元人民幣(約250萬美圓)，淨利潤率爲-0.03%。但事情卻未向着京東指望的方向發展。據資料顯示，以8月5日京東收盤價34.32美圓計，至8月12日，短短5個交易日，其最低價格下探至25.64美圓，最大跌幅高達25.29%;按其總股本27.35億股計，5個交易日，京東蒸發市值237億美圓，蒸發比例高達39%。</p>
                    </section>
                </article>
                <aside>
                    <ul>
                        <li>
                            <a href="zt/2015zhifu/">讓紅包再多飛一會——新春土豪玩轉紅包 霸主地位花落誰家</a>
                        </li>
                        <li>
                            <a href="zt/2015taobao/">淘寶PK國家監管部門「假貨「爭議引起「史上最大危機」？</a>
                        </li>
                        <li>
                            <a href="zt/2015expectation/">2015電子商務展望</a>
                        </li>
                        <li>
                            <a href="zt/2014pandian/">2014年度中國電子商務產業鏈系列盤點專題 </a>
                        </li>
                        <li>
                            <a href="zt/20141111/">六年曆程、上市首秀：電商鏖戰「雙11」全程直播大型專題報道 </a>
                        </li>
                        <li>
                            <a href="zt/2014shcb/">2014上半年電商上市公司財報解讀</a>
                        </li>
                        <li>
                            <a href="zt/wganq/">全國百家電商牽手質檢機構 保障網購產品質量與安全行動計劃</a>
                        </li>
                        <li>
                            <a href="zt/sn818/">蘇寧打響「百日會戰」 電商再掀促銷「風暴」</a>
                        </li>
                        <li>
                            <a href="zt/dssj/">從電商平臺第三方賣家奢侈品售假 揭電商假貨之觴 引行業地震</a>
                        </li>
                        <li>
                            <a href="zt/2014World_Cup/">足球盛宴 電商角逐「世界盃經濟」</a>
                        </li>
                        <li>
                            <a href="zt/jdipo/">京東啓動赴美IPO 優點與挑戰並存</a>
                        </li>
                        <li>
                            <a href="zt/anl_al2014/">阿里巴巴集團提交IPO招股書 招股書背後的機遇與挑戰</a>
                        </li>
                        <li>
                            <a href="zt/jmipo/">聚美優品向美提交上市申請 招股書背後機遇與挑戰並存</a>
                        </li>
                        <li>
                            <a href="zt/7twlytui/">電商VS消費者 電商7天無理由退貨大閱兵</a>
                        </li>
                        <li>
                            <a href="zt/jdtx/">騰訊戰略投資京東 國內B2C電商市場格局將迎 "寡頭時代"</a>
                        </li>
                        <li>
                            <a href="zt/jdo2o/">京東零售業O2O戰略萬家便利店ERP供應商簽約儀式</a>
                        </li>
                        <li>
                            <a href="zt/yhty/">聚焦"7天無理由退貨" 專家解讀《網絡交易管理辦法》、《新消法》</a>
                        </li>
                        <li>
                            <a href="zt/2014lh/">聚焦2014兩會——鼓勵電子商務創新發展 互聯網金融掀新一輪顛覆潮</a>
                        </li>
                        <li>
                            <a href="zt/2014315/">倡導陽光 誠信 安全網購 迎接電商立法元年</a>
                        </li>
                        <li>
                            <a href="zt/anl_wxqb/">微信紅包引起移動端支付爭奪戰 佔據高地爲時尚早</a>
                        </li>
                    </ul>
                </aside>
            </section>
            <footer>
                <nav>
                    <ul>
                        <li>關於咱們</li>
                        <li>聯繫咱們</li>
                        <li>投稿撤稿</li>
                        <li>友情連接</li>
                        <li>免責聲明</li>
                        <li>人才招聘</li>
                        <li>獨家專題</li>
                        <li>中心微信</li>
                    </ul>
                </nav>
            </footer>
        </div>
    </body>

</html>

View Code

運行結果：

3.二、新增長其它元素

3.2.一、meter

表示特定範圍內的數值，可用於工資、數量、百分比等 max表示最大值，min表示最小值，value表明當前值。

<meter max="100" min="0" value="60" style="width: 300px;"></meter>

能夠試試用js控制讓它從0變化到100。

3.2.二、time

time。表示時間值，屬性datetime強調時間
大會時間：<time>2015-10-6</time>

<time>2015-10-6</time>
咱們在天天早上 <time>8:30</time> 開始上課。 我在<time datetime="2017-02-14">情人節</time>有個約會。

運行效果：

 由於該標籤是一個語義標籤，在瀏覽器上查看時沒有特別的效果，基本與沒有設置標籤的效果相同。

3.2.三、progress

用來表示進度條

        <h3>progress</h3>
        <progress value="75" max="100"></progress>

max：最大值，完成時的值

value：當前值

firefox運行結果:

 

chrome運行結果：

3.2.四、datalist

該標籤訂義可選數據的列表。與 input 元素配合使用，就能夠製做出輸入值的下拉列表。

當與input組合時既能夠完成選擇有能夠輸入。

        <input type="text" list="countries" />
        <datalist id="countries">
            <option value="中國"></option>
            <option value="美國"></option>
            <option value="日本"></option>
        </datalist>

 

3.2.五、mark元素
主要用來在視覺上向用戶呈現哪些須要突出顯示或高亮顯示的文字。典型應用搜索結果中高亮顯示搜素關鍵字。
HTML5<mark></mark>;HTML4 <span></span>。

3.2.六、ruby元素
定義 ruby 註釋（中文註音或字符）。
與 <ruby> 以及 <rt> 標籤一同使用。ruby 元素由一個或多個字符（須要一個解釋/發音）和一個提供該信息的 rt 元素組成，還包括可選的 rp 元素，定義當瀏覽器不支持 "ruby" 元素時顯示的內容。
<ruby>
漢 <rt><rp>(</rp>ㄏㄢˋ<rp>)</rp></rt>
</ruby>

3.2.七、rt元素
定義字符（中文註音或字符）的解釋或發音。

3.2.八、rp元素
在 ruby 註釋中使用，以定義不支持 ruby 元素的瀏覽器所顯示的內容。

3.2.九、wbr元素
表示軟換行。與br元素的區別：br元素表示此處必須換行；wbr表示瀏覽器窗口或父級元素足弓寬時（不必換行時），不換行，而寬度不夠時主動在此處換行。

3.2.十、canvas元素
定義圖形，好比圖表和其餘圖像。<canvas> 元素只是圖形容器（畫布），必須使用腳原本繪製圖形。

            <canvas id="myCanvas"></canvas>
            <script type="text/javascript">
                var canvas = document.getElementById('myCanvas');
                var ctx = canvas.getContext('2d');
                ctx.fillStyle = '#FF0000';
                ctx.fillRect(0, 0, 80, 100);
            </script>

 

3.2.十一、command元素
表示命令按鈕，好比單選按鈕、複選框或按鈕。
只有當 command 元素位於 menu 元素內時，該元素纔是可見的。不然不會顯示這個元素，可是能夠用它規定鍵盤快捷鍵。。
<menu>
<command onclick="alert('Hello World')">
Click Me!</command>
</menu>

3.2.十二、details標籤 
用於描述文檔或文檔某個部分的細節 。
可與 summary 標籤配合使用，summary能夠爲 details 定義標題。標題是可見的，用戶點擊標題時，會顯示出 details。summary應該是details的第一個子元素。

3.2.1四、datalist標籤
定義選項列表。請與 input 元素配合使用該元素，來定義 input 可能的值。datalist 及其選項不會被顯示出來，它僅僅是合法的輸入值列表。使用 input 元素的 list 屬性來綁定 datalist。

3.2.1五、output標籤
定義不一樣類型的輸出，好比腳本的輸出。
<form action="form_action.asp" method="get" name="sumform">
<output name="sum"></output>
</form>

3.2.1六、menu標籤
定義菜單列表。當但願列出表單控件時使用該標籤。注意與nav的區別，menu專門用於表單控件。

3.三、多媒體標籤

若是須要在頁面中播放音頻與視頻咱們常常會用使用的方法有：

a)、embed

<embed src='http://player.youku.com/player.php/sid/XODIxNTY0NTQw/v.swf' allowFullScreen='true' quality='high' width='480' height='400' align='middle' allowScriptAccess='always' type='application/x-shockwave-flash'></embed>

<embed src="img/iceage4.mp4"></embed>

b)、使用flash播放器

如一些三方插件，flowplayer602

html5多媒體組件指的是video(視頻)組件和audio(音頻)組件。HTML5多媒體組件能夠在不借助諸如Flash Player等第三方插件的狀況下，直接在你的網頁上嵌入多媒體組件。瀏覽器提供原生支持視頻的新能力使得網頁開發人員更易於在不依賴於外置插件有效性的狀況下，在他們的網站上添加視頻組件。因爲蘋果公司現階段在iPhone和iPad上使用的Flash技術的侷限性，HTML5多媒體組件的能力就顯得尤其重要了。

3.3.一、video視頻標籤

用於在播放視頻，電影

標籤基本格式以下：

        <video width="800" height="600" controls="controls" poster="content/1.jpg">
            <source src="content/iceage4.mp4" type="video/mp4"></source>
            <source src="content/iceage4.webm" type="video/webm"></source>
            <object width="" height="" type="application/x-shockwave-flash" data="myvideo.swf">
                <param name="movie" value="myvideo.swf" />
                <param name="flashvars" value="autostart=true&amp;file=myvideo.swf" />
            </object>
            當前瀏覽器不支持 video直接播放，點擊這裏下載視頻： <a href="content/iceage4.webm">下載視頻</a>
        </video>

運行效果：

source是視頻源，能夠有多種，當一種失敗時將選擇下一種，主要有以下3種：

Ogg = 帶有 Theora 視頻編碼和 Vorbis 音頻編碼的 Ogg 文件
MPEG4 = 帶有 H.264 視頻編碼和 AAC 音頻編碼的 MPEG 4 文件
WebM = 帶有 VP8 視頻編碼和 Vorbis 音頻編碼的 WebM 文件

格式支持狀況：

 標籤屬性：

 source子標籤屬性：

 

video API方法

video API屬性

video API事件

注意：

        <video src="img/iceage4.mp4" controls="controls" poster="img/1.jpg">
            您的瀏覽器太老了，請升級，視頻下載<a href="#">地址</a>
        </video>

多數的HTML5標籤的innerHTML內容是瀏覽器不支持該標籤時顯示的內容。

事件綁定與監聽的區別：

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>事件綁定與監聽的區別</title>
    </head>

    <body>
        <button id="btnA">按鈕A</button>
        <button id="btnB">按鈕B</button>
        <script type="text/javascript">
            var btnA = document.getElementById("btnA");
            var btnB = document.getElementById("btnB");
            btnA.onclick = function() {
                alert("你點了一下");
            }
            btnA.onclick = function() {
                alert("你又點了一下");
            }
            
            btnB.addEventListener("click",function(event){
                alert("你點了一下");
            },false);
            
            btnB.addEventListener("click",function(event){
                alert("你又點了一下");
            },false);
        </script>
    </body>

</html>

運行結果：

使用on事件名的形式綁定事件後綁定會覆蓋前面綁定的事件，也就是最後一個綁定的事件會生效；

使用addEventListener綁定事件則不會覆蓋，可同時在一個元素上綁定多個相同的事件。

video API的屬性與事件示例：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Video 標籤</title>
    </head>
    <body>
        <video id="videoIce" width="800" height="600" controls="controls" poster="content/1.jpg">
            <source src="content/iceage4.mp4" type="video/mp4"></source>
            <source src="content/iceage4.webm" type="video/webm"></source>
            <object width="" height="" type="application/x-shockwave-flash" data="myvideo.swf">
                <param name="movie" value="myvideo.swf" />
                <param name="flashvars" value="autostart=true&amp;file=myvideo.swf" />
            </object> 當前瀏覽器不支持 video直接播放，點擊這裏下載視頻：
            <a href="content/iceage4.webm">下載視頻</a>
        </video>
        <h2>
            <button onclick="play()">播放</button>
            <button onclick="pause()">暫停</button>
            <span id="msg"></span>
        </h2>
        <script type="text/javascript">
           var videoIce=document.getElementById("videoIce");
            function play() {
                videoIce.play();
            }

            function pause() {
                videoIce.pause();
            }
            
            videoIce.ontimeupdate = function() {
                document.getElementById("msg").innerHTML=videoIce.currentTime;
            }
        </script>
    </body>

</html>

運行結果：

 練習：

3.3.二、audio音頻標籤

 audio能夠實現播放聲音，音樂功能。

<audio src=http://baidu/demo/test.mp3 controls >
您的瀏覽器不支持audio元素
</autio>

<audio src="content/fcml.mp3" controls="controls" autoplay="autoplay"></audio>

 

audio標籤的屬性，不少屬性都是與video相同的：

autoplay：true|false，若是是 true，則音頻在就緒後立刻播放。
controls：true|false 若是是true，則向用戶顯示控件，好比播放按鈕。
end：numeric value 定義播放器在音頻流中的何處中止播放。默認地，聲音會播放到結尾。
loopend：numeric value 定義在音頻流中循環播放中止的位置，默認是 end 屬性的值。
loopstart： numeric value 定義在音頻流中循環播放的開始位置。默認是 start 屬性的值。
playcount： numeric value 定義音頻片段播放多少次。默認是 1。
src： url 所播放音頻的 url。
start : numeric value 定義播放器在音頻流中開始播放的位置。默認地，聲音在開頭進行播放。

source子標籤

使用source元素做爲多媒體元素的子標籤
例:
<audio>
<source src='test.mp3’ type='audio/mpeg'/>
<source src='test.ogg’ type='audio/ogg'/>
<source src='test.spx’ type='audio/ogg'/>
</audio>
使用source元素，瀏覽器在列表順序查找，直到找到一個它能播放的文件格式，找到後，就播放該文件並忽略隨後的其它元素。

audio的API與video基本同樣，下面是一個自定義調整音量的示例：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>audio標籤</title>
    </head>
    <body>
        <h2>audio標籤</h2>
        <audio src="content/fcml.mp3" controls="controls" autoplay="autoplay" id="mp3">
            <marquee><h2>換個瀏覽器吧，太老了</h2></marquee>
        </audio>
        <input type="range" min="0" max="100" onchange="setVolume(this)" />  
        <script type="text/javascript">
            function setVolume(obj){
                document.getElementById("mp3").volume=obj.value*0.01;
            }
        </script>
    </body>
</html>

運行結果：

音量只在0-1之間。

3.3.三、embed元素 

用來嵌入內容(包括各類媒體)。格式能夠是Midi、Wav、AIFF、AU、MP3,flash等。例：<embed src="flash.swf" /> 
HTML4中代碼示例<object data="flash.swf" type="application/x-shockwave-flash"><object>

4、HTML5兼容性

時至今日多數現代瀏覽器對HTML5的支持已經很高了，特別是移動端，但HTML5仍是存在某些標籤的兼容性問題的，只要世界上還有1個以上的瀏覽器就會存在兼容問題，

4.一、兼容性測試

一、當前瀏覽器HTML5支持狀況在線測試：http://www.html5test.com/

IE8瀏覽器，得分33分，共555分

Chrome瀏覽器，54版，共555分，得分499分

二、當前瀏覽器對HTML五、CSS3的支持狀況：http://www.findmebyip.com/

三、各個瀏覽器對HTML五、CSS3支持狀況大全：http://www.caniuse.com/

能夠用於測試指定的HTML，CSS3，JavaScript新技術，以Web SQL Database的支持狀況爲例：

4.二、HTML5向下兼容

4.2.一、兼容測試

爲的測試兼容性，作一個簡單的示例，腳本以下：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>HTML5兼容</title>
        <style type="text/css">
            #section1{
                height: 200px;
                background: blue;
            }
        </style>
    </head>
    <body>
        <section id="section1"></section>
    </body>
</html>

IE8瀏覽效果：

爲何不顯示，由於IE8不認識section這個HTML5標籤，瀏覽器測試結果以下：

從IE9開始才部分支持HTML5中的標籤。

4.2.二、html5shiv

html5shiv能夠經過很簡單的JavaScript讓IE6-IE9瀏覽器都支持HTML5中的元素
HTML5 Shiv這可讓具備考古價值的Internet Explorer支持HTML5相關元素，同時爲IE6-9, Safari 4.x (以及iPhone 3.x), 以及Firefox 3.x提供基本的HTML5樣式。
項目地址：https://github.com/aFarkas/html5shiv

下載後在頁面中引入插件，代碼以下：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>HTML5兼容</title>
        <!--[if lt IE 9]>
          <script src="js/html5shiv.min.js" type="text/javascript" charset="utf-8"></script>
        <![endif]-->
        <style type="text/css">
            #section1 {
                height: 200px;
                background: blue;
            }
        </style>
    </head>
    <body>
        <section id="section1"></section>
    </body>
</html>

運行效果：

能夠看到在IE8下就能正常使用section了，可是建議在不支持HTML5的瀏覽器中避免使用HTML5標籤，能夠用div替代；

另外不要覺得使用了這個簡單的插件後全部的HTML5功能在不支持HTML5的瀏覽器中都有了，它只是作了簡單的兼容功能，如

video標籤在IE8中不能使用，使用了該插件後仍然不能播放視頻。

4.2.三、Modernizr

Modernizr 是一個用來檢測瀏覽器功能支持狀況的 JavaScript 庫。 目前，經過檢驗瀏覽器對一系列測試的處理狀況，Modernizr 能夠檢測18項 CSS3 功能以及40多項關於HTML5 的功能。 它比傳統檢測瀏覽器名稱（瀏覽器嗅探）的方式更爲可靠。 一整套測試的執行時間僅需幾微秒。 此外，Modernizr 網站經過定製腳本只對你感興趣的元素進行檢測，從而實現效率優化。
https://modernizr.com/

這裏以CSS3中的線性漸變爲例子，在支持CSS3的瀏覽器使用漸變，若是不支持則使用圖片，先生成檢測的js：

引入插件後的腳本以下：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>HTML5兼容</title>
        <style type="text/css">
            #div1 {
                height: 100px;
                background:linear-gradient(#36f,#9cf);
            }
            .no-cssgradients #div1{
                background:url(content/bg.png) repeat-x;
            }
        </style>
    </head>
    <body>
        <div id="div1"></div>
        <script src="js/modernizr-custom.js" type="text/javascript" charset="utf-8"></script>
    </body>
</html>

 

使用插件後，當頁面運行時會自動檢測瀏覽器是否支持某個特定的功能，若是支持則會在html標籤上添加一個類樣式如：cssgradients,若是不支持則會添加一個類樣式:no-*，如no-cssgradients。 

Modernizr.video   //在js中判斷是否支持video標籤

            Modernizr.on('video',function(result){
                alert(result);
            });

5、示例下載

 示例下載：github

https://coding.net/u/zhangguo5/p/HTML5_01/git(上課示例，小米素材)

6、做業

PC端：https://www.mi.com/index.html

移動端：https://m.mi.com

具體要求：http://www.cnblogs.com/best/p/6163294.html

做業2：

2.一、自定義一個簡單的播放器

2.二、調試全部上課示例

2.三、從幫助文檔中找到5個沒有上課教的HTML5標籤，查詢兼容性。

7、視頻

https://www.bilibili.com/video/av16293468/