HTML5实战 学习笔记
《HTML5實(shí)戰(zhàn)》蜻蜓點(diǎn)水地概述了HTML5新增的的特性和接口，讓我們大致了解用HTML5可以方便解決的問(wèn)題。
書(shū)中實(shí)例也使得更有一個(gè)知性的認(rèn)識(shí)。隨意翻閱下，這里給自己做個(gè)記錄。
?
1.頁(yè)面結(jié)構(gòu)
//精簡(jiǎn)寫(xiě)法 <!DOCTYPE html>,<meta charset='UTF-8'/>//結(jié)構(gòu)含義分明 <section>(分割文檔內(nèi)容),<article>,<aside>,<header>,<footer>,<nav>//圖解元素 <figure><img/>(<br/>)<figcaption>description<figcaption> </figure>//用于存儲(chǔ)h1-h6元素 <hgroup><h1...h6></h1...h6></hgroup>//插入媒體元素,類(lèi)似<iframe> <embed type="jpg | vedio/Quicktime"/>//<area>用于區(qū)域超鏈接，與<map>聯(lián)合使用 <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>//微數(shù)據(jù)自定義語(yǔ)義（利于搜索引擎）: //itemtype自定義詞匯表,itemscopt創(chuàng)建條目，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表單
//完成表單驗(yàn)證//事實(shí)上，email只檢查'xx@xx'格式,包括url的檢查相當(dāng)簡(jiǎn)單 <input type="email | url | number(數(shù)字微調(diào)) | range(滑動(dòng)條) | time | day"/> <input type="file" multiple/> //多文件上傳 <datalist><option value='a'></datalist> //類(lèi)似select <input type="" pattern=""(正則表達(dá)式) placeholder=""(占位符) required/> //CSS偽類(lèi) :valid, :invalid, :optional, :required
?
3.通信
CORS(Cross-Origin Resource Shanre)：跨資源共享，一種瀏覽器技術(shù)標(biāo)準(zhǔn)，定義了Web服務(wù)在同源策略下為來(lái)自不同域的沙箱腳本提供接口的方法。
window.postMessage可以實(shí)現(xiàn)跨源通信；
postMessage被調(diào)用后，一個(gè)消息事件就被分發(fā)到目標(biāo)窗口上；
該接口有一個(gè)message事件，具有data,origin屬性；
contentWindow返回當(dāng)下html文檔的iframe元素的window屬性
服務(wù)端發(fā)送事件：EventSource用于服務(wù)端推送至Web頁(yè)面
相對(duì)iframe和XMLHttpRequest對(duì)象方法，能節(jié)約移動(dòng)設(shè)備電量
消息通道
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]); //文件輸入類(lèi)型中取得的文件數(shù)據(jù)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的常見(jiàn)屬性：paused,ended,played,volume(音量),muted(靜音),currentTIme; 方法：play(),pause()
?
5.激動(dòng)人心的繪圖
<canvas id='canvas' width height>不支持canvas的文字說(shuō)明</canvas> <script type="text/javascript"> var content = document.getElementById('canvas').getContext('2d'); //獲取繪圖上下文 //繪圖API(包括文本)、變換省略... </script><canvas>的出現(xiàn)使得WebGL，可視化圖形庫(kù)，HTML5游戲等等得到很好的支持，大興土木~個(gè)人覺(jué)得超級(jí)贊
?
6.地理定位
geolocation有g(shù)etCurrentPosition(),watchPosition(),clearWatch()三個(gè)方法
后兩者的用法跟setTimeout類(lèi)似
對(duì)于無(wú)法支持geolocation的設(shè)備，可使用geo.js庫(kù)
關(guān)于地理地位，《深入HTML5應(yīng)用開(kāi)發(fā)》前半部做了詳細(xì)介紹
7.本地存儲(chǔ)
離線存儲(chǔ)使用window.localStorage && window.sessionStorage 對(duì)象;
數(shù)據(jù)以鍵值對(duì)形式保存;
緩存狀態(tài)使用window.applicationCache對(duì)象，擁有status屬性
還有一章‘無(wú)障礙訪問(wèn)’沒(méi)有細(xì)看...讀者有興趣可以自行查閱
?
Tips
查看瀏覽器是否支持HTML5的某些API，書(shū)中也提供了幾個(gè)網(wǎng)址/工具：
www.caniuse.com ?：支持搜索來(lái)查詢某個(gè)特性
www.modernizr.com ? ：提供下載js庫(kù)，用來(lái)檢查、調(diào)整代碼
www.findmebyip.com ：測(cè)試瀏覽器對(duì)HTML5的兼容性
?
轉(zhuǎn)載于:https://www.cnblogs.com/liaopr/p/3588175.html
總結(jié)
以上是生活随笔為你收集整理的HTML5实战 学习笔记的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： Spring boot 自动配置工作原
- 下一篇： 图解Public,protected ,