HTML5 Study Summary

Source: Internet
Author: User
Tags iso 8601 tag name

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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

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

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

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

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.