Html5介绍 黄小乐

HTML5

 

什么是HTML5 ?

 

HTML5 约等于 HTML + CSS 3 +Javascript + API

 

HTML5是一个新的网络标准,现仍处于发展阶段。目标是取代现有的HTML 4.01和XHTML 1.0 标准。它希望能够减少互联网富应用(RIA)对Flash、Silverlight、JavaFX等的依赖,并且提供更多能有效增强网络应用的API.

HTML5 将成为 HTML、XHTML 以及 HTML DOM 的新标准。

HTML5 是 W3C 与 WHATWG 合作的结果。

WHATWG 致力于 web 表单和应用程序,而 W3C 专注于 XHTML 2.0。在 2006 年,双方决定进行合作,来创建一个新版本的 HTML。

为 HTML5 建立的一些规则:

  • 新特性应该基于 HTML、CSS、DOM 以及 JavaScript。
  • 减少对外部插件的需求(比如 Flash)
  • 更优秀的错误处理
  • 更多取代脚本的标记
  • HTML5 应该独立于设备
  • 开发进程应对公众透明

 

HTML5 仍处于完善之中。然而,大部分现代浏览器已经具备了某些 HTML5 支持。



HTML5 时间表

 HTML 的上一个版本诞生于 1999 年。自从那以后,Web 世界已经经历了巨变。


HTML5的八大新特性

 

语义:

语义化的标签:


HTML5 引入了新的HTML 元素,通过使用这些元素,开发者可以更细致的描述文档结构,让文档更加易读,搜索引擎也能更好的理解页面各个部分间的关系,我们也可以搜索到更快,更准确的信息。

 

十个常用的新标签:

<article> 定义文章

<!DOCTYPE html>
<html>
<body>
<article>
  <h1>Internet Explorer 9</h1>
  <p>Windows Internet Explorer 9(简称 IE9)于 2011 年 3 月 14 日发布.....</p>
</article>
</body>
</html>

<aside> 定义文章的侧边栏

<figure> 一组媒体对象以及文字

<header>定义页眉

<hgroup>定义对网页标题的组合

<nav>定义导航

<figcaption> 定义figure 的标题

<footer>定义页脚

<section> 定义文档中的区段

<time>定义日期和时间


被弃用的标签:<acronym>、<applet>、<basefont>、<big>、<center>、<dir>、<font>、<frame>、<s>、<isindex>、<noframes>、<frameset> 、<strike>、<tt>、<u>和<xmp>。

 

增强的表单控件:




离线存储:

Web 存储:

HTML5 提供了两种在客户端存储数据的新方法:

localStorage-用于持久化的本地存储,除非主动删除数据,否则数据是永远不会过期。

sessionStorage -用于存储一个会话(session)中的数据,这些数据只有在同一个会话中的页面才能访问,当会话结束后数据也随之销毁。


localStorage.length;

localStorage.key(index);

localStorage.setItem('foo', 'bar');

localStorage.getItem('foo');

localStorage.removeItem('foo');

localStorage.clear();

以前,这些都是由Cookie 完成的。但是Cookie 有4KB的大小限制,而且会随HTTP请求一起被传递,无形中拖慢网页速度而且效率不高。


Indexed Database:

对于存储少量的数据,Web Storage能够很好的完成任务,但是对大量的结构化数据进行处理时,它就力所不及了,而这正是indexedDB的应用所在。

IndexedDB严格遵循W3C的同源策略,每个源都拥有独立的存储空间,每个存储空间内又可以创建多个数据库,每个数据库可以包含多个表,每个表都是一个json对象列表,可以存储多个json对象,比如{"name": "sonic", "age": 27}。

同源策略

同源策略,它是由Netscape提出的一个著名的安全策略。现在所有支持JavaScript 的浏览器都会使用这个策略。

所谓同源是指,域名,协议,端口相同。

当一个浏览器的两个tab页中分别打开来百度和谷歌的页面当浏览器的百度tab页执行一

脚本时候会检查这个是属于哪个页面的,即检查是否同源,只有和百度同源的脚本才会被执行。


Application Cache

使用Application Cache,你可以指定哪一个文件是浏览器缓存保留的并提供给用户离线使用。这时候你的的网站工作起来就像是线上一样,并且他们不会感觉到和真正在线使用有任何差异。

那么,哪一部分文件是浏览器要保存的呢?这一切都定义在缓存清单文件中。


什么是应用程序缓存(Application Cache)?

HTML5 引入了应用程序缓存,这意味着 web 应用可进行缓存,并可在没有因特网连接时进行访问。

应用程序缓存为应用带来三个优势:

  • 离线浏览 - 用户可在应用离线时使用它们
  • 速度 - 已缓存资源加载得更快
  • 减少服务器负载 - 浏览器将只从服务器下载更新过或更改过的资源。

 

设备通用:

