To better handle today's internet use, HTML5 adds many new elements and features, such as: graphics rendering, multimedia content, better page structure, better form processing, and several api drag and drop elements, positioning, including web application cache, storage, networking and other workers
1, of the semantic tags
Semantic tag makes structured content pages, see to know the name of justice
| label | description |
| <hrader></header> | Defined in the head area of a document |
| <footer></footer> | It defines the tail area of the document |
| <nav></nav> | Navigation definition document |
| <section></section> | Defined in the document section (section, section) |
| <article></article> | Independent content area defined page |
| <aside></aside> | Sidebar content definitions page |
| <detailes></detailes> | Used to describe details of a part of the document or document |
| <summary></summary> | The title tag contains details of elements |
| <dialog></dialog> | Customize dialog box, such as the prompt box |
2, an enhanced form
HTML5 has several new input types Input Form. These new features provide better input control and verification
| Input Type |
description |
| color |
Mainly used for selecting color |
| date |
Selecting a date from a date picker |
| datetime |
Select a date (UTC time) |
| datetime-local |
Select a date and time (no time zone) |
| |
It contains input fields of the e-mail address |
| month |
Select a month |
| number |
Value input field |
| range |
Input field within a range of digital values |
| search |
Search for domain |
| tel |
Enter the phone number field definitions |
| time |
Select a time |
| url |
Enter the URL address field |
| week |
Select week and in |
The new HTML5 form attributes
placehoder property, a brief reminder before the user input value is displayed on the input field. That is our common default prompt input box, disappear after user input.
required attribute is a boolean attribute. Fill in the required input field can not be empty
pattern attribute describes a regular expression to verify a value <input> element.
min and max attribute, set minimum and maximum elements.
step attribute, the input field specifies the legal number intervals.
height and width, height and width of the image for image type <input> tag.
The autofocus attribute is a boolean attribute. Provisions when the page loads, the domain automatically gets the focus.
multiple attribute is a boolean attribute. Predetermined <input> element a plurality of selectable values
3, video and audio
HTML5 provides a standard play audio files that use the <audio> element
<audio Controls> <Source src = " horse.ogg " of the type = " audio / OGG " > <Source src = " horse.mp3 " of the type = " audio / mpeg " > Your browser does not support the audio element. </ audio>
property for added control play, pause and volume control.
In between the <audio> and </ audio> you need to insert browser does not support the prompt text <audio> element.
<Audio> element allows the use of multiple <source> element. <Source> element can link different audio file, the browser will use the first supported audio files
Currently, <audio> element supports three audio formats: MP3, Wav, and Ogg
HTML5 provides a standard way to include a video by the video element
<Video width = " 320 " height = " 240 " Controls> <Source src = " movie.mp4 " of the type = " Video / MP4 " > <Source src = " movie.ogg " of the type = " Video / OGG " > Your browser does not support Video label. </ video>
It provides control play, pause and volume controls to control the video. Dom may also be used to control the operation of the video playback is paused, such as play () and pause () methods.
Video elements while also providing width and height attributes control the size of the video. If you set the height and width of the required video space will be retained when the page loads. If you do not set these properties, the browser does not know the size of the video, browser, you can not reserve a specific space when loading, the page will vary depending on the size of the original video.
Inserted between the tag and the content is not available to support video elements displayed by the browser.
video element supports multiple source elements. elements can link to different video files. The browser will use the first recognizable format (MP4, WebM, and Ogg)
4, Canvas Drawing
The distinction between SVG and Canvas
SVG is a 2D graphics using XML description language.
Canvas to draw 2D graphics using JavaScript.
SVG based on XML, which means that each element in the SVG DOM is available. You can attach JavaScript event handlers for an element.
In SVG, each drawn figure is deemed objects. If the property SVG object changes, the browser can automatically reproduce graphics.
Canvas is a by-pixel rendering. In canvas, once the pattern is drawn is complete, it will not continue to be concerned about the browser. If the position is changed, then the whole scene also need to be redrawn, including any object that may have been overwritten graphics.
5, location
HTML5 Geolocation (geolocation) for positioning the user's location.
{window.navigator.geolocation
the getCurrentPosition: Fn for acquiring current position data of
watchPosition: fn monitoring user location changes
clearWatch: fn clear positioning monitoring
}
6, drag and drop API
Drag and drop is a common characteristic, that is, after crawling drag the object to another location. In HTML5, the drag is part of the standard, any element can drag and drop.
Drag and drop source object (may move occurred ) event that can be triggered - 3 :
dragstart: Drag the start
drag: drag in
dragend: Drag the end
Drag up the entire process: dragstart * 1 + drag * n + dragend * 1
Drag and drop the target objects (not moved ) events that can be triggered - 4 :
dragenter: Drag the entering
dragover: Drag the hover
dragleave: Drag the left
drop: release
Drag up the entire process 1: dragenter * 1 + dragover * n + dragleave * 1
Dragging the whole process consisting of 2: dragenter * 1 + dragover * n + drop * 1
Drag and drop process is divided into the source and target objects. The source object means that you are about to drag the elements, and the target object is to be placed means that after dragging a target location
7、Web Worker
8、Web Storage
Use HTML5 can view data in local storage of the user. Earlier, local storage using cookies. But Web security and storage needs more quickly. These data will not be stored on the server, but the data only for user data requests on the website. It can also store large amounts of data without affecting the performance of the site. Data as key / value pair is present, only the data of the web page using the page access.
Two data objects are stored in the client:
localStorage - no time limit data storage
sessionStorage - for a session of data storage, when the user closes the browser window, the data will be deleted.
Before using web storage, check browser support and localStorage sessionStorage