前端HTML5十大新特性詳細總結-有解無憂

前端HTML5十大新特性總結

一必須知道

寫前端的都知道，在代碼最前面都有這一行代碼，大家都知道一定要把這東西寫上去，

<!DOCTYPE html>

但是！這是什么玩意兒？為什么要寫上去?不寫上去會怎么樣？很少人去注意到，反正就照寫就可以了，

所以，這是個啥玩意兒?
這是宣告！這是HTML5宣告的新特性！

既然有HTML5，那肯定有HTML4是吧，那HTML4是怎么宣告的呢？

HTML4有三種宣告方式
Strict（嚴格模式
Transitional（過渡模式）
Frameset（框架模式）
具體是什么樣的宣告格式，有興趣百度谷歌，（因為現在很少用了，所以我也懶得去記住了TT）

HTML5很簡單只需要統一宣告
宣告有什么作用呢？
它就是用來告訴瀏覽器檔案使用哪一種HTML或者XHYML規范的，

<!DOCTYPE html>

那為什么可以這么用呢？

百度給的解釋：因為HTML5不是SGML的子集，從最開始的宣告方式就不一樣了，

那么問題又來了，什么是SGML呢？一看就是某些英文單詞的首字母拼湊在一起的是吧，

那是什么呢？SGML是Standard Generalized Markup Language，標準通用標記語言，是一種很復雜的標記語言，從HTML,XML,衍生而來的，

HTML5的新特性之宣告就寫到這吧，也理解了這一行必須寫的代碼是個啥玩意兒！

二 HTML5十大新特性

在這里插入圖片描述

2.1 語意標簽

什么是語意標簽，我自己的理解就是看到標簽我就能明白這是什么意思，以前制作網頁布局基本使用div來做，div就是一個普通的塊級標簽，對搜索引擎來說沒有任何的語意，
btw面試前端的時候面試官可能會問你語意標簽有哪一些？這平時都是記不住的，都是用到再去查的，所以面試的時候再去復習吧，
HTML5新增的語意標簽有以下這個幾個，這幾個很好記住，在理解的基礎上記住，我是在紙上畫出頁面的大概布局，然后劃磁區域，填入該區域的標簽，根據意思去填，比如頭部，就是header對吧，很簡單，

Q：對整個HTML結構進行語意化的規范操作有什么好處？
A：1 有利于SEO（Search Engine Optimization 搜索引擎優化），和搜索引擎建立良好的溝通，有助于爬蟲爬取更多有效的資訊，因為爬蟲依賴于標簽來確定背景關系和各個關鍵字的權重，
2 方便其他設備的決議（螢屏閱讀器，移動設備），以有意義的方式來渲染網頁，
3 方便團隊開發和維護，增加代碼可讀性，遵循標準，減少差異化，

<!--header:網頁的頭部，作為一個網頁內容快的標題-->
<header></header>
<!--nav:導航欄部分，定于整個頁面的主要導航部分-->
<nav></nav>
<!--section：網頁的一個內容區塊-->
<section></section>
<!--aside：側邊欄，可以是相關鏈接或者資料-->
<aside></aside>
<!--artical：區塊內的一個獨立區域，定義自成一體獨立的內容-->
<artical></artical>
<!--footer:網頁的尾部，可以是作者，著作權資訊，附錄等等-->
<footer></footer>

attention
語意化標簽主要是針對搜索引擎
新標簽可復用
瀏覽器兼容問題，在IE9中（2021最新版），需要轉化為塊級元素，

header,nav,main{
    diaplay:block;
}

結構代碼可以這么寫

/*結構代碼*/
<header>
	<nav>導航欄</nav>
</header>
<section>
	<aside>側邊欄</aside>
	<article>獨立內容塊</article>
</section>
<footer>尾部</footer>

/*還有一個<main>主題標簽了解一下就可以了*/

頁面布局構圖是這樣的！
網頁布局清晰有條理，用戶體驗感也提升了不少，我們在瀏覽網頁的時候都希望有一個清晰的邏輯和瀏覽順序，容易catch到我們需要獲取的資訊，
在這里插入圖片描述

2.2 增強型表單

新的表單型別

（1）郵箱驗證

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>郵箱驗證</title>
    <style>

    </style>
</head>
<body>
    <form>
        <input type="email">
        <input type="submit">
    </form>
</body>
</html>

效果展示

