HTML 技巧💻
【哀悼日】全站变灰
html {
filter: grayscale(1); // filter: grayscale(60%);
}
html {
mix-blend-mode: luminosity;
}
打开一个网页，F12进入控制台，输入代码，回车，你就可以编辑网页里的任何内容了~
document.body.contentEditable='true';document.designMode='on'; void 0
图片 lazyload
<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>
<meter>进度条，无需 js
<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>
datalist 输入框预设项
<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>
rel="noreferrer" 更安全的页面跳转方式
<a href="https://rabithua.club/" target="_blank" rel="noopener">blog</a>
页面所有链接在新选项卡打开
<head>
<base target="_blank">
</head>
通过添加?v=2来强制刷新缓存
<link rel="icon" href="/favicon.ico?v=2" />
原生 HTML 滑块
<input type="range" id="volume" name="volume" min="0" max="20">
内容折叠
<details>
<summary>
Click me to see more details
</summary>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut eum perferendis eius. Adipisci velit et similique earum quas illo odio rerum optio, quis, expedita assumenda enim dicta aliquam porro maxime minima sed a ullam, aspernatur corporis.
</p>
</details>
使用<mark>标签来突出显示文本
<p>hello <mark>world</mark></p>
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>
视频略缩图，视频播放前展示的图片
<video poster="path/to/image">
纯 CSS 使用 filter 一行代码实现全站灰色
html {
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter: grayscale(100%);
filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
}
[链接登录后可见]
