HTML技巧

发表于 | 更新于 | 分类于 | 评论数： | 阅读次数：

一些实用的HTML技巧。

更新网站图标

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

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

mark标签 文字高亮

1
<p><mark>1905年6月9日</mark>，设想人长生不死。</p>

See the Pen mark标签 by ly023 (@ly023) on CodePen.

图片懒加载 loading=”lazy”

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

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

1
<img src="xxx.png" loading="lazy" alt="lazy"/>

See the Pen html技巧-图片懒加载-loading="lazy" by ly023 (@ly023) on CodePen.

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>

See the Pen html技巧-输入提示 by ly023 (@ly023) on CodePen.

Base URL

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

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