在這里插入圖片描述

這個是新增的輸入框型別，user在輸入框填寫后提交資訊，自動驗證email域的值是否合法有效

（2）數值輸入

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>數值輸入</title>
    <style>

    </style>
</head>
<body>
    <form>
        <input type="number" min="9" max="12">
        <!--限制輸入的數值范圍在9-12之間，包括9和12-->
        <input type="submit">
    </form>
</body>
</html>

效果展示

在這里插入圖片描述

這是新增的數值型別，輸入的值不在區間范圍內，會自動提示，

（3）檔案匯入

attention：上傳本地檔案，需js代碼配合，如果需要上傳多個檔案，給表單添加mulitiple屬性，如果上傳圖片，給表單添加enctype屬性，

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>檔案匯入</title>
    <style>

    </style>
</head>
<body>
    <form enctype="multipart/form-data">
        <input type="file" id="myFile" multiple>
        <input type="submit">
    </form>
    <img src="" id="myPhoto" alt="photo">
</body>
<!--js代碼展示-->
<script>
	const myFile = document.getElementById('myFile')
	const myPhoto = document.getElementById('myPhoto')
	myFile.onchange = ()=>{
		console.log(myFile.files)
		const file = myFile.files[0]
		const read = new FileReader()
		//轉譯檔案地址
		read.readAsDataURL(file)
		//檔案加載完成就顯示出來
		read.onload = ()=>{
			myPhoto.src = read.result
		}
	}
</script>
</html>

（4）圖片按鈕

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>圖片按鈕</title>
    <style>

    </style>
</head>
<body>
    <form>
        <input type="image" src="C:\Users\Gabrielle\Desktop\myPhoto.jpg" width=750 alt="myGimdong">
        <!--src里面填寫的是我電腦的本地圖片絕對路徑，請添加你自己的本地圖片的絕對路徑或者相對路徑-->
    </form>
</body>
</html>

效果展示
在這里插入圖片描述

（6）顏色選擇

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>顏色選擇</title>
    <style>

    </style>
</head>
<body>
    <form>
        <input type="color">
        <input type="submit">
    </form>
      
</body>
</html>

效果展示

在這里插入圖片描述

選擇調色板pick顏色，或者手動輸入RGB的值，都可以選擇顏色，

（7）日期表示

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>日期表示</title>
    <style>

    </style>
</head>
<body>
    <form>
        <input type="date">
        <!--日期選擇出來date，還有datatime，datatime-local-->
        <input type="submit">
    </form>
      
</body>
</html>

效果展示

在這里插入圖片描述

（8）搜索框

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>搜索框</title>
    <style>

    </style>
</head>
<body>
    <form>
        <input type="search" placeholder="我是輸入欄位為空時的提示資訊">
        <input type="submit">
    </form>
      
</body>
</html>

效果展示
在這里插入圖片描述

（9）手機號碼輸入框（pc端沒有特別明顯的效果，主要用于手機移動端）

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>手機輸入框</title>
    <style>

    </style>
</head>
<body>
    <form>
        <input type="tel">
        <input type="submit">
    </form>   
</body>
</html>

效果展示

在這里插入圖片描述

（10）網址輸入框

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>網址入框</title>
    <style>

    </style>
</head>
<body>
    <form>
        <input type="url">
        <input type="submit">
    </form>   
</body>
</html>

效果展示

在這里插入圖片描述

這個表單可以驗證網址是否合法有效，必須為http格式，

新的表單的新屬性

（1）placeholder

這個屬性是文本的占位符，相當于一種提示資訊，顯示在輸入域，描述期待user輸入的值，

<input type="text" placeholder="請輸入文字">

（2）required

這個屬性的值為Bool，默認為true，意思是在輸入域不能為空

<input type="text" required>

（3）autofocus

auto是自動的意思，focus是聚焦的意思，這個屬性描述的就是自動聚焦到需要填寫的textarea，

<input type="text" autofocus>

（4）autocomplete

這個屬性有兩個值，一個是on，另一個是off，默認是on，與email相反，email默認是off，功能是提示寫過的資訊，

attention：這個屬性一定要和name一起使用，不然是不合法不生效的，

<input type="text" name="username" autocomplete>

（5）minlength和maxlength

這個屬性限定輸入的最少字數和最多字數，以字符個數計數，

<input type="text" min="9" max="15">

