HTML5

What is HTML5?

HTML5 is the next generation HTML standard.

HTML5 is the latest revised version of HTML. The standard was completed by the World Wide Web Consortium (W3C) in October 2014.

How did HTML5 get started?

HTML5 is the result of collaboration between W3C and WHATWG, which stands for Web Hypertext Application Technology Working Group. .

The WHATWG focuses on web forms and applications, while the W3C focuses on XHTML 2.0. In 2006, the two parties decided to collaborate to create a new version of HTML.

Some interesting new features in HTML5:

Canvas element for drawing

Video and audio elements for media playback

For local Better support for offline storage

New special content elements, such as article, footer, header, nav, section

New form controls, such as calendar, date, time, email, url , search


HTML5 features

Semantic Features (Class: Semantic)
HTML5 gives web pages better meaning and structure. Richer tags will come with support for RDFa, microdata and microformats, building a data-driven Web that is more valuable to both programs and users.
Local Storage Features (Class: OFFLINE & STORAGE)
Web APPs developed based on HTML5 have shorter startup time and faster networking speeds, all thanks to the HTML5 APP Cache and local storage functions. Indexed DB (one of the most important technologies for html5 local storage) and API documentation.
Device Compatibility Features (Class: DEVICE ACCESS)
Since the API documentation of the Geolocation function was made public, HTML5 has provided web application developers with more functional optimization options, bringing More experience features. HTML5 provides an unprecedented open interface for data and application access. Allows external applications to be directly connected to the data inside the browser, for example, video and audio can be directly connected to microphones and cameras.
Connection Features (Class: CONNECTIVITY)
More effective connection efficiency enables page-based real-time chat, faster web game experience, and more optimized online communication. HTML5 has more effective server push technology. Server-Sent Event and WebSockets are two of the features. These two features can help us realize the function of the server "pushing" data to the client.
Web Multimedia Features (Class: MULTIMEDIA)
Supports audio, video and other multimedia functions on the web page, complementing the website's own APPS, camera, and audio and video functions.
Class: 3D, Graphics & Effects
Based on 3D functions of SVG, Canvas, WebGL and CSS3, users will be amazed by the 3D functions presented in the browser Amazing visual effects.
Performance & Integration Features (Class: Performance & Integration)
No user will wait forever for your Loading - HTML5 will help your web applications and websites run faster in diverse environments through technologies such as XMLHttpRequest2. Work.
CSS3 Features (Class: CSS3)
CSS3 provides more styles and stronger effects without sacrificing performance and semantic structure. In addition, the Web's Open Font Format (WOFF) also provides greater flexibility and control than previous Web typography.
Edit this paragraph Currently, there are only two ways to develop HTML5 applications on mobile devices, either using all HTML5 syntax, or only using javascript engine.
The construction method of javascript engine makes it possible to create mobile web games. Since the interface layer is very complex, a UI tool kit has been reserved for use.
Pure HTML5 mobile applications run slowly and are full of errors, but the results will improve after optimization. Although not many people are willing to do such optimization, you can still try it.
The biggest advantage of HTML5 mobile applications is that they can be debugged and modified directly on the web page. Developers of native applications may need to spend a lot of effort to achieve the effect of HTML5, and constantly repeat coding, debugging and running. This is a problem that must be solved first.
HTML5 porting is very simple, but it is assumed that everyone will make this an automated operation.


##HTML5 <!DOCTYPE>

<!doctype> The declaration must be located on the first line in the HTML5 document, and its use is very simple:

HTML5 Improvements

New elements

New attributes

Full support for CSS3

Video and Audio

2D/3D graphics

Local Storage

Local SQL Data

Web Application

HTML5 Multimedia

Using HTML5 you can simply play videos on web pages (video) and audio (audio).

HTML5 <video>

HTML5 <audio>

HTML5 Application

Using HTML5 you can simply Locally developed applications

Local data storage

Access local files

Local SQL data

Cache references

Javascript workers

XHTMLHttpRequest 2

HTML5 Graphics

Using HTML5 you can simply draw graphics:

Use the <canvas> element.

Use inline SVG.

Use CSS3 2D conversion and CSS3 3D conversion.

HTML5 Using CSS3

New Selector

New Properties

Animation

2D/3D Conversion

Rounded corners

Shadow effect

Downloadable font

To learn more about CSS3, please check out the CSS3 tutorial on this site.

HTML5 Browser Support

The latest versions of Safari, Chrome, Firefox, and Opera support certain HTML5 features. Internet Explorer 9 will support certain HTML5 features.

Advantages and disadvantages of HTML5

Advantages of HTML5

 1. Improve usability and improvements User-friendly experience;

 2. New tags will help developers define important content;

 3. Can bring more multimedia elements (video and audio) to the site ;

4. It can be a good substitute for FLASH and Silverlight;

5. When it comes to website crawling and indexing, it is very friendly to SEO;

6 , widely used in mobile applications and games.

Disadvantages of HTML5

1. HTML5 itself is still in development. It is not the most urgent need for user applications, but more of an attempt by manufacturers. Strategic needs to change the software ecological landscape.

 2. The compatibility of HTML5 is limited by the performance of major browsers. For example, there are many differences between Microsoft's IE and Fireforx.

 3. HTML5 requires a mature and complete development environment, which is currently lacking.

 4. With the rapid increase of HTML5 functions, the browser must have an efficient graphics engine and script engine.

 5. HTML5 needs a killer application to attract and guide users to upgrade their browsers, and ultimately complete the deployment of HTML5 terminals.


Continuing Learning
||
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>HTML5圆角例子</title> <style type="text/css"> body{ background-color: #000000; } div{ width: 100px; height: 100px; margin: 5px; border: 5px solid white; background-color: #efefef; } #dv-all{ border-radius:15px; -webkit-border-radius:15px; -moz-border-radius:15px; } #dv-top-left{ border-top-left-radius:15px; -webkit-border-top-radius:15px; -moz-border-top-radius:15px; } #dv-top-right{ border-top-right-radius:15px; -webkit-border-top-right-radius:15px; -moz-border-top-right-radius:15px; } #dv-bottom-left{ border-bottom-left-radius:15px; -webkit-border-bottom-left-radius:15px; -moz-border-bottom-left-radius:15px; } #dv-bottom-right{ border-bottom-right-radius:15px; -webkit-border-bottom-right-radius:15px; -moz-border-bottom-right-radius:15px; } </style> </head> <body> <div id="dv-all">全圆角例子</div> <div id="dv-top-left">左上圆角例子 </div> <div id="dv-top-right">右上圆角例子</div> <div id="dv-bottom-left">左下圆角例子</div> <div id="dv-bottom-right">右下圆角例子</div> </body> </html>
submitReset Code