HTML5使用详解
1.什么是HTML5
HTML5是新的HTML标准。
支持最新的Safari,Chrome,Firefox以及Opera,Ie9支持某些HTML5特性。
2.新建HTML5页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
</body>
</html>
2.视频（video）
<video src="movie.ogg" controls="controls">
</video>
运行结果:
属性详细，参见http://www.w3school.com.cn/html5/
3.音频(audio)
<audio controls="controls">
<source src="song.ogg" type="audio/ogg">
<source src="song.mp3" type="audio/mpeg">
Your browser does not support the audio tag.
</audio>
运行结果:
4.拖放（drag和drop）
<!DOCTYPE HTML>
<html lang="en-us">
<head>
<meta charset="utf-8">
<style type="text/css">
#div1 {width:198px; height:66px;padding:10px;border:1px solid #aaaaaa;}
</style>
<script type="text/javascript">
function allowDrop(ev)
{
ev.preventDefault();
}
function drag(ev)
{
ev.dataTransfer.setData("Text",ev.target.id);
}
function drop(ev)
{
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
}
</script>
</head>
<body>
<p>请把下图拖放到矩形中：</p>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br />
<img id="drag1" src="1.png" draggable="true" ondragstart="drag(event)" />
</body>
</html>
运行结果：
ev.preventDefault():允许默认设置，默认不允许元素放置drop。
5.画布（Canvas）
画布可以理解为一个坐标，通过js绘制各种图形
<!DOCTYPE HTML>
<html>
<body>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.moveTo(10,10);
cxt.lineTo(150,50);
cxt.lineTo(10,50);
cxt.stroke();
</script>
</body>
</html>
运行结果：
6.矢量图形（SVG）
<!DOCTYPE html>
<html>
<body>
<svg version="1.1" height="190">
<polygon points="100,10 40,180 190,60 10,60 160,180"
style="fill:red;stroke:blue;stroke-width:3;fill-rule:evenodd;" />
</svg>
</body>
</html>
运行结果：
7.定位（Geolocation）
<!DOCTYPE html>
<html>
<body>
<p id="demo">点击这个按钮，获得您的坐标：</p>
<button onclick="getLocation()">试一下</button>
<script>
var x=document.getElementById("demo");
function getLocation()
{
if (navigator.geolocation)
{
navigator.geolocation.getCurrentPosition(showPosition);
}
else{x.innerHTML="Geolocation is not supported by this browser.";}
}
function showPosition(position)
{
x.innerHTML="Latitude: " + position.coords.latitude +
"<br />Longitude: " + position.coords.longitude;
}
</script>
</body>
</html>
navigator.geolocation：是否支持定位
navigator.geolocation.getCurrentPosition：获取坐标
8.web存储(localStorage,sessionStorage)
cookie是随着服务器请求传递的，而localStorage只在请求使用时传递，不是每次都传递，更高效。
<script type="text/javascript">
localStorage.lastname="Smith";
document.write(localStorage.lastname);
</script>
localStorage会永久保存，sessionStorage是针对一个session进行数据存储，关闭浏览器窗口，数据会被删除。
9.应用缓存
缓存在客户端，没有网络连接时进行访问。
<!DOCTYPE HTML>
<html manifest="demo.appcache">
<body>
The content of the document......
</body>
</html>
manifest缓存配置文件
分为三部分：
1)CACHE MANIFEST
要缓存的文件
CACHE MANIFEST
/theme.css
/logo.gif
/main.js
2)NETWORK
需要网络连接的文件
NETWORK
login.asp
3)FALLBACK
无网络连接时，替代文件
FALLBACK:
/html5/ /404.html
完整的MANIFEST文件
CACHE MANIFEST
# 2012-02-21 v1.0.0
/theme.css
/logo.gif
/main.js
NETWORK:
login.asp
FALLBACK:
/html5/ /404.html
什么时候更新缓存？
1)用户清空浏览器缓存
2)manifest 文件被修改（参阅下面的提示）
3)由程序来更新应用缓存
10.后台任务(Worker)
web Worker是运行在后台的JavaScript，独立于其他脚本，不会影响页面性能。
自动计数代码示例如下：
1)检查是否支持Worker
if(typeof(Worker)!=="undefined")
{
// Yes! Web worker support!
// Some code.....
}
else
{
// Sorry! No Web Worker support..
}
2)创建web worker文件demo_workers.js
var i=0;
function timedCount()
{
i=i+1;
postMessage(i);
setTimeout("timedCount()",500);
}
timedCount();
postMessage():向HTML页面传回一段消息
3)创建Worker对象
if(typeof(w)=="undefined")
{
w=new Worker("demo_workers.js");
}
向 web worker 添加一个 "onmessage" 事件监听器：
w.onmessage=function(event){
document.getElementById("result").innerHTML=event.data;
};
4)终止Worker
w.terminate();
11.服务器发送时间（server-sent event）
类似websocket长连接，以前的做法是不停的轮询，是否有更新。
server-sent当服务器端内容更新时，客户端内容会自动获取更新。
var source=new EventSource("demo_sse.php");
source.onmessage=function(event)
{
document.getElementById("result").innerHTML+=event.data + "<br />";
};
demo_sse.php
<?php
header('Content-Type: text/event-stream');
header('Cache-Control: no-cache');
$time = date('r');
echo "data: The server time is: {$time}\n\n";
flush();
?>
12.html5新的输入类型
email,url,number,range,Date pickers,search,color
E-mail: <input type="email" name="user_email" />
13.html5新的表单元素
datalist,keygen,output
Webpage: <input type="url" list="url_list" name="link" />
<datalist id="url_list">
<option label="W3School" value="http://www.W3School.com.cn" />
<option label="Google" value="http://www.google.com" />
<option label="Microsoft" value="http://www.microsoft.com" />
</datalist>
14.html5新的表单属性
新的form属性：
autocomplete,novalidate
新的input属性:
autocomplete;autofocus;form;form overrides;height 和 width,list;min, max 和 step;multiple;pattern;placeholder;required
HTML5使用详解的更多相关文章
- HTML5 File详解
input file控件限制上传文件类型 Html5 FileReader 对文件进行Base64编码 FileReader.readAsDataURL
- 市场主流5款HTML5开发框架详解
我们经常听见的前端框架是一个非常大的范词,因为前端框架都是基于JS.CSS.HTML5技术开发实现的,不过选择一个HTML5开发框架需要考虑哪些方面,首先就是需要什么样的功能,其次就是技术实现,不过当 ...
- HTML5 history详解
最近研究vue-router单页转跳而不向服务器请求的原理, 主要是HTML5 history以及hash的应用,支持history时使用history模式 下面详细学习了一下常用的history相关 ...
- 最全html5 meta设置详解 (转)
meta 详解,html5 meta 标签日常设置 <!DOCTYPE html> <!-- 使用 HTML5 doctype,不区分大小写 --> <html la ...
- 免费的HTML5连载来了《HTML5网页开发实例详解》连载（二）
最近新浪.百度.腾讯.京东.大众点评.淘宝等流行的网站都加大了招聘HTML5的力度,HTML5开发人员成了抢手货,本次连载的是由大众点评前端工程师和一淘网前端工程师基情奉献的<HTML5网页开发 ...
- SSE技术详解：一种全新的HTML5服务器推送事件技术
前言 一般来说,Web端即时通讯技术因受限于浏览器的设计限制,一直以来实现起来并不容易,主流的Web端即时通讯方案大致有4种:传统Ajax短轮询.Comet技术.WebSocket技术.SSE(Ser ...
- [转]人人网首页拖拽上传详解(HTML5 Drag&Drop、FileReader API、formdata)
人人网首页拖拽上传详解(HTML5 Drag&Drop.FileReader API.formdata) 2011年12月11日 | 彬Go 上一篇:给力的 Google HTML5 训练营( ...
- 免费的HTML5连载来了《HTML5网页开发实例详解》连载（六）媒体查询
响应式设计的另一个重要技术手段是媒体查询.如果只是简单的设计一个流式布局系统,那么可以保证每个网格按比例的放大和缩小,但有可能会使得在小屏幕下(如手机设备)网格太小而严重影响阅读,这样的设计称不上响应 ...
- 免费的HTML5连载来了《HTML5网页开发实例详解》连载（五）图解通过Fiddler加速开发
Fiddler是Windows底下最强大的请求代理调试工具,监控任何浏览器的HTTP/HTTPS流量,窜改客户端请求和服务器响应,解密HTTPS Web会话,图4.44为Fiddler原理示意图. 图 ...
随机推荐
- SSO是什么？
SSO英文全称Single Sign On,单点登录.SSO是在多个应用系统中,用户只需要登录一次就可以访问所有相互信仸的应用系统.它包括可以将这次主要的登录映射到其他应用中用亍同一个用户的登录的机制 ...
- jdbc第三天
事务 什么是事务? 转账: 1. 给张三账户减1000元 2. 给李四账户加1000元 当给张三账户减1000元后,抛出了异常!这会怎么样呢?我相信从此之后,张三再也不敢转账了. 使用事务就可以处理这 ...
- HTTP basic 认证
为了确保资源的非法访问,HTTP采用两种认证方式,一种为basic,另外一种为digest(摘要认证).basic是最基本也是最简单的一种认证方式.认证的过程大概可分为以下几个步骤:1. 用户请求受保 ...
- 解决"libc.so.6: version `GLIBC_2.14' not found",系统的glibc版本太低 {强行安装！！}
原创,转载请注明出处,谢谢!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! 首先查看系统glibc支持的版本: strings /lib64/libc.so.6 |grep G ...
- virtual的使用方法
virtual有几种使用方法呢.这里不过抛砖引玉.并没有进行整理和总结. 一般在基类中定义的函数前面喜欢加上virtual.那作用是什么呢. 为了实现多态吗?是的.基类写了一个比較通用的实现方法,子类 ...
- linux 2>&1的用法
linux中有三种标准输入输出,分别是STDIN,STDOUT,STDERR,对应的数字是0,1,2.STDIN就是标准输入,默认从键盘读取信息:STDOUT是标准输出,默认将输出结果输出至终端,也就 ...
- pat1040：有几个PAT
https://www.patest.cn/contests/pat-b-practise/1040 #include "stdio.h" int main() { int p = ...
- Android网络开发之WIFI
WIFI全称Wireless Fidelity, 又称802.11b标准.WIFI联盟成立于1999年,当时的名称叫做Wireless Ethernet Compatibility Alliance( ...
- HDUOJ---------(1045)Fire Net
Fire Net Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others) Total S ...
- 推荐系统之矩阵分解及其Python代码实现
有如下R(5,4)的打分矩阵:(“-”表示用户没有打分) 其中打分矩阵R(n,m)是n行和m列,n表示user个数,m行表示item个数 那么,如何根据目前的矩阵R(5,4)如何对未打分的商品进行评分 ...