2.3視頻和音頻

很多的視頻都是通過插件（比如flash）來實作的，但并不是所有的瀏覽器都擁有相同的插件，為了能讓視頻和音頻在網頁內播放成功，HTML5規定了一種通過video，audio來包含視頻播放的標準，

video----支持格式有ogg，MP3，webm

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>video標簽</title>
    <style>

    </style>
</head>
<body>
   <video src="xxx.ogg"></video>
   <video src="xxx.mp4"></video>
   <!--可以嵌套多個video標簽，用于表現同一個播放源的多種播放方式，第一個視頻格式不支持的時候會輪到下一個標簽，直到成功-->
   Sorry, your browser doesn't support video. Try another browser.
</body>
</html>

video的方法，屬性，事件可以使用js來控制，

方法：play(),pause(),load(),分別是播放，停止，加載方法，

屬性：width,height,controls，width和height屬性值為像素或者百分比，功能是設定播放視窗的寬度和高度，controls屬性值為boolean，功能是控制播放條，

控制：使用DOM

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>video</title>
    <style>

    </style>
</head>
<body>
    <div style="text-align: center;">
      <button onclick="playPause">play/pause</button>
      <button onclick="makeBigger">bigger</button>
      <button onclick="makeSmaller">smaller</button>
      <button onclick="makeNormal">normal</button>
    </div>
  <video id="myVideo" width="420">
      <source src="xxx.ogg">
      <source src="xxx.mp4">
    Sorry, your browser doesn't support video. Try another browser.
  </video>
</body>
<script>
    var myVideo = document.getElementById("myVideo");

    function playPause(){
        if(myVideo.paused)
        myVideo.play();
    }

    function makeBigger(){
        myVideo.width = 560;
    }

    function makeSmaller(){
        myVideo.width = 320;
    }

    function makeNormal(){
        myVideo.width = 420;
    }
</script>
</html>

audio----支持格式有ogg,Wav,mp3

audio可以實作與flash相同的功能，比如回放，跳轉緩沖等等，與video用法相似，

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>audio標簽</title>
    <style>

    </style>
</head>
<body>
   <audio controls>
       <source src="xxx.mp3">
       <source src="xxx.Wav">
   </audio>
   Sorry, your browser doesn't support audio. Try another browser.
</body>
</html>

屬性：autoplay：自動播放，值的型別為bool，默認為true，

? controls：進度條控制，值的型別為bool，

? loop：回圈播放，值的型別為bool，

? muted：靜音播放，值的型別為bool，

? poster：預加載圖片在播放視頻之前，值為圖片路徑URL，就是我們通常理解的視頻封面，

2.4 canvas繪圖

canvas的 html代碼很簡單，主要重點是js代碼的撰寫，

繪圖步驟

1 在html5頁面中添加canvas元素，定義id方便js呼叫，

<canvas id="myCanvas" width = 500 height = 200></canvas>

2 在js代碼中通過id獲取

var c = document.getElementById(myCanvas);

3 通過getContext()的方法來獲取背景關系Context，創建context物件，獲取2d繪制環境

var context = c.getContext("2d");

4 通過js腳本繪制,你喜歡畫什么就畫什么，

2.5 SVG繪圖

這是使用xml描述2d圖形的語言，

那什么是xml呢？xml功能是傳輸和存盤資料，

那傳輸了存盤了資料，我怎么看見它呢？是的，這就是html的功能了，用來顯示資料，可視化給user，

SVG繪圖和canvas繪圖都是用來畫圖，那有什么區別呢？

SVG比canvas繪圖好用，SVG不容易失幀，就是更穩定的意思，SVG對前端程式員更友好一點，它比較容易編輯，只需要從描述中移除元素就可以了，

circle畫圓（舉個栗子）

<svg version="相關版本號，比如1.1">
      <circle cx = "100" cy = "50"stroke="red" stroke-width="5" fill="black"/>
      <!--
			cx:圓心的(x軸)橫坐標
			cy:圓心的(y軸)縱坐標
			r:圓心的半徑
			stroke：外邊線條的顏色
			stroke-width：外邊線條的寬度
			fill：圓填充的顏色
	  -->
</svg>

2.6 地理位置

地理位置能夠識別你的定位，并且與別人共享地理資訊，那么怎么獲取地理位置資訊呢？

獲取地理位置的方法？

1 通過ip地址

