HTML5实战 学习笔记
《HTML5實戰》蜻蜓點水地概述了HTML5新增的的特性和接口，讓我們大致了解用HTML5可以方便解決的問題。
書中實例也使得更有一個知性的認識。隨意翻閱下，這里給自己做個記錄。
?
1.頁面結構
//精簡寫法 <!DOCTYPE html>,<meta charset='UTF-8'/>//結構含義分明 <section>(分割文檔內容),<article>,<aside>,<header>,<footer>,<nav>//圖解元素 <figure><img/>(<br/>)<figcaption>description<figcaption> </figure>//用于存儲h1-h6元素 <hgroup><h1...h6></h1...h6></hgroup>//插入媒體元素,類似<iframe> <embed type="jpg | vedio/Quicktime"/>//<area>用于區域超鏈接，與<map>聯合使用 <img src="" usemap="#a"/> <map name='a'><area coords="x1,y1,w1,h1" href="" shape="rect" hreflang="en" rel="license" meida="screen"/><area coords="x2,y2,w2,h2" href="" shape="rect" hreflang="en" rel="license" meida="print"/> </map>//微數據自定義語義（利于搜索引擎）: //itemtype自定義詞匯表,itemscopt創建條目，itemporp定義條目的屬性 <section itemtype="www.data.org/xxx" itemscopt> <p>Name: <span itemprop="name">name1</span></p> <p>Address: <span itemprop="address">address1</span></p> </section>?
2.HTML表單
//完成表單驗證//事實上，email只檢查'xx@xx'格式,包括url的檢查相當簡單 <input type="email | url | number(數字微調) | range(滑動條) | time | day"/> <input type="file" multiple/> //多文件上傳 <datalist><option value='a'></datalist> //類似select <input type="" pattern=""(正則表達式) placeholder=""(占位符) required/> //CSS偽類 :valid, :invalid, :optional, :required
?
3.通信
CORS(Cross-Origin Resource Shanre)：跨資源共享，一種瀏覽器技術標準，定義了Web服務在同源策略下為來自不同域的沙箱腳本提供接口的方法。
window.postMessage可以實現跨源通信；
postMessage被調用后，一個消息事件就被分發到目標窗口上；
該接口有一個message事件，具有data,origin屬性；
contentWindow返回當下html文檔的iframe元素的window屬性
服務端發送事件：EventSource用于服務端推送至Web頁面
相對iframe和XMLHttpRequest對象方法，能節約移動設備電量
消息通道
var sourceURL = new EventSource('SeverSideScript.php'); sourceURL.onmessage = function(e){ console.log( e.data.split('\n') ); }XMLHttpRequest與FormData使用:
var formData = new FormData(document.getElementById('fileInput')); var xhr = new XMLHttpRequest(); xhr.open("POST",url,false); xhr.send(formData); //formData.append()可用于添加值 formData.append('name','Rayner'); formData.append('file',fileName.files[0]); //文件輸入類型中取得的文件數據window.WebSocket
var ws = new WebSocket('ws://localhost/socket'); ws.onopen = function(){ ws.send(message); ws.close(); } ws.onmessage = function(e){ console.log( e.data ); } ws.onclose = function(){} ws.onerroe = function(error){ console.log( error ); }
4.媒體控制
<video><audio>,都具有的屬性：preload,autoplay,loop,contorls,poster
media的常見屬性：paused,ended,played,volume(音量),muted(靜音),currentTIme; 方法：play(),pause()
?
5.激動人心的繪圖
<canvas id='canvas' width height>不支持canvas的文字說明</canvas> <script type="text/javascript"> var content = document.getElementById('canvas').getContext('2d'); //獲取繪圖上下文 //繪圖API(包括文本)、變換省略... </script><canvas>的出現使得WebGL，可視化圖形庫，HTML5游戲等等得到很好的支持，大興土木~個人覺得超級贊
?
6.地理定位
geolocation有getCurrentPosition(),watchPosition(),clearWatch()三個方法
后兩者的用法跟setTimeout類似
對于無法支持geolocation的設備，可使用geo.js庫
關于地理地位，《深入HTML5應用開發》前半部做了詳細介紹
7.本地存儲
離線存儲使用window.localStorage && window.sessionStorage 對象;
數據以鍵值對形式保存;
緩存狀態使用window.applicationCache對象，擁有status屬性
還有一章‘無障礙訪問’沒有細看...讀者有興趣可以自行查閱
?
Tips
查看瀏覽器是否支持HTML5的某些API，書中也提供了幾個網址/工具：
www.caniuse.com ?：支持搜索來查詢某個特性
www.modernizr.com ? ：提供下載js庫，用來檢查、調整代碼
www.findmebyip.com ：測試瀏覽器對HTML5的兼容性
?
轉載于:https://www.cnblogs.com/liaopr/p/3588175.html
總結
以上是生活随笔為你收集整理的HTML5实战 学习笔记的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Spring boot 自动配置工作原
- 下一篇： Win7中修改Chrome浏览器缓存文件