这篇文章，将介绍一些有用的 html 技巧。来吧！
译者注：原文说，发现新技巧后会有更新
但是首先，什么是 html
超文本（Hypertext）标记（Markup）语言（Language） (HTML)是为文档在浏览器中展示而设计的标准标签语言。可以使用 css 和 js 来协助它（完成更多功能）。
开始吧
1. 属性 lazy-loading
性能技巧。可以使用 loading="lazy"属性来推迟图片的加载（等到用户滚到到到图片了，再加载）。
<img src='image.jpg' loading='lazy'>
2. 电子邮件，电话，短信
<a href="mailto:{电子邮件地址}?subject={主题}&body={电子邮件内容}">
发送电子邮件
</a>
<a href="tel:{电话号码}">
拨打电话
</a>
<a href="sms:{电话号码}?body={短信内容}">
发个短信
</a>
译者注：大括号是提醒填参数的地方！用的时候别加大括号！比如
<a href="tel:110">我要报警</a>
在 win10 上测试，发邮件可以正常使用；在 ios 的 safari 中，邮件、短信、电话均不可用
3. 有序列表的 start 属性
demo
使用 start 属性来改变有序列表的起始序号：
<ol start="10">
<li>Mike</li>
<li>Lihua</li>
<li>John</li>
</ol>
4. meter 元素
demo
<meter>用来展示数量。不需要 javascript 或 css：
<label for="value1">Low</label>
<meter id="value1" min="0" max="100" low="30" high="75" optimum="80" value="25"></meter>
<label for="value2">Medium</label>
<meter id="value2" min="0" max="100" low="30" high="75" optimum="80" value="50"></meter>
<label for="value3">High</label>
<meter id="value3" min="0" max="100" low="30" high="75" optimum="80" value="80"></meter>
5. html 的原生搜索
译者注：语言不好描述，点开上面的链接，看一眼就明白了
<input list="items">
<datalist id="items">
<option value="Marko Denic">
<option value="FreeCodeCamp">
<option value="FreeCodeTools">
<option value="Web Development">
<option value="Web Developer">
</datalist>
6. fieldset 元素
demo
可以使用 <fieldset>元素，对表单里的元素分组
7. <a> 的 rel=“noopener” 属性
如果你的页面通过 <a href="别的网站的链接" target="_blank">这种方式跳转到别的网站
那么目标网站可以通过 window.opener 控制你的页面！
译者注：参考这篇文章
8. base 元素
如果你的网页里的所有链接，都在新标签页打开，可以使用 <base>元素：
<head>
<base target="_blank">
</head>
<a href="https://baidu.com/">在新 tab 中打开百度</a>
译者注：省去很多次写
target="_blank"
9. 清除 favicon 缓存
想让网页加载新的 favicon，可以在文件名后添加 ?v=2.
在生产环境中，为了让用户获取到新版本的 favicon，这非常有用
<link rel="icon" href="/favicon.ico?v=2" />
译者注：原理是，在一个链接中，
?后的部分，是请求的参数
而 favicon 等静态文件的获取，跟参数是无关的
所以，v=2不是什么“神奇小代码”，而是在?加任何东西都行
类似的，其他静态文件的缓存清除，也可以用这种方法
10. spellcheck 属性
demo
使用 spellcheck属性来规定，是否需要检查拼写错误（译者注，不支持中文）：
<input type="text" spellcheck="true">
11. 原生的 html slider
demo
可以使用 <input type="range">来创建一个 slider
12. 原生的 html accordion
demo
可以使用 <detail>来创建一个 accordion
未完待续…
扫一扫
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
