Deep analysis of html5__html

Deep analysis of HTML5

HTML5, I believe we are no longer unfamiliar with this term. HTML5 is the most dramatic leap in WEB standards in nearly a decade. Unlike previous versions, HTML5 is not just used to represent web content, it aims to bring the Web into a sophisticated application platform where video, audio, graphics, animations, and interactions with computers are standardized. Although HTML5 's implementation still has a long way to go, HTML5 is changing the Web.

As a new generation of HTML standards, HTML5 not only strengthens the performance of Web pages, but also appends the functions of Web applications such as local databases. Although the HTML5 standard is still in perfect. However, most new versions of browsers have been able to support some of the HTML5 features. The features described by the HTML5 standard are very powerful, such as: it provides some new elements and attributes, such as (site navigation block) and so on, this kind of label will be advantageous to search engine's index collation. Also, adding a lot of new JavaScript objects and methods allows us to develop more powerful Web applications based on more interface APIs. This article will focus on the various conveniences that HTML5 brings to web development engineers and some of its usage techniques.
HTML5 Introduction

Since the release of HTML 4.01 in December 1999, subsequent HTML5 and other standards have been shelved and, in order to drive the development of the Web Standardization campaign, some companies have banded together to set up an organization called the Web Hypertext Technology Working Group-WHATWG, which has an organization for HTML The development of 5 plays a vital role. HTML5, formerly known as WEB Applications 1.0, was proposed by WHATWG in 2004 and was accepted by the consortium in 2007 to set up a new HTML team. HTML5 's first official draft, published on January 22, 2008, has two main features: first, it strengthens the performance of Web pages. Secondly, the functions of WEB applications such as local database are appended. HTML5 is about to become the new standard for HTML, XHTML, and HTML DOM, and while HTML5 is still in perfect form, most modern browsers already have some HTML5 support, so the HTML5 outlook is promising.

Back to the top of the page
HTML5 new elements

One of the biggest features of HTML5 is that it provides a lot of new elements that are quite powerful and very much in line with our daily development needs. Before we spent a lot of effort to write some of the controls, such as: Date control, progress bar control, etc., has been HTML5 support. In the next sections, we'll look at some of the more commonly used elements in WEB development and delve into their various properties and features.
New form elements, attributes, and events

HTML5 has more than one new form input type. These new features provide better input control and validation. To see a simple example:
Listing 1. Simple email, url example

Here is a simple email, url input box using the example, visible, we only need to set his type attribute. If set to email, the browser verifies that his input is valid (must be in message format), as shown in the following figure: (Support browser firefox,chrome and Opera)
Figure 1. Email input Box diagram
Figure 1. Email input Box diagram

The Email input box also supports multiple input, which can be separated by "," and the browser will verify the separated strings separately.

Let's go a little deeper, the following is a regular expression that the browser verifies to be equivalent:

"/^[a-za-z0-9.! #%& ' *+/=?^_ ' {|} ~-]+@[a-za-z0-9-]+ (?: \. [a-za-z0-9-]+) * * "

This validation can take a lot of time if we do it ourselves, and it will not perform well. Fortunately: with the continuous improvement of the major browsers, more and more better support HTML5, in the near future, we will not have to consider how to do these validation.

Similarly, the "url" type is also. This saves a lot of validation code and is extremely handy to use.

Let's look at the example of a digital input box:
Listing 2. Simple number, Range sample

The step here represents the specified legal number interval. Their effects are shown as follows: (Support browser Chrome,safari and Opera)
Figure 2. Number and Range input box diagram
Figure 2. Number and Range input box diagram

These digital input controls are easy to use and very intuitive, because the built-in control, we do not have to worry about the performance of the problem, so we strongly recommend that you try.

Let's look at two more widely used controls-date and time. HTML5 has multiple new input types available for selecting dates and times:

Date-Select day, month, year

Month-Select month, year

Week-Select Zhou

Time-Select times (Hours and minutes)

