这是一篇翻译文章,原文地址https://markodenic.com/html-tips/
loading=lazy
属性
性能技巧。使用loading=lazy属性去延迟加载图片,当用户滚动到图片位置时再加载图片。
<img src='image.jpg' loading='lazy' alt='Alternative Text'>
- 点击发邮件,打电话和发短信
<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>
- 有序列表的
start
属性
meter
元素
你可以使用元素去展示数量,而不用js/css。
- HTML原生搜索
- fieldset元素
You can use the element to group several controls as well as labels ( - Window.opener
使用target="_blank"打开的新页面可以通过window.opener获得原来的页面。这可能会有安全和性能问题。可以通过设置rel="noopener"或rel="noreferrer"解决
<a href="https://markodenic.com/" target="_blank" rel="noopener">
Marko's website
</a>
- base元素
可以使用base元素让所有的链接都在新的tab页打开,而不用去单独设置target="_blank"
<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>
- 刷新Favicon缓存
要刷新网站的图标,你可以通过在文件名中添加?v=2来迫使浏览器下载一个新版本。
这在生产环境中特别有用,可以确保用户获得新版本。
<link rel="icon" href="/favicon.ico?v=2" />
spellcheck
属性
使用spellcheck属性定义是否可以检查元素的拼写错误。
- 原生的HTML滑块
使用创建滑块
- HTML手风琴
使用details元素创建HTML原生手风琴。
mark
元素
使用<mark>
标签去高亮文本
download
属性
您可以在链接中使用download属性来下载文件,而不是导航到它。
<a href='path/to/file' download>
Download
</a>
- 性能技巧
使用.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>
- 视频缩略图
使用poster属性指定在视频下载时或用户点击播放按钮之前显示的图像。
<video poster="path/to/image">
- 原生搜索框
使用type="search"把input变成搜索框