9.头部 head 里可以有哪些标签

title标签

title 标签表示的是网页的标题。

title 在浏览器收藏夹、微信推送卡片、微博还有各种分享的时候， title 标签内的内容需要对当前页面的内容做个总的概况。

base标签

base 指定用于一个文档中包含的所有相对 URL 的根 URL。一份中只能有一个元素。

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>和我刘华强拼，你有这实力嘛</title>
    <base href="wuxin.netlify.com" target="_blank/_parent/_self/_top/framename">
</head>

可以使用 document.baseURI 获取当前页面的基准路径
basedocument.baseURI="https://www.baidu,com**"
这个标签容易跟 JavaScript 脚本配合出错，所以不建议使用

meta标签

表示那些不能由其它HTML元相关元素 > > (<base>, <link>, <script>, <style> 或 <title>) 之一表示的任何元数据信息，通常是那种键值对形式的。他除了一些基础用法，还包括一些变体，主要是用来简化书写方式以及简化自动化行为

charset属性

这个元素描述了这个 HTML 文档是以何种文档编码的。
charsetmetahead 标签的最前面，这样在页面解析的时候不会乱码。
1
2
3
<head>
<meta charset="UTF-8">
</head>

http-equiv属性

这个枚举属性定义了能改变服务器和用户引擎行为的编译

他的值有很多 content-language（过时,已经使用lang属性代替）、content-type（）、content-security-policy（内容安全策略）

content-security-policy

用于指定的服务端源以及脚本端点，有助于防止脚本攻击

1	<meta http-equiv="content-security-policy" content="default-src https:地址">

具体的值很多，详情可以参照 MDN的Content-Security-Policy

content-type

用于指定文档的 MIME TYPE

1 2	/这个指定http协议下，文件的编码格式/ <meta http-equiv="content-type" content="text/html; charset=UTF-8">

因为是写在 HTMLtext/html** 才有效果。设置其他的起不了作用
这类 metacharsetlang 给代替了

default-style

这个属性可以定义，页面加载的首选样式

refresh（刷新）

这个属性指定:

如果 [content](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/meta#attr-content) 只包含一个正整数,则是重新载入页面的时间间隔(秒);
如果 *[content](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/meta#attr-content) *包含一个正整数并且跟着一个字符串,则是重定向到指定链接的时间间隔(秒)

x-ua-compatible：模拟 http 头 x-ua-compatible，声明 ua 兼容

viewport属性

它提供有关视口初始大小的提示，仅供移动设备使用。

1	<meta name="viewport" content="width=device-width, initial-scale=1.0">

它的值有：

widthdevice-width** ，表示跟设备宽度相等。
heightdevice-height** ，表示跟设备高度相等。
initial-scale ：初始缩放比例。
minimum-scale ：最小缩放比例。
maximum-scale ：最大缩放比例。
user-scalable ：是否允许用户缩放。

这个属性不是HTML标准里的，是行业规范的

其他的属性

author : 页面作者。
description ：页面描述，这个属性可能被用于搜索引擎或者其它场合。
generator : 生成页面所使用的工具，主要用于可视化编辑器，如果是手写 HTML 的网页，不需要加这个 meta。
keywords : 页面关键字，对于 SEO 场景非常关键。
referrer : 跳转策略，是一种安全考量。
theme-color : 页面风格颜色，实际并不会影响页面，但是浏览器可能据此调整页面之外的 UI（如窗口边框或者 tab 的颜色）。

常见的meta设置

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<!-- 默认使用最新浏览器 -->
<meta http-equiv="Cache-Control" content="no-siteapp">
<!-- 不被网页(加速)转码 -->
<meta name="robots" content="index,follow">
<!-- 搜索引擎抓取 -->
<meta name="renderer" content="webkit">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui">
<meta name="apple-mobile-web-app-capable" content="yes">
<!-- 删除苹果默认的工具栏和菜单栏 -->
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<!-- 设置苹果工具栏颜色 -->

关闭 *iOS *内容识别

<meta name="format-detection" content="telephone=no">
<meta name="format-detection" content="date=no">
<meta name="format-detection" content="address=no">
<meta name="format-detection" content="email=no">

其他的标签

Open Graph 的标签组，包括 title, type, URL, site_name, description 和 image ，是为 **Facebook 分享提供信息；
Twitter 的标签组，包括 card, title, description 和 image ，是为 Twitter 分享提供信息；
msapplication 的标签组，包括 TileColor 和 TileImage ，是为 Windows 8 以及以上系统识别 favicons 用的。