HTML5 Study Summary

Last Update:2016-04-13 Source: Internet

Author: User

Tags iso 8601 tag name

Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

HTML5 is the most dramatic leap in WEB development standards over the past decade. HTML5 is not just for web content, it brings the Web into a mature application platform, where video, audio, images, animations, and interactions with computers are standardized on the HTML5 platform.

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

HTML5 Browser Support:

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

1.HTML5 Introduction

HTML5 is the next important version of the HTML standard that replaces HTML 4.01,xhtml 1.0 and XHTML 1.1. HTML5 is also a standard for building and presenting content on the World Wide Web.

HTML5 is the product of collaboration between the World Wide Web Consortium and the Web Hypertext Technology Working Group (WHATWG).

This new standard adds features such as video playback and drag-and-drop, which in the past relied on third-party browser plugins, such as Adobe Flash,microsoft Silverlight and Google Gears.

Browser support

The latest version of Apple Safari,mozilla FireFox and Opera supports most HTML5 features, and IE9 also supports some HTML5 features.

The mobile browsers preinstalled on Iphones,ipads and Android phones all have good support for HTML5.

New features

HTML5 introduces many new elements and attributes to help us build modern websites. The following are the main features introduced by HTML5:

New semantic elements: such as
Form 2.0: Improved HTML Web forms, introducing some new properties for the <input> tag.
Persistent local storage: In order not to be implemented through a third-party plug-in.
WebSocket: Next-generation bidirectional communication technology for WEB applications.
Server Push event: HTML5 introduces events from a Web server to a Web browser, also known as a server push event (SSE).
Canvas: Supports the programming of two-dimensional drawings in JavaScript.
Audio and Video: Embed audio or video in a Web page without the use of a third-party plugin.
Geo-targeting: Users can choose to share their geographic location with our web pages.
Micro-data: allows us to create custom vocabularies outside of HTML5 and extend pages with custom semantics.
Drag and drop: Drag and drop items on the same page from one location to another.

Backwards compatible

HTML5 is designed to be backwards compatible with existing browsers as much as possible. The new features are built on existing features and allow us to provide alternative content for older browsers.

2.HTML5 syntax

HTML5 has "own" HTML syntax, which is compatible with HTML 4 and XHTML1 documents, but not the more complex SGML features in HTML 4.

HTML5 does not require a lowercase tag name in XHTML, a property must have a value and a syntax rule that must close all empty elements.

However, HTML5 is more flexible and supports the following forms:

The label name is capitalized.
The double quotation marks of the property are optional.
The property value is optional.
Closed empty elements are optional.

DOCTYPE

In older versions of HTML, DOCTYPE is very long, because the HTML language is SGML-based and needs to refer to a DTD.

HTML5 authors can use simple syntax to specify the following form of DOCTYPE:

<! DOCTYPE html>

　　The above syntax is case-insensitive.

Character encoding

HTML5 authors can use simple syntax to specify character encodings, as follows:

<meta charset= "UTF-8" >

<script> tags

It is common practice to add a type attribute with a value of "text/javascript" to the script element, as follows:

<script type= "Text/javascript" src= "Scriptfile.js" ></script>

HTML5 removed the additional information required, we can use the simple syntax shown below:

<script src= "Scriptfile.js" ></script>

<link> tags

So far we have written <link>:

<link rel= "stylesheet" type= "Text/css" href= "Stylefile.css" >

HTML5 removed the additional information required, we can use the simple syntax shown below:

<link rel= "stylesheet" href= "Stylefile.css" >

HTML5 elements

The HTML5 element uses a start tag and an end tag tag. Labels are qualified with the label name between the angle brackets.

The difference between the start tag and the end tag is that the label name contains a slash before it.

The following is an example of a HTML5 element:

<p>...</p>

HTML5 tag names are case-insensitive, can be capitalized or mixed, although the most common conventions are always lowercase.

Most elements contain some content, such as <p>...</p> contains a paragraph. However, some elements cannot contain arbitrary content, which is called a blank element. For example, Br,hr,link and meta and so on.

HTML5 Property

An element can contain an attribute (attributes), which is used to set various attributes (properties) for an element.

