2021 前端开发的17个技巧

1.loading=lazy属性

性能优化，你可以使用该loading=lazy属性来推迟图像的加载，直到用户滚动到它们为止

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

2.电子邮件、电话和短信链接

<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.有序列表start属性

使用该start属性更改有序列表的起点

4.meter 元素

您可以使用该<meter>元素来显示数量。不需要 JavaScript/CSS

5.HTML 原生搜索

6.字段集元素

您可以使用该<fieldset>元素对<label>Web 表单中的多个控件和标签 ( )进行分组

7.Window.opener

打开target="_blank"的页面允许新页面访问原始页面window.opener。这可能会对安全和性能产生影响。包括rel="noopener"或rel="noreferrer"防止这种情况发生

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

8. 元素

如果要在新选项卡中打开文档中的所有链接，可以使用<base>元素

9.Favicon 缓存更新

要刷新您网站的图标，您可以通过添加?v=2到文件名来强制浏览器下载新版本。

这在生产中特别有用，可以确保用户获得新版本

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

10.拼写检查

使用该spellcheck属性来定义是否可以检查元素的拼写错误

11.原生 HTML 滑块

您可以使用它 <input type="range"> 来创建滑块

12.HTML 手风琴

您可以使用该details元素来创建本机 HTML 手风琴

13.mark标签

您可以使用<mark>标签来突出显示文本

14.download属性

您可以使用download链接中的属性来下载文件，而不是跳转到该文件

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

15.webp图片优化性能

使用.webp图像格式缩小图像并提高网站的性能

<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.视频缩略图

使用该poster属性指定要在视频下载时或在用户点击播放按钮之前显示的图像

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

17.type="search"

将type="search"用于您的搜索输入，您将获得“清除”按钮