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>  <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原理示意图. 图 ...

随机推荐

Ubuntu12.04+OpenERP7.0安装笔记
不经意的一次看到OpenERP这个开源ERP,就被其丰富的功能,简洁的画面,熟悉的语言所吸引.迫不及待的多方查询资料,自己架设一个测试环境来进行了解.以下为测试安装时候的步骤说明,以备查询,并供有需要 ...
tensorflow serving 打印调试log
启动时添加环境变量 export TF_CPP_MIN_VLOG_LEVEL=1 ,这样可以打印VLOG(1)的log
Android Bitmap与String互转（转）
/** * 图片转成string * * @param bitmap * @return */ public static String convertIconToString(Bitmap bitm ...
Flash：DisplayObject的矩阵旋转（移动/修改注册点，修改旋转点）
简单来说,原理就是利用matrix运算,先把旋转点移到原点位置,旋转变换后再恢复到原来的位置 var a:Sprite = new Sprite(); a.graphics.beginFill(0); ...
SettingsTortoiseSVN
迁移时间:2017年5月20日11:16:05CreateTime--2016年9月18日18:20:15Author:Marydon在windows下安装SVN软件说明:64位的系统只能安装6 ...
〖Linux〗Qt+gsoap开发客户端程序，服务端地址设定的字符串转换处理
之所以写出来,是由于经常因为这个问题屡屡丢面子.. 一般情况下,QString转换成(char*),我们一般直接使用: char *str = qstr->text().toLatin1().d ...
〖Linux〗Ubuntu13.04解决Chrome的flash中文乱码的问题。
1. 安装flash sudo aptitude install flashplugin-installer 2. 禁用chrome自带的flash插件在chrome浏览器中输入 chrome:// ...
JDBC实例--JDBC连接池技术解密，连接池对我们不再陌生
一.为什么我们要用连接池技术? 前面的数据库连接的建立及关闭资源的方法有些缺陷.统舱传统数据库访问方式:一次数据库访问对应一个物理连接,每次操作数据库都要打开.关闭该物理连接, 系统性能严重受损. 解 ...
Web在线文件管理器(web os) KODExplorer
KODExplorer是款开源的Web在线文件管理.代码编辑器.它提供了类windows经典用户界面,一整套在线文件管理.文件预览.编辑.上传下载.在线解压缩.音乐播放功能.让你直接在浏览器端实现we ...
每一个软件开发人员绝对必须掌握的关于 Unicode 和字符集的最基础的知识
2013-02-05 14:18 48人阅读评论(0) 收藏举报关键字: Unicode, Character Set, 字符集, UTF-8, ANSI, ASCII, UTF-7 ...

HTML5使用详解

HTML5使用详解的更多相关文章

随机推荐

热门专题