HTML5的新特性

時間 2019-11-21

標籤 html5 html 特性欄目 HTML5 简体版

原文原文鏈接

HTML5 是下一代的 HTML，新增了很多的標籤啊什麼的，今天就總結一波（悄咪咪實際上是由於面試題好多都在考這個點javascript

視頻/音頻

<video>

// 基本用法
<video src='movie.ogg'>
    這裏的內容是供不支持 video 元素的瀏覽器顯示的
</video>



// 一些常見的屬性
autoplay：視頻在就緒後馬上播放
controls：向用戶顯示空間，好比播放/暫停按鈕
height：視頻播放器的高度
loop：循環播放
preload：視頻在頁面加載時進行播放，但若是使用 autoplay，則忽略改屬性
src：播放視頻的url
width：視頻播放器的寬度

<audio>

// 基本用法
<audio src='song.org'>
    這裏的內容提供給不支持 audio 元素的瀏覽器顯示
</audio>


// 基本屬性
autoplay：音頻就緒當即播放
controls：向用戶顯示空間，好比播放/暫停按鈕
loop：循環播放
preload：與 video 同樣
src：播放音頻的url

拖放：即抓取對象之後拖到另一個位置。HTML5中任何元素都可以拖放

 1 // 實現拖放
 2 <!DOCTYPE HTML>
 3 <html>
 4     <head>
 5         <script type='text/javascript'>
 6             function allowDrop(ev){
 7                 ev.preventDefault();
 8             }
 9             
10             function drag(ev){
11                 ev.dataTransfer.setData('Text', ev.target.id);
12             }
13 
14             function drop(ev){
15                  ev.preventDefault();
16                  var data = ev.dataTransfer.getData('Text');
17                  ev.target.appendChild(document.getElementById(data));
18             }
19         </script>
20     </head>
21 　　<body>
22     　　<div id='div1' ondrop='drop(event)' ondragover='allowDrop(event)'></div>
23 　　　　 <img id='drag1' src='image.git' draggable='true' ondragstart='drag(event)' width='330' height: '330' />
24 　　</body>
25 </html>

解析一下上面的代碼，咱們看到了 ondrop, ondragStart, ondragOver, draggable。他們分別表明的意思是什麼呢？html

ondrop：當放置被拖數據時，會發生 drop 事件。例如上面代碼將<img>拖動放到<div>中，ondrop屬性調用了drop函數。再看一下 drop 函數

function drop(ev){
    ev.preventDefault();
    var data = ev.dataTransfer.getData('Text');
    ev.target.appendChild(document.getElementById(data));
}

- 調用 preventDefault() 來避免瀏覽器對數據的默認處理（drop 事件的默認行爲是以連接形式打開）

- 經過 dataTransfer.getData("Text") 方法得到被拖的數據。該方法將返回在 setData() 方法中設置爲相同類型的任何數據。

- 被拖數據是被拖元素的 id ("drag1")
- 把被拖元素追加到放置元素（目標元素）中

ondragStart：ondragstart 屬性調用了一個函數，drag(event)，它規定了被拖動的數據。

function drag(ev){
    ev.dataTransfer.setData("Text",ev.target.id);
}

// 數據類型是 "Text"，值是可拖動元素的 id ("drag1")。

ondragOver：ondragOver 屬性調用了一個函數，allowDrop(event)，規定了拖動的元素放在何處
draggable：這個屬性將元素設定爲可拖放的。

畫布

Canvans 元素使用 JavaScript 在網頁上繪製圖像，畫布是一個矩形區域，能夠控制每個像素。

使用方法：

// 建立 Canvas 元素
<canvas id='myCavans' width='200' height='100'></canvas>

// JS 繪製
<script type='text/javascript'>
    var c = document.getElementById('myCavans');
    var cxt = c.getContext('2d'); // 建立 context 對象
    cxt.fillStyle='#f00';  // 染色
    cxt.fillRect(0, 0, 150, 75);  // 規定形狀、尺寸和位置，從(0, 0)開始繪製 150x75 的矩形
}

SVG 指可伸縮矢量圖形，再放大或改變尺寸的狀況下起圖形直亮不會有損失。
地理位置 HTML5 Geolocation(地理位置) 用於定位用戶的位置

localStorage

localSotrage 方法存儲的數據沒有時間限制，不手動清除則永遠存在

// 新建一個key-value放入localStorage
localStorage.setItem(key, value);

// 獲取key值對應的value值
localStorage.getItem(key);

// 移除某一個localStorage項
localStorage.removeItem(key);

// 清除全部
localStorage.clear();

sessionStorage

sessionStorage 與 localStorage 類似，不一樣在於localStorage 裏面存儲的數據沒有過時時間的設置，而存儲在 sessionStorage 裏面的數據在頁面回話結束後就會被清除。也就是說當這個瀏覽頁面被關閉以後sessionStorage就會被清除。

// API
sessionStorage.setItem(key, value);

sessionStorage.getItem(key);

sessionStorage.removeItem(key);

sessionStorage.clear();

cookie的缺點：cookie 不適合大量數據的存儲，由於它們由每一個對服務器的請求來傳遞，這使得 cookie 速度很慢並且效率也不高。

應用緩存
- 什麼是應用緩存？經過建立 cache manifest 文件，能夠輕鬆的建立 web 應用的離線版本。
- 優點：離線瀏覽——用戶能夠在沒有網絡的狀況下瀏覽到基礎的頁面；速度——以緩存的資源加載得更快；減小服務器負載——只會從服務器上下載更新或更改過得資源。
- 除了 IE，其餘全部得主流瀏覽器均支持應用程序緩存
- 如何使用
```
<!DOCTYPE HTML>
<html manifest='demo.appcache'>
<body>
    The content of the document...
</body>
</html>
```
- Manifest 基礎 —— 須要啓動應用程序緩存，便在文檔得 <html> 標籤中包含 manifest 屬性。manifest 文件得建議文件擴展名是 .appcache
- Manifest 文件
  - CACHE MANIFEST —— 在此標題下列出的文件將在首次下載後緩存
  - NETWORK —— 在此標題下列文件須要與服務器鏈接，且不會被緩存
  - FALLBACK —— 在此標題下列出的文件規定當頁面沒法訪問時的回退頁面（好比404頁面）
表單
- 新增多個表單輸入類型，提供更好的輸入控制和驗證 (type='email' 等等)
  - email
  - url
  - number
  - range
  - Date pickers(date, month, week, time, datetime, datetime-local)
  - search
  - color

- 新增的表單元素
  - <datalist>
    datalist 元素規定輸入域的選項列表。java
    
    列表是經過 datalist 內的 option 元素建立的。git
    
    如需把 datalist 綁定到輸入域，請用輸入域的 list 屬性引用 datalist 的 id：web
  - <keygen> keygen 元素的做用是提供一種驗證用戶的可靠方法。
  - <output> output 元素用於不一樣類型的輸出，好比計算或腳本輸出
- 新增的一些屬性
  - <form> 屬性
    - autocomplete 自動完成功能
    - novalidate 表單提交不驗證form和input域
  - <input> 屬性
    - autocomplete 自動完成
    - autofocus 自動得到焦點
    - form
    - form overrides
    - height,width
    - min, max, step 輸入域容許的最大值/最小值/規定合法的數字間隔
    - pattern
    - placeholder
    - required

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。