html5in24hours
http://www.html5in24hours.com/books/the-book/code/
1.浏览器测试 http://browsershots.org/
2.http://www.fontsquirrel.com/
常用字体：arial,helvetica,comic sans,courier,times new roman
3.重置样式：http://meyerweb.com/eric/tools/css/reset/
4.需要理解：http://www.html5in24hours.com/code-samples/hour4-code.html
移动设备检测及对HTML5的支持
在全局对象上检测属性
在创建的元素上检测属性
检测一个方法能否得到正确的返回值
检测能否保留元素值
5.
5.1设置、读取、删除cookie
5.2表单验证
5.3CDN云脚本 http://code.jquery.com/
6.
7.nothing
8.
HTML5及CSS3检测
如果使用了modernizr脚本，就不需要使用HTML5shiv脚本。
<script src="modernizr-#.#.min.js"></script> <html class="no-js">
或者
<!-- [if lt IE 9] -->
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js">
</script>
<!-- [endif] -->
其他办法代码示例：
http://www.html5in24hours.com/code-samples/hour8-code.html
9.分节元素
10.canvas
http://www.html5in24hours.com/code-samples/hour10-code.html
绘制线条、矩形、圆形等等
用图形作为画布的一部分或用作图案
比较：《HTML5移动应用开发》
11.
HTML5字体与排版
html entities
很多新属性尝试一下吧：
http://www.html5in24hours.com/code-samples/hour11-code.htm
12.HTML5音频与视频
为不支持HTML视频的低端IE浏览器创建回退选项，使用flash视频播放器，
<video controls height="600" width="800"> <source src="Shasta.mp4">
<source src="Shasta.theora.ogv">
<source src="Shasta.webm"> <!-- fallback to Flowplayer: -->
<a
href="Shasta.flv"
style="display:block;width:800px;height:600px"
id="player">
</a>
<script>
flowplayer("player", "flowplayer/flowplayer-3.2.7.swf");
</script> <script src="flowplayer/flowplayer-3.2.6.min.js"></script> <script>
if (!Modernizr.video) {
document.write('<p>Your browser does not support video playback, download the video: <a href="Shasta.mp4">MP4</a>, <a href="Shasta.theora.ogv">ogg/Theora</a>, <a href="Shasta.webm">WebM</a>');
}
</script> </video>
使用API方法创建自定义播放控制器
<video height="600" width="800">
<source src="Shasta.mp4">
<source src="Shasta.theora.ogv">
<source src="Shasta.webm">
</video>
<script>
var video = document.getElementsByTagName('video')[0];
</script>
<p>
<button value="Play" class="play" onclick="video.play()">
<img src="data:images/Play.png" width="32" height="32" alt="Play"></button>
<button value="Pause" class="pause" onclick="video.pause()">
<img src="data:images/Pause.png" width="32" height="32" alt="Pause"></button> <script>
var video = document.getElementsByTagName('video')[0];
video.onpause = video.onplay = function(e) {
playPause.value = video.paused ? 'Play' : 'Pause';
}
function playPause() {
if (video.paused || video.ended) {
video.play();
} else {
video.pause();
}
}
</script>
<button value="Play/Pause" id="playPause" onclick="playPause()">
<img src="data:images/PlayPause.png" width="26" height="28" alt="Play/Pause"></button>
预定播放器参考列表
http://praegnanz.de/html5video/index.php
13.HTML5表单
占位符文本、自动聚焦
<!-- Placeholder Text-->
<input type="text" id="name" placeholder="Fill in your full name">
<input type="text" value="Short comment field (140 char)" maxlength="140" size="50" onfocus="if (this.value == 'Short comment field (140 char)') { this.value = '';}" onblur="if (this.value == '') {this.value = 'Short comment field (140 char)';">
.ph {
color: #999;
}
.no-ph {
color: #000;
}
<input type="text" value="Short comment field (140 char)" maxlength="140" size="50" onfocus="if (this.value == 'Short comment field (140 char)') { this.value = ''; this.className = 'no-ph';}" onblur="if (this.value == '') {this.value = 'Short comment field (140 char)'; this.className='ph';}" class="ph">
if (!Modernizr.input.placeholder) { ... }
::-webkit-input-placeholder {
color: aliceblue;
background-color: #ccc;
}
:-moz-placeholder {
color: aliceblue;
background-color: #ccc;
}
<textarea id="comments" autofocus></textarea>
<!-- Autofocus -->
<input type="text" id="name" autofocus>
...
<script>
if (!Modernizr.input.autofocus) {
document.getElementById('name').focus();
}
</script>
数字类型
14.使用HTML5编辑内容与用户互动
代码熟悉
15.微格式与微数据
16.HTML5拖拽功能
IOS上拖拽接口的开源库http://www.gotproject.com/blog/post2.html
17.HTML5链接
<a>链接改进，可以环绕任意内容
<area>拥有与<a>同样属性的热点图
<link rel="">链接类型与关系
18.Web应用程序API和数据集
/*IOS中单击事件延迟解决方法*/
function iosClicks() {
var iOS = !!navigator.userAgent.match('iPhone OS') || !!
navigator.userAgent.match('iPad');
if (iOS) {
$('[onclick]').each(function() {
var onclick = $(this).attr('onclick');
$(this).removeAttr('onclick'); // Remove the onclick attribute
$(this).bind("click", function(e) {
e.preventDefault;
}); // prevent the click default action
$(this).bind('tap', onclick); // Turn taps into click
});
}
}
HTML5自定义属性对象dataset
19.WebSocket、Web Workers和文件
创建一个简单计算器
// worder.js event listener
this.onmessage = function (event) {
var data = event.data;
switch (data.func) {
case 'add':
postMessage(addNumbers(data.one, data.two));
break;
case 'subtract':
postMessage(subtractNumbers(data.one, data.two));
break;
case 'multiply':
postMessage(multiplyNumbers(data.one, data.two));
break;
case 'divide':
postMessage(divideNumbers(data.one, data.two));
break;
default:
postMessage("Error: Unknown operation");
}
}; function addNumbers(one, two) {
return one + two;
} function subtractNumbers(one, two) {
return one - two;
} function multiplyNumbers(one, two) {
return one * two;
} function divideNumbers(one, two) {
if (two == 0) {
return "no divide by zero";
} else {
return one / two;
}
}
<!DOCTYPE HTML>
<html> <head>
<meta charset="UTF-8">
<title>Web Workers Example</title>
<script src="js/jquery.js"></script> </head> <body> <h1>A Calculator</h1>
<!-- id、class未添加双引号-->
<p>
<button id=one class=number>1</button>
<button id=two class=number>2</button>
<button id=three class=number>3</button>
<button id=divide class=fx>/</button>
</p>
<p>
<button id=one class=number>4</button>
<button id=two class=number>5</button>
<button id=three class=number>6</button>
<button id=multiply class=fx>*</button>
</p>
<p>
<button id=one class=number>7</button>
<button id=two class=number>8</button>
<button id=three class=number>9</button>
<button id=subtract class=fx>-</button>
</p>
<p>
<button id=zero class="number">0</button>
<button id=period class=number>.</button>
<button id=add class=fx>+</button>
</p>
<p>
<button id=clear>C</button>
<button id=submit>=</button> </p>
<p>
First Number
</p>
<p>
<input id=first readonly class=numbers>
</p>
<p>
Second Number
</p>
<p>
<input id=second readonly class=numbers>
</p>
<p>
Result
</p>
<p>
<input id=result readonly class=numbers>
</p> <script>
if (supportsWorkers()) {
worker = new Worker("js/worker.js");
// Watch for messages from the worker
worker.onmessage = function(e){
$("#result").val(e.data);
};
} else {
alert("this calculator will not work in your browser, sorry ");
} function supportsWorkers() {
return !!window.Worker;
} $(document).ready(function () {
var next, cur, func, one, two, message;
$(".number").click(function () {
if (!next) {
cur = $("#first").val();
num = $(this).html();
num = cur + num;
// input first number
$("#first").val(num);
} else {
cur = $("#second").val();
num = $(this).html();
num = cur + num;
$("#second").val(num);
}
}); $(".fx").click(function () {
next = 1;
func = $(this).attr("id");
one = parseFloat($("#first").val());
}); $("#clear").click(function () {
$("input").attr('value', '');
next = 0;
}); $("#submit").click(function () {
two = parseFloat($("#second").val());
message = {
'func': func,
'one': one,
'two': two
};
worker.postMessage(message);
}); });
</script>
</body> </html>
创建拖拽文件上传器
<!DOCTYPE HTML>
<html> <head>
<meta charset="UTF-8">
<title>Drag and Drop File Uploader</title>
<script src="jquery.min.js"></script>
<link rel="stylesheet" href="css/ui-lightness/jquery-ui-1.8.18.custom.css"/>
<script type="text/javascript" src="js/jquery-1.7.1.min.js">
</script>
<script src="js/jquery-ui-1.8.18.custom.min.js"></script>
</head> <body>
<div id="dropBox" dropzone="copy" style="height:500px;background:pink;">
<p>Drop Image Files Here</p>
</div>
<div id="preview" style="height:200px;background:#ccc;"></div>
<div id="progress" style="height:800px"></div>
</body>
</html>
<script>
$(document).ready(function () {
var dropbox = document.getElementById("dropBox")
// init event handlers
dropbox.addEventListener("dragenter", dragEnter, false);
dropbox.addEventListener("dragexit", dragExit, false);
dropbox.addEventListener("dragover", dragOver, false);
dropbox.addEventListener("drop", drop, false);
// initialize progressbar
$("#progress").progressbar();
}); function dragEnter(e) {
e.preventDefault();
} function dragExit(e) {
e.preventDefault();
} function dragOver(e) {
e.preventDefault();
} function drop(e) {
e.stopPropagation();
e.preventDefault();
var files = e.dataTransfer.files;
var count = files.length;
// only do the upload function if there are files dropped
if (count > 0) {
uploadFiles(files);
}
} function uploadFiles(files) {
var i, file;
for (i = 0; i < files.length; i++) {
file = files[i];
// make sure they are only image types
if (!file.type.match('image.*')) {
continue;
}
// make sure they are not too big
if (file.size > 30000) {
alert(file.name + " file size too large");
continue;
}
var reader = new FileReader();
// progress bar
reader.onprogress = handleReaderProgress;
// load done
reader.onloadend = handleReaderLoadEnd;
// begin the read operation
reader.readAsDataURL(file);
}
$("#dropBox p").html("Complete. Upload more?");
} function handleReaderProgress(e) {
if (e.lengthComputable) {
var loaded = (e.loaded / e.total);
$("#progress").progressbar({
value: loaded * 100
});
}
} function handleReaderLoadEnd(e) {
$("#progress").progressbar({
value: 100
});
$("#preview")
.append("<img class=preview src=" + e.target.result + ">");
}
</script>
20.离线Web应用程序
http://www.cnblogs.com/brainmao/archive/2011/09/27/2193495.html
21.HTML5 Web存储
22.利用History API 控制浏览器历史记录
23.使用Geolocation添加地理位置检测
24.将HTML5应用程序转换为原生应用程序
html5in24hours的更多相关文章
随机推荐
- ARM字节对齐问题详解
一.什么是字节对齐,为什么要对齐? 现代计算机中内存空间都是按照byte划分的,从理论上讲似乎对任何类型的变量的访问可以从任何地址开始,但实际情况是在访问特定类型变量的时候经常在特定的内存地址访问,这 ...
- Java多线程-新特性-有返回值的线程
在Java5之前,线程是没有返回值的,常常为了“有”返回值,破费周折,而且代码很不好写.或者干脆绕过这道坎,走别的路了. 现在Java终于有可返回值的任务(也可以叫做线程)了. 可返回值的任务必须实现 ...
- PHP换行符详解 PHP_EOL，<br />
1.PHP_EOL:用于文本的换行符,经常用于日志文件记录.可以解决: 在windows中\r\n是换行在Mac中\r是换行在Liunx中\n是换行 不统一的问题. 2. <br /> : ...
- windows系统下Tomcat与Apache服务器集成
说明:此文是看书真实试验成功的,书中提到了不同版本不兼容的问题,但是很荣幸我没碰到,此例可供参考. 本文假设你已经有了java环境和tomcat,你已经熟悉tomcat的应用. Jdk 1.7.0_5 ...
- C#基础学习文章导航
第一部分:入个门 C#入门篇-1:HelloWorld的类 C#入门篇-2:什么是变量 C#入门篇-3:数据类型及转换 C#入门篇-4:使用运算符 第二部分:流程控制语句 C#入门篇5-1:流程控制语 ...
- mysql启动报错
查看报错日志: 131023 15:02:59 [ERROR] Can't start server: Bind on TCP/IP port: No such file or directory13 ...
- 发送广播BroadcastReceiver
import android.os.Bundle;import android.app.Activity;import android.content.Intent;import android.vi ...
- Js笔试题之parseInt()和.map()
parseInt()的几个例子 var b = parseInt("01"); alert("b="+b); var c = parseInt("09 ...
- 完美实现自己的GetProcAddress函数(转载)
我们知道kernel32.dll里有一个GetProcAddress函数,可以找到模块中的函数地址,函数原型是这样的: WINBASEAPI FARPROC WINAPI GetProcAddress ...
- arm-linux-gcc-4.3.2安装步骤
安装交叉编译工具链: 1.首先以root用户登入 2.复制arm-linux-gcc-4.3.2.tgz到根目录下tmp文件夹里 3.解压命令tar xvzf arm-linux-gcc-4. ...