HTML最新专业HTML5计算

写在后面

   
HTML5出去已经很久了,不过由于本身不是正式搞前端的,只明白有其一东西,具体概念有点模糊(其实就是一多级标准规范啦);由此二〇一八年(二零一六.11.09),专门对HTML5做了个大约的总括,前天恰赏心悦目到,整理一下内置本人的博客,避防遗失。有不当请指正。

  此外,转发请注脚链接http://www.cnblogs.com/chenpi/p/5578011.html,即便内容比较简单,但也是花了许多时光整治的。

什么是HTML5

  简单地说,HTML5就是一多如牛毛用来制定现代富Web内容的有关技术的总称。

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

      发展历史 1

  指标:减弱互连网富应用(KugaIA )对Flash、Silverlight、Java
Applet等的倚重,并且提供越多能有效增强网络采取的API。

  如下图为优秀的SportageIA(Rich Internet
Applications)网页,包括部分图形,摄像,游戏等:

      发展历史 2

HTML5向上历史

  • 二零零一年,WHATWG(网页超文本技术工作小组)提议草案Web Applications
    1.0,即HTML5的前身;
  • 2005年,W3C同意拔取HTML5看作标准,并树立了新的HTML工作团队;
  • 二〇一四年四月三十日,W3C正式揭破HTML5.0推荐标准;
  • 二零一五年终前,安排发布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软件公司于二零零零年九月向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:
① 、HTML5 <video> 、< audio
>成分拥有方法、属性和事件。可以用js动态控制录制 &
音频播放暂停等动作;

二 、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拖放到另3个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支撑情形(满分是551分),http://html5test.com/

  一句话,无论是桌面还是手机浏览器,谷歌(谷歌)对HTML5的支撑最周密。

  发展历史 15

  各大商行行动

–谷歌(Google),发表活动转换Flash广告为HTML5本子;chrome浏览器

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

–亚马逊,发布停用全体Flash广告;

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

–百度,直达号;

–Ali,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/

谷歌、百度

发表评论

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