alex.Lin

浏览: 65853 次
性别:
来自: 上海

最近访客更多访客>>

topcloud

NigelChow

promiseloney

kencsdn

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

Getting started with HTML5(整理)

博客分类：

web
HTML5

html5

1 背景

2008年正式公布，略

2 HTML5新特性

2.1 离线应用（使用应用缓存）AppCache

2.1.1 定义

application cache：应用缓存/离线存储

将html/css/js，及其他任何资源文件保存在cache中，以便在离线（断网）状态下，浏览器仍然可以访问这些文件

2.1.2 和传统浏览器缓存的区别：

1、浏览器缓存：

a) 协商缓存Last-modified,Etag

浏览器询问服务器，根据响应码304，则使用本地，否则返回新内容

b) 彻底缓存cache-control,Expires

在有效期内一直使用缓存

2、缓存内容

a) 离线存储可以存储任意指定要缓存的内容，为整个web服务

b) 浏览器缓存只能缓存单个页面，不能指定

3、离线存储可以动态通知用户更新

2.1.3 使用

2.1.3.1基本元素

=================1、Manifest属性================

==========2、包含的test.manifest,如下============

CACHE MANIFEST //必须以这个开头

version 1.0 //最好定义版本，更新的时候只需修改版本号

CACHE: //定义需要缓存的内容

m.png

test.js

test.css

NETWORK: //定义需要联网的内容，*表示除了CACHE之外的全部

FALLBACK

online.html offline.html//每行分别指定在线和离线时使用的文件

a.html b.html //如在线使用a.html，离线使用b.html

==========================================================

=================3、服务端的支持=========================

=====IIS支持==============================================

略

=====Apache支持==========================================

conf/mime.types中添加一段代码：

test/cache-manifest manifest

==========================================================

数据请求的过程要点：

首次访问

根据manifest配置，进行本地存储

再次访问

请求manifest文件

如果返回码=304

则表示不变，直接取本地缓存

否则

重新读取配置，走首次访问流程

2.1.3.2 JS支持对象window.applicationCache

onchecking

//检查manifest文件是否存在

ondownloading

//检查到有manifest或者manifest文件

//已更新就执行下载操作

//即使需要缓存的文件在请求时服务器已经返回过了

onnoupdate

//返回304表示没有更新，通知浏览器直接使用本地文件

onprogress

//下载的时候周期性的触发，可以通过它

//获取已经下载的文件个数

oncached

//下载结束后触发，表示缓存成功

onupdateready

//第二次载入，如果manifest被更新

//在下载结束时候触发

//不触发onchched

alert("本地缓存正在更新中。。。");

if(confirm("是否重新载入已更新文件")){

applicationCache.swapCache();

location.reload();

}

onobsolete

//未找到文件，返回404或者401时候触发

onerror

//其他和离线存储有关的错误

2.2 拖拉功能Drag and Drop

默认提供了该功能，可以很方便的使用，无需自己重写

不仅可以在html页面中拖放，甚至可以将window的任何文件拖到页面中

draggable="true"（FF4以上可支持，IE不支持）

拖放的JS事件

被拖动元素事件

Ondragstart(e)

/*拖拽开始*/

e.dataTransfer.effectAllowed = "move";//定义允许的效果"none", "copy", "copyLink", "copyMove", "link", "linkMove", "move", "all", and "uninitialized

e.dataTransfer.setData("text", e.target.innerHTML);//给dataTransfer对象新增text类型的数据

e.dataTransfer.setDragImage(e.target, 10, 20);//将e.target作为拖曳反馈对象

ondragend

/*拖拽结束*/

目标区域监听事件

ondragover

/*拖拽元素在目标元素头上移动的时候*/

Ondragenter(e)

/*拖拽元素进入目标元素头上的时候*/

e.preventDefault();//使当前对象不允许被拖动

ondrop

/*拖拽元素进入目标元素头上，同时鼠标松开的时候*/

