不为人熟知的 HTML 特性

原英文看这里 (opens new window)

本文是基于此的实践补充

废话不多说

# img 标签 loading 特性

图片懒加载

较常用的性能优化方式之一

但浏览器原生实现了

<img src='image.jpg' loading='lazy' alt='img loading'>
1

兼容性需提高

另外,影响懒加载因素很多

比如:屏幕高度、网速、滚动条滚动、浏览器窗口 resize 尺寸变化等

具体可见 (opens new window)

但话说回来

如果是内部系统

又没那么多要求

用起来就是

提高一点是一点

# a 标签 email、call、sms 链接取值

没啥好说的,看例子

# html 实现拨打电话

<a href="tel:18xxxx">
  联系我
</a>
1
2
3

# html 实现发送邮件

<a href="mailto:xxx@163.com?subject=上线申请&body=各位领导。。。">
  发送邮件
</a>
1
2
3

# html 实现发送短信

<a href="sms:185xxxx">
  亲,在不
</a>
1
2
3

# ol 标签的 start 特性

ol 是有序列表

默认从 1 开始

如果从 10 开始呢?

使用 start 特性设置起始:

<ol start="10">
  <li>111</li>
  <li>222</li>
</ol>
1
2
3
4

# meter 标签

开始以为是 meta 标签

仔细看是 meter 标签

MDN 文档 (opens new window)

计量(器)标签,显示已知范围的值

比如显示 0 ~ 100 范围值的 50 位置

<label for="value1">0 ~ 100 范围表示</label>
<meter id="value1" min="0" max="100" low="30" high="75" optimum="80" value="10"></meter>
1
2

效果图:

meter 标签

另外配合 low、hign 特性

会根据不同的范围取值显示不同的进度条颜色

如上 Chrome 浏览器显示为例:

[0, 30)区间:进度条红色

[30, 75)区间:进度条橙色

[75, 100]区间:进度条绿色

不同浏览器进度条颜色可能有差异

# 原生 Search 下拉搜索框

如下图,下拉搜索不要太常见

原生 Search 下拉搜索框

自定义实现也很简单:绝对元素定位 + 溢出显示隐藏

但 HTML 原生支持了并且支持关键字搜索

<div>
  <input list="items">
  <datalist id="items">
    <option value="1">
    <option value="2">
    <option value="3">
    <option value="4">
    <option value="5">
  </datalist>
</div>
1
2
3
4
5
6
7
8
9
10

不多说,满足基本业务需求,

# fieldset 标签分组

把选择分组选择且有明显 UI 界线区分

fieldset + legend 是比较不错的组合

而且是原生标签,原生 UI 支持

如下图:

fieldset 标签分组

源码如下:

<form action="" style="width: 300px;">
<fieldset>
  <legend>选择你喜欢的语言</legend>

  <input type="radio" id="javascript" name="language">
  <label for="javascript">JavaScript</label><br />

  <input type="radio" id="python" name="language">
  <label for="python">Go</label><br />

  <input type="radio" id="java" name="language">
  <label for="java">Python</label>
</fieldset>
</form>
1
2
3
4
5
6
7
8
9
10
11
12
13
14

# 禁用 window.opener

a 标签设置 target="_blank" 新标签页打开时

此时可在新标签页通过 window.opener 获取原始的容器信息

此时可能出现安全与性能问题

建议阻止 window.opener 访问

设置 rel="noopener" 或 rel="noreferrer"

如下:

<a href="https://baidu.com/" target="_blank" rel="noopener">
  百度
</a>
1
2
3

此时在新标签页访问 window.opener 时返回 null

# base 标签

页面中所有 a 链接都在新的浏览器标签页打开时

如下设置:

<head>
   <base target="_blank">
</head>
1
2
3

此时 a 标签直接写 href 链接地址即可

不需要再设置 target 特性了

更多使用细节,参考 (opens new window)

base 的影响是整个页面的

使用场景可能不多,但足够好用

# favicon 图标清除缓存

这个就不多说了

直接看代码

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

通过设置 ?v=20210102 快速清除 favicon 图标缓存

# spellcheck 拼写特性

输入拼写检查

比如用于 input 标签输入检查

<label for="input1">spellcheck="true"</label>
<input type="text" id="input1" spellcheck="true">
1
2

更多可见 (opens new window)

# HTML 原生 slider 滑块

slider 滑块使用场景很多

比如音量大小交互显示

范围值大小调整等

如下图:

HTML 原生 slider 滑块

源码:

<div>
  <label for="volume">音量: </label>
  <input type="range" id="volume" name="volume" min="0" max="20">
</div>
1
2
3
4

实现也很简单设置 input 标签 type="range"

可通过拖拽小圆点调整 slider 值大小

# HTML 原生折叠

不多说

先上源码:

<details>
  <summary>
    点我折叠
  </summary>

  <ul>
    <Li>1</Li>
    <Li>2</Li>
    <Li>3</Li>
    <Li>4</Li>
  </ul>
</details>
1
2
3
4
5
6
7
8
9
10
11
12

再看效果图:

HTML 原生折叠

# mark 标签高亮显示

mark 标签包裹的文本将高亮显示

<p>sit amet consectetur <mark>adipisicing</mark> elit. </p>
1

效果图:

mark 标签高亮显示

# a 标签 download 特性

实现下载文件、图片、音视频功能时

源码很简单:

<a href="资源" download>
  下载
</a>
1
2
3

值得关注的是具体的使用场景及其限制

可参考 (opens new window)

# webp 图片格式提高网站渲染速度

webp 图片格式体积更小

显示效果更佳

极大提高网站加载、渲染速度

主流浏览器已经兼容了

开发中可以用起来了:

<picture>
  <!-- 加载支持 .webp 格式图片 -->
  <source srcset="logo.webp" type="image/webp">

  <!--
	不支持时,使用 .png 图片
  -->
  <img src="logo.png" alt="logo">
</picture>
1
2
3
4
5
6
7
8
9

# video 标签 poster 特性

在视频初始时未播放前

展示提供的缩略图片

避免视频空白

增强体验

<video poster="缩略图片">
1

# input type="search" 输入框

相比 input type="text" 输入框多了删除按钮

如下图对比:

search 与 type 文本框对比

源码如下:

<form action="">
  <label for="text">search 文本框</label>
  <input type="search" id="text" name="text">
  <br />
  <label for="text2">text 文本框</label>
  <input type="text" id="text2" name="text2">
</form>
1
2
3
4
5
6
7

到此结束

以上或多或少存在浏览器兼容性问题

实际开发中

对照项目的兼容情况及 UI 的容忍度

衡量使用

兼容性可参考caniuse (opens new window)

于前端开发来说,需要了解一下滴

扫一扫,微信中打开

微信二维码