TML5中, 屬性值的引號可以省略(除了有很多屬性的)

<h1 title=屬性值可以省略>這是h1</h1>
<style>
.red{
color: red;
}
.orange{
background-color: orange;
}
</style>
<p class=red orange>文字是紅色背景是橘黃色</p>

HTML5中標簽不分大小寫

<marquee>標簽不區分大小寫</marquee>
<MARQUEE>標簽不區分大小寫</MARQUEE>
<maRqUee>標簽不區分大小寫</MarQuEE>

HTML5中, 自封閉標簽可以省略"/"關閉符號

<meta charset="UTF-8">
<img src="img/title.png">

HTML5中, type類型可以省略

語義化標簽，可以讓頁面有更加完善的結構，讓頁面的元素有含義，同時利于被搜索引擎解析，有利于SEO，主要標簽包括下面的標簽：

②增強型表單

可以通過input的type屬性指定類型是number還是date或者url，同時還添加了placeholder和required等表單屬性。

<input type="range" id="a" value="50" required>
<input type="number" id="b" value="50" placeholder="請輸入數字">

③媒體元素

新增了audio和video兩個媒體相關的標簽，可以讓開發人員不必以來任何插件就能在網頁中嵌入瀏覽器的音頻和視頻內容。

<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
// 有些低版本瀏覽器不支持Video標簽。
</video>
<audio controls>
  <source src="horse.mp3" type="audio/mpeg">
// 有些低版本瀏覽器不支持 audio 元素。
</audio>

④canvas繪圖

canvas繪圖指的是在頁面中設定一個區域，然后通過JS動態的在這個區域繪制圖形。

<canvas id="canvas" width="300" height="300"></canvas>

⑤svg繪圖

//畫了一個圓
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
   <circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red" />
</svg>

⑥地理定位

getCurrentPosition()方法來獲取用戶的位置，從而實現隊地理位置的定位。

var x=document.getElementById("demo");
function getLocation()
{
    if (navigator.geolocation)
    {
        navigator.geolocation.getCurrentPosition(showPosition);
    }
    else
    {
        x.innerHTML="該瀏覽器不支持獲取地理位置。";
    }
}
 
function showPosition(position)
{
    x.innerHTML="緯度: " + position.coords.latitude + 
    "<br>經度: " + position.coords.longitude;    
}

⑦拖放API

通過給標簽元素設置屬性draggable值為true，能夠實現對目標元素的拖動。

<img draggable="true"> // 拖放圖片

⑧Web Worker

Web Worker通過加載一個腳本文件，進而創建一個獨立工作的線程，在主線程之外運行，worker線程運行結束之后會把結果返回給主線程，worker線程可以處理一些計算密集型的任務，這樣主線程就會變得相對輕松，這并不是說JS具備了多線程的能力，而實瀏覽器作為宿主環境提供了一個JS多線程運行的環境。

if(typeof(Worker)!=="undefined")
{
    // 是的! Web worker 支持!
    // 一些代碼.....
}
else
{
    //抱歉! Web Worker 不支持
}

⑨Web Storage

需要重點掌握的是cookie、Localstorage和SessionStorage三者之間的區別：

1.有效期

• cookies是會話機制，它是在設置的時間內（自己設置的）有效。
• localStorage是屬于本地存儲的一種，是永久存儲，除非手動刪除，否則一直有效。
• ? sessionStorage也是屬于本地存儲的一種，是臨時存儲，在關閉當前頁面或者當前瀏覽器窗口前有效。

2.存儲數據的大小

• cookies存儲的數據大小在4k左右。
• ? localStorage存儲的數據大小在20M左右。
• ? sessionStorage存儲的數據大小在5M左右。

3.作用范圍

• cookies只能作用于當面目錄以及當前的子目錄。
• ? localStorage是同一瀏覽器不同標簽頁之間數據可以共享。
• ? sessionStorage中存儲的數據是只能在當前標簽頁中使用。

4.安全性

• ? cookies的安全性比loaclStorage和sessionStorage的安全性好。

⑩Websocket

websocket和HTTP的區別：

• 相同點：HTTP和Websocket都是基于TCP的應用層協議。
• 不同點：①websocket是雙向通信協議，模擬socket協議，可以雙向發送和接受消息，HTTP是單向的，意思是說通信只能由客戶端發起。②websocket是需要瀏覽器和服務器通過握手建立連接，但是HTTP是瀏覽器向服務器發送連接，服務器預先不知道這個連接。
• 聯系：websocket建立握手時需要基于HTTP進行傳輸，建立連接之后呢便不再需要HTTP協議了。

【注】HTML5 定義的 WebSocket 協議，能更好的節省服務器資源和帶寬，并且能夠更實時地進行通訊。

學習記錄，如有侵權請聯系刪除