本文是基于此的实践补充
废话不多说
# img 标签 loading 特性
图片懒加载
较常用的性能优化方式之一
但浏览器原生实现了
<img src='image.jpg' loading='lazy' alt='img loading'>
兼容性需提高
另外,影响懒加载因素很多
比如:屏幕高度、网速、滚动条滚动、浏览器窗口 resize 尺寸变化等
但话说回来
如果是内部系统
又没那么多要求
用起来就是
提高一点是一点
# a 标签 email、call、sms 链接取值
没啥好说的,看例子
# html 实现拨打电话
<a href="tel:18xxxx">
联系我
</a>
2
3
# html 实现发送邮件
<a href="mailto:xxx@163.com?subject=上线申请&body=各位领导。。。">
发送邮件
</a>
2
3
# html 实现发送短信
<a href="sms:185xxxx">
亲,在不
</a>
2
3
# ol 标签的 start 特性
ol
是有序列表
默认从 1
开始
如果从 10
开始呢?
使用 start 特性设置起始:
<ol start="10">
<li>111</li>
<li>222</li>
</ol>
2
3
4
# meter 标签
开始以为是 meta
标签
仔细看是 meter
标签
计量(器)标签,显示已知范围的值
比如显示 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>
2
效果图:
另外配合 low、hign
特性
会根据不同的范围取值显示不同的进度条颜色
如上 Chrome 浏览器显示为例:
[0, 30)区间:进度条红色
[30, 75)区间:进度条橙色
[75, 100]区间:进度条绿色
不同浏览器进度条颜色可能有差异
# 原生 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>
2
3
4
5
6
7
8
9
10
不多说,满足基本业务需求,爽
# fieldset 标签分组
把选择分组选择且有明显 UI 界线区分
fieldset + legend 是比较不错的组合
而且是原生标签,原生 UI 支持
如下图:
源码如下:
<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>
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>
2
3
此时在新标签页访问 window.opener 时返回 null
# base 标签
页面中所有 a 链接都在新的浏览器标签页打开时
如下设置:
<head>
<base target="_blank">
</head>
2
3
此时 a
标签直接写 href 链接地址即可
不需要再设置 target 特性了
更多使用细节,参考 (opens new window)
base
的影响是整个页面的
使用场景可能不多,但足够好用
# favicon 图标清除缓存
这个就不多说了
直接看代码
<link rel="icon" href="/favicon.ico?v=20210102" />
通过设置 ?v=20210102
快速清除 favicon 图标缓存
# spellcheck 拼写特性
输入拼写检查
比如用于 input 标签输入检查
<label for="input1">spellcheck="true"</label>
<input type="text" id="input1" spellcheck="true">
2
# HTML 原生 slider 滑块
slider 滑块使用场景很多
比如音量大小交互显示
范围值大小调整等
如下图:
源码:
<div>
<label for="volume">音量: </label>
<input type="range" id="volume" name="volume" min="0" max="20">
</div>
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>
2
3
4
5
6
7
8
9
10
11
12
再看效果图:
# mark 标签高亮显示
mark 标签包裹的文本将高亮显示
<p>sit amet consectetur <mark>adipisicing</mark> elit. </p>
效果图:
# a 标签 download 特性
实现下载文件、图片、音视频功能时
源码很简单:
<a href="资源" download>
下载
</a>
2
3
值得关注的是具体的使用场景及其限制
# webp 图片格式提高网站渲染速度
webp
图片格式体积更小
显示效果更佳
极大提高网站加载、渲染速度
主流浏览器已经兼容了
开发中可以用起来了:
<picture>
<!-- 加载支持 .webp 格式图片 -->
<source srcset="logo.webp" type="image/webp">
<!--
不支持时,使用 .png 图片
-->
<img src="logo.png" alt="logo">
</picture>
2
3
4
5
6
7
8
9
# video 标签 poster 特性
在视频初始时未播放前
展示提供的缩略图片
避免视频空白
增强体验
<video poster="缩略图片">
# input type="search" 输入框
相比 input type="text"
输入框多了删除按钮
如下图对比:
源码如下:
<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>
2
3
4
5
6
7
到此结束
以上或多或少存在浏览器兼容性问题
实际开发中
对照项目的兼容情况及 UI 的容忍度
衡量使用
兼容性可参考caniuse (opens new window)
于前端开发来说,需要了解一下滴
扫一扫,微信中打开