head元素是所有头部元素的容器。head元素中可以包含脚本,指示浏览器在何处可以找到样式表,提供元信息等等,这里面内容较多的是meta元素(元数据),元数据的讲解将放置在最后,但它不是不重要,而是很重要。
title元素
<title>标签定义文档的标题。
title 元素很重要,它能够:
- 定义浏览器工具栏中的标题
- 提供页面被添加到收藏夹时显示的标题
- 显示在搜索引擎结果中的页面标题
base元素
<base>标签是单标签,能为页面上的所有链接规定默认地址或默认目标(target):
<base href="http://www.baidu.com" />
<base target="_blank" />
link元素
<link>标签定义文档与外部资源之间的关系。
<link>标签最常用于连接样式表:
<link rel="stylesheet" type="text/css" href="mystyle.css" />
style元素
<style>标签用于为当前 HTML 文档定义样式信息。
<style type="text/css">
p {color:blue}
</style>
script元素
实际上<script>标签可以放在html文档的任何位置,用于定义客户端脚本,其实就是JavaScript。
meta元素
<meta>标签是HTML文档head区的一个关键标签,提供文档字符集、使用语言、作者等基本信息,以及对关键词和网页等级的设定等。
<meta> 标签是单标签,必须位于 head 元素中。
PS:元数据中的keywords和description,对于搜索引擎的优化(SEO优化)尤其重要。
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浏览器的渲染方式以此来解决部分兼容问题
<meta http-equiv=“X-UA-Compatible” content=“IE=7”>
以上代码告诉IE浏览器,无论是否用DTD声明文档标准,IE都会以IE7引擎来渲染页面
<meta http-equiv=“X-UA-Compatible” content=“IE=edge”>
以上代码告诉IE浏览器,IE8以后的版本都会以最高版本IE来渲染界面
<meta http-equiv=“X-UA-Compatible” content=“IE=Edge,chrome=1” >
如果IE有安装Google Chrome Frame,那么就走安装的组件,如果没有就和
<meta http-equiv=“X-UA-Compatible” content=“edge”>一样。
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-->