你真的熟悉Html吗？

一、meta标签

1、如何实现ppt自动播放的功能？

<meta http-equiv="Refresh" content="5;URL=page.html">

上述代码将会在5s后跳转至page.html页面，因此只需要在每个页面设置好下一个页面的路径即可实现ppt页面自动跳转

2、每隔1分钟刷新页面的大屏监控

<meta http-equiv="Refresh" content="60">

为什么比较少用？

1、缺乏了解

2、刷新和跳转是不可取消的，对于定时刷新或取消的场景中还是需要使用js定时器

二、title标签

1、消息提醒

html5发布之前浏览器并没有开放图标闪烁，弹出消息等接口。只能借助一些hack手段。

可以通过定时修改title标签内容来模拟消息闪烁，以此来提示用户新消息

let msgNum = 1
let count = 0
const inerval = setInterval(()=>{
  count = (count+1)%2
  if(msgNum === 0){
    document.title += '聊天页面' 
    clearInterval(inerval)
    return
  }
  const prefix = count%2?`您有新消息${msgNum}条`:''
  document.title = `${prefix}聊天页面`
}，1000)

上述代码通过模拟浏览器标签也的title可以让用户在浏览其他页面时及时收到服务器给到的消息，也可以增加其他动画效果，例如文字滚动（需要注意，浏览器会自动去除title的空格）

其他的应用场景：下载进度、当前操作步骤

html5之后可以采用Web Notifications API 来弹出系统消息

三、script

1、性能优化：调整加载顺序，提升渲染速度

渲染引擎在解析html时，若遇到script标签引用文件时，则会暂停解析过程，同时通知网络线程加载文件，文件加载完毕后切换着js引擎来执行js代码，代码执行完后继续使用渲染引擎渲染页面，因此在项目的首屏渲染时，会有一部分时间用来加载文件和执行代码，但可能首屏并不依赖这部分文件和代码。从而降低了用户体验。

为了减少这些时间的损耗，可以借助script的三个属性：

async ：立即请求文件但不阻塞渲染引擎，文件加载完毕后阻塞渲染引擎并立即执行文件内容。

defer ：立即请求文件，但不阻塞渲染引擎，等到解析完html之后再执行文件内容。

html5中的type属性，对应值为module : 让浏览器按照es6标准将文件当作模块进行解析默认阻塞效果同defer，也可以配合async在请求完成后立即执行。

如上，三种属性都能减少请求文件引起的阻塞时间，只有type=‘module’和defer能保证渲染引擎优先执行，从而减少执行文件的内容消耗的时间，让用户更快看到页面，减少等待时间。

四、link

1、通过预处理提升渲染速度

dns-prefetch：当link标签的rel属性值为“dns-prefetch”时，浏览器会对某个域名先进行dns解析并缓存。这样当浏览器请求同域名资源时，能省去域名-ip的查询过程。从而减少请求时间。

下图是淘宝网的dns预解析：

precontnect：让浏览器在一个http请求正式发起之前先进行一下操作包括dns解析，TLS协商，TCP握手，通过消除往返的延迟时间来为用户节省时间。

prefecth/preload : 两个值都是让浏览器预先下载并缓存某个资源，但不同的是prefecth可能会在浏览器忙时被忽略，而preload一定会预先下载。

prerender：浏览器不仅会加载资源，还会解析执行页面，进行预渲染。

上图为浏览器获取资源文件的过程。

五、meta和link - 搜索优化：时搜索引擎更好的理解和收录页面

1、meta：提取关键信息，当在搜索引擎中搜索时可以方便用户预览搜素到的结果。

上图为拉勾网的关键字。

在实际工作中推荐使用一些工具来挑选关键字，例如Google Trend、站长工具可以查看一些全网搜索 指数及关键词特点等。

2、link：减少重复，合并网址，避免搜索引擎花费时间抓取相同网页。（一般存在于同一个页面有多个网址的情况下）

合并网址的其他方式：使用站点地图，或者http请求响应头部添加rel=“canonical”

3、meta：OGP （open graph protocal）开放图表协议

通过增加文档信息来提升社交网页在被分享时的预览效果。只需要在分享页面的Meta标签中添加一些内容，就会在解析页面时生成一些预览信息，如站点名称，网页作者等

上图为腾讯文章对ogp的支持