Shulou(Shulou.com)05/31 Report--

This article mainly introduces "HTML5 feature example analysis". In daily operation, I believe many people have doubts about HTML5 feature example analysis. Xiaobian consulted various materials and sorted out simple and easy operation methods. I hope to help you answer the doubts of "HTML5 feature example analysis"! Next, please follow the small series to learn together!

HTML5 features

Semantic properties (Class: Semantic)

HTML5 gives better meaning and structure to web pages. More tags will build a data-driven Web that is more valuable to applications and users, along with support for RDFa, microdata, and microformats.

Local Storage Properties (Class: OFFLINE & STORAGE)

HTML5-based web apps have shorter startup times and faster Internet speeds, all thanks to HTML5 App Cache and local storage. Indexed DB (one of the most important technologies for html5 native storage) and API documentation.

Device compatibility characteristics (Class: DEVICE ACCESS)

Since the release of the Geolocation API documentation, HTML5 has provided web application developers with more functional optimization options, bringing the advantages of more experience features. HTML5 provides an unprecedented open interface for data and application access. External applications can be directly connected to data inside the browser, such as video and audio can be directly connected to microphones and cameras.

Connection Properties (Class: CONNECTIVITY)

More efficient connectivity enables real-time page-based chat, faster web gaming experiences, and more optimized online communication. HTML5 has more efficient server push technology, Server-Sent Events and WebSockets are two of the features that help us implement the server to "push" data to the client.

Web multimedia features (Class: MULTIMEDIA)

Support multimedia functions such as Audio and Video on the web side, which complement the APPS, camera and audio functions of the website.

3D, Graphics and Effects (Class: 3D, Graphics & Effects)

Based on SVG, Canvas, WebGL and CSS3's 3D capabilities, users will marvel at the amazing visual effects presented in the browser.

Performance and Integration (Class: Performance & Integration)

No user will wait forever for your Loading-HTML5 will solve previous cross-domain problems through technologies such as XMLHttpRequest2 to help your Web applications and websites work faster in diverse environments.

CSS3 Features (Class: CSS3)

CSS3 provides more style and stronger effects without sacrificing performance and semantic structure. In addition, the Web's Open Font Format (WOFF) offers greater flexibility and control than previous Web typography.

HTML5 elements commonly used in website development

1. New Doctype

Many web pages today still use XHTML 1.0 and declare the document type on the first line like this:

In HTML5, that declaration will no longer work. Here's how it's declared in HTML5:

2. No More Types for Scripts and Links

In HTML4 or XHTML, you need to add CSS and JavaScript files to your web page with the following lines of code:

In HTML5, you no longer need to specify type attributes. Therefore, the code can be simplified as follows:

3. Semantic Header and Footer (The Semantic Header and Footer)

In HTML4 or XHTML, you need to declare "Header" and "Footer" with the following code:

…

……….

…

In HTML5, there are two elements that can replace the above declaration, which can make the code simpler.

…

…

4.Hgroup

In HTML5, there are many new elements introduced, hgroup is one of them. Suppose my site name is followed by a subtitle, which I can define separately with and tags. However, this definition does not explain the relationship between the two. Also, h2 tag usage can cause more problems, such as when there are other titles on the page.

In HTML5, we can group them with hgroup elements so they don't affect the outline of the file.

Recall Fan Page

Only for people who want the memory of a lifetime.

5. Mark Element

You can think of it as a highlight tag. The string modified by this tag should be relevant to the user's current action. For example, when I search for "Open your Mind" in a blog, I can use JavaScript to embellish the phrase that appears.

Search Results

They were interrupted, just after Quato said, "Open your Mind".

6. Figure Element

In HTML4 or XHTML, the following code is used to decorate the comments of an image.

Image of Mars.

However, the above code does not inherently link text and images. HTML5 introduces elements. When combined with, we can semantically associate annotations with corresponding images.

This is an image of something interesting.

7. Small Element redefined

In HTML4 or XHTML, the element already exists. However, there are no complete instructions on how to use this element correctly. In HTML5, it is used to define small characters. Consider the copyright status at the bottom of your website, which is interpreted correctly according to the new HTML5 definition of this element.

8. Placeholder

In HTML4 or XHTML, you need JavaScript to add placeholders to text boxes. For example, you can set some information in advance so that when the user starts typing, the text in the text box disappears.

In HTML5, the new "placeholder" simplifies this problem.

9. Required Attribute

The new attribute "required" in HTML5 specifies whether an input is required. There are two ways to declare this property.

When a text box is specified as required, the form cannot be submitted if it is blank. Here is an example of how to use it.

Your Name:

Go

In the example above, if the input is empty and the form is submitted, the input box will be highlighted.

10. Autofocus Attribute

Similarly, HTML5 solutions eliminate the need for JavaScript. If a particular input should be "select" or focus, we can now take advantage of the autofocus attribute by default.

11. Audio Support

Currently we rely on third-party plugins to render audio. In HTML5, however, elements are introduced.

Download this file.

Remember to include two audio formats when working with elements. FireFox wants files in.ogg format, while WebKit requires files in. mp3 format. As usual, IE is unsupported, and Opera 10 and below only support the.wav format.

12. Video Support

HTML5 has not only elements, but also. However, similar to HTML5, there is no video decoder specified, it is left to the browser to decide. While Safari and Internet Explorer9 can support H.264 format video, Firefox and Opera are sticking to the open source Theora and Vorbis formats. Therefore, when specifying HTML5 video, you must provide both formats.

Download this video instead.

13. Preload attribute in Videos element

This property allows the video to be preloaded when the user visits the page. To do this, you can add preload="preload" to the element or simply preload.

14. Display Controls

If you've used each of the techniques mentioned above, you've probably noticed that with the code above, the video just shows an image, no control bar. In order to render the playback control bar, we must specify the controls attribute within the video element.

15. Regular Expressions

In HTML4 or XHTML, you need some regular expressions to validate specific text. The new pattern attribute in HTML5 allows us to insert a regular expression directly into the tag.

Create a Username:

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.