HTML5 's basic content is excerpted from the

HTML5 Tutorial (excerpt from the School) HTML 5 Introduction ( HTML5 is the next generation of HTMLWhat is HTML5?

• HTML5 will be the new standard for HTML, XHTML, and HTML DOM.
• The last version of HTML was born in 1999. Since then, the Web world has undergone great changes.
• HTML5 is still in perfect. However, most modern browsers already have some HTML5 support.

How did the HTML5 start?

HTML5 is the result of the cooperation between the WHATWG and the consortium.

Editor's note: World Wide Web Consortium, www Alliance.

Editor's note: WHATWG refers to the Web Hypertext application Technology working Group.

WHATWG is dedicated to Web forms and applications, while the website focuses on XHTML 2.0. In 2006, the two sides decided to work together to create a new version of HTML.

Some of the rules established for HTML5:

• The new features should be based on HTML, CSS, DOM, and JavaScript.
• Reduce the need for external plug-ins (such as Flash)
• Better error handling
• More tags for replacing scripts
• HTML5 should be independent of the device
• The development process should be transparent to the public

New features

Some interesting new features in HTML5:

• Canvas Elements for painting
• Video and audio elements for media playback
• Better support for local off-line storage
• New special content elements such as article, footer, header, nav, section
• New form controls, such as Calendar, date, time, email, url, search

Video on the HTML 5 video web

Until now, there is still no standard for displaying video on a Web page. Today, most videos are displayed via plugins (such as Flash). However, not all browsers have the same plugin. HTML5 provides a standard way to include video through the visual element.

Video format (currently, the video element supports both formats)

OGG = Ogg file with Thedora video encoding and Vorbis audio encoding

MPEG4 = MPEG 4 file with H + video encoding and AAC audio encoding

How it works

The control property is used to add play, pause, and volume controls. It's also a good idea to include width and height attributes. The content inserted between <video> and </video> is displayed for browsers that do not support the video element:

The above example uses an Ogg file for Firefox, Opera, and Chrome. To ensure that the video file must be of type MPEG4 for Safari browser. The video element allows multiple source elements. The source element can link different video files. The browser will use the first recognizable format:

Internet Explorer

Internet Explorer 8 does not support video elements. In IE 9, support for video elements that use MPEG4 is provided.

Properties of the <video> tag

Audio on the HTML 5 audio web

Until now, there is still no standard for playing audio on a Web page. Today, most audio is played through plugins (such as Flash). However, not all browsers have the same plugin. HTML5 provides a standard way to include audio through the sound element. The audio element can play a sound file or audio stream.

Video format (currently, the audio element supports three different formats)

How it works

Very similar to the code for video playback:

Internet Explorer

The audio element is not supported in Internet Explorer 8. In IE 9, support for the audio element is provided.

Properties of the <audio> tag

HTML 5 Canvas What is canvas?

The HTML5 canvas element uses JavaScript to draw an image on a Web page. The canvas is a rectangular area where you can control each pixel. Canvas has several ways to draw paths, rectangles, circles, characters, and add images.

Create a Canvas element

Add a canvas element to the HTML5 page. Specify the ID, width, and height of the element:

<canvas id= "MyCanvas" width= "height=" ></canvas>

Using JavaScript to draw

The canvas element itself is not capable of drawing. All the drawing work must be done inside JavaScript:

Understanding coordinates

The FillRect method above has parameters (0,0,150,75). This means: Draw the 150x75 rectangle on the canvas, starting at the top left corner (0,0). As shown, the X and Y coordinates of the canvas are used to position the drawing on the canvas.

More Canvas instances

The following are more examples of painting on a canvas element:

Instance-line

Draw a line by specifying where to start and where to end it:

Example-round

Draw a circle by stipulating the size, color, and position:

Instance-Gradient

Use the color you specify to draw the gradient background:

Instance-image

Place an image on the canvas:

HTML 5 Web Storage stores data on the client

HTML5 provides two new ways to store data on the client:

• Localstorage-Data storage with no time limit
• Sessionstorage-Data storage for a session

Previously, these were all done by cookies. However, cookies are not suitable for storing large amounts of data because they are passed by each request to the server, which makes the cookie slow and inefficient.

In HTML5, the data is not passed by each server request, but only when the data is used on the request. It makes it possible to store large amounts of data without compromising site performance.

For different sites, the data is stored in different regions, and a Web site can only access its own data.

HTML5 uses JavaScript to store and access data.

Localstorage method

The data stored by the Localstorage method has no time limit. Data is still available after the second, second, or next year.

The following example counts the number of times a user accesses a page:

Sessionstorage method

The Sessionstorage method stores data for a session. When the user closes the browser window, the data is deleted.

How to create and access a sessionstorage:

The following example counts the number of times a user accesses a page in the current session:

HTML5 input type HTML5 new input type

HTML5 has a number of new form input types. These new features provide better input control and validation. This chapter provides a comprehensive overview of these new input types:

• Email
• Url
• Number
• Range
• Date pickers (date, month, week, Time, DateTime, datetime-local)
• Search
• Color

Browser support

Opera has the best support for the new input type. However, you can already use them in all major browsers. Even if it is not supported, it can still be displayed as a regular text field.

Input Type-Email

The email type is used for input fields that should contain e-mail addresses. when the form is submitted, the value of the email domain is automatically validated .

e-mail: <input type="email" name= "User_email"/>

Tip: The Safari browser in the IPhone supports the email input type and works with it by changing the touch-Screen Keyboard (add @ and. com options).

Input Type-URL

The URL type is used for the input domain that should contain the URL address. When the form is submitted, the value of the URL field is automatically validated.

homepage: <input type="url" name= "User_url"/>

Tip: The Safari browser in the iPhone supports the URL input type and works with it by changing the touch-screen Keyboard (adding. com options).

Input Type-Number

The number type is used for input fields that should contain numeric values. You can also set a limit on the number of accepted numbers:

Points: <input type="number" name= "Points" min= "1" max= "

/>"

Tip: The Safari browser in the IPhone supports the number input type and works with it by changing the touch-screen keyboard (displaying numbers).

Use the following properties to specify the qualification for numeric types:

Input Type-Range

The range type is used for input fields that should contain numeric values in a range. The range type is displayed as a slider bar. You can also set a limit on the number of accepted numbers:

<input type="range" name= "points" min= "1" max= "

/>"

Input Type-Date pickers (data inspector)

HTML5 has several new input types that can be selected for the date and time:

• Date-Select day, month, year
• Month-Select months, years
• Week-Select minute
• Time-Select the Times (hours and minutes)
• DateTime-Select time, day, month, year (UTC time)
• Datetime-local-Select time, day, month, year (local time)

The following example allows you to select a date from the calendar:

Date: <input type="date" name= "User_date"/>

Input Type-Search

The search type is used for searching domains, such as site search or Google search. The search field appears as a regular text field.

HTML5 new form elements for table cell HTML5:

HTML5 has several elements and attributes that involve forms. This chapter describes the following new form elements:

• DataList
• Keygen
• Output

Browser support

DataList elements

The DataList element specifies a list of options for the input field. The list is created by the option element within DataList. To bind DataList to an input field, refer to the ID of DataList with the list property of the input field:

Webpage: <input type= "url" list= "url_list" name= "link"/>

<datalist id="url_list">

<option label= "W3school" value= "http://www.W3School.com.cn"/>

<option label= "Google" value= "http://www.google.com"/>

<option label= "Microsoft" value= "http://www.microsoft.com"/>

</datalist>

Tip: The option element is always set to the Value property.

Keygen elements

The role of the keygen element is to provide a reliable way to authenticate users. The keygen element is a key pair generator (Key-pair generator).

When the form is submitted, two keys are generated, one is the private key, and one is the 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 later authenticate the user's client certificate (certificate).

Currently, the browser's poor support for this element is not enough to make it a useful security standard.

<form action= "demo_form.asp" method= "Get" >
Username: <input type= "text" name= "Usr_name"/>
Encryption: <keygen name="security" />
<input type= "Submit"/>
</form>

Output element

The output element is used for different types of outputs, such as calculations or script output:

<output id= "result" onforminput= "Rescalc ()" ></output>

HTML5 Form Properties HTML5 New Form Properties: This chapter explains the new properties that involve <form> and <input> elements. The new form property:

• AutoComplete
• Novalidate

The new input property:

• AutoComplete
• Autofocus
• Form
• Form overrides (FormAction, Formenctype, FormMethod, Formnovalidate, Formtarget)
• Height and width
• List
• MIN, Max and step
• Multiple
• Pattern (regexp)
• Placeholder
• Required

Browser support

AutoComplete property

The AutoComplete property specifies that the form or input field should have auto-complete functionality.

Note: AutoComplete applies to <form> tags, as well as the following types of <input> tags: text, search, URL, telephone, email, password, datepickers, R Ange and color.

When the user starts typing in the AutoComplete field, the browser should display the fill-in options in that field:

<form action= "demo_form.asp" method= "get" autocomplete="on" >
First Name: <input type= "text" name= "fname"/><br/>
Last Name: <input type= "text" name= "lname"/><br/>
E-mail: <input type= "email" name= "email" autocomplete="off" /><br/>
<input type= "Submit"/>
</form>
Note: In some browsers, you may need to enable the AutoComplete feature to make this property effective.

Autofocus Property

The Autofocus property specifies that when the page loads, the domain automatically gets the focus, and the autofocus property applies to all <input> label types.

User Name: <input type= "text" name= "user_name" autofocus="autofocus" />

Form Property

The form property specifies the form or forms to which the input field belongs, and the form property applies to all types of <input> tags, and the form property must refer to the ID of the owning form.

<form action= "demo_form.asp" method= "Get" id= "User_form" >
First Name:<input type= "text" name= "FName"/>
<input type= "Submit"/>
</form>
Last Name: <input type= "text" name= "lname" form="user_form" />
Note: If you want to refer to more than one form, use a space-delimited list.

Form Override Properties

The form Override property (form override attributes) allows you to override some of the property settings of a FORM element.

• FormAction-Override the form's Action property
• Formenctype-Rewrite the Enctype property of the form
• FormMethod-Override the form's Method property
• Formnovalidate-Rewrite the Novalidate property of the form
• Formtarget-Override the target property of the form

Note: Form override properties apply to the following types of <input> tags: submit and image.

<form action= "demo_form.asp" method= "Get" id= "User_form" >
E-mail: <input type= "Email" name= "userid"/><br/>
<input type= "Submit" value= "Submit"/>
<br/>
<input type= "Submit" formaction="demo_admin.asp" value= "submit as admin"/>
<br/>
<input type= "Submit" formnovalidate="true" value= "submit without Validation"/>
<br/>
</form>
Note: These properties are useful for creating different submit buttons.

Height and Width properties

The Height and Width properties specify the image heights and widths for the input label of the image type. the height and Width properties apply only to the <input> label of the image type .

<input type= "image" Src= "Img_submit.gif" width="99" height="99" />

List Property

The List property specifies the DataList of the input domain. DataList is a list of options for the input domain.

Note: The List property applies to the following types of <input> tags: text, search, URL, telephone, email, date pickers, number, range, and color.

webpage: <input type= "url" list="url_list" name= "link"/>
<datalist id= "Url_list" >
<option label= "W3Schools" value= "http://www.w3school.com.cn"/>
<option label= "Google" value= "http://www.google.com"/>
<option label= "Microsoft" value= "http://www.microsoft.com"/>
</datalist>

Min, max, and step properties

The Min, max, and step properties are used to specify a qualification (constraint) for input types that contain numbers or dates.

The Max property specifies the maximum allowable value for the input field.

The Min property specifies the minimum allowable value for the input field.

The Step property specifies a valid number interval for the input field (if step= "3", the legal number is -3,0,3,6, etc.).

Note: the Min, Max, and step properties apply to the following types of <input> tags: date pickers, number, and range.

The following example shows a numeric field that accepts a value between 0 and 10 with a stepping of 3 (that is, a valid value of 0, 3, 6, and 9):

Points: <input type= "number" name= "Points min="0" max="10" " step="3"/>

Multiple Property

The Multiple property specifies that multiple values can be selected in the input field.

Note: The Multiple property applies to the following types of <input> tags: email and file.

Select images: <input type= "file" Name= "img" multiple="multiple" />

Novalidate Property

The Novalidate property specifies that the form or input field should not be validated when the forms are submitted.

Note: The Novalidate property applies to <form> and the following types of <input> tags: text, search, URL, telephone, email, password, date pickers, ran GE and color.

<form action= "demo_form.asp" method= "get" novalidate="true" >
E-mail: <input type= "Email" name= "User_email"/>
<input type= "Submit"/>
</form>

Pattern Property

The Pattern property specifies the mode (pattern) used to validate the input field.

pattern is a regular expression .

Note: The pattern attribute applies to the following types of <input> tags: text, search, URL, telephone, email, and password.

The following example shows a text field (with no numbers and special characters) that can contain only three letters:

Country code: <input type= "text" Name= "Country_code"
pattern="[A-z]{3}"title= "Three letter country code"/>

Placeholder Property

The placeholder property provides a hint (hint) describing the value that the input field expects.

Note: The placeholder property applies to the following types of <input> tags: text, search, URL, telephone, email, and password.

The hint (hint) appears when the input field is empty and disappears when the input field gets focus:

<input type= "search" name= "User_search" placeholder="Search W3School" />

Required Property

The Required property specifies that the input field must be filled in before submission (cannot be empty).

Note: The Required property applies to the following types of <input> tags: text, search, URL, telephone, email, password, date pickers, number, checkbox, Rad Io and file.

Name: <input type= "text" name= "Usr_name" required="required" />

HTML 5 Tags

Please refer to the HTML5 Help manual for version support, new and old obsolescence of the label.

HTML 5 Standard Properties

NEW: The standard properties in HTML 5.

Note : HTML 4.01 no longer supports the AccessKey property.

HTML 5 Event Properties Standard Event Properties

HTML 4 adds the ability to trigger behavior in the browser through events, such as when a user clicks on an element to start a JavaScript. The following table lists the standard event properties that can be inserted into an HTML 5 element to define event behavior.

Window Event Properties

Event triggered by Window object, for <body> tags:

Form Events

An event that is triggered by an action inside an HTML form. Applies to all HTML 5 elements, but is most commonly used in form elements:

Keyboard events

Events triggered by the keyboard. Applies to all HTML 5 elements:

Mouse events

Event triggered by a user action similar to a mouse item. Applies to all HTML 5 elements:

Media events

Events triggered by media such as video, image, and audio. Applies to all HTML 5 elements, but is most commonly used in media elements such as audio, Embed, IMG, object, and Video:

HTML5 's basic content is excerpted from the