HTML5

1.1.html5的新特性

  • 用于繪畫的canvas元素
  • 用于媒介回放的video和audio元素
  • 對本地離線存儲(chǔ)的更好支持
  • 新的特殊內(nèi)容元素，比如article,footer,header,nav,section
  • 新的表單控件，比如calendar,date,time,email,url,search

2.1.視頻類

  • 當(dāng)前，video元素支持三種視頻格式：Ogg,MPEG4,WebM
  • 在HTML5中顯示視頻，通過以下代碼
<video src="movie.ogg" contrlos="controls">
</video>
  • tips:
    1. control屬性提供添加播放、暫停、音量控件
    2. 也可以增加對于寬高的設(shè)定，通過width="400" height="400"
    3. <video>和</video>之間可以插入內(nèi)容以供不支持video元素的瀏覽器顯示
    4. 對于不同瀏覽器存在的支持視頻格式問題，也可以通過添加多條鏈接來預(yù)防，代碼如下
<video width="320" height="240" controls="controls">
    <source src="movie.ogg" type="video/ogg">
    <source src="movie.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
  • 【video】標(biāo)簽的屬性
    1. autoplay [autoplay="autoplay" 自動(dòng)播放]
    2. controls [controls="controls" 顯示控件]
    3. height [height="300" 設(shè)置高度]
    4. width [width="320" 設(shè)置寬度]
    5. loop [loop="loop" 重復(fù)播放]
    6. preload [preload="auto" 頁面加載后載入視頻，若設(shè)置了autoplay屬性則忽略該屬性]
    7. src [src="movie.ogg" 規(guī)定要播放的視頻的url，也可以使用<source>標(biāo)簽來設(shè)置]
  • HTML5 video + DOM 進(jìn)行控制

3.1.音頻類

  • <audio>標(biāo)簽類似與<video>標(biāo)簽。
  • 使用代碼如下
<audio src="song.ogg" controls="controls">
    Your browser does not support the audio tag.
</audio>

4.1.HTML5拖放（drag和drop）

  • 簡單拖放事件的分析
  1. 設(shè)置元素為可拖放
    <img draggable="true">
  2. 拖動(dòng)什么（ondragstart和setData()），然后規(guī)定當(dāng)元素被拖動(dòng)時(shí)，會(huì)發(fā)生什么
  • ondraggable屬性調(diào)用一函數(shù)drag(event)，其規(guī)定了被拖動(dòng)的數(shù)據(jù)
  • dataTransfer.setData()設(shè)置被拖數(shù)據(jù)的數(shù)據(jù)類型和值
  • 如下例子中，數(shù)據(jù)類型是"Text",值是可拖動(dòng)元素的id("drag1")
function drag(event)
{
    event.dataTransfer.setData("Text",event.target.id);
}
  1. 放到何處（ondragover），默認(rèn)的無法將數(shù)據(jù)或元素放置到其他元素中，所以如果需要設(shè)置允許放置，我們必須阻止對元素的默認(rèn)處理方式，即調(diào)用ondragover事件的event.preventDefault()
  2. 進(jìn)行放置（ondrop）
  • 通過dataTransfer.getdata("Text")方法獲得被拖的數(shù)據(jù)，返回在setData()中設(shè)置為相同類型的任何數(shù)據(jù)。
  • 被拖數(shù)據(jù)是被拖元素的id（“drag1”）
function drop(event)
{
    event.preventDataFault();
    var data=event.dataTransfer.getData("Text");
    event.target.appendChild(document.getElementById(data));
}

簡單拖放事件的代碼如下

<!doctype html>
<html>
    <head>
        <script type="text/javascript">
            function allowDrop(event)
            {
                event.preventDefault();
            }
            
            function drag(event)
            {
                event.dataTransfer.setData("Text",event.target.id);
            }
            
            function drop(event)
            {
                event.preventDefault();
                var data=event.dataTransfer.getData("Text");
                event.target.appendChild(document.getElementById(data));
            }
        </script>
    </head>
    
    <body>
        <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
        
        ![](img_logo.gif)
    </body>
</html>
  • 操作實(shí)例（一個(gè)圖片拖到一個(gè)里面）：
<!doctype>
<html>
    <head>
        <style type="text/css">
            #div1 {
                width:198px;
                height:66px;
                padding:10px;
                border:1px;
                border-style;solid;
            }
        </style>
        
        <script type="text/javascript">
            function allowDrop(event)
            {
                event.preventDefault();
            }
            function drag(event)
            {
                event.dataTransfer.setData("Text",event.target.id);
            }
            function drop(event)
            {
                event.preventDefault();
                var data=event.dataTransfer.getData("Text");
                event.target.appendChild(document.getElementById(data));
            }
        </script>
    </head>
    <body>
        <p>請將圖片拖放到矩形中：</p>
        <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
        <br>
        ![](/i/eg_dragdrop_w3school.gif)
    </body>
