html基本结构中（点尾部链接学习html基本结构），<body>标签放置的都是网页内容信息，比如图片、音乐、文字、视频等，而<head>中放哪些内容呢？换句话说就是<head>有什么作用呢？
1. <head>标签的作用
Head就是头的意思，body是身体的意思。如果html页面是个人的话，我们看到的都是他的外表，比如发型、衣服等，这些都是穿在body（身体）上的，而这个人的服饰风格却与他的性格、教育程度、思维方式相关，这些是我们看不到的，是装在这个人的head（头）中的。
一言以蔽之，<head>标签的作用是把控HTML页面的显示形式。
首先，在<head>标签中添加<meta>标签（metadata：元数据，它是什么不重要，重要的是记住它的作用），这个标签可以为整个页面指定名称、被搜索时的关键字以及非常重要的文档字符编码（练习的时候大家就知道文档字符编码是什么意思了，现在不要纠结）等功能。
第二，在<head>标签中添加<title></title>标签为网页指定显示在浏览器小窗口上的名字。在上一篇的练习中我们写过“<title>学习写第一个网页</title>”这样一行代码，反应在浏览器上就是这样，如图1红线处。大家可以试着把“学习写第一个网页”改成其他文字试试。
第三，添加<link>标签为HTML页面引入图标、JavaScript脚本、CSS样式文件等。针对JavaScript脚本的引入，还有另外一个<script></script>标签可用。导入CSS样式文件也可以使用<style></style>标签，这个在学完HTML之后才会接触到，现在了解就可以。
通过以上学习我们知道了<head>标签中通常添加<meta>,<title></title>,<link>以及<script></script>,<style></style>等标签。这些标签控制着html文件的字符编码方式、通用图标引入、布局样式引入、交互脚本引入等功能。
如果页面都是给body穿上衣服，而穿什么样的衣服，如何搭配等因素缺是由head里的内容决定。
2. utf-8编码
简单来说，utf-8编码方式赋予了html页面显示中文（或其他非英文文字）的能力。这对今天的互联网世界来说是非常重要的功能。
utf-8这个重要的编码方式就在<head>标签中的<meta>标签中指定的。写法如下：
<head>
<meta charset="utf-8">
<title>学习写第一个网页</title>
</head>
<meta>标签不同于其他常见标签，它是个单身汉，只有这一个标签，没有带有“/”符号的结尾标签。原因有两点；1.通常<meta>标签中不需要添加内容。2.使用<meta>标签只改变他的属性即可。什么叫“属性”呢？
大家看这行代码：<meta charset="utf-8">
“charset”就叫做<meta>标签中指定字符编码方式的属性。
在“charset”后面加“=”号，这叫做指定属性值。
大家注意，指定的这个值叫““utf-8””，切记！utf-8两边要加引号！
<meta>标签还有其他属性吗？当然有！如下图所示：
表格内容来自http://www.runoob.com/tags/tag-meta.html。
左边绿色的文字是属性名，中间是属性值，描述和没说一样。初学者看到这样的表格，发现字全认识、意思嘛，隐隐约约。这是正常现象，计算机语言本身就不是人话。随着我们进一步学习，慢慢就会理解这些属性的用途了。
下面我们就目前可以看明白的<meta>属性进行一下操作练习。
开始练习之前大家肯定有这样一个问题（没想到也没关系），那就是在《边学边做网页篇——初识HTML》的案例中，那个简单的网页并没有指定utf-8的字符编码方式，为什么页面的汉字照常显示了？
这其实是浏览器本身在后台为我们补齐了这段代码。我使用的是联想自带的浏览器，使用火狐、Google浏览器的小伙伴们估计也可以正常显示，如果使用低版本的ie浏览器，则无法正常显示。因为低版本的ie浏览器不具备补齐这段代码的功能。
下面我们就做个练习演示一下。
练习一：测试不同浏览器是否自动补齐“<meta charset="utf-8">”代码。
Step1. 下载ie浏览器、下载Google浏览器，然后安装。
Step2. 找到“第一个网页.html”文件，并确定文件中没有“<meta charset="utf-8">
”这段代码，右键，分别使用ie和Google浏览器打开。
Step3. 看一下结果，如图所示：ie浏览器测试结果。
如下图所示：Google浏览器（Chrome）测试结果
Step4. 在“第一个网页.html”文件中添加“<meta charset="utf-8">”代码。如图所示：
保存后，再次使用ie浏览器打开，如图所示：中文可以正常显示了！
练习二：使用<meta http-equiv="refresh" content="5"> 代码，实现每隔5秒钟自动刷新页面的功能。
Step1. 首先为http-equiv属性添加（=）”refresh（刷新）”值；然后为content属性赋值"5"，指定刷新间隔时间。
注意：使用英文半角输入引号！
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="refresh" content="5">
<title>学习写第一个网页</title>
</head>
<body>
<h1>第一个网页</h1>
<p>随着学的内容越来越多，网页就会越来越漂亮了！</p>
</body>
</html>
Step2. 使用浏览器打开看看效果（建议使用Chrome浏览器）！
这时，看页面的话什么也看不到，因为我们的计算机的速度非常快，要想看清刷新过程，建议点击键盘上的F12键，这是页面变成了这样：
我们盯着右边的网页代码，默默计算时间，五秒时，这些代码会因为再次加载而闪烁一次！
使用笔记本或小键盘的同学可以按住Fn键再按F12键实现这个操作。
关于<head>标签我们先了解这些，下次一起看看<body>标签中如何导入文字、图片等内容！
在接下来几期的边学边做中，我们使用html代码写一个简单的电子书吧！
上一期内容《边学边做网页篇——初识HTML》：https://www.toutiao.com/i6736806921111601678/