DateTime-Select time, day, month, year (UTC time)

Datetime-local-Select time, day, month, year (local time)

See the following example:
Listing 3. Date and time input boxes

The use is still simple, you can see the following effects: (Support browser Chrome,safari and Opera)
Figure 3. Date and time input box diagram
Figure 3. Date and time input box diagram

As shown in Figure 3, here is a list of the effects of the Select Month (Month) and time plus date (DateTime). These are some of the built-in controls that need no extra development. In addition, there are "datatime-local" type, specifically for different countries to achieve localization, the function is quite perfect.

There is also the search control, which is designed to appear on the page as a box of text, with the same style as the TextBox. These simple new input controls are easy to use and perform fairly high performance.

Take a look at a slightly more complex control: A list of data, called "DataList" in HTML5, to display list data, similar to a simple select control. This control is simple, clear, easy to select, and supports input, and is gaining popularity in today's Web development, as the following example:
Listing 4. Datalist Control

Visible, the DataList control is similar to a select, see the following effect: (Support browser firefox,chrome and Opera)
Figure 4. Datalist diagram
Figure 4. Datalist diagram

When we enter, he will automatically eject the alternative, the control is very user-friendly, the user experience is excellent.

Looking at the keygen element, the role of the keygen element is to provide a reliable way to authenticate the user. The keygen element is the key pair generator (Key-pair generator). When the form is submitted, two keys are generated, one is the private key, the other is a public key. The private key is stored on the client and the public key is sent to the server. The public key can be used to authenticate the user's client-side certificate (certificate).
Listing 5. Keygen element

Username:
Encryption:

Here we add a Keygen control with "name" as "security", and when the form is submitted, the browser prompts you for a password to ensure that it is submitted securely, as shown in the following illustration: (Support browser Firefox,chrome,safari and Opera)
Figure 5. Form contains Keygen elements
Figure 5. Form contains Keygen elements

As shown in Figure 5, when you click "Submit", the "Password" dialog box pops up. With very simple code, we can implement a secure form submission.

Currently, there are not many browsers supporting this element, but I believe that the major browser vendors also want to complete the HTML5 fully supported the goal.

Finally, let's look at the output element, which is very simple and is specifically for output, as shown in the following example:
Listing 6. Output element

function Rescalc ()
{
Numa=document.getelementbyid ("Num_a"). Value;
Numb=document.getelementbyid ("Num_b"). Value;
document.getElementById ("Result"). Value=number (NumA) +number (NumB);
}

+
=

Here we use "onforminput" to listen for form input events, display output by assigning values to the "value" attribute of the output element, and the code is concise and easy to understand. (Support browser Firefox,chrome,safari and Opera)

Before we introduce the new form-related elements, let's take a look at some of the new element attributes. The new attributes mentioned in HTML5 are very numerous, and these properties control many very useful functions, such as: AutoComplete (auto complement), required (not empty), placeholder (prompt), and so on, autofocus, list, Min, Max, pattern, novalidate and so on. Here we will introduce:
Listing 7. AutoComplete Property Code Example

The name:

Last Name:

E-Mail:

If we set the "AutoComplete" property to "on", then when the user starts typing in the Auto completion field, the browser displays the Fill option in that field. See Figure 6: (Support browser Ie9,firefox,chrome,safari and Opera)
Figure 6. AutoComplete diagram effect
Figure 6. AutoComplete diagram effect

Let's take a look at some special properties about form: Form rewrite properties. The form rewrite property (form override attributes) allows you to override certain property settings for a FORM element.

The form overrides properties are as follows:

FormAction-Override the form's Action property
Formenctype-Override the form's Enctype property
FormMethod-Override form's Method property
formnovalidate-Rewrite the form Novalidate Property
Formtarget-Overrides the target property of the form

When overridden, the Form executes according to the schema that you rewrite. Refer to the following code:
Listing 8. Form Override Properties

E-Mail: