Shulou(Shulou.com)06/03 Report--

Today, I would like to talk to you about the latest standards of HTML, which may not be well understood by many people. in order to make you understand better, the editor has summarized the following for you. I hope you can get something according to this article.

What is HTML5?

In a nutshell, HTML5 is a general term for a series of technologies used to develop modern rich Web content.

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

Objective: to reduce the dependence of Internet Rich applications (RIA) on Flash, Silverpght, Java Applet, etc., and provide more API that can effectively enhance network applications.

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

Development history of HTML5

In 2004, WHATWG (Web Hypertext Technology working Group) introduced draft Web Apppcations 1.0, the predecessor of HTML5.

In 2007, the W3C agreed to adopt HTML5 as the standard and set up a new HTML team

On October 28th, the W3C officially released the HTML5.0 recommendation.

HTML 5.1 is planned to be released by the end of 2016

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

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

2012 plan

2012

2013

2014

2015

2016

HTML 5.0

Candidate version

Solicit evaluation

Recommended standard

HTML 5.1

First working draft

Finally summoned

Candidate version

Recommended standard

HTML 5.2

First working draft

Tips:

Q: what is WHATWG?

When a position paper submitted by the A:Mozilla Foundation and Opera Software Company to the W3C was rejected in June 2004, Mozilla, Opera and Apple set up WHATWG (Web Hypertext Technology working Group) and also proposed Web Apppcations 1.0.

The difference between Q:HTML5.0 and HTML5.1?

Avv 5.1 is a superset of 5.0, which only contains stability features. 5.1 contains instability features and other new features omitted in 5.0.Objective: in order to complete the HTML5,W3C to discard some unstable and controversial elements as soon as possible, and wait until the subsequent version 5.1 to consider.

HTML5 introduces HTML5 Video & Audio in detail

Until now, there is still no standard for displaying video and audio on the web, mostly through plug-ins (such as Flash)

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

XML/HTML Code copies content to the clipboard

Your browser does not support the video tag.

XML/HTML Code copies content to the clipboard

Your browser does not support the audio element.

The following is the effect of video and audio:

Tips:

1 、 HTML5 、

< audio >

Elements have methods, attributes, and events. You can use js to dynamically control video and audio playback pauses and other actions.

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

Canvas Canvas

The canvas element of HTML5 uses JavaScript to draw images on a web page, and has a variety of ways to draw paths, rectangles, circles, characters, and add images.

XML/HTML Code copies content to the clipboard

Your browser does not support the canvas element.

Var c=document.getElementById ("myCanvas")

Var ccxt=c.getContext ("2d")

Cxt.moveTo (10 and 10)

Cxt.pneTo (150,50,50,500)

Cxt.pneTo (10 and 50)

Cxt.stroke ()

The following is the effect picture:

Scalable vector graphics (Scalable Vector Graphics)

XML/HTML Code copies content to the clipboard

Common applications of Canvas & SVG

Many mini applications, especially canvas, can be implemented using canvas and SVG, as shown in the following figure:

HTML5 editable content & drag and drop

Contenteditable Global Properties

Contenteditable can be used to implement a web page editor. At present, many web page editors are implemented with this attribute, as shown below:

Drag and drop

The drag and drop of HTML5 will take user interaction to another level and will have a significant impact on how user interaction is designed.

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

The following is a code example of dragging and dropping one p into another p:

JavaScript Code copies content to the clipboard

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

}

HTML5 Web storage

Before we talk about HTML5's Web storage, let's talk about the disadvantages of cookie. There are three main points:

Cookie is appended to each HTTP request, virtually increasing traffic.

Because 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 around 4KB. It is not enough for complex storage requirements.

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 limit

In HTML5, there are two forms of Web storage: localStorag and sessionStorage, as follows:

LocalStorage

There is no time limit for stored data

JavaScript Code copies content to the clipboard

LocalStorage.lastname= "Smith"

[xss_clean] ("Last name:" + localStorage.lastname)

SessionStorage

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

JavaScript Code copies content to the clipboard

SessionStorage.lastname= "Smith"

[xss_clean] (sessionStorage.lastname)

