在上一节，我们学习了HTML页面的基本结构，也知道head标签是比较特殊的。事实上，只有一些特殊的标签才能放在head标签内，其他大部分标签都是放在body标签内的。
这一节涉及的内容比较抽象，也缺乏实操性，因为这些标签都是实战开发才用得到，而练习中一般用不到。那么为什么要在教程初期就来给大家介绍head标签呢？其实，这也是为了让小伙伴们有一个清晰流畅的学习思路，先把“页头”学了，再来学“页身”。
在这一节的学习中，我们只需要了解head标签内部都有哪些子标签，这些标签都有什么用就可以了。记不住没关系，至少有个大概的印象。等我们学到后面需要用到的时候，再回来翻一下这里。
在HTML中，一般来说，只有6个标签能放在head标签内。
- （1）title标签
- （2）meta标签
- （3）link标签
- （4）style标签
- （5）script标签
- （6）base标签
一、title标签
在HTML中，title标签唯一的作用就是定义网页的标题。
举例：
<!DOCTYPE html>
<html>
<head>
<title>绿叶学习网</title>
</head>
<body>
<p>绿叶学习网，给你初恋般的前端教程。</p>
</body>
</html>
浏览器预览效果如下图所示。
分析：
在这个页面中，网页标题就是“绿叶学习网”。在学习的过程中，为了方便，我们没必要在每一个页面都写上title。不过在实际开发中，是要求在每一个页面都写上的title的。
二、meta标签
在HTML中，meta标签一般用于定义页面的特殊信息，例如页面关键字、页面描述等。这些信息不是提供给用户看的，而是提供给搜索引擎蜘蛛（如百度蜘蛛、谷歌蜘蛛）看的。简单来说，meta标签就是用来告诉“搜索蜘蛛”这个页面是干嘛的。
注：在Web技术中，我们一般形象地称搜索引擎为“搜索蜘蛛”或“搜索机器人”。
在HTML中，meta标签有两个重要的属性：name和http-equiv。
1．name属性
我们先来看一个简单实例，代码如下。
<!DOCTYPE html>
<html>
<head>
<!--网页关键字-->
<meta name="keywords" content="绿叶学习网,前端开发,后端开发" />
<!--网页描述-->
<meta name="description" content="绿叶学习网是一个最富有活力的Web技术学习网站" />
<!--本页作者-->
<meta name="author" content="helicopter" />
<!--版权声明-->
<meta name="copyright" content="本站所有教程均为原创，版权所有，禁止转载。否则必将追究法律责任。" />
</head>
<body>
</body>
</html>
从上面这个简单例子，我们来总结一下meta标签的name属性的几个取值，如下表所示。
| 属性值 | 说明 |
|---|---|
| keywords | 网页的关键字，可以是多个，而不仅仅是一个 |
| description | 网页的描述 |
| author | author |
| copyright | 版权信息 |
上表只是列举了最常用的几个属性值。在实际开发中，我们一般只会用到keywords和description。也就是说记住这两个就可以了，其他的都不用管。
2．http-equiv属性
在HTML中，meta标签的http-equiv属性只有两个重要作用：定义网页所使用的编码；定义网页自动刷新跳转。
（1）定义网页所使用的编码
语法：
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
说明：
这段代码告诉浏览器该页面所使用的编码是utf-8。不过在HTML5标准中，上面这句代码可以简写为：
<meta charset="utf-8" />
如果你发现页面打开是乱码，很可能就是没有加上这一句代码。在实际开发中，为了确保不出现乱码，我们必须要在每一个页面中加上。
（2）定义网页自动刷新跳转
语法：
<meta http-equiv="refresh" content="6;url=http://www.baidu.com"/>
说明：
这段代码表示当前页面在6秒后会自动跳转到http://www.baidu.com这个页面。实际上，很多“小广告”网站就是用这个来实现页面定时跳转的。
举例：
<!DOCTYPE html>
<html >
<head>
<meta http-equiv="refresh" content="6;url=http://www.baidu.com"/>
</head>
<body>
<p>这个页面在6秒之后自动跳转到百度首页</p>
</body>
</html>
分析：
我们可以在HBuilder中输入这段代码，然后在浏览器打开，过了6秒钟，页面就会跳转到百度首页。
三、style标签
在HTML中，style标签用于定义元素的CSS样式，在HTML中不需要深入研究，在CSS中我们再详细介绍。
语法：
<!DOCTYPE html>
<html >
<head>
<style type="text/css">
/*这里写CSS样式*/
</style>
</head>
<body>
</body>
</html>
四、script标签
在HTML中，script标签用于定义页面的JavaScript代码，也可以引入外部JavaScript文件。在JavaScript部分中我们会详细介绍，这里不需要深究。
语法：
<!DOCTYPE html>
<html >
<head>
<script>
/*这里写JavaScript代码*/
</script>
</head>
<body>
</body>
</html>
五、link标签
在HTML中，link标签用于引入外部样式文件（CSS文件）。这也是属于CSS部分的内容，这里不需要深究。
语法：
<!DOCTYPE html>
<html >
<head>
<link type="text/css" rel="stylesheet" href="css/index.css">
</head>
<body>
</body>
</html>
六、base标签
这个标签一点意义都没有，可以直接忽略，知道有这么一个标签就行了。
