html tips

2021-06-20 本文已影响0人想溜了的蜗牛

一些较实用的html 小技巧，原文

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'>

1. 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>

1. Ordered lists start attribute.
  Use the start attribute to change the starting point for your ordered lists.
  image.png

1. 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>

1. Base Element
  If you want to open all links in the document in a new tab, you can use <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: &nbsp;
  <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>

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

1. 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>

1. 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">

上一篇下一篇

猜你喜欢

热点阅读