viewport 可以控制页面的原始宽度，限制用户的缩放行为。
|
|
width: 控制 viewport 的宽度，可指定为数字如 800，或特殊值如 device-width，即设置为 100%。
height: 控制 viewport 的高度。
initial-scale: 页面第一次加载时的缩放比例。
maximum-scale: 最大缩放比例，取值从 0 到 10。
minimum-scale: 最小缩放比例，取值从 0 到 10。
user-scaleble: 是否允许用户缩放，取值为 yes/true 或 no/false。
var notification = new Notification("标题", {dir: 'auto', lang: '', tag: 'Tag', icon: 'icon.png', body: '内容...'})
创建一个新的 FormData 对象，然后使用 append() 添加字段：
var form = new FormData();
form.append('name', 'xiaolai');
form.append('age', 18);
// 使用 ajax 发送
var req = new XMLHttpRequest();
req.open('POST', 'http://laispace.com/test');
req.send(form);
FormData.append(key, value)中 value 可以是string/Blob对象/File对象
利用已有的 form 创建 FormData 对象进行格式化
var myForm = document.getElementById('myForm');
var form = new FormData(myForm);
继续使用 FormData.append() 添加字段，或使用 ajax 发送表单
异步上传文件
若 myForm 中有用户选择的文件，要进行异步上传：
var req = new XMLHttpRequest();
req.open('POST', 'http://laispace.com/test', true);
req.onload = function (e) {
if (req.status === 200) {
console.log('文件已成功上传！')
} else {
console.log('啊噢~ 文件上传失败！')
}
}
写这篇文时以下非常有用的device api并未被所有浏览器（特别是mobile browser）实现，期待各种新版本的新实现。
需要用时，在 caniuse.com 查阅就知道当前这个api是否可用。
HTML5一些特性不断在变化，一年前的语法跟现在的已经大有不同，像用来布局的 flex 属性也有新旧版本的语法了。
处理兼容性真是个蛋疼的事情 。
这里放一些闲时做的DEMO吧（含CSS3），测试在chrome下，主要目的是了解基本用法让自己一目了然，在项目需要的时候再加上兼容方案吧：）
1.设置父容器为 display 属性为 ‘flex’
2.设置子容器的 width、flex 和 order 属性
直接使用 css3 中的属性 transform：
[javascript]
// 获取内嵌框架
var iframeWindow = document.getElementById(‘myFrame’).contentWindow;
// 向内嵌框架发送消息
iframeWindow.postMessage(‘你好 赖小赖’, ‘http://laispace.com‘);
[/javascript]
[javascript]
// message 事件是异步的
window.onmessage = function (event) {
// 确保消息源是已知域 event.origin
if (event.origin == ‘http://laispace.com‘) {
// 处理接收到的消息 event.data
console.log(event.data);
// 向消息源发送回执(event.source是消息源的window对象的代理)
event.source.postMessage(‘消息已收到’, ‘http://www.消息源.com‘);
}
};
[/javascript]
使用nodejs的socket.io和现代浏览器的WebSocket来建立一个聊天室。
[javascript]
var http = require(‘http’);
var io = require(‘socket.io’);
// 创建一个服务器
var server = http.createServer(function(request, response){
response.writeHead(200, {‘Content-type’: ‘text/html’});
response.end(‘小赖的WebSocket服务器启动啦！’);
});
// 监听端口
server.listen(9999);
// 创建一个WebSocket
var socket = io.listen(server).set(‘log’, 1);
// 监听连接
server.on(‘connection’, function(client) {
// 监听信息
client.on(‘message’, function(data){
console.log(‘收到客户端发来信息：’, data);
var curTime = new Date().getTime();
client.emit(‘服务器返回信息：’, data + ‘->’ + curTime);
client.on('disconnect', function(){
console.log('连接已断开');
});
});
});
[/javascript]
创建http服务器，运行http服务器成功：
[html]
<!DOCTYPE html>
<html>
<head>
<title>WebSocket API</title>
<meta charset="utf-8">
<script src="<span style="text-decoration: underline;">http://localhost:9999/socket.io/socket.io.js</span>"></script>
</head>
<body>
<div id="log">显示log信息…</div>
<input id="msg" type="text" placeholder="请输入信息" />
<button id="send-btn">发送！</button>
<script>
var myWebSocket = {};
myWebSocket.socketio = {
mysocket: null,
initialize: function(){
// 建立连接
myWebSocket.socketio.mysocket = io.connect(‘<span style="text-decoration: underline;">http://localhost:9999</span>’);
// 监听连接
myWebSocket.socketio.mysocket.on(‘connect’, function(){
myWebSocket.socketio.log(‘成功连接到服务器\n’);
});
// 监听信息
myWebSocket.socketio.mysocket.on(‘message’, function(data){
myWebSocket.socketio.log(‘服务器返回数据：’ + data + ‘\n’);
});
// 监听断开连接
myWebSocket.socketio.mysocket.on(‘disconnect’, function(){
myWebSocket.socketio.log(‘已断开连接\n’);
})
// 点击发送按钮
document.querySelector('#send-btn').onclick = function(){
// 发送信息到服务器
var msg = document.querySelector('#msg').value;
myWebSocket.socketio.sendMessageToServer(msg);
document.querySelector('#msg').value = '';
};
},
sendMessageToServer: function(data){
myWebSocket.socketio.mysocket.secd(data);
myWebSocket.socketio.log('已发送信息到服务器：' + data +'\n');
},
log: function(msg) {
document.querySelector('#log').innerHTML += msg;
}
}
myWebSocket.socketio.initialize();
</script>
</body>
</html>
[/html]
然后在浏览器打开这个网页，终端显示：
这样客户端和服务器就可以通信啦！
输入信息后，点击发送，终端显示：
浏览器则显示：
然后关闭服务器的话，则显示「已断开连接」：
实现广播功能，即一个客户端发送消息，所以和服务器建立了连接的其他客户端都能看到这个消息：
修改serverfile.js文件，注意有『修改』字眼的部分：
[javascript]
var http = require(‘http’);
var io = require(‘<span style="text-decoration: underline;">socket.io</span>’);
// 创建一个服务器
var server = http.createServer(function(request, response){
response.writeHead(200, {‘Content-type’: ‘text/html’});
response.end(‘小赖的WebSocket服务器启动啦！’);
});
// 监听端口
server.listen(9999);
// 创建一个WebSocket
var socket = io.listen(server).set(‘log’, 1);
// 监听连接
socket.on(‘connection’, function(client) {
// 修改：监听信息
client.on(‘customMessage’, function(data){
console.log(‘收到客户端发来信息：’, data);
var curTime = new Date().getTime();
// 修改：使用广播方法
client.broadcast.emit('服务器返回customMessage信息：', data + '广播->' + curTime);
client.on('disconnect', function(){
console.log('连接已断开');
});
});
});
[/javascript]
修改webSocket.html文件，注意有『修改』字眼的部分：
[html]
<!DOCTYPE html>
<html>
<head>
<title>WebSocket API</title>
<meta charset="utf-8">
<script src="<span style="text-decoration: underline;">http://localhost:9999/socket.io/socket.io.js</span>"></script>
</head>
<body>
<div id="log">显示log信息…</div>
<input id="msg" type="text" placeholder="请输入信息" />
<button id="send-btn">发送！</button>
<script>
var myWebSocket = {};
myWebSocket.socketio = {
mysocket: null,
initialize: function(){
// 建立连接
myWebSocket.socketio.mysocket = io.connect(‘<span style="text-decoration: underline;">http://localhost:9999</span>’);
// 监听连接
myWebSocket.socketio.mysocket.on(‘connect’, function(){
myWebSocket.socketio.log(‘成功连接到服务器<br />’);
});
//修改： 监听customMessage信息
myWebSocket.socketio.mysocket.on(‘broadcastMessage’, function(data){
myWebSocket.socketio.log(‘收到广播信息：’ + data + ‘<br />’);
});
// 监听断开连接
myWebSocket.socketio.mysocket.on(‘disconnect’, function(){
myWebSocket.socketio.log(‘已断开连接\n’);
})
// 点击发送按钮
document.querySelector('#send-btn').onclick = function(){
// 发送信息到服务器
var msg = document.querySelector('#msg').value;
myWebSocket.socketio.sendMessageToServer(msg);
document.querySelector('#msg').value = '';
};
},
sendMessageToServer: function(data){
// 修改
myWebSocket.socketio.mysocket.emit('customMessage', data);
myWebSocket.socketio.log('已发送信息到服务器：' + data +'<br />');
},
log: function(msg) {
document.querySelector('#log').innerHTML += msg;
}
}
myWebSocket.socketio.initialize();
</script>
</body>
</html>
[/html]
然后用多个页面打开webSocket.html,在第一个页面输入消息：
点击发送，其他页面立即收到了消息：
在第二个页面输入信息：
在其他页面收到广播：
哇！WebSocket够强大，可以实现客户端和服务端的通信，而node的socket.io更是封装了它的一系列方法，实现一个web端通信就轻而易举了，但！是！HTML5的这个新特性，你敢用嘛？！
在caniuse.com查询可知，WebSocket在IE10+和其他现代浏览器才支持，低版本的IE不支持WebSocket - -！
不过好消息是，socket.io对不支持WebSocket的浏览器启用了其他策略，使得socket.io甚至能在IE6下运行！
为实现图片上传前预览并限制图片大小，貌似只能通过flash和HTML5的API来解决了吧？
今天学习了HTML5的file API，将预览和限制大小的功能应用到了项目里。
练习代码先贴到这，方便自己查阅，日后比较空闲时再回来好好研究那些API的机制吧：）
[html]
<p>请选择图片(可多选)：</p>
<input id="file_input" type="file" multiple style="display:none;" onchange="handleFiles(this.files)">
<button id="select-btn">请选择图片</button>
<div id="dropbox" style="width:300px;height:200px;background:#eee;">
或拖动图片到此处
</div>
<ol id="preview-img-list">
</ol>
<button id="send-btn">发送！</button>
[/html]
[javascript]
// 获取文件
var file_input = document.getElementById(‘file_input’);
var select_btn = document.getElementById(‘select-btn’);
var preview_img_list = document.getElementById(‘preview-img-list’);
var dropbox = document.getElementById(‘dropbox’);
var send_btn = document.getElementById(‘send-btn’);
// 选择文件
select_btn.onclick = function(){
file_input.click();
};
send_btn.onclick = function(){
sendFiles();
};
// 监听文件改变
file_input.addEventListener(‘change’, handleFiles, false);
// 监听拖拽事件
dropbox.addEventListener(‘dragenter’, dragenter, false);
dropbox.addEventListener(‘dragover’, dragover, false);
dropbox.addEventListener(‘drop’, drop, false);
// 接受并预览图片
function handleFiles(files){
var len = files.length;
var imageType = /image.*/;
window.URL = window.URL || window.webkitURL;
if (len) {
preview_img_list.innerHTML = ‘’;
for (var i = 0; i < len; i++) {
if( ! files[i].type.match(imageType)) {
// 不是图片 跳过
continue;
}
var li = document.createElement(‘li’);
var img = document.createElement(‘img’);
var p = document.createElement(‘p’);
p.innerHTML = ‘name: ‘ + files[i].name + " <br />size: " + files[i].size + ‘ Bytes’ + "<br/>type: " + files[i].type;
// 将file对象存在当前图片中,用于后续创建上传任务
img.file = files[i];
// 添加一个类，方便选择
img.classList.add(‘obj’);
/方法一：使用URL对象预览图片/
// 使用window.URL.createObjectURL创建 blob URL
img.src = img.src = window.URL.createObjectURL(files[i]);
img.onload = function(e) {
// 使用window.URL.revokeObjectURL释放URL对象，因为图片加载完成后不再需要这个对象
window.URL.revokeObjectURL(this.src);
}
/方法一结束/
/方法二：使用FileReader对象预览图片 /
// var reader = new FileReader();
// reader.onload = (function(aImg) {
// return function(e) {
// aImg.src = e.target.result;
// };
// })(img);
// reader.readAsDataURL(files[i]);
/方法二结束 /
li.appendChild(img);
preview_img_list.appendChild(li);
};
}
}
// 创建上传任务
function sendFiles() {
var imgs = document.querySelectorAll(‘.obj’);
var len = imgs.length;
for (var i = 0; i < len; i++) {
// 第二个参数用于读取图片数据
new FileUpLoad(imgs[i], imgs[i].file);
};
}
function FileUpLoad(img, file) {
var reader = new FileReader();
// 创建一个 throbber 用于显示进度信息
this.ctrl = createThrobber(img);
// 创建一个XMLHttpRequest对象用来上传数据
var xhr = new XMLHttpRequest();
this.xhr = xhr;
var self = this;
// 监听数据上传，更新throbber
this.xhr.upload.addEventListener(‘progress’, function(e){
if (e.lengthComputable) {
var percentage = Math.round((e.loaded * 100) / e.total);
self.ctrl.update(percentage);
}
}, false);
// 上传完成，更新进度到100%，移除throbber 因为不再需要
xhr.upload.addEventListener(‘load’, function(e) {
self.ctrl.update(100);
var canvas = self.ctrl.ctx.canvas;
canvas.parentNode.removeChild(canvas);
}, false);
// 使用POST方式发送数据
xhr.open("POST", "http://demos.hacks.mozilla.org/paul/demos/resources/webservices/devnull.php");
// 使用一个通用的MIME类型
xhr.overrideMimeType(‘text/plain; charset=x-user-defined-binary’);
reader.onload = function(evt) {
// 以二进制形式发送
xhr.sendAsBinary(evt.target.result);
};
// 将文件转化为二进制字符串形式
reader.readAsBinaryString(file);
}
function dragenter(e) {
e.stopPropagation();
e.preventDefault();
}
function dragover(e) {
e.stopPropagation();
e.preventDefault();
}
function drop(e) {
e.stopPropagation();
e.preventDefault();
var dt = e.dataTransfer;
var files = dt.files;
handleFiles(files);
}
[/javascript]
这个File API 使得浏览器支持预览、图片大小/类型限制、拖拽上传、多图上传。
META标签用来描述一个HTML网页文档的属性。
一般有三个属性：http-equiv,name,scheme.
1.http-equiv
1.1 content-type：字符集的设定，决定读取文件的形式和编码,用法：
<meta http-equiv=”Content-Type” content=”text/html; charset=gb2312” />
1.2 expires：期限，设定网页到期时间（网页到期后必须服务器重新上传），用法：
用法：＜meta http-equiv=”expires” content=”Mon, 03 Dec 2012 18:18:18 GMT”＞
1.3 refresh：定时重刷新到指定页面，用法：
＜meta http-equiv=”Refresh” content=”2”；URL=http://www.laispace.com"＞
1.4 set-cookie：网页过期，那么存盘的cookie将被删除。，用法：
＜meta http-equiv=”Set-Cookie” content=”cookievalue=xxx; expires=Monday, 03-Jan-2012 18:18:18 GMT； path=/“＞
1.5 pragma:缓存模式，禁止浏览器使用本地缓存（无法脱机浏览），用法：
＜meta http-equiv=”Pragma” content=”no-cache”＞
1.6 window-target：显示窗口设定，用法（独立页面显示，防止别人在框架里调用自己的页面。）：
＜meta http-equiv=”Window-target” content=”_top”＞
1.7 page-enter/exit：网页进出动态效果，用法：
＜meta http-equiv=”Page-Enter” content=”revealTrans(duration=５.０, transition=２０)”＞
＜meta http-equiv=”Page-Exit” content=”revealTrans(duration=５.０, transition=２０)”＞
2.name
2.1 revisit-after：
<meta name=”revisit-after” content=”1 days” >
2.2 author：作者
2.3 description：内容描述
2.4 keywords：关键词，keywords的content用逗号隔开
2.5 robots:机器人向导，声明需要索引的页面，content值可选all,none,index,noindex,follow,nofollow。默认是all。
2.5 generator：网页采用的技术版本版本
2.6 revised：修复
2.7 others：其他，用法：
<meta NAME=”copyright” content=”Copyright 2012 -laispace.com” />
3.scheme
some_text：定义与 http-equiv 或 name 属性相关的元信息，用法：
<meta scheme=”ISBN” name=”identifier” content=”0-14-043205-1” />
head中其他元素的用法：
1.link:链接，用法：
<link href=”URL” rel=”relationship”>如<link href=”xiaolai.ico” rel=”shortcut icon”>
2.base：基链接，将网页内的相对路径改成绝对路径，用法：
<base href=”http://www.laispace.com“ target=”_blank”>
<base href=”http://www.laispace.com“ target=”_top”>
Meta的使用方法技巧（以下为摘抄转载内容）：
Meta标签是用来描述网页属性的一种语言，标准的Meta标签可以便于搜索引擎排序，提高搜索引擎网站权重排名。要想网站做的更符合搜索引擎标准就必须了解meta标签，下面由Seoer惜缘于大家讲讲meta标签含义与使用方法：
1、META标签的keywords
写法为：<meta name=”Keywords” content=”信息参数” />
meat标签的Keywords的的信息参数，代表说明网站的关键词是什么。
2、META标签的Description
<meta name=”Description” content=”信息参数” />
meta标签的Description的信息参数，代表说明网站的主要内容，概况是什么。
3、META标签的http-equiv=Content-Type content=”text/html
http-equiv=Content-Type代表的是HTTP的头部协议，提示浏览器网页的信息，
<meta http-equiv=”Content-Type” content=”text/html; charset=信息参数” />
meta标签的charset的信息参数如GB2312时，代表说明网站是采用的编码是简体中文；
meta标签的charset的信息参数如BIG5时，代表说明网站是采用的编码是繁体中文；
meta标签的charset的信息参数如iso-2022-jp时，代表说明网站是采用的编码是日文；
meta标签的charset的信息参数如ks_c_5601时，代表说明网站是采用的编码是韩文；
meta标签的charset的信息参数如ISO-8859-1时，代表说明网站是采用的编码是英文；
meta标签的charset的信息参数如UTF-8时，代表世界通用的语言编码；
4、META标签的generator
<meta name=”generator” content=”信息参数” />
meta标签的generator的信息参数，代表说明网站的采用的什么软件制作。
5、META标签的author
<meta name=”author” content=”信息参数”>
meta标签的author的信息参数，代表说明网页版权作者信息。
6、META标签的http-equiv=”Refresh”
<Meta http-equiv=”Refresh” Content=”时间; Url=网址参数”>
meta标签的Refresh代表多少时间网页自动刷新，加上Url中的网址参数就代表，多长时间自动链接其他网址。
7、META标签的HTTP-EQUIV=”Pragma” CONTENT=”no-cache”
<META HTTP-EQUIV=”Pragma” CONTENT=”no-cache”>代表禁止浏览器从本地计算机的缓存中访问页面内容,这样设定，访
问者将无法脱机浏览。
8、META标签的COPYRIGHT
<META NAME=”COPYRIGHT” CONTENT=”信息参数”>
meta标签的COPYRIGHT的信息参数，代表说明网站版权信息。
9、META标签的http-equiv=”imagetoolbar”
<meta http-equiv=”imagetoolbar” content=”false” />
指定是否显示图片工具栏，当为false代表不显示，当为true代表显示。
10、META标签的Content-Script-Type
<Meta http-equiv=”Content-Script-Type” Content=”text/javascript”>
W3C网页规范，指明页面中脚本的类型。
11、META标签的revisit-after
<META name=”revisit-after” CONTENT=”7 days” >
revisit-after代表网站重访,7 days代表7天，依此类推。
12、META标签的Robots
<meta name=”Robots” contect=”信息参数”>
Robots代表告诉搜索引擎机器人抓取哪些页面
其中的属性说明如下：
信息参数为all：文件将被检索，且页面上的链接可以被查询；
信息参数为none：文件将不被检索，且页面上的链接不可以被查询；
信息参数为index：文件将被检索；
信息参数为follow：页面上的链接可以被查询；
信息参数为noindex：文件将不被检索，但页面上的链接可以被查询；
信息参数为nofollow：文件将被检索，但页面上的链接不可以被查询；
2、英文前缀meta-前缀 pref.
1.表示”变化”,”变换”
2.表示”继”,”在…之后”
3.表示”超越”
4.表示”在…之间”,”介于”
例词：metaphysics
n.
1.形而上学；玄学
2.深奥莫测的推理；空谈；空头理论
来自希腊语，最初来源是作为亚里士多德所著《形而上学》一书的书名，意指“第一哲学”，也就是以“作为存在的存在（being as being）”为研究对象的形而上学，其意义为“在具体科学之后”
3.模板meta语言
模板meta语言由GDMO提出，采用类似于BNF的语法，因此与ASN.1相似，只要了解了它与ASN.1的不同之处就可以在ASN.1有关知识的基础上正确使用。因此，这里只将有关要点进行如下说明：
1.分号（；）用于终止结构和中止模板
2.空格，空行，注释和行尾只起分割符的作用。在需要标志一个元素结束，另一个元素开始时使用。
3.注释由双连字符（—）引导，在行尾或遇到另外的双连字符终止。可以出现在任何分隔区中，但不能出现在结构名或模板名所包含的空格之间。
4.方括号（[ ]）用于指出模板定义中的可选元素。
5.右圆括号中的星号（*）指出模板定义中的可选元素。
6.选择对象由竖线（|）分割。这个符号旨在支持件的定义中使用。
7.将由用户确定的字符串扩在尖括号(<>)中。
8.附件用一个引用标号，后接符号->>,后接一个由文本字符串和符号构成的语法定义组成。
9.分隔串出现在模板定义中自然语言文本或形式说明文本之中。他们由任意的字符串组成，字符串可以由以下任意一个分隔符引导和终止。分隔符是“$ % ^ & * ` ‘ ~ ? @ \”。如果分隔串由某个分隔符开始，则这个分隔串直到再次遇到相同的分隔符才结束。