131-html-3-元信息
元信息类标签(head、title、meta)的使用目的和配置方法
meta存在两个非必须的属性http-equiv和name, 用于表示要设置的项。
meta有个必须的属性content用于表示需要设置的项的值。
http-equiv
// http-equiv一般设置的都是与http请求头相关的信息
// 声明文档类型、设字符集
<meta http-equiv="content-type" content="text/html; charset=utf-8">
// 自动将http的不安全请求升级为https
<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">
// 以最高版本的IE来渲染页面
<meta http-equiv="X-UA-Compatible" content="IE=edge">
// 用于设置浏览器的过期时间, 其实就是响应头中的expires属性。
<meta http-equiv="expires" content="31 Dec 2021">
// 重新载入页面的时间间隔,或重定向到指定链接的时间间隔
<meta http-equiv="refresh" content="3;url=https://www.mozilla.org">
// 强制页面在当前窗口以独立页面显示
<meta http-equiv="window-target" content="_top'>
// 禁止浏览器从本地计算机的缓存中访问页面的内容
<meta http-equiv="pragma" content="no-cache">
name
// name属性主要用于描述网页，与对应的content中的内容主要是便于搜索引擎查找信息和分类信息用的
author：文档作者的名字。
description：一段简短而精确的、对页面内容的描述。一些浏览器，比如 Firefox 和 Opera，将其用作书签的默认描述。
keywords：与页面内容相关的关键词，使用逗号分隔。
generator：生成此页面的软件的标识符（identifier）。
CSS 设备适配规范
// 自动以原始比例显示，并且不允许用户缩放
<meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1, maximum-scale=1, user-scalable=no"/>
og
// Facebook 编写的元数据协议 Open Graph Data 为网站提供了更丰富的元数据。
<meta property="og:type" content="website" />
<meta property="og:url" content="要分享的链接" />
<meta property="og:title" content="标题" />
<meta property="og:description" content="简介" />
<meta property="og:image" content="图片" />
<meta property="og:site_name" content="O課" />
let titleMeta = document.createElement('meta')
titleMeta.setAttribute('property', 'og:title')
titleMeta.content = 'hello'
document.getElementsByTagName('head')[0].appendChild(titleMeta)
参考
https://juejin.cn/post/6987919006468407309
https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/meta/name