4

总结一些不为人熟知的 HTML 特性。

 2 years ago
source link: https://blog.p2hp.com/archives/8041
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

In this article, I will share with you some very useful HTML tips. Enjoy!
* Post will be updated regularly with new tips!

But first, what is HTML?

Hypertext Markup Language (HTML) is the standard markup language for documents designed to be displayed in a web browser. It can be assisted by technologies such as Cascading Style Sheets (CSS) and scripting languages such as JavaScript.

Let’s start!

1. The `loading=lazy` attribute

Performance tip. You can use the loading=lazy attribute to defer the loading of the image until the user scrolls to them.


<img src='image.jpg' loading='lazy' alt='Alternative Text'>

2. Email, call, and SMS links:


<a href="mailto:{email}?subject={subject}&body={content}">
  Send us an email
</a>

<a href="tel:{phone}">
  Call us
</a>

<a href="sms:{phone}?body={content}">
  Send us a message
</a>

3. Ordered lists `start` attribute.

Use the start attribute to change the starting point for your ordered lists.

Codepen Preview

4. The `meter` element

You can use the <meter> element to display quantities. No JavaScript/CSS needed.

5. HTML Native Search

6. Fieldset Element

You can use the <fieldset> element to group several controls as well as labels (<label>) within a web form.

7. Window.opener

Pages opened with target="_blank" allow the new page to access the original’s window.opener. This can have security and performance implications. Include rel="noopener" or rel="noreferrer" to prevent this.


<a href="https://markodenic.com/" target="_blank" rel="noopener">
    Marko's website
</a>

8. Base Element

If you want to open all links in the document in a new tab, you can use <base> element:

9. Favicon cache busting

To refresh your website’s favicon you can force browsers to download a new version by adding ?v=2 to the filename.

This is especially helpful in production to make sure the users get the new version.


<link rel="icon" href="/favicon.ico?v=2" />

10. The `spellcheck` attribute

Use the spellcheck attribute to define whether the element may be checked for spelling errors.

11. Native HTML sliders

You can use <input type="range"> to create sliders.

12. HTML Accordion

You can use the details element to create a native HTML accordion.

13. `mark` tag

You can use the <mark> tag to highlight text.

Mark Tag implementation

14. `download` attribute

You can use the download attribute in your links to download the file instead of navigating to it.


<a href='path/to/file' download>
  Download
</a>

15. Performance tip

Use the .webp image format to make images smaller and boost the performance of your website.


<picture>
  <!-- load .webp image if supported -->
  <source srcset="logo.webp" type="image/webp">
  
  <!-- 
    Fallback if `.webp` images or <picture> tag 
    not supported by the browser.
  -->
  <img src="logo.png" alt="logo">
</picture>

16. Video thumbnail

Use the poster attribute to specify an image to be shown while the video is downloading, or until the user hits the play button.


<video poster="path/to/image">

17. input type="search"

Use the type="search" for your search inputs and you get the “clear” button for free.

Input Type Search

To be continued…

via https://markodenic.com/html-tips/


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK