Summary of the latest HTML standard HTML5

HTML5 has been out for a long time. However, since I am not a front-end person, I only know about this thing, and the specific concept is a bit vague (actually it is a series of standards); therefore, last year, I made a simple summary of HTML5. I just happened to see it today, so I organized it and put it on my blog to avoid losing it. Please correct me if there are any mistakes, I am a front-end noob.

Let’s start with a table of contents, as follows:

•What is HTML5

•HTML5 development history

•HTML5 detailed introduction

•Video/Audio, Canvas & SVG, Editable Content & Drag and Drop, Web Storage, Web Workers, Server Sent Events, Form Enhancements, Semantic Markup, and More HTML5 Standards

• HTML5 Example Analysis

•Flying Bird

•Bar Chart

•HTML5 Development Outlook

•Reference Resources

What is HTML5

Simply put, HTML5 is the general term for a series of related technologies used to develop modern rich Web content.

HTML5 ≈ HTML5 core specification + CSS 3 + JavaScript; HTML5 and CSS are mainly responsible for the interface, and JavaScript is responsible for logical processing;




Purpose: Reduce the dependence of Rich Internet Applications (RIA) on Flash, Silverpght, Java Applet, etc., and provide more APIs that can effectively enhance network applications.

The following picture is a typical RIA (Rich Internet Apppcations) web page, including some charts, videos, games, etc.:




##HTML5 Development History
In 2004, WHATWG (Web Hypertext Technology Working Group) proposed a draft Web Apppcations 1.0, the predecessor of HTML5;

In 2007, W3C agreed to adopt HTML5 as a standard. And established a new HTML working team;

On October 28, 2014, W3C officially released the HTML5.0 recommended standard;

Before the end of 2016, it plans to release HTML 5.1;

In the future, after HTML5.1 is announced, the working group will repeat the steps of HTML5.1 and create a new HTML5.2 to continue to improve and enrich functions.

The following table shows the evolution of the HTML 5 standard:

##2012 planHTML 5.0# #HTML 5.1First Working Draft

2012

2013

2014

2015

2016

Candidate Version

Solicitation Evaluation

Recommended standards

First Working Draft

Final Call

Candidate Version

Recommended Standard

##HTML 5.2

Tips:

Q: What is WHATWG?

A: The Mozilla Foundation and Opera Software submitted a position paper to the W3C in June 2004 but it was rejected. Mozilla, Opera and Apple established their own WHATWG (Web Hypertext Technology Working Group) , and also proposed Web Apppcations 1.0.

Q: What is the difference between HTML5.0 and HTML5.1?

A: 5.1 is a superset of 5.0. 5.0 only contains stable features. 5.1 contains unstable features and other new features that were omitted in 5.0; Purpose: In order to complete HTML5 as soon as possible and timely, W3C abandoned it Some unstable and controversial elements will be considered in the subsequent version 5.1.

HTML5 Detailed introduction to HTML5 video & audio

Until now, there is still no standard for displaying video and audio on web pages. Most of them are through plug-ins (such as Flash);

However, with HTML5, we can simply use video and audio tags to achieve audio and video playback without relying on any plug-ins, as shown in the following code:

XML/ HTML Code Copy content to clipboard

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

XML/HTML Code Copy content to clipboard

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

is as follows, for the effect of video and audio Figure:




Tips:
1. HTML5 39000f942b2545a5315c57fa3276f220 , 44c1f213bd0a566e29e0fc1cc0f33e42 elements have methods, attributes and event. You can use js to dynamically control actions such as video & audio playback and pause;
2. Video and audio elements allow multiple source elements. The source element can link different files. The browser will use the first recognized format



PS: YouTube uses the HTML5 player by default. You can log in to its official website www.youtube.com to view the source code, as follows:



HTML5 Canvas & SVG

CanvasCanvas

The canvas element of HTML5 uses JavaScript in the web page Draw images on it, with multiple methods for drawing paths, rectangles, circles, characters and adding images.

XML/HTML Code Copy the content to the clipboard

   <canvas id="myCanvas" width="200" height="100" style="border:1px sopd #c3c3c3;">  
    Your browser does not support the canvas element.   
    </canvas>  
    <script type="text/javascript">  
    var c=document.getElementById("myCanvas");   
    var ccxt=c.getContext("2d");   
    cxt.moveTo(10,10);   
    cxt.pneTo(150,50);   
    cxt.pneTo(10,50);   
    cxt.stroke();   
    </script>

is as follows, the rendering:



Scalable Vector Graphics

XML/HTML Code Copy content to clipboard

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

Common applications of Canvas & SVG

Using canvas and SVG can realize many small applications, especially canvas, as shown in the following example:



HTML5 Editable content & drag-and-drop

Contenteditable global attribute

Contenteditable can be used to implement web page editors. Currently, many web page editors use this attribute to implement it, as follows Figure:



Drag and drop

HTML5 drag and drop will take user interaction to another level and will Can have a significant impact on how user interactions are designed.

Main event functions: Ondragstart(), Ondragover(), Ondrop();

The following is a code example, drag and drop a p into another p:

JavaScript CodeCopy content to the clipboard

    <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>   
        <p id="p1" ondrop="drop(event)" ondragover="allowDrop(event)">   
            <img src="/i/w3school_logo_black.gif" draggable="true" ondragstart="drag(event)" id="drag1" />   
        </p>   
        <p id="p2" ondrop="drop(event)" ondragover="allowDrop(event)"></p>

HTML5 Web Storage

Before talking about HTML5 Web storage , let’s first talk about the disadvantages of cookies, which mainly include the following three points:

Cookies will be attached to each HTTP request, which invisibly increases the traffic.

Since the cookie in the HTTP request is passed in clear text, security is a problem. (Unless HTTPS is used)

The size of Cookie is limited to about 4KB. Insufficient for complex storage needs.

Let’s take a look at the advantages of HTML5 Web storage:

No additional request header data
Rich methods to set, read, and remove data
Default 5MB storage Limitations
In HTML5, there are two forms of web storage: localStorag and sessionStorage, as follows:

localStorage

There is no time limit for stored data;

JavaScript CodeCopy content to the clipboard

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

sessionStorage

When the user closes the browser window, the data will be deleted

JavaScript CodeCopy content to clipboard

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

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

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

JavaScript Code复制内容到剪贴板

 

  <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 页面传回一段消息。

JavaScript Code复制内容到剪贴板

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

Tips:

1.不能跨域加载JS

2.worker内代码不能访问DOM

HTML 5 服务器发送事件

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

HTML5 服务器发送事件（server-sent event）允许网页获得来自服务器的更新；

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

服务端代码：

JavaScript Code复制内容到剪贴板

   

pubpc class SSE extends ActionSupport {   
        private InputStream sseStream;   
        pubpc InputStream getSseStream() {   
            return sseStream;   
        }   
        pubpc 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;   
        }   
    }

JavaScript Code复制内容到剪贴板

 

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

客户端代码：

JavaScript Code复制内容到剪贴板

 

 <p><output id="result">OUTPUT VALUE</output></p>   
    <script>   
    (function(global, window, document) {   
      &#39;use strict&#39;;   
      function main() {   
        window.addEventpstener(&#39;DOMContentLoaded&#39;, contentLoaded);   
      }   
      function contentLoaded() {   
        var result = document.getElementById(&#39;result&#39;);   
        var stream = new EventSource(&#39;handleSSE.action&#39;);   
        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元素的效果图：

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



HTML5 的新的表单元素

–datapst

–keygen

–output

下图为datapst的示例：



HTML5 的新的表单属性

–新的 form 属性：

•autocomplete

•Novapdate

–新的 input 属性：

•autocomplete

•autofocus

•form

•height 和 width

•pst

•min, max 和 step

•multiple

•pattern (regexp)

•placeholder

•Required

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

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

Input type	IE	Firefox	Opera	Chrome	Safari
autocomplete	8.0	3.5	9.5	3.0	4.0
autofocus	No	No	10.0	3.0	4.0
form	No	No	9.5	No	No
form overrides	No	No	10.5	No	No
height and width	8.0	3.5	9.5	3.0	4.0
pst	No	No	9.5	No	No
min, max and step	No	No	9.5	3.0	No
multiple	No	3.5	No	3.0	4.0
novapdate	No	No	No	No	No
pattern	No	No	9.5	3.0	No
placeholder	No	No	No	3.0	3.0
required	No	No	9.5	3.0	No

HTML5 Semantic Tags

HTML5 can use semantic tags to replace a large number of meaningless p tags. This semantic feature not only improves the quality and semantics of web pages, but also reduces the class and id attributes previously used for CSS or JS calls.



More HTML 5 standards

HTML5 recommended standards (W3C official website recommended standards)

–http: //www.php.cn/

Or refer to w3school

HTML5 complete new tag

–http://www.php.cn /

HTML global attributes

–http://www.php.cn/

Global event attributes

–http://www.php.cn/

HTML5 Example Analysis Flying Bird

Based on Phaser (an open source HTML5 2D game development framework), you mainly need to write the following Three functions:

Preload function (executed once):

Load resources (background, pictures, etc.)

Create function ( Execute once):

Give the bird a downward gravity, and it will automatically fall when it is out of control

Add a keyboard space event, and change the bird's coordinates when the space is pressed

Create a wall event. Every 1.5s, a row of walls will appear and move to the left (randomly separated by 3 blocks in the middle)

Update function (executed every frame):

Judge whether it flies out of the boundary

Judge whether it hits the wall

The rendering is as follows:



Bar chart

Main steps:

Use canvas to draw graphics

Define the mouse click event (get the mouse coordinates to distinguish the click target), $(canvas).on("cpck",mouseCpck);

Define the mouse hover event (get the mouse coordinates to distinguish the hover target), $(canvas).on("mousemove",mouseMove);

Rendering:



HTML5 Development Outlook

The current support of HTML5 by major browsers (full score is 555 points), http://www.php.cn/

In a word, whether it is a desktop or mobile browser, Google has the most comprehensive support for HTML5.



Major company actions

–Google announced that it will automatically convert Flash ads to HTML5 versions; chrome browser

–Youtube, use HTML 5 player;

-Amazon, announced the discontinuation of all Flash ads;

-Tencent, WeChat Moments mini-games, greeting cards or invitations; QQ Space H5 games&helpp;

–Baidu, direct number;

–Alibaba, UC browser, mobile Taobao H5 game&helpp;

## The above is a summary of the latest HTML standard HTML5. For more related content, please pay attention to the PHP Chinese website (www.php.cn)!