HTML5篇1

最新推荐文章于 2024-08-26 22:59:32 发布

loveesc

最新推荐文章于 2024-08-26 22:59:32 发布

阅读量551

点赞数

文章标签： html5 html 浏览器图形 firefox flash

1.前言

HTML5从2004年提出，到2007年被W3C所接纳并成立了新的HTML团队，再到2008年1月第一份正式草案的发布，已经有相当长的一段时间。但是其仍然还在继续发展、完善中，估计还需要十年左右的时间才能成为W3C真正的标准。目前Firefox、Chrome浏览器、Opera、Safari（版本4以上）、Internet Explorer 9已支持HTML5技术。

2.正文

HTML5是HTML下一个主要的修订版本，现在仍处于发展阶段。目标是取代1999年所制定的HTML 4.01和XHTML 1.0 标准，以期能在互联网应用迅速发展的时候，使网络标准达到符合当代的网络需求。广义论及HTML5时，实际指的是包括HTML、CSS和JavaScript在内的一套技术组合。它希望能够减少浏览器对于需要插件的丰富性网络应用服务（plug-in-based rich internet application，RIA)，如Adobe Flash、Microsoft Silverlight，与Oracle JavaFX的需求，并且提供更多能有效增强网络应用的标准集。

具体来说，HTML5添加了许多新的语法特征，其中包括<video>, <audio>, 和<canvas>元素，同时集成了SVG内容。这些元素是为了更容易的在网页中添加和处理多媒体和图片内容而添加的。其它新的元素包括<section>, <article>, <header>, 和<nav>,是为了丰富文档的数据内容。新的属性的添加也是为了同样的目的。同时也有一些属性和元素被移除掉了。一些元素，像<a>,<cite>和<menu>被修改，重新定义或标准化了。同时APIs和DOM已经成为HTML5中的基础部分了。HTML5还定义了处理非法文档的具体细节，使得所有浏览器和客户端程序能够一致地处理语法错误。

新的API接口：

用于绘画的 canvas 元素
用于媒介回放的 video 和 audio 元素
客户端的Web存储

localStorage 方法存储的数据没有时间限制。第二天、第二周或下一年之后，数据依然可用。

[html]view plaincopy 
   
 <script type="text/javascript">  
 localStorage.lastname="Smith";  
 document.write(localStorage.lastname);  
 </script>  

sessionStorage 方法针对一个 session 进行数据存储。当用户关闭浏览器窗口后，数据会被删除

[html]view plaincopy 
   
 <script type="text/javascript">  
 sessionStorage.lastname="Smith";  
 document.write(sessionStorage.lastname);  
 </script>  

对本地离线存储的更好的支持

如需启用应用程序缓存，请在文档的 <html> 标签中包含 manifest 属性

[html]view plaincopy 
   
 <!DOCTYPE HTML>  
 <html manifest="demo.appcache">  
 ...  
 </html>  

Web Workers 后台JS运行脚步技术

当在 HTML 页面中执行脚本时，页面的状态是不可响应的，直到脚本已完成。

web worker 是运行在后台的 JavaScript，独立于其他脚本，不会影响页面的性能。您可以继续做任何愿意做的事情：点击、选取内容等等，而此时 web worker 在后台运行。

[html]view plaincopy 
   
 <!DOCTYPE html>  
 <html>  
 <body>  
   
 <p>Count numbers: <output id="result"></output></p>  
 <button onclick="startWorker()">Start Worker</button>  
 <button onclick="stopWorker()">Stop Worker</button>  
 <br /><br />  
   
 <script>  
 var w;  
   
 function startWorker()  
 {  
 if(typeof(Worker)!=="undefined")  
 {  
   if(typeof(w)=="undefined")  
     {  
     w=new Worker("demo_workers.js");  
     }  
   w.onmessage = function (event) {  
     document.getElementById("result").innerHTML=event.data;  
   };  
 }  
 else  
 {  
 document.getElementById("result").innerHTML="Sorry, your browser  
  does not support Web Workers...";  
 }  
 }  
   
 function stopWorker()  
 {  
 w.terminate();  
 }  
 </script>  
   
 </body>  
 </html>  

Server-Sent 事件-单向消息传

Server-Sent 事件指的是网页自动获取来自服务器的更新。

以前也可能做到这一点，前提是网页不得不询问是否有可用的更新。通过服务器发送事件，更新能够自动到达。

例子：Facebook/Twitter 更新、估价更新、新的博文、赛事结果等。

新的特殊内容元素，比如 article、footer、header、nav、section
新的表单控件，比如 calendar、date、time、email、url、search

HTML语法的变化

HTML5 引入了新的 HTML元素和属性，有的是传统通用元素的语义化版本，如取代 div 元素的 nav, footer等元素，也有一些全新的元素，如 audio, video。一些在 HTML4 中不被推荐使用的元素，如 font 和 center将被弃用。HTML5 引入的新 HTML 元素包括：

· article：文章

· aside：内容旁边的侧边栏内容

· audio：音频

实例：http://www.w3school.com.cn/html5/html_5_audio.asp

· canvas：2D 绘图

实例：http://www.w3school.com.cn/html5/html_5_canvas.asp

· command：命令按钮

· datalist：下拉选择框

· details：对象的细节

· dialog：对话框

· embed：外部插件或对象

· figure：一组媒体对象以及标签文字

· footer：页脚

· header：页首

· hgroup：文档某一部分的信息

· keygen：表单生成的 Key

· mark：标注的文字

· meter：预先定义的范围内的度量

· nav：导航条

