HTML文档头部head的结构与内容

head元素是所有头部元素的容器。<head></head>直接的元素可以包含脚本，指示浏览器在何处可以找到样式表，提供元信息等等，这里面内容较多的是meta元素（元数据），元数据的讲解将放置在最后，但它不是不重要，而是很重要。
在这里插入图片描述

title元素

<title>标签定义文档的标题。
title 元素很重要，它能够：

定义浏览器工具栏中的标题
提供页面被添加到收藏夹时显示的标题
显示在搜索引擎结果中的页面标题

base元素

<base>标签是单标签，能为页面上的所有链接规定默认地址或默认目标（target）：

<base href="http://www.baidu.com" />
<base target="_blank" />

link元素

<link rel="stylesheet" type="text/css" href="mystyle.css" />

style元素

<style type="text/css">
p {color:blue}
</style>

script元素

实际上<script>标签可以放在html文档的任何位置，用于定义客户端脚本，其实就是JavaScript。

meta元素

meta标签的属性

属性	属性值	描述
http-equiv	content-type、X-UA-Compatible、renderer、expires、refresh、set-cookie	把 content 属性关联到 HTTP 头部。
name	author、description、keywords、viewport、generator、revised、others	把 content 属性关联到一个名称。
content		定义与 http-equiv 或 name 属性相关的元信息

content属性

必需属性，它用来定义与 http-equiv 或 name 属性相关的元信息，多个值用逗号分隔。

name属性

可选属性，主要用于描述网页，比如网页的关键词，叙述等，与之对应的属性值为content，content中的内容是对name填入类型的具体描述，便于搜索引擎抓取。
<meta name=“参数” content=“具体的描述”>

参数	说明	用法
keywords	告诉搜索引擎网页的关键字是什么	<meta type=“keywords” content="…,…,…">
description	告诉搜索引擎网页主要内容	<meta type=“description” content="…,…,…">
Robots		定义与 http-equiv 或 name 属性相关的元信息
author	标注网页作者
generator	用于标明网页制作软件
copyright	用于标注版权信息
revisit-after	用于标注搜索引擎爬虫重访时间	<meta name=“revisit-after” content=“7 days”>
renderer	定义双核浏览器渲染方式
viewport	用于设置移动端网页视窗	<meta name=“viewport” content=“width=device-width, initial-scale=1”>
applicable-device	与viewport配合使用，目的是对于自适应网页，让百度更好地识别我们的页面是 PC 还是 Mobile。	<meta name=“applicable-device” content=“pc,mobile”>

viewport(移动端的视区)

viewport的话题有些复杂，将在移动端布局的教程中具体讲解。

renderer（双核浏览器渲染方式）

renderer是为双核浏览器准备的，用于指定双核浏览器默认以何种方式渲染页面。比如说360浏览器。

<meta name="renderer" content="webkit">  默认用极速核，强制浏览器使用极速模式，按W3C标准渲染页面 
<meta name="renderer" content="ie-comp"> 默认用ie兼容内核 
<meta name="renderer" content="ie-stand"> 默认用ie标准内核
<meta name="renderer" content="webkit|ie-comp|ie-stand">   推荐书写方式

推荐方式的意思是按照书写内核的顺序优先级如下：
首先强制浏览器优先使用webkit内核（极速内核）
如果浏览器没有webkit内核，则按照用户浏览器所支持的最新的ie的Trident内核渲染页面（ie兼容内核）
否则某种按照当前浏览器的标准内核渲染（ie标准内核）
多个内核名称，之间以符号”|”进行分隔

http-equiv属性

可选属性，相当于http的文件头作用，用于向浏览器传递一些有用的信息，以帮助正确和精确地显示网页内容，与之对应的属性为content。
<meta http-equiv=“参数” content=“具体的描述”>

参数	说明	用法
content-Type	设定页面使用的字符集	<<meta http-equiv=“Content-Type” content=“text/html; charset=utf-8” >
X-UA-Compatible	是 IE 浏览器在 IE8 版本开始提供的一个特性	<meta http-equiv=“X-UA-Compatible” content=“IE=Edge,chrome=1” >
cache-control	指定请求和响应遵循的缓存机制	<meta http-equiv=“cache-control” content=“no-cache”>
expires	用于设定网页的到期时间，过期后网页必须到服务器上重新传输	<meta http-equiv=“expires” content=“Sunday 26 October 2016 01:00 GMT” >
refresh	网页将在设定的时间内，自动刷新并调向设定的网址	<meta http-equiv=“refresh” content=“3;URL=http://www.baidu.com /”>
Set-Cookie	如果网页过期,那么这个网页存在本地的cookies也会被自动删除	<meta http-equiv=“Set-Cookie” content=“cookievalue=xxx; expires=Friday, 12-Jan-2001 18:18:18 GMT; path=/”>

content-type (字符集)

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

html5简化为

<meta charset="UTF-8">

X-UA-Compatible(IE浏览器采取何种版本渲染当前页面)

IE的专用标记，是用于指定IE浏览器去模拟某个特定版本的IE浏览器的渲染方式以此来解决部分兼容问题

cache-control(指定请求和响应遵循的缓存机制)

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

2.用于移动端禁止百度自动转码
用于禁止当前页面在移动端浏览时，被百度自动转码。虽然百度的本意是好的，但是转码效果很多时候却不尽人意。
<meta http-equiv=“Cache-Control” content=“no-siteapp” >
但实际并一定有效果，下面是网上收集的禁止百度转码的代码:

<!--百度转码 解决方法 start-->
<meta http-equiv="X-UA-Compatible" content="chrome=1"/>
<meta name="applicable-device"content="pc,mobile"/>
<meta http-equiv="Cache-Control" content="no-transform"/>
<meta http-equiv="Cache-Control" content="no-siteapp"/>
<!--百度转码 解决方法 end-->