2 電腦上的位置資訊定位

利用基站獲取網路位置，只能獲取大致位置，不夠精確，
通過衛星定位獲取經緯度資訊的GPS設備，誤差很小，位置精準，但GPS開啟定位有延遲，

attention：瀏覽器必須在用戶允許情況下才可以發送用戶的位置資訊給服務器，

地理位置API

Q:什么是API？

A:API是Application Programming Interface，即應用程式介面，是預先定義的介面（函式，http介面）

（1）呼叫位置函式

function get_location() {
  navigator.geolocation.getCurrentPosition(show_map, handle_error, PositionOptions);
}//這段js代碼功能是觸發瀏覽器彈出資訊條，詢問user是否分享地理位置，
//show_map是獲取位置資訊成功的回呼函式
//handle_error是獲取位置資訊失敗的回呼函式
//PositionOptions是獲取地理位置的設定物件

（2）show_map獲取地理位置

function show_map(position) {
  var latitude = position.coords.latitude;//獲取緯度
  var longitude = position.coords.longitude;//獲取經度
}//回呼函式要傳入position物件
//position 物件的屬性：
//coords.latitude 緯度，度
//coords.longtitude 經度，度
//coords.altitude 海拔，米
//coords.accuracy 精確度，米
//coords.altitudeAccuracy 海拔精確度，米
// coords.heading 方向，度，順時針，以正北為基準
//coords.speed 速度，米/秒
//timestamp 時間戳，類似 Date() 物件
//這些屬性會因為用戶的設備和后臺定位的服務器不同而出現屬性值為null

（3）handle_error容錯處理

function handle_error(e) {
  switch(e.code)  {//code錯誤型別
    case e.PERMISSION_DENIED:
      //用戶拒絕對獲取地理位置的請求，
          //user點擊不共享或者拒絕位置共享
      break;
    case e.POSITION_UNAVAILABLE:
      //位置資訊是不可用的，
          //網路不可用或者無法連接到獲取位置資訊的衛星
      break;
    case e.TIMEOUT:
      //請求用戶地理位置超時，
          //網路可用但是計算超時間
      break;
    case e.UNKNOWN_ERROR:
      //未知錯誤，
      break;
  }
}

（4）PositionOptions 物件設定

navigator.geolocation.getCurrentPosition(show_map, handle_error, {enableHighAccuracy: true,timeoout: 170000, maximumAge: 87000})
//enableHighAccuracy 開啟高精度定位，默認 false
//timeout字面意思，網路請求超時
//maximumAge允許user將一定時間內快取的位置資訊快速回傳給Web應用，默認值0ms

（5）watchPosition() 持續獲取

定位檢測用戶位置的更改，設備自己會找尋一個最佳的時間間隔，定時更改位置資訊，

var watch = navigator.geolocation.watchPosition(show_map, handle_error, {enableHighAccuracy: true,timeoout: 170000, maximumAge: 87000})
clearWatch(watch);//這個方法用于停止監測user位置資訊的更改，

2.7 拖放API

1 設定元素為可拖放

一般情況下，一個元素的默認拖拽屬性為false，想要在頁面拖拽元素，就要把屬性這是為true

<img draggable = "true">

2 拖放什么? 用setData()或者ondragstart，

現在允許拖放了，那么拖拽什么?拖拽的時候會發生什么，觸發什么事件?

function drag (event){
        event.dataTransfer.setData("Text",event.target.id);
}//dataTransfer.setData() 方法設定被拖資料的資料型別和值：

3 放置元素

現在拖放出來了，你要把元素安置到哪里去呢？這是一個問題，一般默認不能把元素放置其他元素中，如果需要，必須要對元素的默認方式進行處理，那要怎么辦呢？

event.preventDefault()
//通過呼叫 ondragover 事件的event.preventDefault()方法：

4 進行放置

現在放置到哪里我們處理了，但是缺乏一個動作事件，當放置被拖資料時，會發生 drop 事件，ondrop 屬性呼叫了一個函式，drop(event)，

function drop(event)        
{        
event.preventDefault();        
var data=event.dataTransfer.getData("Text");        
event.target.appendChild(document.getElementById(data));        
}
//preventDefault()避免瀏覽器對資料的默認處理，drop事件的默認行為是以連接的形式打開
//dataTransfer.getData("Text")獲取拖拽的資料，該方法將回傳在setData()方法中設定為相同型別的任何資料