拖拽与拖放(Drag & Drop) 与文件处理(File API)

过去我们想实现网页中的拖拽效果,基本上都是使用DOM事件模型中的mousedown、mousemove、mouseup的鼠标事件监听来模拟拖拽效果,为了实现实时的拖拽移动效果,还要不停地获取鼠标的坐标,不停的修改元素的位置,代码要堆很多,而且性能也很差,现在有了HTML5原生的Drag & Drop 拖拽事件,再结合FileAPI 中的FileReader,一切变得so easy~

拖放(Drag 和 drop)是 HTML5 标准的组成部分。

拖放是一种常见的特性,即抓取对象以后拖到另一个位置。



 


 

连接:

 

WebSockets

现在,很多网站为了实现即时通讯,所用的技术都是轮询。这种模式需要浏览器不断的向服务器发出请求,然而HTTP请求header信息是非常长的,这样会占用很多的带宽和服务器资。WebSockets是在一个(TCP)接口进行双向通信的技术,SH技术类型能更好的节省服务器资源和带宽并达到实时通。

在WebSocket API 中,浏览器和服务器只需要做一个握手的动作,然后,浏览器和服务器之间就形成了一条快速通道。两者之间就直接可以数据互相传送。


 

多媒体:

音频和视频(Audio + Video)

音频和视频(Audio和Video是首批添加到HTML规范中的标签。它们的加入使得我们可以像插入图片一样来处理音频及视频文件。

 当前,video 元素支持三种视频格式:

ogg 适用于Firefox、Opera 以及 Chrome 浏览器。

MPEG 4 要确保适用于 Safari 浏览器,视频文件必须是 MPEG4 类型

WebM

<!DOCTYPE HTML>
<html>
<body>
<video src="/i/movie.ogg"  width="320" height="240" controls="controls">
Your browser does not support the video tag.
</video>
</body>
</html>

video 元素允许多个 source 元素。source 元素可以链接不同的视频文件。浏览器将使用第一个可识别的格式.

HTML5 <video> - 使用 DOM 进行控制

Web 上的音频

直到现在,仍然不存在一项旨在网页上播放音频的标准。

今天,大多数音频是通过插件(比如 Flash)来播放的。然而,并非所有浏览器都拥有同样的插件。

HTML5 规定了一种通过 audio 元素来包含音频的标准方法。

audio 元素能够播放声音文件或者音频流。

  IE 9 Firefox 3.5 Opera 10.5 Chrome 3.0 Safari 3.0
Ogg Vorbis    
MP3    
Wav    

source src="song.ogg" type="audio/ogg">
  <source src="song.mp3" type="audio/mpeg">


三维、图形与特效

Canvas 画布元素

传统的网页,总是使用GIF或者JPGE来显示图像,这种图形是需要事先画好的“静态”的图像。而Canvas,则是用Javascript的一种绘图手段。

可以用它来画图、合成图像、或者做简单的(和不那么简单的)动画。

HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。

画布是一个矩形区域,您可以控制其每一像素。

canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。


<!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>
<!--var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
var img=new Image()
img.src="flower.png"
cxt.drawImage(img,0,0);-->
</body>
</html>


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title> svg </title>
  </head>
 <body>
  <svg xmlns="http://www.w3.org/2000/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>

 Canvas 和 SVG 都允许您在浏览器中创建图形,但是它们在根本上是不同的。

SVG

SVG 是一种使用 XML 描述 2D 图形的语言。

SVG 基于 XML,这意味着 SVG DOM 中的每个元素都是可用的。您可以为某个元素附加 JavaScript 事件处理器。

在 SVG 中,每个被绘制的图形均被视为对象。如果 SVG 对象的属性发生变化,那么浏览器能够自动重现图形。

Canvas

Canvas 通过 JavaScript 来绘制 2D 图形。

Canvas 是逐像素进行渲染的。

在 canvas 中,一旦图形被绘制完成,它就不会继续得到浏览器的关注。如果其位置发生变化,那么整个场景也需要重新绘制,包括任何或许已被图形覆盖的对象。


性能与集成


XMLHttpRequest

作为XMLHttpRequest的改进版,XMLHttpRequest Level 2在功能上有了很大的改进。支持跨源LMLHttpRequest和进度事件(Progress events)。

 

 

更多

Geolocation ——获取浏览器用户的地理信息

postMessage ——实现跨文档跨域的消息传输

Web Workers ——Javascript多线程工作解决方案

Custom data-* attributes——定义合法的DOM属性

And so on …

 

示例:

http://onecm.com/projects/canopy/

http://mrdoob.com/projects/chromeexperiments/ball_pool/

http://experiments.instrum3nt.com/markmahoney/ball/parent.html

http://the389.com/experiment/

http://www.canvasdemos.com/2009/04/03/colorscube/

http://internetris.net/

  • 0
    点赞
  • 0
    评论
  • 0
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值