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

This article mainly shows you the "HTML skills not often mentioned", the content is easy to understand, clear, hope to help you solve your doubts, the following let the editor lead you to study and learn "what are the infrequently mentioned HTML skills" this article.

Picture lazy load

Lazy loading of pictures can help improve the performance and responsiveness of the website. Lazy image loading can avoid immediately loading image material that is not immediately displayed on the screen, and start loading when the user scrolls close to the picture.

In other words, when the user scrolls until the picture appears, it will not be loaded otherwise. This reduces the number of requests for image material during the display of screen content and improves the performance of the site.

Often we do this through javascript, by listening for page scrolling events to determine which resources are loaded. However, in scenarios where compatibility is not fully considered, we can actually do this directly through HTML.

Note: the compatibility of tags and attributes mentioned in this article requires you to choose whether to use it or not according to the actual scenario.

You can do this by adding the attribute of loading= "lazy" to the picture file:

Enter prompt

When users enter the search function, if they can give effective prompts, this will greatly improve the user experience. Input suggestions and autocomplete are now everywhere, and we can use Javascript to add input suggestions by setting up an event listener on the input box and then matching the searched keywords with predefined suggestions.

In fact, HTML also allows us to implement the function of predefined input suggestions, through tags. It is important to note that when used, the id attribute of this tag needs to be consistent with the list attribute of the input element.

Please choose your favorite country: Picture tag

Have you ever encountered the problem of picture display adaptation in different scenes or different sizes of devices? I think we all have.

When there is only one size of image material, we can often use the object-fit attribute of CSS to trim and adapt. But sometimes when we need to display scenes of different sizes according to different resolutions, can we do it directly through HTML?

HTML provides tags that allow us to add multiple image resources and display different images according to different resolution requirements.

We can define the minimum resolution of different intervals to determine the image material, the use of this tag is somewhat similar to the tag.

Base URL

When our page has a large number of anchor jumps or static resources loaded, and these jumps or resources are in the same domain name scenario, we can use tags to simplify this process.

For example, if we have a list of different big V homepages of Weibo, we can simplify the jump path by setting it up.

Jackie Chan Jia Ling

Tags must have href and target attributes.

Page redirection (refresh)

When we want to implement the function of redirecting to another page after a period of time or immediately, we can do it directly through HTML.

We often encounter some sites with such a feature, "the page will jump after 5s". This interaction can be embedded in HTML, directly by tagging and setting http-equiv= "refresh".

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.