Shulou(Shulou.com)06/02 Report--

This article mainly introduces "what functions html5 has". In daily operation, I believe many people have doubts about what functions html5 has. The editor consulted all kinds of materials and sorted out simple and easy-to-use methods of operation. I hope it will be helpful for you to answer the doubts about "what functions html5 has?" Next, please follow the editor to study!

Html5 features: 1, the new graphics library, can make the website content more rich; 2, more convenient multimedia content; 3, geographical location; 4, drag and drop function; 5, desktop notification; 6, offline and storage; 7, performance and integration; 8, device access; 9, style design.

The operating environment of this tutorial: windows7 system, HTML5 version, Dell G3 computer.

Features of html5

1. New graphics library:

HTML5 introduces Canvas and WebGL function libraries to make the site more content-rich. The WebGL library, in particular, can almost change the rules of the game in this field. Just look at the scene of the famous Thor Hammer II game, which is developed entirely in HTML5. To me, this represents a new era and allows people to imagine how games will be played in the future.

2. More convenient multimedia content:

If you have ever designed a website that needs to contain a lot of audio and video content, you will know the feeling of bulkiness. It often takes a bunch of Flash plus and tags to get the effect you want. But you don't have to bother anymore. HTML5 introduces easy-to-use and tags, so it's easier than ever to add multimedia content to your site. Because of this feature, many online video sites have begun to move to HTML5.

3. Geographical location:

People use the Internet less and less through desktops or even laptops. Today, many people browse the Internet through handheld mobile devices, such as smartphones and tablets. At present, this mobile network access feature, coupled with the new geolocation function in HTML5, has created numerous new possibilities. When users visit your site, they can know their exact location, so that you can provide personalized content to suit your environment. For example, when you visit a website related to an outing, you can provide information about itinerary planning if you find yourself in a downtown area, but if you visit the site in a suburban location, the interactive map function will be displayed by default.

4. Drag and drop function:

This is a slight change, but it is very important. The drag-and-drop function allows you to drag and drop browser content directly to your computer, or from your computer to your browser. It's really an epoch-making change, isn't it? Let's take a look at this show. think about it. If a social networking site has such a function, when you come back from your vacation, you can easily choose your holiday photos, drag them to your browser, and share them with your friends online immediately. This is the only way

It's the way I want to interact with the website!

5. Desktop notification:

Desktop notifications are small pop-ups that appear outside the browser to interact with the site even when the user is not browsing the site. Currently, this feature is only available in Google Chrome browsers, and you can see the display here. These notifications are ideal for email notifications, social network updates, Weibo messages, and other services. Combined with drag-and-drop functionality, it really weakens the difference between online and local applications.

6. Offline and Stora

Offline resources: application caching. Firefox fully supports the HTML5 offline resource specification. Most others provide only some degree of support for offline resources.

Online and offline events. Firefox 3 supports WHATWG online and offline events, which allows applications and extensions to detect the existence of available network connections and to perceive them when connections are established and disconnected.

WHATWG client sessions and persistent storage (aka DOM storage). Client-side sessions and persistent storage enable web applications to store structured data on the client.

IndexedDB . Is an Web standard for storing large amounts of structured data in browsers and for high-performance retrieval using indexes on that data.

Use files from web applications. Support for the new HTML5 file API has been added to Gecko so that Web applications can access local files selected by the user. This includes support for multi-file selection with the new multiple attribute of elements using type file. And FileReader.

7. Performance and integration

Web Workers . JavaScript calculations can be delegated to background threads to prevent interactive events from becoming slow by allowing these activities.

XMLHttpRequest Level 2 . Allows parts of the page to be read asynchronously, allowing it to display dynamic content, depending on time and user behavior. This is the technology behind Ajax.

Real-time compiled JavaScript engine. The new generation of JavaScript engine is more powerful and outstanding.

History API . Allows manipulation of browser history. This is especially useful for pages that interactively load new information.

ConentEditable attribute: change your website to wiki! HTML5 has standardized the contentEditable attribute. Learn more about this feature.

Drag and drop. HTML5's drag-and-drop API supports drag-and-drop items within and between sites. It also provides a simpler API for extended and Mozilla-based applications.

Focus management in HTML. New HTML5 activeElement and hasFocus properties are supported.

Protocol handler based on Web. You can now use the navigator.registerProtocolHandler () method to register the web application as a protocol handler.

RequestAnimationFrame . Allows you to control animation rendering for better performance.

Full screen API. Controls the use of the entire screen for a web page or application without displaying the browser interface.

The pointer locks API. Allows you to lock the pointer to the content so that the game or similar application does not lose focus when the pointer reaches the window limit.

Online and offline events. To build a good web application with offline functionality, you need to know when your application is actually offline. By the way, you need to know when your application is back online again.

8. Device access

Use Camera API. Allows you to use and manipulate the computer's camera and access photos from it.

Touch event. A handler that reacts to an event when a user presses a touch screen.

Use geolocation. Let the browser use the geolocation service to locate the user's location.

Detect the direction of the equipment. Allows users to get information when the device running the browser changes direction. This can be used as an input device (such as making a game that responds to the location of the device) or to adapt the layout of the page to the orientation of the screen (landscape or portrait).

The pointer locks API. Allows you to lock the pointer to the content so that the game or similar application does not lose focus when the pointer reaches the window limit.

9. Style design

New background style properties. You can now use box-shadow to set a shadow on the logic box, and you can also set multiple backgrounds.

More exquisite borders. You can now not only use images to format borders, use border-image and its associated common properties, but also support fillet borders through the border-radius property.

Animate your style. Using CSS Transitions to animate between different states, or using CSS Animations to animate parts of the page without a trigger event, you can now control the movement of elements in the page.

Improvements in typesetting. The author has more control and has achieved better typesetting. They can not only control text-overflow and hyphenation, but also set a shadow on it or control its decorations more finely. Thanks to the new @ font-face rule, we can now download and apply custom fonts. .

A new display layout. To improve the flexibility of the design, two new layouts have been added: the CSS multi-column layout and the CSS flexible box layout.

At this point, the study on "what functions html5 has" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.