你需要知道的 10 个 HTML 小技巧
1. 使用 HTML 创建手风琴
是的，你完全可以使用 HTML 创建手风琴效果。方法如下。
<details>
<summary>View Features</summary>
<ul>
<li>Unlimited bookmarks</li>
<li>Nested collections</li>
<li>Import and export</li>
<li>Link to web archive</li>
<li>Mobile support</li>
</ul>
</details>
<output>2. 用元素显示结果
输出元素可以显示脚本执行的结果。当输入值发生变化时，它会自动更新。
<form oninput="r.value=parseInt(a.value)+parseInt(b.value)+parseInt(c.value)">
<input type="number" id="a" value="100">
+<input type="number" id="b" value="50">
+<input type="number" id="c" value="50">
=<output name="r" for="a b c"></output>
</form>
<meter>3. 使用元素创建仪表
<label for="ruby">Ruby:</label>
<meter id="ruby" min="0" max="100" low="35" high="65" optimum="95" value="25"></meter><br />
<label for="java">Java:</label>
<meter id="java" min="0" max="100" low="35" high="65" optimum="95" value="50"></meter><br />
<label for="js">JavaScript:</label>
<meter id="js" min="0" max="100" low="35" high="65" optimum="85" value="90"></meter>
4. 接受多个输入值
你可以使用该multiple属性接受多个文件和电子邮件地址值。虽然用户体验不太好，type="email"但功能基本可用。
<input type="email" placeholder="Email comma separated" multiple>
5. 使用 HTML 创建一个滑块
<input type="range" min="1" max="100" value="80">
6. Meta 标签 http-equiv
使用 http-equiv 在一定时间后刷新或重定向到页面
<!-- Refreshes the document every 30 seconds -->
<meta http-equiv="refresh" content="30">
<!-- Redirects to thee specified page after 5 seconds -->
<meta http-equiv="refresh" content="5;https://google.com">
7. 禁用右键单击
<!-- Disables right click on this element -->
<p oncontextmenu="return false">Hello</p>
<!-- Disables right click on the document -->
<body oncontextmenu="return false">....</body>
8. 使用锚点标签进行 FaceTime 通话
不仅可以进行 FaceTime 通话，还可以添加 Skype 或传真链接。
<a href="facetime:98769876987">Connect using FaceTime</a>
<a href="skype:user333?chat">Connect on skype</a>
<a href="fax:+123.456.1234567">+358.555.1234567</a>
9. 在输入中使用捕获属性
<input type="file" capture="user" accept="audio/*">
<!-- Capture 'environment' opens up the back camera -->
<input type="file" capture="environment" accept="video/*">
<!-- Capture 'user' opens up the front camera -->
<input type="file" capture="user" accept="image/*">
10. 使用 focus-within
html:focus-within提高浏览器中页面内查找功能的滚动速度
html:focus-within {
scroll-behavior: smooth;
}
感谢阅读💫。
希望您喜欢这篇文章。欢迎提出宝贵意见🙏