attention：拖拽是一個重點，需要熟練，

data Transfer，getData()只在ondrop中可以用

// 元素放置目標區域，進入目標區域觸發 ondragenter 事件
ondragenter()

// 進入目標區域后觸發 ondragover 事件，會一直回應over事件不會觸發ondrag
ondragover = function(event) {
    event.preventDefault();
}

// 元素放置目標區域，離開目標區域觸發 ondragleave 事件
ondragleave()

// 元素放置目標區域，滑鼠彈起觸發 ondrop 事件
ondrop = function(event) {
    // 從開始觸發時 dataTransfer.setData() 獲取儲存的資料
    // 獲取dataTransfer.getData() 其他回呼事件無法獲取 getData()
    this.append(document.getElementById(event.dataTransfer.getData('xxx')));
}

拖拽目標物件的方法

setData(format,data)
getData(format)
clearData([format])
addElement(element)
setDragImage(element,x,y)

setData(format,data)

將指定格式的資料賦值給dataTransfer物件，引數format定義資料的格式也就是資料的型別，data為待賦值的資料

getData(format)

從dataTransfer物件中獲取指定格式的資料，format代表資料格式，data為資料，

clearData([format])

從dataTransfer物件中洗掉指定格式的資料，引數可選，若不給出，則為洗掉物件中所有的資料

addElement(element)

添加自定義圖示

setDragImage(element,x,y)

設定拖放操作的自定義圖示，其中element設定自定義圖示，x設定圖示與滑鼠在水平方向上的距離，y設定圖示與滑鼠在垂直方向上的距離，

拖拽屬性值

none：不能把拖動的元素放在這里，這是除了文本框之外所有元素默認的值，
move：把拖動的元素移動到放置目標，
copy：把拖動的元素復制到放置目標，
link：放置目標會打開拖動的元素(但拖動的元素必須是個鏈接URL地址)，

拖拽的node
定義三個變數
1 當前拖拽的node
2 拖拽時經過的node
3 最終放置的node

敲黑板，后面這個三個新特性是重點！！！！！

2.8 Web Worker

web worker 是運行在后臺的 JavaScript，
Q1：JS是怎么執行的？
A1：JS是單執行緒執行模式，

Q2：什么是單執行緒模式？
A2：所有任務只能在一個執行緒上執行，一次只做一件事情，前面的沒有執行完，后面的只能等待，

Q3：有什么不好的地方嗎？
A3：1 現在的CPU大多數是多核的，計算能力牛逼到不行，單執行緒無法發揮出CPU計算的價值，
2 頁面上JS在執行的時候會阻塞瀏覽器的回應，影響用戶體驗，畢竟頁面是為用戶服務的，

Q4：Web Worker解決了什么問題？
A4：為js創建多執行緒環境，js在主執行緒執行，new一個子執行緒在后臺執行，worker完成計算的任務回傳給主執行緒，UI互動流暢，不會被阻塞，主執行緒中的代碼執行會導致瀏覽器回應阻塞，而子執行緒代碼執行不會，主執行緒和子執行緒兩者互補干擾，獨立執行，

attention：操作web worker之前最重要的是檢測瀏覽器是否支持，現在主流的瀏覽器對Web Worker兼容性并不高，比如Safari，更不用說IE瀏覽器了，但是這并不代表它沒用，

 if(typeof(Worker)!=="undefined")
   {
   // yes
   }
 else
   {
   // no
   }

創建web worker檔案

 var i=0;
 function timedCount()
 {
     i=i+1;
     postMessage(i);
     setTimeout("timedCount()",600);
 } 
 timedCount(); 
 //計數器

創建web worker物件

上一步已經創建了一個web worker檔案，現在需要在html頁面呼叫它，

1 先檢測檔案是否存在

 if(typeof(w)=="undefined")
   {
   w=new Worker("myworkers.js");
   }

2 然后我們就可以從 web worker 發送和接收訊息了，向 web worker 添加一個 “onmessage” 事件監聽器，

 w.onmessage=function(event){
 document.getElementById("result").innerHTML=event.data;
 };

3 終止web worker

當我們創建 web worker 物件后，它會持續監聽訊息（即使在外部腳本完成之后）直到其被終止為止，如需終止 web worker，并釋放瀏覽器/計算機資源，可以用terminate() 方法，

 worker.terminate();

