HTML5實戰學習筆記

時間 2019-11-10

標籤 html5 html 實戰學習筆記欄目 HTML5 简体版

原文原文鏈接

《HTML5實戰》走馬觀花地概述了HTML5新增的的特性和接口，讓咱們大體瞭解用HTML5能夠方便解決的問題。javascript

書中實例也使得更有一個知性的認識。隨意翻閱下，這裏給本身作個記錄。php

1.頁面結構html

//精簡寫法
<!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表單java

//完成表單驗證
//事實上，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.通訊git

CORS(Cross-Origin Resource Shanre)：跨資源共享，一種瀏覽器技術標準，定義了Web服務在同源策略下爲來自不一樣域的沙箱腳本提供接口的方法。
window.postMessage能夠實現跨源通訊；
postMessage被調用後，一個消息事件就被分發到目標窗口上；
該接口有一個message事件，具備data,origin屬性；正則表達式

window.postMessage(message, targetOrigin[, ports]);
window.addEventListener('message', function(e){
if(e.origin !== 'http://www.domain.com'){
return;
}
console.log(e.data);
})

contentWindow返回當下html文檔的iframe元素的window屬性canvas

服務端發送事件：EventSource用於服務端推送至Web頁面
相對iframe和XMLHttpRequest對象方法，能節約移動設備電量瀏覽器

var sourceURL = new EventSource('SeverSideScript.php');
sourceURL.onmessage = function(e){
console.log( e.data.split('\n') );	
}

消息通道緩存

var sourceURL = new EventSource('SeverSideScript.php');
sourceURL.onmessage = function(e){
console.log( e.data.split('\n') );	
}

XMLHttpRequest與FormData使用:session

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應用開發》前半部作了詳細介紹

navigator.geolocation.getCurrentPosition(success, fail);
function success(position){console.log(position); }
function fail(error){console.log(error);}
//瀏覽器會詢問是否容許使用計算機位置
//success的狀況
Geoposition {timestamp: 1394282087530, coords: Coordinates}
coords: Coordinates
accuracy: 30
altitude: null
altitudeAccuracy: null
heading: null
latitude: 23.060268
longitude: 113.38763229999999
speed: null
__proto__: Coordinates

timestamp: 1394282087530
__proto__: Geoposition

7.本地存儲
離線存儲使用window.localStorage && window.sessionStorage 對象;
數據以鍵值對形式保存;

localStorage.setItem(key,value);
localStorage['key'] = value;
localStorage.key = value;

localStorage.getItem(key)
localStorage['key']
localStorage.key

localStorage.removeItem(key);
localStorage.clear();
localStorage.length
localStorage.key(0)

緩存狀態使用window.applicationCache對象，擁有status屬性

還有一章‘無障礙訪問’沒有細看...讀者有興趣能夠自行查閱

Tips

查看瀏覽器是否支持HTML5的某些API，書中也提供了幾個網址/工具：

www.caniuse.com ：支持搜索來查詢某個特性

www.modernizr.com ：提供下載js庫，用來檢查、調整代碼

www.findmebyip.com ：測試瀏覽器對HTML5的兼容性