HTML最新专业HTML5总

描绘在前边

   
HTML5出去就死遥远了,然而由于自未是正经将前端的,只了解发生这东西,具体概念有点模糊(其实就是同样名目繁多标准规范啦);因此去年(2015.11.09),专门针对HTML5举行了只简易的总,今天恰恰看到,整理一下放到自己的博客,以免丢失。有错请指正。

  另外,转载请注明链接http://www.cnblogs.com/chenpi/p/5578011.html,虽然内容比较简单,但为是花了广大时空整治的。

什么是HTML5

  简单地说,HTML5即便是相同文山会海用来制订现代富Web内容之连带技能之总称。

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

      发展历史 1

  目的:减少互联网富应用(RIA )对Flash、Silverlight、Java
Applet等的凭,并且提供更多克行增长网络下的API。

  如下图为天下第一的RIA(Rich Internet
Applications)网页,包含有图纸,视频,游戏等:

      发展历史 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>

  如下,为视频及节奏的效用图:

    发展历史 3

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

2、Video 、audio元素允许多单 source
元素。source
元素可以链接不同的文件。浏览器将以第一只可辨识的格式

 

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

发展历史 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>

  如下,为意义图:

  发展历史 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>

发展历史 6

Canvas & SVG 的大规模应用

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

发展历史 7

HTML5 可编制内容 & 拖放

Contenteditable全局属性

  Contenteditable可用于落实网页编辑器,当前成千上万网页编辑器都为此此特性实现,如下图:

  发展历史 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>

发展历史 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元素的效用图:

  发展历史 10

HTML5 的初的表单元素

  • –datalist
  • –keygen
  • –output

 

  下图为datalist的示例:

  发展历史 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属性。

  发展历史 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. 判定是否碰到墙壁

  效果图如下:

  发展历史 13

柱状图表

重中之重步骤:

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

效果图:

  发展历史 14

HTML5前行展望

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

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

  发展历史 15

  各大商家走

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

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

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

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

–百度,直达号;

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

发展历史 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/

谷歌、百度

发表评论

电子邮件地址不会被公开。 必填项已用*标注