</html>
  • 來回拖放圖片
<!DOCTYPE>
<html>
    <head>
        <style type="text/css">
            #div1, #div2
            {
                float:left;
                width:198px;
                height:66px;
                margin:10px;
                padding:10px;
                border:1px;
                border-style:solid;
            }
        </style>
        
        <script type="text/javascript">
            function allowDrop(event)
            {
                event.preventDefault();
            }
            function drag(event)
            {
                event.dataTransfer.setData("Text",event.target.id);
            }
            function drop(event)
            {
                event.preventDefault();
                var data=event.dataTransfer.getData("Text");
                event.target.appendChild(document.getElementById(data));
            }
        </script>
    </head>
    <body>
        <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">
        ![](/i/eg_dragdrop_w3school.gif)
        </div>
        
        <div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
    </body>
</html>

5.1.canvas

  • canvas擁有多種繪制路徑、矩形、圓形、字符以及添加圖像的方法
  • 添加canvas元素規(guī)定元素的id、寬度和高度
    <canvas id="myCanvas" width="200" height="100"></canvas>
  • canvas元素本身沒有繪圖能力，所有繪制工作必須在javascript內(nèi)部完成
  • 例如
    1. javascript使用id來尋找canvas元素
      var c=document.getElementById("myCanvas");
    2. 然后創(chuàng)建context對象。getContext（“2d”）對象是內(nèi)建的HTML5對象，擁有多種繪制路徑、矩形、圓形、字符以及添加圖像的方法
      var cxt=c.getContext("2d");
    3. 繪制一個(gè)紅色的矩形。fillStyle將其染成紅色，fillRect規(guī)定了形狀、位置和尺寸
cxt.fillstyle="#ff0000";
cxt.fillRect(0,0,150,75);

<script type="text/script">
    var c=document.getElementById("myCanvas");
    var cxt=c.getContext("2d");
    cxt.fillStyle="#FF0000";
    cxt.fillRect(0,0,150,75);
</script>

6.1.SVG

  • svg指可伸縮矢量圖形scalable vector graphics
  • svg使用xml格式定義圖形
  • svg是萬維網(wǎng)聯(lián)盟的標(biāo)準(zhǔn)

7.1.svg與canvas的比較

  • svg是一種使用xml描述2d圖形的語言，其基于xml，即svg dom中的每個(gè)元素都是可用的，可為某個(gè)元素附加javascript事件處理器，在svg中，每個(gè)被繪制的圖形均被視為對象。若svg對象的屬性發(fā)生變化，那么瀏覽器能自動(dòng)重現(xiàn)圖形
  • canvas通過JavaScript繪制2D圖形，為逐像素進(jìn)行渲染，一旦圖形被繪制完成，它就不會(huì)繼續(xù)得到瀏覽器關(guān)注，若其位置發(fā)生變化，則整個(gè)場景也需要重新繪制包括任何或許已被圖形覆蓋的對象
Canvas SVG
依賴分辨率 不依賴分辨率
不支持事件處理器 支持事件處理器
弱的文本渲染能力 最適合帶有大型渲染區(qū)域的應(yīng)用程序（如谷歌地圖）
能夠以.png或.jpg格式保存結(jié)果圖形 復(fù)雜度高會(huì)減慢渲染速度（任何過度使用DOM的應(yīng)用都不快）
最適合圖像密集型的游戲，其中的許多對象會(huì)被頻繁重繪 不適合游戲應(yīng)用

8.1.地理定位

  • 使用getCurrentPosition()來獲得用戶的位置

9.1.Web存儲(chǔ)

  • HTML5提供兩種在客戶端存儲(chǔ)數(shù)據(jù)的新方法
  • localStorage 沒有時(shí)間限制的數(shù)據(jù)存儲(chǔ)
  • sessionStorage 針對一個(gè)session的數(shù)據(jù)存儲(chǔ)
  • HTML5使用JavaScript來存儲(chǔ)和訪問數(shù)據(jù)

10.1.應(yīng)用程序緩存Application Cache

  • 通過創(chuàng)建cache manifest文件，來輕松的創(chuàng)建web應(yīng)用的離線版本

11.1.Web Workers

  • Web Workers是運(yùn)行在后臺(tái)的JavaScript，獨(dú)立于其他腳本。

12.1.服務(wù)器發(fā)送事件

  • HTML5服務(wù)器發(fā)送事件（server-sent event）允許網(wǎng)頁獲得來自服務(wù)器的更新。
剩下的未看內(nèi)容

修改于20171017

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

推薦閱讀更多精彩內(nèi)容