Web Worker有五個限制
（1)同源限制：分配給Worker執行緒運行的腳本檔案，必須與主執行緒的腳本檔案同源，
（2）DOM限制：worker只能讀取navigator物件和location物件，無法使用window，document，parent物件，因為woker執行緒所在的全域物件與主執行緒的不一樣，所以也無法讀取主執行緒所在頁面的DOM物件，
（3）通信聯系：主執行緒和子執行緒無法直接通信，因為它們不在同一個上下環境，
（4）腳本限制：woker執行緒不能執行alert()方法和confirm（）方法，但可以使用XMLHttpRequst物件發出AJAX請求，
Q1：什么是XMLHttpRequst物件？
A1：用戶在后臺和服務器交換資料的物件，

Q2：功能是什么？
A2：不重新加載頁面的情況下更新頁面；在頁面加載后從服務器請求資料和接收資料；在后臺向服務器發送資料，

（5）檔案限制：worker執行緒不能讀取本地檔案（file：//），加載的腳本必須來源于網路，

2.9 Web Storage

看到stoage就可以猜測到這個是存盤，那是什么東西的存盤呢，當然是資料的存盤，這些資料可以是臨時的也可以是永久的，

Q1：它什么要出現，相比HTML4它優勢是什么？
A1：HTML4中用cookie，在用戶端保存用戶資料，但是存在弊端，記憶體大小不夠大只有4kb；浪費帶寬，因為資料發送的時候是連HTTP事務一起發送，造成資源浪費；操作cookie復雜麻煩困難，所以HTML5用Web Storage在客戶端本地保存用戶資料，

Q2：cookie和Web Storage有什么區別？
A2：Web Storage存盤的空間大小更大，一般有5MB；用戶資料存盤在本地（瀏覽器）不與服務器發生通信；Web Storage本身自帶方法setletm(),getletm(),removeletm(),clean()等，不需要cookie復雜的封裝setCookie，getCookie，操作簡單，

web Storage分類
1 localStorage
2 sessionStorage

Q1：什么是sessiionStorge？
A1：user進入頁面瀏覽至關閉瀏覽器的時間，頁面在，資料在，頁面無，資料無，重新加載頁面的時候，資料仍然存在，

Q2：localStorage和sessionStorage有什么區別？
A2：相同點
（1）資料都保存在瀏覽器客戶端
（2）同源，即同域名，同埠，同協議，
（3）操作方法相同，
不同點
（1）生命周期不同，localStorage是永久保存，除非用戶手動清除資料，sessionStorage是臨時保存，
（2）作用域不同，瀏覽器有很多種，所以無法共享用戶資料，也就是不同源的頁面無法共享資料，localStorage資訊可以在相同瀏覽器中同源的不同頁面，不同標簽，不同視窗中共用，sessionStorage不可以在不同頁面，不同標簽，不同視窗中共用，即使是同源，

特點

值可以是任意的資料型別，只要是key/value形式可以保存的，資料將永不過期，除非用戶明確呼叫了delete（)方法，或者瀏覽器限制了空間大小，或者其他原因(比如用戶清空歷史資料)資料項在整個domain(域名)內都可見，

方法

setItem(key,value): 添加一個鍵值對，存盤
sessionStorage(會話存盤)物件
getItem(key): 根據key獲取值
clear(): 清空sessionStorage(會話存盤)的所有鍵/值對
removeItem(key): 從sessionStorage 移除某個項(鍵值對)
key(n): 獲取第n個key，

key/value

有兩種方式可以把值存盤到sessionStoage

// 第一種方式，標準方法
sessionStorage.setItem('email','xxx@qq.com');
// 第二種方式，直接當成普通物件屬性賦值，
sessionStorage.blog = 'http://xxxxxx';

兩種獲取值的方法

// 1. 標準方法
var email = sessionStorage.getItem('email');
// 2. 直接取屬性值
var blog = sessionStorage.blog;

移除key/value

// 移除之后，再獲取值，將會得到 undefined
// 根據key，移除鍵值對
sessionStorage.removeItem('email');

清空sessionStorage

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

2.10 Web Socket

