一些较实用的html 小技巧， 原文
- The
loading=lazyattribute
Performance tip. You can use the loading=lazy attribute to defer the loading of the image until the user scrolls to them.
- The
<img src='image.jpg' loading='lazy' alt='Alternative Text'>
- 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>
- Ordered lists
startattribute.
Use the start attribute to change the starting point for your ordered lists.
image.png
- Ordered lists
- 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.
- Window.opener
<a href="https://markodenic.com/" target="_blank" rel="noopener">
Marko's website
</a>
- Base Element
If you want to open all links in the document in a new tab, you can use <base> element:
- Base Element
<head>
<base target="_blank">
</head>
<!-- This link will open in a new tab. -->
<div class="wrapper">
This link will be opened in a new tab:
<a href="https://freecodetools.org/">
Free Code Tools
</a>
<p>
Read more: <br><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/base">
MDN Documentation
</a>
</p>
</div>
-
marktag
You can use the <mark> tag to highlight text.
image.png
-
-
downloadattribute
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>
- 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 thumbnail
<video poster="path/to/image">
网友评论