HTML5 Study Notes (1)

HTML5Introduction 

What isHTML5? 

L HTML5 is the next generation of HTML and will become a new standard for HTML, XHTML, and HTML Dom.

L The previous version of HTML was born in 1999. Since then, the web world has undergone great changes.

L HTML5 is still in progress. However, most modern browsers already have some HTML5 support.

 

HTML5How did we get started? 

HTML5 is the result of W3C cooperation with whatwg. Whatwg focuses on web forms and applications, while W3C focuses on XHTML 2.0. On April 9, 2006, the two sides decided to cooperate to create a new version of HTML.

(W3C refers to World Wide Web Consortium. Whatwg
Web hypertext Application Technology Working Group .)

Rules for HTML5:

L new features should be based on HTML, CSS, Dom, and JavaScript.

L reduce the demand for external plug-ins (such as flash)

L better error handling

L more Replace the script tag

L HTML5 should be independent of devices

L development process should be transparent to the public

 

New Features 

Some interesting new features in HTML5:

L Canvas elements used for painting

L video and audio elements used for media playback

L better support for local offline storage

L new special content elements, such as article, footer, header, NAV, and Section

L new form controls, such as calendar, date, time, email, URL, and search

 

Browser support 

The latest versions of safari, chrome, Firefox, and Opera support some HTML5 features. Internet Explorer

9. Some HTML5 features will be supported.

 

HTML5Video 

WebVideo on 

Until now, there is still no standard for displaying videos on webpages. Today, most videos are displayed through plug-ins (such as flash. However, not all browsers have the same plug-ins. HTML5 specifies a standard method to include videos through video elements.

 

Video Format
Currently, the video element supports two video formats:

Ogg-Ogg file with thedora video encoding and Vorbis Audio Encoding

MPEG4-MPEG4 files with H.264 video encoding and AAC audio encoding

 

How to work 

<Video src?#movie.ogg "controls =" controls ">

</Video>

The control attribute allows you to add playback, pause, and volume controls.

It is also a good idea to include the width and height attributes.

The content inserted between <video> and </video> is displayed by browsers that do not support video elements.

Example: 

<Video src?”movie.ogg "width =" 320 "Height =" 240 ″
Controls = "controls">

Your browser does not support
The video tag.

</Video>

The above example uses an Ogg file, which is applicable to Firefox, opera, and chrome browsers. Make sure that the video file type is MPEG4 for safari.

The video element allows multiple source elements. The source element can be used to link different video files. The browser uses the first identifiable format.

Example:

<Video width = "320" Height = "240" controls = "controls">

<Source src##movie.ogg"
Type = "video/Ogg">

<Source src##movie.mp4 ″
Type = "Video/MP4">

Your browser does not support the video
Tag.

</Video>

<Video> Tag attributes

Attribute	Description
Autoplay	Play the video immediately after it is ready.
Controls	Display controls (such as playback buttons) to users)
Height	Set the height of the video player.
Width	Set the width of the video player.
Loop	Play the media file again after it is played.
Preload	Video loading and preparation during page loading (this attribute is ignored if Autoplay is used)
SRC	URL of the video to be played

 

HTML5Audio

WebAudio on
Until now, there is still no standard for playing audio on the webpage. Today, most audios are played using plug-ins (such as flash. However, not all browsers have the same plug-ins. HTML5 specifies a standard method to include audio through the audio element. The audio element can play audio files or audio streams.

 

Audio Format 

Currently, the audio element supports three audio formats: Ogg Vorbis, MP3, and WAV.

 

How to work 

<Audio src=”song.ogg "controls =" controls ">

</Audio>
The control attribute allows you to add playback, pause, and volume controls.

The content inserted between <audio> and </audio> is displayed by browsers that do not support the audio element.

Example: 

<Audio src=”song.ogg "controls =" controls ">

Your browser does not support the audio
Tag.

</Audio>

The above example uses an Ogg file, which is applicable to Firefox, opera, and chrome browsers. Make sure that the audio file is MP3 or WAV in safari.

The audio element allows multiple source elements. The source element can be used to link different audio files. The browser uses the first recognizable format:

Example:

<Audio controls = "controls">

<Source src00000000song.ogg"
Type = "audio/Ogg">

<Source src00000000song.mp3 ″
Type = "audio/MPEG">

Your browser does not support the audio
Tag.

</Audio>

<Audio>Tag attributes 

Attribute	Description
Autoplay	Play the audio immediately after it is ready.
Controls	Display controls (such as playback buttons) to users)
Preload	Audio is loaded during page loading and preparation for playing (this attribute is ignored if Autoplay is used)
SRC	URL of the audio to be played

 

