原文地址：https://markodenic.com/html-tips/

Marko 2020年4月12日

在这篇文章中，我很兴奋地与您分享一些非常有用的HTML小技巧。

*文章会定期更新，假如有新的小技巧的话。

但是首先，什么是HTML？

超文本标记语言（HTML）是设计用来在浏览器中显示文档的标准标记语言。它能够获得诸如级联样式表（CSS）、JavaScript等脚本语言技术的支持。

我们开始吧

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元素

您可以使用fieldset元素，在一个web表单中对几个控件和标签(<label>)进行分组。

7、window.open

用target="_blank"打开的新页面，新页面中可以访问原始的来源window，通过window.opener。这个可能会有隐含的安全或者性能问题。使用 rel="noopener" 或者 rel="noreferrer"去阻止这种行为。

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

8、Base元素

如果您想让您文档中的所有链接都在新的tab页打开，您可以使用base标签：

_self: 载入结果到当前浏览上下文中。（该值是元素的默认值）。

_blank: 载入结果到一个新的未命名的浏览上下文。

_parent: 载入结果到父级浏览上下文（如果当前页是内联框）。如果没有父级结构，该选项的行为和_self一样。

_top: 载入结果到顶级浏览上下文（该浏览上下文是当前上下文的最顶级上下文）。如果没有父级，该选项的行为和_self一样

9、破坏Favicon的缓存

为了能够刷新你网站的favicon，你可以强制浏览器去下载新文件，通过给文件链接后面添加?v=2。

这个在生产环境特别有用，确保你的用户使用的是最新的版本。

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

10、`spellcheck` 属性

通过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格式，同时提升网站性能。

<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缩略图

使用poster属性指定一张在视频下载时显示的图片，或者一直到用户点击播放按钮。

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

17、input type="search"

对于你的搜索输入框可以使用type="search",然后你将会免费获得一个清除的按钮。