今天心情煩躁，搭建個(gè)論壇各種失敗，Laravel、React也學(xué)不進(jìn)去，于是就復(fù)習(xí)復(fù)習(xí)學(xué)過的。記錄一下很少用的東西。
代碼摘抄于W3C菜鳥教程HTML5手冊(cè)
# 定義文本方向
<element dir="ltr|rtl|auto">
// ltr 默認(rèn) 自左向右
// rtr 自右向左
// auto 讓瀏覽器自動(dòng)判斷
# 規(guī)定當(dāng)使用 "tab" 鍵進(jìn)行導(dǎo)航時(shí)元素的順序
<element tabindex="number">
# <base>
<head>
<base target="_blank">
</head>
<body>
//等于 http://www.w3cschool.cc/images/stickman.gif
</body>
# 行內(nèi)與塊級(jí)元素
行內(nèi)：b, td, a, img
塊級(jí)：h1, p, ul, table, header, section, footer, aside, nav, main, article, figure
# <noscript>，不支持script時(shí)候顯示
<noscript>
Sorry, your browser does not support JavaScript!
</noscript>
#URL - 統(tǒng)一資源定位器
scheme://host.domain:port/path/filename
scheme - 定義因特網(wǎng)服務(wù)的類型。最常見的類型是 http
host - 定義域主機(jī)（http 的默認(rèn)主機(jī)是 www）
domain - 定義因特網(wǎng)域名，比如 w3cschool.cc
:port - 定義主機(jī)上的端口號(hào)（http 的默認(rèn)端口號(hào)是 80）
path - 定義服務(wù)器上的路徑（如果省略，則文檔必須位于網(wǎng)站的根目錄中）。
filename - 定義文檔/資源的名稱
# 為 IE 瀏覽器添加 HTML5 元素
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
# 畫布（Canvas）
//moveTo(x,y) 定義線條開始坐標(biāo)
//lineTo(x,y) 定義線條結(jié)束坐標(biāo)
//使用 stroke() 方法來繪制線條
//arc(x,y,r,start,stop) -> arc(95,50,40,0,2*Math.PI)
//font - 定義字體
//fillText(text,x,y) - 在 canvas 上繪制實(shí)心的文本
//strokeText(text,x,y) - 在 canvas 上繪制空心的文本
//createLinearGradient(x,y,x1,y1) - 創(chuàng)建線條漸變
//createRadialGradient(x,y,r,x1,y1,r1) - 創(chuàng)建一個(gè)徑向/圓漸變
//drawImage(image,x,y)
<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);
//畫漸（red -> white）變矩形
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
// Create gradient
var grd=ctx.createLinearGradient(0,0,200,0);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");
// Fill with gradient
ctx.fillStyle=grd;
ctx.fillRect(10,10,150,80);
// 畫圖像
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var img=document.getElementById("scream");
ctx.drawImage(img,10,10);
</script>
# 拖放（Drag 和 Drop）
<!DOCTYPE HTML>
<html>
<head>
<script>
//調(diào)用 preventDefault() 來避免瀏覽器對(duì)數(shù)據(jù)的默認(rèn)處理（drop 事件的默認(rèn)行為是以鏈接形式打開）
//通過 dataTransfer.getData("Text") 方法獲得被拖的數(shù)據(jù)。該方法將返回在 setData() 方法中設(shè)置為相同類型的任何數(shù)據(jù)。
//被拖數(shù)據(jù)是被拖元素的 id ("drag1")
//把被拖元素追加到放置元素（目標(biāo)元素）中
function allowDrop(ev){
//ondragover 事件規(guī)定在何處放置被拖動(dòng)的數(shù)據(jù)
ev.preventDefault();
}
function drag(ev){
//dataTransfer.setData() 方法設(shè)置被拖數(shù)據(jù)的數(shù)據(jù)類型和值
//數(shù)據(jù)類型是 "Text"，值是可拖動(dòng)元素的 id ("drag1")
ev.dataTransfer.setData("Text",ev.target.id);
}
function drop(ev){
//當(dāng)放置被拖數(shù)據(jù)時(shí)，會(huì)發(fā)生 drop 事件
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
}
</script>
</head>
<body>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
</body>
</html>
# 地理定位
var x=document.getElementById("demo");
function getLocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition,showError);
} else{
x.innerHTML="該瀏覽器不支持獲取地理位置。";
}
}
function showPosition(position) {
x.innerHTML="Latitude: " + position.coords.latitude + "<br>Longitude: " + position.coords.longitude;
// timestamp 響應(yīng)的日期/時(shí)間
// coords.speed 速度，以米/每秒計(jì)
// coords.heading 方向，從正北開始以度計(jì)
// coords.altitudeAccuracy 位置的海拔精度
// coords.altitude 海拔，海平面以上以米計(jì)
// coords.accuracy 位置精度
// coords.longitude 十進(jìn)制數(shù)的經(jīng)度
// coords.latitude 十進(jìn)制數(shù)的緯度
}
function showError(error) {
switch(error.code)
{
case error.PERMISSION_DENIED:
x.innerHTML="用戶拒絕對(duì)獲取地理位置的請(qǐng)求。"
break;
case error.POSITION_UNAVAILABLE:
x.innerHTML="位置信息是不可用的。"
break;
case error.TIMEOUT:
x.innerHTML="請(qǐng)求用戶地理位置超時(shí)。"
break;
case error.UNKNOWN_ERROR:
x.innerHTML="未知錯(cuò)誤。"
break;
}
}
# <video> 標(biāo)簽（MP4、WebM、Ogg）
//支持的屬性
//autoplay 自動(dòng)播放
//controls 顯示空間
//loop 循環(huán)播放
//muted 靜音
//poster="url" 視頻封面
//preload = [auto|metadata|none]
// ↑ ↑ ↑
//【
//指示一旦頁面加載，則開始加載音頻/視頻|
//當(dāng)頁面加載后僅加載音頻/視頻的元數(shù)據(jù)|
//頁面加載后不應(yīng)加載音頻/視頻
// 】
//使用 autoplay 屬性 preload 將被忽略
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
您的瀏覽器不支持 video 標(biāo)簽。
</video>
# 新的 Input 類型（雞肋，支持不夠好）
color 顏色
date 日期選擇器選擇一個(gè)日期
datetime 選擇一個(gè)日期（UTC 時(shí)間）。
datetime-local 選擇一個(gè)日期和時(shí)間 (無時(shí)區(qū))
email 應(yīng)該包含 e-mail 地址的輸入域
month 選擇一個(gè)月份
number 數(shù)值的輸入域
range 包含一定范圍內(nèi)數(shù)字值的輸入域
search 搜索域
tel 電話號(hào)碼字段
time 允許你選擇一個(gè)時(shí)間
url 允許你選擇一個(gè)時(shí)間
week 選擇周和年
# <datalist> 輸入框提示
<input list="browsers" name="browser">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
# 語義元素
語義元素
<section>
標(biāo)簽定義文檔中的節(jié)（section、區(qū)段）。
比如章節(jié)、頁眉、頁腳或文檔中的其他部分，
section 包含了一組內(nèi)容及其標(biāo)題。
<article>
標(biāo)簽定義獨(dú)立的內(nèi)容，F(xiàn)orum post，Blog post，News story，Comment
<nav>
標(biāo)簽定義導(dǎo)航鏈接的部分。
<aside>
標(biāo)簽定義頁面主區(qū)域內(nèi)容之外的內(nèi)容（比如側(cè)邊欄）
aside 標(biāo)簽的內(nèi)容應(yīng)與主區(qū)域的內(nèi)容相關(guān).
<header>
描述了文檔的頭部區(qū)域
元素注意用于定義內(nèi)容的介紹展示區(qū)域
在頁面中你可以使用多個(gè)<header> 元素.
<footer>
描述了文檔的底部區(qū)域.
一個(gè)頁腳通常包含文檔的作者，著作權(quán)信息，鏈接的使用條款，聯(lián)系信息等
文檔中你可以使用多個(gè) <footer>元素.
<figure>
規(guī)定獨(dú)立的流內(nèi)容（圖像、圖表、照片、代碼等等）。
元素的內(nèi)容應(yīng)該與主內(nèi)容相關(guān)，但如果被刪除，則不應(yīng)對(duì)文檔流產(chǎn)生影響
<figcaption>
應(yīng)該被置于 "figure" 元素的第一個(gè)或最后一個(gè)子元素的位置
標(biāo)簽定義 <figure> 元素的標(biāo)題.
# Web 存儲(chǔ)
localStorage - 沒有時(shí)間限制的數(shù)據(jù)存儲(chǔ)
sessionStorage - 針對(duì)一個(gè) session 的數(shù)據(jù)存儲(chǔ)，用戶關(guān)閉瀏覽器窗口后，數(shù)據(jù)會(huì)被刪除。
typeof(Storage) == "undefined" 代表不支持，使用前判斷一下是否支持。
localStorage.lastname="Smith";
document.getElementById("result").innerHTML=localStorage.lastname;
sessionStorage.lastname="Smith";
document.getElementById("result").innerHTML=sessionStorage.lastname;
# 應(yīng)用程序緩存
<!DOCTYPE HTML>
<html manifest="demo.appcache">
Manifest 文件
以 "#" 開頭的是注釋行
CACHE MANIFEST - 在此標(biāo)題下列出的文件將在首次下載后進(jìn)行緩存
NETWORK - 在此標(biāo)題下列出的文件需要與服務(wù)器的連接，且不會(huì)被緩存
FALLBACK - 在此標(biāo)題下列出的文件規(guī)定當(dāng)頁面無法訪問時(shí)的回退頁面（比如 404 頁面）
# Web Workers（運(yùn)行在后臺(tái)的 JavaScript）
typeof(Worker)=="undefined" 表示不支持，使用前判斷一下是否支持。
無法訪問下例 JavaScript 對(duì)象：
window 對(duì)象
document 對(duì)象
parent 對(duì)象
// demo_workers.js
// postMessage() 方法 - 它用于向 HTML 頁面?zhèn)骰匾欢蜗?var i=0;
function timedCount(){
i=i+1;postMessage(i);
setTimeout("timedCount()",500);
}
timedCount();
var w;
function startWorker() {
if(typeof(Worker) !== "undefined") {
if(typeof(w) == "undefined") {
w = new Worker("demo_workers.js");
}
w.onmessage = function(event) {
document.getElementById("result").innerHTML = event.data;
};
} else {
document.getElementById("result").innerHTML = "抱歉，你的瀏覽器不支持 Web Workers...";
}
}
function stopWorker() {
w.terminate();
w = undefined;
}
# 服務(wù)器發(fā)送事件(Server-Sent Events)
網(wǎng)頁自動(dòng)獲取來自服務(wù)器的更新
例子：Facebook/Twitter 更新、估價(jià)更新、新的博文、賽事結(jié)果等。
typeof(EventSource)=="undefined" 表示不支持，使用前判斷一下是否支持。
EventSource 對(duì)象事件:
onopen -> 當(dāng)通往服務(wù)器的連接被打開
onmessage -> 當(dāng)接收到消息
onerror -> 當(dāng)發(fā)生錯(cuò)誤
//EventSource 對(duì)象用于接收服務(wù)器發(fā)送事件通知
//每接收到一次更新，就會(huì)發(fā)生 onmessage 事件
var source=new EventSource("demo_sse.php");
source.onmessage=function(event) {
document.getElementById("result").innerHTML+=event.data + "<br>";
};
//服務(wù)器端代碼 -> demo_sse.php
<?php
header('Content-Type: text/event-stream');
// Tip: text/event-stream
// 規(guī)定不對(duì)頁面進(jìn)行緩存
header('Cache-Control: no-cache');
$time = date('r');
echo "data: The server time is: {$time}nn";
flush();?>
