w88优德官网电脑版HTML最新规范HTML5总

发布时间:2018-09-27  栏目:w88优德官网电脑版  评论:0 Comments

形容以眼前

   
HTML5下都大漫长了,然而由于我未是业内做前端的,只了解有这个事物,具体概念有点模糊(其实就算是平文山会海标准规范啦);因此去年(2015.11.09),专门针对HTML5开了只简易的总,今天正看到,整理一下停放自己之博客,以免掉。有错误请指正。

  另外,转载请注明链接http://www.cnblogs.com/chenpi/p/5578011.html,虽然情比较简单,但为是消费了许多光阴整治的。

什么是HTML5

  简单地游说,HTML5即是均等雨后春笋用来制定现代富Web内容的连锁技能之总称。

  HTML5 ≈ HTML5着力标准 + CSS 3 + JavaScript; 
其中HTML5和CSS主要担负界面,JavaScript负责逻辑处理;

      w88优德官网电脑版 1

  目的:减少互联网富应用(RIA )对Flash、Silverlight、Java
Applet等的依赖,并且提供更多能立竿见影提高网络下之API。

  如下图也独立的RIA(Rich Internet
Applications)网页,包含部分图纸,视频,游戏等:

      w88优德官网电脑版 2

HTML5前进历史

  • 2004年,WHATWG(网页超文本技术工作小组)提出草案Web Applications
    1.0,即HTML5的前身;
  • 2007年,W3C同意采纳HTML5当做正式,并建立了初的HTML工作团队;
  • 2014年10月28日,W3C正式发布HTML5.0推荐标准;
  • 2016年底前,计划颁布HTML 5.1;
  • 未来,待HTML5.1公布后,工作组会重复HTML5.1步骤再作一个新的HTML5.2,继续完善、丰富意义。

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

2012 plan

2012

2013

2014

2015

HTML 5.0

候选版

征求评价

推荐标准

 

HTML 5.1

第一工作草案

 

最后召集

候选版

HTML 5.2

     

第一工作草案

Tips:

Q:什么是WHATWG?
A:Mozilla基金会和Opera软件公司让2004年6月朝W3C提交了同等客立场文件中否决,
Mozilla、Opera及Apple便自立门户成立了WHATWG(网页超文本技术工作小组),同时为提出Web
Applications 1.0。

Q:HTML5.0与HTML5.1的区别?
A:5.1是5.0底超集,5.0饱受唯有含了安居乐业特性,5.1惨遭隐含了5.0惨遭省略掉的非稳定特性与其余新特征;目的:为了尽早就完成HTML5,W3C舍弃一些无安宁、有争执之素,等到后续的5.1版本更考虑。

HTML5缕介绍

HTML5 视频 & 音频

    
直到现在,仍然不存一样项旨在网页上显示视频、音频的正规,大多数经过插件(比如
Flash)来显示的;

  但是,有矣HTML5,我们得以不依靠任何插件,简单的运用video和audio标签来落实音视频的播报,如下代码:

<video width="320" height="240" controls="controls">
  <source src="/i/movie.ogg" type="video/ogg">
  <source src="/i/movie.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>

<audio controls="controls">
  <source src="/i/song.ogg" type="audio/ogg">
  <source src="/i/song.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>

  如下,为视频与韵律的力量图:

    w88优德官网电脑版 3

Tips:
1、HTML5 <video> 、< audio
>元素拥有方法、属性和事件。可以就此js动态控制视频 &
音频播放暂停等动作;

2、Video 、audio元素允许多个 source
元素。source
元素可以链接不同的文件。浏览器将运用第一独可识别的格式

 

PS:YouTube默认就是用HTML5播放器,可以登录该官网www.youtube.com翻开源码,如下:

w88优德官网电脑版 4

HTML5 Canvas & SVG

画布Canvas

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

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

  如下,为效力图:

  w88优德官网电脑版 5

然而伸缩矢量图形 (Scalable Vector Graphics)

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

w88优德官网电脑版 6

Canvas & SVG 的常见应用

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

w88优德官网电脑版 7

HTML5 可编制内容 & 拖放

Contenteditable全局属性

  Contenteditable可用于落实网页编辑器,当前众网页编辑器都用这特性实现,如下图:

  w88优德官网电脑版 8

Drag 和 drop

  HTML5
