目标

head标签的作用是什么？head标签包含了哪些元素？Meta标签包含哪两个属性？Meta标签的name属性有哪些常用的元素有哪些以及作用?Meta标签的http-equiv属性有哪些常用的元素有哪些以及作用?head标签的作用是什么？

head标签处于html结构里的第一层。

他的作用是记录和设置了这个HTML文件的很多有用的信息，比如网页标题的设置、网页的字符编码，网页是否启用缓存，选择启用浏览器内核等等，还可以引用脚本方式来减少代码量。

head的位置

head标签包含了哪些元素？Title元素 设置网页的标题Meta元素 设置网页的元数据，例如设置关键字、缓存时间、启用浏览器内核等等，是head标签最重要的元素。Meta标签包含哪两个属性？

Meta标签的属性分成两个：name和http-equiv

Meta标签的name属性

主要用于描述网页，比如定义网页的关键词，关键叙述、标注作者、标注版权等。

基本语法：

name属性基本语法

常用的属性：

关键词：keywords

说明：用于告诉搜索引擎，你网页的关键字。

<meta name="keywords" content="我是前端旺">

网站内容的描述：description.

说明：用于告诉搜索引擎，你网站的主要内容。

<meta name="description" content="前端旺，免费学习前端的好地方">

定义搜索引擎爬虫的索引方式:robots

说明：robots用来告诉爬虫哪些页面需要索引，哪些页面不需要索引。

<meta name="robots" content="none">

作者:author

说明：用于标注网页作者举例

<meta name="author" content="前端旺,296699783@qq.com">

网页制作软件:generator

说明：用于标明网页是什么软件做的举例

<meta name="generator" content="Hbuilder">

版权:copyright

说明：用于标注版权信息举例：

<meta name="copyright" content="前端旺"> 

双核浏览器渲染方式:renderer

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

<meta name="renderer" content="webkit"> //默认webkit内核<meta name="renderer" content="ie-comp"> //默认IE兼容模式<meta name="renderer" content="ie-stand"> //默认IE标准模式

Meta标签的http-equiv属性

主要用于描述网页，比如定义网页的关键词，关键叙述、标注作者、标注版权等。

基本语法：

http-equiv属性基本语法

常用的属性：

设定网页字符集:content-Type

<meta http-equiv="content-Type" content="text/html;charset=utf-8"> //旧的HTML，不推荐<meta charset="utf-8"> //HTML5设定网页字符集的方式，推荐使用UTF-8

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

说明：用于告知浏览器以何种版本来渲染页面。（一般都设置为最新模式）

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/> //指定IE和Chrome使用最新版本渲染当前页面

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

说明：指导浏览器如何缓存某个响应以及缓存多长时间。

<meta http-equiv="cache-control" content="no-cache">

cookie设定:Set-Cookie

<meta http-equiv="Set-Cookie" content="name, date"> //格式

思维导图

head标签的作用

更多前端教程，敬请关注微信公众号：前端旺