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

  目标:减弱互连网富应用(凯雷德IA )对Flash、Silverlight、Java
Applet等的借助,并且提供更多能有效狠抓网络利用的API。

  如下图为独立的汉兰达IA(Rich Internet
Applications)网页,包括部分图纸,视频,游戏等:

      发展历史 2

HTML5迈入历史

  • 二零零三年,WHATWG(网页超文本技术工作小组)指出草案Web Applications
    1.0,即HTML5的前身;
  • 二〇〇七年,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软件公司于2002年5月向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
的拖放将会把与用户交互带向另3个等级,并将会对哪些规划用户交互爆发相当主要影响。

  首要的轩然大波函数:Ondragstart()、Ondragover()、Ondrop();

  如下为三个代码示例,将3个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文件来开发3个新的线程,起到互不阻塞执行的听从,并且提供主线程和新线程之间数据互换的接口:postMessage,onmessage。

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

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

<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支撑情状(满分是552分),http://html5test.com/

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

  发展历史 15

  各大商行行动

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

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

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

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

–百度,直达号;

–Ali,UC浏览器,手机TaobaoH5游戏…

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

谷歌、百度

发表评论

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