Some properties are defined as global and can be used on any element, while others are defined as element-specific. All properties have a name and a value, as shown in the following example.

Here is an example of using the HTML5 property, demonstrating how to tag a div element with a property named class and a value of "example":

<div class= "Example" >...</div>

Properties can only be specified in the start tag and must never be used in the end tag.

The HTML5 property is case-insensitive and can be capitalized or mixed, although the most common convention is to always use lowercase.

Here is a complete list of HTML5 properties.

HTML5 Documentation

To get a better structure, the following tags are introduced:

Section: This tag represents a common document or application stanza. It can be used with H1-H6 to represent the document structure.
Article: This tag represents a separate block of document content, such as a blog entry or article in a newspaper.
Aside: This tag represents a block of content that is slightly related to the rest of the page.
Header: This tag represents the head of a section.
Footer: This tag represents a footnote to a section that can contain information such as author, copyright, and so on.
Nav: This label represents the section used to navigate the document.
Dialog: This tag can be used to mark a session.
Figure: This tag can be used to correlate titles and certain embedded content, compared to tables and videos.

The markup for a HTML5 document looks like this:

<! DOCTYPE html>

To facilitate the learning of this concept-we can practice online.

3.HTML5 Property

As stated in the HTML5 syntax, an element can contain attributes (attributes) to set various attributes (properties) on an element.

Some properties are defined as global and can be used on any element, while others are defined as element-specific. All properties have a name and a value, as shown in the following example.

Here is an example of using the HTML5 property, demonstrating how to tag a div element with a property named class and a value of "example":

<div class= "Example" >...</div>

Properties can only be specified in the start tag and must never be used in the end tag.

The HTML5 property is case-insensitive and can be capitalized or mixed, although the most common convention is to always use lowercase

Property	Options	Function
AccessKey	User definable	Defines keyboard shortcuts for accessing elements.
Align	Right, left, center	Aligns the labels horizontally.
Background	Url	Sets a background image after the element.
BgColor	numeric, hexadecimal value, RGB value	Sets a background color after the element.
Class	User-defined.	Classifies an element to facilitate the use of cascading style sheets.
Contenteditable	True, False	Defines whether the user can edit the contents of an element.
ContextMenu	Menu ID	Defines a context menu for an element.
Data-xxxx	User-defined.	Custom properties. The author of an HTML document can define its own properties. Custom properties must begin with "data-".
Draggable	True,false, Auto	Defines whether the user can drag elements.
Height	numeric value	Defines the height of a table, image, or table cell.
Hidden	Hidden	Defines whether the element should be visible.
Id	User-defined.	Name elements to facilitate the use of cascading style sheets.
Item	The list of elements.	Used to combine elements.
Itemprop	The list of entries.	Used to combine entries.
SpellCheck	True, False	Defines whether the element must have a spelling or error check.
Style	CSS style sheet.	Defines an inline style for an element.
Subject	User-defined ID.	Defines the entry associated with the element.
TabIndex	Tab number	The tab order that is set for the element.
Title	User-defined.	The pop-up title of the element.
valign	Top, middle, bottom	The vertical alignment of the label within the HTML element.
Width	numeric value.	Defines the width of tables, images, and table cells.

For a complete list of HTML5 tags and related properties, refer to the HTML5 tab.

Custom properties

HTML5 also introduces a new feature, which is the ability to add custom data properties.

Custom data attributes start with data-and are named based on our requirements. Here's a simple example.

<div class= "Example" data-subject= "Physics" data-level= "complex" >...</div>

In the above example, two custom properties called Data-subject and data-level are fully valid in HTML5. We can also use JavaScript APIs or get their values in CSS in a manner similar to getting the standard properties.

4.HTML5 Events

When users visit our website, they will click on the text, images, links, hover over something and so on. These are examples of JavaScript invocation events.

We can write event handlers in JavaScript or VBScript, and then specify these event handlers as values for the event label properties. The various event properties defined by the HTML5 specification are listed below.

When any event occurs on a HTML5 element, the following properties can be used to trigger any JavaScript and VBScript code provided as a value.

Here we cover only element-specific events, which are discussed in detail in later chapters.