HTML5 WebStorage

Store data on the client

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

L localstorage-data storage without time restrictions

L sessionstorage-data storage for a session

Previously, these are all completed by cookies. However, cookies are not suitable for storing a large amount of data because they are transmitted by each request to the server, which makes the cookie speed slow and inefficient.

In HTML5, data is transmitted not by each server request, but only by the request. It makes it possible to store a large amount of data without affecting the website performance.

HTML5 uses JavaScript to store and access data. For different websites, data is stored in different regions, and a website can only access its own data.

 

LocalstorageMethod 

There is no time limit on the data stored by the localstorage method. Data is still available on the second day, the second week, or after the next year.

Create and access localstorage:

<SCRIPT type = "text/JavaScript">

Localstorage. lastname
= "Smith ";

Document. Write (localstorage. lastname );

</SCRIPT>

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

<SCRIPT type = "text/JavaScript">

If
(Localstorage. pagecount)

{

Localstorage. pagecount = Number (localstorage. pagecount)
+ 1;

}

Else

{

Localstorage. pagecount = 1;

}

Document. Write ("Visits
"+ Localstorage. pagecount +" time (s ).");

</SCRIPT>

 

SessionstorageMethod 

The sessionstorage method stores data for a session. When the user closes the browser window, the data will be deleted.

How to create and access a sessionstorage:

<SCRIPT type = "text/JavaScript">

Sessionstorage. lastname
= "Smith ";

Document. Write (sessionstorage. lastname );

</SCRIPT>

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

<SCRIPT type = "text/JavaScript">

If
(Sessionstorage. pagecount)

{

Sessionstorage. pagecount = Number (sessionstorage. pagecount)
+ 1;

}

Else

{

Sessionstorage. pagecount = 1;

}

Document. Write ("visits" + sessionstorage. pagecount +"
Time (s) This session .");

</SCRIPT>

HTML5NewInputType 

HTML5
It has multiple new form input types, providing better input control and verification.

 

InputType
-Email

The email type is used in the input domain that should contain the e-mail address. When a form is submitted, the value of the email field is automatically verified.

E-mail:
<Input type = "email" name = "user_email"/>

 

InputType-URL

The URL type is used in the input domain that should contain the URL address. When a form is submitted, the URL field value is automatically verified.

Homepage:
<Input type = "url" name = "user_url"/>

 

InputType
-Number

The number type is used in the input field that should contain numbers. You can also set limits on accepted numbers:

Points:
<Input type = "Number" name = "points" min = "1" max = "10"/>

Attribute	Description
Max	Maximum allowed
Min	Minimum value allowed
Step	Specify a valid number interval (if step = "3", the valid number is-3, 0, 3, 6, etc)
Value	Default Value

 

InputType
-Range

The range type is used in the input field that should contain numeric values within a certain range. The range type is displayed as a slide.

<Input
Type = "range" name = "points" min = "1" max = "10"/>

Attribute	Description
Max	Maximum allowed
Min	Minimum value allowed
Step	Specify a valid number interval (if step = "3", the valid number is-3, 0, 3, 6, etc)
Value	Default Value

 

InputType
-Date pickers(Data generator) 

HTML5 has multiple new input types available for Date and Time Selection:

Type	Description
Date	Select day, month, and year
Month	Select Month and year
Week	Week and year
Time	Select time (hours and minutes)
Datetime	Select time, day, month, and year (UTC time)
Datetime-Local	Select time, day, month, and year (local time)

Example: Date: <input type = "date" name = "user_date"/>

 

InputType
-Search

The search type is used to search domains, such as site search or Google
Search. The search domain is displayed as a regular text domain.