HTML技巧

一些实用的HTML技巧。

更新网站图标

通过在Favicon文件名中添加?v=2来强制浏览器下载新图标。

1<link rel=”icon” href=”/favicon.ico?v=2″ />

mark标签 文字高亮

1<p><mark>1905年6月9日</mark>,设想人长生不死。</p>
https://codepen.io/ly023/embed/YzQzaqO?height=300&default-tab=html%2Cresult&slug-hash=YzQzaqO&user=ly023&name=cp_embed_1

图片懒加载 loading=”lazy”

兼容性:Lazy loading via attribute for images & iframes

不考虑兼容性的情况下,可以通过为图片添加loading="lazy"属性来实现图片懒加载:

1<img src=”xxx.png” loading=”lazy” alt=”lazy”/>
https://codepen.io/ly023/embed/ExNbeMr?height=265&theme-id=dark&default-tab=html%2Cresult&user=ly023&slug-hash=ExNbeMr&pen-title=html%E6%8A%80%E5%B7%A7-%E5%9B%BE%E7%89%87%E6%87%92%E5%8A%A0%E8%BD%BD-loading%3D%26quot%3Blazy%26quot%3B&name=cp_embed_2

Picture标签

HTML提供了<picture>标签,允许我们添加多个图片资源,并且根据不同的分辨率需求来展示不同的图片:

1
2
3
4
5
<picture>
<source media=”(min-width:768px)” srcset=”https://picsum.photos/id/1000/400/400″>
<source media=”(min-width:495px)” srcset=”https://picsum.photos/id/1000/200/200″>
<img src=”https://picsum.photos/id/1000/600/600″/>
</picture>

使用.webp格式缩小图像并提高网站性能

1
2
3
4
5
6
7
8
9
10
<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>

datalist 输入提示

通过<datalist>标签实现下拉选择(注意,<datalist>标签的id属性需要和input元素的list属性一致):

1
2
3
4
5
6
<input list=”staffs”>
<datalist id=”staffs”>
<option value=”Michael”>
<option value=”Jack”>
<option value=”Tom”>
</datalist>
https://codepen.io/ly023/embed/gOLXBbg?height=300&default-tab=html%2Cresult&slug-hash=gOLXBbg&user=ly023&name=cp_embed_3

Base URL

当页面有大量的锚点跳转或者静态资源加载,并且这些链接在同一域名下时,可以通过<base>标签简化链接(<base>标签必须具有hreftarget属性):

1
2
3
4
5
6
7
<head>
<base href=”https://picsum.photos/” target=”_blank”>
</head>
<body>
<a href=”id/1/200/200″> source1 </a>
<a href=”id/2/200/200″> source2 </a>
</body>

页面重定向(刷新)

“5s后页面将跳转”,这个交互可以通过<meta>标签设置http-equiv="refresh"来实现:

1<meta http-equiv=”refresh” content=”5; URL=’https://google.com’ />

这里content属性指定了重定向发生的秒数。使用这种类型的重定向其实并不是那么的优雅,往往会显得很突兀。因此,最好在某些特殊的情况下使用它,比如在长时间用户不活动之后再重定向到目标页面。


已发布

分类

来自

标签:

评论

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注