文章目录
提到HTML标签,我们会非常熟悉,开发中经常使用。但我们往往关注更多的是页面渲染效果及交互逻辑,也就是对用户可见可操作的部分,比如表单、菜单栏、列表、图文等。其实还有一些非常重要却容易忽视的标签,这些标签大多数用在页面头部head标签内,虽然对用户不可见,但如果在某些场景下,比如交互实现、性能优化、搜索优化,合理利用它们可以让我们在开发中达到事半功倍的效果。
1、交互实现
在实现一个功能的时候,我们编写的代码越多,不仅开发成本越高,而且代码的健壮性也越差。因此我们在开发中提倡编码简约原则:Less code, less bug
1.1 meta标签:自动刷新/跳转
meta标签妙用场景一:假如每隔一分钟就需要刷新页面,这个时候就可以用到meta标签:
<meta http-equiv="Refresh" content="60">
meta标签妙用场景二:假如想让某个页面在对用户展示一段时间后,然后跳转到其他页面去,也可用到meta标签:
<meta http-equiv="Refresh" content="5; URL=page2.html">
上面这行代码的意思是当前页面展示5s之后,跳转到page2.html页面去。
1.2 title标签:消息提醒
B/S架构有很多优点,比如版本更新方便、跨平台、跨终端,但在处理某些场景时,比如即时通信时,会变得有点麻烦。
因为前后端通信深度依赖HTTP协议,而HTTP协议采用“请求-响应”模式,这就决定了服务端也只能被动地发送数据。一种低效的解决方案是客户端通过轮询机制获取最新消息(HTML5下可使用WebSocket协议)。
另外在HTML5标准发布之前,浏览器没有开放图标闪烁、弹出系统消息之类的接口,因此消息提醒功能实现比较困难。但是我们可以通过修改title标签来达到类似的效果(HTML5下可使用Web Notifications API弹出系统消息)。
下面这段代码,通过定时修改title标签内容,模拟了类似消息提醒的闪烁效果:
let msgNum = 1 // 消息条数
let cnt = 0 // 计数器
const inerval = setInterval(() => {
cnt = (cnt + 1) % 2
if(msgNum===0) {
// 通过DOM修改title
document.title += `聊天页面`
clearInterval(interval)
return
}
const prefix = cnt % 2 ? `新消息(${msgNum})` : ''
document.title = `${prefix}聊天页面`
}, 1000)
实现效果如下图所示,可以看到title标签名称上有提示文字在闪烁。