Tips:

Cookie is indispensable: the role of Cookie is to interact with the server as part of the HTTP specification, while Web Storage is simply created to "store" data locally.

HTML5 Web Workers

Web worker is a JavaScript that runs in the background, independent of other scripts, and does not affect the performance of the page (JS multithreaded work solution).

The basic principle of Web Worker is that in the current main thread of javascript, use the Worker class to load a javascript file to open up a new thread, which has the effect of not blocking execution each other, and provides an interface for data exchange between the main thread and the new thread: postMessage,onmessage.

Advantages: perform complex calculations asynchronously without affecting the display of the page

The following is an example of a summation code:

JavaScript Code copies content to the clipboard

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") [xss_clean] = event.data

}

} else {

Document.getElementById ("result") [xss_clean] = "Sorry, your browser does not support Web Workers..."

}

}

Function stopWorker () {

W.terminate ()

}

The demo_workers.js file, where the postMessage () method is used to return a message to the HTML page.

JavaScript Code copies content to the clipboard

Var iTunes 0

Function timedCount ()

{

I=i+1

PostMessage (I)

SetTimeout ("timedCount ()")

}

TimedCount ()

Tips:

1. Cannot load JS across domains

Code in 2.worker cannot access DOM

HTML 5 server sends events

In traditional web pages, browsers "query" data from the server, but in many cases, the most effective way is for the server to "send" data to the browser. For example, every time a new email is received, the server sends a "notification" to the browser, which is more efficient than the browser querying the server (polpng) on time.

The HTML5 server sends events (server-sent event) that allow web pages to get updates from the server

For example, the server uses Java's Struts 2 framework to send the latest server time data to the browser:

Server code:

JavaScript Code copies content to the clipboard

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 copies content to the clipboard

Text/event-stream

SseStream

Client code:

JavaScript Code copies content to the clipboard

OUTPUT VALUE

(function (global, window, document) {

'use strict'

Function main () {

Window.addEventpstener ('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)

HTML 5 form enhancements

New Input type

-email

-url

-number

-range

-Date pickers (date, month, week, time, datetime, datetime-local)

-search

-color

The following figure shows the effect of each input element:

The following figure shows the effect of each input element:

New form elements for HTML5

-datapst

-keygen

-output

The following figure shows an example of datapst:

New form properties for HTML5

-New form attribute:

Autocomplete

Novapdate

-New input attribute:

Autocomplete

Autofocus

Form

Height and width

Pst

Min, max and step

Multiple

Pattern (regexp)

Placeholder

Required

Form overrides (formaction, formenctype, formmethod, formnovapdate, formtarget)

The following table shows the support for form properties by each browser:

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 markup

HTML5 can use semantic tags instead of 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 recommendation (W3C official website recommendation)

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

Or refer to w3school

Complete new tags for HTML5

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

HTML Global Properties

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

Global event Properties

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

Analysis of Flying Birds with HTML5 examples

Based on Phaser (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 (executed once):

Give the bird a downward gravity that automatically falls when it is out of control

Add keyboard space event and change bird coordinates when pressing space

Create a wall event, with a row of walls moving to the left every 1.5 seconds (3 randomly spaced in the middle)

Update function (executed per frame):

Judge whether to fly out of the boundary or not

Judge whether or not to touch the wall

The effect picture is as follows:

Column chart

Main steps:

Use canvas to draw graphics

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

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

Effect picture:

Development Prospect of HTML5

Current support for HTML5 by major browsers (full score is 555), http://html5test.com/

In a word, Google has the most comprehensive support for HTML5, both on the desktop and on mobile browsers.

The actions of major companies

-Google, announcing automatic conversion of Flash ads to HTML5 version; chrome browser

-Youtube, using HTML 5 player

-Amazon, announce the suspension of all Flash ads

-Tencent, Wechat moments Mini Game, greeting cards or invitations; Qzone H5 game & helpp

-Baidu, direct number

Ali, UC browser, Mobile Taobao H5 Game & helpp

After reading the above, do you have any further understanding of the latest standards of HTML? If you want to know more knowledge or related content, please follow the industry information channel, thank you for your support.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.