Home > Article > Web Front-end > What functions does html5 have?
What functions does html5 have?
- 青灯夜游Original
- 2022-01-17 12:02:503561browse
html5 features: 1. New graphics library, which can make website content richer; 2. More convenient multimedia content; 3. Geolocation; 4. Drag and drop function; 5. Desktop notifications ; 6. Offline and storage; 7. Performance and integration; 8. Device access; 9. Style design, etc.
The operating environment of this tutorial: Windows 7 system, HTML5 version, Dell G3 computer.
Features of html5
1. New graphics library:
Introduced in HTML5 Canvas and WebGL function libraries can make website content richer. The WebGL function library, in particular, can almost change the entire game in this field. Just look at this famous Quake II game scene, which was completely developed in HTML5. To me, this represents a new era and allows one 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 clunky feeling. It is often necessary to use a bunch of Flash plus
3. Geolocation:
People use the Internet less and less through desktop computers or even laptops. Today, many people browse the web through handheld mobile devices, such as smartphones and tablets. This current mobile network access feature, coupled with the new geolocation capabilities in HTML5, combine to open up countless new possibilities. Knowing a user's precise location when they visit your website allows you to deliver personalized content to match the user's context. For example, when visiting a website related to outings, if it is found that you are in a downtown area, it can provide information related to trip planning; but if you visit the website from a suburban location, the interactive map function will be displayed by default.
4. Drag and drop function:
This is a subtle change, but it is very important. The drag-and-drop feature allows you to drag content from the browser directly to your computer, or drag content from your computer to the browser. It’s really an epoch-making change, isn’t it? Let's take a look at this display and think about it, if social networking sites have such a function, when you come back from vacation, you can easily select your vacation photos, drag them to the browser, and share them with your online friends immediately. This is
the way I want to interact with the website!
5. Desktop notification:
Desktop notification is a small pop-up window that appears outside the browser. Even when the user is not browsing the website, they can still communicate with the website. interactive. This feature is currently only available in Google Chrome, and you can see a demonstration here. These notifications are great for email notifications, social network updates, Weibo messages, and other services. Coupled with drag-and-drop functionality, the distinction between online and local applications is really blurred.
6. Offline and storage
Offline resources: application cache. Firefox fully supports the HTML5 offline resources 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 allow applications and extensions to detect whether a network connection is available and to sense when a connection is made and broken.
WHATWG client session and persistence storage (aka DOM storage). Client-side sessions and persistent storage enable web applications to store structured data on the client side.
IndexedDB. It is a web standard designed to store large amounts of structured data in the browser and use indexes on this data for high-performance retrieval.
Use files from web applications. Support for the new HTML5 File API has been added to Gecko, allowing web applications to access local files selected by the user. This includes support for multiple file selection using the new multiple attribute of the element of type file. And FileReader.
7, Performance and Integration
Web Workers. The ability to delegate JavaScript calculations to background threads prevents interactive events from slowing down by allowing these activities.
XMLHttpRequest Level 2. Allows parts of the page to be read asynchronously, allowing it to display dynamic content that varies based on time and user behavior. This is the technology behind Ajax.
Just-in-time compiled JavaScript engine. The new generation of JavaScript engine is more powerful and performs better.
History API. Allows manipulation of browser history. This is especially useful for pages that load new information interactively.
conentEditable attribute: Transform your website into a wiki! HTML5 has standardized the contentEditable attribute. Learn more about this feature.
Drag and drop. HTML5's drag-and-drop API supports dragging and dropping items within and between sites. It also provides a simpler API for use by extensions and Mozilla-based applications.
Focus management in HTML. Support for new HTML5 activeElement and hasFocus properties.
Web-based protocol handler. You can now register a web application as a protocol handler using the navigator.registerProtocolHandler() method.
requestAnimationFrame. Allows control over animation rendering for better performance.
Full screen API. Controls use the entire screen for a web page or application without displaying the browser interface.
Pointer locking API. Allows the pointer to be locked to content so that games or similar applications do not lose focus when the pointer reaches the window limits.
Online and offline events. In order to build a good offline-capable web application, you need to know when your application is actually offline. By the way, you also need to know when your application comes back online again.
8. Device access
Use Camera API. Allows you to use and operate your computer's camera and access photos from it.
Touch event. Handler that reacts to events when the user presses the touch screen.
Use geolocation targeting. Let the browser use geolocation services to locate the user's location.
Detect device orientation. Allows users to get information when the device running the browser changes orientation. This can be used as an input device (for example, making a game that responds to the device's position) or to adapt the layout of the page to the orientation of the screen (landscape or portrait).
Pointer locking API. Allows the pointer to be locked to content so that games or similar applications do not lose focus when the pointer reaches the window limits.
9. Style design
New background style features. Now you can use box-shadow to set a shadow for the logical box, and you can also set multiple backgrounds.
More exquisite borders. Not only can borders be formatted using images, using border-image and its associated normal properties, but rounded borders can now be supported via the border-radius property.
Animate your styles. 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 moving elements around the page.
Typesetting improvements. Authors have greater control resulting in better formatting. Not only can they control text-overflow and hyphenation, but they can also set a shadow on it or more finely control its decorations. Thanks to the new @font-face rule, we can now download and apply custom fonts. .
New presentational layout. To improve design flexibility, two new layouts have been added: CSS multi-column layout, and CSS flexible box layout.
Related recommendations: "html video tutorial"
The above is the detailed content of What functions does html5 have?. For more information, please follow other related articles on the PHP Chinese website!