Properties	value	Description
Offline	Script	triggered when the document enters an offline state.
Onabort	Script	Triggered when an event is interrupted.
Onafterprint	Script	Triggered when the document is printed.
Onbeforeonload	Script	Triggered before the document is loaded.
Onbeforeprint	Script	Triggered before the document is printed.
Onblur	Script	triggered when the window loses focus.
Oncanplay	Script	The media stops buffering and can be triggered when playback starts.
Oncanplaythrough	Script	The media can be played to the end of the trigger without stopping buffering.
OnChange	Script	Triggered when the element is changed.
OnClick	Script	Mouse click Trigger.
OnContextMenu	Script	triggered when the context menu is triggered.
OnDblClick	Script	Triggered when the mouse is double-clicked.
Ondrag	Script	Triggered when the element is dragged.
Ondragend	Script	Triggered at the end of a drag operation.
OnDragEnter	Script	Triggered when the element is dragged to a valid drop target.
OnDragLeave	Script	Triggers when an element leaves a valid drop target.
OnDragOver	Script	Triggered when the element is dragged onto a valid target.
Ondragstart	Script	Triggered at the start of a drag operation.
OnDrop	Script	Triggered when the dragged element is placed.
Ondurationchange	Script	triggered when the media length changes.
Onemptied	Script	Triggered when a media resource element is suddenly emptied.
onended	Script	Triggered when the media reaches the end point.
OnError	Script	Triggered when an error occurs.
onfocus	Script	Triggered when the window gets focus.
Onformchange	Script	Triggered when the form changes.
Onforminput	Script	Triggered when the form gets user input.
Onhaschange	Script	triggered when the document changes.
Oninput	Script	Triggers when the element obtains user input.
Oninvalid	Script	triggered when an element fails.
OnKeyDown	Script	Triggered when the keyboard is pressed.
onkeypress	Script	Triggered when the keyboard is pressed and released.
OnKeyUp	Script	Triggered when the key is released.
OnLoad	Script	Triggered when the document is loaded.
Onloadeddata	Script	Triggered when media data is loaded.
Onloadedmetadata	Script	triggered when media data for a media element is loaded.
Onloadstart	Script	Triggered when the browser starts loading media data.
OnMessage	Script	Triggered when a message is triggered.
OnMouseDown	Script	triggered when the mouse button is pressed.
OnMouseMove	Script	triggered when the mouse pointer moves.
onmouseout	Script	triggered when the mouse pointer moves out of the element.
onmouseover	Script	triggered when the mouse pointer moves into an element.
OnMouseUp	Script	triggered when the mouse button is released.
OnMouseWheel	Script	triggered when the mouse wheel rotates.
Onoffline	Script	triggered when the document enters an offline state.
Onoine	Script	Triggered when the document is online.
Ononline	Script	Triggered when the document is online.
Onpagehide	Script	Triggered when the window is hidden.
Onpageshow	Script	triggered when the window becomes visible.
OnPause	Script	Triggered when media data is paused.
Onplay	Script	Triggered when media data starts to play.
Onplaying	Script	Triggered when media data is playing.
Onpopstate	Script	triggered when the window history information is changed.
OnProgress	Script	Triggered when the browser obtains media data.
Onratechange	Script	Triggered when the playback ratio of the media data changes.
onReadyStateChange	Script	Triggered when the ready-state changes.
Onredo	Script	Triggered when the document performs a redo operation.
OnResize	Script	triggered when the window size is resized.
Onscroll	Script	Triggered when the scrollbar of an element is scrolled.
Onseeked	Script	The seeking property of the media element is not triggered when it is true and ends.
Onseeking	Script	The seeking property of the media element is true and is triggered when seeking starts.
Onselect	Script	Triggered when the element is selected.
Onstalled	Script	Gets the media data triggered when an error occurs.
Onstorage	Script	Triggered when the document is loaded.
OnSubmit	Script	Triggered when the form is submitted.
Onsuspend	Script	The browser gets media data, but gets triggered when the entire media file is aborted.
Ontimeupdate	Script	triggered when the media playback position changes.
OnUndo	Script	Triggered when the document performs an undo operation.
OnUnload	Script	Triggered when the user leaves the document.
Onvolumechange	Script	Media volume changes, including triggered when set to mute.
Onwaiting	Script	The media stops playing while waiting for the recovery to trigger.

