2007年,HTML最新标准HTML5总结(必看)

By 张宾风

  

2007年,HTML最新标准HTML5总结(必看)
  

HTML5 ≈ HTML5核心规范 + CSS 3 + JavaScript; 其中HTML5和CSS主要负责界面,JavaScript负责逻辑处理;,

JavaScript Code复制内容到剪贴板,

JavaScript Code复制内容到剪贴板。
  HTML最新标准HTML5总结(必看)
  下面小编就为大家带来一篇HTML最新标准HTML5总结。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  

HTML5出来已经很久了,然而由于本人不是搞前端的,只知道有这个东西,具体概念有点模糊;因此去年,专门对HTML5做了个简单的小结,今天正好看到,整理一下放到我的博客,以免丢失。有错误请指正,我是前端菜鸟。
  

•视频/音频 、画布 & SVG 、可编辑内容 & 拖放、Web存储、Web Worker 、服务器发送事件、表单增强功能、语义化标记、更多HTML5标准
  

简单地说,HTML5就是一系列用来制定现代富Web内容的相关技术的总称。
  

HTML5 ≈ HTML5核心规范 + CSS 3 + JavaScript; 其中HTML5和CSS主要负责界面,JavaScript负责逻辑处理;
  

目的:减少互联网富应用网页,包含一些图表,视频,游戏等:
  

2004年,WHATWG提出草案,即HTML5的前身;
  

2007年,W3C同意采纳HTML5作为标准,并成立了新的HTML工作团队;
  

2014年10月28日,W3C正式发布推荐标准;
  

未来,待公布后,工作组会重复步骤再搞一个新的,继续完善、丰富功能。
  

如下表格为HTML 5标准演进历程:
  

A:Mozilla基金会与Opera软件公司于2004年6月向W3C提交了一份立场文件遭否决, Mozilla、Opera和Apple便自立门户成立了WHATWG,同时也提出。
  

A:是的超集,中只包含了稳定特性,中包含了中省略掉的不稳定特性和其他新特性;目的:为了尽快及时完成HTML5,W3C舍弃一些不稳定、有争议的元素,等到后续的版本再考虑。
  

HTML5详细介绍HTML5 视频 & 音频
  

直到现在,仍然不存在一项旨在网页上显示视频、音频的标准,大多数通过插件来显示的;
  

但是,有了HTML5,我们可以不依赖任何插件,简单的使用video和audio标签来实现音视频的播放,如下代码:
  

XML/HTML Code复制内容到剪贴板
  

<videowidth="320"height="240"controls="controls">
  

<sourcesrc="/i/"type="video/ogg">
  

<sourcesrc="/i/"type="video/mp4">
  

XML/HTML Code复制内容到剪贴板
  

<audiocontrols="controls">
  

<sourcesrc="/i/"type="audio/ogg">
  

<sourcesrc="/i/"type="audio/mpeg">
  

Tips:
1、HTML5 <video> 、< audio >元素拥有方法、属性和事件。可以用js动态控制视频 & 音频播放暂停等动作;
2、Video 、audio元素允许多个 source 元素。source 元素可以链接不同的文件。浏览器将使用第一个可识别的格式
  

PS:YouTube默认就是使用HTML5播放器,可以登录其官网.youtube查看源码,如下:
  

HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像,拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
  

XML/HTML Code复制内容到剪贴板
  

<canvasid="myCanvas"width="200"height="100"style="border:1pxsopd#c3c3c3;">
  

<scripttype="text/javascript">
  

XML/HTML Code复制内容到剪贴板
  

<svgxmlns="
  

<polygonpoints="100,1040,,6010,,180"
  

style="fill:red;stroke:blue;stroke-width:3;fill-rule:evenodd;"/>
  

使用canvas和SVG可以实现很多小应用,特别是canvas,如下图例子:
  

Contenteditable可用于实现网页编辑器,当前很多网页编辑器都用这个属性实现,如下图:
  

HTML5 的拖放将会把与用户交互带向另一个等级,并将会对如何设计用户交互产生重大影响。
  

主要的事件函数:Ondragstart、Ondragover、Ondrop;
  

如下为一个代码示例,将一个p拖放到另一个p里:
  

JavaScript Code复制内容到剪贴板
  

<scripttype="text/javascript">
  

<pid="p1"ondrop="drop"ondragover="allowDrop">
  

<imgsrc="/i/w3school_logo_"draggable="true"ondragstart="drag"id="drag1"/>
  

