`
alex.Lin
  • 浏览: 64994 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

Getting started with 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属性================

<html lang="en" manifest='test.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>

                         <script LANGUAGE="JavaScript" src="sync-test1.js"></script>

                 </HEAD>

 <BODY>

                  <img src="22.jpg">

        </BODY>

</HTML>

HTML都是从上到下顺序执行

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

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

 

实验B

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

<script LANGUAGE="JavaScript" src="sync-test1.js" defer></script>

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

 

实验C

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

<script src="sync-test1.js" async></script>

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

 

异步有好处，但也有风险

<script src="sync-test1.js" async></script>

<script src="sync-test2.js" async></script>

如果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>

允许包含多个子元素

<a href=”b.js”>

<p>xxx</p>

<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
踩
分享到：
| Servlet3.0之异步支持
评论
发表评论

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

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics