整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
TML5屬于上一代HTML的升級語言，設計HTML5最主要的目的是為了在移動設備上支持多媒體！！！
好處：跨平臺：
例如：比如你開發了一款HTML5的游戲，你可以很輕易地移植到UC的開放平臺、Opera的游戲中心、Facebook應用平臺，甚至可以通過封裝的技術發放到App Store或Google Play上，所以它的跨平臺性非常強大，這也是大多數人對HTML5有興趣的主要原因。
缺點：
pc端瀏覽器支持不是特別友好，造成用戶體驗不佳(隨著移動端的發展不斷擴大和win10（ie10）的大量推廣，這一缺點將被無限縮小)
新特性：
1. 取消了過時的顯示效果標記 <font></font> 和 <center></center>等...
2. 新語義標簽的引入
3. 新表單元素引入
4. canvas標簽（圖形設計）
5. 本地數據庫（本地存儲）
6. 一些API
1.HTML5新語義標簽
HTML5新標簽的數量在25個左右具體也沒有找到詳細的資料來查看（每個網站顯示的數量都不一樣）
雖然新增的標簽很多但是實際上用到的應該只有十個左右MDN上有一句話
“HTML 使用“標記”來注明文本、圖片和其他內容，以便于在 Web 瀏覽器中顯示。HTML 標記包含一些特殊“元素”如 <head>，<title>，<body>，<header>，<footer>，<article>，<section>，<p>，<div>，<span>，<img> 等等。”
這其中大部分有HTML5以前的標簽也有HTML5的而這些剛好就是我們常用的標簽，不常用的也許不必太過了解布局DIV也可以不是么？
另外推薦大家在使用新語義標簽的時候盡量每個獨立的頁面只使用一個標簽作為包裹，語義化的作用就是seo（具體可百度），就是讓搜索引擎知道網上到底有些什么，如header 、main、footer標簽等等，當然你也可以寫100個！
以下總結出HTML5常用的標簽： “header” “nav” “main”“article” “address”“section”“aside” “footer”
如果忘記了這些標簽的意思可以訪問 MDN、W3C、或者CSND,當然博客園上搜搜可能會更快 。
2.HTML5的重點標簽之video和audio
<video></video> 視頻
屬性：controls 顯示控制欄
屬性：autoplay 自動播放
屬性：loop 設置循環播放
<audio></audio> 音頻
屬性：controls 顯示控制欄
屬性：autoplay 自動播放
屬性：loop 設置循環播放
video標簽支持的格式 http://www.w3school.com.cn/html5/html_5_video.asp
多媒體標簽在網頁中的兼容效果方式（每個瀏覽器支持的情況不同所以需要做兼容性處理）
（以下source屬性只會生效一個 即 if=true 之后 就不執行了）
3.HTML5中的智能表單控件
<input type="email">
type值=
email: 輸入合法的郵箱地址
url： 輸入合法的網址
number： 只能輸入數字
range： 滑塊
color： 拾色器
date： 顯示日期
month： 顯示月份
week ： 顯示第幾周
time： 顯示時間
（智能表單，會自動對輸入的內容做基本校驗，內容不符合基本校驗則拒絕提交請求
表單屬性
◆form屬性：
autocomplete=on | off 自動完成
novalidate=true | false 是否關閉校驗
◆ input屬性：
autofocus ： 自動獲取焦點
multiple： 實現多選效果
placeholder ： 占位符 （提示信息）
required：必填項
本地存儲
隨著互聯網的快速發展，基于網頁的應用越來越普遍，同時也變的越來越復雜，為了滿足各種各樣的需求，會經常性在本地存儲大量的數據，傳統方式我們以document.cookie來進行存儲的，但是由于其存儲大小只有4k左右，并且解析也相當的復雜，給開發帶來諸多不便，HTML5規范則提出解決方案，使用sessionStorage和localStorage存儲數據。
localStorage：
1. 永久生效
2. 多窗口共享
3. 容量大約為20M
◆window.localStorage.setItem(key,value) 設置存儲內容
◆window.localStorage.getItem(key) 獲取內容
◆window.localStorage.removeItem(key) 刪除內容
◆window.localStorage.clear() 清空內容
sessionStorage：
1. 生命周期為關閉當前瀏覽器窗口
2. 可以在同一個窗口下訪問
3. 數據大小為5M左右
◆window.sessionStorage.setItem(key,value)
◆window.sessionStorage.getItem(key)
◆window.sessionStorage.removeItem(key)
◆window.sessionStorage.clear()
required如何修改默認提示選項
需要兩個幾個參數
placeholder=默認提示用戶輸入
oninvalid事件=當用戶輸入不符合規則的時候提示的內容隨意改setCustomValidity 就是用來修改 requered值的函數
oninput事件=約等于chuange事件 立即執行
4.HTML5中新的一些API
以前獲取節點通過
document.getElementById("ID名稱")這些還有className，name，tagname等等方式獲取返回當前節點
H5新增的節點獲取方法只有兩個
document.querySelector("選擇器")； 返回節點
document.querySelectorAll("選擇器"); 返回數組
可以完美的代替以前或者節點的方式，如果無需兼容ie10以下的話
H5中對class的操作
classList.add("類名")
添加class類名 不返回任何值 如果你把它賦值給一個變量 得到結果是undefined
classList.remove("類名"); 刪除
classList.contains("類名");
檢查has className 是否存在返回布爾值 即true and false
classList.toggle("active");
查詢active 是否存在，存在就刪除，不存在就添加 ，省去了if判斷！返回布爾值如果執行多條 即 true false true false.
自定義屬性 （小案例分析體驗自定義屬性） data-自定義屬性名
1. 獲取自定義屬性 Dom.dataset 返回的是一個對象
Dom.dataset.屬性名 或者 Dom.dataset[屬性名]
注：屬性名無需加data如自定義屬性名=data-canvas 那么獲取的時候 直接dataset.canvas即可 設置同理
2. 設置自定義屬性
Dom.dataset.自定義屬性名=值 或者 Dom.dataset[自定義屬性名]=值；
文件讀取 FileReader
FileReader 接口有3個用來讀取文件方法返回結果在result中
readAsBinaryString ---將文件讀取為二進制編碼
readAsText ---將文件讀取為文本
readAsDataURL ---將文件讀取為DataURL
FileReader 提供的事件模型
onabort 中斷時觸發
onerror 出錯時觸發
onload 文件讀取成功完成時觸發
onloadend 讀取完成觸發，無論成功或失敗
onloadstart 讀取開始時觸發
onprogress 讀取中
獲取當前網絡狀態
window.navigator.onLine 返回一個布爾值 網沒問題返回true否則返回false
網絡狀態事件 （大部分為不支持和廢棄狀態也許移動端用的比較多）
1. window.ononline
2. window.onoffline
獲取地理定位
獲取一次當前位置
window.navigator.geolocation.getCurrentPosition(success,error);
success成功之后獲取位置信息 否則拋出錯誤，比如獲取位置信息被拒絕
1. coords.latitude 維度
2. coords.longitude 經度
實時獲取當前位置
window.navigator.geolocation.watchPosition(success,error);
以上內容或有不足，歡迎各位指出補充，謝謝。
HTML5新增的新特性在實際開發中體現的優勢已經不言而喻。
今天這篇文章我們主要講解HTML中新增的與本地存儲有關的localStorage和sessionStorage兩種API，在之前的一篇文章《HTML5新特性之localStorage與sessionStorage使用技巧》中，已經講解過它們的相關算法。
今天我們就來細看下HTML5新增的localStorage和sessionStorage的理論知識點，這在前端面試中基本是必問的問題，一定要好好看下。
HTML5
在講解localStorage和sessionStorage之前，我們可以先看下Cookie，Cookie同樣是用于本地存儲對象的，隨著HTTP協議誕生至今。
cookie
其實在瀏覽器端已經有了Cookie用于本地存儲數據，為什么還要在HTML5中新增localStorage和sessionStorage兩個API呢？那么我們就先來看看Cookie具有的一些特性吧。
Cookie一般存儲與服務端交互的信息，由于數據量小，一般不超過4KB大小。
Cookie在請求發起后，不管服務端需不需要Cookie值，都會隨著請求頭發送至服務器端，造成了不必要的帶寬了浪費。
Cookie有效時間是隨意設置的，可能很短至幾分鐘，也有可能很長至幾個月，具有不確定性。
既然Cookie有諸多限制，那么Cookie是否能被HTML5的本地存儲新特性所代替呢？
當然也是不能的。
Cookie作為HTTP協議的一部分，有其存在的重要意義，是無法代替的。
我們可以這樣理解，HTML5中新增的localStorage和sessionStorage是對本地存儲功能的擴充。主要解決的就是本地存儲數據量小的問題。
localStorage和sessionStorage作為HTML5新增的特性之一，已經被廣泛用于實際開發中。
其中兩者的API都很簡單
通過setItem(), getItem()方法去設置和獲取本地存儲。
通過removeItem()方法來清除某個特定的變量緩存。
通過key()獲取所有的本地緩存的key集合。
通過clear()清空本地緩存。
API上的細節大家可以自行看文檔，這里就不贅述了。
為什么HTML5會新增localStorage和sessionStorage兩種新的API呢？想必它們肯定是有差異的。
作用域
同源頁面（同協議，同域名，同端口號）下的不同頁面之間共享localStorage信息，而不同頁面之間不能共享sessionStorage信息。
注意：如果一個標簽頁包含多個iframe，它們是可以共享sessionStorage的。
我們通過以下示例來看看。
首先我們在Page1的localStorage與sessionStorage中添加值。
添加值
然后我們看看瀏覽器效果。在Chrome開發者工具的Application面板下可以看見localStorage與sessionStorage欄。
localStorage與sessionStorage存儲
從上圖可以看出在sessionStorage與localStorage中都已經添加進信息。
然后我們再打開同源下的另一個頁面Page2，再看看Chrome控制臺下的效果。
另一個頁面下的存儲信息
從上圖中我們可以看出，Page2的localStorage中仍然有信息，而sessionStorage為空，這就證明了同源下的不同頁面是不能共享sessionStorage信息的。
數據生命周期
localStorage中的數據在同源下所有tab頁中共享，只要不手動清除，會永久存在于本地緩存中。
sessionStorage中的數據只能存在于單個頁面下共享，只要當前標簽頁關閉，sessionStorage中的信息就會被清空。
localStorage與sessionStorage的區別已經講解完畢，接下來就看看localStorage與Cookie的差別吧。
localStorage中的信息只是存在本地瀏覽器端的，不會自動隨著HTTP請求發送到后端，除非手動通過代碼控制；Cookie中的信息會隨著同源的HTTP請求發送到服務端。
localStorage存儲大小一般會達到幾M，不同瀏覽器會有所差異，通過上篇文章的算法，得知Chrome下是5M，safari下是2M；而Cookie的大小一般為4K，相比之下，localStorage的存儲要比Cookie大得多。
localStorage中的信息只要在不清空的情況下，會一直存在本地；Cookie的有效期是有限的，有默認值，也可以手動設定，并且跟窗口無關。
可以給localStorage設置監聽storage事件，做數據變更的后續處理。
本篇文章主要介紹了localStorage與sessionStorage和Cookie之間的區別，大家需要好好消化，以便在面試時遇到這樣的問題能夠輕松回答上來。
言
曾幾何時，前端的頁面布局一直采用div，但是div本身并沒有實際的意義，它只是定義了一個區域，而且這個區域是做什么的瀏覽器并不知道，不利于頁面的SEO優化。
因此HTML5中新增的語義化標簽就很好的解決了這個問題，當然它還有其他一些好處，接下來我們就一起來看看吧。
HTML5
語義化標簽的優點
即使在沒有CSS的支持下，瀏覽器依然能呈現出良好的內容結構。
有利于SEO，語義化的標簽更有利于爬蟲去解析更多有效信息。
跨設備體驗，不同設備都支持語義化標簽，那么即使在不同設備下依然可以有無縫體驗。
便于代碼開發和維護，語義化可以增加代碼的可讀性，讓團隊成員可以更好理解彼此的代碼意圖。
HTML5新增的語義化標簽
那么在HTML5中新增了哪些利于頁面布局的HTML5標簽呢？
我們先通過以下這張圖來看看。
HTML5新增語義化標簽
header標簽
header標簽表示頁面或一個區域(section)的頁眉部分，通常在里面包含h1-h6標簽來使用。
我們直接通過代碼來看看在瀏覽器上的效果。
header標簽效果
footer標簽
footer標簽和header標簽類似，表示頁面或一個區域(section)的頁腳部分，通常會將網站的證書，許可，版權協議等內容放在這塊。
footer標簽
hgroup標簽
hgroup標簽一般用于h1-h6標簽的組合，比如主標題，副標題，三級標題的組合情況。
我們通過以下代碼段來看看其代碼組織形式。
hgroup標簽
需要注意的一點是，如果需要使用hgroup標簽則保證在hgroup標簽里至少有兩個h標簽，如果只有一個h標簽，則應該去掉hgroup標簽。
nav標簽
nav標簽主要用于定義頁面的導航部分，例如頁面或者section中的側邊目錄欄。
其使用方式如下代碼段所示。
nav標簽
aside標簽
aside標簽一般會指定網頁的相關內容，友情鏈接等附注性的東西，類似于廣告也可以使用aside標簽。
main標簽
main標簽定義一個頁面的主要內容，在一個頁面中只能使用一次。
article標簽
article標簽表示的是一個獨立完整的內容區域，比如一張報紙的某個獨立版塊。
在article標簽內部可以包含其他語義化標簽，其基本使用如下所示。
article標簽
section標簽
section標簽表示的是文檔中內容的分節或分段，上述的article，nav或者aside其實都可以看做特殊的section標簽，如果能用article，nav，aside標簽，最好不要用section標簽。
section標簽與與article標簽可以互相嵌套，需要視具體情況而定。
結束語
如果你的布局還是只有div，那么看完了今天這篇文章后完全可以嘗試下新的HTML5標簽噢。
感興趣的同學可以加下我自己創建的Q群，大家相互學習交流，我也會盡力維護好群環境，群號如下所示。
號碼
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