2.3 增加Geolocation（geography location地理定位）

在询问是否共享之后，可将客户端的ip地理位置发给Google Location Services（FF默认）

2.4 音频视频支持Audio and Video

2.5 表单输入

新增了很多新元素作为表单控件的attribute属性

如pop-up calendars, color selectors, number spinners and many more

3 语法更简洁

3.1 DOC TYPE

OLD：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

HTML5：

<!DOCTYPE html>

3.2 字符编码Character Encoding

OLD：

<metahttp-equiv="Content-Type"content="text/html; charset=utf-8">

HTML5：

<metacharset="UTF-8">

3.3 <script>标签

OLD：

<scripttype="text/javascript"src="file.js"></script>

HTML5：

<scriptsrc="code.js"async></script>

且新增属性async

Async：异步支持

做个实验A

<HTML>

<HEAD>

</HEAD>

<BODY>

</BODY>

</HTML>

HTML都是从上到下顺序执行

1、先下载sync-test1.js。如果里面有定义执行的方法也要先执行

2、再下载22.jpg图片。如果js文件里的方法要执行很久，则下面的其他dom元素都将被阻塞。

实验B

给script加个defer属性---只有ie支持

结果：可将该js进行异步处理，后面的dom元素都不需要等待了

实验C

使用async---FF4+都支持，ie不支持

结果：可将该js进行异步处理，后面的dom元素都不需要等待了

异步有好处，但也有风险

如果test1和test2之间有顺序依赖就不可以用async，否则会报错

3.4 <link>标签

OLD：

<linkrel="stylesheet"type="text/css"href="style.css"/>

HTML5：

<linkrel="stylesheet"href="style.css">

4 新增dom元素

都比较显而易懂，使用到的时候再查看api

4.1 <header>

定义了一些样式，不需要使用<div id=”header”>

4.2 <nav>

可以用作导航菜单，替代<div id=”nav”>

4.3 <article>

略。

4.4 <section>

略

4.5 <aside>

略

4.6 <figure>

略

4.7 <footer>

略

5 修改的dom元素

5.1 <a>

允许包含多个子元素

<font>xxx</font>…

</a>

5.2 <b><i>

粗体和斜体，已不大推荐使用

5.3 <hr>

标签水平线，它应该定义内容中的主题变化

6 废弃的dom元素

6.1 <frame>, <frameset> and <noframes>

6.2 <font><s><u><center><big><applet><acronym>

代码之余轻松一下：当前热门-人民的名义

JAVAEE容器如何管理EntityManager和PersistenceContext

1
顶

1
踩

分享到：

Servlet/JSP背后的故事 | Servlet3.0之异步支持

2012-02-15 11:41
浏览 1501
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

Getting started with HTML5(整理)

1 背景

2 HTML5新特性

2.1 离线应用（使用应用缓存）AppCache

2.1.1 定义

2.1.2 和传统浏览器缓存的区别：

2.1.3 使用

2.1.3.1基本元素

2.1.3.2 JS支持对象window.applicationCache

2.2 拖拉功能Drag and Drop

2.3 增加Geolocation（geography location地理定位）

2.4 音频视频支持Audio and Video

2.5 表单输入

3 语法更简洁

3.1 DOC TYPE

3.2 字符编码Character Encoding

3.3 <script>标签

3.4 <link>标签

4 新增dom元素

4.1 <header>

4.2 <nav>

4.3 <article>

4.4 <section>

4.5 <aside>

4.6 <figure>

4.7 <footer>

5 修改的dom元素

5.1 <a>

5.2 <b><i>

5.3 <hr>

6 废弃的dom元素

6.1 <frame>, <frameset> and <noframes>

6.2 <font><s><u><center><big><applet><acronym>

代码之余轻松一下：当前热门-人民的名义

JAVAEE容器如何管理EntityManager和PersistenceContext

评论

发表评论

相关推荐

jWebSocket使用指南

最近访客更多访客>>