html5 (逆天的html)
簡介
h5的新特性:
cavas / video / audio / cache / element / form
最小的h5文檔:
<!DOCTYPE html>
<html>
<head>
<title>文檔標題</title>
</head>
<body>
文檔內容...
</body>
</html>
8個語義元素:
header, section, footer, aside, nav, main, article, figure
IE瀏覽器兼容方案: 引入 html5shiv
<script
src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
cavas, 用JS繪制圖形
示例:
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;">
</canvas>
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="#FF0000";
ctx.fillRect(0,0,150,75);
</script>
參考手冊: http://www.shouce.ren/api/view/a/654
svg, 用 XML 描述 2D 圖形
示例:
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="190">
<polygon points="100,10 40,180 190,60 10,60 160,180"
style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;">
</svg>
與cavas比較:
不依賴分辨率;
支持事件處理器;
適合大型渲染區域;
不適合遊戲應用‘
drag, 拖放元素
示例: http://www.shouce.ren/study/api/s/2992
geolocation, 地理定位
h5新元素
參考手冊: http://www.shouce.ren/api/view/a/1509
video/audio
input類型
新增的輸入類型:
color、date、datetime、email、month、number、range、
search、tel、time、url、week
參考手冊: http://www.shouce.ren/api/view/a/312
新表單元素
datalist: 規定輸入域的選項列表
<input list="browsers">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
keygen: 提供一種驗證用戶的可靠方法
<form action="demo_keygen.php" method="get">
用戶名: <input type="text" name="usr_name">
加密: <keygen name="security">
<input type="submit">
</form>
output: 不同類型的輸出, 比如計算或腳本輸出
<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0
<input type="range" id="a" value="50"> 100
+ <input type="number" id="b" value="50">
= <output name="x" for="a b"></output>
</form>
表單屬性
一、form屬性
autocomplete: on或off, 表示自動完成
novalidate: 布爾值, 表示提交時不驗證表單
二、input屬性
|
autofocus |
布爾值, 設置此域自動獲得焦點 |
|
form |
規定此域所屬的一個或多個表單 |
|
formaction |
規定此域提交表單的URL地址 (會覆蓋form元素的action屬性; 與type=submit一起使用) |
|
formenctype |
規定表單提交到服務器的數據編碼 (只對method=post有效; 會覆蓋form元素的enctype屬性; 與type=submit一起使用) |
|
formmethod |
規定表單提交的方式 (會覆蓋form元素的method屬性; 與type=submit一起使用) |
|
formnovalidate |
布爾值, 規定表單在提交時無需被驗證 (會覆蓋form元素的novalidate屬性; 與type=submit一起使用) |
|
formtarget |
規定提交表單後的展示方式 (會覆蓋form元素的target屬性; 與type=submit一起使用) |
|
width / height |
規定圖像的寬度和高度 (只用於type=image) |
|
list |
規定輸入域的datalist (詳見: 新表單元素 > datalist) |
|
min / max |
規定此域的最小和最大值 (只用於date/number/range標簽) |
|
multiple |
布爾值, 規定此域可選擇多個值 (只用於email/file) |
|
pattern |
定義一個正則表達式用來驗證此域的值 (只用於 text, search, url, tel, email, 和 password) |
|
placeholder |
描述此域所期待的值, 即提示用戶應該輸入什麽 |
|
required |
布爾值, 規定此域不能為空值 |
|
step |
規定合法的數字間隔 (只用於 number, range, date, datetime, datetime-local, month, time 和 week) |
語義元素
6個元素, 一幅圖足以了解:
figure: 表示獨立的流內容 (圖像、圖表、照片、代碼等)
figcaption: 定義 <figure> 元素的標題.
示例代碼:
<figure>
<img src="img111.jpg" width="30">
<figcaption>Anything</figcaption>
</figure>
web存儲
localStorage: 沒有時間限制的數據存儲, 只要不刪除將會一直存在
sessionStorage: 針對一個session的數據存儲, 瀏覽器關閉後此數據立即被清除
數據以鍵值對進行存儲!!
檢查瀏覽器是否支持:
if(typeof(Storage)!=="undefined"){
//yes...
} else {
//no...
}
示例:
localStorage.lastname="Smith";
應用程序緩存
作用: 緩存web應用, 當在沒有因特網連接時仍然可以進行訪問.
優勢:
1. 離線瀏覽
2. 訪問速度
3. 減少服務器負載
用法:
1. 在文檔的<html> 標簽中包含 manifest 屬性
2. manifest文件擴展名建議是: .appcache
3. mainfest是簡單的文本文件: 告知瀏覽器應該要/不要緩存哪些內容
示例:
demo.html
<!DOCTYPE HTML>
<html manifest="demo.appcache">
...
</html>
demo.appcache
CACHE MANIFEST
/theme.css
/logo.gif
NETWORK:
login.php
FALLBACK:
/html/ /offline.html
示例解釋:
1. 可以 * 代表所有文件
2. NETWORK 規定不緩存的文件
3. FALLBACK 規定離線時, 用offline.html替代 html 目錄中的所有文件
4. 以 "#" 開頭的是註釋行
5. 第一行 CACHE MAINFEST 後面沒有冒號
緩存效果:
web worker
運行在後臺的 JavaScript
最佳使用場景:
1. 執行一些開銷較大的數據處理或計算任務;
2. worker會在後臺另外開辟一個線程來執行js代碼 (因為js計算過程中, 不能響應UI, 這樣會對用戶體驗造成很大影響).
worker線程分為兩種:
dedicated worker 和 shared worker, 可在chrome調試器中查看
示例代碼:
Main線程代碼
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src=‘//lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js‘></script>
<script>
$(function(){
$("#btn").click(function(){
var worker = new Worker("work.js");
worker.addEventListener("message", function(e){
console.log(e.data);
}, false);
worker.postMessage(3000);
});
});
</script>
</head>
<body>
<form>
<input type="button" id="btn" value="Start Processing"/>
</form>
</body>
</html>
work.js代碼
addEventListener("message", function(e){
var date = new Date();
var d = null;
do {
d = new Date();
} while ( d - date < e.data )
postMessage(d); //三秒鐘後返回信息
}, false);
error事件:
worker.addEventListener("error", function(evt){
alert("Line #" + evt.lineno + " - " + evt.message + " in " + evt.filename);
}, false);
終止worker:
worker.terminate();
優化worker:
1. 把參數進行序列號, work.postMessage(JSON.stringify(data));
2. 采用二進制的存儲方式
var imageData = context.createImageData(img.width, img.height);
var int8s = new Int8Array(imageData.data);
server-sent event
服務器發送事件, 即網頁自動獲取服務器的更新.
示例代碼:
index.html
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src=‘//lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js‘></script>
<script>
$(function(){
if (typeof(EventSource) !== "undefined") {
var source = new EventSource("sse.php");
source.addEventListener("message", function(event){
document.getElementById("result").innerHTML += event.data + "<br>";
}, false);
} else {
//sorry.
}
});
</script>
</head>
<body>
<div id=‘result‘></div>
</body>
</html>
sse.php
<?php
header(‘Content-Type: text/event-stream‘);
header(‘Cache-Control: no-cache‘);
header(‘Connection: keep-alive‘);
$time = time();
echo "data: The server time is: {$time}\n\n";
flush();
?>
web sql
h5數據庫操作
示例代碼:
<script type = "text/javascript" >
var db = openDatabase(‘mydb‘, ‘1.0‘, ‘Test DB‘, 2 * 1024 * 1024);
var msg;
db.transaction(function(tx) {
tx.executeSql(‘CREATE TABLE IF NOT EXISTS LOGS (id unique, log)‘);
tx.executeSql(‘INSERT INTO LOGS (id, log) VALUES (1, "foobar")‘);
tx.executeSql(‘INSERT INTO LOGS (id, log) VALUES (2, "logmsg")‘);
msg = ‘<p>Log message created and row inserted.</p>‘;
document.querySelector(‘#status‘).innerHTML = msg;
});
db.transaction(function(tx) {
tx.executeSql(‘SELECT * FROM LOGS‘, [],
function(tx, results) {
var len = results.rows.length,
i;
msg = "<p>Found rows: " + len + "</p>";
document.querySelector(‘#status‘).innerHTML += msg;
for (i = 0; i < len; i++) {
msg = "<p><b>" + results.rows.item(i).log + "</b></p>";
document.querySelector(‘#status‘).innerHTML += msg;
}
},
null);
});
</script>
;
html5 (逆天的html)