5.HTML5 Form 2.0

Web Form 2.0 is an extension of the HTML4 form attribute. The form elements and attributes in HTML5 provide a greater degree of semantic markup than HTML4, removing the tedious scripts and styles required in a large number of HTML4.

<input> elements in the HTML4

The HTML4 input box element uses the Type property to specify the data type. HTML4 provides the following types:

type
Text	A free-form text field, nominally without a line break.
Password	A free-form text field for sensitive information that does not have a line break on its name.
CheckBox	A set of 0 or more values in a predefined list.
Radio	One of the enumeration values.
Submit	A free form button to start the form.
File	Any file with a MIME type and an optional file name.
Image	The additional semantics of a coordinate relative to the size of a particular image is that it must be the last selected value while initiating the form submission.
Hidden	Any string that is not displayed to the user by default.
Select	The enumeration value, similar to the radio type.
TextArea	Free form of text field, nominally without the restriction of line wrapping.
button	Free Form button that can start any event related to the button.

Here's a simple example of using label labels, radio buttons, and Submit buttons:

... <form action= "http://example.com/cgiscript.pl" method= "POST" >    <p> <label for=    "FirstName ">first Name: </label>              <input type=" text "id=" FirstName "><br/>    <label for=" LastName ">last Name: </label>              <input type=" text "id=" LastName "><br/>    <label for=" Email "> Email: </label>              <input type= "text" id= "email" ><br>    <input type= "Radio" name= "Sex" value = "Male" > male<br>    <input type= "Radio" name= "Sex" value= "female" > female<br>    <input Type= "Submit" value= "send" > <input type= "reset" >    </p> </form> ...

<input> elements in the HTML5

In addition to the attributes mentioned above, HTML5 introduces several new values to the Type property of the input box element. As listed in the following table.

Note: Please use the latest version of Opera browser to run all of the following examples.

type	Description
Datetime	According to the ISO 8601 encoding, the time zone is set to UTC for the date and time (including year, month, day, hour, minute, second, seconds).
Datetime-local	Date and time encoded in accordance with ISO 8601 (including year, month, day, hour, minute, second, seconds), without time zone information.
Date	Date encoded in accordance with ISO 8601 (including year, month, day).
Month	The date of the year and month that is encoded by ISO 8601.
Week	The date of the year and Day of the week encoded by ISO 8601.
Time	Encode time according to ISO 8601 (including hour, minute, second, and seconds).
Number	Only values are accepted. The Step property can specify the precision, which defaults to 1.
Range	The range type applies to input fields that should contain values in a range.
Email	Only mailbox values are accepted. This type applies to input fields that should contain an e-mail address. If you attempt to submit a simple text, it will force a request to enter an email address in [email protected] format.
Url	Only URL values are accepted. This type applies to input fields that should contain a URL address. If you attempt to submit a simple text, it will force a request to enter a URL address in http://www.example.com or http://example.com format.

<output> elements

HTML5 also introduces a new element <output>, which is used to represent different types of output, such as the output written by the script.

You can also use the For property to specify the relationship between the output element and other elements in the document that affect the calculation (for example, as an input source or parameter). The value of the For property is a list of IDs for other elements separated by spaces.

Easy to learn this concept-please practice online.

Placeholder Property

HTML5 introduces a new attribute called Palceholder. This property provides the user with hints on what to enter in this field on the <input> and <textarea> elements. Placeholder characters cannot contain carriage returns or line feeds.

The following is a simple syntax for the placeholder property:

<input type= "text" name= "search" placeholder= "search the Web"/>

This property is only available with the latest version of Mozilla,safari and Chrome browser support.

Easy to learn this concept-please practice online.

Required Property

Now, we do not need to use JavaScript to handle such client validation as an empty text box can never be committed, because HTML5 introduces a new property called required, which is used as follows, which guarantees that the input box has a value:

<input type= "text" name= "search" required/>

This property is only available with the latest version of Mozilla,safari and Chrome browser support.

HTML5 Study Summary

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More