<pid="p2"ondrop="drop"ondragover="allowDrop"></p>
  

在讲HTML5 的Web存储之前,先来说说cookie劣势,主要有以下三点:
  

Cookie会被附加在每个HTTP请求中,无形中增加了流量。
  

由于在HTTP请求中的Cookie是明文传递的,所以安全性成问题。
  

Cookie的大小限制在4KB左右。对于复杂的存储需求来说是不够用的。
  

再来看看HTML5 Web存储的优势:
  

没有额外的的请求头部数据
  

丰富的方法去设置、读娶移除数据
  

在HTML5中,Web存储有两种形式:localStorag、sessionStorage,如下:
  

JavaScript Code复制内容到剪贴板
  

<scripttype="text/javascript">
  

当用户关闭浏览器窗口后,数据会被删除
  

JavaScript Code复制内容到剪贴板
  

<scripttype="text/javascript">
  

Tips:
Cookie是不可或缺的:Cookie的作用是与服务器进行交互,作为HTTP规范的一部分而存在 ,而Web Storage仅仅是为了在本地“存储”数据而生。
  

web worker 是运行在后台的 JavaScript,独立于其他脚本,不会影响页面的性能。
  

Web Worker的基本原理就是在当前javascript的主线程中,使用Worker类加载一个javascript文件来开辟一个新的线程,起到互不阻塞执行的效果,并且提供主线程和新线程之间数据交换的接口:postMessage,onmessage。
  

优势:异步执行复杂计算,不影响页面的展示
  

JavaScript Code复制内容到剪贴板
  

if!=="undefined"){
  

="Sorry,";
  

functionstopWorker{
  

demo_文件,其中的postMessage方法 ,用于向 HTML 页面传回一段消息。
  

JavaScript Code复制内容到剪贴板
  

functiontimedCount
  

setTimeout",500);
  

传统的网页都是浏览器向服务器“查询”数据,但是很多场合,最有效的方式是服务器向浏览器“发送”数据。比如,每当收到新的电子邮件,服务器就向浏览器发送一个“通知”,这要比浏览器按时向服务器查询更有效率。
  

HTML5 服务器发送事件允许网页获得来自服务器的更新;
  

举个例子,如下,其中服务器端使用Java的Struts 2框架,会向浏览器发送服务器最新的时间数据:
  

JavaScript Code复制内容到剪贴板
  

publassSSEextendsActionSupport{
  

privateInputStreamsseStream;
  

pubpcInputStreamgetSseStream{
  

Stringresult="data:"++"\n\n";
  

sseStream=newByteArrayInputStream);
  

JavaScript Code复制内容到剪贴板
  

<actionname="handleSSE"class=""method="handleSSE">
  

<resultname="sess"type="stream">
  

<paramname="contentType">text/event-stream</param>
  

<paramname="inputName">sseStream</param>
  

JavaScript Code复制内容到剪贴板
  

<p><outputid="result">OUTPUTVALUE</output></p>
  

vardata=+"byonmessage";
  

•–email
•–url
•–number
•–range
•–Date pickers
•–search
•–color
  

下图为各个input元素的效果图:
  

下表为各个浏览器对表单属性的支持情况:
  

HTML5 可以使用语义化的标签代替大量的无意义的p标签。这种语义化的特性不仅提升了网页的质量和语义,并且减少了以前用于CSS或JS调用的class和id属性。
  

基于Phaser,主要需要编写以下三个函数:
  

给鸟一个向下的重力,不受控制的时候自动下落
  

添加键盘空格事件,按下空格时改变小鸟坐标
  

创建墙壁事件,每隔,出现一排墙壁往左移动
  

当前各大浏览器对HTML5支持情况,
  

一句话,无论是桌面还是手机浏览器,谷歌对HTML5的支持最全面。
  

–谷歌,宣布自动转换Flash广告为HTML5版本;chrome浏览器
  

–Youtube ,使用HTML 5的播放器;
  

–Amazon,宣布停用所有Flash广告;
  

–腾讯,微信朋友圈小游戏、贺卡或邀请函; QQ空间H5游戏&helpp;
  

–阿里,UC浏览器,手机淘宝H5游戏&helpp;
  

以上这篇HTML最新标准HTML5总结就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。
  

<sourcesrc="/i/"type="audio/ogg">,youtube查看源码,如下:,

JavaScript Code复制内容到剪贴板,

一句话,无论是桌面还是手机浏览器,谷歌对HTML5的支持最全面。

 Category:

Leave a Reply