· output：输出

· progress：进度条

· rp：标识 rubby 内容

· rt：rubby 内容的解释

· ruby：rubby 内容

· section：定义一个部分

· source：媒体的资源

· time：日期时间

· video：视频

. svg: 可伸缩适量图形：

实例： http://www.w3school.com.cn/html5/html_5_svg.asp

. geolocation：获取本地地理信息

实例：http://www.w3school.com.cn/html5/html_5_geolocation.asp

HTML5同那些流行的技术如何共存

如今的 Web 世界已经习惯了各种插件和API，HTML5 为 Web 开发与设计者带来了方便与不便，HTML5 将如何同现在的这些流行技术共存？

· HTML5 与 Flash

这个争论由来已久，Flash被某些开发设计者滥用导致一些网页加载缓慢，而 HTML5 为之带来一线曙光。相对 Windows 用户来说，Mac 用户可能会从HTML5 获得更多好处，因为苹果一直不愿支持 Flash。

现在看来，就视频游戏而言，Flash是更好的选择，但取决于你的浏览器，如果你的视频不是很复杂，HTML5是更好的选择。Web开发与设计者从这些争论中应该吸取的东西是，Flash 之外还有别的选择，但 Flash有牢固的地盘，在为客户提供开发设计的时候，需要对他们的目标客户做一些研究。

· HTML5 与 IE 9

IE9 经常高调宣扬它对 HTML5的兼容，它确实将是一个很好地支持 HTML5 的浏览器，因为，IE9 使用 Windows 现代图形 API 以及 PC的图形加速卡输出文字和图形。微软还曾宣称，IE9 将支持 GPU 加速的 HTML5，将图形滚动，3D图形显示等处理交由图形加速卡。

· HTML5 与 Ajax

现在的 HTML语言的一个问题是，它是一种轻量级的应用界面，那些喜欢使用 Ajax 实现在线应用的开发者会发现 HTML非常不好用。Ajaxwith.com 认为，HTML 适合用来加载界面，JavaScript用来执行命令，虽然 HTML 在作为界面语言方面并不好用，但鉴于多数开发者对它的熟悉程度，HTML 还是不可缺少。HTML5 会让Ajax 应用的实现变得更容易。

· HTML5 with CSS

你需对你的 CSS 代码就行整理以支持HTML5，因为 h1, h2 之类的标签将不再使用，为了实现同 HTML5 的兼容，最好的方式是使用 CSSreset，将那些常见的 HTML 标签的 CSS 属性清零，woork 认为，最好的 CSSReset 是 Eric Meyers CSS reset。

3.总结

HMTL采用全新的，更合理的 Tag，多媒体对象将不再全部绑定在object 或 embed Tag 中，而是视频有视频的 Tag，音频有音频的 Tag。本地数据库。这个功能将内嵌一个本地的 SQL数据库，以加速交互式搜索，缓存以及索引功能。同时，那些离线 Web 程序也将因此获益匪浅。不需要插件的富动画。Canvas 对象将给浏览器带来直接在上面绘制矢量图的能力，这意味着我们可以脱离 Flash和 Silverlight，直接在浏览器中显示图形或动画。将提供 API 实现浏览器内的编辑，拖放，以及各种图形用户界面的能力。内容修饰 Tag 将被剔除，而使用 CSS。理论上讲，HTML 5 是培育新 Web标准的土壤，让各种设想在他的组织者之间分享。

4.其它：

什么是SVG？

SVG 指可伸缩矢量图形 (Scalable Vector Graphics)
SVG 用于定义用于网络的基于矢量的图形
SVG 使用 XML 格式定义图形
SVG 图像在放大或改变尺寸的情况下其图形质量不会有损失
SVG 是万维网联盟的标准

HTML5 的geolocation 是如何实现的？

该功能的实现更加浏览器和设备的不同而不同，如Iphone的sarfi一般是通过手机GPS模块定位然后把经纬度信息传给google地图从而在地图上标注，而普通电脑的的浏览器一般是通过收集SSID（无线信号）及IP信息发送给google的服务器分析得来的（这岂不是很危险？谷歌掌握着世界上所有电脑无线、ip的信息？！据国外某个牛人说，这是谷歌全世界奔跑为街景拍照时收集的无线信号信息）

此处以Firefox为例（http://www.mozilla.org/en-US/firefox/geolocation/）：

Firefox首先会询问用户是否愿意开启定位功能，如果同意，则会收集最近的无线热点以及电脑IP，并发送给默认的地理定位服务提供商（谷歌位置服务），从而谷歌会返回一个大概的地理位置坐标。

以下是firefox发送给 https://www.google.com/loc/json 的信息：

[plain]view plaincopy 
   
 "mac_address": "01-23-45-67-89-ab",  
   "signal_strength": 8,  
   "age": 0,  
   "SSID": "MyAccessPoint"  

参考文献

维基百科：http://zh.wikipedia.org/wiki/HTML5
3school: http://www.w3school.com.cn/html5/html_5_intro.asp
新浪博文： http://blog.sina.com.cn/s/blog_502c8cc40100oajv.html

loveesc

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML5篇1

1.前言 HTML5从2004年提出，到2007年被W3C所接纳并成立了新的HTML团队，再到2008年1月第一份正式草案的发布，已经有相当长的一段时间。但是其仍然还在继续发展、完善中，估计还需要十年左右的时间才能成为W3C真正的标准。目前Firefox、Chrome浏览器、Opera、Safari（版本4以上）、Internet Explorer 9已支持HTML5技术。
复制链接

扫一扫