的拖放将会晤拿和用户交互带向其他一个等,并将会指向哪些规划用户交互产生重大影响。

  主要的风波函数:Ondragstart()、Ondragover()、Ondrop();

  如下为一个代码示例,将一个div拖放到任何一个div里:

<script type="text/javascript">
function allowDrop(ev)
{
    ev.preventDefault();
}
function drag(ev)
{
    ev.dataTransfer.setData("Text",ev.target.id);
}
function drop(ev)
{
    ev.preventDefault();
    var data=ev.dataTransfer.getData("Text");
    ev.target.appendChild(document.getElementById(data));
}
</script>
</head>
<body>
    <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">
        <img src="/i/w3school_logo_black.gif" draggable="true" ondragstart="drag(event)" id="drag1" />
    </div>
    <div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>

w88优德官网电脑版 9

HTML5 Web存储

  于讲HTML5 的Web存储之前,先来说说cookie劣势,主要发生以下三碰:

  1. Cookie会被增大在每个HTTP请求被,无形中多了流量。
  2. 由于当HTTP请求被的Cookie是开诚布公传递的,所以安全性成问题。(除非用HTTPS)
  3. Cookie的深浅限制在4KB左右。对于复杂的囤积需求来说是勿敷用的。

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

  1. 尚无额外的之恳求头部数
  2. 添加的方式去装、读取、移除数据
  3. 默认5MB存储限制

  在HTML5受,Web存储有半点栽形式:localStorag、sessionStorage,如下:

  • localStorage 

     存储的数码尚未时间范围;

<script type="text/javascript">
localStorage.lastname="Smith";
document.write("Last name: " + localStorage.lastname);
</script>
  • sessionStorage

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

<script type="text/javascript">
sessionStorage.lastname="Smith";
document.write(sessionStorage.lastname);
</script>

Tips:
Cookie是必备的:Cookie的意图是暨服务器进行交互,作为HTTP规范的平有些要在
,而Web Storage仅仅是为当地面“存储”数据而好。

HTML5 Web Workers

  web worker 是运作在后台的
JavaScript,独立于任何脚本,不见面影响页面的性(JS多线程工作解决方案)。

  Web
Worker的基本原理就是于当下javascript的主线程遭遇,使用Worker类加载一个javascript文件来开辟一个新的线程,起及互不阻塞执行的功力,并且提供主线程和初线程之间数据交换的接口:postMessage,onmessage。

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

   如下为一个求和的代码示例:

<script>
var w;

