前端进阶笔记之核心基础知识---那些HTML标签你熟悉吗？

提到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标签名称上有提示文字在闪烁。