要理解這個新特性，需要有一些網路基礎的知識，w3cschool對其總結很到位，所以我直接照搬過來了，WebSocket是HTML5開始提供的一種在單個 TCP 連接上進行全雙工通訊的協議，在WebSocket API中，瀏覽器和服務器只需要做一個握手的動作，然后，瀏覽器和服務器之間就形成了一條快速通道，兩者之間就直接可以資料互相傳送，瀏覽器通過 JavaScript 向服務器發出建立 WebSocket 連接的請求，連接建立以后，客戶端和服務器端就可以通過 TCP 連接直接交換資料，當你獲取 Web Socket 連接后，你可以通過 send() 方法來向服務器發送資料，并通過 onmessage 事件來接收服務器回傳的資料，WebSocket 協議本質上是一個基于 TCP 的協議，為了建立一個 WebSocket 連接，客戶端瀏覽器首先要向服務器發起一個 HTTP 請求，這個請求和通常的 HTTP 請求不同，包含了一些附加頭資訊，其中附加頭資訊"Upgrade: WebSocket"表明這是一個申請協議升級的 HTTP 請求，服務器端決議這些附加的頭資訊然后產生應答資訊回傳給客戶端，客戶端和服務器端的 WebSocket 連接就建立起來了，雙方就可以通過這個連接通道自由的傳遞資訊，并且這個連接會持續存在直到客戶端或者服務器端的某一方主動的關閉連接，

API 用于創建 WebSocket 物件，

var Socket = new WebSocket(url, [protocal] );
//第一個引數 url, 指定連接的 URL，第二個引數 protocol 是可選的，指定了可接受的子協議，

WebSocket屬性

Socket.readyState

0：表示連接尚未建立

1：表示連接已經建立，可以進行通信

2：表示連接正在進行關閉

3：表示連接已經關倍訓者連接不能打開

WebSocket事件

open：連接建立時觸發

message：客戶端接收服務端資料時觸發

error：通信發生錯誤時觸發

close：連接關閉時觸發

WebSocket方法

Socket.send()：使用連接發送資料

Socket.close()：關閉連接

代碼展示示例

<!DOCTYPE HTML>
<html>
   <head>
   <meta charset="utf-8">
   <title>webscoket</title>
	
      <script type="text/javascript">
         function WebSocketTest()
         {
            if ("WebSocket" in window)
            {
               alert("您的瀏覽器支持 WebSocket!");
               
               // 打開一個 web socket
               var ws = new WebSocket("ws://localhost:xxxx/echo");
				
               ws.onopen = function()
               {
                  // Web Socket 已連接上，使用 send() 方法發送資料
                  ws.send("發送資料");
                  alert("資料發送中...");
               };
				
               ws.onmessage = function (evt) 
               { 
                  var received_msg = evt.data;
                  alert("資料已接收...");
               };
				
               ws.onclose = function()
               { 
                  // 關閉 websocket
                  alert("連接已關閉..."); 
               };
            }
            
            else
            {
               // 瀏覽器不支持 WebSocket
               alert("您的瀏覽器不支持 WebSocket!");
            }
         }
      </script>
		
   </head>
   <body>
   
      <div id="sse">
         <a href="javascript:WebSocketTest()">運行 WebSocket</a>
      </div>
      
   </body>
</html>

三總結

HTML5的十大新特性是需要掌握的，在前端面試中很頻繁的被問到，重點要理解Web Worker，Web Storage，Web Socket，重要的不是背誦，而是去理解，一個新事物取代一個舊事物肯定是為了更好，所以是更好的什么呢？一般來講，人都是很懶的生物，更好的用戶體驗，更好的操作簡單，更好的代碼可讀性等等，從這幾個方面去思考為什么HTML5需要出現，它的出現解決了什么問題?相比HTML4有什么優勢?改進了什么?優化了什么功能？與HTML4有什么區別？想清楚這些問題，基本也就可以在理解的基礎上去掌握這些知識點，

轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/272906.html

標籤：其他

上一篇：理解js繼承的六種方式

下一篇：普歌-前端復習總結HTML+CSS-超詳細，超全面（內容較多，建議收藏）

前端HTML5十大新特性詳細總結

前端HTML5十大新特性總結

一 必須知道

二 HTML5十大新特性

2.1 語意標簽

2.2 增強型表單

2.3視頻和音頻

2.4 canvas繪圖

2.5 SVG繪圖

2.6 地理位置

2.7 拖放API

2.8 Web Worker

2.9 Web Storage

2.10 Web Socket

三 總結

一必須知道

三總結