重学前端（九）-head-CSDN博客

元信息：描述自身的信息，元信息类标签，就是 HTML 用于描述文档自身的一类标签，它们通常出现在 head 标签中，一般都不会在页面被显示出来（与此相对，其它标签，如语义类标签，描述的是业务）。

一、定义和用法

<head> 标签用于定义文档的头部，它是所有头部元素的容器。

<head>中的元素可以引用脚本、指示浏览器在哪里找到样式表、提供元信息等等。
复制代码

文档的头部描述了文档的各种属性和信息，包括文档的标题、在 Web 中的位置以及和其他文档的关系等。绝大多数文档头部包含的数据都不会真正作为内容显示给读者。

下面这些标签可用在 head 部分：

<base>, <link>, <meta>, <script>, <style>, 以及 <title>。

<title> 定义文档的标题，它是 head 部分中唯一必需的元素。
复制代码

二、提示和注释

提示：应该把标签放在文档的开始处，紧跟在后面。

提示：请记住始终为文档规定标题！

三、title标签

<title>title</title>

网页的标题标签有效长度是64个字节，汉语是32个字。长出来的部分无益有弊。
每个页面的Title标签不能相同，首页与列表页、详情页、内容页的标签不能一致，根据网页提供的内容的不同，设置合适的Title标签。
标题标签中务必出现这个页面的关键词，或者关键字词组。关键词和关键字词组的位置也有关系。同样条件下，搜索引擎优先考虑关键词和关键字词组靠前的。
标题标签中可以出现网站名字，这样能慢慢让我们的网站形成品牌意识。
一个网页，不管多大多小，如果推广很多个关键词就要建立目录，多做新的关键词相关的网页。
Title标签设置要与内容相关，可以设置使用标题、关键字、概述等。
Title标签尽量要有原创性、修改性，采编过来的内容，不要拿来即用，要适当的修改，添加些原创因素，有助于提高网页搜索引擎的收录。

写法

1）<title>网页标题-网页概述</title>
2）<title>网页概述-网页标题</title>
3）<title>网页标题</title>
4）<title>关键词1-关键词2-关键词3-网页标题</title>
5）<title>关键词1、关键词2、关键词3-网页标题</title>
6）<title>关键词|关键词2|关键词3-网页标题</title>
7）<title>关键词,关键词2,关键词3-网页标题</title>
8）<title>网页标题-关键词,关键词2,关键词3</title>
9）网页的标题标签（Title Tag）规范化例子：
复制代码

四、meta标签

1、定义和用法

meta元素可提供有关页面的元信息（meta-information），比如针对搜索引擎和更新频度的描述和关键词。

meta 标签位于文档的头部，不包含任何内容。meta 标签的属性定义了与文档相关联的名称/值对。

meta 标签永远位于 head 元素内部。

<meta name="author" content=""/>             <!--  作者  -->
<meta name="copyright" content=""/>          <!--  版权  -->
<meta name="keywords" content=""/>           <!--  关键字 -->
<meta name="description" content=""/>        <!--  描述  -->
<meta name="revisit-after" content="7 days" ><!--搜索引擎爬虫重访时间-->
<meta name="robots" content="none">          <!--  定义搜索引擎爬虫的索引方式  -->


<!-- IE兼容谷歌-->
    
复制代码

2、http-equiv

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><!-- IE兼容谷歌-->
<meta http-equiv="expires" content="Fri,01Jan201618:18:18GMT"><!-- 设置期限-->
<meta http-equiv="cache-control" content="no-cache"><!-- 缓存机制-->
复制代码

no-cache: 先发送请求，与服务器确认该资源是否被更改，如果未被更改，则使用缓存。
no-store: 不允许缓存，每次都要去服务器上，下载完整的响应。（安全措施）
public : 缓存所有响应，但并非必须。因为max-age也可以做到相同效果
private : 只为单个用户缓存，因此不允许任何中继进行缓存。（比如说CDN就不允许缓存private的响应）
maxage : 表示当前请求开始，该响应在多久内能被缓存和重用，而不去服务器重新请求。例如：max-age=60表示响应可以再缓存和重用 60 秒。

3、viewport

<meta name="viewport" content="width=device-width, initial-scale=1"><!--  移动端的窗口  -->
复制代码

width：页面宽度，可以取值具体的数字，也可以是 device-width，表示跟设备宽度相等。
height：页面高度，可以取值具体的数字，也可以是 device-height，表示跟设备高度相等。
initial-scale：初始缩放比例。
minimum-scale：最小缩放比例。
maximum-scale：最大缩放比例。
user-scalable：是否允许用户缩放。

meta属性太多！！！毕竟可以自己定义