function startWorker() {
    if (typeof (Worker) !== "undefined") {
        if (typeof (w) == "undefined") {
           w = new Worker("rs/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>

demo_workers.js文件,其中的postMessage() 方法 ,用于为 HTML
页面传回一段落消息。

var i=0;

function timedCount()
{
    i=i+1;
    postMessage(i);
    setTimeout("timedCount()",500);
}

timedCount();

Tips:
1.请勿能够跨域加载JS
2.worker内代码不克顾DOM

HTML 5 服务器发送事件

  传统的网页都是浏览器为服务器“查询”数据,但是多场所,最实用之法子是服务器向浏览器“发送”数据。比如,每当收到新的电子邮件,服务器就朝着浏览器发送一个“通知”,这要是于浏览器按时向服务器查询(polling)更有效率。

  HTML5 服务器发送事件(server-sent
event)允许网页获得来自服务器的更新;

  举个例,如下,其中服务器端使用Java的Struts
2框架,会朝着浏览器发送服务器时的工夫数额:

服务端代码:

public class SSE extends ActionSupport {
    private InputStream sseStream;
    public InputStream getSseStream() {
        return sseStream;
    }
    public String handleSSE() {
        System.out.println("Inside handleSSE() ");
        String result = "data: "+new Date().toString() + "\n\n";
        sseStream = new ByteArrayInputStream(result.getBytes() );
        System.out.println("Exiting handleSSE() ");
        return SUCCESS;
    }
}

 <action name="handleSSE" class="pichen.java.html5.test.SSE" method="handleSSE">
            <result name="success" type="stream">
                <param name="contentType">text/event-stream</param>
                <param name="inputName">sseStream</param>
            </result>
</action>

客户端代码:

<p><output id="result">OUTPUT VALUE</output></p>
<script>
(function(global, window, document) {
  'use strict';
  function main() {
    window.addEventListener('DOMContentLoaded', contentLoaded);
  }
  function contentLoaded() {
    var result = document.getElementById('result');
    var stream = new EventSource('handleSSE.action');
    stream.onmessage=function(event){
        var data = event.data+" by onmessage";
        result.value = data;
    }
  }
  main();
})(this, window, window.document);
</script>

HTML 5 表单增强功能

新的 Input 类型

  • –email
  • –url
  • –number
  • –range
  • –Date pickers (date, month, week, time, datetime, datetime-local)
  • –search
  • –color

  下图为各个input元素的功用图:

  w88优德官网电脑版 10

HTML5 的初的表单元素

  • –datalist
  • –keygen
  • –output

 

  下图为datalist的示例:

  w88优德官网电脑版 11

HTML5 的新的表单属性

–新的 form 属性:

•autocomplete

•Novalidate

–新的 input 属性:

•autocomplete

•autofocus

•form

•height 和 width

•list

•min, max 和 step

•multiple

•pattern (regexp)

•placeholder

•Required

•form overrides (formaction, formenctype, formmethod, formnovalidate,
formtarget)

 

  下表为顺序浏览器对表单属性的支撑情况:

Input type

IE

Firefox

Opera

autocomplete

8.0

3.5

9.5

autofocus

No

No

10.0

form

No

No

9.5

form overrides

No

No

10.5

height and width

8.0

3.5

9.5

list

No

No

9.5

min, max and step

No

No

9.5

multiple

No

3.5

No

novalidate

No

No

No

pattern

No

No

9.5

placeholder

No

No

No

required

No

No

9.5

 

HTML5语义化标记

  HTML5
可以以语义化的标签代替大量之架空的div标签。这种语义化的特点不但荣升了网页的质与语义,并且减少了原先用于CSS或JS调用的class和id属性。

  w88优德官网电脑版 12

更多HTML 5标准

HTML5引进标准(W3C官网推荐标准)

–http://www.w3.org/TR/html5/

 

或者参考w3school

 

HTML5 完整的新签

–http://www.w3school.com.cn/tags/index.asp

HTML 全局属性

–http://www.w3school.com.cn/tags/html_ref_standardattributes.asp

大局事件性质

–http://www.w3school.com.cn/tags/html_ref_eventattributes.asp

HTML5实例分析

翱翔的禽

依据Phaser(开源的HTML5 2D游玩开发框架),主要要编制以下三单函数:

Preload函数(执行同样糟糕):

  1. 加载资源(背景、图片等资源)

Create函数(执行同一次等):

  1. 让鸟一个通向下的重力,不吃控制的时节自动降
  2. 上加键盘空格事件,按下空格时移小鸟坐标
  3. 创建墙壁事件,每隔1.5s,出现一排墙壁朝向左移动(中间随机隔3块)

Update函数(每帧执行):

  1. 看清是否飞出边界
  2. 判断是否碰到墙壁

  效果图如下:

  w88优德官网电脑版 13

柱状图表

一言九鼎步骤:

  1. 使用canvas画起图
  2. 概念鼠标点击事件(获取鼠标坐标来分点击的靶子),$(canvas).on(“click”,mouseClick); 
  3. 概念鼠标hover事件(获取鼠标坐标来区分hover的对象),$(canvas).on(“mousemove”,mouseMove);

效果图:

  w88优德官网电脑版 14

HTML5更上一层楼展望

  当前各级大浏览器对HTML5支持情况(满分是555私分),http://html5test.com/

  一句子话,无论是桌面还是手机浏览器,谷歌对HTML5的支撑不过全面。

  w88优德官网电脑版 15

  各大店行动

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

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

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

–腾讯,微信朋友围小打、贺卡或邀请函; QQ空间H5游戏…

–百度,直达号;

–阿里,UC浏览器,手机淘宝H5转悠戏…

w88优德官网电脑版 16

参考资料

维基百科

https://zh.wikipedia.org/wiki/HTML5

W3C官网,HTML5推介标准

http://www.w3.org/TR/html5/

测试浏览器对HTML5支持情况

http://html5test.com/

HTML5用与源码

http://www.html5tricks.com/

HTML5实例源码

http://html5demos.com

W3School

http://www.w3school.com.cn/

谷歌、百度

留下评论