New HTML5 features

1. Some rules 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 replace script Markup
HTML5 should be independent of devices
Development process should be transparent to the public
2. Some interesting new features in HTML5:
Canvas elements used for painting
Video and audio elements used for media playback
Better support for local offline storage
New special content elements, such as article, footer, header, nav, section
New Form controls, such as calendar, date, time, email, url, and search
3. HTML5 -Use DOM for control
4. HTML5 specifies a standard method to include audio through the audio element. The audio element can play audio files or audio streams.
5. Drag and drop ):
Ondragstart, setData (), ondragover, ondrop
6. the canvas element is used to draw images on a webpage. It has multiple ways to draw paths, rectangles, circles, characters, and add images: lines, circles, gradients, and images.
7. HTML5 supports inline SVG. What is SVG?
SVG refers to Scalable Vector Graphics)
SVG is used to define vector-Based Graphics for Networks
SVG defines images in XML format
There is no loss in the image quality of SVG images when they are enlarged or changed.
SVG is the standard of the World Wide Web Alliance
Compared with other image formats (such as JPEG and GIF), the advantages of using SVG are:
SVG images can be created and modified in a text editor
SVG images can be searched, indexed, scripted, or compressed
SVG is scalable
SVG images can be printed with high quality at any resolution
SVG can be amplified without decreasing the image quality
8. The following table lists some differences between canvas and SVG.
Canvas
Dependency resolution
Event processor not supported
Weak text rendering capability
The result image can be saved in. png or. jpg format.
Most Suitable for image-intensive games, many of which are frequently repainted
SVG
Resolution independent
Event processor supported
Most suitable for applications with large rendering areas (such as Google Maps)
High complexity slows down the rendering speed (any application that excessively uses DOM is not fast)
Not suitable for game applications
9. HTML5 provides two new methods to store data on the client:
LocalStorage-data storage with no time limit
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.
10. HTML5 introduces application caching, which means that web applications can be cached and accessed when there is no Internet connection.
Application caching brings three advantages to applications:
Offline browsing-users can use them when the application is offline
Speed-cached resources are loaded faster
Server Load Reduction-the browser will only download updated or changed resources from the server
To enable application caching, go toThe tag contains the manifest attribute.
The manifest file must be configured with the correct MIME-type, that is, "text/cache-manifest ". Must be configured on the web Server
11. When a script is executed on an HTML page, the page status does not respond until the script is complete.
Web worker is a JavaScript running in the background, independent of other scripts, and does not affect the page performance. You can continue to do anything you want: Click, select content, and so on. At this time, web worker runs in the background.
12. The HTML5 server sends an event (server-sent event) to allow the webpage to obtain updates from the server.
Server-Sent event-one-way message transmission
Server-Sent events indicate that the webpage automatically obtains updates from the Server.
13. HTML5 has multiple new form input types. These new features provide better input control and verification.
Email
Url
Number
Range
Date pickers (date, month, week, time, datetime, datetime-local)
Search
Color
14. New HTML5 form elements
Datalist: list of options for the input field specified by the element
Keygen: provides a way to verify user Reliability
Output: used for different types of output, such as computing or Script output.
15. New HTML5 form attributes
New form attributes:
Autocomplete
Novalidate
New input attributes:
Autocomplete
Autofocus
Form
Form overrides (formaction, formenctype, formmethod, formnovalidate, formtarget)
Height and width
List
Min, max, and step
Multiple
Pattern (regexp)
Placeholder
Required